From cb4848234fe27c924fda5d3cad28d77e6bd55fc2 Mon Sep 17 00:00:00 2001
From: "L.star" <363033744@qq.com>
Date: Wed, 23 Jul 2025 18:34:05 +0800
Subject: [PATCH] =?UTF-8?q?refactor(views):=20=E6=A0=B8=E5=BF=83=E4=BD=93?=
 =?UTF-8?q?=E9=AA=8C=E9=A1=B5=E9=9D=A2=E7=BB=93=E6=9E=84=E9=87=8D=E6=9E=84?=
 =?UTF-8?q?=E4=B8=8EUI=E8=BF=AD=E4=BB=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将所有核心用户体验相关的视图组件（HomeView, ScanView, SearchView 等）迁移至新的 'src/views/核心体验页/' 目录，以优化项目结构。

更新 router/index.ts 中的路由配置，以匹配新的文件路径。

对 HomeView-首页-2.0.vue 进行了密集的UI迭代，包括将扫码与分析卡片合并，并进行了大量的CSS微调。

新增了多个原型页面（ScanView, SearchView）和备份文件，记录开发过程。
---
 shihuashishuo-ui/src/router/index.ts          |  10 +-
 .../HomeView-首页-2.0.backup-最简.vue}        |   0
 .../HomeView-首页-2.1.backup-合并前.vue}      |  77 ++-
 .../核心体验页/HomeView-首页-2.2.backup.vue   | 610 ++++++++++++++++++
 .../views/核心体验页/HomeView-首页-2.2.vue    | 610 ++++++++++++++++++
 .../{ => 核心体验页}/ResultView-结果页.vue    |   0
 .../{ => 核心体验页}/ScanView-扫码页.vue      |  25 +-
 .../SearchResultView-搜索结果页.vue           |   0
 .../{ => 核心体验页}/SearchView-搜索页.vue    |  64 +-
 9 files changed, 1358 insertions(+), 38 deletions(-)
 rename shihuashishuo-ui/src/views/{HomeView-首页-2.0.backup.vue => 核心体验页/HomeView-首页-2.0.backup-最简.vue} (100%)
 rename shihuashishuo-ui/src/views/{HomeView-首页-2.0.vue => 核心体验页/HomeView-首页-2.1.backup-合并前.vue} (85%)
 create mode 100644 shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.backup.vue
 create mode 100644 shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.vue
 rename shihuashishuo-ui/src/views/{ => 核心体验页}/ResultView-结果页.vue (100%)
 rename shihuashishuo-ui/src/views/{ => 核心体验页}/ScanView-扫码页.vue (75%)
 rename shihuashishuo-ui/src/views/{ => 核心体验页}/SearchResultView-搜索结果页.vue (100%)
 rename shihuashishuo-ui/src/views/{ => 核心体验页}/SearchView-搜索页.vue (57%)

diff --git a/shihuashishuo-ui/src/router/index.ts b/shihuashishuo-ui/src/router/index.ts
index 8c28b24..9b28ab3 100644
--- a/shihuashishuo-ui/src/router/index.ts
+++ b/shihuashishuo-ui/src/router/index.ts
@@ -56,7 +56,7 @@ const router = createRouter({
         {
           path: 'home',
           name: 'home',
-          component: () => import('../views/HomeView-首页-2.0.vue'),
+          component: () => import('../views/核心体验页/HomeView-首页-2.0.vue'),
         },
         {
           path: 'discover',
@@ -84,22 +84,22 @@ const router = createRouter({
     {
       path: '/scan',
       name: 'scan',
-      component: () => import('../views/ScanView-扫码页.vue'),
+      component: () => import('../views/核心体验页/ScanView-扫码页.vue'),
     },
     {
       path: '/search',
       name: 'search',
-      component: () => import('../views/SearchView-搜索页.vue'),
+      component: () => import('../views/核心体验页/SearchView-搜索页.vue'),
     },
     {
       path: '/search-result',
       name: 'search-result',
-      component: () => import('../views/SearchResultView-搜索结果页.vue'),
+      component: () => import('../views/核心体验页/SearchResultView-搜索结果页.vue'),
     },
     {
       path: '/result/:id',
       name: 'result',
-      component: () => import('../views/ResultView-结果页.vue'),
+      component: () => import('../views/核心体验页/ResultView-结果页.vue'),
     },
     {
       path: '/messages',
diff --git a/shihuashishuo-ui/src/views/HomeView-首页-2.0.backup.vue b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.0.backup-最简.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/HomeView-首页-2.0.backup.vue
rename to shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.0.backup-最简.vue
diff --git a/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.1.backup-合并前.vue
similarity index 85%
rename from shihuashishuo-ui/src/views/HomeView-首页-2.0.vue
rename to shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.1.backup-合并前.vue
index 3fec45e..ade3269 100644
--- a/shihuashishuo-ui/src/views/HomeView-首页-2.0.vue
+++ b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.1.backup-合并前.vue
@@ -65,11 +65,45 @@
         <div class="nutrition-details">
           <div>
             <p>蛋白质</p>
-            <strong>{{ healthDashboardData.nutrition.protein }} / {{ healthDashboardData.nutrition.proteinGoal }}g</strong>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.protein }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.proteinGoal }}g</span>
+            </div>
           </div>
           <div>
             <p>脂肪</p>
-            <strong>{{ healthDashboardData.nutrition.fat }} / {{ healthDashboardData.nutrition.fatGoal }}g</strong>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.fat }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.fatGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>碳水化合物</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.carbs }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.carbsGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>钙</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.calcium }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.calciumGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素C</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminC }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminCGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素D</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminD }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminDGoal }}µg</span>
+            </div>
           </div>
         </div>
       </div>
