From 6c64dffaf6963bb0689ca55f6e2d155ee5e1d22f Mon Sep 17 00:00:00 2001
From: superyan <superyan@devide>
Date: Mon, 2 Sep 2024 14:50:00 +0800
Subject: [PATCH] Mon Sep  2 14:50:00 CST 2024 inscode

---
 src/App.vue                    |  75 ++-
 src/components/ResultsPage.vue | 926 +++++++++++++++++++++++++++++++++
 src/components/SearchPage.vue  | 712 +++++++++++++++++++++++++
 3 files changed, 1672 insertions(+), 41 deletions(-)
 create mode 100644 src/components/ResultsPage.vue
 create mode 100644 src/components/SearchPage.vue

diff --git a/src/App.vue b/src/App.vue
index 633a5df..51d1f2b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,47 +1,40 @@
-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div id="app">
+    <SearchPage v-if="currentPage === 'search'" @search="handleSearch" />
+    <ResultsPage v-else :searchQuery="searchQuery" @back="goToSearch" />
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
+<script>
+import SearchPage from './components/SearchPage.vue';
+import ResultsPage from './components/ResultsPage.vue';
+
+export default {
+  name: 'App',
+  components: {
+    SearchPage,
+    ResultsPage
+  },
+  data() {
+    return {
+      currentPage: 'search',
+      searchQuery: ''
+    };
+  },
+  methods: {
+    handleSearch(query) {
+      this.searchQuery = query;
+      this.currentPage = 'results';
+    },
+    goToSearch() {
+      this.currentPage = 'search';
+    }
   }
+};
+</script>
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+<style>
+#app {
+  font-family: Arial, sans-serif;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/ResultsPage.vue b/src/components/ResultsPage.vue
new file mode 100644
index 0000000..d2763ed
--- /dev/null
+++ b/src/components/ResultsPage.vue
@@ -0,0 +1,926 @@
+<template>
+    <div class="page flex-col">
+      <div class="block_1 flex-col">
+        <!-- Status bar -->
+        <div class="group_1 flex-row">
+          <span class="text_1">9:41</span>
+          <div class="group_2 flex-col"></div>
+          <div class="group_3 flex-col"></div>
+          <img
+            class="image_1"
+            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd25660d878c1c723ef4b6d3179f8fc88.png"
+          />
+        </div>
+        <!-- Header -->
+        <div class="group_4 flex-row">
+          <div class="group_5 flex-row">
+            <img
+              class="thumbnail_1"
+              src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG715af45decd916ba1800cb4e2a7551c7.png"
+            />
+            <span class="text_2">iAON AI Search</span>
+            <img
+              class="thumbnail_2"
+              src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG3a72b01e44112e9b2907ba6d3ce1405f.png"
+            />
+            <div class="group_6 flex-col"></div>
+            <div class="group_7 flex-col"></div>
+          </div>
+        </div>
+        <!-- Search query -->
+        <div class="text-wrapper_1 flex-row">
+          <span class="text_3">{{ searchQuery }}</span>
+        </div>
+      </div>
+      <!-- Search results -->
+      <div class="block_2 flex-col">
+        <!-- Result items -->
+        <div v-for="(result, index) in searchResults" :key="index" class="block_9 flex-row justify-between">
+          <div class="box_4 flex-col">
+            <div class="text-wrapper_3 flex-row justify-between">
+              <span class="text_6">{{ index + 1 }}.</span>
+              <span class="text_7">{{ result.title }}</span>
+            </div>
+            <span class="text_8">{{ result.description }}</span>
+            <div class="section_4 flex-row justify-between">
+              <div class="group_16 flex-col"></div>
+              <span class="text_9">{{ result.url }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- Back button -->
+      <div class="block_14 flex-col" @click="goBack">
+        <span>Back to Search</span>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      searchQuery: {
+        type: String,
+        required: true
+      }
+    },
+    data() {
+      return {
+        searchResults: [
+          {
+            title: '自己动手实现一个AI搜索引擎！ 原创',
+            description: '2024年4月11日 — 首先，我们定义一个Tools 类，该blog.csdn.net',
+            url: 'blog.csdn.net'
+          },
+          // Add more mock results here
+        ]
+      };
+    },
+    methods: {
+      goBack() {
+        this.$emit('back');
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+ .page {
+  background-color: rgba(255, 255, 255, 1);
+  position: relative;
+  width: 375px;
+  height: 1252px;
+  overflow: hidden;
+}
+
+.block_1 {
+  width: 375px;
+  height: 89px;
+}
+
+.group_1 {
+  width: 341px;
+  height: 18px;
+  margin: 15px 0 0 21px;
+}
+
+.text_1 {
+  width: 54px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 15px;
+  letter-spacing: -0.30000001192092896px;
+  font-family: SF Pro Text-Semibold;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 15px;
+}
+
+.group_2 {
+  background-color: rgba(25, 33, 61, 1);
+  width: 17px;
+  height: 11px;
+  margin: 3px 0 0 219px;
+}
+
+.group_3 {
+  background-color: rgba(25, 33, 61, 1);
+  width: 16px;
+  height: 11px;
+  margin: 3px 0 0 5px;
+}
+
+.image_1 {
+  width: 25px;
+  height: 12px;
+  margin: 3px 0 0 5px;
+}
+
+.group_4 {
+  width: 375px;
+  height: 44px;
+  margin-top: 11px;
+}
+
+.group_5 {
+  background-color: rgba(255, 255, 255, 1);
+  position: relative;
+  width: 375px;
+  height: 44px;
+}
+
+.thumbnail_1 {
+  width: 9px;
+  height: 18px;
+  margin: 13px 0 0 18px;
+}
+
+.text_2 {
+  width: 118px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(28, 28, 40, 1);
+  font-size: 16px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 11px 0 0 105px;
+}
+
+.thumbnail_2 {
+  width: 15px;
+  height: 15px;
+  margin: 15px 20px 0 90px;
+}
+
+.group_6 {
+  position: absolute;
+  left: 12px;
+  top: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+.group_7 {
+  position: absolute;
+  left: 335px;
+  top: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+.text-wrapper_1 {
+  width: 119px;
+  height: 16px;
+  margin: 252px 0 0 387px;
+}
+
+.text_3 {
+  width: 119px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.text-wrapper_2 {
+  width: 75px;
+  height: 16px;
+  margin: 28px 0 311px 394px;
+}
+
+.text_4 {
+  width: 75px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.block_2 {
+  position: relative;
+  width: 375px;
+  height: 724px;
+  margin-top: -1px;
+}
+
+.block_3 {
+  width: 343px;
+  height: 20px;
+  margin: 10px 0 0 16px;
+}
+
+.group_8 {
+  background-color: rgba(25, 33, 61, 1);
+  height: 16px;
+  margin-top: 2px;
+  width: 16px;
+}
+
+.box_1 {
+  width: 16px;
+  height: 16px;
+}
+
+.group_9 {
+  border-radius: 9999px;
+  height: 16px;
+  width: 16px;
+  margin: 2px 0 0 16px;
+}
+
+.group_10 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_5 {
+  width: 71px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 12px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 2px 0 0 4px;
+}
+
+.image-text_1 {
+  width: 50px;
+  height: 20px;
+  margin-left: 134px;
+}
+
+.text-group_1 {
+  width: 26px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 14px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-top: 2px;
+}
+
+.block_4 {
+  height: 20px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd1a05d06d5bf2038ff730ba374addebd.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 20px;
+}
+
+.box_2 {
+  width: 20px;
+  height: 20px;
+}
+
+.thumbnail_3 {
+  width: 16px;
+  height: 16px;
+  margin: 2px 0 0 20px;
+}
+
+.image-text_2 {
+  width: 223px;
+  height: 16px;
+  margin: 46px 0 0 24px;
+}
+
+.text-group_2 {
+  width: 199px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 20px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.group_11 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGebeabcfa51788d9430b2fed9bb06231e.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+}
+
+.section_1 {
+  width: 16px;
+  height: 16px;
+}
+
+.block_5 {
+  background-color: rgba(255, 255, 255, 1);
+  border-radius: 8px;
+  width: 327px;
+  height: 40px;
+  border: 1px solid rgba(31, 41, 55, 0.2);
+  margin: 32px 0 0 24px;
+}
+
+.image-text_3 {
+  width: 76px;
+  height: 16px;
+  margin: 12px 0 0 10px;
+}
+
+.group_12 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG78539a1e9526a07cde055bc06cabf62c.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+}
+
+.group_13 {
+  width: 16px;
+  height: 16px;
+}
+
+.text-group_3 {
+  width: 56px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(35, 136, 255, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.image-text_4 {
+  width: 62px;
+  height: 16px;
+  margin: 12px 12px 0 167px;
+}
+
+.text-group_4 {
+  width: 42px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: right;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.section_2 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGc77fd008f61f10d37f1bac402b859816.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+}
+
+.box_3 {
+  width: 16px;
+  height: 16px;
+}
+
+.block_6 {
+  width: 327px;
+  height: 32px;
+  margin: 32px 0 0 24px;
+}
+
+.image-text_5 {
+  width: 68px;
+  height: 24px;
+  margin-top: 4px;
+}
+
+.group_14 {
+  height: 20px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGb67f7982758f36300e4b8b3e55e78a30.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 2px;
+  width: 20px;
+}
+
+.section_3 {
+  width: 20px;
+  height: 20px;
+}
+
+.text-group_5 {
+  width: 40px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 20px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.block_7 {
+  box-shadow: 0px 1px 3px 0px rgba(25, 33, 61, 0.1);
+  background-color: rgba(247, 248, 250, 1);
+  border-radius: 4px;
+  width: 68px;
+  height: 32px;
+}
+
+.image-text_6 {
+  width: 44px;
+  height: 24px;
+  margin: 4px 0 0 12px;
+}
+
+.block_8 {
+  height: 12px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGc8c8d7ebeb5d51e1d41f77e7362e2d31.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 6px;
+  width: 12px;
+}
+
+.group_15 {
+  width: 12px;
+  height: 12px;
+}
+
+.text-group_6 {
+  width: 28px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.block_9 {
+  width: 330px;
+  height: 76px;
+  margin: 16px 0 0 24px;
+}
+
+.box_4 {
+  border-radius: 8px;
+  width: 161px;
+  height: 76px;
+  border: 1px solid rgba(31, 41, 55, 0.2);
+  justify-content: flex-center;
+}
+
+.text-wrapper_3 {
+  width: 132px;
+  height: 16px;
+  margin: 8px 0 0 12px;
+}
+
+.text_6 {
+  width: 9px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.text_7 {
+  width: 119px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.text_8 {
+  width: 135px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 4px 0 0 12px;
+}
+
+.section_4 {
+  width: 95px;
+  height: 16px;
+  margin: 8px 0 8px 12px;
+}
+
+.group_16 {
+  background-color: rgba(190, 190, 190, 1);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+}
+
+.text_9 {
+  width: 75px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.box_5 {
+  border-radius: 8px;
+  width: 161px;
+  height: 76px;
+  border: 1px solid rgba(31, 41, 55, 0.2);
+  justify-content: flex-center;
+}
+
+.text-wrapper_4 {
+  width: 132px;
+  height: 16px;
+  margin: 8px 0 0 12px;
+}
+
+.text_10 {
+  width: 9px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.text_11 {
+  width: 119px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.text_12 {
+  width: 135px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 4px 0 0 12px;
+}
+
+.box_6 {
+  width: 95px;
+  height: 16px;
+  margin: 8px 0 8px 12px;
+}
+
+.box_7 {
+  background-color: rgba(190, 190, 190, 1);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+}
+
+.text_13 {
+  width: 75px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.block_10 {
+  width: 68px;
+  height: 24px;
+  margin: 32px 0 0 24px;
+}
+
+.block_11 {
+  height: 20px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGa279b22da3cb5c7ccbdd237125f3bf9e.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 2px;
+  width: 20px;
+}
+
+.block_12 {
+  width: 20px;
+  height: 20px;
+}
+
+.text_14 {
+  width: 40px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 20px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.paragraph_1 {
+  width: 327px;
+  height: 540px;
+  overflow-wrap: break-word;
+  color: rgba(53, 62, 92, 1);
+  font-size: 15px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: justified;
+  line-height: 30px;
+  margin: 16px 0 208px 24px;
+}
+
+.block_13 {
+  border-radius: 8px;
+  position: absolute;
+  left: 362px;
+  top: 244px;
+  width: 161px;
+  height: 76px;
+  border: 1px solid rgba(31, 41, 55, 0.2);
+  justify-content: flex-center;
+}
+
+.text_15 {
+  width: 9px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 8px 0 0 12px;
+}
+
+.text_16 {
+  width: 135px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 12px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 4px 0 0 12px;
+}
+
+.box_8 {
+  background-color: rgba(190, 190, 190, 1);
+  border-radius: 50%;
+  width: 16px;
+  height: 16px;
+  margin: 8px 0 8px 12px;
+}
+
+.block_14 {
+  width: 376px;
+  height: 376px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGdaa982ba4073f99f46823e930dcb9ae6.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin: 240px 0 176px 0;
+}
+
+.block_15 {
+  position: absolute;
+  left: 0;
+  top: 877px;
+  width: 375px;
+  height: 375px;
+}
+
+.image-wrapper_1 {
+  width: 327px;
+  height: 16px;
+  margin: 175px 0 0 24px;
+}
+
+.thumbnail_4 {
+  width: 16px;
+  height: 16px;
+}
+
+.thumbnail_5 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.thumbnail_6 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.thumbnail_7 {
+  width: 16px;
+  height: 16px;
+  margin-left: 79px;
+}
+
+.thumbnail_8 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.thumbnail_9 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.thumbnail_10 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.thumbnail_11 {
+  width: 16px;
+  height: 16px;
+  margin-left: 20px;
+}
+
+.group_17 {
+  height: 88px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG1438c74786cc6f058e8ffae25f03f4ce.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 337px;
+  margin: 58px 0 0 19px;
+}
+
+.text-wrapper_5 {
+  width: 28px;
+  height: 16px;
+  margin: 10px 0 0 12px;
+}
+
+.text_17 {
+  width: 28px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(186, 192, 204, 1);
+  font-size: 14px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.block_16 {
+  width: 72px;
+  height: 28px;
+  margin: 30px 0 4px 254px;
+}
+
+.box_9 {
+  background-color: rgba(25, 33, 61, 1);
+  height: 12px;
+  margin-top: 9px;
+  width: 13px;
+}
+
+.block_17 {
+  width: 12px;
+  height: 12px;
+}
+
+.box_10 {
+  box-shadow: 0px 2px 5px 0px rgba(20, 88, 201, 0.17);
+  background-image: linear-gradient(
+    180deg,
+    rgba(43, 122, 251, 1) 0,
+    rgba(33, 116, 253, 1) 100%,
+    rgba(33, 59, 253, 1) 100%
+  );
+  border-radius: 8px;
+  height: 28px;
+  border: 1px gradient;
+  width: 44px;
+  position: relative;
+}
+
+.thumbnail_12 {
+  width: 12px;
+  height: 12px;
+  margin: 8px 0 0 16px;
+}
+
+.box_11 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 44px;
+  height: 28px;
+}
+
+.image-wrapper_2 {
+  background-color: rgba(255, 255, 255, 0.1);
+  height: 38px;
+  margin-left: 105px;
+  width: 166px;
+}
+
+.image_2 {
+  width: 134px;
+  height: 34px;
+  margin: 4px 0 0 16px;
+}
+ /* Add your CSS styles here */
+  </style>
\ No newline at end of file
diff --git a/src/components/SearchPage.vue b/src/components/SearchPage.vue
new file mode 100644
index 0000000..dc2838a
--- /dev/null
+++ b/src/components/SearchPage.vue
@@ -0,0 +1,712 @@
+<template>
+    <div class="page flex-col">
+      <div class="group_1 flex-col"></div>
+      <div class="group_2 flex-col"></div>
+      <div class="group_3 flex-col justify-end">
+        <!-- Status bar -->
+        <div class="group_4 flex-row">
+          <span class="text_1">9:41</span>
+          <div class="box_1 flex-col"></div>
+          <div class="box_2 flex-col"></div>
+          <img
+            class="image_1"
+            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd25660d878c1c723ef4b6d3179f8fc88.png"
+          />
+        </div>
+        <!-- Header -->
+        <div class="group_5 flex-row">
+          <img
+            class="thumbnail_1"
+            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG715af45decd916ba1800cb4e2a7551c7.png"
+          />
+          <span class="text_2">iAON AI Search</span>
+          <img
+            class="thumbnail_2"
+            src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG3a72b01e44112e9b2907ba6d3ce1405f.png"
+          />
+          <div class="block_1 flex-col"></div>
+          <div class="block_2 flex-col"></div>
+        </div>
+        <!-- Search input -->
+        <div class="group_12 flex-col">
+          <div class="text-wrapper_1 flex-row">
+            <input v-model="searchInput" class="text_6" placeholder="输入任何内容..." />
+          </div>
+          <div class="block_5 flex-row justify-between">
+            <div class="box_5 flex-col justify-center">
+              <div class="group_13 flex-col"></div>
+            </div>
+            <div class="box_6 flex-col">
+              <img
+                class="thumbnail_3"
+                src="https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGa3622f01b458c96a5a91b95a2bfd9714.png"
+                @click="search"
+              />
+              <div class="group_14 flex-col"></div>
+            </div>
+          </div>
+        </div>
+        <!-- Search history -->
+        <div class="image-text_2 flex-row justify-between">
+          <div class="box_7 flex-col"><div class="box_8 flex-col"></div></div>
+          <span class="text-group_2">搜索历史</span>
+        </div>
+        <!-- Search history items -->
+        <div v-for="(item, index) in searchHistory" :key="index" class="group_15 flex-row justify-between">
+          <div class="box_9 flex-col">
+            <div class="section_1 flex-col">
+              <div class="group_16 flex-col"></div>
+            </div>
+          </div>
+          <span class="text_7">{{ item }}</span>
+        </div>
+      </div>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    data() {
+      return {
+        searchInput: '',
+        searchHistory: [
+          '如何做一个Ai搜索引擎',
+          '有哪些比较好用的开源项目管理工具？',
+          '原型设计工具Axure、Figma、Pixso，哪个更好用？',
+          '如何在Windows和Linux系统中通过ollama部署qwen大语言模型，并实现open-webui的访问',
+          '搭建自己的GPT'
+        ]
+      };
+    },
+    methods: {
+      search() {
+        if (this.searchInput.trim()) {
+          this.$emit('search', this.searchInput);
+        }
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  .page {
+  background-color: rgba(255, 255, 255, 1);
+  position: relative;
+  width: 375px;
+  height: 812px;
+  overflow: hidden;
+}
+
+.group_1 {
+  width: 376px;
+  height: 376px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGdaa982ba4073f99f46823e930dcb9ae6.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 612px;
+}
+
+.group_2 {
+  position: absolute;
+  left: 0;
+  top: 437px;
+  width: 375px;
+  height: 375px;
+}
+
+.group_3 {
+  position: absolute;
+  left: 0;
+  top: 88px;
+  width: 375px;
+  height: 724px;
+}
+
+.group_4 {
+  width: 341px;
+  height: 18px;
+  margin: -73px 0 0 21px;
+}
+
+.text_1 {
+  width: 54px;
+  height: 18px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 15px;
+  letter-spacing: -0.30000001192092896px;
+  font-family: SF Pro Text-Semibold;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 15px;
+}
+
+.box_1 {
+  background-color: rgba(25, 33, 61, 1);
+  width: 17px;
+  height: 11px;
+  margin: 3px 0 0 219px;
+}
+
+.box_2 {
+  background-color: rgba(25, 33, 61, 1);
+  width: 16px;
+  height: 11px;
+  margin: 3px 0 0 5px;
+}
+
+.image_1 {
+  width: 25px;
+  height: 12px;
+  margin: 3px 0 0 5px;
+}
+
+.group_5 {
+  background-color: rgba(255, 255, 255, 1);
+  position: relative;
+  width: 375px;
+  height: 44px;
+  margin-top: 11px;
+}
+
+.thumbnail_1 {
+  width: 9px;
+  height: 18px;
+  margin: 13px 0 0 18px;
+}
+
+.text_2 {
+  width: 118px;
+  height: 22px;
+  overflow-wrap: break-word;
+  color: rgba(28, 28, 40, 1);
+  font-size: 16px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 11px 0 0 105px;
+}
+
+.thumbnail_2 {
+  width: 15px;
+  height: 15px;
+  margin: 15px 20px 0 90px;
+}
+
+.block_1 {
+  position: absolute;
+  left: 12px;
+  top: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+.block_2 {
+  position: absolute;
+  left: 335px;
+  top: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+.group_6 {
+  width: 343px;
+  height: 20px;
+  margin: 10px 0 0 16px;
+}
+
+.group_7 {
+  background-color: rgba(25, 33, 61, 1);
+  height: 16px;
+  margin-top: 2px;
+  width: 16px;
+}
+
+.block_3 {
+  width: 16px;
+  height: 16px;
+}
+
+.group_8 {
+  border-radius: 9999px;
+  height: 16px;
+  width: 16px;
+  margin: 2px 0 0 16px;
+}
+
+.group_9 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_3 {
+  width: 71px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 12px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin: 2px 0 0 4px;
+}
+
+.image-text_1 {
+  width: 50px;
+  height: 20px;
+  margin-left: 170px;
+}
+
+.text-group_1 {
+  width: 26px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(102, 111, 141, 1);
+  font-size: 14px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+  margin-top: 2px;
+}
+
+.box_3 {
+  height: 20px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGd1a05d06d5bf2038ff730ba374addebd.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 20px;
+}
+
+.box_4 {
+  width: 20px;
+  height: 20px;
+}
+
+.group_10 {
+  width: 266px;
+  height: 32px;
+  margin: 90px 0 0 55px;
+}
+
+.group_11 {
+  height: 32px;
+  width: 32px;
+}
+
+.block_4 {
+  width: 32px;
+  height: 32px;
+}
+
+.text_4 {
+  width: 230px;
+  height: 32px;
+  overflow-wrap: break-word;
+  color: rgba(45, 126, 255, 1);
+  font-size: 32px;
+  letter-spacing: -0.8000000715255737px;
+  font-family: Inter-Extra Bold;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 32px;
+}
+
+.text_5 {
+  width: 343px;
+  height: 28px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 18px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: center;
+  white-space: nowrap;
+  line-height: 28px;
+  margin: 32px 0 0 16px;
+}
+
+.group_12 {
+  height: 102px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGde50877415a0a77992deb2aad2bb84ad.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 339px;
+  margin: 36px 0 0 18px;
+}
+
+.text-wrapper_1 {
+  width: 96px;
+  height: 16px;
+  margin: 12px 0 0 12px;
+}
+
+.text_6 {
+  width: 96px;
+  height: 16px;
+  overflow-wrap: break-word;
+  color: rgba(186, 192, 204, 1);
+  font-size: 14px;
+  font-family: Inter-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 16px;
+}
+
+.block_5 {
+  width: 72px;
+  height: 28px;
+  margin: 42px 0 4px 255px;
+}
+
+.box_5 {
+  background-color: rgba(25, 33, 61, 1);
+  height: 12px;
+  margin-top: 9px;
+  width: 13px;
+}
+
+.group_13 {
+  width: 12px;
+  height: 12px;
+}
+
+.box_6 {
+  box-shadow: 0px 2px 5px 0px rgba(20, 88, 201, 0.17);
+  background-image: linear-gradient(
+    180deg,
+    rgba(43, 122, 251, 1) 0,
+    rgba(33, 116, 253, 1) 100%,
+    rgba(33, 59, 253, 1) 100%
+  );
+  border-radius: 8px;
+  height: 28px;
+  border: 1px gradient;
+  width: 44px;
+  position: relative;
+}
+
+.thumbnail_3 {
+  width: 12px;
+  height: 12px;
+  margin: 8px 0 0 16px;
+}
+
+.group_14 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 44px;
+  height: 28px;
+}
+
+.image-text_2 {
+  width: 108px;
+  height: 24px;
+  margin: 36px 0 0 24px;
+}
+
+.box_7 {
+  height: 20px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNG25ea552c4bb821817684b6c731e663ca.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  margin-top: 2px;
+  width: 20px;
+}
+
+.box_8 {
+  width: 20px;
+  height: 20px;
+}
+
+.text-group_2 {
+  width: 80px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 20px;
+  font-family: PingFang SC-Medium;
+  font-weight: 500;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+
+.group_15 {
+  width: 179px;
+  height: 32px;
+  margin: 16px 0 0 24px;
+}
+
+.box_9 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.section_1 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.group_16 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_7 {
+  width: 139px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 4px;
+}
+
+.group_17 {
+  width: 278px;
+  height: 32px;
+  margin: 16px 0 0 24px;
+}
+
+.group_18 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.section_2 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.box_10 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_8 {
+  width: 238px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 4px;
+}
+
+.group_19 {
+  width: 327px;
+  height: 32px;
+  margin: 16px 0 0 24px;
+}
+
+.group_20 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.block_6 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.section_3 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_9 {
+  width: 287px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 4px;
+}
+
+.group_21 {
+  width: 327px;
+  height: 32px;
+  margin: 16px 0 0 24px;
+}
+
+.box_11 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.box_12 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.block_7 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_10 {
+  width: 287px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 4px;
+}
+
+.group_22 {
+  width: 139px;
+  height: 32px;
+  margin: 16px 0 0 24px;
+}
+
+.box_13 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.box_14 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.group_23 {
+  width: 16px;
+  height: 16px;
+}
+
+.text_11 {
+  width: 99px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+  margin-top: 4px;
+}
+
+.group_24 {
+  width: 247px;
+  height: 58px;
+  margin: 16px 0 0 24px;
+}
+
+.group_25 {
+  background-color: rgba(240, 242, 245, 1);
+  border-radius: 8px;
+  height: 32px;
+  width: 32px;
+}
+
+.group_26 {
+  height: 16px;
+  background: url(https://lanhu-oss.lanhuapp.com/FigmaDDSSlicePNGaabb246dcdf230ce2ed40cc90194ce79.png)
+    100% no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  margin: 8px 0 0 8px;
+}
+
+.section_4 {
+  width: 16px;
+  height: 16px;
+}
+
+.group_27 {
+  position: relative;
+  width: 207px;
+  height: 54px;
+  margin-top: 4px;
+}
+
+.image-wrapper_1 {
+  background-color: rgba(255, 255, 255, 0.1);
+  height: 38px;
+  width: 166px;
+  margin: 16px 0 0 41px;
+}
+
+.image_2 {
+  width: 134px;
+  height: 34px;
+  margin: 4px 0 0 16px;
+}
+
+.text_12 {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 139px;
+  height: 24px;
+  overflow-wrap: break-word;
+  color: rgba(25, 33, 61, 1);
+  font-size: 14px;
+  font-family: PingFang SC-Regular;
+  font-weight: normal;
+  text-align: left;
+  white-space: nowrap;
+  line-height: 24px;
+}
+/* Add your CSS styles here */
+  </style>
\ No newline at end of file
-- 
GitLab