@@ -139,7 +173,14 @@ let intervalId: number;
 const hotSearches = ref(['无糖酸奶', '酱油', '儿童零食', '高钙牛奶']);
 
 const healthDashboardData = ref({
-  nutrition: { protein: 30, proteinGoal: 60, fat: 20, fatGoal: 50 },
+  nutrition: {
+    protein: 30, proteinGoal: 60,
+    fat: 20, fatGoal: 50,
+    carbs: 150, carbsGoal: 300,
+    calcium: 500, calciumGoal: 1000,
+    vitaminC: 40, vitaminCGoal: 90,
+    vitaminD: 5, vitaminDGoal: 15
+  },
   calories: { current: 800, goal: 1800 },
   water: { current: 1000, goal: 2000 },
 });
@@ -224,6 +265,9 @@ const goTo = (link: object) => {
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
 }
 
 .search-section {
@@ -268,10 +312,13 @@ const goTo = (link: object) => {
 
 .hot-searches-section {
   display: flex;
-  justify-content: center;
+  justify-content: flex-start;
   gap: 10px;
   margin-top: 10px;
   flex-wrap: wrap;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .hot-search-tag {
@@ -279,7 +326,7 @@ const goTo = (link: object) => {
   color: #555;
   padding: 5px 12px;
   border-radius: 15px;
-  font-size: 12px;
+  font-size: 10px;
   cursor: pointer;
 }
 
@@ -422,8 +469,9 @@ const goTo = (link: object) => {
 }
 
 .nutrition-details {
-  display: flex;
-  justify-content: space-around;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
   text-align: center;
 }
 
@@ -432,9 +480,18 @@ const goTo = (link: object) => {
     font-size: 12px;
     color: #666;
 }
-.nutrition-details strong {
-    font-size: 16px;
-    color: #333;
+.nutrition-value {
+  line-height: 1;
+}
+.nutrition-value strong {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.nutrition-value span {
+  font-size: 12px;
+  color: #6b7280;
+  margin-left: 2px;
 }
 
 .progress-card {
diff --git a/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.backup.vue b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.backup.vue
new file mode 100644
index 0000000..9b3bf0c
--- /dev/null
+++ b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.backup.vue
@@ -0,0 +1,610 @@
+<template>
+  <div class="home-view">
+    <!-- 1. Top Status Bar -->
+    <header class="top-bar">
+      <div class="greeting">晚上好, 王女士</div>
+      <div class="message-icon" @click="goToMessages">
+        <img src="@/assets/message-icon.svg" alt="Messages" />
+      </div>
+    </header>
+
+    <!-- Search Bar Section -->
+    <section class="search-section" @click="() => goToSearch()">
+       <div class="search-bar-container">
+         <input type="text" placeholder="产品 /成分 /食物 /菜谱 /问题" readonly>
+         <div class="separator"></div>
+         <div class="search-button">搜索</div>
+       </div>
+    </section>
+
+    <!-- Hot Searches Section -->
+    <section class="hot-searches-section">
+      <span v-for="term in hotSearches" :key="term" class="hot-search-tag" @click.stop="goToSearch(term)">
+        {{ term }}
+      </span>
+    </section>
+
+    <!-- Banner Section -->
+    <section class="banner-section">
+      <div class="banner-wrapper" :style="bannerStyle">
+        <div v-for="item in bannerItems" :key="item.id" class="banner-slide">
+          <img :src="item.imageUrl" :alt="item.alt" />
+        </div>
+      </div>
+      <div class="banner-dots">
+        <span v-for="(item, index) in bannerItems" :key="item.id"
+              :class="{ active: index === currentIndex }"
+              @click="goToSlide(index)"></span>
+      </div>
+    </section>
+
+    <!-- 2. Scan and Summary Card -->
+    <section class="scan-summary-section">
+      <div class="scan-summary-card">
+        <div class="scan-cta-small" @click="goToScan">
+          <div class="scan-icon">📷</div>
+          <span>拍照/扫码</span>
+        </div>
+        <div class="card-separator"></div>
+        <div class="summary-text">
+          <p>本周您已分析 <strong>8</strong> 种食品，</p>
+          <p>成功为家人避开 <strong>4</strong> 个高风险成分！</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 4. Health Dashboard (v2.5 Visual Upgrade) -->
+    <section class="health-dashboard">
+      <div class="dashboard-item nutrition-tracker">
+        <h4>每日营养</h4>
+        <div class="nutrition-details">
+          <div>
+            <p>蛋白质</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.protein }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.proteinGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>脂肪</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.fat }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.fatGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>碳水化合物</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.carbs }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.carbsGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>钙</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.calcium }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.calciumGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素C</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminC }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminCGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素D</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminD }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminDGoal }}µg</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dashboard-item progress-card">
+        <!-- Calorie Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle" :stroke-dasharray="circumference" :stroke-dashoffset="calorieProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>热量摄入</p>
+            <strong>{{ healthDashboardData.calories.current }}</strong>
+            <span>/ {{ healthDashboardData.calories.goal }} kcal</span>
+          </div>
+        </div>
+        <!-- Water Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle water" :stroke-dasharray="circumference" :stroke-dashoffset="waterProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>饮水</p>
+            <strong>{{ healthDashboardData.water.current / 1000 }}</strong>
+            <span>/ {{ healthDashboardData.water.goal / 1000 }} L</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 5. Content Feed -->
+    <section class="feed-section">
+      <div v-for="item in feedItems" :key="item.id" class="feed-card" @click="goTo(item.link)">
+        <div v-if="item.type === 'discover'" class="discover-card">
+          <div class="card-content">
+            <span class="card-tag">发现</span>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.summary }}</p>
+          </div>
+          <img :src="item.imageUrl" :alt="item.title" class="card-image">
+        </div>
+        <div v-if="item.type === 'recipe'" class="recipe-card">
+          <img :src="item.imageUrl" :alt="item.title" class="card-image-full">
+          <div class="card-overlay">
+            <span class="card-tag">为你推荐的菜谱</span>
+            <h3>{{ item.title }}</h3>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const bannerItems = ref([
+  { id: 1, imageUrl: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop', alt: 'Healthy Salad' },
+  { id: 2, imageUrl: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=1887&auto=format&fit=crop', alt: 'Fresh Berries' },
+  { id: 3, imageUrl: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=1910&auto=format&fit=crop', alt: 'Avocado Toast' },
+]);
+const currentIndex = ref(0);
+let intervalId: number;
+
+const hotSearches = ref(['无糖酸奶', '酱油', '儿童零食', '高钙牛奶']);
+
+const healthDashboardData = ref({
+  nutrition: {
+    protein: 30, proteinGoal: 60,
+    fat: 20, fatGoal: 50,
+    carbs: 150, carbsGoal: 300,
+    calcium: 500, calciumGoal: 1000,
+    vitaminC: 40, vitaminCGoal: 90,
+    vitaminD: 5, vitaminDGoal: 15
+  },
+  calories: { current: 800, goal: 1800 },
+  water: { current: 1000, goal: 2000 },
+});
+
+// Progress Ring Computations
+const ringSize = 120;
+const strokeWidth = 10;
+const center = ringSize / 2;
+const radius = center - strokeWidth / 2;
+const circumference = 2 * Math.PI * radius;
+
+const calorieProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.calories.current / healthDashboardData.value.calories.goal;
+  return circumference * (1 - progress);
+});
+
+const waterProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.water.current / healthDashboardData.value.water.goal;
+  return circumference * (1 - progress);
+});
+
+
+const feedItems = ref([
+  { id: 'd1', type: 'discover', title: "警惕！这5种'儿童酱油'其实是钠含量炸弹", summary: '深度评测10款热门儿童酱油，结果令人震惊...', imageUrl: 'https://images.unsplash.com/photo-1598134493282-85b82454f754?q=80&w=1887&auto=format&fit=crop', link: { name: 'discover' } },
+  { id: 'r1', type: 'recipe', title: '适合减脂期的你：牛油果鸡胸肉沙拉', imageUrl: 'https://images.unsplash.com/photo-1505253716362-af78f6d38348?q=80&w=1887&auto=format&fit=crop', link: { name: 'kitchen' } },
+]);
+
+const bannerStyle = computed(() => ({
+  transform: `translateX(-${currentIndex.value * 100}%)`
+}));
+
+const goToSlide = (index: number) => {
+  currentIndex.value = index;
+  clearInterval(intervalId);
+  intervalId = window.setInterval(nextSlide, 3000);
+};
+
+const nextSlide = () => {
+  currentIndex.value = (currentIndex.value + 1) % bannerItems.value.length;
+};
+
+onMounted(() => {
+  intervalId = window.setInterval(nextSlide, 3000);
+});
+
+onUnmounted(() => {
+  clearInterval(intervalId);
+});
+
+const router = useRouter();
+
+const goToMessages = () => {
+  router.push({ name: 'messages' });
+};
+
+const goToScan = () => {
+  router.push({ name: 'scan' });
+};
+
+const goToSearch = (query?: string) => {
+  if (query) {
+    router.push({ name: 'search', query: { q: query } });
+  } else {
+    router.push({ name: 'search' });
+  }
+};
+
+const goTo = (link: object) => {
+  router.push(link);
+};
+</script>
+
+<style scoped>
+.home-view {
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: var(--color-background);
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.search-section {
+ margin-top: 20px;
+}
+
+.search-bar-container {
+ display: flex;
+ align-items: center;
+ background-color: #fff;
+ border-radius: 25px;
+ padding: 10px 15px;
+ border: 1px solid #07C160;
+ cursor: pointer;
+ max-width: 90%;
+ margin: 0 auto;
+}
+
+.search-bar-container input {
+ border: none;
+ outline: none;
+ background: transparent;
+ flex-grow: 1;
+ width: 0;
+ font-size: 14px;
+ color: #333;
+ pointer-events: none;
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background-color: #e0e0e0;
+  margin: 0 12px;
+}
+
+.search-button {
+  color: #07C160;
+  font-weight: bold;
+  font-size: 15px;
+}
+
+.hot-searches-section {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hot-search-tag {
+  background-color: #f0f0f0;
+  color: #555;
+  padding: 5px 12px;
+  border-radius: 15px;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.banner-section {
+  width: 100%;
+  margin-top: 15px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+}
+.banner-wrapper {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+.banner-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 150px;
+}
+.banner-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.banner-dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+.banner-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.banner-dots span.active {
+  background-color: white;
+}
+
+.greeting {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.message-icon img {
+  width: 24px;
+  height: 24px;
+}
+
+.scan-summary-section {
+  padding: 20px 0;
+}
+
+.scan-summary-card {
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1.5px solid #07C160;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.scan-cta-small {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  top: -10px; /* 手动向上微调5个像素以实现视觉居中 */
+  line-height: 1.4; /* 恢复您满意的行高方案 */
+}
+
+.scan-cta-small .scan-icon {
+  font-size: 48px;
+  margin-bottom: 0; /* 配合line-height，将margin设为0 */
+  color: #07C160;
+}
+
+.scan-cta-small span {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-separator {
+  width: 1px;
+  height: 60px;
+  background-color: #f0f0f0;
+  margin: 0 20px;
+}
+
+.summary-text {
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: left;
+}
+
+.summary-text p {
+  margin: 0;
+}
+
+.summary-text strong {
+  color: #07C160;
+  font-size: 15px;
+}
+
+.health-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+}
+
+.dashboard-item {
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.dashboard-item h4 {
+  font-size: 14px;
+  color: #333;
+  margin: 0 0 10px 0;
+  text-align: left;
+}
+
+.nutrition-details {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  text-align: center;
+}
+
+.nutrition-details p {
+    margin: 0 0 5px 0;
+    font-size: 12px;
+    color: #666;
+}
+.nutrition-value {
+  line-height: 1;
+}
+.nutrition-value strong {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.nutrition-value span {
+  font-size: 12px;
+  color: #6b7280;
+  margin-left: 2px;
+}
+
+.progress-card {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.progress-ring {
+    position: relative;
+    text-align: center;
+}
+
+.progress-ring__svg {
+    transform: rotate(-90deg);
+}
+
+.progress-ring__circle-bg {
+    fill: none;
+    stroke: #e6e6e6;
+    stroke-width: 10;
+}
+
+.progress-ring__circle {
+    fill: none;
+    stroke: #07C160;
+    stroke-width: 10;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.35s;
+}
+
+.progress-ring__circle.water {
+    stroke: #007bff;
+}
+
+.progress-ring__text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.progress-ring__text p {
+    margin: 0;
+    font-size: 12px;
+    color: #666;
+}
+
+.progress-ring__text strong {
+    font-size: 20px;
+    color: #333;
+}
+
+.progress-ring__text span {
+    font-size: 12px;
+    color: #999;
+}
+
+.feed-section {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.feed-card {
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: var(--color-background-soft);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.discover-card {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  gap: 15px;
+}
+
+.discover-card .card-content { flex: 1; }
+.discover-card .card-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.recipe-card { position: relative; color: white; }
+.recipe-card .card-image-full {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+.recipe-card .card-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.card-tag {
+  background-color: rgba(7, 193, 96, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  align-self: flex-start;
+  margin-bottom: 8px;
+}
+
+h3 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.discover-card p {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.vue b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.vue
new file mode 100644
index 0000000..9b3bf0c
--- /dev/null
+++ b/shihuashishuo-ui/src/views/核心体验页/HomeView-首页-2.2.vue
@@ -0,0 +1,610 @@
+<template>
+  <div class="home-view">
+    <!-- 1. Top Status Bar -->
+    <header class="top-bar">
+      <div class="greeting">晚上好, 王女士</div>
+      <div class="message-icon" @click="goToMessages">
+        <img src="@/assets/message-icon.svg" alt="Messages" />
+      </div>
+    </header>
+
+    <!-- Search Bar Section -->
+    <section class="search-section" @click="() => goToSearch()">
+       <div class="search-bar-container">
+         <input type="text" placeholder="产品 /成分 /食物 /菜谱 /问题" readonly>
+         <div class="separator"></div>
+         <div class="search-button">搜索</div>
+       </div>
+    </section>
+
+    <!-- Hot Searches Section -->
+    <section class="hot-searches-section">
+      <span v-for="term in hotSearches" :key="term" class="hot-search-tag" @click.stop="goToSearch(term)">
+        {{ term }}
+      </span>
+    </section>
+
+    <!-- Banner Section -->
+    <section class="banner-section">
+      <div class="banner-wrapper" :style="bannerStyle">
+        <div v-for="item in bannerItems" :key="item.id" class="banner-slide">
+          <img :src="item.imageUrl" :alt="item.alt" />
+        </div>
+      </div>
+      <div class="banner-dots">
+        <span v-for="(item, index) in bannerItems" :key="item.id"
+              :class="{ active: index === currentIndex }"
+              @click="goToSlide(index)"></span>
+      </div>
+    </section>
+
+    <!-- 2. Scan and Summary Card -->
+    <section class="scan-summary-section">
+      <div class="scan-summary-card">
+        <div class="scan-cta-small" @click="goToScan">
+          <div class="scan-icon">📷</div>
+          <span>拍照/扫码</span>
+        </div>
+        <div class="card-separator"></div>
+        <div class="summary-text">
+          <p>本周您已分析 <strong>8</strong> 种食品，</p>
+          <p>成功为家人避开 <strong>4</strong> 个高风险成分！</p>
+        </div>
+      </div>
+    </section>
+
+    <!-- 4. Health Dashboard (v2.5 Visual Upgrade) -->
+    <section class="health-dashboard">
+      <div class="dashboard-item nutrition-tracker">
+        <h4>每日营养</h4>
+        <div class="nutrition-details">
+          <div>
+            <p>蛋白质</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.protein }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.proteinGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>脂肪</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.fat }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.fatGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>碳水化合物</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.carbs }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.carbsGoal }}g</span>
+            </div>
+          </div>
+          <div>
+            <p>钙</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.calcium }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.calciumGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素C</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminC }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminCGoal }}mg</span>
+            </div>
+          </div>
+          <div>
+            <p>维生素D</p>
+            <div class="nutrition-value">
+              <strong>{{ healthDashboardData.nutrition.vitaminD }}</strong>
+              <span>/ {{ healthDashboardData.nutrition.vitaminDGoal }}µg</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="dashboard-item progress-card">
+        <!-- Calorie Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle" :stroke-dasharray="circumference" :stroke-dashoffset="calorieProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>热量摄入</p>
+            <strong>{{ healthDashboardData.calories.current }}</strong>
+            <span>/ {{ healthDashboardData.calories.goal }} kcal</span>
+          </div>
+        </div>
+        <!-- Water Progress Ring -->
+        <div class="progress-ring">
+          <svg class="progress-ring__svg" :width="ringSize" :height="ringSize">
+            <circle class="progress-ring__circle-bg" :r="radius" :cx="center" :cy="center" />
+            <circle class="progress-ring__circle water" :stroke-dasharray="circumference" :stroke-dashoffset="waterProgressOffset" :r="radius" :cx="center" :cy="center" />
+          </svg>
+          <div class="progress-ring__text">
+            <p>饮水</p>
+            <strong>{{ healthDashboardData.water.current / 1000 }}</strong>
+            <span>/ {{ healthDashboardData.water.goal / 1000 }} L</span>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- 5. Content Feed -->
+    <section class="feed-section">
+      <div v-for="item in feedItems" :key="item.id" class="feed-card" @click="goTo(item.link)">
+        <div v-if="item.type === 'discover'" class="discover-card">
+          <div class="card-content">
+            <span class="card-tag">发现</span>
+            <h3>{{ item.title }}</h3>
+            <p>{{ item.summary }}</p>
+          </div>
+          <img :src="item.imageUrl" :alt="item.title" class="card-image">
+        </div>
+        <div v-if="item.type === 'recipe'" class="recipe-card">
+          <img :src="item.imageUrl" :alt="item.title" class="card-image-full">
+          <div class="card-overlay">
+            <span class="card-tag">为你推荐的菜谱</span>
+            <h3>{{ item.title }}</h3>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { useRouter } from 'vue-router';
+
+const bannerItems = ref([
+  { id: 1, imageUrl: 'https://images.unsplash.com/photo-1546069901-ba9599a7e63c?q=80&w=2080&auto=format&fit=crop', alt: 'Healthy Salad' },
+  { id: 2, imageUrl: 'https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?q=80&w=1887&auto=format&fit=crop', alt: 'Fresh Berries' },
+  { id: 3, imageUrl: 'https://images.unsplash.com/photo-1482049016688-2d3e1b311543?q=80&w=1910&auto=format&fit=crop', alt: 'Avocado Toast' },
+]);
+const currentIndex = ref(0);
+let intervalId: number;
+
+const hotSearches = ref(['无糖酸奶', '酱油', '儿童零食', '高钙牛奶']);
+
+const healthDashboardData = ref({
+  nutrition: {
+    protein: 30, proteinGoal: 60,
+    fat: 20, fatGoal: 50,
+    carbs: 150, carbsGoal: 300,
+    calcium: 500, calciumGoal: 1000,
+    vitaminC: 40, vitaminCGoal: 90,
+    vitaminD: 5, vitaminDGoal: 15
+  },
+  calories: { current: 800, goal: 1800 },
+  water: { current: 1000, goal: 2000 },
+});
+
+// Progress Ring Computations
+const ringSize = 120;
+const strokeWidth = 10;
+const center = ringSize / 2;
+const radius = center - strokeWidth / 2;
+const circumference = 2 * Math.PI * radius;
+
+const calorieProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.calories.current / healthDashboardData.value.calories.goal;
+  return circumference * (1 - progress);
+});
+
+const waterProgressOffset = computed(() => {
+  const progress = healthDashboardData.value.water.current / healthDashboardData.value.water.goal;
+  return circumference * (1 - progress);
+});
+
+
+const feedItems = ref([
+  { id: 'd1', type: 'discover', title: "警惕！这5种'儿童酱油'其实是钠含量炸弹", summary: '深度评测10款热门儿童酱油，结果令人震惊...', imageUrl: 'https://images.unsplash.com/photo-1598134493282-85b82454f754?q=80&w=1887&auto=format&fit=crop', link: { name: 'discover' } },
+  { id: 'r1', type: 'recipe', title: '适合减脂期的你：牛油果鸡胸肉沙拉', imageUrl: 'https://images.unsplash.com/photo-1505253716362-af78f6d38348?q=80&w=1887&auto=format&fit=crop', link: { name: 'kitchen' } },
+]);
+
+const bannerStyle = computed(() => ({
+  transform: `translateX(-${currentIndex.value * 100}%)`
+}));
+
+const goToSlide = (index: number) => {
+  currentIndex.value = index;
+  clearInterval(intervalId);
+  intervalId = window.setInterval(nextSlide, 3000);
+};
+
+const nextSlide = () => {
+  currentIndex.value = (currentIndex.value + 1) % bannerItems.value.length;
+};
+
+onMounted(() => {
+  intervalId = window.setInterval(nextSlide, 3000);
+});
+
+onUnmounted(() => {
+  clearInterval(intervalId);
+});
+
+const router = useRouter();
+
+const goToMessages = () => {
+  router.push({ name: 'messages' });
+};
+
+const goToScan = () => {
+  router.push({ name: 'scan' });
+};
+
+const goToSearch = (query?: string) => {
+  if (query) {
+    router.push({ name: 'search', query: { q: query } });
+  } else {
+    router.push({ name: 'search' });
+  }
+};
+
+const goTo = (link: object) => {
+  router.push(link);
+};
+</script>
+
+<style scoped>
+.home-view {
+  padding: 20px;
+  box-sizing: border-box;
+  background-color: var(--color-background);
+}
+
+.top-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #f0f0f0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
+}
+
+.search-section {
+ margin-top: 20px;
+}
+
+.search-bar-container {
+ display: flex;
+ align-items: center;
+ background-color: #fff;
+ border-radius: 25px;
+ padding: 10px 15px;
+ border: 1px solid #07C160;
+ cursor: pointer;
+ max-width: 90%;
+ margin: 0 auto;
+}
+
+.search-bar-container input {
+ border: none;
+ outline: none;
+ background: transparent;
+ flex-grow: 1;
+ width: 0;
+ font-size: 14px;
+ color: #333;
+ pointer-events: none;
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background-color: #e0e0e0;
+  margin: 0 12px;
+}
+
+.search-button {
+  color: #07C160;
+  font-weight: bold;
+  font-size: 15px;
+}
+
+.hot-searches-section {
+  display: flex;
+  justify-content: flex-start;
+  gap: 10px;
+  margin-top: 10px;
+  flex-wrap: wrap;
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hot-search-tag {
+  background-color: #f0f0f0;
+  color: #555;
+  padding: 5px 12px;
+  border-radius: 15px;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.banner-section {
+  width: 100%;
+  margin-top: 15px;
+  overflow: hidden;
+  position: relative;
+  border-radius: 8px;
+}
+.banner-wrapper {
+  display: flex;
+  transition: transform 0.5s ease-in-out;
+}
+.banner-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 150px;
+}
+.banner-slide img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.banner-dots {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  gap: 8px;
+}
+.banner-dots span {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.banner-dots span.active {
+  background-color: white;
+}
+
+.greeting {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.message-icon img {
+  width: 24px;
+  height: 24px;
+}
+
+.scan-summary-section {
+  padding: 20px 0;
+}
+
+.scan-summary-card {
+  display: flex;
+  align-items: center;
+  background-color: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  border: 1.5px solid #07C160;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.scan-cta-small {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  position: relative;
+  top: -10px; /* 手动向上微调5个像素以实现视觉居中 */
+  line-height: 1.4; /* 恢复您满意的行高方案 */
+}
+
+.scan-cta-small .scan-icon {
+  font-size: 48px;
+  margin-bottom: 0; /* 配合line-height，将margin设为0 */
+  color: #07C160;
+}
+
+.scan-cta-small span {
+  font-size: 14px;
+  font-weight: bold;
+  color: #333;
+}
+
+.card-separator {
+  width: 1px;
+  height: 60px;
+  background-color: #f0f0f0;
+  margin: 0 20px;
+}
+
+.summary-text {
+  font-size: 13px;
+  line-height: 1.6;
+  text-align: left;
+}
+
+.summary-text p {
+  margin: 0;
+}
+
+.summary-text strong {
+  color: #07C160;
+  font-size: 15px;
+}
+
+.health-dashboard {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  padding: 15px;
+  background-color: #f9f9f9;
+  border-radius: 12px;
+  border: 1px solid #e0e0e0;
+}
+
+.dashboard-item {
+  background-color: #fff;
+  padding: 15px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+}
+
+.dashboard-item h4 {
+  font-size: 14px;
+  color: #333;
+  margin: 0 0 10px 0;
+  text-align: left;
+}
+
+.nutrition-details {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 15px;
+  text-align: center;
+}
+
+.nutrition-details p {
+    margin: 0 0 5px 0;
+    font-size: 12px;
+    color: #666;
+}
+.nutrition-value {
+  line-height: 1;
+}
+.nutrition-value strong {
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+.nutrition-value span {
+  font-size: 12px;
+  color: #6b7280;
+  margin-left: 2px;
+}
+
+.progress-card {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+}
+
+.progress-ring {
+    position: relative;
+    text-align: center;
+}
+
+.progress-ring__svg {
+    transform: rotate(-90deg);
+}
+
+.progress-ring__circle-bg {
+    fill: none;
+    stroke: #e6e6e6;
+    stroke-width: 10;
+}
+
+.progress-ring__circle {
+    fill: none;
+    stroke: #07C160;
+    stroke-width: 10;
+    stroke-linecap: round;
+    transition: stroke-dashoffset 0.35s;
+}
+
+.progress-ring__circle.water {
+    stroke: #007bff;
+}
+
+.progress-ring__text {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.progress-ring__text p {
+    margin: 0;
+    font-size: 12px;
+    color: #666;
+}
+
+.progress-ring__text strong {
+    font-size: 20px;
+    color: #333;
+}
+
+.progress-ring__text span {
+    font-size: 12px;
+    color: #999;
+}
+
+.feed-section {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+.feed-card {
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: var(--color-background-soft);
+  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
+}
+
+.discover-card {
+  display: flex;
+  align-items: center;
+  padding: 15px;
+  gap: 15px;
+}
+
+.discover-card .card-content { flex: 1; }
+.discover-card .card-image {
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.recipe-card { position: relative; color: white; }
+.recipe-card .card-image-full {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+}
+.recipe-card .card-overlay {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 50%);
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+}
+
+.card-tag {
+  background-color: rgba(7, 193, 96, 0.8);
+  color: white;
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: bold;
+  align-self: flex-start;
+  margin-bottom: 8px;
+}
+
+h3 {
+  font-size: 16px;
+  font-weight: bold;
+  margin: 0 0 5px 0;
+}
+
+.discover-card p {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+</style>
\ No newline at end of file
diff --git a/shihuashishuo-ui/src/views/ResultView-结果页.vue b/shihuashishuo-ui/src/views/核心体验页/ResultView-结果页.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/ResultView-结果页.vue
rename to shihuashishuo-ui/src/views/核心体验页/ResultView-结果页.vue
diff --git a/shihuashishuo-ui/src/views/ScanView-扫码页.vue b/shihuashishuo-ui/src/views/核心体验页/ScanView-扫码页.vue
similarity index 75%
rename from shihuashishuo-ui/src/views/ScanView-扫码页.vue
rename to shihuashishuo-ui/src/views/核心体验页/ScanView-扫码页.vue
index 5bb8c4c..1cfa2ff 100644
--- a/shihuashishuo-ui/src/views/ScanView-扫码页.vue
+++ b/shihuashishuo-ui/src/views/核心体验页/ScanView-扫码页.vue
@@ -3,7 +3,7 @@
     <header class="top-nav">
       <button class="back-btn" @click="goBack">&lt; 返回</button>
       <div class="title"></div> <!-- Empty div for spacing -->
-      <button class="album-btn">相册</button>
+      <button class="album-btn" @click="showPlaceholderAlert('从相册选择')">相册</button>
     </header>
 
     <main class="camera-area">
@@ -14,12 +14,12 @@
     </main>
 
     <footer class="bottom-controls">
-      <button class="control-btn">
+      <button class="control-btn" @click="showPlaceholderAlert('手电筒')">
         <span class="icon">💡</span>
         <span class="label">手电筒</span>
       </button>
-      <button class="shutter-btn" @click="scan"></button>
-      <button class="control-btn">
+      <button class="shutter-btn" @click="simulateScan"></button>
+      <button class="control-btn" @click="showPlaceholderAlert('手动输入')">
         <span class="icon">⌨️</span>
         <span class="label">手动输入</span>
       </button>
@@ -36,10 +36,19 @@ const goBack = () => {
   router.back();
 };
 
-const scan = () => {
-  // Simulate scanning and navigating to result page
-  console.log('Simulating scan...');
-  router.push({ name: 'result', params: { id: 'sample123' } });
+const simulateScan = () => {
+  console.log('Prototype: Simulating scan...');
+  // Show a loading indicator or a message
+  alert('正在识别，请稍候...');
+
+  setTimeout(() => {
+    // Navigate to the result page with a sample ID
+    router.push({ name: 'result', params: { id: 'prototype123' } });
+  }, 1500); // Simulate a 1.5-second network delay
+};
+
+const showPlaceholderAlert = (featureName: string) => {
+  alert(`${featureName} 功能正在开发中，敬请期待！`);
 };
 </script>
 
diff --git a/shihuashishuo-ui/src/views/SearchResultView-搜索结果页.vue b/shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue
similarity index 100%
rename from shihuashishuo-ui/src/views/SearchResultView-搜索结果页.vue
rename to shihuashishuo-ui/src/views/核心体验页/SearchResultView-搜索结果页.vue
diff --git a/shihuashishuo-ui/src/views/SearchView-搜索页.vue b/shihuashishuo-ui/src/views/核心体验页/SearchView-搜索页.vue
similarity index 57%
rename from shihuashishuo-ui/src/views/SearchView-搜索页.vue
rename to shihuashishuo-ui/src/views/核心体验页/SearchView-搜索页.vue
index e44a37f..93a15e2 100644
--- a/shihuashishuo-ui/src/views/SearchView-搜索页.vue
+++ b/shihuashishuo-ui/src/views/核心体验页/SearchView-搜索页.vue
@@ -13,18 +13,18 @@
       <section class="history-section">
         <h4>历史记录</h4>
         <div class="tags">
-          <span class="tag">牛奶</span>
-          <span class="tag">酱油</span>
-          <span class="tag">益生菌</span>
+          <span v-for="tag in historyTags" :key="tag" class="tag" @click="searchWithTag(tag)">
+            {{ tag }}
+          </span>
         </div>
       </section>
 
       <section class="hot-search-section">
         <h4>热门搜索</h4>
         <div class="tags">
-          <span class="tag">酸奶评测</span>
-          <span class="tag">无麸质</span>
-          <span class="tag">宝宝辅食</span>
+          <span v-for="tag in hotSearchTags" :key="tag" class="tag" @click="searchWithTag(tag)">
+            {{ tag }}
+          </span>
         </div>
       </section>
     </main>
@@ -38,20 +38,38 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 const searchQuery = ref('');
 
+const historyTags = ref(['牛奶', '酱油', '益生菌', '宝宝零食']);
+const hotSearchTags = ref(['酸奶评测', '无麸质', '宝宝辅食', '添加剂查询', '预制菜']);
+
 const goBack = () => {
   router.back();
 };
 
 const performSearch = () => {
-  if (searchQuery.value.trim()) {
-    router.push({ name: 'search-result', query: { q: searchQuery.value } });
+  const query = searchQuery.value.trim();
+  if (query) {
+    console.log(`Prototype: Simulating search for "${query}"...`);
+    alert(`正在搜索 "${query}", 请稍候...`);
+
+    setTimeout(() => {
+      router.push({ name: 'search-result', query: { q: query } });
+    }, 1000); // Simulate a 1-second network delay
+  } else {
+    alert('请输入搜索内容！');
   }
 };
+
+const searchWithTag = (tag: string) => {
+  searchQuery.value = tag;
+  performSearch();
+};
 </script>
 
 <style scoped>
 .search-view {
   padding-top: 60px;
+  height: 100%;
+  background-color: #f9fafb;
 }
 .top-bar {
   display: flex;
@@ -68,7 +86,13 @@ const performSearch = () => {
   z-index: 10;
 }
 .back-btn {
-  background: none; border: none; font-size: 20px; cursor: pointer; padding-right: 10px;
+  background: none;
+  border: none;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  padding-right: 10px;
+  color: #333;
 }
 .search-input-wrapper {
   flex-grow: 1;
@@ -80,18 +104,21 @@ const performSearch = () => {
 }
 .search-icon {
   margin-right: 8px;
+  color: #6b7280;
 }
 .search-input-wrapper input {
   border: none;
   outline: none;
   background: transparent;
   width: 100%;
+  font-size: 14px;
 }
 .search-btn {
   background: none;
   border: none;
   color: #22c55e;
   font-size: 16px;
+  font-weight: bold;
   cursor: pointer;
   padding-left: 15px;
 }
@@ -99,23 +126,30 @@ const performSearch = () => {
 .content {
   padding: 20px;
 }
-.history-section, .hot-search-section {
-  margin-bottom: 25px;
+.history-section,
+.hot-search-section {
+  margin-bottom: 30px;
 }
 h4 {
   font-size: 16px;
-  margin-bottom: 10px;
+  font-weight: bold;
+  margin-bottom: 15px;
+  color: #111827;
 }
 .tags {
   display: flex;
   flex-wrap: wrap;
-  gap: 10px;
+  gap: 12px;
 }
 .tag {
   background-color: #f3f4f6;
-  padding: 5px 12px;
-  border-radius: 15px;
+  padding: 8px 15px;
+  border-radius: 18px;
   font-size: 14px;
   cursor: pointer;
+  transition: background-color 0.2s;
+}
+.tag:hover {
+  background-color: #e5e7eb;
 }
 </style>
\ No newline at end of file