diff --git a/.trae/documents/ZnIcon字体图标组件封装计划.md b/.trae/documents/ZnIcon字体图标组件封装计划.md
new file mode 100644
index 0000000..e6329ce
--- /dev/null
+++ b/.trae/documents/ZnIcon字体图标组件封装计划.md
@@ -0,0 +1,113 @@
+# ZnIcon 字体图标组件封装计划
+
+## Summary
+
+基于项目现有字体映射表 [znicons.js](file:///d:/www/znkj/nianxx-h5/src/assets/fonts/znicons.js)，结合 Tailwind CSS 的 class 体系，补齐并统一封装字体图标组件 `ZnIcon`：
+
+- 新增可复用组件：`src/components/ZnIcon/index.vue`
+- 统一字体加载：在全局样式中声明 `@font-face`（字体源使用 `src/assets/fonts/znicons.ttf`）
+- 增加兼容层：补齐 `@/assets/fonts/znicons` 的历史导入路径，避免逐文件改动才能编译
+- 输出后续替换路径与校验方式
+
+## Current State Analysis（以仓库为准）
+
+- 字体映射表存在：`src/assets/fonts/znicons.js`
+- 字体文件存在：`src/assets/fonts/znicons.ttf`
+- 组件骨架存在但为空：`src/components/ZnIcon/index.vue`（0 行）
+- 业务中大量使用 `<uni-icons fontFamily="znicons">` + `zniconsMap[...]` 的方式展示字体图标，并且存在历史路径导入：
+  - `import { zniconsMap } from "@/static/fonts/znicons(.js)"`（仓库内当前没有 `src/static/`）
+- 多处样式中通过 `@font-face` 引用 `@/static/fonts/znicons.ttf`，但仓库内无该字体路径，导致字体加载不稳定：
+  - `src/components/ImageSwiper/styles/index.scss`
+  - `src/components/GoodDetail/index.vue`
+  - `src/pages/goods/components/GoodFacility/index.vue`
+  - `src/pages/login/index.vue`
+
+## Assumptions & Decisions（已确认）
+
+- 改动范围：兼容层优先（先把组件 + 兼容路径落地；业务替换后续逐步做）
+- 组件 API：props 为主（同时允许 class 传入 Tailwind 样式覆盖）
+- 字体资源路径：统一以 `src/assets/fonts/znicons.ttf` 为唯一来源
+
+## Proposed Changes
+
+### 1) 实现 `ZnIcon` 组件
+
+文件：`src/components/ZnIcon/index.vue`
+
+#### 组件目标
+
+- 以 `name`（映射 key）渲染对应字体图标字符
+- 支持 size/color 作为 props（便于统一口径）
+- 支持传入 `class` 使用 Tailwind 控制颜色、间距、对齐等；默认采用 `inline-flex` + `leading-none`
+
+#### Props 设计（建议）
+
+- `name: string`（必填；对应 `zniconsMap` 的 key）
+- `size?: number | string`（默认 16；number 按 px 处理，string 原样写入）
+- `color?: string`（可选；不传则使用 `currentColor`，便于 Tailwind `text-*` 控制）
+- `title?: string`（可选；用于无障碍/tooltip）
+
+#### 渲染与样式策略
+
+- 渲染元素：`<span>`（默认 `aria-hidden`，若传 title 则补充可访问属性）
+- `style`：
+  - `fontFamily: "znicons"`
+  - `fontSize`：来自 `size`
+  - `color`：仅当传入 `color` 时设置，否则依赖 `currentColor`
+- `class`：默认 `inline-flex items-center justify-center leading-none select-none`，并合并用户传入 class
+
+### 2) 全局声明 znicons 字体（统一入口）
+
+文件：`src/styles/main.css`
+
+新增 `@font-face`（放在文件较靠前位置，确保早加载）：
+
+- `font-family: znicons;`
+- `src: url("@/assets/fonts/znicons.ttf") format("truetype");`
+- `font-display: swap;`
+
+说明：
+
+- 项目入口已在 `src/main.ts` 引入 `@/styles/main.css`，无需额外引入步骤
+
+### 3) 增加历史导入路径兼容层（不改业务代码也能编译）
+
+新增文件：`src/static/fonts/znicons.js`
+
+- 仅做 re-export：`export { zniconsMap } from "@/assets/fonts/znicons.js"`
+
+说明：
+
+- 这一步用于兼容现有 `@/static/fonts/znicons(.js)` 的导入，减少“全仓替换 import 路径”的一次性风险
+
+### 4) 修正历史字体路径引用（从 static 统一到 assets）
+
+将以下文件中的字体引用路径：
+
+- 从 `@/static/fonts/znicons.ttf`
+- 改为 `@/assets/fonts/znicons.ttf`
+
+涉及文件（基于当前扫描结果）：
+
+- `src/components/ImageSwiper/styles/index.scss`
+- `src/components/GoodDetail/index.vue`
+- `src/pages/goods/components/GoodFacility/index.vue`
+- `src/pages/login/index.vue`
+
+注：
+
+- 只做路径替换，不改动组件业务逻辑
+- 保留重复的 `@font-face` 也不影响功能，但建议后续逐步移除重复声明，最终只保留全局 `main.css` 的一处定义
+
+## Verification
+
+实现完成后手动执行：
+
+- `yarn typecheck`
+- `yarn build`
+
+验收标准：
+
+- `ZnIcon` 组件可在任一页面按 props 正常渲染图标
+- 字体在浏览器中可加载成功（Network 中能看到 `znicons.ttf`）
+- 现有 `@/static/fonts/znicons` 导入不再报错（由兼容层兜底）
diff --git a/package.json b/package.json
index 370b0df..82b326f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/tsconfig": "^0.7.0",
     "concurrently": "^9.2.1",
+    "sass": "1.58.3",
     "tailwindcss": "^4.1.12",
     "typescript": "^5.8.3",
     "vconsole": "^3.15.1",
diff --git a/src/components/AddCarCrad/index.vue b/src/components/AddCarCrad/index.vue
index 0039f8a..aa1b1f7 100644
--- a/src/components/AddCarCrad/index.vue
+++ b/src/components/AddCarCrad/index.vue
@@ -1,19 +1,15 @@
 <template>
-  <div class="add-car-card">
+  <div class="flex flex-col items-center">
     <div class="description">
       请绑定真实有效的车牌号，否则将无法正常使用车牌付费等功能
     </div>
-    <img
-      class="code-img"
-      src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20250920102920_354_52.png"
-      mode="widthFix"
-      show-menu-by-longpress="true"
-    />
-    <div class="tips">长按二维码识别</div>
+    <img class="mt-[12px] w-[250px] h-[250px] rounded-[4px]"
+      src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20250920102920_354_52.png" />
+    <div class="p-[12px] text-[18px] text-600 text-[#666]">长按二维码识别</div>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { defineProps } from "vue";
 
 const props = defineProps({
@@ -23,7 +19,3 @@ const props = defineProps({
   },
 });
 </script>
-
-<style lang="scss" scoped>
-@import "./styles/index.scss";
-</style>
diff --git a/src/components/AddCarCrad/styles/index.scss b/src/components/AddCarCrad/styles/index.scss
deleted file mode 100644
index 89f33fe..0000000
--- a/src/components/AddCarCrad/styles/index.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.add-car-card {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  .code-img {
-    margin-top: 12px;
-    width: 250px;
-    height: 250px;
-    border-radius: 4px;
-  }
-
-  .tips {
-    padding: 12px;
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #666;
-  }
-}
diff --git a/src/components/AiTabSwitch/index.vue b/src/components/AiTabSwitch/index.vue
index 89c97ed..e7af96e 100644
--- a/src/components/AiTabSwitch/index.vue
+++ b/src/components/AiTabSwitch/index.vue
@@ -1,55 +1,32 @@
 <template>
-  <div class="ai-tab-wrapper">
-    <div class="tab-container">
-      <div
-        class="tab-item is-left"
-        :class="{ active: modelValue === 0 }"
-        @tap="handleSwitch(0)"
-      >
+  <div class="w-full">
+    <div class="relative w-full h-[50px] flex overflow-hidden">
+      <div class="tab-item is-left" :class="{ active: modelValue === 0 }" @tap="handleSwitch(0)">
         <div class="tab-content">
-          <img
-            v-if="leftSelected || leftUnselected"
-            :src="
-              modelValue === 0
-                ? leftSelected || leftUnselected
-                : leftUnselected || leftSelected
-            "
-            class="tab-image"
-            mode="scaleToFill"
-          />
+          <img v-if="leftSelected || leftUnselected" :src="modelValue === 0
+            ? leftSelected || leftUnselected
+            : leftUnselected || leftSelected
+            " class="tab-image" mode="scaleToFill" />
           <div class="tab-label">
             <spanclass="tab-text">探索发现</text>
           </div>
         </div>
       </div>
 
-      <div
-        class="tab-item is-right"
-        :class="{ active: modelValue === 1 }"
-        @tap="handleSwitch(1)"
-      >
+      <div class="tab-item is-right" :class="{ active: modelValue === 1 }" @tap="handleSwitch(1)">
         <div class="tab-content">
-          <img
-            v-if="rightSelected || rightUnselected"
-            :src="
-              modelValue === 1
-                ? rightSelected || rightUnselected
-                : rightUnselected || rightSelected
-            "
-            class="tab-image"
-            mode="scaleToFill"
-          />
+          <img v-if="rightSelected || rightUnselected" :src="modelValue === 1
+            ? rightSelected || rightUnselected
+            : rightUnselected || rightSelected
+            " class="tab-image" mode="scaleToFill" />
           <div class="tab-label">
             <spanclass="tab-text">AI伴游</text>
-            <div
-              v-if="showDot"
-              :class="[
+              <div v-if="showDot" :class="[
                 'status-dot',
                 modelValue === 1
                   ? 'status-dot--active'
                   : 'status-dot--inactive',
-              ]"
-            ></div>
+              ]"></div>
           </div>
         </div>
       </div>
diff --git a/src/components/AiTabSwitch/styles/index.scss b/src/components/AiTabSwitch/styles/index.scss
index 6b1b96d..411aff7 100644
--- a/src/components/AiTabSwitch/styles/index.scss
+++ b/src/components/AiTabSwitch/styles/index.scss
@@ -1,15 +1,3 @@
-.ai-tab-wrapper {
-  width: 100%;
-}
-
-.tab-container {
-  position: relative;
-  width: 100%;
-  height: 50px;
-  display: flex;
-  overflow: hidden;
-}
-
 .tab-item {
   position: relative;
   flex: 1;
diff --git a/src/components/Calender/styles/index.scss b/src/components/Calender/styles/index.scss
index 76b6695..24720be 100644
--- a/src/components/Calender/styles/index.scss
+++ b/src/components/Calender/styles/index.scss
@@ -80,7 +80,7 @@ $font-size-label: 10px;
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: $uni-border-radius-circle;
+  border-radius: 50%;
   transition: background-color 0.2s;
 
   &:active {
diff --git a/src/components/CheckBox/styles/index.scss b/src/components/CheckBox/styles/index.scss
index 3ed1446..23392a5 100644
--- a/src/components/CheckBox/styles/index.scss
+++ b/src/components/CheckBox/styles/index.scss
@@ -5,6 +5,6 @@
 
   .checkbox-icon {
     margin-right: 6px;
-    color: $theme-color-500;
+    color: #0ccd58;
   }
 }
diff --git a/src/components/CommandWrapper/styles/index.scss b/src/components/CommandWrapper/styles/index.scss
index e9f3499..5eebd01 100644
--- a/src/components/CommandWrapper/styles/index.scss
+++ b/src/components/CommandWrapper/styles/index.scss
@@ -1,5 +1,5 @@
 .command-wrapper {
-  background-color: $theme-color-500;
+  background-color: #0ccd58;
   border-radius: 20px 4px 20px 20px;
   padding: 8px 24px;
   width: max-content;
diff --git a/src/components/CreateServiceOrder/index.vue b/src/components/CreateServiceOrder/index.vue
index aa35022..f48d7f7 100644
--- a/src/components/CreateServiceOrder/index.vue
+++ b/src/components/CreateServiceOrder/index.vue
@@ -1,84 +1,42 @@
 <template>
   <div class="create-service-order">
-    <div
-      class="w-full bg-white border-box border-ff overflow-hidden rounded-20"
-    >
-      <div
-        class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50"
-      >
+    <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20">
+      <div class="border-box order-header w-vw flex flex-items-center flex-justify-between bg-theme-color-50">
         <spanclass="font-size-18 font-500 color-171717 text-left ml-12">
           {{ isCallSuccess ? "服务已创建" : "呼叫服务" }}
-        </text>
-        <img
-          class="header-icon"
-          src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png"
-        />
+          </text>
+          <img class="header-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/feedback.png" />
       </div>
 
       <div v-if="!isCallSuccess" class="border-box p-12">
-        <div
-          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
-        >
+        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
           <spanclass="font-500 line-height-22 mr-20">所在位置</text>
-          <input placeholder="请填写所在位置" v-model="roomId" />
+            <input placeholder="请填写所在位置" v-model="roomId" />
         </div>
 
-        <div
-          class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12"
-        >
+        <div class="bg-F5F7FA border-box flex flex-items-center p-12 rounded-10 font-size-14 color-171717 mb-12">
           <spanclass="font-500 line-height-22 mr-20">联系电话</text>
-          <input
-            placeholder="请填写联系电话"
-            v-model="contactPhone"
-            @input="handleContactPhoneInput"
-          />
+            <input placeholder="请填写联系电话" v-model="contactPhone" @input="handleContactPhoneInput" />
         </div>
 
-        <div
-          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
-        >
+        <div class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
           <div class="font-500 line-height-22 mb-12">需求信息描述</div>
-          <textarea
-            class="h-80"
-            placeholder="请输入需求信息描述"
-            placeholder-class="font-size-14 font-400"
-            maxlength="100"
-            v-model="contactText"
-          />
+          <textarea class="h-80" placeholder="请输入需求信息描述" placeholder-class="font-size-14 font-400" maxlength="100"
+            v-model="contactText" />
         </div>
 
-        <div
-          class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12"
-        >
+        <div class="bg-F5F7FA border-box p-12 rounded-10 font-size-14 font-500 color-171717 mb-12">
           <div class="font-500 line-height-22 mb-12">照片上传</div>
 
-          <div
-            class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center"
-          >
-            <div
-              v-if="contentImgUrl"
-              class="w-full h-full relative inline-block"
-            >
-              <img
-                class="w-full h-full block"
-                :src="contentImgUrl"
-                mode="aspectFill"
-              />
-              <uni-icons
-                class="close-btn absolute z-10"
-                type="close"
-                size="20"
-                color="#6A717F"
-                @click="handleDeleteImage"
-              >
+          <div class="w-80 h-80 bg-white rounded-8 overflow-hidden flex flex-items-center flex-justify-center">
+            <div v-if="contentImgUrl" class="w-full h-full relative inline-block">
+              <img class="w-full h-full block" :src="contentImgUrl" mode="aspectFill" />
+              <uni-icons class="close-btn absolute z-10" type="close" size="20" color="#6A717F"
+                @click="handleDeleteImage">
               </uni-icons>
             </div>
 
-            <div
-              v-else
-              class="w-full h-full flex flex-items-center flex-justify-center"
-              @click="handleChooseImage"
-            >
+            <div v-else class="w-full h-full flex flex-items-center flex-justify-center" @click="handleChooseImage">
               <uni-icons fontFamily="znicons" size="24" color="#6A717F">
                 {{ zniconsMap["zn-camera"] }}
               </uni-icons>
@@ -96,22 +54,15 @@
             联系方式: {{ contactPhone }}
           </div>
           <div class="font-size-12 color-525866 line-height-20 ellipsis-2">
-            需求描述: {{ contactspan}}
+            需求描述: {{ contactspan }}
           </div>
         </div>
 
-        <img
-          v-if="contentImgUrl"
-          class="right rounded-6"
-          :src="contentImgUrl"
-          mode="aspectFill"
-        />
+        <img v-if="contentImgUrl" class="right rounded-6" :src="contentImgUrl" mode="aspectFill" />
       </div>
 
-      <div
-        class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
-        @click="handleCall"
-      >
+      <div class="btn rounded-50 color-white bg-button flex flex-items-center flex-justify-center ml-12 mr-12 mb-12"
+        @click="handleCall">
         {{ isCallSuccess ? "查看服务" : "立即呼叫" }}
       </div>
     </div>
@@ -123,7 +74,7 @@ import { ref, computed, onMounted, nextTick, defineProps, watch } from "vue";
 import { SCROLL_TO_BOTTOM } from "@/constant/constant";
 import { createWorkOrder } from "@/request/api/WorkOrderApi";
 import { updateImageFile } from "@/request/api/UpdateFile";
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import { zniconsMap } from "@/assets/fonts/znicons";
 
 const props = defineProps({
   toolCall: {
@@ -150,7 +101,7 @@ const contactPhone = ref("");
 // 是否用户已编辑过手机号（一旦编辑则不再脱敏）
 const hasEditedPhone = ref(false);
 // 需求信息描述：使用可写的 ref，并从工具结果初始化
-const contactspan= ref("");
+const contactspan = ref("");
 
 // 手机号脱敏：138****1234（仅对11位数字进行处理）
 const maskPhone = (phone) => {
diff --git a/src/components/FormCard/demo.vue b/src/components/FormCard/demo.vue
index 424b39c..ff80f43 100644
--- a/src/components/FormCard/demo.vue
+++ b/src/components/FormCard/demo.vue
@@ -14,13 +14,8 @@
     <!-- 示例1: 基础用法 -->
     <div class="demo-section">
       <div class="section-title">示例1: 基础用法</div>
-      <FormCard
-        :form="form1"
-        title="游客1"
-        @update:name="form1.name = $event"
-        @update:phone="form1.phone = $event"
-        @delete="handleDelete1"
-      />
+      <FormCard :form="form1" title="游客1" @update:name="form1.name = $event" @update:phone="form1.phone = $event"
+        @delete="handleDelete1" />
       <div class="form-data">
         <text>姓名: {{ form1.name }}</text>
         <text>手机号: {{ form1.phone }}</text>
@@ -30,13 +25,8 @@
     <!-- 示例2: 自定义标题 -->
     <div class="demo-section">
       <div class="section-title">示例2: 自定义标题</div>
-      <FormCard
-        :form="form2"
-        title="成人票"
-        @update:name="form2.name = $event"
-        @update:phone="form2.phone = $event"
-        @delete="handleDelete2"
-      />
+      <FormCard :form="form2" title="成人票" @update:name="form2.name = $event" @update:phone="form2.phone = $event"
+        @delete="handleDelete2" />
       <div class="form-data">
         <text>姓名: {{ form2.name }}</text>
         <text>手机号: {{ form2.phone }}</text>
@@ -46,13 +36,8 @@
     <!-- 示例3: 隐藏删除图标 -->
     <div class="demo-section">
       <div class="section-title">示例3: 隐藏删除图标</div>
-      <FormCard
-        :form="form3"
-        title="联系人信息"
-        :show-delete-icon="false"
-        @update:name="form3.name = $event"
-        @update:phone="form3.phone = $event"
-      />
+      <FormCard :form="form3" title="联系人信息" :show-delete-icon="false" @update:name="form3.name = $event"
+        @update:phone="form3.phone = $event" />
       <div class="form-data">
         <text>姓名: {{ form3.name }}</text>
         <text>手机号: {{ form3.phone }}</text>
@@ -62,15 +47,8 @@
     <!-- 示例4: 多个表单卡片 -->
     <div class="demo-section">
       <div class="section-title">示例4: 多个表单卡片</div>
-      <FormCard
-        v-for="(item, index) in formList"
-        :key="index"
-        :form="item"
-        :title="`游客${index + 1}`"
-        @update:name="item.name = $event"
-        @update:phone="item.phone = $event"
-        @delete="handleDeleteForm(index)"
-      />
+      <FormCard v-for="(item, index) in formList" :key="index" :form="item" :title="`游客${index + 1}`"
+        @update:name="item.name = $event" @update:phone="item.phone = $event" @delete="handleDeleteForm(index)" />
       <button class="add-btn" @click="addForm">添加游客</button>
 
       <div class="form-list-data">
@@ -188,7 +166,7 @@ const addForm = () => {
   font-weight: 600;
   margin-bottom: 20rpx;
   color: #333;
-  border-left: 6rpx solid $theme-color-500;
+  border-left: 6rpx solid #0CCD58;
   padding-left: 16rpx;
 }
 
@@ -214,7 +192,7 @@ const addForm = () => {
 .add-btn {
   width: 100%;
   height: 80rpx;
-  background: $theme-color-500;
+  background: #0CCD58;
   color: #fff;
   border: none;
   border-radius: 8rpx;
diff --git a/src/components/FormCard/styles/index.scss b/src/components/FormCard/styles/index.scss
index 830002e..044f0f2 100644
--- a/src/components/FormCard/styles/index.scss
+++ b/src/components/FormCard/styles/index.scss
@@ -30,7 +30,7 @@ $form-transition: all 0.2s ease;
   min-height: 44px;
 
   .uni-color {
-    color: $theme-color-500;
+    color: #0ccd58;
   }
 
   .minus,
@@ -54,7 +54,7 @@ $form-transition: all 0.2s ease;
   margin-left: 8px;
   font-size: $uni-font-size-lg;
   font-weight: 500;
-  color: $theme-color-500;
+  color: #0ccd58;
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -114,7 +114,7 @@ $form-transition: all 0.2s ease;
   }
 
   &:focus {
-    border-bottom-color: $theme-color-500;
+    border-bottom-color: #0ccd58;
 
     &::placeholder {
       opacity: 0.5;
diff --git a/src/components/GoodDetail/index.vue b/src/components/GoodDetail/index.vue
index 1b5a36d..047e6c3 100644
--- a/src/components/GoodDetail/index.vue
+++ b/src/components/GoodDetail/index.vue
@@ -1,53 +1,37 @@
 <template>
   <div class="border-box border-top-8">
-    <div
-      v-if="goodsData.commodityPurchaseInstruction"
-      class="border-box pl-12 pr-12"
-    >
-      <ModuleTitle
-        v-if="showTitle"
-        :title="goodsData.commodityPurchaseInstruction.templateTitle"
-      />
-      <div
-        v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
-          .commodityPurchaseInstructionModuleEntityList"
-        :key="index"
-      >
-        <div
-          class="flex flex-items-start flex-col pt-12 pb-12"
-          :class="{
-            'border-bottom':
-              index <
-              goodsData.commodityPurchaseInstruction
-                .commodityPurchaseInstructionModuleEntityList.length -
-                1,
-          }"
-        >
+    <div v-if="goodsData.commodityPurchaseInstruction" class="border-box pl-12 pr-12">
+      <ModuleTitle v-if="showTitle" :title="goodsData.commodityPurchaseInstruction.templateTitle" />
+      <div v-for="(moduleItem, index) in goodsData.commodityPurchaseInstruction
+        .commodityPurchaseInstructionModuleEntityList" :key="index">
+        <div class="flex flex-items-start flex-col pt-12 pb-12" :class="{
+          'border-bottom':
+            index <
+            goodsData.commodityPurchaseInstruction
+              .commodityPurchaseInstructionModuleEntityList.length -
+            1,
+        }">
           <div class="flex flex-items-center flex-row flex-shrink-0 mr-8">
             <uni-icons fontFamily="znicons" size="20" color="#333">
               {{ zniconsMap[moduleItem.moduleIcon] }}
             </uni-icons>
             <spanclass="ml-4 font-size-14 color-171717 line-height-20">
               {{ moduleItem.moduleTitle }}
-            </text>
+              </text>
           </div>
           <spanclass="flex-full font-size-12 color-525866 line-height-20 mt-4">
             {{ moduleItem.moduleContent }}
-          </text>
+            </text>
         </div>
       </div>
     </div>
-    <zero-markdown-div
-      v-else
-      :markdown="goodsData.commodityTip"
-      :aiMode="true"
-    />
+    <zero-markdown-div v-else :markdown="goodsData.commodityTip" :aiMode="true" />
   </div>
 </template>
 
 <script setup>
 import ModuleTitle from "@/components/ModuleTitle/index.vue";
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import { zniconsMap } from "@/assets/fonts/znicons";
 import { defineProps } from "vue";
 
 // Props定义
@@ -66,6 +50,6 @@ const props = defineProps({
 <style scoped lang="scss">
 @font-face {
   font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
+  src: url("@/assets/fonts/znicons.ttf");
 }
 </style>
diff --git a/src/components/ImageSwiper/index.vue b/src/components/ImageSwiper/index.vue
index 5b04ba3..699d734 100644
--- a/src/components/ImageSwiper/index.vue
+++ b/src/components/ImageSwiper/index.vue
@@ -1,53 +1,21 @@
 <template>
   <div class="image-swiper">
-    <swiper
-      class="swiper-box"
-      :style="swiperStyle"
-      :autoplay="false"
-      :interval="3000"
-      :duration="1000"
-      :current="active"
-      @change="handleSwiperChange"
-    >
-      <swiper-item
-        class="swiper-item"
-        v-for="(item, index) in thumbnails"
-        :key="index"
-      >
-        <img
-          class="swiper-item-image"
-          :src="item.photoUrl"
-          mode="aspectFill"
-        ></image>
+    <swiper class="swiper-box" :style="swiperStyle" :autoplay="false" :interval="3000" :duration="1000"
+      :current="active" @change="handleSwiperChange">
+      <swiper-item class="swiper-item" v-for="(item, index) in thumbnails" :key="index">
+        <img class="swiper-item-image" :src="item.photoUrl" mode="aspectFill"></image>
       </swiper-item>
     </swiper>
 
     <!-- 缩略图部分 -->
-    <div
-      v-if="showThumbnails && thumbnails.length > 0"
-      class="thumbnail-box"
-      :style="thumbnailBoxStyle"
-    >
-      <scroll-div
-        class="thumbnail-scroll"
-        scroll-x="true"
-        :scroll-left="scrollLeft"
-        :scroll-with-animation="true"
-        show-scrollbar="false"
-      >
+    <div v-if="showThumbnails && thumbnails.length > 0" class="thumbnail-box" :style="thumbnailBoxStyle">
+      <scroll-div class="thumbnail-scroll" scroll-x="true" :scroll-left="scrollLeft" :scroll-with-animation="true"
+        show-scrollbar="false">
         <div class="thumbnail-list" v-if="thumbnails.length > 1">
-          <div
-            v-for="(thumb, index) in thumbnails"
-            :key="index"
-            :class="['thumbnail-item', { active: index === active }]"
-            :id="`thumbnail-${index}`"
-            @click="handleThumbnailClick(index)"
-          >
-            <img
-              class="thumbnail-image"
-              :src="thumb.photoUrl"
-              mode="aspectFill"
-            ></image>
+          <div v-for="(thumb, index) in thumbnails" :key="index"
+            :class="['thumbnail-item', { active: index === active }]" :id="`thumbnail-${index}`"
+            @click="handleThumbnailClick(index)">
+            <img class="thumbnail-image" :src="thumb.photoUrl" mode="aspectFill"></image>
           </div>
         </div>
       </scroll-div>
@@ -57,9 +25,9 @@
           zniconsMap["zn-camera"]
         }}</uni-icons>
         <spanclass="custom-indicator-text">{{ thumbnails.length }}</text>
-        <uni-icons fontFamily="znicons" size="10" color="#fff">{{
-          zniconsMap["zn-nav-arrow-right"]
-        }}</uni-icons>
+          <uni-icons fontFamily="znicons" size="10" color="#fff">{{
+            zniconsMap["zn-nav-arrow-right"]
+            }}</uni-icons>
       </div>
     </div>
   </div>
@@ -67,7 +35,7 @@
 
 <script setup>
 import { ref, computed, nextTick } from "vue";
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import { zniconsMap } from "@/assets/fonts/znicons";
 import { usePictureStore } from "@/store";
 const pictureStore = usePictureStore();
 
diff --git a/src/components/ImageSwiper/styles/index.scss b/src/components/ImageSwiper/styles/index.scss
index efcc5e4..e41f361 100644
--- a/src/components/ImageSwiper/styles/index.scss
+++ b/src/components/ImageSwiper/styles/index.scss
@@ -1,6 +1,6 @@
 @font-face {
   font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
+  src: url("@/assets/fonts/znicons.ttf");
 }
 
 .image-swiper {
diff --git a/src/components/Privacy/index.vue b/src/components/Privacy/index.vue
index 6f4892f..b8471ac 100644
--- a/src/components/Privacy/index.vue
+++ b/src/components/Privacy/index.vue
@@ -3,23 +3,14 @@
     <div class="content">
       <div class="title">隐私保护指引</div>
       <div class="des">
-        请您仔细阅读并充分理解<text
-          class="link"
-          @click="handleOpenPrivacyContract"
-          >{{ privacyContractName }}</text
-        >
-        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<spanclass="cancel"
-          >如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text
-        >
+        请您仔细阅读并充分理解<text class="link" @click="handleOpenPrivacyContract">{{ privacyContractName }}</text>
+        ，如您同意前述协议的全部内容，请点击“同意”开始使用。<spanclass="cancel">如您不同意，将被限制使用部分功能，或将在您使用具体功能前再次询问以取得您的授权同意。</text>
       </div>
 
       <div class="btns">
         <button class="reject" @click="handleDisagree">拒绝</button>
-        <button
-          class="agree"
-          open-type="agreePrivacyAuthorization"
-          @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
-        >
+        <button class="agree" open-type="agreePrivacyAuthorization"
+          @agreeprivacyauthorization="handleAgreePrivacyAuthorization">
           同意
         </button>
       </div>
@@ -29,37 +20,10 @@
 
 <script setup>
 import { ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
 
 const showPrivacy = ref(false);
 const privacyContractName = ref("隐私保护指引");
 
-onShow(() => {
-  // 条件编译微信小程序
-  // #ifdef MP-WEIXIN
-
-  wx.getPrivacySetting({
-    success: (res) => {
-      console.log("cj隐私配置", res);
-      if (res.errMsg == "getPrivacySetting:ok") {
-        privacyContractName.value = res.privacyContractName;
-        showPrivacy.value = !!res.needAuthorization;
-      }
-    },
-  });
-  // #endif
-
-  // 条件编译抖音小程序
-  // #ifdef MP-TOUTIAO
-  uni.getPrivacySetting({
-    success: (res) => {
-      console.log(res);
-      showPrivacy.value = !!res.needAuthorization;
-    },
-  });
-  // #endif
-});
-
 // 拒绝
 const handleDisagree = () => {
   showPrivacy.value = false;
@@ -75,7 +39,7 @@ const handleOpenPrivacyContract = () => {
   // 条件编译微信小程序
   // #ifdef MP-WEIXIN
   wx.openPrivacyContract({
-    fail: () => {},
+    fail: () => { },
   });
   // #endif
 };
diff --git a/src/components/ServiceTipsWord/styles/index.scss b/src/components/ServiceTipsWord/styles/index.scss
index 54dcda8..abadbee 100644
--- a/src/components/ServiceTipsWord/styles/index.scss
+++ b/src/components/ServiceTipsWord/styles/index.scss
@@ -48,6 +48,6 @@
   );
   font-size: $uni-font-size-sm;
   font-weight: 500;
-  color: $theme-color-500;
+  color: #0ccd58;
   border-radius: $uni-border-radius-50px;
 }
diff --git a/src/components/Speech/RecordingWaveBtn.vue b/src/components/Speech/RecordingWaveBtn.vue
index 4cb2b81..8767e57 100644
--- a/src/components/Speech/RecordingWaveBtn.vue
+++ b/src/components/Speech/RecordingWaveBtn.vue
@@ -1,15 +1,10 @@
 <template>
   <div class="recording-wave-btn">
     <div class="audio-visualizer">
-      <div
-        v-for="(bar, index) in audioBars"
-        :key="index"
-        class="audio-bar"
-        :style="{
-          height: bar.height + 'px',
-          transition: 'height 0.1s ease-out',
-        }"
-      ></div>
+      <div v-for="(bar, index) in audioBars" :key="index" class="audio-bar" :style="{
+        height: bar.height + 'px',
+        transition: 'height 0.1s ease-out',
+      }"></div>
     </div>
   </div>
 </template>
@@ -107,7 +102,7 @@ defineExpose({
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: $theme-color-500;
+  background-color: #0CCD58;
   height: 44px;
   border-radius: $uni-border-radius-50px;
 }
diff --git a/src/components/SwipeCards/styles/index.scss b/src/components/SwipeCards/styles/index.scss
index d3bab55..4d25d78 100644
--- a/src/components/SwipeCards/styles/index.scss
+++ b/src/components/SwipeCards/styles/index.scss
@@ -21,7 +21,6 @@
   height: 193px;
 }
 
-
 .album-item {
   width: 96px;
   height: 60px;
@@ -34,7 +33,7 @@
 
 /* 底部价格与购买按钮 */
 .card-footer {
-  border-top: 1px solid rgba(0,0,0,0.04);
+  border-top: 1px solid rgba(0, 0, 0, 0.04);
 }
 
 .card-footer .price-left {
@@ -44,7 +43,7 @@
 }
 
 .buy-btn {
-  background-color: $theme-color-500;
+  background-color: #0ccd58;
   color: #fff;
   margin-top: 12px;
   padding: 12px 24px;
diff --git a/src/components/TagsGroup/styles/index.scss b/src/components/TagsGroup/styles/index.scss
index e1be6a2..0d61d31 100644
--- a/src/components/TagsGroup/styles/index.scss
+++ b/src/components/TagsGroup/styles/index.scss
@@ -8,6 +8,6 @@
   border-radius: 10px;
   padding: 8px 16px;
   font-size: $uni-font-size-sm;
-  color: $theme-color-500;
+  color: #0ccd58;
   white-space: nowrap;
 }
diff --git a/src/components/UseDateRange/styles/index.scss b/src/components/UseDateRange/styles/index.scss
index e03ad34..74e2c75 100644
--- a/src/components/UseDateRange/styles/index.scss
+++ b/src/components/UseDateRange/styles/index.scss
@@ -11,7 +11,7 @@
   height: 86px;
   background: #fff;
   border-radius: 10px;
-  box-shadow: 0 0 0 1px rgba(0,0,0,0.04);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
   margin-right: 12px;
   padding: 8px 10px;
   box-sizing: border-box;
@@ -22,25 +22,26 @@
   align-items: center;
   overflow: hidden;
 }
-.date-item .label { 
-  margin-bottom: 6px; 
-  color: #999; 
+.date-item .label {
+  margin-bottom: 6px;
+  color: #999;
 }
-.date-item .md { 
-  margin-bottom: 6px; 
-  color: #000; 
+.date-item .md {
+  margin-bottom: 6px;
+  color: #000;
+}
+.date-item .status {
+  font-size: 12px;
+  color: #999;
 }
-.date-item .status { 
-  font-size: 12px; 
-  color: #999; }
 .date-item.selected {
-  border: 1px solid $theme-color-500;
+  border: 1px solid #0ccd58;
   background: $theme-color-50;
 }
 .date-item.selected .label,
 .date-item.selected .md,
 .date-item.selected .status {
-  color: $theme-color-500;
+  color: #0ccd58;
 }
 .date-item.disabled {
   opacity: 0.45;
@@ -49,7 +50,7 @@
   position: absolute;
   right: 0;
   bottom: 0;
-  background: $theme-color-500;
+  background: #0ccd58;
   color: #fff;
   width: 18px;
   height: 18px;
@@ -59,4 +60,4 @@
   align-items: center;
   justify-content: center;
   font-size: 11px;
-}
\ No newline at end of file
+}
diff --git a/src/components/ZnIcon/index.vue b/src/components/ZnIcon/index.vue
new file mode 100644
index 0000000..d6010ea
--- /dev/null
+++ b/src/components/ZnIcon/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <span class="inline-flex items-center justify-center leading-none select-none" :style="computedStyle" :title="title"
+    :aria-hidden="title ? undefined : 'true'" :role="title ? 'img' : undefined">
+    {{ glyph }}
+  </span>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { zniconsMap } from "@/assets/fonts/znicons.js";
+
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    size?: number | string;
+    color?: string;
+    title?: string;
+  }>(),
+  {
+    size: 16,
+  },
+);
+
+const glyph = computed(() => {
+  const value = (zniconsMap as Record<string, string>)[props.name];
+  return value ?? "";
+});
+
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {
+    fontFamily: "znicons",
+  };
+
+  const size = props.size;
+  style.fontSize = typeof size === "number" ? `${size}px` : size;
+
+  if (props.color) {
+    style.color = props.color;
+  }
+
+  return style;
+});
+</script>
diff --git a/src/pages/booking/index.vue b/src/pages/booking/index.vue
index df09382..d8ee017 100644
--- a/src/pages/booking/index.vue
+++ b/src/pages/booking/index.vue
@@ -1,28 +1,17 @@
 <template>
   <div class="booking h-screen flex flex-col">
-    <TopNavBar
-      titleAlign="center"
-      :backgroundColor="$theme - color - 100"
-      backIconColor="#000"
-      :shadow="false"
-    >
+    <TopNavBar titleAlign="center" :backgroundColor="$theme - color - 100" backIconColor="#000" :shadow="false">
       <template #title>
         {{ GOODS_TYPE[orderData.orderType] }}
       </template>
     </TopNavBar>
 
-    <div
-      class="booking-content flex-full border-box p-12 overflow-hidden scroll-y"
-    >
+    <div class="booking-content flex-full border-box p-12 overflow-hidden scroll-y">
       <!-- 预约内容 -->
       <div class="border-box bg-white p-12 rounded-12 mb-12">
         <!-- 酒店类型入住离店日期部分 -->
-        <DateRangeSection
-          v-if="orderData.orderType == 0"
-          :selectedDate="selectedDate"
-          :showBtn="true"
-          @click="navigateToDetail(orderData)"
-        />
+        <DateRangeSection v-if="orderData.orderType == 0" :selectedDate="selectedDate" :showBtn="true"
+          @click="navigateToDetail(orderData)" />
 
         <div class="font-size-16 font-500 color-000 line-height-24 ellipsis-1">
           {{ orderData.commodityName }}
@@ -35,59 +24,33 @@
 
           <!-- 权益部分 -->
           <div class="flex flex-items-center mb-8">
-            <span
-              class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
-              v-for="(item, index) in orderData.commodityFacilityList"
-              :key="index"
-            >
+            <span class="bg-F7F7F7 border-box rounded-4 font-size-11 color-525866 mr-4 pt-4 pb-4 pl-6 pr-6"
+              v-for="(item, index) in orderData.commodityFacilityList" :key="index">
               {{ item }}
             </span>
           </div>
         </div>
 
-        <div
-          class="border-box flex flex-items-center flex-justify-between pt-12"
-        >
-          <span class="font-size-12 color-525866 line-height-18"
-            >取消政策及说明</span
-          >
+        <div class="border-box flex flex-items-center flex-justify-between pt-12">
+          <span class="font-size-12 color-525866 line-height-18">取消政策及说明</span>
           <div class="flex flex-items-center">
-            <span
-              class="font-size-12 theme-color-500 line-height-16"
-              @click="refundVisible = true"
-              >取消政策</span
-            >
+            <span class="font-size-12 theme-color-500 line-height-16" @click="refundVisible = true">取消政策</span>
             <uni-icons type="right" size="15" color="#99A0AE" />
           </div>
         </div>
       </div>
 
       <!-- 非酒店类型 -->
-      <ContactSection
-        v-if="orderData.orderType != 0"
-        v-model="quantity"
-        :userFormList="userFormList"
-        v-model:reservationDate="selectedReservationDate"
-        :orderData="orderData"
-      />
+      <ContactSection v-if="orderData.orderType != 0" v-model="quantity" :userFormList="userFormList"
+        v-model:reservationDate="selectedReservationDate" :orderData="orderData" />
 
       <!-- 酒店类型 -->
-      <UserSection
-        v-if="orderData.orderType == 0"
-        v-model="quantity"
-        :userFormList="userFormList"
-      />
+      <UserSection v-if="orderData.orderType == 0" v-model="quantity" :userFormList="userFormList" />
     </div>
 
     <!-- 底部 -->
-    <FooterSection
-      v-if="Object.keys(orderData).length"
-      v-model="quantity"
-      :selectedDate="selectedDate"
-      :orderData="orderData"
-      @detailClick="detailVisible = true"
-      @payClick="handlePayClick"
-    />
+    <FooterSection v-if="Object.keys(orderData).length" v-model="quantity" :selectedDate="selectedDate"
+      :orderData="orderData" @detailClick="detailVisible = true" @payClick="handlePayClick" />
 
     <!-- 取消政策弹窗 -->
     <RefundPopup v-model="refundVisible" :orderData="orderData" />
@@ -99,7 +62,6 @@
 
 <script setup>
 import { ref, watch, nextTick } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import DateRangeSection from "@/components/DateRangeSection/index.vue";
 import ContactSection from "./components/ConactSection/index.vue";
@@ -160,19 +122,22 @@ watch(
   { immediate: false },
 );
 
-onLoad((options) => {
-  const { commodityId } = options;
 
-  getGoodsDetail(commodityId);
-});
+// TODO
 
-onShow(() => {
-  const selectedDateStore = useSelectedDateStore();
+// onLoad((options) => {
+//   const { commodityId } = options;
 
-  selectedDate.value.startDate = selectedDateStore.selectedDate.startDate;
-  selectedDate.value.endDate = selectedDateStore.selectedDate.endDate;
-  selectedDate.value.totalDays = selectedDateStore.selectedDate.totalDays;
-});
+//   getGoodsDetail(commodityId);
+// });
+
+// onShow(() => {
+//   const selectedDateStore = useSelectedDateStore();
+
+//   selectedDate.value.startDate = selectedDateStore.selectedDate.startDate;
+//   selectedDate.value.endDate = selectedDateStore.selectedDate.endDate;
+//   selectedDate.value.totalDays = selectedDateStore.selectedDate.totalDays;
+// });
 
 const getGoodsDetail = async (commodityId) => {
   const res = await goodsDetail({ commodityId });
diff --git a/src/pages/discovery/components/CardSwiper/index.vue b/src/pages/discovery/components/CardSwiper/index.vue
new file mode 100644
index 0000000..e689e5c
--- /dev/null
+++ b/src/pages/discovery/components/CardSwiper/index.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="card-swiper" :class="{ 'is-single': props.list.length <= 1 }" @touchstart="handleTouchStart"
+    @touchmove.stop.prevent="handleTouchMove" @touchend="handleTouchEnd" @touchcancel="handleTouchCancel">
+    <div class="swiper-stage">
+      <div v-for="slot in renderSlots" :key="slot.key" class="swiper-card"
+        :class="[`is-${slot.role}`, { 'is-current': slot.role === 'current' }]" :style="slot.style"
+        @tap="handleCardTap(slot)">
+        <div class="card-shell">
+          <div class="card-media">
+            <img class="card-image" :src="slot.item.coverImage" mode="aspectFill" />
+          </div>
+
+          <div class="card-body">
+            <div v-if="slot.item.tag" class="card-tag">
+              {{ slot.item.tag }}
+            </div>
+            <div class="card-title ellipsis-1">
+              {{ slot.item.title }}
+            </div>
+            <div v-if="slot.item.subTitle" class="card-desc ellipsis-1">
+              {{ slot.item.subTitle }}
+            </div>
+          </div>
+
+          <div v-if="canSwipe" class="card-mask" :style="getMaskStyle(slot.role)" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, onBeforeUnmount, ref, watch } from "vue";
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 0,
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(["update:modelValue", "change", "didSelectItem"]);
+
+const DURATION = 280;
+const RECYCLE_FRAME_DELAY = 32;
+const CLICK_THRESHOLD = 8;
+const SWIPE_THRESHOLD = 60;
+
+const clamp = (value, min, max) => Math.min(Math.max(value, min), max);
+const lerp = (from, to, progress) => from + (to - from) * progress;
+
+const { windowWidth = 375 } = uni.getWindowInfo();
+const sideOffset = Math.max(108, Math.min(windowWidth * 0.26, 148));
+const hiddenOffset = sideOffset + 92;
+
+const activeCursor = ref(0);
+const deltaX = ref(0);
+const isDragging = ref(false);
+const isAnimating = ref(false);
+const isRecycling = ref(false);
+const isTapCandidate = ref(false);
+const swipeStep = ref(0);
+
+let startX = 0;
+let startY = 0;
+let settleTimer = null;
+let recycleTimer = null;
+const instance = getCurrentInstance();
+const hasExternalModel = Object.prototype.hasOwnProperty.call(
+  instance?.vnode.props || {},
+  "modelValue"
+);
+
+const actualCount = computed(() => props.list.length);
+const virtualCount = computed(() => {
+  if (actualCount.value <= 1) return actualCount.value;
+  if (actualCount.value === 2) return 4;
+  return actualCount.value;
+});
+const canSwipe = computed(() => actualCount.value > 1);
+const progress = computed(() => {
+  if (!canSwipe.value) return 0;
+  return clamp(deltaX.value / sideOffset, -1, 1);
+});
+
+const normalizeIndex = (index, total) => {
+  if (!total) return 0;
+  return ((index % total) + total) % total;
+};
+
+const getActualIndex = (virtualIndex) => {
+  if (!actualCount.value) return 0;
+  return normalizeIndex(virtualIndex, actualCount.value);
+};
+
+const getItemByVirtualIndex = (virtualIndex) => {
+  if (!actualCount.value) return null;
+  return props.list[getActualIndex(virtualIndex)] || null;
+};
+
+function clearSettleTimer() {
+  if (settleTimer) {
+    clearTimeout(settleTimer);
+    settleTimer = null;
+  }
+}
+
+function clearRecycleTimer() {
+  if (recycleTimer) {
+    clearTimeout(recycleTimer);
+    recycleTimer = null;
+  }
+}
+
+const getCircularDistance = (from, to, total) => {
+  const forward = normalizeIndex(to - from, total);
+  const backward = normalizeIndex(from - to, total);
+  return Math.min(forward, backward);
+};
+
+const getNearestVirtualIndexByActualIndex = (actualIndex, anchor = activeCursor.value) => {
+  if (!actualCount.value || !virtualCount.value) return 0;
+
+  const targetActualIndex = normalizeIndex(actualIndex, actualCount.value);
+  let matchedIndex = targetActualIndex;
+  let minDistance = Infinity;
+
+  for (let index = 0; index < virtualCount.value; index += 1) {
+    if (getActualIndex(index) !== targetActualIndex) continue;
+
+    const distance = getCircularDistance(anchor, index, virtualCount.value);
+    if (distance < minDistance) {
+      matchedIndex = index;
+      minDistance = distance;
+    }
+  }
+
+  return matchedIndex;
+};
+
+const syncActiveCursorByVirtualIndex = (incomingIndex = 0) => {
+  activeCursor.value = normalizeIndex(incomingIndex, virtualCount.value);
+};
+
+const syncActiveCursorByActualIndex = (incomingIndex = 0) => {
+  activeCursor.value = getNearestVirtualIndexByActualIndex(incomingIndex);
+};
+
+watch(
+  () => props.list,
+  () => {
+    clearSettleTimer();
+    clearRecycleTimer();
+    deltaX.value = 0;
+    isDragging.value = false;
+    isAnimating.value = false;
+    isRecycling.value = false;
+    if (hasExternalModel) {
+      syncActiveCursorByActualIndex(props.modelValue);
+    } else {
+      syncActiveCursorByVirtualIndex(activeCursor.value);
+    }
+  },
+  { deep: true, immediate: true }
+);
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!hasExternalModel) return;
+    if (isAnimating.value || isDragging.value) return;
+    syncActiveCursorByActualIndex(value);
+  }
+);
+
+const getItemKey = (virtualIndex) => {
+  const item = getItemByVirtualIndex(virtualIndex) || {};
+  const baseKey =
+    item.id ??
+    item.commodityId ??
+    item.tabLabel ??
+    item.title ??
+    virtualIndex;
+
+  return `${baseKey}-${virtualIndex}`;
+};
+
+const states = {
+  hiddenLeft: {
+    x: -hiddenOffset,
+    scale: 0.68,
+    opacity: 0,
+  },
+  left: {
+    x: -sideOffset,
+    scale: 1 / 1.2,
+    opacity: 0.36,
+  },
+  center: {
+    x: 0,
+    scale: 1,
+    opacity: 1,
+  },
+  right: {
+    x: sideOffset,
+    scale: 1 / 1.2,
+    opacity: 0.36,
+  },
+  hiddenRight: {
+    x: hiddenOffset,
+    scale: 0.68,
+    opacity: 0,
+  },
+};
+
+const interpolateState = (fromKey, toKey, rate) => {
+  const from = states[fromKey];
+  const to = states[toKey];
+  return {
+    x: lerp(from.x, to.x, rate),
+    scale: lerp(from.scale, to.scale, rate),
+    opacity: lerp(from.opacity, to.opacity, rate),
+  };
+};
+
+const getLayerDirection = () => {
+  if (isDragging.value && deltaX.value !== 0) {
+    return deltaX.value < 0 ? 1 : -1;
+  }
+  if (isAnimating.value) {
+    return swipeStep.value;
+  }
+  return 0;
+};
+
+const getCardZIndex = (role) => {
+  const direction = getLayerDirection();
+
+  if (direction === 1) {
+    if (role === "next") return 4;
+    if (role === "current") return 3;
+    return 1;
+  }
+
+  if (direction === -1) {
+    if (role === "prev") return 4;
+    if (role === "current") return 3;
+    return 1;
+  }
+
+  if (role === "current") return 3;
+  return 1;
+};
+
+const getSlotState = (role) => {
+  if (!canSwipe.value) return states.center;
+
+  const currentProgress = progress.value;
+  if (currentProgress < 0) {
+    const rate = Math.abs(currentProgress);
+    if (role === "prev") return interpolateState("left", "hiddenLeft", rate);
+    if (role === "current") return interpolateState("center", "left", rate);
+    return interpolateState("right", "center", rate);
+  }
+
+  if (currentProgress > 0) {
+    const rate = currentProgress;
+    if (role === "prev") return interpolateState("left", "center", rate);
+    if (role === "current") return interpolateState("center", "right", rate);
+    return interpolateState("right", "hiddenRight", rate);
+  }
+
+  if (role === "prev") return states.left;
+  if (role === "next") return states.right;
+  return states.center;
+};
+
+const buildCardStyle = (role) => {
+  const state = getSlotState(role);
+  return {
+    transform: `translate3d(-50%, 0, 0) translateX(${state.x}px) scale(${state.scale})`,
+    opacity: state.opacity,
+    zIndex: getCardZIndex(role),
+    transition: isDragging.value || isRecycling.value
+      ? "none"
+      : `transform ${DURATION}ms ease, opacity ${DURATION}ms ease`,
+  };
+};
+
+const getMaskOpacity = (role) => {
+  if (!canSwipe.value) return 0;
+
+  const currentProgress = progress.value;
+  const baseOpacity = 0.42;
+
+  if (currentProgress < 0) {
+    const rate = Math.abs(currentProgress);
+    if (role === "next") return baseOpacity * (1 - rate);
+    if (role === "current") return baseOpacity * rate;
+    return baseOpacity;
+  }
+
+  if (currentProgress > 0) {
+    const rate = currentProgress;
+    if (role === "prev") return baseOpacity * (1 - rate);
+    if (role === "current") return baseOpacity * rate;
+    return baseOpacity;
+  }
+
+  return role === "current" ? 0 : baseOpacity;
+};
+
+const getMaskStyle = (role) => ({
+  opacity: getMaskOpacity(role),
+  transition: isDragging.value || isRecycling.value ? "none" : "opacity 120ms ease-out",
+});
+
+const renderSlots = computed(() => {
+  if (!actualCount.value) return [];
+
+  if (!canSwipe.value) {
+    return [
+      {
+        key: getItemKey(activeCursor.value),
+        role: "current",
+        index: getActualIndex(activeCursor.value),
+        item: getItemByVirtualIndex(activeCursor.value),
+        style: buildCardStyle("current"),
+      },
+    ];
+  }
+
+  const prevIndex = normalizeIndex(activeCursor.value - 1, virtualCount.value);
+  const nextIndex = normalizeIndex(activeCursor.value + 1, virtualCount.value);
+
+  return [
+    {
+      key: getItemKey(prevIndex),
+      role: "prev",
+      index: getActualIndex(prevIndex),
+      item: getItemByVirtualIndex(prevIndex),
+      style: buildCardStyle("prev"),
+    },
+    {
+      key: getItemKey(activeCursor.value),
+      role: "current",
+      index: getActualIndex(activeCursor.value),
+      item: getItemByVirtualIndex(activeCursor.value),
+      style: buildCardStyle("current"),
+    },
+    {
+      key: getItemKey(nextIndex),
+      role: "next",
+      index: getActualIndex(nextIndex),
+      item: getItemByVirtualIndex(nextIndex),
+      style: buildCardStyle("next"),
+    },
+  ];
+});
+
+const resetGesture = () => {
+  deltaX.value = 0;
+  isDragging.value = false;
+  isAnimating.value = false;
+  isTapCandidate.value = false;
+  swipeStep.value = 0;
+};
+
+const finishSwipe = (step) => {
+  isAnimating.value = true;
+  swipeStep.value = step;
+  deltaX.value = step > 0 ? -sideOffset : sideOffset;
+  clearSettleTimer();
+  settleTimer = setTimeout(() => {
+    const nextCursor = normalizeIndex(activeCursor.value + step, virtualCount.value);
+    isRecycling.value = true;
+    activeCursor.value = nextCursor;
+    const actualIndex = getActualIndex(nextCursor);
+    emit("update:modelValue", actualIndex);
+    emit("change", actualIndex);
+    resetGesture();
+    clearRecycleTimer();
+    recycleTimer = setTimeout(() => {
+      isRecycling.value = false;
+      recycleTimer = null;
+    }, RECYCLE_FRAME_DELAY);
+  }, DURATION);
+};
+
+const handleTouchStart = (event) => {
+  if (!canSwipe.value || isAnimating.value || isRecycling.value) return;
+
+  const touch = event.touches?.[0] || event.changedTouches?.[0];
+  if (!touch) return;
+
+  startX = touch.clientX;
+  startY = touch.clientY;
+  deltaX.value = 0;
+  isDragging.value = true;
+  isTapCandidate.value = true;
+};
+
+const handleTouchMove = (event) => {
+  if (!canSwipe.value || !isDragging.value || isAnimating.value) return;
+
+  const touch = event.touches?.[0] || event.changedTouches?.[0];
+  if (!touch) return;
+
+  const moveX = touch.clientX - startX;
+  const moveY = touch.clientY - startY;
+
+  if (Math.abs(moveX) > CLICK_THRESHOLD || Math.abs(moveY) > CLICK_THRESHOLD) {
+    isTapCandidate.value = false;
+  }
+
+  if (Math.abs(moveY) > Math.abs(moveX) && Math.abs(moveY) > 12) {
+    deltaX.value = 0;
+    return;
+  }
+
+  deltaX.value = clamp(moveX, -hiddenOffset, hiddenOffset);
+};
+
+const handleTouchEnd = () => {
+  if (!canSwipe.value || !isDragging.value) return;
+
+  isDragging.value = false;
+
+  if (isTapCandidate.value) {
+    deltaX.value = 0;
+    return;
+  }
+
+  if (Math.abs(deltaX.value) >= SWIPE_THRESHOLD) {
+    finishSwipe(deltaX.value > 0 ? -1 : 1);
+    return;
+  }
+
+  deltaX.value = 0;
+};
+
+const handleTouchCancel = () => {
+  if (!canSwipe.value) return;
+  clearSettleTimer();
+  clearRecycleTimer();
+  deltaX.value = 0;
+  isDragging.value = false;
+  isAnimating.value = false;
+  isRecycling.value = false;
+  isTapCandidate.value = false;
+  swipeStep.value = 0;
+};
+
+const handleCardTap = (slot) => {
+  if (slot.role !== "current" || isDragging.value || isAnimating.value || isRecycling.value) return;
+  emit("didSelectItem", slot.item, slot.index);
+};
+
+onBeforeUnmount(() => {
+  clearSettleTimer();
+  clearRecycleTimer();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/discovery/components/CardSwiper/styles/index.scss b/src/pages/discovery/components/CardSwiper/styles/index.scss
new file mode 100644
index 0000000..f4c6419
--- /dev/null
+++ b/src/pages/discovery/components/CardSwiper/styles/index.scss
@@ -0,0 +1,97 @@
+.card-swiper {
+  width: 100%;
+}
+
+.swiper-stage {
+  position: relative;
+  width: 100%;
+  height: 270px;
+  overflow: hidden;
+}
+
+.swiper-card {
+  position: absolute;
+  left: 50%;
+  top: 8px;
+  width: 236px;
+  height: 234px;
+  max-width: calc(100% - 56px);
+  transform-origin: center center;
+  will-change: transform, opacity;
+}
+
+.card-shell {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 8px;
+  box-sizing: border-box;
+  overflow: hidden;
+  border-radius: 24px;
+  background: #ffffff;
+  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.14);
+}
+
+.card-media {
+  width: 100%;
+  height: 142px;
+  margin: 0;
+  overflow: hidden;
+  border-radius: 20px;
+}
+
+.card-image {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+.card-body {
+  padding: 0 8px;
+}
+
+.card-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 12px;
+  min-width: 50px;
+  max-width: 100%;
+  height: 18px;
+  padding: 0 8px;
+  border-radius: 4px;
+  background: #fff4db;
+  color: #d78621;
+  font-size: 9px;
+  font-weight: 600;
+}
+
+.card-title {
+  margin-top: 6px;
+  color: #172033;
+  font-size: 16px;
+  line-height: 1.2;
+  font-weight: 700;
+}
+
+.card-desc {
+  margin-top: 2px;
+  color: #7f8ea3;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.card-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.42);
+  pointer-events: none;
+}
+
+.is-current .card-shell {
+  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
+}
+
+.is-single .swiper-stage {
+  overflow: visible;
+}
diff --git a/src/pages/discovery/components/FindTabs/images/selected_tabs_icon.png b/src/pages/discovery/components/FindTabs/images/selected_tabs_icon.png
new file mode 100644
index 0000000..d4ae66d
Binary files /dev/null and b/src/pages/discovery/components/FindTabs/images/selected_tabs_icon.png differ
diff --git a/src/pages/discovery/components/FindTabs/images/selected_tabs_icon_b.png b/src/pages/discovery/components/FindTabs/images/selected_tabs_icon_b.png
new file mode 100644
index 0000000..fc34dd6
Binary files /dev/null and b/src/pages/discovery/components/FindTabs/images/selected_tabs_icon_b.png differ
diff --git a/src/pages/discovery/components/FindTabs/index.vue b/src/pages/discovery/components/FindTabs/index.vue
new file mode 100644
index 0000000..20bb485
--- /dev/null
+++ b/src/pages/discovery/components/FindTabs/index.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="find-tabs-wrapper">
+    <div class="tabs-scroll" scroll-x="true" :scroll-left="scrollLeft" scroll-with-animation="true"
+      @scroll="handleScroll">
+      <div class="tabs-list">
+        <div v-for="(tab, idx) in tabs" :key="idx" :id="getTabId(idx)" class="tab-item"
+          :class="{ active: modelValue === idx }" @tap="handleSwitch(tab, idx)">
+          <div class="tab-content">
+            <div class="tab-label">
+              <span class="tab-text">{{ tab.label }}</span>
+              <img v-if="modelValue === idx && (isZhiNian ? indicatorSrcB : indicatorSrc)"
+                :src="isZhiNian ? indicatorSrcB : indicatorSrc" class="tab-indicator" mode="widthFix" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getCurrentInstance, nextTick, onMounted, ref, watch } from "vue";
+import { isZhiNian } from "@/constant/base";
+import indicatorSrc from "./images/selected_tabs_icon.png";
+import indicatorSrcB from "./images/selected_tabs_icon_b.png";
+
+const instance = getCurrentInstance();
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  tabs: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const scrollLeft = ref(0);
+let currentScrollLeft = 0;
+
+const getTabId = (idx) => `find-tab-${idx}`;
+
+const handleScroll = (e) => {
+  currentScrollLeft = e.detail?.scrollLeft || 0;
+};
+
+const centerActiveTab = async () => {
+  await nextTick();
+
+  const activeIndex = props.modelValue;
+  if (activeIndex < 0 || activeIndex >= props.tabs.length) return;
+  if (!instance || typeof uni === "undefined" || !uni.createSelectorQuery) return;
+
+  const query = uni.createSelectorQuery().in(instance);
+  query.select(".tabs-scroll").boundingClientRect();
+  query.select(".tabs-scroll").scrollOffset();
+  query.select(`#${getTabId(activeIndex)}`).boundingClientRect();
+  query.exec((res) => {
+    const [scrollRect, scrollOffset, activeRect] = res || [];
+    if (!scrollRect || !activeRect) return;
+
+    const currentLeft = scrollOffset?.scrollLeft ?? currentScrollLeft;
+    const targetScrollLeft =
+      currentLeft +
+      activeRect.left - scrollRect.left -
+      (scrollRect.width - activeRect.width) / 2;
+
+    scrollLeft.value = Math.max(0, targetScrollLeft);
+  });
+};
+
+const handleSwitch = (tab, idx) => {
+  emit('update:modelValue', idx);
+  emit('change', { tab, idx });
+};
+
+watch(
+  () => [props.modelValue, props.tabs.length],
+  () => {
+    centerActiveTab();
+  }
+);
+
+onMounted(() => {
+  centerActiveTab();
+});
+
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/discovery/components/FindTabs/styles/index.scss b/src/pages/discovery/components/FindTabs/styles/index.scss
new file mode 100644
index 0000000..a45e71d
--- /dev/null
+++ b/src/pages/discovery/components/FindTabs/styles/index.scss
@@ -0,0 +1,71 @@
+.find-tabs-wrapper {
+  width: 100%;
+  background-color: transparent;
+}
+
+.tabs-scroll {
+  width: 100%;
+}
+
+.tabs-list {
+  display: flex;
+  align-items: flex-end;
+  height: 50px;
+  gap: 16px;
+  flex-wrap: nowrap;
+  padding: 0 12px;
+}
+
+.tab-item {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+}
+
+.tab-item:last-child {
+  margin-right: 12px;
+}
+
+.tab-content {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+}
+
+.tab-label {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tab-text {
+  position: relative;
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(128, 140, 153, 0.9);
+  z-index: 2;
+  padding: 0 4px;
+  line-height: 1;
+}
+
+.tab-item.active .tab-text {
+  color: #0b0b0b;
+  font-weight: bold;
+}
+
+.tab-indicator {
+  position: absolute;
+  bottom: -6px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 56px;
+  height: auto;
+  z-index: 1;
+}
diff --git a/src/pages/discovery/components/QuickQuestions/index.vue b/src/pages/discovery/components/QuickQuestions/index.vue
new file mode 100644
index 0000000..670aaad
--- /dev/null
+++ b/src/pages/discovery/components/QuickQuestions/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <div class="container pl-12">
+    <ModuleTitle :title="themeName" />
+
+    <div class="container-scroll font-size-0 scroll-x whitespace-nowrap">
+
+      <div class="card-item bg-white inline-block rounded-20 mr-10" v-for="(item, index) in list" :key="index"
+        @click="sendReply(item)">
+
+        <div class="flex flex-row flex-justify-start p-10">
+          <img class="card-img flex-shrink-0 rounded-14" :src="createSvgIndex(index)" />
+
+          <div class="min-width-0 flex flex-col flex-full border-box pl-8 py-4">
+            <div class="w-full font-size-12 font-600 color-171717 ellipsis-1">
+              {{ item.title }}
+            </div>
+            <div class="w-full font-size-9 color-94A3B8 ellipsis-1">
+              {{ item.subTitle }}
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+const emit = defineEmits(["didSelectItem"]);
+
+const props = defineProps({
+  themeName: {
+    type: String,
+    default: "快捷提问",
+  },
+  list: {
+    type: Array,
+    default: () => [],
+  }
+});
+
+/// 点击卡片
+const sendReply = (item) => {
+  emit("didSelectItem", item);
+};
+
+/// 生成icon
+const createSvgIndex = (index) => {
+  const colors = [
+    { bgColor: '#ECFDF5', iconColor: '#10B981' },
+    { bgColor: '#FFFBEB', iconColor: '#F59E0B' },
+    { bgColor: '#EFF6FF', iconColor: '#3B82F6' },
+    { bgColor: '#FFFBEB', iconColor: '#F59E0B' }
+  ];
+  return createSvg(...Object.values(colors[index % colors.length]));
+}
+
+const createSvg = (bgColor = '#FFFBEB', iconColor = '#F59E0B', size = 40) => {
+  const svg = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" divBox="0 0 40 40" fill="none">
+      <rect width="40" height="40" rx="14" fill="${bgColor}" />
+      <g stroke="${iconColor}" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M18.6243 22.3342C18.5648 22.1034 18.4445 21.8929 18.276 21.7244C18.1076 21.5559 17.897 21.4357 17.6663 21.3762L13.5763 20.3215C13.5065 20.3017 13.4451 20.2597 13.4014 20.2018C13.3576 20.1439 13.334 20.0734 13.334 20.0008C13.334 19.9283 13.3576 19.8577 13.4014 19.7999C13.4451 19.742 13.5065 19.7 13.5763 19.6802L17.6663 18.6248C17.8969 18.5654 18.1074 18.4452 18.2759 18.2768C18.4444 18.1085 18.5647 17.8981 18.6243 17.6675L19.679 13.5775C19.6986 13.5074 19.7406 13.4457 19.7985 13.4017C19.8565 13.3578 19.9272 13.334 20 13.334C20.0727 13.334 20.1435 13.3578 20.2014 13.4017C20.2594 13.4457 20.3014 13.5074 20.321 13.5775L21.375 17.6675C21.4345 17.8982 21.5547 18.1087 21.7232 18.2772C21.8917 18.4457 22.1023 18.566 22.333 18.6255L26.423 19.6795C26.4933 19.6989 26.5553 19.7408 26.5995 19.7989C26.6437 19.8569 26.6677 19.9279 26.6677 20.0008C26.6677 20.0738 26.6437 20.1447 26.5995 20.2028C26.5553 20.2608 26.4933 20.3028 26.423 20.3222L22.333 21.3762C22.1023 21.4357 21.8917 21.5559 21.7232 21.7244C21.5547 21.8929 21.4345 22.1034 21.375 22.3342L20.3203 26.4242C20.3007 26.4942 20.2587 26.5559 20.2008 26.5999C20.1428 26.6439 20.072 26.6677 19.9993 26.6677C19.9266 26.6677 19.8558 26.6439 19.7978 26.5999C19.7399 26.5559 19.6979 26.4942 19.6783 26.4242L18.6243 22.3342Z" />
+        <path d="M25.333 14V16.6667" />
+        <path d="M26.6667 15.334H24" />
+        <path d="M14.667 23.334V24.6673" />
+        <path d="M15.3333 24H14" />
+      </g>
+    </svg>
+  `.replace(/\n\s*/g, '').trim()
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`
+}
+
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/discovery/components/QuickQuestions/styles/index.scss b/src/pages/discovery/components/QuickQuestions/styles/index.scss
new file mode 100644
index 0000000..2c0df97
--- /dev/null
+++ b/src/pages/discovery/components/QuickQuestions/styles/index.scss
@@ -0,0 +1,13 @@
+.container-scroll {
+  margin: 4px 0 6px;
+}
+
+.card-item {
+  min-width: 130px;
+  max-width: 150px;
+}
+
+.card-img {
+  height: 40px;
+  width: 40px;
+}
diff --git a/src/pages/discovery/index.vue b/src/pages/discovery/index.vue
new file mode 100644
index 0000000..4cae6ca
--- /dev/null
+++ b/src/pages/discovery/index.vue
@@ -0,0 +1,203 @@
+<template>
+  <div class="flex flex-col h-full overflow-hidden min-height-0">
+    <div class="flex-shrink-0">
+      <FindTabs v-if="discoveryTabs.length > 0" v-model="activeIndex" :tabs="discoveryTabs" @change="handleTabChange" />
+    </div>
+
+    <div class="discovery-scroll flex-full border-box min-height-0" scroll-y show-scrollbar="false"
+      @touchstart="emitScrollTouchStart" @touchmove="emitScrollTouch" @scroll="emitScrollTouch">
+      <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @didSelectItem="handleCardClick" />
+
+      <QuickQuestions v-if="discoveryQuickQuestions.length > 0" :list="discoveryQuickQuestions"
+        @didSelectItem="handleQuickQuestionClick" />
+
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from "vue";
+import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE, SWITCH_TO_COMPANION_TAB } from "@/constant/constant";
+import { navigateTo } from "@/router";
+import { getAccessToken } from "@/constant/token";
+
+import FindTabs from "./components/FindTabs/index.vue";
+import CardSwiper from "./components/CardSwiper/index.vue";
+import QuickQuestions from "./components/QuickQuestions/index.vue";
+import discoveryCover from "@/components/ImageSwiper/images/2025-07-12_180248.jpg";
+
+import { homeTabsData, getNearbyTags, homeTabContentData, homeQuickQuestionData } from "../../request/api/MainPageDataApi";
+import { useAppStore, useLocationStore } from "@/store";
+import { JumpType } from "../../model/ChatModel";
+
+const appStore = useAppStore();
+const locationStore = useLocationStore();
+/// 从个渠道获取如二维码
+const sceneId = appStore.sceneId || "";
+
+const activeIndex = ref(0);
+const discoveryTabs = ref([]);
+const discoveryCards = ref([]);
+const discoveryQuickQuestions = ref([]);
+const emit = defineEmits(["scroll-touch-start", "scroll-touch"]);
+
+const emitScrollTouchStart = () => {
+  emit("scroll-touch-start");
+};
+
+const emitScrollTouch = () => {
+  emit("scroll-touch");
+};
+
+/// tabs 切换事件
+const handleTabChange = ({ tab, idx }) => {
+  activeIndex.value = idx;
+  queryDiscoveryData(tab.id);
+}
+
+/// 请求发现页tab数据
+const queryTabsList = async () => {
+  const res = await homeTabsData();
+  if (res.code === 0) {
+    /// 处理tab数据
+    const tabList = res.data.map((item) => ({
+      id: item.id,
+      label: item.tagName,
+    }));
+    /// 设置tab数据
+    discoveryTabs.value = tabList;
+    /// 根据sceneId查询对应tab数据
+    findTabByIdWithActiveTabIndex(sceneId);
+  }
+}
+/// 根据id查询tab并设置activeIndex
+const findTabByIdWithActiveTabIndex = (tabsId) => {
+  /// 查询是否有id参数
+  const activeTabIndex = discoveryTabs.value.findIndex((tab) => tab.id === tabsId);
+  /// 如果有则优先展示对应tab数据，没有则展示第一个tab数据
+  if (activeTabIndex > -1) {
+    activeIndex.value = activeTabIndex;
+    queryDiscoveryData(tabsId);
+  } else {
+    if (discoveryTabs.value.length > 0) {
+      activeIndex.value = 0;
+      queryDiscoveryData(discoveryTabs.value[0].id);
+    }
+  }
+}
+
+/// 统一请求发现页数据
+const queryDiscoveryData = async (tabId) => {
+  queryDiscoveryCards(tabId);
+  queryQuickQuestionData(tabId);
+};
+
+/// 请求发现页卡片数据
+const queryDiscoveryCards = async (tabId) => {
+  const res = await homeTabContentData({ tagId: tabId });
+  if (res.code === 0) {
+    discoveryCards.value = configDataList(res.data);
+  }
+}
+
+/// 请求快速问题列表数据
+const queryQuickQuestionData = async (tabId) => {
+  const res = await homeQuickQuestionData({ tagId: tabId });
+  if (res.code === 0) {
+    discoveryQuickQuestions.value = configDataList(res.data);
+  }
+}
+
+/// 统一处理接口返回数据结构
+const configDataList = (data) => {
+  return data.map((item) => ({
+    id: item.id,
+    title: item.tabContent.mainTitle,
+    subTitle: item.tabContent.subTitle,
+    tag: item.tabContent.tag,
+    coverImage: item.tabContent.coverImage,
+    tabContentId: item.tabContent.id,
+    jumpContent: item.tabContent.jumpContent,
+    jumpDesc: item.tabContent.jumpDesc,
+    jumpType: item.tabContent.jumpType,/// 跳转类型: 0商品 1提示词 2链接 3组件指令
+  }));
+}
+
+/// 卡片点击事件
+const handleCardClick = (item) => {
+  handleClick(item);
+};
+
+/// 快速问题点击事件
+const handleQuickQuestionClick = (item) => {
+  handleClick(item);
+};
+
+const handleClick = async (item) => {
+  console.log(`执行点击事件: ${item.jumpType}，参数：${JSON.stringify(item.jumpContent)}`);
+  /// 商品
+  if (item.jumpType === JumpType.commodity) {
+    uni.navigateTo({
+      url: `/pages/goods/index?commodityId=${item.jumpContent}`,
+    });
+  }
+  /// 提示词
+  else if (item.jumpType === JumpType.prompt) {
+    uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.jumpContent);
+  }
+  /// 链接
+  else if (item.jumpType === JumpType.link) {
+    if (item.jumpContent) {
+      const token = getAccessToken();
+      navigateTo(item.jumpContent, { token: token });
+    }
+  }
+  /// 组件指令
+  else if (item.jumpType === JumpType.command) {
+    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, { type: item.jumpContent, title: item.jumpDesc });
+  }
+}
+
+/// 获取位置信息
+const getLocation = () => {
+  /// 已经有sceneId了，说明之前已经获取过位置信息了，就不需要再获取一次了
+  if (sceneId) return;
+  uni.getLocation({
+    type: 'wgs84',
+    success: function (res) {
+      // 将位置信息存储到 Pinia 中
+      locationStore.setLocationData({
+        latitude: res.latitude,
+        longitude: res.longitude,
+      });
+      console.log('当前位置：' + JSON.stringify(res));
+      getNearbyTagsData();
+    }
+  });
+}
+
+/// 获取附近标签数据
+const getNearbyTagsData = async () => {
+  const res = await getNearbyTags();
+  if (res.code === 0) {
+    const nearbyTagId = res.data;
+    findTabByIdWithActiveTabIndex(nearbyTagId);
+  }
+}
+
+/// 组件挂载后请求数据
+onMounted(() => {
+  queryTabsList();
+  getLocation();
+});
+
+</script>
+
+<style lang="scss" scoped>
+.discovery-scroll {
+  flex-basis: 0;
+  height: 0;
+  min-height: 0;
+  overscroll-behavior-y: contain;
+}
+</style>
diff --git a/src/pages/goods/album/index.vue b/src/pages/goods/album/index.vue
index 5a05fb4..14dd5ee 100644
--- a/src/pages/goods/album/index.vue
+++ b/src/pages/goods/album/index.vue
@@ -2,26 +2,16 @@
   <div class="bg-F5F7FA flex flex-col h-screen overflow-hidden">
     <TopNavBar title="房间相册" backgroundColor="transparent" />
     <div class="p-8">
-      <span class="ml-4 font-size-18 color-171717 font-500"
-        >全部({{ albumList.length }})</span
-      >
+      <span class="ml-4 font-size-18 color-171717 font-500">全部({{ albumList.length }})</span>
     </div>
 
     <scroll-div scroll-y class="scroll-container overflow-auto">
       <div class="pl-4 pr-4 pb-24">
         <div class="grid-container">
-          <div
-            class="album-item"
-            v-for="(item, index) in albumList"
-            :key="index"
-          >
+          <div class="album-item" v-for="(item, index) in albumList" :key="index">
             <div class="album-image-wrapper">
-              <img
-                class="album-image"
-                :src="item.photoUrl"
-                mode="aspectFill"
-                @click="handlePrediv(item.photoUrl)"
-              ></image>
+              <img class="album-image" :src="item.photoUrl" mode="aspectFill" @click="handlePrediv(item.photoUrl)">
+              </image>
               <div class="album-title">{{ item.name }}</div>
             </div>
           </div>
@@ -34,16 +24,16 @@
 <script setup>
 import { ref } from "vue";
 import TopNavBar from "@/components/TopNavBar/index.vue";
-import { onLoad } from "@dcloudio/uni-app";
 import { usePictureStore } from "@/store";
 const pictureStore = usePictureStore();
 
 const albumList = ref([]);
 
-onLoad(() => {
-  albumList.value = pictureStore.predivImageData;
-  pictureStore.setPredivImageData([]);
-});
+// TODO
+// onLoad(() => {
+//   albumList.value = pictureStore.predivImageData;
+//   pictureStore.setPredivImageData([]);
+// });
 
 // 处理图片预览
 const handlePrediv = (photoUrl) => {
@@ -87,11 +77,9 @@ const handlePrediv = (photoUrl) => {
   left: 0;
   right: 0;
   padding: 8px;
-  background: linear-gradient(
-    180deg,
-    rgba(0, 0, 0, 0) 0%,
-    rgba(0, 0, 0, 0.6) 100%
-  );
+  background: linear-gradient(180deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0.6) 100%);
   color: #fff;
   font-size: 14px;
   font-weight: 500;
diff --git a/src/pages/goods/components/DateSelector/styles/index.scss b/src/pages/goods/components/DateSelector/styles/index.scss
index ab0aaa5..414b9b0 100644
--- a/src/pages/goods/components/DateSelector/styles/index.scss
+++ b/src/pages/goods/components/DateSelector/styles/index.scss
@@ -17,14 +17,14 @@
   left: 24rpx;
   font-size: 20rpx;
   color: $uni-text-color-grey;
-  background-color: $uni-bg-color;
+  background-color: #fff;
   padding: 0 8rpx;
   z-index: 1;
 }
 
 .date-box {
   padding: 20rpx 24rpx;
-  background-color: $uni-bg-color;
+  background-color: #fff;
   border-radius: 16rpx;
   border: 2rpx solid #f0f0f0;
   display: flex;
diff --git a/src/pages/goods/components/GoodConfirm/styles/index.scss b/src/pages/goods/components/GoodConfirm/styles/index.scss
index a54937b..3312c53 100644
--- a/src/pages/goods/components/GoodConfirm/styles/index.scss
+++ b/src/pages/goods/components/GoodConfirm/styles/index.scss
@@ -185,7 +185,7 @@
   .confirm-btn {
     width: 160px;
     height: 48px;
-    background: linear-gradient(179deg, $theme-color-500 0%, $theme-color-700 100%);
+    background: linear-gradient(179deg, #0ccd58 0%, $theme-color-700 100%);
     color: #fff;
     border: none;
     border-radius: 24px;
diff --git a/src/pages/goods/components/GoodFacility/index.vue b/src/pages/goods/components/GoodFacility/index.vue
index f5d335e..3ea039e 100644
--- a/src/pages/goods/components/GoodFacility/index.vue
+++ b/src/pages/goods/components/GoodFacility/index.vue
@@ -1,16 +1,9 @@
 <template>
   <div class="border-box border-top-8">
-    <div
-      class="border-box pt-12 pl-12 pr-12"
-      v-for="(moduleItem, index) in goodsData.commodityEquipment"
-      :key="index"
-    >
-      <div
-        class="flex flex-items-start flex-col"
-        :class="{
-          'border-bottom': index < goodsData.commodityEquipment.length - 1,
-        }"
-      >
+    <div class="border-box pt-12 pl-12 pr-12" v-for="(moduleItem, index) in goodsData.commodityEquipment" :key="index">
+      <div class="flex flex-items-start flex-col" :class="{
+        'border-bottom': index < goodsData.commodityEquipment.length - 1,
+      }">
         <div class="flex flex-items-center flex-row flex-shrink-0">
           <uni-icons fontFamily="znicons" size="20" color="#171717">
             {{ zniconsMap[moduleItem.icon] }}
@@ -20,11 +13,8 @@
           </span>
         </div>
         <div class="border-box flex flex-items-center flex-row mt-4 pb-12">
-          <span
-            class="font-size-12 color-525866 line-height-20 mr-4"
-            v-for="(span, index) in moduleItem.desc"
-            :key="index"
-          >
+          <span class="font-size-12 color-525866 line-height-20 mr-4" v-for="(span, index) in moduleItem.desc"
+            :key="index">
             {{ span }}
           </span>
         </div>
@@ -34,7 +24,7 @@
 </template>
 
 <script setup>
-import { zniconsMap } from "@/static/fonts/znicons.js";
+import { zniconsMap } from "@/assets/fonts/znicons";
 import { defineProps } from "vue";
 
 // Props定义
@@ -49,6 +39,6 @@ const props = defineProps({
 <style scoped lang="scss">
 @font-face {
   font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
+  src: url("@/assets/fonts/znicons.ttf");
 }
 </style>
diff --git a/src/pages/goods/index.vue b/src/pages/goods/index.vue
index 4541ca2..e59c810 100644
--- a/src/pages/goods/index.vue
+++ b/src/pages/goods/index.vue
@@ -1,20 +1,12 @@
 <template>
   <div class="goods-container bg-gray">
-    <TopNavBar
-      :title="navOpacity < 0.5 ? '' : '商品详情'"
-      :background="`rgba(217, 238, 255, ${navOpacity})`"
+    <TopNavBar :title="navOpacity < 0.5 ? '' : '商品详情'" :background="`rgba(217, 238, 255, ${navOpacity})`"
       :titleColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'"
-    />
+      :backIconColor="navOpacity < 0.5 ? '#ffffff' : '#000000'" />
 
     <!-- 滚动区域 -->
     <scroll-div class="content-wrapper" scroll-y @scroll="handleScroll">
-      <imgSwiper
-        :border-radius="0"
-        :height="300"
-        :images="goodsData.commodityPhotoList"
-        thumbnailBottom="42px"
-      />
+      <imgSwiper :border-radius="0" :height="300" :images="goodsData.commodityPhotoList" thumbnailBottom="42px" />
 
       <div class="goods-content">
         <!-- 商品信息组件 -->
@@ -24,34 +16,21 @@
         <LocationCard :orderData="goodsData" />
 
         <!-- 日期选择区域 -->
-        <DateSelector
-          v-if="goodsData.orderType == 0"
-          @showCalendar="showCalendar"
-          :checkInDate="selectedDate.startDate"
-          :checkOutDate="selectedDate.endDate"
-          :checkInDay="''"
-          :checkOutDay="''"
-          :nights="selectedDate.totalDays"
-        />
+        <DateSelector v-if="goodsData.orderType == 0" @showCalendar="showCalendar" :checkInDate="selectedDate.startDate"
+          :checkOutDate="selectedDate.endDate" :checkInDay="''" :checkOutDay="''" :nights="selectedDate.totalDays" />
 
         <!-- 商品套餐组件 -->
-        <GoodPackage
-          v-if="
-            goodsData.orderType != 0 &&
-            goodsData.commodityPackageConfig &&
-            goodsData.commodityPackageConfig.length > 0
-          "
-          :goodsData="goodsData"
-        />
+        <GoodPackage v-if="
+          goodsData.orderType != 0 &&
+          goodsData.commodityPackageConfig &&
+          goodsData.commodityPackageConfig.length > 0
+        " :goodsData="goodsData" />
 
         <!-- 商品设施组件 -->
-        <GoodFacility
-          v-if="
-            goodsData.commodityEquipment &&
-            goodsData.commodityEquipment.length > 0
-          "
-          :goodsData="goodsData"
-        />
+        <GoodFacility v-if="
+          goodsData.commodityEquipment &&
+          goodsData.commodityEquipment.length > 0
+        " :goodsData="goodsData" />
 
         <!-- 商品详情组件 -->
         <GoodDetail :goodsData="goodsData" />
@@ -60,39 +39,24 @@
 
     <!-- 立即抢购 -->
     <div class="footer border-top">
-      <div
-        class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8"
-      >
+      <div class="amt font-size-20 font-bold color-FF3D60 line-height-28 flex flex-items-center mr-8">
         {{ calculatedTotalPrice }}
       </div>
 
-      <div
-        class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8"
-        @click="navigateToPay(goodsData)"
-      >
-        <img
-          class="icon"
-          src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png"
-        />
+      <div class="btn border-box rounded-10 flex flex-items-center ml-auto pl-8" @click="navigateToPay(goodsData)">
+        <img class="icon" src="https://oss.nianxx.cn/mp/static/version_101/common/btn.png" />
         <span class="font-size-16 font-500 color-white">立即预定</span>
       </div>
     </div>
 
     <!-- 日历组件 -->
-    <Calender
-      :visible="calendarVisible"
-      mode="range"
-      :range-require-price="true"
-      :price-data="priceData"
-      @close="handleCalendarClose"
-      @range-select="handleDateSelect"
-    />
+    <Calender :visible="calendarVisible" mode="range" :range-require-price="true" :price-data="priceData"
+      @close="handleCalendarClose" @range-select="handleDateSelect" />
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
 import { goodsDetail, commodityDailyPriceList } from "@/request/api/GoodsApi";
 import { DateUtils } from "@/utils";
 import TopNavBar from "@/components/TopNavBar/index.vue";
@@ -176,13 +140,14 @@ const getGoodsDailyPrice = async (params) => {
   priceData.value = res.data;
 };
 
-const selectedDateStore = useSelectedDateStore();
-onLoad(({ commodityId = "1950766939442774018" }) => {
-  // 从store中获取选中的日期
-  selectedDate.value = selectedDateStore.selectedDate;
+// TODO
+// const selectedDateStore = useSelectedDateStore();
+// onLoad(({ commodityId = "1950766939442774018" }) => {
+//   // 从store中获取选中的日期
+//   selectedDate.value = selectedDateStore.selectedDate;
 
-  goodsInfo({ commodityId });
-});
+//   goodsInfo({ commodityId });
+// });
 
 // 显示日历弹窗
 const showCalendar = () => (calendarVisible.value = true);
diff --git a/src/pages/home/components/ActivityListComponent/index.vue b/src/pages/home/components/ActivityListComponent/index.vue
new file mode 100644
index 0000000..a341489
--- /dev/null
+++ b/src/pages/home/components/ActivityListComponent/index.vue
@@ -0,0 +1,43 @@
+<template>
+  <div class="container">
+    <swiper class="swiper" circular :indicator-dots="activityList.length > 1" indicator-color="#FFFFFF"
+      indicator-active-color="#00A6FF" :autoplay="autoplay" :interval="interval" :duration="duration">
+      <swiper-item v-for="item in activityList" :key="item.id">
+        <div class="swiper-item" @click="handleClick()">
+          <img class="swiper-img" :src="item.activityCover">
+          <div class="corner-btn">{{ commandModel.title }}</div>
+        </div>
+      </swiper-item>
+    </swiper>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+
+const commandModel = ref({
+  icon: "",
+  title: "快速预定",
+  type: Command.quickBooking,
+});
+
+const autoplay = ref(true);
+const interval = ref(3000);
+const duration = ref(500);
+
+const props = defineProps({
+  activityList: {
+    type: Array,
+    default: [],
+  },
+});
+
+const handleClick = () => {
+  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commandModel.value);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ActivityListComponent/styles/index.scss b/src/pages/home/components/ActivityListComponent/styles/index.scss
new file mode 100644
index 0000000..86bf593
--- /dev/null
+++ b/src/pages/home/components/ActivityListComponent/styles/index.scss
@@ -0,0 +1,38 @@
+.container {
+  margin-bottom: 6px;
+
+  .uni-margin-wrap {
+    width: 100%;
+  }
+  .swiper {
+    height: 120px;
+    border-radius: 8px;
+  }
+  .swiper-item {
+    position: relative;
+    display: block;
+    height: 120px;
+    line-height: 120px;
+    text-align: center;
+
+    .swiper-img {
+      width: 100%;
+      height: 100%;
+      border-radius: 8px;
+      display: block;
+    }
+
+    .corner-btn {
+      position: absolute;
+      right: 12px;
+      bottom: 12px;
+      background-color: #ffeb00;
+      color: $uni-text-color;
+      font-size: $uni-font-size-base;
+      font-weight: 500;
+      padding: 4px 12px;
+      border-radius: 20px;
+      line-height: 1.5;
+    }
+  }
+}
diff --git a/src/pages/home/components/AigcPhotoCard/index.vue b/src/pages/home/components/AigcPhotoCard/index.vue
new file mode 100644
index 0000000..f5fa71a
--- /dev/null
+++ b/src/pages/home/components/AigcPhotoCard/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="aigc-photo-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
+    @click="handleAction">
+    <img class="aigc-photo-card__image block w-full" :src="data.cover" />
+    <div class="aigc-photo-card__shade"></div>
+
+    <div class="aigc-photo-card__play flex flex-items-center flex-justify-center rounded-full">
+      <div class="aigc-photo-card__triangle"></div>
+    </div>
+
+    <div class="aigc-photo-card__title color-white font-size-16 font-900">
+      {{ data.title }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "action"]);
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/AigcPhotoCard/mocks.js b/src/pages/home/components/AigcPhotoCard/mocks.js
new file mode 100644
index 0000000..1afb128
--- /dev/null
+++ b/src/pages/home/components/AigcPhotoCard/mocks.js
@@ -0,0 +1,8 @@
+export default {
+  id: "xiaoqikong-flying",
+  title: "沉浸式飞越 · 小七孔",
+  cover: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1000&q=80",
+  action: {
+    type: "play",
+  },
+};
diff --git a/src/pages/home/components/AigcPhotoCard/styles/index.scss b/src/pages/home/components/AigcPhotoCard/styles/index.scss
new file mode 100644
index 0000000..eaefd81
--- /dev/null
+++ b/src/pages/home/components/AigcPhotoCard/styles/index.scss
@@ -0,0 +1,54 @@
+.aigc-photo-card {
+  height: 272px;
+  background: #0f172a;
+}
+
+.aigc-photo-card:active {
+  opacity: 0.86;
+}
+
+.aigc-photo-card.is-disabled {
+  opacity: 0.55;
+}
+
+.aigc-photo-card__image {
+  height: 100%;
+}
+
+.aigc-photo-card__shade {
+  position: absolute;
+  inset: 0;
+  background: rgba(15, 23, 42, 0.38);
+}
+
+.aigc-photo-card__play {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 76px;
+  height: 76px;
+  border: 1px solid rgba(255, 255, 255, 0.48);
+  background: rgba(255, 255, 255, 0.28);
+  transform: translate(-50%, -50%);
+  box-sizing: border-box;
+}
+
+.aigc-photo-card__triangle {
+  width: 0;
+  height: 0;
+  margin-left: 6px;
+  border-top: 17px solid transparent;
+  border-bottom: 17px solid transparent;
+  border-left: 23px solid #fff;
+}
+
+.aigc-photo-card__title {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 72px;
+  text-align: center;
+  line-height: 22px;
+  letter-spacing: 0;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
+}
diff --git a/src/pages/home/components/AnswerComponent/index.vue b/src/pages/home/components/AnswerComponent/index.vue
new file mode 100644
index 0000000..a260a7b
--- /dev/null
+++ b/src/pages/home/components/AnswerComponent/index.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <div class="w-vw"></div>
+    <div class="flex flex-col px-16 pt-16 pb-12 border-box">
+      <div v-if="tag" class="long-answer-tag">{{ tag }}</div>
+      <div v-if="title" class="flex flex-row flex-items-start flex-justify-start mb-4">
+        <uni-icons class="icon-active" type="fire-filled" size="18" color="opacity" />
+        <span class="font-size-16 font-500 span-color-900 ml-6"> {{ title }}</span>
+      </div>
+      <!-- 文字内容，最多显示3行 -->
+      <div v-if="processedContent" class="answer-content font-size-12 font-color-600">
+        <ChatMarkdown :text="processedContent" />
+      </div>
+      <!-- 超过3行时显示...提示 -->
+      <div v-if="!finish" class="flex flex-row flex-items-center mt-8">
+        <span class="font-size-12 font-400 font-color-600">正在生成</span>
+        <ChatLoading />
+      </div>
+      <div v-if="isOverflow" class="flex flex-row flex-items-center flex-justify-between mt-4"
+        @click="lookDetailAction">
+        <span class="font-size-12 font-400 theme-color-500 mr-4">查看完整{{ tag }}</span>
+        <uni-icons class="icon-active" type="right" size="14" color="opacity"></uni-icons>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { defineProps, computed, watch, onBeforeUnmount } from "vue";
+
+import ChatMarkdown from "./ChatMarkdown/index.vue";
+import ChatLoading from "./ChatLoading/index.vue";
+import StreamManager from '@/utils/StreamManager.js';
+import {
+  getLongTextPredivText,
+  getLongTextValue,
+  hasLongTextExtraSections,
+} from "@/utils/longTextCard";
+
+// 直接根据文字长度判断，超过约100个字符认为会溢出（约3行）
+const props = defineProps({
+  content: {
+    type: String,
+    default: "",
+  },
+  longTextData: {
+    type: Object,
+    default: null,
+  },
+  finish: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const tag = computed(() => getLongTextValue(props.longTextData, "tag"));
+const title = computed(() => getLongTextValue(props.longTextData, "title"));
+const predivContent = computed(() => {
+  return getLongTextPredivText(props.longTextData, ["content_summary"]);
+});
+
+// 处理文本内容：按行截断以保证预览最多显示三行（更贴近视觉行数）
+// 点击“查看详情”会跳转到完整页面（不受预览截断影响）。
+const PREdiv_LINES = 3;
+const PREdiv_CHAR_LIMIT = 100; // 作为备用，当没有换行但过长时也会截断
+const processedContent = computed(() => {
+  const content = predivContent.value ? String(predivContent.value) : "";
+  if (!content) return "";
+
+  // 按行分割（保留空行）
+  const lines = content.split(/\r?\n/);
+
+  // 如果行数超过限制，截取前 PREdiv_LINES 行并添加省略号
+  if (lines.length > PREdiv_LINES) {
+    return lines.slice(0, PREdiv_LINES).join("\n") + "...";
+  }
+
+  // 若虽然行数不超过，但总长度仍然很长，做字符级截断作为兜底
+  if (content.length > PREdiv_CHAR_LIMIT) {
+    return content.slice(0, PREdiv_CHAR_LIMIT) + "...";
+  }
+
+  return content;
+});
+
+const isOverflow = computed(() => {
+  const contentStr = predivContent.value ? String(predivContent.value) : "";
+  const lines = contentStr.split(/\r?\n/);
+  return (
+    hasLongTextExtraSections(props.longTextData) ||
+    lines.length > PREdiv_LINES ||
+    contentStr.length > PREdiv_CHAR_LIMIT
+  );
+});
+
+let stopForwardWatcher = null;
+let stopFinishWatcher = null;
+let stopLongTextWatcher = null;
+
+const cleanupStreamWatchers = () => {
+  if (stopForwardWatcher) {
+    stopForwardWatcher();
+    stopForwardWatcher = null;
+  }
+  if (stopFinishWatcher) {
+    stopFinishWatcher();
+    stopFinishWatcher = null;
+  }
+  if (stopLongTextWatcher) {
+    stopLongTextWatcher();
+    stopLongTextWatcher = null;
+  }
+};
+
+onBeforeUnmount(cleanupStreamWatchers);
+
+const lookDetailAction = () => {
+  const message = predivContent.value ? String(predivContent.value) : "";
+  // 使用 StreamManager 以 streamId 转发当前及后续流式更新，详情页通过 streamId 订阅
+  const streamId = `stream_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`;
+  const updateStream = () => {
+    StreamManager.updateStream(
+      streamId,
+      predivContent.value ? String(predivContent.value) : "",
+      !!props.finish,
+      props.longTextData || null,
+    );
+  };
+
+  StreamManager.openStream(streamId, message, !!props.finish, props.longTextData || null);
+
+  cleanupStreamWatchers();
+
+  if (!props.finish) {
+    // 将当前组件后续 props.content/props.finish 的更新转发到 StreamManager
+    stopForwardWatcher = watch(
+      () => props.content,
+      updateStream
+    );
+    stopLongTextWatcher = watch(
+      () => props.longTextData,
+      updateStream,
+      { deep: true }
+    );
+    stopFinishWatcher = watch(
+      () => props.finish,
+      (f) => {
+        StreamManager.updateStream(
+          streamId,
+          predivContent.value ? String(predivContent.value) : "",
+          !!f,
+          props.longTextData || null,
+        );
+        if (f) {
+          cleanupStreamWatchers();
+        }
+      }
+    );
+  }
+
+  // 传递 finished 参数，完成状态下不自动滚到底部
+  uni.navigateTo({ url: `/pages/ChatMain/ChatLongAnswer/index?streamId=${encodeURIComponent(streamId)}&finished=${props.finish ? '1' : '0'}` });
+}
+
+</script>
+
+<style scoped lang="scss">
+.icon-active {
+  margin-top: 1px;
+  color: #0CCD58;
+}
+
+.answer-content {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 16px;
+  max-height: 80px;
+}
+
+.long-answer-tag {
+  display: inline-flex;
+  width: fit-content;
+  margin-bottom: 8px;
+  padding: 3px 8px;
+  border-radius: 12px;
+  border: 1px solid rgba(#0CCD58, 0.2);
+  background: rgba(#0CCD58, 0.08);
+  color: #0CCD58;
+  font-size: 12px;
+  line-height: 18px;
+}
+</style>
diff --git a/src/pages/home/components/AttachListComponent/index.vue b/src/pages/home/components/AttachListComponent/index.vue
new file mode 100644
index 0000000..5bf8cf4
--- /dev/null
+++ b/src/pages/home/components/AttachListComponent/index.vue
@@ -0,0 +1,42 @@
+<template>
+  <div class="tag-list">
+    <div v-for="(item, index) in tags" :key="index" class="tag-item" @click="handleClick(item)">
+      <span class="tag-text">{{ item }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from "vue";
+import { onMounted } from "vue";
+import {
+  SCROLL_TO_BOTTOM,
+  SEND_MESSAGE_CONTENT_TEXT,
+} from "@/constant/constant";
+
+const props = defineProps({
+  question: {
+    type: String,
+    default: "",
+  },
+});
+
+const tags = ref([]);
+
+const handleClick = (item) => {
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
+onMounted(() => {
+  tags.value = props.question.split(/[&|;]/).filter((tag) => tag.trim() !== "");
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 300);
+  });
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/AttachListComponent/styles/index.scss b/src/pages/home/components/AttachListComponent/styles/index.scss
new file mode 100644
index 0000000..aa3d41d
--- /dev/null
+++ b/src/pages/home/components/AttachListComponent/styles/index.scss
@@ -0,0 +1,23 @@
+.tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 6px 12px;
+}
+
+.tag-item {
+  box-sizing: border-box;
+  border: 1px solid #fff;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-radius: 8px;
+  padding: 4px 10px;
+  margin-right: 8px;
+  margin-bottom: 8px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.tag-text {
+  color: #0ccd58;
+  font-size: $uni-font-size-base;
+}
diff --git a/src/pages/home/components/ChatCardAi/index.vue b/src/pages/home/components/ChatCardAi/index.vue
new file mode 100644
index 0000000..f5dc69b
--- /dev/null
+++ b/src/pages/home/components/ChatCardAi/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-start）并占满宽度 -->
+  <div class="chat-ai-row">
+    <div class="container">
+      <div class="chat-ai">
+        <div class="container-content">
+          <img v-if="isLoading" class="loading-img" src="https://oss.nianxx.cn/mp/static/chat_msg_loading.gif" />
+          <ChatMarkdown :key="textKey" :text="processedText" />
+          <ChatLoading v-if="isLoading" />
+        </div>
+        <slot name="content"></slot>
+      </div>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed, ref, watch } from "vue";
+import ChatMarkdown from "../ChatMarkdown/index.vue";
+import ChatLoading from "../ChatLoading/index.vue";
+
+const props = defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+  isLoading: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// 用于强制重新渲染的key
+const textKey = ref(0);
+
+// 处理文本内容
+const processedText = computed(() => {
+  if (!props.text) {
+    return "";
+  }
+
+  // 确保文本是字符串类型
+  const textStr = String(props.text);
+
+  // 处理加载状态的文本
+  if (textStr.includes("思考中") || textStr.includes("...")) {
+    return textStr;
+  }
+
+  return textStr;
+});
+
+// 监听text变化，强制重新渲染
+watch(
+  () => props.text,
+  (newText, oldText) => {
+    if (newText !== oldText) {
+      textKey.value++;
+    }
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatCardAi/styles/index.scss b/src/pages/home/components/ChatCardAi/styles/index.scss
new file mode 100644
index 0000000..d06329a
--- /dev/null
+++ b/src/pages/home/components/ChatCardAi/styles/index.scss
@@ -0,0 +1,39 @@
+.chat-ai-row {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center; /* 垂直居中气泡 */
+  justify-content: flex-start; /* 默认左对齐 */
+}
+
+.container {
+  /* 气泡容器：内联块按内容自适应 */
+  display: inline-block;
+  box-sizing: border-box;
+  vertical-align: middle;
+  width: auto;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+
+.chat-ai {
+  padding: 0 12px; // 消息内容的内边距 左右12px
+  min-width: 0;
+  width: auto;
+  max-width: 100%;
+  overflow: hidden;
+  word-wrap: break-word;
+  word-break: break-all;
+}
+
+.container-content {
+  display: flex;
+  align-items: center;
+  max-width: 100%; // ✅ 限制最大宽度
+}
+
+.loading-img {
+  margin-right: 8px;
+  width: 30px;
+  height: 25px;
+}
diff --git a/src/pages/home/components/ChatCardMine/index.vue b/src/pages/home/components/ChatCardMine/index.vue
new file mode 100644
index 0000000..eeb3068
--- /dev/null
+++ b/src/pages/home/components/ChatCardMine/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <!-- 外层行容器：接收来自父组件的对齐类（如 flex flex-justify-end） -->
+  <div class="chat-mine-row">
+    <div class="chat-mine bg-17294E">
+      <span class="font-size-15 color-white">{{ text }}</span>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatCardMine/styles/index.scss b/src/pages/home/components/ChatCardMine/styles/index.scss
new file mode 100644
index 0000000..ca89b24
--- /dev/null
+++ b/src/pages/home/components/ChatCardMine/styles/index.scss
@@ -0,0 +1,20 @@
+.chat-mine-row {
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.chat-mine {
+  margin: 12px;
+  padding: 8px 16px;
+  border-radius: 15px;
+
+  /* 气泡为内联块，按内容宽度自适应；外层 `.chat-mine-row` 控制排列 */
+  display: inline-block;
+  box-sizing: border-box;
+  vertical-align: top;
+  width: auto;
+  max-width: 100%;
+  overflow-x: hidden;
+}
diff --git a/src/pages/home/components/ChatCardOther/index.vue b/src/pages/home/components/ChatCardOther/index.vue
new file mode 100644
index 0000000..2aa478e
--- /dev/null
+++ b/src/pages/home/components/ChatCardOther/index.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="w-full border-box flex flex-col overflow-hidden pl-12 mt-6 mb-6">
+    <span class="font-size-14 color-333">{{ text }}</span>
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/pages/home/components/ChatGuide/index.vue b/src/pages/home/components/ChatGuide/index.vue
new file mode 100644
index 0000000..7e0575e
--- /dev/null
+++ b/src/pages/home/components/ChatGuide/index.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="empty-container">
+    <!-- 图片变量 -->
+    <img v-if="!hasMessage" :src="imageSrc" class="main-image" />
+
+    <!-- 主标题变量 -->
+    <div v-if="!hasMessage" class="title">{{ mainTitle }}</div>
+
+    <!-- 副标题变量 -->
+    <div v-if="!hasMessage" class="sub-title-wrapper">
+      <span class="dot"></span>
+      <span class="sub-title">{{ subTitle }}</span>
+      <span class="dot"></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ossChengduUrl } from "@/request/base/baseUrl";
+import { chatGuideSubTitle } from "@/constant/local";
+
+const props = defineProps({
+  hasMessage: {
+    type: Boolean,
+    default: false
+  },
+  // 图片路径
+  imageSrc: {
+    type: String,
+    default: `${ossChengduUrl()}come_chat_image.png`
+  },
+  // 主标题
+  mainTitle: {
+    type: String,
+    default: '和我聊聊天吧!'
+  },
+  // 副标题
+  subTitle: {
+    type: String,
+    default: chatGuideSubTitle()
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.empty-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 90px 0;
+
+  .main-image {
+    width: 160px;
+    height: 160px;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    font-size: 18px;
+    font-weight: bold;
+    color: #2c3e50;
+    margin-bottom: 4px;
+    text-align: center;
+  }
+
+  .sub-title-wrapper {
+    display: flex;
+    align-items: center;
+
+    .sub-title {
+      font-size: 12px;
+      color: #afb9c1;
+      margin: 0 6px;
+    }
+
+    .dot {
+      width: 5px;
+      height: 5px;
+      background-color: #42b983;
+      border-radius: 50%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/home/components/ChatInputArea/index.vue b/src/pages/home/components/ChatInputArea/index.vue
new file mode 100644
index 0000000..d863b52
--- /dev/null
+++ b/src/pages/home/components/ChatInputArea/index.vue
@@ -0,0 +1,612 @@
+<template>
+  <div class="input-area-wrapper" @touchend="handleVoiceTouchEndFromContainer"
+    @touchcancel="handleVoiceTouchEndFromContainer">
+    <div v-if="!visibleWaveBtn || speechProvider !== 'wechat'" class="area-input">
+      <!-- 语音/键盘切换 -->
+      <div v-if="isSpeechRecognitionSupported" class="input-container-voice" @click="toggleVoiceMode">
+        <img class="voice-icon" v-if="!isVoiceMode"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/input_voice_icon.png" />
+        <img class="voice-icon" v-else src="https://oss.nianxx.cn/mp/static/version_101/home/input_keyboard_icon.png" />
+      </div>
+
+      <!-- 输入框/语音按钮容器 -->
+      <div class="input-button-container"
+        :class="{ 'input-button-container--no-voice': !isSpeechRecognitionSupported }">
+        <textarea ref="textareaRef" v-if="!isVoiceMode" class="textarea" type="text" cursor-spacing="20"
+          confirm-type="send" v-model="inputMessage" auto-height :focus="isFocused" :confirm-hold="true"
+          :placeholder="placeholder" :show-confirm-bar="false" :hold-keyboard="holdKeyboard" :adjust-position="true"
+          :disable-default-padding="true" maxlength="300" @confirm="sendMessage" @focus="handleFocus" @blur="handleBlur"
+          @touchstart="handleTouchStart" @touchend="handleTouchEnd" />
+
+        <!-- #ifdef MP-WEIXIN -->
+        <div v-if="isVoiceMode" class="hold-to-talk-button" @longpress="handleVoiceTouchStart"
+          @touchend="handleVoiceTouchEnd" @touchcancel="handleVoiceTouchEnd">
+          按住 说话
+        </div>
+        <!-- #endif -->
+
+        <!-- #ifdef APP-PLUS -->
+        <div v-if="isVoiceMode" class="hold-to-talk-button" @touchstart="handleVoiceTouchStart"
+          @touchend="handleVoiceTouchEnd" @touchcancel="handleVoiceTouchEnd">
+          <RecordingWaveBtn v-if="visibleWaveBtn" class="recording-wave-inline" ref="recordingWaveBtnRef" />
+          <text v-else>按住 说话</text>
+        </div>
+        <!-- #endif -->
+      </div>
+
+      <div class="input-container-send">
+        <div class="input-container-send-btn" @click="sendMessage">
+          <div v-if="props.isSessionActive" class="send-stop"> </div>
+          <img v-else class="send-icon" src="https://oss.nianxx.cn/mp/static/version_101/home/input_send_icon.png" />
+        </div>
+      </div>
+    </div>
+
+    <!-- #ifdef MP-WEIXIN -->
+    <!-- 录音按钮 -->
+    <RecordingWaveBtn v-if="visibleWaveBtn" ref="recordingWaveBtnRef" />
+    <!-- #endif -->
+
+    <!-- #ifdef APP-PLUS -->
+    <yao-asdRealSpeech v-if="isSpeechRecognitionSupported && appSpeechVisible" :key="appSpeechKey" ref="appSpeechRef"
+      :options="appSpeechOptions" @result="handleAppSpeechResult" @change="handleAppSpeechChange" />
+    <!-- #endif -->
+
+    <div class="color-99A0AE font-size-9 text-center text-gray-400">
+      内容由AI大模型生成，请仔细鉴别
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, nextTick, onMounted, defineExpose, onUnmounted } from "vue";
+import RecordingWaveBtn from "@/components/Speech/RecordingWaveBtn.vue";
+import { chatInputPlaceholder } from "@/constant/local";
+// #ifdef APP-PLUS
+import { appSpeechRecognitionOptions } from "@/constant/speech";
+// #endif
+
+let manager = null;
+let speechProvider = "";
+const isSpeechRecognitionEnabled = ref(true);
+const isSpeechRecognitionSupported = ref(false);
+let appSpeechOptions = {};
+// #ifdef APP-PLUS
+appSpeechOptions = appSpeechRecognitionOptions;
+// #endif
+
+// WechatSI 是微信小程序插件，App 原生基座没有 requirePlugin。
+// #ifdef MP-WEIXIN
+const plugin = requirePlugin("WechatSI");
+manager = plugin.getRecordRecognitionManager();
+isSpeechRecognitionSupported.value = isSpeechRecognitionEnabled.value && !!manager;
+speechProvider = manager ? "wechat" : "";
+// #endif
+
+// App 端使用 yao-asdRealSpeech；apikey 请在 src/constant/speech.js 中配置。
+// #ifdef APP-PLUS
+isSpeechRecognitionSupported.value = isSpeechRecognitionEnabled.value;
+speechProvider = "app";
+// #endif
+
+const props = defineProps({
+  modelValue: String,
+  holdKeyboard: Boolean,
+  isSessionActive: Boolean,
+  stopRequest: Function,
+});
+const emit = defineEmits([
+  "update:modelValue",
+  "send",
+  "noHideKeyboard",
+  "keyboardShow",
+  "keyboardHide",
+  "sendVoice",
+]);
+
+const textareaRef = ref(null);
+const recordingWaveBtnRef = ref(null);
+const appSpeechRef = ref(null);
+const appSpeechKey = ref(0);
+const appSpeechVisible = ref(true);
+const placeholder = computed(() => {
+  return chatInputPlaceholder();
+});
+const inputMessage = ref(props.modelValue || "");
+const isFocused = ref(false);
+const keyboardHeight = ref(0);
+const isVoiceMode = ref(false);
+const visibleWaveBtn = ref(false);
+const isRecording = ref(false);
+const isVoicePressing = ref(false);
+const appRecognizedText = ref("");
+const isAppSpeechStarting = ref(false);
+const isAppWaitingToSend = ref(false);
+let watchDogTimer = null;
+let appStopFallbackTimer = null;
+let hasSentAppRecognition = false;
+
+const resetUI = () => {
+  isRecording.value = false;
+  visibleWaveBtn.value = false;
+  try {
+    if (recordingWaveBtnRef.value) {
+      recordingWaveBtnRef.value.stopAnimation();
+    }
+  } catch (e) {
+    console.error("resetUI stopAnimation error", e);
+  }
+  if (watchDogTimer) {
+    clearTimeout(watchDogTimer);
+    watchDogTimer = null;
+  }
+};
+
+const startWatchDog = (timeout = 10000) => {
+  if (watchDogTimer) clearTimeout(watchDogTimer);
+  watchDogTimer = setTimeout(() => {
+    watchDogTimer = null;
+    console.warn("recording watchdog triggered, forcing UI reset");
+    if (speechProvider === "app" && hasActiveVoiceRecognition()) {
+      stopActiveVoiceRecognition({ shouldSend: true });
+      return;
+    }
+    resetUI();
+  }, timeout);
+};
+
+const clearAppStopFallback = () => {
+  if (appStopFallbackTimer) {
+    clearTimeout(appStopFallbackTimer);
+    appStopFallbackTimer = null;
+  }
+};
+
+const showRecordingUI = () => {
+  isRecording.value = true;
+  visibleWaveBtn.value = true;
+
+  nextTick(() => {
+    if (recordingWaveBtnRef.value) {
+      recordingWaveBtnRef.value.startAnimation();
+    }
+  });
+  startWatchDog(10000);
+};
+
+const resetAppSpeechComponent = () => {
+  if (speechProvider !== "app") return;
+
+  isAppSpeechStarting.value = false;
+  appSpeechVisible.value = false;
+  nextTick(() => {
+    appSpeechKey.value += 1;
+    appSpeechVisible.value = true;
+  });
+};
+
+const getPendingAppSpeechText = () => {
+  return (appRecognizedText.value || inputMessage.value || "").trim();
+};
+
+const scheduleAppRecognizedTextSend = (timeout = 1200) => {
+  isAppWaitingToSend.value = true;
+  clearAppStopFallback();
+
+  if (getPendingAppSpeechText()) {
+    sendAppRecognizedText();
+    return;
+  }
+
+  appStopFallbackTimer = setTimeout(() => {
+    appStopFallbackTimer = null;
+    sendAppRecognizedText();
+  }, timeout);
+};
+
+// 保持和父组件同步
+watch(
+  () => props.modelValue,
+  (val) => {
+    inputMessage.value = val;
+  }
+);
+
+// 当子组件的 inputMessage 变化时，通知父组件（但要避免循环更新）
+watch(inputMessage, (val) => {
+  // 只有当值真正不同时才emit，避免循环更新
+  if (val !== props.modelValue) {
+    emit("update:modelValue", val);
+  }
+});
+
+// 切换语音/文本模式
+const toggleVoiceMode = () => {
+  if (!isSpeechRecognitionSupported.value) return;
+  if (speechProvider === "app" && isVoiceMode.value) {
+    stopActiveVoiceRecognition({ shouldSend: false });
+  }
+  isVoiceMode.value = !isVoiceMode.value;
+};
+
+// 处理语音按钮按下开始
+const handleVoiceTouchStart = () => {
+  if (!isSpeechRecognitionSupported.value) return;
+  if (isRecording.value || isAppSpeechStarting.value || visibleWaveBtn.value) return;
+
+  isVoicePressing.value = true;
+
+  try {
+    if (speechProvider === "wechat") {
+      if (!manager) return;
+      manager.start({ lang: "zh_CN" });
+      showRecordingUI();
+    } else if (speechProvider === "app") {
+      if (!appSpeechOptions.apikey) {
+        uni.showToast({
+          title: "请先配置语音识别API Key",
+          icon: "none",
+        });
+        return;
+      }
+
+      appRecognizedText.value = "";
+      inputMessage.value = "";
+      isAppWaitingToSend.value = false;
+      hasSentAppRecognition = false;
+      clearAppStopFallback();
+      isAppSpeechStarting.value = true;
+
+      const appSpeech = appSpeechRef.value;
+      if (!appSpeech || typeof appSpeech.start !== "function") {
+        isAppSpeechStarting.value = false;
+        uni.showToast({
+          title: "语音组件未初始化",
+          icon: "none",
+        });
+        return;
+      }
+
+      appSpeech.start();
+    } else {
+      return;
+    }
+  } catch (err) {
+    console.error("record start error:", err);
+    isAppSpeechStarting.value = false;
+    // 保底清理
+    resetUI();
+  }
+};
+
+const hasActiveVoiceRecognition = () => {
+  return (
+    isVoicePressing.value ||
+    isRecording.value ||
+    isAppSpeechStarting.value ||
+    visibleWaveBtn.value
+  );
+};
+
+const stopActiveVoiceRecognition = ({ shouldSend = true } = {}) => {
+  isVoicePressing.value = false;
+
+  if (!isSpeechRecognitionSupported.value) {
+    resetUI();
+    return;
+  }
+
+  if (speechProvider === "app") {
+    const wasStarting = isAppSpeechStarting.value;
+    const wasRecording = isRecording.value;
+
+    if (!wasStarting && !wasRecording) {
+      if (!shouldSend) {
+        isAppWaitingToSend.value = false;
+        clearAppStopFallback();
+        resetAppSpeechComponent();
+      }
+      resetUI();
+      return false;
+    }
+
+    isAppSpeechStarting.value = false;
+
+    try {
+      appSpeechRef.value?.stop?.();
+      if (wasRecording && shouldSend) {
+        scheduleAppRecognizedTextSend();
+      } else {
+        isAppWaitingToSend.value = false;
+        clearAppStopFallback();
+        resetAppSpeechComponent();
+      }
+    } catch (err) {
+      console.error("record stop error:", err);
+      resetAppSpeechComponent();
+    } finally {
+      resetUI();
+    }
+    return true;
+  }
+
+  // 如果本地状态不是录音中，也确保 UI 恢复
+  if (!isRecording.value) {
+    if (recordingWaveBtnRef.value) {
+      recordingWaveBtnRef.value.stopAnimation();
+    }
+    visibleWaveBtn.value = false;
+    if (watchDogTimer) {
+      clearTimeout(watchDogTimer);
+      watchDogTimer = null;
+    }
+    return false;
+  }
+
+  try {
+    manager?.stop?.();
+  } catch (err) {
+    console.error("record stop error:", err);
+  } finally {
+    // 无论 stop 是否抛错，都保证 UI 恢复
+    resetUI();
+  }
+  return true;
+};
+
+// 处理语音按钮长按结束
+const handleVoiceTouchEnd = () => {
+  stopActiveVoiceRecognition({ shouldSend: true });
+};
+
+const handleVoiceTouchEndFromContainer = () => {
+  if (speechProvider !== "app") return;
+  if (!hasActiveVoiceRecognition()) return;
+  stopActiveVoiceRecognition({ shouldSend: true });
+};
+
+// 处理发送原语音
+const initRecord = () => {
+  if (!manager) return;
+
+  manager.onRecognize = (res) => {
+    let text = res.result || "";
+    inputMessage.value = text;
+  };
+  // 识别结束事件
+  manager.onStop = (res) => {
+    console.log(res, 37);
+    let text = (res && res.result) || "";
+
+    // 保证 UI 恢复（防止未走 handleVoiceTouchEnd）
+    resetUI();
+
+    if (text === "") {
+      console.log("没有说话");
+      return;
+    }
+
+    inputMessage.value = text;
+    // 在语音识别完成后发送消息
+    emit("send", text);
+  };
+
+  // 错误处理，确保 UI 重置
+  manager.onError = (err) => {
+    console.error("record manager error", err);
+    resetUI();
+  };
+};
+
+const getAppSpeechText = (res) => {
+  return (
+    res?.sentence?.text ||
+    res?.text ||
+    res?.result ||
+    res?.payload?.output?.sentence?.text ||
+    ""
+  );
+};
+
+const sendAppRecognizedText = () => {
+  if (hasSentAppRecognition) return false;
+
+  const text = getPendingAppSpeechText();
+  if (!text) {
+    console.log("没有说话");
+    return false;
+  }
+
+  hasSentAppRecognition = true;
+  isAppWaitingToSend.value = false;
+  clearAppStopFallback();
+  inputMessage.value = text;
+  emit("send", text);
+  appRecognizedText.value = "";
+  return true;
+};
+
+const handleAppSpeechResult = (res) => {
+  if (hasSentAppRecognition) return;
+
+  const text = getAppSpeechText(res);
+  if (!text) return;
+
+  appRecognizedText.value = text;
+  inputMessage.value = text;
+
+  if (isAppWaitingToSend.value) {
+    sendAppRecognizedText();
+  }
+};
+
+const handleAppSpeechChange = (msg) => {
+  if (!msg || !msg.status) return;
+
+  if (msg.status === "START") {
+    isAppSpeechStarting.value = false;
+    if (!isVoicePressing.value) {
+      appSpeechRef.value?.stop?.();
+      resetAppSpeechComponent();
+      resetUI();
+      return;
+    }
+
+    showRecordingUI();
+    return;
+  }
+
+  if (msg.status === "STOP") {
+    isAppSpeechStarting.value = false;
+    resetUI();
+    if (!sendAppRecognizedText() && !isAppWaitingToSend.value) {
+      resetAppSpeechComponent();
+    }
+    return;
+  }
+
+  if (msg.status === "FINISH") {
+    isAppSpeechStarting.value = false;
+    resetUI();
+    sendAppRecognizedText();
+    resetAppSpeechComponent();
+    return;
+  }
+
+  if (msg.status === "CLOSE") {
+    isAppSpeechStarting.value = false;
+    resetUI();
+    if (isAppWaitingToSend.value) {
+      sendAppRecognizedText();
+    }
+    resetAppSpeechComponent();
+    return;
+  }
+
+  if (msg.status === "ERROR") {
+    console.error("app speech recognition error", msg.msg);
+    isAppSpeechStarting.value = false;
+    isAppWaitingToSend.value = false;
+    clearAppStopFallback();
+    resetUI();
+    resetAppSpeechComponent();
+  }
+};
+
+// 监听键盘高度变化
+onMounted(() => {
+  // 监听键盘弹起
+  uni.onKeyboardHeightChange((res) => {
+    keyboardHeight.value = res.height;
+    if (res.height) {
+      emit("keyboardShow", res.height);
+    } else {
+      emit("keyboardHide");
+    }
+  });
+
+  initRecord();
+});
+
+onUnmounted(() => {
+  if (manager) {
+    try {
+      manager.stop && manager.stop();
+    } catch (e) {
+      // ignore
+    }
+    manager.onRecognize = null;
+    manager.onStop = null;
+    manager.onError = null;
+  }
+  if (appSpeechRef.value) {
+    try {
+      appSpeechRef.value.stop && appSpeechRef.value.stop();
+    } catch (e) {
+      // ignore
+    }
+  }
+  clearAppStopFallback();
+  isAppSpeechStarting.value = false;
+  isAppWaitingToSend.value = false;
+  isVoicePressing.value = false;
+  resetUI();
+});
+
+const hideKeyboardAfterSend = () => {
+  isFocused.value = false;
+
+  const textarea = textareaRef.value;
+  if (textarea && typeof textarea.blur === "function") {
+    textarea.blur();
+  }
+
+  nextTick(() => {
+    uni.hideKeyboard();
+  });
+};
+
+const sendMessage = () => {
+  if (props.isSessionActive) {
+    // 如果会话进行中，调用停止请求函数
+    if (props.stopRequest) {
+      props.stopRequest();
+    }
+    hideKeyboardAfterSend();
+  } else {
+    // 否则发送新消息
+    if (!inputMessage.value.trim()) return;
+    emit("send", inputMessage.value);
+    hideKeyboardAfterSend();
+  }
+};
+
+const handleFocus = () => {
+  isFocused.value = true;
+  emit("noHideKeyboard");
+};
+
+const handleBlur = () => {
+  isFocused.value = false;
+};
+
+const handleTouchStart = () => {
+  emit("noHideKeyboard");
+};
+
+const handleTouchEnd = () => {
+  emit("noHideKeyboard");
+};
+
+// 手动聚焦输入框
+const focusInput = () => {
+  isFocused.value = true;
+  nextTick(() => {
+    const textarea = textareaRef.value;
+    if (textarea && typeof textarea.focus === "function") {
+      textarea.focus();
+    }
+  });
+};
+
+// 手动失焦输入框
+const blurInput = () => {
+  isFocused.value = false;
+
+  const textarea = textareaRef.value;
+  if (textarea && typeof textarea.blur === "function") {
+    textarea.blur();
+  }
+
+  nextTick(() => {
+    uni.hideKeyboard();
+  });
+};
+
+// 暴露方法给父组件
+defineExpose({ focusInput, blurInput });
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatInputArea/styles/index.scss b/src/pages/home/components/ChatInputArea/styles/index.scss
new file mode 100644
index 0000000..006ab9b
--- /dev/null
+++ b/src/pages/home/components/ChatInputArea/styles/index.scss
@@ -0,0 +1,115 @@
+.area-input {
+  display: flex;
+  align-items: center;
+  border-radius: 24px;
+  background-color: #fff;
+  box-shadow: 0px 0px 20px 0px rgba(52, 25, 204, 0.05);
+  margin: 0 12px;
+  margin-bottom: 8px;
+
+  .input-container-voice {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    width: 48px;
+    height: 48px;
+
+    .voice-icon {
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  .input-button-container {
+    flex: 1;
+    position: relative;
+
+    &--no-voice {
+      margin-left: 12px;
+    }
+  }
+
+  .hold-to-talk-button {
+    width: 100%;
+    height: 44px;
+    color: $uni-text-color;
+    font-size: $uni-font-size-lg;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: #fff;
+    transition: all 0.2s ease;
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .recording-wave-inline {
+    width: 100%;
+    margin: 0;
+    margin-bottom: 0;
+    box-shadow: none;
+  }
+
+  .input-container-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: flex-end;
+    width: 48px;
+    height: 48px;
+
+    .input-container-send-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background:
+        radial-gradient(
+          39% 39% at 97% 81%,
+          #79dffb 0%,
+          rgba(138, 227, 252, 0) 100%
+        ),
+        radial-gradient(
+          54% 54% at 3% 70%,
+          #8afcf8 0%,
+          rgba(138, 252, 248, 0) 100%
+        ),
+        #0ccd58;
+    }
+
+    .send-icon {
+      width: 24px;
+      height: 24px;
+    }
+
+    .send-stop {
+      width: 12px;
+      height: 12px;
+      background: #ffffff;
+      border-radius: 4px;
+    }
+  }
+
+  .textarea {
+    flex: 1;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 92px;
+    min-height: 22px;
+    font-size: $uni-font-size-lg;
+    line-height: 22px;
+    margin: 6px 0;
+
+    &::placeholder {
+      color: #cccccc;
+      line-height: normal;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+}
diff --git a/src/pages/home/components/ChatLoading/index.vue b/src/pages/home/components/ChatLoading/index.vue
new file mode 100644
index 0000000..84aa18e
--- /dev/null
+++ b/src/pages/home/components/ChatLoading/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="wave">
+    <div class="dot"></div>
+    <div class="dot"></div>
+    <div class="dot"></div>
+  </div>
+</template>
+
+<script></script>
+
+<style lang="scss" scoped>
+.wave {
+  position: relative;
+  text-align: center;
+  width: 30px;
+
+  .dot {
+    display: inline-block;
+    width: 3px;
+    height: 3px;
+    border-radius: 50%;
+    margin-right: 3px;
+    background: #333333;
+    animation: wave 1.3s linear infinite;
+
+    &:nth-child(2) {
+      animation-delay: -1.1s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.9s;
+    }
+  }
+}
+
+@keyframes wave {
+
+  0%,
+  60%,
+  100% {
+    transform: initial;
+  }
+
+  30% {
+    transform: translateY(-5px);
+  }
+}
+</style>
diff --git a/src/pages/home/components/ChatLongAnswer/ParsedValueView.vue b/src/pages/home/components/ChatLongAnswer/ParsedValueView.vue
new file mode 100644
index 0000000..0ae88e8
--- /dev/null
+++ b/src/pages/home/components/ChatLongAnswer/ParsedValueView.vue
@@ -0,0 +1,227 @@
+<template>
+  <div v-if="shouldRenderField" class="parsed-value">
+    <template v-for="entry in renderFieldEntries" :key="entry.key">
+      <div v-if="entry.type === 'text'" class="content-body-text">
+        {{ entry.value }}
+      </div>
+      <div v-else-if="entry.type === 'image'" class="content-body-image-card">
+        <img class="content-body-image" :src="entry.value.image_id" mode="widthFix"
+          @click="handlePredivClick(entry.value.image_id)" />
+        <div v-if="entry.value.caption" class="content-body-image-caption">
+          {{ entry.value.caption }}
+        </div>
+      </div>
+      <div v-else-if="entry.type === 'list'" class="content-body-list-card">
+        <div v-for="(item, index) in entry.value" :key="index" class="content-body-list-item">
+          <div class="content-body-list-text">
+            {{ formatLeafValue(item) }}
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, defineProps } from "vue";
+
+const props = defineProps({
+  fieldKey: {
+    type: String,
+    default: "",
+  },
+  value: {
+    type: [Object, Array, String, Number, Boolean],
+    default: null,
+  },
+});
+
+const IGNORED_FIELD_KEYS = ["container_type", "content", "content_summary", "components"];
+
+const isArrayValue = (value) => Array.isArray(value);
+
+const isObjectValue = (value) => {
+  return value !== null && typeof value === "object" && !Array.isArray(value);
+};
+
+const parseJsonStringValue = (value) => {
+  if (typeof value !== "string") return value;
+
+  const text = value.trim();
+  if (!/^[\[{]/.test(text)) return value;
+
+  try {
+    return JSON.parse(text);
+  } catch (e) {
+    return value;
+  }
+};
+
+const sanitizeValue = (value) => {
+  const parsedValue = parseJsonStringValue(value);
+
+  if (isArrayValue(parsedValue)) {
+    return parsedValue.map((item) => sanitizeValue(item));
+  }
+  if (isObjectValue(parsedValue)) {
+    return Object.keys(parsedValue).reduce((result, key) => {
+      if (IGNORED_FIELD_KEYS.includes(key)) return result;
+      result[key] = sanitizeValue(parsedValue[key]);
+      return result;
+    }, {});
+  }
+  return parsedValue;
+};
+
+const hasDisplayValue = (value) => {
+  if (value === undefined || value === null) return false;
+  if (typeof value === "string") return !!value.trim();
+  if (isArrayValue(value)) return value.some((item) => hasDisplayValue(item));
+  if (isObjectValue(value)) {
+    const valueObj = sanitizeValue(value);
+    return Object.keys(valueObj).some((key) => hasDisplayValue(valueObj[key]));
+  }
+  return true;
+};
+
+const formatLeafValue = (value) => {
+  if (value === undefined || value === null) return "";
+  if (typeof value === "boolean") return value ? "是" : "否";
+  if (typeof value === "object") {
+    try {
+      return JSON.stringify(sanitizeValue(value));
+    } catch (e) {
+      return String(value);
+    }
+  }
+  return String(value);
+};
+
+const isImageValue = (value) => {
+  return isObjectValue(value) && hasDisplayValue(value.image_id);
+};
+
+const createImageEntry = (key, value) => ({
+  key,
+  type: "image",
+  value: {
+    image_id: formatLeafValue(value.image_id).trim(),
+    caption: hasDisplayValue(value.caption) ? formatLeafValue(value.caption) : "",
+  },
+});
+
+const renderFieldEntries = computed(() => {
+  if (isIgnoredField.value || !hasDisplayValue(props.value)) return [];
+
+  const value = sanitizeValue(props.value);
+  if (isImageValue(value)) {
+    return [createImageEntry(props.fieldKey, value)];
+  }
+
+  if (isArrayValue(value)) {
+    return [{
+      key: props.fieldKey,
+      type: "list",
+      value: value.filter((item) => hasDisplayValue(item)),
+    }];
+  }
+
+  if (isObjectValue(value)) {
+    return Object.keys(value)
+      .filter((key) => hasDisplayValue(value[key]))
+      .map((key) => {
+        const entryValue = value[key];
+        if (isImageValue(entryValue)) {
+          return createImageEntry(key, entryValue);
+        }
+        if (isArrayValue(entryValue)) {
+          return {
+            key,
+            type: "list",
+            value: entryValue.filter((item) => hasDisplayValue(item)),
+          };
+        }
+        return {
+          key,
+          type: "text",
+          value: formatLeafValue(entryValue),
+        };
+      });
+  }
+
+  return [{
+    key: props.fieldKey,
+    type: "text",
+    value: formatLeafValue(value),
+  }];
+});
+
+const isIgnoredField = computed(() => IGNORED_FIELD_KEYS.includes(props.fieldKey));
+const shouldRenderField = computed(() => renderFieldEntries.value.length > 0);
+
+const handlePredivClick = (imageUrl) => {
+  uni.predivImage({
+    current: imageUrl,
+    urls: [imageUrl],
+  });
+};
+
+</script>
+
+<style scoped lang="scss">
+.parsed-value {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.content-body-text {
+  color: #111827;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+}
+
+.content-body-image-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.content-body-image {
+  width: 100%;
+  display: block;
+  border-radius: 8px;
+  background: #f3f4f6;
+}
+
+.content-body-image-caption {
+  color: #6b7280;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+}
+
+.content-body-list-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px;
+  border-left: 4px solid #0CCD58;
+  border-radius: 12px;
+  background: rgba(#0CCD58, 0.08);
+}
+
+.content-body-list-item {
+  display: flex;
+  align-items: flex-start;
+}
+
+.content-body-list-text {
+  flex: 1;
+  color: $theme-color-800;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 20px;
+}
+</style>
diff --git a/src/pages/home/components/ChatLongAnswer/index.vue b/src/pages/home/components/ChatLongAnswer/index.vue
new file mode 100644
index 0000000..a20663c
--- /dev/null
+++ b/src/pages/home/components/ChatLongAnswer/index.vue
@@ -0,0 +1,298 @@
+<template>
+  <div class="flex flex-col bg-liner h-screen overflow-hidden">
+    <!-- ✅ 顶部固定导航 -->
+    <div class="flex-shrink-0">
+      <TopNavBar :title="title" background="transparent" />
+    </div>
+
+    <!-- ✅ 滚动区域 -->
+    <div class="flex-full overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
+      @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+      <div class="flex flex-col pt-12 px-12 pb-24 border-box gap-10">
+        <div v-if="headerSections.title || headerSections.tag" class="long-answer-header">
+          <div v-if="headerSections.title" class="long-answer-title">
+            {{ headerSections.title.contentValue }}
+          </div>
+          <div v-if="headerSections.tag" class="long-answer-tag">
+            {{ headerSections.tag.contentValue }}
+          </div>
+        </div>
+
+        <template v-for="section in contentSections" :key="section.contentKey">
+          <ParsedValuediv v-if="shouldUseParsedValuediv(section)" :field-key="section.contentKey"
+            :value="section.parsedValue !== null ? section.parsedValue : section.contentValue" />
+
+          <ChatMarkdown v-else-if="section.contentKey === LONG_TEXT_KEYS.content" :text="section.contentValue" />
+
+          <ChatMarkdown v-else :text="section.contentValue" />
+        </template>
+
+        <!-- ✅ 底部锚点（必须存在） -->
+        <div id="bottom-anchor"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import ChatMarkdown from "../ChatMarkdown/index.vue";
+import ParsedValuediv from "./ParsedValuediv.vue";
+import { defineProps, ref, nextTick, computed } from "vue";
+import StreamManager from "@/utils/StreamManager.js";
+import {
+  LONG_TEXT_KEYS,
+  getLongTextSections,
+  getLongTextValue,
+} from "@/utils/longTextCard";
+
+const props = defineProps({
+  answerText: {
+    type: String,
+    default: "",
+  },
+});
+
+const answerText = ref(props.answerText || "");
+const title = ref("");
+const longTextData = ref(null);
+
+let unsubscribe = null;
+
+const HIDDEN_DETAIL_SECTION_KEYS = [
+  LONG_TEXT_KEYS.containerType,
+  LONG_TEXT_KEYS.contentSummary,
+];
+
+const shouldUseParsedValuediv = (section) => {
+  return (
+    section.fromLongTextData &&
+    section.contentKey !== LONG_TEXT_KEYS.tag &&
+    section.contentKey !== LONG_TEXT_KEYS.title &&
+    section.contentKey !== LONG_TEXT_KEYS.content &&
+    !HIDDEN_DETAIL_SECTION_KEYS.includes(section.contentKey)
+  );
+};
+
+const renderSections = computed(() => {
+  const data = longTextData.value;
+  if (data && data.values) {
+    return getLongTextSections(data)
+      .filter((section) => section.contentValue)
+      .map((section) => ({
+        ...section,
+        fromLongTextData: true,
+      }));
+  }
+
+  return answerText.value
+    ? [{ contentKey: "content", contentValue: answerText.value }]
+    : [];
+});
+
+const headerSections = computed(() => {
+  const sections = renderSections.value;
+  return {
+    title: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.title),
+    tag: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.tag),
+  };
+});
+
+const contentSections = computed(() => {
+  return renderSections.value.filter(
+    (section) =>
+      section.contentKey !== LONG_TEXT_KEYS.title &&
+      section.contentKey !== LONG_TEXT_KEYS.tag &&
+      !HIDDEN_DETAIL_SECTION_KEYS.includes(section.contentKey)
+  );
+});
+
+/** ✅ scroll-into-div 控制 */
+const scrollIntodivId = ref("");
+
+/** 滚动控制状态 */
+const isNearBottom = ref(true);
+const scrolldivHeight = ref(0);
+const SCROLL_THRESHOLD = 150; // px
+
+/** 用户交互状态，用户滚动/触摸时临时禁用自动滚动 */
+const userInteracting = ref(false);
+let interactionTimer = null;
+
+/** 是否已完成（从 URL 参数判断），完成状态下不初始初自动滚到底部 */
+let isFinishedOnInit = false;
+
+/** ✅ 防抖 */
+let scrollTimer = null;
+
+const measureScrolldivHeight = () => {
+  try {
+    // 使用 uni.createSelectorQuery 获取 scroll-div 的准确高度
+    uni.createSelectorQuery()
+      .select(".chat-scroll")
+      .boundingClientRect((rect) => {
+        if (rect && rect.height) {
+          scrolldivHeight.value = rect.height;
+        }
+      })
+      .exec();
+  } catch (e) { }
+}
+
+/** 生成展示用标题：去除前导 `#` 并截取前 6 字符（超过加省略号） */
+const computeTitle = (text = "") => {
+  const t = (text || "").replace(/^#+\s*/, "");
+  return t.length > 8 ? t.substring(0, 8) + "..." : t;
+}
+
+const onScroll = (e) => {
+  try {
+    const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};
+
+    // 计算距离底部的距离（使用准确的 scroll-div 高度）
+    const divHeight = scrolldivHeight.value;
+    const distanceToBottom = scrollHeight - scrollTop - divHeight;
+
+    // 判断是否在底部附近（允许 SCROLL_THRESHOLD 的误差范围）
+    // 注意：只更新 isNearBottom，不在滚动时强制改变 userInteracting
+    const atBottom = distanceToBottom <= SCROLL_THRESHOLD;
+    isNearBottom.value = atBottom;
+  } catch (e) { }
+}
+
+const onTouchStart = () => {
+  // 触摸开始时，立即标记为用户交互状态
+  userInteracting.value = true;
+  clearTimeout(interactionTimer);
+}
+
+const onTouchEnd = () => {
+  // 触摸结束后延迟一段时间再取消交互状态
+  // 这样即使用户快速滚动，也不会被中途打断
+  clearTimeout(interactionTimer);
+  interactionTimer = setTimeout(() => {
+    userInteracting.value = false;
+  }, 600);
+}
+
+const scrollToBottom = () => {
+  if (scrollTimer) return;
+  if (isFinishedOnInit) return;
+
+  scrollTimer = setTimeout(() => {
+    // ❗关键：强制触发滚动（小程序必须这样）
+    // 如果用户正在交互，则跳过本次自动滚动
+    if (userInteracting.value) {
+      scrollTimer = null;
+      return;
+    }
+
+    scrollIntodivId.value = "";
+
+    nextTick(() => {
+      // 再次 nextTick + 延迟，兼容 markdown 渲染延迟
+      setTimeout(() => {
+        scrollIntodivId.value = "bottom-anchor";
+        // 测量高度以便后续滚动判断准确
+        measureScrolldivHeight();
+      }, 50);
+    });
+
+    scrollTimer = null;
+  }, 100);
+}
+// TODO
+// onLoad(({ message = "", streamId = "", finished = "0" }) => {
+//   // 记录初始完成状态
+//   isFinishedOnInit = finished === "1";
+
+//   console.log("LongAnswer onLoad with params:", { message, streamId, finished });
+
+//   // 初次测量 scroll-div 高度
+//   nextTick(() => {
+//     measureScrolldivHeight();
+//   });
+
+//   if (streamId) {
+//     // ✅ 流式数据
+//     unsubscribe = StreamManager.subscribe(
+//       streamId,
+//       (text = "", finished = false, payload = null) => {
+//         answerText.value = text || "";
+//         longTextData.value = payload || null;
+//         title.value = computeTitle(
+//           getLongTextValue(longTextData.value, "title") || answerText.value
+//         );
+
+//         nextTick(() => {
+//           // 每次接收数据都重新测量高度（content size 可能变化，比如加载图）
+//           measureScrolldivHeight();
+
+//           // 流式完成时强制滚动到底部
+//           if (finished) {
+//             scrollToBottom();
+//           }
+//           // 流式中的数据更新：只有在用户未交互且接近底部时才自动滚动
+//           else if (!userInteracting.value && isNearBottom.value) {
+//             scrollToBottom();
+//           }
+//         });
+//       }
+//     );
+//   } else {
+//     // ✅ 非流式
+//     answerText.value = decodeURIComponent(message || "");
+//     longTextData.value = null;
+//     title.value = computeTitle(answerText.value);
+
+//     nextTick(() => {
+//       // 只有在初始化为非完成状态时才自动滚到底部
+//       scrollToBottom();
+//     });
+//   }
+// });
+
+// onUnload(() => {
+//   try {
+//     unsubscribe && unsubscribe();
+//   } catch (e) { }
+//   // 清理定时器，避免内存泄漏
+//   try { clearTimeout(scrollTimer); } catch (e) { }
+//   try { clearTimeout(interactionTimer); } catch (e) { }
+//   scrollTimer = null;
+//   interactionTimer = null;
+// });
+</script>
+
+<style scoped lang="scss">
+.long-answer-header {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
+}
+
+.long-answer-tag {
+  display: inline-flex;
+  flex-shrink: 0;
+  width: fit-content;
+  padding: 3px 8px;
+  border-radius: 12px;
+  border: 1px solid rgba(#0CCD58, 0.2);
+  background: rgba(#0CCD58, 0.08);
+  color: #0CCD58;
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.long-answer-title {
+  flex: 1;
+  min-width: 0;
+  color: #111827;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 28px;
+}
+</style>
diff --git a/src/pages/home/components/ChatMainList/index.vue b/src/pages/home/components/ChatMainList/index.vue
new file mode 100644
index 0000000..9fde39e
--- /dev/null
+++ b/src/pages/home/components/ChatMainList/index.vue
@@ -0,0 +1,1275 @@
+<template>
+  <div class="flex flex-col h-screen relative overflow-hidden">
+    <!-- 顶部自定义导航栏 -->
+    <div class="header absolute top-0 left-0 w-full z-10" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" @showDrawer="handleShowDrawer" />
+    </div>
+
+    <div class="relative">
+      <img class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl" mode="aspectFill"
+        style="height: 252px;" />
+      <div class="absolute bottom-0 left-0 right-0 flex-full">
+        <div class="px-12 pt-12">
+          <HomeWelcome :mainPageDataModel="mainPageDataModel" />
+        </div>
+        <div style="margin-bottom: -1px;">
+          <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
+        </div>
+      </div>
+    </div>
+
+    <div v-show="tabIndex === 0" class="main-scroll-area flex-full overflow-hidden min-height-0"
+      @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+      @touchmove="handleScrollAreaTouchMove">
+      <Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
+    </div>
+
+    <!-- 消息列表（可滚动区域） -->
+    <div v-show="tabIndex === 1" class="main main-scroll-area flex-full overflow-hidden min-height-0" scroll-y
+      :scroll-top="scrollTop" :scroll-with-animation="true" @scroll="handleScroll" @scrolltolower="handleScrollToLower"
+      @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+      @touchmove="handleScrollAreaTouchMove">
+
+      <div class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
+        <template v-if="item.msgType === MessageRole.AI">
+          <ChatCardAI class="flex flex-justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.componentName && isLongTextCard(item.componentName)
+            ? ''
+            : item.msg || ''
+            " :isLoading="item.isLoading">
+            <template #content v-if="
+              item.toolCall ||
+              (item.componentName && isLongTextCard(item.componentName))
+            ">
+              <!-- <AnswerComponent
+                v-if="isLongTextCard(item.componentName)"
+                :longTextData="item.longTextData"
+                :finish="item.finish"
+              /> -->
+
+              <LongTextGuideCardPrediv v-if="item.componentName && isLongTextCard(item.componentName)"
+                :componentName="item.componentName" />
+
+              <QuickBookingComponent v-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.quickBookingCard
+              " />
+              <DiscoveryCardComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.discoveryCard
+              " />
+              <CreateServiceOrder v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.callServiceCard
+              " :toolCall="item.toolCall" />
+              <OpenMapComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.mapCard
+              " />
+              <GeneratorPhotoComponent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName ===
+                CompName.aigcPhotoGeneratorCard
+              " :toolCall="item.toolCall" />
+              <!-- <ZModuleC01
+                v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.aigcPhotoGeneratorCard
+                "
+              /> -->
+
+              <Feedback v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.feedbackCard
+              " :toolCall="item.toolCall" />
+              <DetailCardCompontent v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName ===
+                CompName.pictureAndCommodityCard
+              " :toolCall="item.toolCall" />
+              <AddCarCrad v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName === CompName.enterLicensePlateCard
+              " :toolCall="item.toolCall" />
+              <SurveyQuestionnaire v-else-if="
+                item.toolCall &&
+                item.toolCall.componentName ===
+                CompName.callSurveyQuestionnaire
+              " :toolCall="item.toolCall" />
+            </template>
+
+            <template #footer>
+              <!-- 这个是底部 -->
+              <AttachListComponent v-if="item.question" :question="item.question" />
+            </template>
+          </ChatCardAI>
+        </template>
+
+        <template v-else-if="item.msgType === MessageRole.ME">
+          <ChatCardMine class="flex flex-justify-end" :text="item.msg" />
+        </template>
+
+        <template v-else>
+          <ChatCardOther class="flex flex-justify-center" :text="item.msg">
+            <ChatGuide v-if="chatMsgList.length < 2" />
+            <ActivityListComponent v-if="
+              mainPageDataModel.activityList &&
+              mainPageDataModel.activityList.length > 0
+            " :activityList="mainPageDataModel.activityList" />
+
+            <!-- 先不展示了，等后续有需求再加回来 false -->
+            <RecommendPostsComponent v-if="
+              false &&
+              mainPageDataModel.recommendTheme &&
+              mainPageDataModel.recommendTheme.length > 0
+            " :recommendThemeList="mainPageDataModel.recommendTheme" />
+          </ChatCardOther>
+        </template>
+      </div>
+    </div>
+
+    <!-- 输入框区域 -->
+    <div class="pb-safe-area">
+      <ChatQuickAccess />
+      <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
+        :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"
+        @noHideKeyboard="handleNoHideKeyboard" @keyboardShow="handleKeyboardShow" @keyboardHide="handleKeyboardHide" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, nextTick, onUnmounted, ref } from "vue";
+import {
+  SWITCH_TO_COMPANION_TAB,
+  SWITCH_TO_DISCOVERY_TAB,
+  SCROLL_TO_BOTTOM,
+  SEND_MESSAGE_CONTENT_TEXT,
+  SEND_MESSAGE_COMMAND_TYPE,
+  NOTICE_EVENT_LOGOUT,
+  NOTICE_EVENT_LOGIN_SUCCESS,
+} from "@/constant/constant";
+import { MessageRole, MessageType, CompName, Command } from "@/model/ChatModel";
+
+import HomeWelcome from "../HomeWelcome/index.vue";
+import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
+import Discovery from "../../Discovery/index.vue";
+import ChatGuide from "../ChatGuide/index.vue";
+
+import ChatTopNavBar from "../ChatTopNavBar/index.vue";
+import ChatCardAI from "../ChatCardAi/index.vue";
+import ChatCardMine from "../ChatCardMine/index.vue";
+import ChatCardOther from "../ChatCardOther/index.vue";
+import ChatQuickAccess from "../ChatQuickAccess/index.vue";
+import ChatInputArea from "../ChatInputArea/index.vue";
+
+import QuickBookingComponent from "../../ChatModule/QuickBookingComponent/index.vue";
+import DiscoveryCardComponent from "../../ChatModule/DiscoveryCardComponent/index.vue";
+import ActivityListComponent from "../../ChatModule/ActivityListComponent/index.vue";
+import RecommendPostsComponent from "../../ChatModule/RecommendPostsComponent/index.vue";
+import AttachListComponent from "../../ChatModule/AttachListComponent/index.vue";
+import DetailCardCompontent from "../../ChatModule/DetailCardCompontent/index.vue";
+import OpenMapComponent from "../../ChatModule/OpenMapComponent/index.vue";
+import AnswerComponent from "../../ChatModule/AnswerComponent/index.vue";
+import GeneratorPhotoComponent from "../../ChatModule/GeneratorPhotoComponent/index.vue";
+
+import ZModuleC01 from "../../ChatModule/ZModuleC01/index.vue";
+import LongTextGuideCardPrediv from "../../ChatModule/LongTextGuideCardPrediv/index.vue";
+
+import CreateServiceOrder from "@/components/CreateServiceOrder/index.vue";
+import Feedback from "@/components/Feedback/index.vue";
+import AddCarCrad from "@/components/AddCarCrad/index.vue";
+import SurveyQuestionnaire from "@/components/SurveyQuestionnaire/index.vue";
+import { mainPageData } from "@/request/api/MainPageDataApi";
+import {
+  conversationMsgList,
+  recentConversation,
+} from "@/request/api/ConversationApi";
+import WebSocketManager from "@/utils/WebSocketManager";
+import { IdUtils } from "@/utils";
+import {
+  appendLongTextChunk,
+  createLongTextData,
+} from "@/utils/longTextCard";
+import { checkToken } from "@/hooks/useGoLogin";
+import { useAppStore } from "@/store";
+import { getAccessToken } from "@/constant/token";
+
+const emit = defineEmits(["showDrawer"]);
+const appStore = useAppStore();
+/// 导航栏相关
+const statusBarHeight = ref(20);
+/// 输入框组件引用
+const inputAreaRef = ref(null);
+const topNavBarRef = ref();
+const notitceConent = ref(null);
+
+const holdKeyboardTimer = ref(null);
+/// focus时，点击页面的时候不收起键盘
+const holdKeyboard = ref(false);
+/// 是否在键盘弹出，点击界面时关闭键盘
+const holdKeyboardFlag = ref(true);
+/// 是否显示键盘
+const isKeyboardShow = ref(false);
+
+///（控制滚动位置）
+const scrollTop = ref(99999);
+
+/// 会话列表
+const chatMsgList = ref([]);
+/// 输入框的输入消息
+const inputMessage = ref("");
+
+/// 是否自动滚动到底部 (人工手动向上滚动时设为false)
+const isAutoScroll = ref(true);
+let lastHideKeyboardAt = 0;
+let lastScrollTouchAt = 0;
+
+/// agentId 首页接口中获取
+const agentId = ref("1");
+/// 会话ID 历史数据接口中获取
+const conversationId = ref("");
+/// 首页的数据
+const mainPageDataModel = ref({});
+
+// 会话进行中标志
+const isSessionActive = ref(false);
+/// 指令
+let messageCommonType = "";
+
+// WebSocket 相关
+let webSocketManager = null;
+/// 使用统一的连接状态判断函数，避免状态不同步
+const isWsConnected = () =>
+  !!(
+    webSocketManager &&
+    typeof webSocketManager.isConnected === "function" &&
+    webSocketManager.isConnected()
+  );
+
+// pendingMap: messageId -> msgIndex
+const pendingMap = new Map();
+// pendingTimeouts: messageId -> timeoutId
+const pendingTimeouts = new Map();
+// 超时时间（ms）
+const MESSAGE_TIMEOUT = 30000;
+
+// 防止并发初始化 websocket
+let isInitializing = false;
+let pendingInitPromise = null;
+// sleep helper
+const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
+
+// 当前会话的消息ID，用于保持发送和终止的messageId一致
+let currentSessionMessageId = null;
+
+const tabIndex = ref(0);
+const tabList = ["探索发现", "AI伴游"];
+
+const handleChange = (i) => {
+  console.log("切换:", i);
+};
+
+const handleShowDrawer = () => {
+  emit("showDrawer");
+};
+
+/// =============事件函数↓================
+const handleTouchEnd = () => {
+  clearTimeout(holdKeyboardTimer.value);
+  holdKeyboardTimer.value = setTimeout(() => {
+    // 键盘弹出时点击界面则关闭键盘
+    if (holdKeyboardFlag.value && isKeyboardShow.value) {
+      uni.hideKeyboard();
+    }
+    holdKeyboardFlag.value = true;
+  }, 100);
+};
+
+// 点击输入框、发送按钮时，不收键盘
+const handleNoHideKeyboard = () => (holdKeyboardFlag.value = false);
+
+// 键盘弹起事件
+const handleKeyboardShow = () => {
+  isKeyboardShow.value = true;
+  holdKeyboard.value = true;
+  // 键盘弹起时调整聊天内容的底部边距并滚动到底部
+  setTimeout(() => {
+    scrollToBottom(true);
+  }, 150);
+};
+
+// 键盘收起事件
+const handleKeyboardHide = () => {
+  isKeyboardShow.value = false;
+  holdKeyboard.value = false;
+};
+
+const hideKeyboardByScroll = () => {
+  const now = Date.now();
+  if (now - lastHideKeyboardAt < 300) return;
+  lastHideKeyboardAt = now;
+
+  holdKeyboard.value = false;
+  holdKeyboardFlag.value = true;
+  isKeyboardShow.value = false;
+
+  if (
+    inputAreaRef.value &&
+    typeof inputAreaRef.value.blurInput === "function"
+  ) {
+    inputAreaRef.value.blurInput();
+  }
+
+  uni.hideKeyboard();
+
+  // #ifdef APP-PLUS
+  if (typeof plus !== "undefined" && plus.key && plus.key.hideSoftKeybord) {
+    plus.key.hideSoftKeybord();
+  }
+  // #endif
+};
+
+const hideKeyboardAfterSend = () => {
+  holdKeyboard.value = false;
+  holdKeyboardFlag.value = true;
+  isKeyboardShow.value = false;
+
+  if (
+    inputAreaRef.value &&
+    typeof inputAreaRef.value.blurInput === "function"
+  ) {
+    inputAreaRef.value.blurInput();
+  } else {
+    uni.hideKeyboard();
+  }
+};
+
+const handleScrollAreaTouchStart = () => {
+  lastScrollTouchAt = Date.now();
+  hideKeyboardByScroll();
+};
+
+const handleScrollAreaTouchMove = () => {
+  lastScrollTouchAt = Date.now();
+  hideKeyboardByScroll();
+};
+
+// 处理用户滚动事件
+const welcomeHeight = ref(0);
+let lastScrollTop = 0;
+const handleScroll = (e) => {
+  if (Date.now() - lastScrollTouchAt < 1000) {
+    hideKeyboardByScroll();
+  }
+
+  const detail = e.detail;
+  topNavBarRef.value.show = parseInt(detail.scrollTop) > welcomeHeight.value;
+
+  const currentScrollTop = detail.scrollTop;
+  // 如果向上滚动 (当前位置小于上一次记录的位置)
+  if (currentScrollTop < lastScrollTop - 2) {
+    // 增加 2px 阈值防止抖动
+    isAutoScroll.value = false;
+  }
+  lastScrollTop = currentScrollTop;
+};
+
+// 处理滚动到底部事件
+const handleScrollToLower = () => {
+  // 当用户滚动到底部时，明确开启自动滚动
+  isAutoScroll.value = true;
+};
+
+// 滚动到底部 - 优化版本，确保打字机效果始终可见
+const scrollToBottom = (force = false) => {
+  // 如果当前不是自动滚动模式且非强制触发，则不执行滚动
+  if (!isAutoScroll.value && !force) {
+    console.log("暂停自动滚动，当前位置:", scrollTop.value);
+    return;
+  }
+
+  nextTick(() => {
+    // 使用更大的值确保滚动到真正的底部
+    const targetScrollTop = 99999 + Math.random();
+    scrollTop.value = targetScrollTop;
+  });
+};
+
+// 延时滚动
+const setTimeoutScrollToBottom = (force = false) =>
+  setTimeout(() => scrollToBottom(force), 100);
+
+// 发送普通消息
+const handleReplyText = (text) => {
+  // 发送消息时，强制开启自动滚动
+  isAutoScroll.value = true;
+  // 重置消息状态，准备接收新的AI回复
+  resetMessageState();
+  sendMessage(text);
+  setTimeoutScrollToBottom(true);
+};
+
+// 是发送指令消息
+const handleReplyInstruct = async (item) => {
+  await checkToken();
+
+  // 发送消息时，强制开启自动滚动
+  isAutoScroll.value = true;
+  messageCommonType = item.type;
+  // 重置消息状态，准备接收新的AI回复
+  resetMessageState();
+  sendMessage(item.title, true);
+  setTimeoutScrollToBottom(true);
+};
+
+//  输入区的发送消息事件
+const sendMessageAction = (inputText) => {
+  console.log("输入消息:", inputText);
+  if (!inputText.trim()) return;
+
+  // 发送消息时，强制开启自动滚动
+  isAutoScroll.value = true;
+  // 重置消息状态，准备接收新的AI回复
+  resetMessageState();
+
+  sendMessage(inputText);
+  hideKeyboardAfterSend();
+
+  setTimeoutScrollToBottom(true);
+};
+
+/// 添加通知
+const addNoticeListener = () => {
+  uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
+    if (!isWsConnected()) {
+      initHandler();
+    }
+  });
+
+  uni.$on(NOTICE_EVENT_LOGOUT, () => {
+    resetConfig();
+  });
+
+  uni.$on(SCROLL_TO_BOTTOM, () => {
+    setTimeout(() => {
+      scrollToBottom(true);
+    }, 200);
+  });
+
+  uni.$on(SEND_MESSAGE_CONTENT_TEXT, (value) => {
+    console.log("SEND_MESSAGE_CONTENT_TEXT:", value);
+    if (value && value.length > 0) {
+      handleReplyText(value);
+    }
+  });
+
+  uni.$on(SEND_MESSAGE_COMMAND_TYPE, (item) => {
+    console.log("SEND_MESSAGE_COMMAND_TYPE:", item);
+    if (item && item.type) {
+      handleReplyInstruct(item);
+    }
+  });
+
+  uni.$on(SWITCH_TO_COMPANION_TAB, () => {
+    tabIndex.value = 1;
+  });
+
+  uni.$on(SWITCH_TO_DISCOVERY_TAB, () => {
+    tabIndex.value = 0;
+  });
+};
+
+/// =============生命周期函数↓================
+// TODO
+// onLoad(() => {
+//   uni.getSystemInfo({
+//     success: (res) => {
+//       statusBarHeight.value = res.statusBarHeight || 20;
+//     },
+//   });
+// });
+
+// onReady(() => {
+//   // #ifdef APP-PLUS
+//   const pages = getCurrentPages();
+//   const currentPage = pages[pages.length - 1];
+//   const currentWebdiv = currentPage && currentPage.$getAppWebdiv && currentPage.$getAppWebdiv();
+
+//   if (currentWebdiv && currentWebdiv.setStyle) {
+//     currentWebdiv.setStyle({
+//       bounce: "none",
+//       scrollIndicator: "none",
+//     });
+//   }
+//   // #endif
+// });
+
+// token存在，初始化数据
+const initHandler = () => {
+  console.log("initHandler");
+  const token = getAccessToken();
+
+  if (!token) return;
+  loadRecentConversation();
+  ///loadConversationMsgList();
+  initWebSocket();
+};
+
+onMounted(() => {
+  try {
+    getMainPageData();
+    addNoticeListener();
+    // 有token时，加载最近会话、最近消息、初始化socket
+    initHandler();
+  } catch (error) {
+    console.error("页面初始化错误:", error);
+  }
+});
+
+/// =============页面配置↓================
+// 获取最近一次的会话id
+const loadRecentConversation = async () => {
+  const res = await recentConversation();
+  if (res.code === 0) {
+    conversationId.value = res.data.conversationId;
+  }
+};
+
+// 加载历史消息的数据
+let historyCurrentPageNum = 1;
+const loadConversationMsgList = async () => {
+  const args = {
+    pageNum: historyCurrentPageNum++,
+    pageSize: 10,
+    conversationId: conversationId.value,
+  };
+  const res = await conversationMsgList(args);
+};
+
+// 获取首页数据
+
+const getMainPageData = async () => {
+  /// 从个渠道获取如二维，没有的时候就返回首页的数据
+  const sceneId = appStore.sceneId || "";
+  const res = await mainPageData({ sceneId });
+
+  if (res.code === 0) {
+    initData();
+    mainPageDataModel.value = res.data;
+    agentId.value = res.data.agentId;
+  }
+  appStore.setSceneId(""); // 清空sceneId,分身二次进入展示默认的
+};
+
+/// =============对话↓================
+// 初始化WebSocket
+const initWebSocket = async () => {
+  // 防止并发初始化
+  if (isInitializing) {
+    return pendingInitPromise;
+  }
+
+  isInitializing = true;
+  pendingInitPromise = (async () => {
+    // 清理旧实例
+    if (webSocketManager) {
+      try {
+        webSocketManager.destroy();
+      } catch (e) {
+        console.warn("destroy old webSocketManager failed:", e);
+      }
+      webSocketManager = null;
+    }
+
+    // 使用配置的WebSocket服务器地址
+    const token = getAccessToken();
+    const wsUrl = `${appStore.serverConfig.wssUrl}?access_token=${token}`;
+
+    // 初始化WebSocket管理器
+    webSocketManager = new WebSocketManager({
+      wsUrl: wsUrl,
+      reconnectInterval: 3000, // 重连间隔
+      maxReconnectAttempts: 5, // 最大重连次数
+      heartbeatInterval: 30000, // 心跳间隔
+
+      // 连接成功回调
+      onOpen: (event) => {
+        console.log("WebSocket连接成功");
+        // 重置会话状态
+        isSessionActive.value = false; // 连接成功时重置会话状态，避免影响新消息发送
+
+        // 连接成功后发送 welcome 消息 (messageType=4)
+        try {
+          // fire-and-forget, sendWebSocketMessage 会处理重连与队列
+          sendWebSocketMessage(MessageType.notice, Command.messageInit, {
+            tryReconnect: true,
+            messageId: IdUtils.generateMessageId(),
+          }).catch((e) => {
+            console.warn("发送 Command.messageInit 消息失败:", e);
+          });
+        } catch (e) {
+          console.warn("发送 Command.messageInit 消息时异常:", e);
+        }
+      },
+
+      // 连接断开回调
+      onClose: (event) => {
+        console.error("WebSocket连接断开:", event);
+        // 停止当前会话
+        isSessionActive.value = false;
+      },
+
+      // 错误回调
+      onError: (error) => {
+        console.error("WebSocket错误:", error);
+        isSessionActive.value = false;
+      },
+
+      // 消息回调
+      onMessage: (data) => {
+        handleWebSocketMessage(data);
+      },
+
+      // 获取会话ID回调 (用于心跳检测)
+      getConversationId: () => conversationId.value,
+
+      // 获取代理ID回调 (用于心跳检测)
+      getAgentId: () => agentId.value,
+    });
+
+    try {
+      // 初始化连接
+      await webSocketManager.connect();
+      console.log("WebSocket连接初始化成功");
+      return true;
+    } catch (error) {
+      console.error("WebSocket连接失败:", error);
+      return false;
+    } finally {
+      isInitializing = false;
+      pendingInitPromise = null;
+    }
+  })();
+
+  return pendingInitPromise;
+};
+
+// 处理WebSocket消息
+const handleWebSocketMessage = (data) => {
+  // 验证关键字段（若服务端传回 conversationId/agentId，则校验是否属于当前会话）
+  if (data.conversationId && data.conversationId !== conversationId.value) {
+    console.warn("收到不属于当前会话的消息，忽略", data.conversationId);
+    return;
+  }
+  if (data.agentId && data.agentId !== agentId.value) {
+    console.warn("收到不属于当前 agent 的消息，忽略", data.agentId);
+    return;
+  }
+
+  if (data.messageType && data.messageType === "broadcast") {
+    console.log("收到 welcome 类型消息:", data);
+    if (data.content) {
+      notitceConent.value = data.content;
+    }
+    return;
+  }
+
+  let aiMsgIndex = -1;
+  // Prefer matching by replyMessageId if provided
+  if (data.replyMessageId) {
+    // 1) Try to find an existing AI message that already has the same replyMessageId
+    for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
+      const it = chatMsgList.value[i];
+      if (
+        it &&
+        it.msgType === MessageRole.AI &&
+        it.replyMessageId === data.replyMessageId
+      ) {
+        aiMsgIndex = i;
+        break;
+      }
+    }
+
+    // 2) If not found, check pendingMap for currentSessionMessageId
+    if (
+      aiMsgIndex === -1 &&
+      currentSessionMessageId &&
+      pendingMap.has(currentSessionMessageId)
+    ) {
+      const idx = pendingMap.get(currentSessionMessageId);
+      if (idx >= 0 && idx < chatMsgList.value.length) {
+        const item = chatMsgList.value[idx];
+        // If the pending item already has a different non-empty replyMessageId, create a new AI entry
+        if (
+          item &&
+          item.msgType === MessageRole.AI &&
+          item.replyMessageId &&
+          item.replyMessageId !== data.replyMessageId
+        ) {
+          const aiMsg = {
+            msgId: `msg_${chatMsgList.value.length}`,
+            msgType: MessageRole.AI,
+            msg: "",
+            isLoading: false,
+            messageId: currentSessionMessageId,
+            replyMessageId: data.replyMessageId || "",
+            componentName: "",
+            longTextData: null,
+            finish: false,
+          };
+          chatMsgList.value.push(aiMsg);
+          aiMsgIndex = chatMsgList.value.length - 1;
+        } else {
+          // Reuse the pending item
+          aiMsgIndex = idx;
+        }
+      }
+    }
+
+    // 3) If still not found, create a new AI message for this replyMessageId
+    if (aiMsgIndex === -1) {
+      const aiMsg = {
+        msgId: `msg_${chatMsgList.value.length}`,
+        msgType: MessageRole.AI,
+        msg: "",
+        isLoading: false,
+        messageId: currentSessionMessageId,
+        replyMessageId: data.replyMessageId || "",
+        componentName: "",
+        longTextData: null,
+        finish: false,
+      };
+      chatMsgList.value.push(aiMsg);
+      aiMsgIndex = chatMsgList.value.length - 1;
+    }
+  } else {
+    // No replyMessageId: fall back to most recent AI message
+    for (let i = chatMsgList.value.length - 1; i >= 0; i--) {
+      if (
+        chatMsgList.value[i] &&
+        chatMsgList.value[i].msgType === MessageRole.AI
+      ) {
+        aiMsgIndex = i;
+        break;
+      }
+    }
+    if (aiMsgIndex === -1) {
+      console.error("处理WebSocket消息时找不到对应的AI消息项");
+      return;
+    }
+  }
+
+  // 防护：确保 aiMsgIndex 有效
+  if (aiMsgIndex < 0 || aiMsgIndex >= chatMsgList.value.length) {
+    console.error("无效的 aiMsgIndex:", aiMsgIndex);
+    return;
+  }
+
+  // replyMessageId
+  if (data.replyMessageId) {
+    chatMsgList.value[aiMsgIndex].replyMessageId = data.replyMessageId;
+  }
+
+  // 如果服务端在分片中就带来了 componentName，提前记录并将已缓存的 msg 转移到 componentMsg
+  const aiItem = chatMsgList.value[aiMsgIndex];
+  if (data.componentName) {
+    aiItem.componentName = data.componentName;
+    if (isLongTextCard(data.componentName)) {
+      aiItem.longTextData = aiItem.longTextData || createLongTextData();
+      if (aiItem.msg && aiItem.msg.length > 0) {
+        if (!aiItem.isLoading) {
+          aiItem.componentMsg = (aiItem.componentMsg || "") + aiItem.msg;
+        }
+        aiItem.msg = "";
+      }
+    }
+  }
+
+  const isLongText = isLongTextCard(aiItem.componentName) || isLongTextCard(data.componentName);
+
+  if (isLongText && data.contentKey) {
+    aiItem.longTextData = aiItem.longTextData || createLongTextData();
+    appendLongTextChunk(aiItem.longTextData, data);
+    if (aiItem.isLoading) {
+      aiItem.msg = "";
+      aiItem.isLoading = false;
+    }
+    nextTick(() => scrollToBottom());
+  }
+
+  // 确保消息内容是字符串类型
+  if (data.content && typeof data.content !== "string") {
+    try {
+      data.content = JSON.stringify(data.content);
+    } catch (e) {
+      data.content = String(data.content);
+    }
+  }
+
+  // 直接拼接内容到对应 AI 消息
+  if (data.content) {
+    // 如果该条消息属于 longTextCard，使用 componentMsg 存储内容并保持 ChatCardAI 的 text 为空
+    if (isLongText) {
+      if (aiItem.isLoading) {
+        aiItem.componentMsg = (aiItem.componentMsg || "") + data.content;
+        aiItem.isLoading = false;
+      } else {
+        aiItem.componentMsg = (aiItem.componentMsg || "") + data.content;
+      }
+    } else {
+      if (aiItem.isLoading) {
+        // 首次收到内容：替换“加载中”文案并取消 loading 状态（恢复原始渲染逻辑）
+        aiItem.msg = data.content;
+        aiItem.isLoading = false;
+      } else {
+        // 后续流式内容追加
+        aiItem.msg += data.content;
+      }
+    }
+    nextTick(() => scrollToBottom());
+  }
+
+  // 处理完成状态
+  if (data.finish) {
+    chatMsgList.value[aiMsgIndex].finish = true;
+    const msg = chatMsgList.value[aiMsgIndex].msg;
+    if (!msg || chatMsgList.value[aiMsgIndex].isLoading) {
+      // 如果服务器返回了 componentName 或 toolCall，应保留空消息以供组件渲染；否则显示错误占位
+      if (data.toolCall || data.componentName) {
+        chatMsgList.value[aiMsgIndex].msg = "";
+      } else {
+        chatMsgList.value[aiMsgIndex].msg = "未获取到内容，请重试";
+      }
+      chatMsgList.value[aiMsgIndex].isLoading = false;
+    }
+
+    // 处理组件调用
+    if (data.componentName) {
+      chatMsgList.value[aiMsgIndex].componentName = data.componentName;
+    }
+
+    // 处理toolCall
+    if (data.toolCall) {
+      chatMsgList.value[aiMsgIndex].toolCall = data.toolCall;
+    }
+
+    // 处理question
+    if (data.question && data.question.length > 0) {
+      chatMsgList.value[aiMsgIndex].question = data.question;
+    }
+
+    // 清理 pendingMap / timeout
+    const ownedMessageId = chatMsgList.value[aiMsgIndex].messageId || null;
+    if (ownedMessageId) {
+      if (pendingTimeouts.has(ownedMessageId)) {
+        clearTimeout(pendingTimeouts.get(ownedMessageId));
+        pendingTimeouts.delete(ownedMessageId);
+      }
+      pendingMap.delete(ownedMessageId);
+    }
+
+    // 重置会话状态
+    isSessionActive.value = false;
+    // 清理当前会话的 messageId，避免保留陈旧 id
+    resetMessageState();
+
+    nextTick(() => scrollToBottom());
+    console.log("消息接收完成:", JSON.stringify(chatMsgList.value[aiMsgIndex]));
+  }
+};
+
+const isLongTextCard = (componentName) => {
+  return (
+    componentName === CompName.longTextCard ||
+    componentName === CompName.longTextCardSnap ||
+    componentName === CompName.longTextCardRoute ||
+    componentName === CompName.longTextCardScenicSpot
+  );
+};
+
+// 重置消息状态
+const resetMessageState = () => {
+  // 重置当前会话消息ID
+  currentSessionMessageId = null;
+};
+
+// 初始化数据 首次数据加载的时候
+const initData = () => {
+  const msg = {
+    msgId: `msg_${0}`,
+    msgType: MessageRole.OTHER,
+    msg: "",
+  };
+  chatMsgList.value.push(msg);
+};
+
+// 发送消息的参数拼接
+const sendMessage = async (message, isInstruct = false) => {
+  console.log("发送的消息：", message);
+
+  await checkToken();
+
+  /// 切换到对话tab
+  if (tabIndex.value !== 1) {
+    tabIndex.value = 1;
+  }
+
+  // 检查WebSocket连接状态，如果未连接，尝试重新连接
+  if (!isWsConnected()) {
+    console.log("WebSocket未连接，尝试重新连接...");
+    // 显示加载提示
+    uni.showLoading({
+      title: "正在连接服务器...",
+    });
+
+    // 尝试重新初始化WebSocket连接
+    try {
+      await initWebSocket();
+      // 等待短暂时间确保连接建立
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // 检查连接是否成功建立
+      if (!isWsConnected()) {
+        uni.hideLoading();
+        setTimeout(() => {
+          uni.showToast({
+            title: "连接服务器失败，请稍后重试",
+            icon: "none",
+          });
+        }, 100);
+        return;
+      }
+      uni.hideLoading();
+    } catch (error) {
+      console.error("重新连接WebSocket失败:", error);
+      uni.hideLoading();
+      setTimeout(() => {
+        uni.showToast({
+          title: "连接服务器失败，请稍后重试",
+          icon: "none",
+        });
+      }, 100);
+      return;
+    }
+  }
+
+  if (isSessionActive.value) {
+    uni.showToast({
+      title: "请等待当前回复完成",
+      icon: "none",
+    });
+    return;
+  }
+  isSessionActive.value = true;
+  const newMsg = {
+    msgId: `msg_${chatMsgList.value.length}`,
+    msgType: MessageRole.ME,
+    msg: message,
+  };
+  chatMsgList.value.push(newMsg);
+  inputMessage.value = "";
+  // 发送消息后滚动到底部
+  setTimeoutScrollToBottom(true);
+  sendChat(message, isInstruct);
+  console.log("发送的新消息：", JSON.stringify(newMsg));
+};
+
+// 通用WebSocket消息发送函数 -> 返回 Promise<boolean>
+const sendWebSocketMessage = async (
+  messageType,
+  messageContent,
+  options = {},
+) => {
+  const args = {
+    conversationId: conversationId.value,
+    agentId: agentId.value,
+    messageType: String(messageType), // 消息类型 0-对话 1-指令 2-中断停止 3-心跳检测 4-消息
+    messageContent: messageContent,
+    messageId: options.messageId || currentSessionMessageId,
+  };
+
+  const maxRetries = typeof options.retries === "number" ? options.retries : 3;
+  const baseDelay =
+    typeof options.baseDelay === "number" ? options.baseDelay : 300; // ms
+  const maxDelay =
+    typeof options.maxDelay === "number" ? options.maxDelay : 5000; // ms
+
+  for (let attempt = 0; attempt <= maxRetries; attempt++) {
+    // 确保连接
+    if (!isWsConnected()) {
+      if (options.tryReconnect) {
+        try {
+          await initWebSocket();
+        } catch (e) {
+          console.error("reconnect failed in sendWebSocketMessage:", e);
+        }
+      }
+    }
+
+    if (!isWsConnected()) {
+      if (!options.silent) console.warn("WebSocket 未连接，无法发送消息", args);
+      // 如果还有重试机会，进行等待后重试
+      if (attempt < maxRetries) {
+        const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt));
+        await sleep(delay);
+        continue;
+      }
+      isSessionActive.value = false;
+      return false;
+    }
+
+    try {
+      const raw = webSocketManager.sendMessage(args);
+      // 兼容可能返回同步布尔或 Promise 的实现
+      const result = await Promise.resolve(raw);
+      if (result) {
+        console.log(`WebSocket消息已发送 [类型:${messageType}]:`, args);
+        return true;
+      }
+
+      // 若返回 false，消息可能已经被 manager 入队并触发连接流程。
+      // 在这种情况下避免立即当作失败处理，而是等待短暂时间以观察连接是否建立并由 manager 发送队列。
+      console.warn(
+        "webSocketManager.sendMessage 返回 false，等待连接或队列发送...",
+        { attempt, args },
+      );
+      const waitForConnectMs =
+        typeof options.waitForConnectMs === "number"
+          ? options.waitForConnectMs
+          : 5000;
+      if (
+        webSocketManager &&
+        typeof webSocketManager.isConnected === "function" &&
+        !webSocketManager.isConnected()
+      ) {
+        const startTs = Date.now();
+        while (Date.now() - startTs < waitForConnectMs) {
+          await sleep(200);
+          if (webSocketManager.isConnected()) {
+            // 给 manager 一点时间处理队列并发送
+            await sleep(150);
+            console.log("检测到 manager 已连接，假定队列消息已发送", args);
+            return true;
+          }
+        }
+        console.warn("等待 manager 建连超时，进入重试逻辑", {
+          waitForConnectMs,
+          args,
+        });
+      } else {
+        console.warn(
+          "sendMessage 返回 false 但 manager 看起来已连接或不可用，继续重试",
+          { args },
+        );
+      }
+    } catch (error) {
+      console.error("发送WebSocket消息异常:", error, args);
+    }
+
+    // 失败且还有重试机会，等待指数退避
+    if (attempt < maxRetries) {
+      const delay = Math.min(maxDelay, baseDelay * Math.pow(2, attempt));
+      await sleep(delay + Math.floor(Math.random() * 100));
+      continue;
+    }
+
+    // 最后一次失败
+    isSessionActive.value = false;
+    return false;
+  }
+  // 不可达，但为了类型安全
+  isSessionActive.value = false;
+  return false;
+};
+
+// 发送获取AI聊天消息
+const sendChat = async (message, isInstruct = false) => {
+  // 检查WebSocket管理器是否存在，如果不存在，尝试重新初始化
+  if (!webSocketManager) {
+    console.error("WebSocket管理器不存在，尝试重新初始化...");
+    initWebSocket();
+    // 短暂延迟后再次检查连接状态
+    setTimeout(() => {
+      const connected = webSocketManager && webSocketManager.isConnected();
+      isSessionActive.value = connected;
+      // 更新AI消息状态
+      const aiMsgIndex = chatMsgList.value.length - 1;
+      if (
+        aiMsgIndex >= 0 &&
+        chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI
+      ) {
+        chatMsgList.value[aiMsgIndex].msg = connected
+          ? ""
+          : "发送消息失败，请重试";
+        chatMsgList.value[aiMsgIndex].isLoading = connected;
+      }
+      if (connected) {
+        // 连接成功后重新发送消息
+        sendChat(message, isInstruct);
+      } else {
+        console.error("WebSocket重新初始化失败");
+      }
+    }, 1000);
+    return;
+  }
+
+  const messageType = isInstruct ? MessageType.command : MessageType.dialog;
+  const messageContent = isInstruct ? messageCommonType : message;
+  // 生成 messageId 并保存到当前会话变量（stopRequest 可能使用）
+  currentSessionMessageId = IdUtils.generateMessageId();
+
+  // 插入AI消息，并在 pendingMap 中记录
+  const aiMsg = {
+    msgId: `msg_${chatMsgList.value.length}`,
+    msgType: MessageRole.AI,
+    msg: "思考中",
+    isLoading: true,
+    messageId: currentSessionMessageId,
+    replyMessageId: "",
+    componentName: "",
+    longTextData: null,
+    finish: false,
+  };
+  chatMsgList.value.push(aiMsg);
+  // 添加AI消息后滚动到底部
+  setTimeoutScrollToBottom(true);
+  const aiMsgIndex = chatMsgList.value.length - 1;
+
+  // 记录 pendingMap
+  pendingMap.set(currentSessionMessageId, aiMsgIndex);
+
+  // 启动超时回退
+  const timeoutId = setTimeout(() => {
+    const idx = pendingMap.get(currentSessionMessageId);
+    if (
+      idx != null &&
+      chatMsgList.value[idx] &&
+      chatMsgList.value[idx].isLoading
+    ) {
+      chatMsgList.value[idx].msg = "请求超时，请重试";
+      chatMsgList.value[idx].isLoading = false;
+      pendingMap.delete(currentSessionMessageId);
+      pendingTimeouts.delete(currentSessionMessageId);
+      isSessionActive.value = false;
+      setTimeoutScrollToBottom(true);
+    }
+  }, MESSAGE_TIMEOUT);
+  pendingTimeouts.set(currentSessionMessageId, timeoutId);
+
+  // 发送消息，支持重连尝试
+  const success = await sendWebSocketMessage(messageType, messageContent, {
+    messageId: currentSessionMessageId,
+    tryReconnect: true,
+  });
+  if (!success) {
+    const idx = pendingMap.get(currentSessionMessageId);
+    if (idx != null && chatMsgList.value[idx]) {
+      chatMsgList.value[idx].msg = "发送消息失败，请重试";
+      chatMsgList.value[idx].isLoading = false;
+    }
+    // 清理 pending
+    if (pendingTimeouts.has(currentSessionMessageId)) {
+      clearTimeout(pendingTimeouts.get(currentSessionMessageId));
+      pendingTimeouts.delete(currentSessionMessageId);
+    }
+    pendingMap.delete(currentSessionMessageId);
+    isSessionActive.value = false;
+  }
+};
+
+// 停止请求函数
+const stopRequest = async () => {
+  console.log("停止请求");
+
+  // 发送中断消息给服务器 (messageType=2)，带上当前 messageId
+  try {
+    await sendWebSocketMessage(MessageType.stop, "stop_request", {
+      messageId: currentSessionMessageId,
+      silent: true,
+    });
+  } catch (e) {
+    console.warn("stopRequest send failed:", e);
+  }
+
+  // 直接将AI消息状态设为停止（优先使用 pendingMap 映射）
+  let aiMsgIndex = -1;
+  if (currentSessionMessageId && pendingMap.has(currentSessionMessageId)) {
+    aiMsgIndex = pendingMap.get(currentSessionMessageId);
+  } else {
+    aiMsgIndex = chatMsgList.value.length - 1;
+  }
+
+  if (
+    chatMsgList.value[aiMsgIndex] &&
+    chatMsgList.value[aiMsgIndex].msgType === MessageRole.AI
+  ) {
+    chatMsgList.value[aiMsgIndex].isLoading = false;
+    if (
+      chatMsgList.value[aiMsgIndex].msg &&
+      chatMsgList.value[aiMsgIndex].msg.trim() &&
+      !chatMsgList.value[aiMsgIndex].msg.startsWith("思考中")
+    ) {
+      // 保留已显示内容
+    } else {
+      chatMsgList.value[aiMsgIndex].msg = "请求已停止";
+    }
+  }
+
+  // 清理 pending
+  if (currentSessionMessageId) {
+    if (pendingTimeouts.has(currentSessionMessageId)) {
+      clearTimeout(pendingTimeouts.get(currentSessionMessageId));
+      pendingTimeouts.delete(currentSessionMessageId);
+    }
+    pendingMap.delete(currentSessionMessageId);
+  }
+
+  // 重置会话状态
+  isSessionActive.value = false;
+  setTimeoutScrollToBottom(true);
+};
+
+// 组件销毁时清理资源
+onUnmounted(() => {
+  uni.$off(NOTICE_EVENT_LOGIN_SUCCESS);
+  uni.$off(SCROLL_TO_BOTTOM);
+  uni.$off(SEND_MESSAGE_CONTENT_TEXT);
+  uni.$off(SEND_MESSAGE_COMMAND_TYPE);
+  uni.$off(NOTICE_EVENT_LOGOUT);
+
+  resetConfig();
+});
+
+const resetConfig = () => {
+  // 清理WebSocket连接
+  if (webSocketManager) {
+    webSocketManager.destroy();
+    webSocketManager = null;
+  }
+
+  // 重置消息状态
+  resetMessageState();
+  isSessionActive.value = false;
+
+  // 清理 pendingMap / pendingTimeouts
+  try {
+    for (const t of pendingTimeouts.values()) {
+      clearTimeout(t);
+    }
+  } catch (e) {
+    // ignore
+  }
+  pendingTimeouts.clear();
+  pendingMap.clear();
+
+  // 清理定时器
+  if (holdKeyboardTimer.value) {
+    clearTimeout(holdKeyboardTimer.value);
+    holdKeyboardTimer.value = null;
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatMainList/styles/index.scss b/src/pages/home/components/ChatMainList/styles/index.scss
new file mode 100644
index 0000000..9c4fd57
--- /dev/null
+++ b/src/pages/home/components/ChatMainList/styles/index.scss
@@ -0,0 +1,6 @@
+.main-scroll-area {
+  flex-basis: 0;
+  height: 0;
+  min-height: 0;
+  overscroll-behavior-y: contain;
+}
\ No newline at end of file
diff --git a/src/pages/home/components/ChatMarkdown/index.vue b/src/pages/home/components/ChatMarkdown/index.vue
new file mode 100644
index 0000000..e6ee6b6
--- /dev/null
+++ b/src/pages/home/components/ChatMarkdown/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="container">
+    <zero-markdown-div :markdown="text" :aiMode="true"></zero-markdown-div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+defineProps({
+  text: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style scoped>
+.container {
+  width: 100%;
+}
+
+.container ::v-deep image,
+.container ::v-deep video,
+.container ::v-deep iframe {
+  width: 100% !important;
+}
+</style>
diff --git a/src/pages/home/components/ChatMoreTips/index.vue b/src/pages/home/components/ChatMoreTips/index.vue
new file mode 100644
index 0000000..4dbbdd8
--- /dev/null
+++ b/src/pages/home/components/ChatMoreTips/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="more-tips bg-white border-box">
+    <div class="font-size-0 whitespace-nowrap scroll-x">
+      <div class="more-tips-item border-box inline-block mr-8" v-for="(item, index) in guideWords" :key="index">
+        <span :class="['font-500 font-size-12 text-center', `color-${index}`]" @click="sendReply(item)">
+          {{ item }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
+import { defineProps } from "vue";
+
+defineProps({
+  guideWords: {
+    type: Array,
+    default: [],
+  },
+});
+
+const sendReply = (item) => {
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatMoreTips/styles/index.scss b/src/pages/home/components/ChatMoreTips/styles/index.scss
new file mode 100644
index 0000000..bb69df9
--- /dev/null
+++ b/src/pages/home/components/ChatMoreTips/styles/index.scss
@@ -0,0 +1,44 @@
+.more-tips {
+  box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
+  border-radius: 0px 0px 20px 20px;
+  padding: 12px 0 12px 12px;
+
+  .more-tips-item {
+    background: #f7f7f7;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 6px 8px;
+
+    &:last-child {
+      margin-right: 12px;
+    }
+  }
+}
+
+.color-0 {
+  color: #47c2ff;
+}
+
+.color-1 {
+  color: #fb3748;
+}
+
+.color-2 {
+  color: #1fc16b;
+}
+
+.color-3 {
+  color: #f6b51e;
+}
+
+.color-4 {
+  color: #7d52f4;
+}
+
+.color-5 {
+  color: #fb4ba3;
+}
+
+.color-6 {
+  color: #22d3bb;
+}
diff --git a/src/pages/home/components/ChatQuickAccess/index.vue b/src/pages/home/components/ChatQuickAccess/index.vue
new file mode 100644
index 0000000..ae59f8c
--- /dev/null
+++ b/src/pages/home/components/ChatQuickAccess/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <div class="quick-access flex flex-row ml-12 pt-8 pb-8 scroll-x whitespace-nowrap">
+    <div class="item border-box rounded-50 flex flex-row items-center" v-for="(item, index) in itemList" :key="index"
+      @click="sendReply(item)">
+      <div class="flex items-center justify-center">
+        <img v-if="item.icon" class="icon" :src="item.icon" />
+        <span class="font-size-14 theme-color-500 line-height-20">
+          {{ item.title }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Command } from "@/model/ChatModel";
+import { SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+import { checkToken } from "@/hooks/useGoLogin";
+
+const itemList = ref([
+  {
+    icon: "",
+    title: "快速预定",
+    type: Command.quickBooking,
+  },
+  {
+    icon: "",
+    title: "我的订单",
+    type: Command.myOrder,
+  },
+  {
+    icon: "",
+    title: "呼叫服务",
+    type: Command.callServiceCard,
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
+    title: "更多",
+    type: Command.more,
+  },
+]);
+
+const sendReply = (item) => {
+  // 更多服务
+  if (item.type === Command.more) {
+    uni.$emit("SHOW_MORE_POPUP");
+    return;
+  }
+
+  // 快速预定
+  if (item.type === Command.quickBooking) {
+    checkToken().then(() => {
+      uni.navigateTo({ url: "/pages-quick/list" });
+    });
+    return;
+  }
+
+  // 我的订单
+  if (item.type === Command.myOrder) {
+    checkToken().then(() => {
+      uni.navigateTo({ url: "/pages-order/order/list" });
+    });
+    return;
+  }
+
+  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatQuickAccess/styles/index.scss b/src/pages/home/components/ChatQuickAccess/styles/index.scss
new file mode 100644
index 0000000..cd4b98a
--- /dev/null
+++ b/src/pages/home/components/ChatQuickAccess/styles/index.scss
@@ -0,0 +1,15 @@
+.quick-access {
+  gap: 0 9px;
+}
+
+.item {
+  border: 1px solid #fff;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 4px 12px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
+}
diff --git a/src/pages/home/components/ChatTopNavBar/index.vue b/src/pages/home/components/ChatTopNavBar/index.vue
new file mode 100644
index 0000000..309a4a6
--- /dev/null
+++ b/src/pages/home/components/ChatTopNavBar/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="border-box h-44 flex flex-items-center pl-12 pr-12">
+    <div class="nav-icon-button" @tap.stop="showDrawer">
+      <uni-icons type="bars" size="24" color="#ffffff" />
+    </div>
+
+    <!-- 隐藏 -->
+    <div v-if="false" class="flex-full h-full flex flex-items-center flex-justify-center">
+      <!-- ChatTopWelcome不在可视区：显示并添加动画；在可视区：隐藏  -->
+      <SpriteAnimator v-show="show" class="image-animated" :src="spriteStyle.ipSmallImage"
+        :frameWidth="spriteStyle.frameWidth" :frameHeight="spriteStyle.frameHeight"
+        :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns" :displayWidth="spriteStyle.displayWidth"
+        :fps="16" />
+      <span v-show="show" :class="[
+        'font-size-14 font-500 color-171717 ml-10',
+        { 'text-animated': show },
+      ]">
+        {{ config.name }}
+      </span>
+    </div>
+
+    <div class="w-24 h-24"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineProps, computed, defineExpose } from "vue";
+import { getCurrentConfig } from "@/constant/base";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => ({
+      initPageImages: {},
+    }),
+  },
+});
+
+const initPageImages = computed(() => {
+  return props.mainPageDataModel?.initPageImages || {};
+});
+
+const show = ref(false);
+const config = getCurrentConfig();
+
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    ipSmallImage: images.ipSmallImage ?? config.ipSmallImage,
+    frameWidth: images.ipSmallImageWidth ?? config.ipSmallImageWidth,
+    frameHeight: images.ipSmallImageHeight ?? config.ipSmallImageHeight,
+    totalFrames: images.ipSmallTotalFrames ?? config.ipSmallTotalFrames,
+    columns: images.ipSmallColumns ?? config.ipSmallColumns,
+    displayWidth: 32,
+  };
+});
+
+const emit = defineEmits(["showDrawer"]);
+
+const showDrawer = () => emit("showDrawer");
+
+defineExpose({ show });
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatTopNavBar/styles/index.scss b/src/pages/home/components/ChatTopNavBar/styles/index.scss
new file mode 100644
index 0000000..df589b3
--- /dev/null
+++ b/src/pages/home/components/ChatTopNavBar/styles/index.scss
@@ -0,0 +1,39 @@
+.nav-icon-button {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// 图片从0%到100%动画
+.image-animated {
+  animation: logo-scale 0.3s ease-in-out;
+}
+
+@keyframes logo-scale {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+// 文字从0%到100%动画，从左到右
+.text-animated {
+  animation: text-fade-in 0.3s ease-in-out;
+}
+
+@keyframes text-fade-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
diff --git a/src/pages/home/components/ChatTopWelcome/index.vue b/src/pages/home/components/ChatTopWelcome/index.vue
new file mode 100644
index 0000000..e1b82f0
--- /dev/null
+++ b/src/pages/home/components/ChatTopWelcome/index.vue
@@ -0,0 +1,92 @@
+v
+<template>
+  <div class="welcome-content border-box p-12">
+    <div class="wrap rounded-20">
+      <div class="flex flex-items-center flex-justify-between border-box pl-12 pr-12">
+        <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
+          :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
+          :displayWidth="spriteStyle.displayWidth" :fps="16" />
+        <div class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24">
+          {{ welcomeContent }}
+        </div>
+      </div>
+
+      <ChatMoreTips :guideWords="guideWords" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
+import { getCurrentConfig } from "@/constant/base";
+import ChatMoreTips from "../ChatMoreTips/index.vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        },
+        welcomeContent:
+          "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
+        guideWords: [
+          "定温泉票",
+          "定酒店",
+          "优惠套餐",
+          "亲子玩法",
+          "了解交通",
+          "看看酒店",
+          "看看美食",
+        ],
+      };
+    },
+  },
+});
+
+const initPageImages = computed(() => {
+  return props.mainPageDataModel?.initPageImages || {};
+});
+
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    ipLargeImage: images.ipLargeImage,
+    frameWidth: images.ipLargeImageWidth,
+    frameHeight: images.ipLargeImageHeight,
+    totalFrames: images.ipLargeTotalFrames,
+    columns: images.ipLargeColumns,
+    displayWidth: 158,
+  };
+});
+
+const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
+const guideWords = computed(() => props.mainPageDataModel.guideWords);
+
+// Welcome 可视状态与高度
+const instance = getCurrentInstance();
+
+// 测量欢迎区域高度
+const measureWelcomeHeight = (callback) => {
+  uni
+    .createSelectorQuery()
+    .in(instance)
+    .select(".welcome-content")
+    .boundingClientRect((res) => {
+      if (res && res.height) {
+        callback(res);
+      }
+    })
+    .exec();
+};
+
+defineExpose({ measureWelcomeHeight });
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ChatTopWelcome/styles/index.scss b/src/pages/home/components/ChatTopWelcome/styles/index.scss
new file mode 100644
index 0000000..a73f949
--- /dev/null
+++ b/src/pages/home/components/ChatTopWelcome/styles/index.scss
@@ -0,0 +1,3 @@
+.wrap {
+  background-color: rgba(255, 255, 255, 0.5);
+}
\ No newline at end of file
diff --git a/src/pages/home/components/DetailCardCompontent/index.vue b/src/pages/home/components/DetailCardCompontent/index.vue
new file mode 100644
index 0000000..a642156
--- /dev/null
+++ b/src/pages/home/components/DetailCardCompontent/index.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="w-full pb-12">
+    <template v-if="toolCall.picture && toolCall.picture.length > 0">
+      <ModuleTitle :title="图片详情" />
+      <ImageSwiper :images="toolCall.picture" thumbnailBottom="12px" />
+    </template>
+
+    <template v-if="toolCall.commodityList">
+      <DetailCardGoodsContentList :commodityList="toolCall.commodityList" />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import ImageSwiper from "@/components/ImageSwiper/index.vue";
+import DetailCardGoodsContentList from "../DetailCardGoodsContentList/index.vue";
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: {},
+  },
+});
+</script>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/home/components/DetailCardGoodsContentList/index.vue b/src/pages/home/components/DetailCardGoodsContentList/index.vue
new file mode 100644
index 0000000..1f86b8a
--- /dev/null
+++ b/src/pages/home/components/DetailCardGoodsContentList/index.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="container">
+    <ModuleTitle title="相关商品" />
+
+    <SwipeCards :cardsData="commodityList" />
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+import SwipeCards from "@/components/SwipeCards/index.vue";
+
+const props = defineProps({
+  commodityList: {
+    type: Array,
+    default: [],
+  },
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss b/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss
new file mode 100644
index 0000000..ae4d176
--- /dev/null
+++ b/src/pages/home/components/DetailCardGoodsContentList/styles/index.scss
@@ -0,0 +1,3 @@
+.container {
+  margin: 6px 0 0;
+}
diff --git a/src/pages/home/components/DiscoveryCardComponent/index.vue b/src/pages/home/components/DiscoveryCardComponent/index.vue
new file mode 100644
index 0000000..977ccf8
--- /dev/null
+++ b/src/pages/home/components/DiscoveryCardComponent/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div class="container">
+    <div v-for="item in themeDTOList" :key="item.title">
+      <RecommendPostsList :recommendTheme="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from "vue";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+import { discoveryCradComponent } from "@/request/api/MainPageDataApi";
+import RecommendPostsList from "../RecommendPostsList/index.vue";
+
+const themeDTOList = ref([]);
+
+const loadDiscoveryCradComponent = async () => {
+  const res = await discoveryCradComponent();
+  if (res.code === 0 && res.data) {
+    themeDTOList.value = res.data.themeDTOList;
+
+    nextTick(() => {
+      setTimeout(() => {
+        uni.$emit(SCROLL_TO_BOTTOM, true);
+      }, 300);
+    });
+  }
+};
+
+onMounted(() => {
+  loadDiscoveryCradComponent();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/DiscoveryCardComponent/styles/index.scss b/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
new file mode 100644
index 0000000..9da07fd
--- /dev/null
+++ b/src/pages/home/components/DiscoveryCardComponent/styles/index.scss
@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 12px;
+}
diff --git a/src/pages/home/components/DiscoveryCradContentList/index.vue b/src/pages/home/components/DiscoveryCradContentList/index.vue
new file mode 100644
index 0000000..1295243
--- /dev/null
+++ b/src/pages/home/components/DiscoveryCradContentList/index.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="container">
+    <ModuleTitle :title="recommendTheme.themeName" />
+    <div class="container-scroll">
+      <div v-for="(item, index) in recommendTheme.recommendPostsList" :key="index">
+        <div class="mk-card-item" @click="sendReply(item)">
+          <img class="card-img" :src="item.coverPhoto" mode="widthFix"></img>
+          <span class="card-text">{{ item.topic }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+import { defineProps } from "vue";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
+const props = defineProps({
+  recommendTheme: {
+    type: Object,
+    default: {},
+  },
+});
+
+const sendReply = (item) => {
+  if (item.userInputContentType && item.userInputContentType === '1') {
+    const commonItem = { type: item.userInputContent, title: item.topic }
+    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
+    return;
+  }
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/DiscoveryCradContentList/styles/index.scss b/src/pages/home/components/DiscoveryCradContentList/styles/index.scss
new file mode 100644
index 0000000..d514b5b
--- /dev/null
+++ b/src/pages/home/components/DiscoveryCradContentList/styles/index.scss
@@ -0,0 +1,33 @@
+.container {
+  .container-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    margin-top: 4px;
+
+    .mk-card-item {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 188px;
+      height: 154px;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-right: 8px;
+      position: relative;
+
+      .card-img {
+        width: 188px;
+        height: 112px;
+      }
+
+      .card-text {
+        padding: 12px;
+        text-align: center;
+        font-weight: 500;
+        font-size: $uni-font-size-sm;
+        color: $uni-text-color;
+      }
+    }
+  }
+}
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/index.vue b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
new file mode 100644
index 0000000..472058c
--- /dev/null
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/index.vue
@@ -0,0 +1,113 @@
+<template>
+  <div class="page">
+    <!-- 顶部用户信息 -->
+    <div class="user-card">
+      <div class="row avatar-row">
+        <span class="label">头像 </span>
+        <!-- <image class="avatar" :src="userInfo.avatar" mode="aspectFill" /> -->
+        <uni-icons type="contact" size="40" color="#ccc"></uni-icons>
+      </div>
+      <div class="row">
+        <span class="label">昵称</span>
+        <span class="value">{{ userInfo.nickname }}</span>
+      </div>
+      <div class="row">
+        <span class="label">手机号</span>
+        <span class="value">{{ userInfo.phone }}</span>
+      </div>
+    </div>
+
+    <!-- 中间功能入口（循环渲染） -->
+    <div class="menu-card">
+      <div class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenuClick(item)">
+        <span class="label">{{ item.label }}</span>
+        <uni-icons type="right" size="14" color="#ccc"></uni-icons>
+      </div>
+    </div>
+
+    <!-- 底部退出按钮 -->
+    <span class="logout-btn" @click="handleLogout">退出登录</span>
+  </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineExpose } from "vue";
+import { getLoginUserPhone } from "@/request/api/LoginApi";
+import { NOTICE_EVENT_LOGOUT } from "@/constant/constant";
+import { useAppStore } from "@/store";
+
+const appStore = useAppStore();
+const emits = defineEmits(["close"]);
+
+// 假数据
+const userInfo = ref({
+  avatar: "/static/default-avatar.png",
+  nickname: "微信用户",
+  phone: "",
+});
+
+// 功能菜单列表（带 type 区分操作类型）
+const menuList = ref([
+  // { label: '修改手机号', type: 'navigate', url: '/pages/change-phone/change-phone' },
+  {
+    label: "账号注销",
+    type: "action",
+    url: "cancelAccount",
+  },
+  // { label: '营业资质&协议', type: 'navigate', url: '/pages/agreement/agreement' },
+  // { label: "联系客服", type: "action", action: "contactService" },
+  // { label: "订阅消息", type: "action", action: "subscribeMessage" },
+]);
+
+const getLoginUserPhoneInfo = async () => {
+  const res = await getLoginUserPhone();
+
+  if (res.code === 0) {
+    userInfo.value.phone = res.data;
+  }
+};
+
+// 处理菜单点击
+const handleMenuClick = (item) => {
+  if (item.type === "navigate" && item.url) {
+    uni.navigateTo({ url: item.url });
+  } else if (item.type === "action") {
+    if (item.action === "contactService") {
+      uni.showToast({ title: "联系客服功能待实现", icon: "none" });
+    } else if (item.action === "cancelAccount") {
+      handleLogout();
+    } else if (item.action === "subscribeMessage") {
+      uni.requestSubscribeMessage({
+        tmplIds: ["fMIt1q9GgM3Ep0DJSNgVPm4C3lCpQdz2TediETcv3iM"],
+        success(res) {
+          console.log(res);
+        },
+      });
+    }
+  }
+};
+
+// 退出登录
+const handleLogout = () => {
+  uni.showModal({
+    title: "温馨提示",
+    content: "确定要退出登录吗？",
+    success: (res) => {
+      if (res.confirm) {
+        uni.clearStorageSync();
+        emits("close");
+        uni.$emit(NOTICE_EVENT_LOGOUT);
+        uni.showToast({
+          title: "退出登录成功",
+        });
+      }
+    },
+  });
+};
+
+defineExpose({ getLoginUserPhoneInfo });
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss b/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss
new file mode 100644
index 0000000..16d999e
--- /dev/null
+++ b/src/pages/home/components/DrawerSection/components/MineSetting/styles/index.scss
@@ -0,0 +1,65 @@
+.page {
+  padding: 24rpx;
+  background-color: #f6f6f6;
+  min-height: 100vh;
+}
+
+.user-card,
+.menu-card {
+  background-color: #fff;
+  border-radius: 12rpx;
+  padding-left: 24rpx;
+  margin-bottom: 20rpx;
+}
+
+.row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28rpx 24rpx 28rpx 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.row:last-child {
+  border-bottom: none;
+}
+
+.avatar-row .avatar {
+  width: 80rpx;
+  height: 80rpx;
+  border-radius: 50%;
+}
+
+.label {
+  font-size: 28rpx;
+  color: $uni-text-color;
+}
+
+.value {
+  font-size: 28rpx;
+  color: #666;
+}
+
+.menu-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 28rpx 24rpx 28rpx 0;
+  border-bottom: 1px solid #f0f0f0;
+}
+
+.menu-item:last-child {
+  border-bottom: none;
+}
+
+.logout-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 42px;
+  margin-top: 40px;
+  background-color: #fff;
+  color: $uni-text-color;
+  border-radius: 8rpx;
+  border: none;
+}
diff --git a/src/pages/home/components/DrawerSection/index.vue b/src/pages/home/components/DrawerSection/index.vue
new file mode 100644
index 0000000..5915c6b
--- /dev/null
+++ b/src/pages/home/components/DrawerSection/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <uni-drawer ref="drawerRef" mode="left" :width="320">
+    <div class="drawer-home">
+      <div class="drawer-home-nav">
+        <uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="close" />
+        <span class="title">我的</span>
+      </div>
+
+      <MineSetting ref="mineSettingRef" @close="close" />
+    </div>
+  </uni-drawer>
+</template>
+
+<script setup>
+import { ref, defineExpose } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
+import MineSetting from "./components/MineSetting/index.vue";
+
+const drawerRef = ref(null);
+
+// 监听抽屉显示事件
+const mineSettingRef = ref(null);
+const open = async () => {
+  await checkToken();
+
+  drawerRef.value?.open?.();
+
+  try {
+    await mineSettingRef.value?.getLoginUserPhoneInfo?.();
+  } catch (error) {
+    console.warn("获取登录用户手机号失败:", error);
+  }
+};
+
+// 监听抽屉隐藏事件
+const close = () => drawerRef.value?.close?.();
+
+defineExpose({
+  open,
+  close,
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/DrawerSection/styles/index.scss b/src/pages/home/components/DrawerSection/styles/index.scss
new file mode 100644
index 0000000..b494117
--- /dev/null
+++ b/src/pages/home/components/DrawerSection/styles/index.scss
@@ -0,0 +1,25 @@
+.drawer-home {
+  width: 100%;
+  height: 100vh;
+  background-color: #fff;
+  padding-top: 44px;
+}
+
+.drawer-home-nav {
+  position: relative;
+  padding: 12px;
+  display: flex;
+  justify-content: center; /* 文字水平居中 */
+  align-items: center; /* 垂直居中 */
+
+  .title {
+    font-size: 18px;
+    text-align: center;
+    color: $uni-text-color;
+  }
+
+  .close-icon {
+    position: absolute;
+    left: 12px; /* 距离左边12px */
+  }
+}
diff --git a/src/pages/home/components/FacilityLocationCard/index.vue b/src/pages/home/components/FacilityLocationCard/index.vue
new file mode 100644
index 0000000..0880b35
--- /dev/null
+++ b/src/pages/home/components/FacilityLocationCard/index.vue
@@ -0,0 +1,70 @@
+<template>
+  <div class="facility-location-card bg-white rounded-24 overflow-hidden w-full">
+    <img class="facility-location-card__image block w-full" :src="data.image" mode="aspectFill" />
+
+    <div class="facility-location-card__body px-24 pb-24">
+      <div class="facility-location-card__title-row flex flex-items-center">
+        <div class="facility-location-card__badge color-2563EB bg-EFF6FF font-size-12 font-900">
+          {{ type.text }}
+        </div>
+        <div class="facility-location-card__title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ data.title }}
+        </div>
+      </div>
+
+      <div class="facility-location-card__distance flex flex-items-center color-94A3B8 font-size-14 font-900">
+        <span class="facility-location-card__distance-icon">{{ distance.icon }}</span>
+        <span>{{ distance.text }}</span>
+      </div>
+
+      <div class="facility-location-card__location bg-F8FAFC rounded-20">
+        <div class="facility-location-card__location-label flex flex-items-center color-64748B font-size-13 font-900">
+          <span class="facility-location-card__location-dot">{{ location.icon }}</span>
+          <span>{{ location.label }}</span>
+        </div>
+        <div class="facility-location-card__location-text color-1E293B font-size-16 font-900">
+          {{ location.text }}
+        </div>
+      </div>
+
+      <div
+        class="facility-location-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
+        <span class="facility-location-card__button-icon">{{ action.icon }}</span>
+        <span>{{ action.text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["action", "select"]);
+
+const type = computed(() => props.data.type || {});
+const distance = computed(() => props.data.distance || {});
+const location = computed(() => props.data.location || {});
+const action = computed(() => props.data.action || {});
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("action", props.data);
+  emit("select", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/FacilityLocationCard/mocks.js b/src/pages/home/components/FacilityLocationCard/mocks.js
new file mode 100644
index 0000000..1b6de42
--- /dev/null
+++ b/src/pages/home/components/FacilityLocationCard/mocks.js
@@ -0,0 +1,21 @@
+export default {
+  id: "wolongtan-restroom",
+  title: "卧龙潭公厕",
+  image: "https://images.unsplash.com/photo-1584622650111-993a426fbf0a?auto=format&fit=crop&w=900&q=80",
+  type: {
+    text: "厕所",
+  },
+  distance: {
+    icon: "⌖",
+    text: "距你约 200 米",
+  },
+  location: {
+    icon: "●",
+    label: "所在位置",
+    text: "卧龙潭景点入口右侧",
+  },
+  action: {
+    icon: "↗",
+    text: "带我去",
+  },
+};
diff --git a/src/pages/home/components/FacilityLocationCard/styles/index.scss b/src/pages/home/components/FacilityLocationCard/styles/index.scss
new file mode 100644
index 0000000..ad393fc
--- /dev/null
+++ b/src/pages/home/components/FacilityLocationCard/styles/index.scss
@@ -0,0 +1,87 @@
+.facility-location-card {
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
+  box-sizing: border-box;
+}
+
+.facility-location-card__image {
+  height: 184px;
+}
+
+.facility-location-card__body {
+  padding-top: 28px;
+  box-sizing: border-box;
+}
+
+.facility-location-card__title-row {
+  min-width: 0;
+}
+
+.facility-location-card__badge {
+  height: 30px;
+  margin-right: 12px;
+  padding: 0 12px;
+  border: 1px solid #bfdbfe;
+  border-radius: 10px;
+  line-height: 30px;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.facility-location-card__title {
+  min-width: 0;
+  line-height: 24px;
+}
+
+.facility-location-card__distance {
+  margin-top: 8px;
+  line-height: 18px;
+}
+
+.facility-location-card__distance-icon {
+  margin-right: 5px;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.facility-location-card__location {
+  margin-top: 24px;
+  padding: 18px 20px;
+  box-sizing: border-box;
+}
+
+.facility-location-card__location-label {
+  line-height: 18px;
+}
+
+.facility-location-card__location-dot {
+  margin-right: 8px;
+  color: #ec4899;
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.facility-location-card__location-text {
+  margin-top: 12px;
+  line-height: 22px;
+}
+
+.facility-location-card__button {
+  height: 54px;
+  margin-top: 20px;
+  border-radius: 16px;
+}
+
+.facility-location-card__button:active {
+  opacity: 0.86;
+}
+
+.facility-location-card__button.is-disabled {
+  opacity: 0.55;
+}
+
+.facility-location-card__button-icon {
+  margin-right: 8px;
+  font-size: 19px;
+  line-height: 19px;
+}
diff --git a/src/pages/home/components/FaqHelpCard/index.vue b/src/pages/home/components/FaqHelpCard/index.vue
new file mode 100644
index 0000000..ff1ec5c
--- /dev/null
+++ b/src/pages/home/components/FaqHelpCard/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="faq-help-card bg-white rounded-24 w-full">
+    <div class="faq-help-card__header flex flex-items-center">
+      <div class="faq-help-card__icon flex flex-items-center flex-justify-center rounded-full font-size-16 font-900">
+        {{ data.icon }}
+      </div>
+      <div class="faq-help-card__title color-1E293B font-size-20 font-900">
+        {{ data.title }}
+      </div>
+    </div>
+
+    <div class="faq-help-card__divider"></div>
+
+    <div class="faq-help-card__list">
+      <div v-for="item in questions" :key="item.id || item.text" class="faq-help-card__item flex flex-items-center"
+        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
+        <div class="faq-help-card__question color-475569 font-size-18 font-900 ellipsis-1 flex-full">
+          {{ item.text }}
+        </div>
+        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+const questions = computed(() => props.data.questions || []);
+
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/FaqHelpCard/mocks.js b/src/pages/home/components/FaqHelpCard/mocks.js
new file mode 100644
index 0000000..27c3813
--- /dev/null
+++ b/src/pages/home/components/FaqHelpCard/mocks.js
@@ -0,0 +1,19 @@
+export default {
+  id: "faq-help",
+  icon: "?",
+  title: "您可能还想了解",
+  questions: [
+    {
+      id: "shuttle-time",
+      text: "观光车末班车发车时间",
+    },
+    {
+      id: "power-bank",
+      text: "景区内哪里有共享充电宝",
+    },
+    {
+      id: "pet-policy",
+      text: "可以带宠物入园吗",
+    },
+  ],
+};
diff --git a/src/pages/home/components/FaqHelpCard/styles/index.scss b/src/pages/home/components/FaqHelpCard/styles/index.scss
new file mode 100644
index 0000000..f628fa0
--- /dev/null
+++ b/src/pages/home/components/FaqHelpCard/styles/index.scss
@@ -0,0 +1,54 @@
+.faq-help-card {
+  padding: 34px 30px 26px;
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
+  box-sizing: border-box;
+}
+
+.faq-help-card__header {
+  min-width: 0;
+}
+
+.faq-help-card__icon {
+  width: 22px;
+  height: 22px;
+  margin-right: 10px;
+  border: 2px solid #10b981;
+  color: #10b981;
+  line-height: 18px;
+  box-sizing: border-box;
+}
+
+.faq-help-card__title {
+  line-height: 26px;
+}
+
+.faq-help-card__divider {
+  height: 1px;
+  margin: 24px 0 18px;
+  background: #f1f5f9;
+}
+
+.faq-help-card__item {
+  min-height: 42px;
+}
+
+.faq-help-card__item:active {
+  opacity: 0.86;
+}
+
+.faq-help-card__item.is-disabled {
+  opacity: 0.55;
+}
+
+.faq-help-card__question {
+  min-width: 0;
+  line-height: 24px;
+}
+
+.faq-help-card__arrow {
+  width: 22px;
+  margin-left: 16px;
+  text-align: right;
+  line-height: 24px;
+}
diff --git a/src/pages/home/components/GeneratorPhotoComponent/images/g_image.png b/src/pages/home/components/GeneratorPhotoComponent/images/g_image.png
new file mode 100644
index 0000000..3585b27
Binary files /dev/null and b/src/pages/home/components/GeneratorPhotoComponent/images/g_image.png differ
diff --git a/src/pages/home/components/GeneratorPhotoComponent/images/g_title.png b/src/pages/home/components/GeneratorPhotoComponent/images/g_title.png
new file mode 100644
index 0000000..021d0bf
Binary files /dev/null and b/src/pages/home/components/GeneratorPhotoComponent/images/g_title.png differ
diff --git a/src/pages/home/components/GeneratorPhotoComponent/index.vue b/src/pages/home/components/GeneratorPhotoComponent/index.vue
new file mode 100644
index 0000000..bbd351d
--- /dev/null
+++ b/src/pages/home/components/GeneratorPhotoComponent/index.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="container w-full border-box border-ff overflow-hidden rounded-24 flex flex-col">
+    <!-- 占位撑开 -->
+    <div class="w-vw"></div>
+    <div class="content flex flex-col m-4 border-box rounded-24">
+      <div class="flex flex-col p-6 border-box flex-items-center justify-center">
+        <img class="w-full rounded-20" :src="props.toolCall.componentNameParams.background" mode="widthFix" />
+
+        <!-- 左上角标签 -->
+        <div class="tag">
+          <div class="dot"></div>
+          <span class="tag-text">{{ props.toolCall.componentNameParams.superscript }}</span>
+        </div>
+
+        <img class="g_title mt-20" :src="props.toolCall.componentNameParams.title" />
+
+        <span class="font-size-14 font-400 color-white my-12 text-center">
+          {{ props.toolCall.componentNameParams.description }}
+        </span>
+
+        <div class="w-full border-box px-12 pb-8 flex flex-row" @click="jumpClick">
+          <div class="btn-bg w-full border-box p-4 rounded-24 flex flex-row">
+            <div
+              class="btn-bg-sub w-full border-box p-16 rounded-20 flex flex-row flex-items-center flex-justify-center color-white text-center font-size-18 font-800">
+              {{ props.toolCall.componentNameParams.buttonName }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+</template>
+<script setup>
+import { defineProps, nextTick, onMounted, computed } from "vue";
+import {
+  SCROLL_TO_BOTTOM,
+} from "@/constant/constant";
+import { getAccessToken } from "@/constant/token";
+import { navigateTo } from "@/router";
+
+
+const props = defineProps({
+  toolCall: {
+    type: Object,
+    default: {},
+  },
+});
+
+onMounted(() => {
+  nextTick(() => {
+    setTimeout(() => {
+      uni.$emit(SCROLL_TO_BOTTOM, true);
+    }, 300);
+  });
+});
+
+const jumpClick = () => {
+  const token = getAccessToken();
+  if (props.toolCall.componentNameParams.jumpUrl) {
+    navigateTo(props.toolCall.componentNameParams.jumpUrl, { token: token });
+  }
+};
+
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
\ No newline at end of file
diff --git a/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss b/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
new file mode 100644
index 0000000..16030bb
--- /dev/null
+++ b/src/pages/home/components/GeneratorPhotoComponent/styles/index.scss
@@ -0,0 +1,61 @@
+.container {
+  background: rgba(255, 255, 255, 0.2);
+  box-shadow: 0px 9px 34px 0px rgba(27, 9, 91, 0.07);
+}
+
+.content {
+  background: linear-gradient(180deg, $theme-color-100 0%, #0ccd58 100%);
+  border-radius: 24px 24px 24px 24px;
+  border: 1px solid #ffffff;
+  position: relative;
+}
+
+.g_title {
+  width: 197px;
+  height: 42px;
+}
+
+.btn-bg {
+  background: rgba(255, 255, 255, 0.32);
+  border: 0.66px solid rgba(255, 255, 255, 0.32);
+}
+
+.btn-bg-sub {
+  background: #0ccd58;
+  box-shadow:
+    inset 0px 0px 41px 0px $theme-color-50,
+    inset 0px 0px 15px 0px $theme-color-100;
+}
+
+/* 左上角标签容器 */
+.tag {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+
+  display: flex;
+  align-items: center;
+
+  padding: 4px 8px;
+  border-radius: 999rpx;
+
+  backdrop-filter: blur(6rpx);
+  background: rgba(255, 255, 255, 0.79);
+  box-shadow: inset 0px 1px 2px 0px rgba(255, 255, 255, 0.46);
+}
+
+/* 小绿点 */
+.dot {
+  width: 15px;
+  height: 15px;
+  border-radius: 50%;
+  background: #0ccd58;
+  margin-right: 8px;
+}
+
+/* 文字 */
+.tag-text {
+  font-size: 12px;
+  color: #0ccd58;
+  font-weight: 600;
+}
diff --git a/src/pages/home/components/HomeWelcome/index.vue b/src/pages/home/components/HomeWelcome/index.vue
new file mode 100644
index 0000000..ad30033
--- /dev/null
+++ b/src/pages/home/components/HomeWelcome/index.vue
@@ -0,0 +1,154 @@
+<template>
+  <div class="flex border-box w-full">
+    <div class="flex flex-col flex-full min-width-0 mr-12">
+      <div class="flex flex-row flex-items-center flex-justify-between min-width-0">
+        <span class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{
+          mainPageDataModel.welcomeContent }}</span>
+        <span class="flex-shrink-0 font-size-20 font-600 color-white mt-4"> {{ weatherText }} </span>
+      </div>
+
+      <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
+    </div>
+
+    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
+      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
+      :displayWidth="spriteStyle.displayWidth" :fps="16" />
+  </div>
+</template>
+<script setup>
+import { onMounted, ref } from "vue";
+import { defineProps, computed } from "vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+import NoticeMessage from "../NoticeMessage/index.vue";
+import { getLocalWeather } from "@/request/api/MainPageDataApi";
+
+const weatherText = ref('');
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        }
+      };
+    },
+  },
+});
+
+const initPageImages = computed(() => {
+  return props.mainPageDataModel?.initPageImages || {};
+});
+
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    backgroundImageUrl: images.backgroundImageUrl,
+    ipLargeImage: images.ipLargeImage,
+    frameWidth: images.ipLargeImageWidth,
+    frameHeight: images.ipLargeImageHeight,
+    totalFrames: images.ipLargeTotalFrames,
+    columns: images.ipLargeColumns,
+    displayWidth: 105,
+  };
+});
+
+const getLocalWeatherData = async () => {
+  const res = await getLocalWeather();
+  if (res && res.code === 0) {
+    const { temperature, weather } = res.data;
+    weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
+  }
+}
+
+onMounted(() => {
+  getLocalWeatherData();
+});
+
+const getWeatherEmoji = (text) => {
+  if (weatherTextMap[text]) return weatherTextMap[text];
+  if (text.includes("晴")) return "☀️";
+  if (text.includes("云")) return "☁️";
+  if (text.includes("雨")) return "🌧️";
+  if (text.includes("雷")) return "⛈️";
+  if (text.includes("雪")) return "🌨️";
+  if (text.includes("雾") || text.includes("霾")) return "😷";
+  if (text.includes("风")) return "🌬️";
+  if (text.includes("沙")) return "🌪️";
+  return "❓";
+}
+
+const weatherTextMap = {
+  // 晴 / 云
+  "晴": "☀️",
+  "少云": "🌤️",
+  "晴间多云": "⛅",
+  "多云": "☁️",
+  "阴": "☁️",
+
+  // 风
+  "有风": "🌬️",
+  "平静": "🍃",
+  "微风": "🌬️",
+  "和风": "🌬️",
+  "清风": "🌬️",
+  "强风/劲风": "💨",
+  "疾风": "💨",
+  "大风": "💨",
+  "烈风": "💨",
+  "风暴": "🌪️",
+  "狂爆风": "🌪️",
+  "飓风": "🌀",
+  "龙卷风": "🌪️",
+
+  // 雨
+  "阵雨": "🌦️",
+  "雷阵雨": "⛈️",
+  "雷阵雨并伴有冰雹": "⛈️",
+  "小雨": "🌧️",
+  "中雨": "🌧️",
+  "大雨": "🌧️",
+  "暴雨": "🌧️",
+  "大暴雨": "🌧️",
+  "特大暴雨": "🌧️",
+  "强阵雨": "🌦️",
+  "毛毛雨/细雨": "🌦️",
+
+  // 雪
+  "小雪": "🌨️",
+  "中雪": "🌨️",
+  "大雪": "❄️",
+  "暴雪": "❄️",
+  "雨夹雪": "🌨️",
+  "阵雪": "🌨️",
+
+  // 雾霾 / 沙尘
+  "雾": "🌁",          // 有能见度的雾（城市感）
+  "轻雾": "🌫️",        // 轻微雾气
+  "浓雾": "🌁",        // 更厚的雾（用城市雾更直观）
+  "大雾": "🌁",
+  "强浓雾": "🌁",
+  "特强浓雾": "🌁",
+
+  // 😷 霾（偏污染）
+  "霾": "😷",         // 直接表达空气差（用户感知最强）
+  "中度霾": "😷",
+  "重度霾": "🤢",     // 更严重一点
+  "严重霾": "☠️",     // 极端情况（视觉冲击强）
+
+  "扬沙": "🌪️",
+  "浮尘": "🌪️",
+  "沙尘暴": "🌪️",
+  "强沙尘暴": "🌪️",
+
+  // 特殊
+  "热": "🔥",
+  "冷": "🥶"
+};
+
+</script>
+
+<style scoped></style>
diff --git a/src/pages/home/components/LongTextGuideCard/index.vue b/src/pages/home/components/LongTextGuideCard/index.vue
new file mode 100644
index 0000000..c808e12
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCard/index.vue
@@ -0,0 +1,184 @@
+<template>
+  <div class="long-text-guide-card w-full">
+    <div v-if="mode === 'list'" class="long-text-guide-card__list w-full">
+      <div v-for="item in cards" :key="item.id"
+        class="long-text-guide-card__summary-card bg-white rounded-24 border-box" :class="{ 'is-disabled': disabled }"
+        @click="openDetail(item)">
+        <div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
+          {{ item.badge }}
+        </div>
+        <div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
+          {{ item.title }}
+        </div>
+        <div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
+          {{ item.summary }}
+        </div>
+        <div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
+          <text class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</text>
+          <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="long-text-guide-card__detail-card bg-white rounded-24 border-box overflow-hidden">
+      <div class="long-text-guide-card__detail-header flex flex-items-center border-bottom-F1F5F9">
+        <div class="long-text-guide-card__back flex flex-items-center flex-justify-center rounded-full font-700"
+          @click="closeDetail">
+          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+        </div>
+        <div class="long-text-guide-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ activeItem.title }}
+        </div>
+        <div class="long-text-guide-card__badge long-text-guide-card__detail-badge font-size-12 font-900"
+          :class="`is-${activeItem.badgeTone}`">
+          {{ activeItem.badge }}
+        </div>
+      </div>
+
+      <div class="long-text-guide-card__rich-body">
+        <div v-for="(paragraph, paragraphIndex) in paragraphsBeforeImage" :key="`before-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
+          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`">
+            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
+              {{ segment.text }}
+            </span>
+            <span v-else>{{ segment.text }}</span>
+          </template>
+        </div>
+
+        <image v-if="activeItem.image" class="long-text-guide-card__main-image w-full rounded-14 block"
+          :src="activeItem.image" mode="aspectFill" />
+
+        <div class="long-text-guide-card__section-title color-1E293B font-size-16 font-900">
+          {{ activeItem.sectionTitle }}
+        </div>
+        <div class="long-text-guide-card__tip-block bg-ECFDF5">
+          <div v-for="(tip, index) in activeItem.tips || []" :key="tip"
+            class="long-text-guide-card__tip color-047857 font-size-14 font-800">
+            {{ index + 1 }} {{ tip }}
+          </div>
+        </div>
+
+        <div v-for="(paragraph, paragraphIndex) in paragraphsAfterTips" :key="`after-${paragraphIndex}`"
+          class="long-text-guide-card__paragraph color-475569 font-size-15 font-500">
+          <template v-for="(segment, segmentIndex) in getSegments(paragraph)"
+            :key="`${paragraphIndex}-${segmentIndex}`">
+            <span v-if="segment.highlight" class="long-text-guide-card__highlight font-800">
+              {{ segment.text }}
+            </span>
+            <span v-else>{{ segment.text }}</span>
+          </template>
+        </div>
+      </div>
+
+      <div v-if="activeItem.action?.type === 'map'" class="long-text-guide-card__action-zone">
+        <div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
+          {{ activeItem.action.label }}
+        </div>
+        <div class="long-text-guide-card__map-card rounded-16 overflow-hidden">
+          <div class="long-text-guide-card__map-image-wrap relative">
+            <img class="long-text-guide-card__map-image w-full block" :src="activeItem.action.image"
+              mode="aspectFill" />
+            <div class="long-text-guide-card__map-tag color-white font-size-10 font-900">
+              {{ activeItem.action.tag }}
+            </div>
+          </div>
+          <div class="long-text-guide-card__map-bar flex flex-items-center bg-white">
+            <div class="flex-full">
+              <div class="color-1E293B font-size-15 font-900">{{ activeItem.action.title }}</div>
+              <div class="color-94A3B8 font-size-12 font-800 mt-2">{{ activeItem.action.subtitle }}</div>
+            </div>
+            <div class="long-text-guide-card__nav-btn color-white bg-0F172A font-size-14 font-900"
+              @click="handleAction(activeItem)">
+              {{ activeItem.action.buttonText }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else-if="activeItem.action?.type === 'image'" class="long-text-guide-card__action-zone">
+        <div class="long-text-guide-card__action-label color-94A3B8 font-size-11 font-800">
+          {{ activeItem.action.label }}
+        </div>
+        <div class="long-text-guide-card__photo-card relative" @click="handleAction(activeItem)">
+          <img class="long-text-guide-card__photo-image w-full block" :src="activeItem.action.image"
+            mode="aspectFill" />
+          <div
+            class="long-text-guide-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900">
+            ↗
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back", "action"]);
+
+const selected = ref(null);
+const cards = computed(() => props.data.cards || []);
+const activeItem = computed(() => selected.value || cards.value[0] || {});
+const mode = computed(() => (selected.value ? "detail" : "list"));
+const paragraphsBeforeImage = computed(() => activeItem.value.paragraphs?.slice(0, 1) || []);
+const paragraphsAfterTips = computed(() => activeItem.value.paragraphs?.slice(1) || []);
+
+const openDetail = (item) => {
+  if (props.disabled) return;
+  selected.value = item;
+  emit("select", item);
+};
+
+const closeDetail = () => {
+  selected.value = null;
+  emit("back");
+};
+
+const handleAction = (item) => {
+  if (props.disabled) return;
+  emit("action", item);
+};
+
+const getSegments = (paragraph) => {
+  const text = paragraph?.text || "";
+  const highlights = paragraph?.highlights || [];
+  if (!highlights.length) return [{ text, highlight: false }];
+
+  const segments = [];
+  let cursor = 0;
+
+  highlights.forEach((highlight) => {
+    const start = text.indexOf(highlight, cursor);
+    if (start < 0) return;
+    if (start > cursor) {
+      segments.push({ text: text.slice(cursor, start), highlight: false });
+    }
+    segments.push({ text: highlight, highlight: true });
+    cursor = start + highlight.length;
+  });
+
+  if (cursor < text.length) {
+    segments.push({ text: text.slice(cursor), highlight: false });
+  }
+
+  return segments.length ? segments : [{ text, highlight: false }];
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCard/mocks.js b/src/pages/home/components/LongTextGuideCard/mocks.js
new file mode 100644
index 0000000..0958f38
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCard/mocks.js
@@ -0,0 +1,99 @@
+export default {
+  cards: [
+    {
+      id: "rafting",
+      type: "rafting",
+      badge: "漂流攻略",
+      badgeTone: "amber",
+      title: "漂流必备避坑指南",
+      summary: "全长约2公里，落差高达15米。经过三段激流区，一定要准备好换洗衣物和防水袋...",
+      footer: "点击查看完整攻略",
+      image: "https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=900&q=80",
+      paragraphs: [
+        {
+          text: "漂流全长约 2 公里，落差高达 15 米，全程约 40 分钟。途中经过三段激流区，水流湍急，体验感极强。",
+          highlights: ["2 公里"],
+        },
+        {
+          text: "建议选择 上午场（9:00–11:00），水量充足、气温适宜，避开正午阳光暴晒。",
+          highlights: ["上午场（9:00–11:00）"],
+        },
+      ],
+      sectionTitle: "出发前必备清单",
+      tips: [
+        "换洗衣物装入防水袋，手机务必密封",
+        "穿凉鞋或防滑鞋，禁止拖鞋入场",
+        "贵重物品存入景区寄存柜再下水",
+      ],
+      action: {
+        type: "none",
+      },
+    },
+    {
+      id: "attraction",
+      type: "attraction",
+      badge: "景点介绍",
+      badgeTone: "green",
+      title: "卧龙潭 · 碧绿深潭",
+      summary: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点之一...",
+      footer: "点击查看完整介绍",
+      image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
+      paragraphs: [
+        {
+          text: "卧龙潭因水色碧绿、深不见底而得名，是小七孔景区最具神秘感的景点。潭水终年保持 16–18°C，清澈见底，映出周围青山如镜。",
+          highlights: ["16–18°C"],
+        },
+        {
+          text: "卧龙潭位于游览线路末段，建议安排为 半日游终点，游览完后就近乘观光车返回入口。",
+          highlights: ["半日游终点"],
+        },
+      ],
+      sectionTitle: "游览小贴士",
+      tips: [
+        "雨季水位上涨，观景平台景色最震撼",
+        "潭边栈道湿滑，请穿防滑鞋慢行",
+        "禁止下水游泳，潭深超过 20 米",
+      ],
+      action: {
+        type: "map",
+        label: "带我去这里",
+        tag: "目的地",
+        title: "卧龙潭",
+        subtitle: "步行约 680 米",
+        buttonText: "导航",
+        image: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=900&q=80",
+      },
+    },
+    {
+      id: "photo",
+      type: "photo",
+      badge: "拍照攻略",
+      badgeTone: "blue",
+      title: "古桥晨雾最佳机位",
+      summary: "清晨6:30–8:00是拍摄窗口，雾气在桥面漂浮，光线最柔和，推荐用长焦压缩透视...",
+      footer: "点击查看完整攻略",
+      image: "",
+      paragraphs: [
+        {
+          text: "清晨 6:30–8:00 是拍摄黄金窗口。雾气在桥面缓缓漂浮，配合柔和侧光，层次感极强。",
+          highlights: ["6:30–8:00"],
+        },
+        {
+          text: "推荐站在桥下游约 30 米处的石滩，正对桥拱构图，早晨人少，可以从容布局。",
+          highlights: ["30 米处的石滩"],
+        },
+      ],
+      sectionTitle: "机位参数建议",
+      tips: [
+        "长焦 85mm+ 压缩透视，桥拱与雾气叠加感更强",
+        "低角度蹲拍，水面倒影纳入前景",
+        "光圈 f/5.6–8，保持前后景均清晰",
+      ],
+      action: {
+        type: "image",
+        label: "看机位图",
+        image: "https://images.unsplash.com/photo-1682687982501-1e5898cb8f4b?w=900&q=80",
+      },
+    },
+  ],
+};
diff --git a/src/pages/home/components/LongTextGuideCard/styles/index.scss b/src/pages/home/components/LongTextGuideCard/styles/index.scss
new file mode 100644
index 0000000..4977298
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCard/styles/index.scss
@@ -0,0 +1,185 @@
+.long-text-guide-card__summary-card {
+  min-height: 178px;
+  margin-bottom: 16px;
+  padding: 28px 26px 22px;
+  border: 1px solid rgba(15, 23, 42, 0.04);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-text-guide-card__summary-card:active {
+  transform: scale(0.985);
+}
+
+.long-text-guide-card__summary-card.is-disabled {
+  opacity: 0.55;
+}
+
+.long-text-guide-card__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  line-height: 18px;
+}
+
+.long-text-guide-card__badge.is-amber {
+  color: #d97706;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.long-text-guide-card__badge.is-green {
+  color: #059669;
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.long-text-guide-card__badge.is-blue {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.long-text-guide-card__summary-title {
+  margin-top: 18px;
+  line-height: 24px;
+}
+
+.long-text-guide-card__summary-text {
+  margin-top: 10px;
+  line-height: 22px;
+}
+
+.long-text-guide-card__summary-footer {
+  margin-top: 24px;
+}
+
+.long-text-guide-card__arrow {
+  font-size: 26px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-card {
+  border: 1px solid rgba(15, 23, 42, 0.04);
+}
+
+.long-text-guide-card__detail-header {
+  min-height: 70px;
+  padding: 0 18px 0 20px;
+}
+
+.long-text-guide-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
+  color: #64748b;
+  background: #f2f4f6;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.long-text-guide-card__detail-badge {
+  margin-left: 12px;
+}
+
+.long-text-guide-card__rich-body {
+  padding: 24px 22px 26px;
+}
+
+.long-text-guide-card__paragraph {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.long-text-guide-card__highlight {
+  color: #065f46;
+  background: #ecfdf5;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.long-text-guide-card__main-image {
+  height: 198px;
+  margin-bottom: 24px;
+}
+
+.long-text-guide-card__section-title {
+  margin-bottom: 12px;
+  line-height: 22px;
+}
+
+.long-text-guide-card__tip-block {
+  margin-bottom: 22px;
+  padding: 12px 18px;
+  border-left: 3px solid #34d399;
+  border-radius: 12px;
+}
+
+.long-text-guide-card__tip {
+  line-height: 24px;
+}
+
+.long-text-guide-card__action-zone {
+  border-top: 1px solid #f1f5f9;
+  padding: 16px 20px 20px;
+}
+
+.long-text-guide-card__action-label {
+  margin-bottom: 10px;
+  letter-spacing: 0.6px;
+}
+
+.long-text-guide-card__map-card {
+  border: 1px solid #f1f5f9;
+}
+
+.long-text-guide-card__map-image {
+  height: 138px;
+}
+
+.long-text-guide-card__map-tag {
+  position: absolute;
+  left: 14px;
+  bottom: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.72);
+}
+
+.long-text-guide-card__map-bar {
+  padding: 14px 16px;
+}
+
+.long-text-guide-card__nav-btn {
+  padding: 12px 18px;
+  border-radius: 14px;
+}
+
+.long-text-guide-card__photo-card {
+  min-height: 178px;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.long-text-guide-card__photo-image {
+  height: 178px;
+}
+
+.long-text-guide-card__expand {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  width: 38px;
+  height: 38px;
+  background: rgba(15, 23, 42, 0.36);
+}
diff --git a/src/pages/home/components/LongTextGuideCardPreview/detailRoutes.mjs b/src/pages/home/components/LongTextGuideCardPreview/detailRoutes.mjs
new file mode 100644
index 0000000..e003771
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/detailRoutes.mjs
@@ -0,0 +1,10 @@
+export const DETAIL_ROUTE_BY_TYPE = {
+  longTextCard: "/pages/ChatModule/LongTextGuideCardPrediv/guide",
+  longTextCardScenicSpot: "/pages/ChatModule/LongTextGuideCardPrediv/poi",
+  longTextCardRoute: "/pages/ChatModule/LongTextGuideCardPrediv/route",
+  longTextCardSnap: "/pages/ChatModule/LongTextGuideCardPrediv/photo",
+};
+
+export const getLongTextGuideDetailRoute = (type) => {
+  return DETAIL_ROUTE_BY_TYPE[type] || "";
+};
diff --git a/src/pages/home/components/LongTextGuideCardPreview/guide.vue b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
new file mode 100644
index 0000000..f4fbb3c
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/guide.vue
@@ -0,0 +1,124 @@
+<template>
+  <div class="long-text-detail-page flex flex-col">
+    <TopNavBar title="漂流攻略" background="#E5EFE9" />
+
+    <div class="long-text-detail-scroll" scroll-y>
+      <div class="long-text-detail-content">
+        <div class="long-text-detail-card">
+          <div class="long-text-detail-header">
+            <div class="long-text-detail-title">下水之前，先听小七唠两句</div>
+            <div class="long-text-detail-badge is-amber">漂流攻略</div>
+          </div>
+
+          <div class="long-text-detail-body">
+            <div class="detail-paragraph">
+              卧龙潭的水，是那种一眼就让人想跳进去的绿。
+              <text class="detail-highlight">皮筏艇漂流</text>
+              全程约两公里，三段激流接连而下，水花会结结实实拍在脸上。这趟值得冲，但晕水的朋友得先掂量掂量。
+            </div>
+
+            <img class="detail-main-image"
+              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg" mode="aspectFill" />
+
+            <div class="detail-section-title">下水前，这几样别落下</div>
+            <div class="detail-tip-block">
+              ① 换洗衣服塞进防水袋，手机一定要封好<br />
+              ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br />
+              ③ 贵重东西先存好寄存柜，别揣身上
+            </div>
+
+            <div class="detail-paragraph">
+              小七的私心建议：挑
+              <span class="detail-highlight">上午九点到十一点</span>
+              这一场。水量足、太阳还没毒，漂下来浑身舒坦，不会被晒得发昏。
+            </div>
+
+            <div class="detail-section-title">这些坑，提前绕开</div>
+            <div class="detail-tip-block is-warn">
+              雨后水量猛涨可能临时停漂，出发前先问一句开放状态；现场拖鞋不补租，光脚更危险。
+            </div>
+          </div>
+
+          <div class="detail-action-zone">
+            <div class="detail-action-label">相关票务</div>
+            <div class="detail-product-scroll">
+              <div class="detail-product-row">
+                <div v-for="product in products" :key="product.name" class="detail-product-card">
+                  <img class="detail-product-image" :src="product.img" mode="aspectFill" />
+                  <div class="detail-product-body">
+                    <div v-if="product.saleTag" class="detail-product-tag">
+                      {{ product.saleTag }}
+                    </div>
+                    <div class="detail-product-name">{{ product.name }}</div>
+                    <div class="detail-product-price">
+                      <span class="detail-product-currency">¥</span>{{ product.price }}
+                      <span v-if="product.original" class="detail-product-original">
+                        ¥{{ product.original }}
+                      </span>
+                    </div>
+                    <button class="detail-buy-button" @click="goodsDetail(product)">
+                      立即购买
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-action-label">继续追问</div>
+            <div class="detail-faq-wrap">
+              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+                {{ question }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
+
+const products = [
+  {
+    name: "卧龙潭皮筏艇漂流",
+    img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp1.jpg",
+    price: "50",
+    commodityId: "1032119438058270721",
+  },
+  {
+    name: "鸳鸯湖玻璃船",
+    img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp12.jpg",
+    price: "50",
+    saleTag: "漂完顺路",
+    commodityId: "1032121733894451202",
+  },
+];
+
+const faq = ["几岁的孩子能玩", "会不会全身湿透", "漂完去哪儿歇脚"];
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+const goodsDetail = (item) => {
+  uni.navigateTo({
+    url: `/pages/goods/index?commodityId=${item.commodityId}`,
+  });
+};
+
+const sendReply = (item) => {
+  uni.navigateBack();
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/detail.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/index.vue b/src/pages/home/components/LongTextGuideCardPreview/index.vue
new file mode 100644
index 0000000..0992a4d
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/index.vue
@@ -0,0 +1,105 @@
+<template>
+  <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+    <!-- 占位撑开 -->
+    <div class="w-vw"></div>
+    <div class="flex flex-col px-16 pt-16 pb-12 border-box" @click="openDetail(item)">
+
+      <div class="long-text-guide-card__badge font-size-12 font-900" :class="`is-${item.badgeTone}`">
+        {{ item.badge }}
+      </div>
+
+      <div class="long-text-guide-card__summary-title color-1E293B font-size-18 font-900">
+        {{ item.title }}
+      </div>
+      <div class="long-text-guide-card__summary-text color-94A3B8 font-size-14 font-500 ellipsis-2">
+        {{ item.summary }}
+      </div>
+      <div class="long-text-guide-card__summary-footer flex flex-items-center flex-justify-between">
+        <span class="color-CBD5E1 font-size-12 font-800">{{ item.footer }}</span>
+        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      </div>
+
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { defineProps, computed } from "vue";
+import { getLongTextGuideDetailRoute } from "./detailRoutes.mjs";
+const props = defineProps({
+  componentName: {
+    type: String,
+    default: 'longTextCard',
+  },
+});
+
+const longTextCard = {
+  type: 'longTextCard',
+  badge: "漂流攻略",
+  badgeTone: "amber",
+  title: "下水之前，先听小七唠两句",
+  summary: "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
+  footer: "点击查看完整攻略",
+}
+
+const longTextCardScenicSpot = {
+  type: 'longTextCardScenicSpot',
+  badge: "景点故事",
+  badgeTone: "green",
+  title: "小七孔古桥 · 走了三百年的石拱",
+  summary: "小七孔古桥是一座三百岁的七孔石桥，小七孔的名字就从这儿来…",
+  footer: "点击查看完整介绍",
+}
+
+const longTextCardRoute = {
+  type: 'longTextCardRoute',
+  badge: "路线指引",
+  badgeTone: "violet",
+  title: "漂完卧龙潭，顺道去鸳鸯湖",
+  summary: "卧龙潭到鸳鸯湖坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
+  footer: "点击查看完整路线",
+}
+
+const longTextCardSnap = {
+  type: 'longTextCardSnap',
+  badge: "拍照攻略",
+  badgeTone: "blue",
+  title: "鸳鸯湖玻璃船，这样拍才不亏",
+  summary: "玻璃船拍照，关键是拍水下那抹通透的绿，顺光时段最出片…",
+  footer: "点击查看完整攻略",
+}
+
+const item = computed(() => {
+  switch (props.componentName) {
+    case 'longTextCard':
+      return longTextCard;
+    case 'longTextCardSnap':
+      return longTextCardSnap;
+    case 'longTextCardRoute':
+      return longTextCardRoute;
+    case 'longTextCardScenicSpot':
+      return longTextCardScenicSpot;
+    default:
+      return longTextCard;
+  }
+});
+
+const openDetail = (item) => {
+  const url = getLongTextGuideDetailRoute(item.type);
+  if (!url) {
+    uni.showToast({
+      title: "暂未配置详情页",
+      icon: "none",
+    });
+    return;
+  }
+
+  uni.navigateTo({ url });
+};
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/photo.vue b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
new file mode 100644
index 0000000..723b0cd
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/photo.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="long-text-detail-page flex flex-col">
+    <TopNavBar title="拍照攻略" background="#E5EFE9" />
+
+    <div class="long-text-detail-scroll" scroll-y>
+      <div class="long-text-detail-content">
+        <div class="long-text-detail-card">
+          <div class="long-text-detail-header">
+            <div class="long-text-detail-title">鸳鸯湖玻璃船，这样拍才不亏</div>
+            <div class="long-text-detail-badge is-blue">拍照攻略</div>
+          </div>
+
+          <div class="long-text-detail-body">
+            <div class="detail-paragraph">
+              鸳鸯湖的玻璃船，船底是透明的，水下世界看得清清楚楚。拍照的关键就一句话：
+              <span class="detail-highlight">别只顾着拍人，把水下那抹通透的绿一起收进来。</span>
+            </div>
+
+            <div class="detail-section-title">三个不会错的机位</div>
+            <div class="detail-tip-block">
+              ① 蹲低，贴着透明船底拍，水草和光斑会铺满整个画面<br />
+              ② 船头回拍人物，背景是大片湖光，人物站三分之一处<br />
+              ③ 把手伸进光里，拍水面波纹和指尖，是很灵的细节
+            </div>
+
+            <div class="detail-paragraph">
+              时间上，挑
+              <text class="detail-highlight">上午十点到下午两点</text>
+              的顺光时段。阳光直直照进水里，那种绿才透得出来，阴天和傍晚，水色会闷，差很多。
+            </div>
+
+            <div class="detail-section-title">手机党看这里</div>
+            <div class="detail-tip-block">
+              手机开 0.5x 广角，水面和船一起进画；隔着玻璃拍记得擦干净船底；逆光时手动点一下水面降曝光。
+            </div>
+          </div>
+
+          <div class="detail-action-zone">
+            <div class="detail-action-label">查看机位图</div>
+            <div class="photo-card" @click="predivPhoto">
+              <img class="photo-card-image" :src="photo.thumb" mode="aspectFill" />
+              <div class="photo-card-caption">
+                <div class="photo-card-title">{{ photo.title }}</div>
+                <div class="photo-card-subtitle">{{ photo.sub }}</div>
+              </div>
+              <div class="photo-card-expand">↗</div>
+            </div>
+
+            <div class="detail-action-label">AIGC 合影</div>
+            <div class="detail-action-card">
+              <div class="aigc-cover">
+                <img class="aigc-image" :src="aigc.img" mode="aspectFill" />
+                <div class="aigc-badge">AI 生成</div>
+              </div>
+              <div class="aigc-body">
+                <div class="aigc-title">{{ aigc.name }}</div>
+                <div class="aigc-desc">{{ aigc.desc }}</div>
+                <button class="detail-solid-button aigc-button" @click="jumpAigcClick">
+                  生成我的合影
+                </button>
+              </div>
+            </div>
+
+            <div class="detail-action-label">继续追问</div>
+            <div class="detail-faq-wrap">
+              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+                {{ question }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
+import { getAccessToken } from "@/constant/token";
+import { navigateTo } from "@/router";
+
+const photo = {
+  thumb: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
+  full: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp4.jpg",
+  title: "玻璃船底机位",
+  sub: "蹲低贴船底 · 上午顺光",
+};
+
+const aigc = {
+  name: "鸳鸯湖玻璃船 AIGC 合影",
+  img: "https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/20260526101238_396_809.png",
+  desc: "上船拍一张，小七帮你一键生成专属合影，不用求人也不用自拍杆。",
+};
+
+const faq = ["几点光线最好", "船上能站起来拍吗", "穿什么颜色上镜"];
+
+const predivPhoto = () => {
+  uni.predivImage({
+    current: photo.full,
+    urls: [photo.full],
+  });
+};
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+const jumpAigcClick = () => {
+  const token = getAccessToken();
+  navigateTo('https://onefeel.brother7.cn/aigc/#/home', { token: token });
+
+};
+
+const sendReply = (item) => {
+  uni.navigateBack();
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/detail.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/poi.vue b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
new file mode 100644
index 0000000..6be2ef5
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/poi.vue
@@ -0,0 +1,115 @@
+<template>
+  <div class="long-text-detail-page flex flex-col">
+    <TopNavBar title="景点故事" background="#E5EFE9" />
+
+    <div class="long-text-detail-scroll" scroll-y>
+      <div class="long-text-detail-content">
+        <div class="long-text-detail-card">
+          <div class="long-text-detail-header">
+            <div class="long-text-detail-title">小七孔古桥 · 走了三百年的石拱</div>
+            <div class="long-text-detail-badge is-emerald">景点故事</div>
+          </div>
+
+          <div class="long-text-detail-body">
+            <div class="detail-paragraph">
+              小七孔古桥静静卧在响水河上，七个石拱挨着排开，桥身爬满青苔藤蔓。它建于清道光年间，
+              <text class="detail-highlight">三百多岁</text>
+              了。整个景区的名字，就是从这座桥来的。
+            </div>
+
+            <img class="detail-main-image"
+              src="https://one-feel-config-images-bucket.oss-cn-chengdu.aliyuncs.com/comp2.jpg" mode="aspectFill" />
+
+            <div class="detail-section-title">站在这儿，看什么</div>
+            <div class="detail-tip-block">
+              ① 桥拱与水面倒影合成完整的圆，这是古桥最经典的一眼<br />
+              ② 桥身的青苔和藤蔓，是三百年时间慢慢长出来的<br />
+              ③ 桥下水浅处清澈见底，能看见鹅卵石和游鱼
+            </div>
+
+            <div class="detail-paragraph">
+              小七的建议：别急着走过去。先在桥侧站一会儿，古桥不是用来打卡的，是用来
+              <span class="detail-highlight">慢慢看</span>
+              的。光线斜下来的时候，石桥、绿水、倒影会一起把你框进画里。
+            </div>
+
+            <div class="detail-section-title">顺带一提</div>
+            <div class="detail-tip-block is-warn">
+              桥面是三百年的老石头，雨后偏滑，慢点走；别翻护栏到桥下浅滩，既危险也伤桥。
+            </div>
+          </div>
+
+          <div class="detail-action-zone">
+            <div class="detail-action-label">查看景点详情</div>
+            <div class="detail-action-card is-raised" @click="showToast('跳转 H5 景点详情页：小七孔古桥')">
+              <div class="poi-mini-tag">核心地标</div>
+              <div class="poi-mini-body">
+                <div class="poi-mini-title">小七孔古桥</div>
+                <div class="poi-mini-desc">
+                  清道光年间建的七孔石桥，响水河上的镇景之宝，小七孔之名由此而来，桥畔可观涵碧潭。
+                </div>
+                <button class="detail-solid-button" @click.stop="openMap">
+                  带我去
+                </button>
+              </div>
+            </div>
+
+            <div class="detail-action-label">继续追问</div>
+            <div class="detail-faq-wrap">
+              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+                {{ question }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
+
+const faq = ["古桥有什么传说", "最佳观赏时间", "旁边还有什么景点"];
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+// 打开地图
+const openMap = () => {
+  const address = '小七孔古桥';
+  const latitude = 25.248714;
+  const longitude = 107.745735;
+
+  uni.getLocation({
+    type: "gcj02", //返回可以用于uni.openLocation的经纬度
+    success: (res) => {
+      console.log("当前经纬度", latitude, longitude);
+
+      uni.openLocation({
+        latitude: latitude,
+        longitude: longitude,
+        address: address,
+        success: () => {
+          console.log("success");
+        },
+      });
+    },
+  });
+};
+
+const sendReply = (item) => {
+  uni.navigateBack();
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/detail.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/route.vue b/src/pages/home/components/LongTextGuideCardPreview/route.vue
new file mode 100644
index 0000000..b6b627b
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/route.vue
@@ -0,0 +1,143 @@
+<template>
+  <div class="long-text-detail-page flex flex-col">
+    <TopNavBar title="路线指引" background="#E5EFE9" />
+
+    <div class="long-text-detail-scroll" scroll-y>
+      <div class="long-text-detail-content">
+        <div class="long-text-detail-card">
+          <div class="long-text-detail-header">
+            <div class="long-text-detail-title">漂完卧龙潭，顺道去鸳鸯湖</div>
+            <div class="long-text-detail-badge is-violet">路线指引</div>
+          </div>
+
+          <div class="long-text-detail-body">
+            <div class="detail-paragraph">
+              漂完卧龙潭，人多半是湿着、累着的。这时候去鸳鸯湖刚刚好。坐观光车顺路不绕，二十分钟左右就到。
+            </div>
+
+            <div class="detail-section-title">鸳鸯湖分上下湖，先选好玩哪个</div>
+            <div class="detail-paragraph">
+              鸳鸯湖不是一个码头，它分成上下两个湖，玩的船不一样，
+              <span class="detail-highlight">下车站点也不同</span>
+              ，上车前先选好。
+            </div>
+
+            <div class="route-vs-wrap">
+              <div class="route-vs-col">
+                <div class="route-vs-head">上湖 · 鸳湖</div>
+                <div class="route-vs-boat" style="color: #2563eb">玻璃船 ¥50</div>
+                <div class="route-vs-row">
+                  透明船底，<span class="route-vs-bold">适合拍照</span>
+                </div>
+                <div class="route-vs-row">带老人孩子图轻松</div>
+                <div class="route-vs-row">
+                  在 <span class="route-vs-bold">鸳鸯湖上湖站</span> 下车
+                </div>
+              </div>
+
+              <div class="route-vs-col">
+                <div class="route-vs-head">下湖 · 鸯湖</div>
+                <div class="route-vs-boat" style="color: #059669">铁皮船 ¥30</div>
+                <div class="route-vs-row">自己划，1-6 人一船</div>
+                <div class="route-vs-row">
+                  <span class="route-vs-bold">水上迷宫</span>穿林，更有乐趣
+                </div>
+                <div class="route-vs-row">
+                  在 <span class="route-vs-bold">鸳鸯湖站</span> 下车，再走 4 分钟
+                </div>
+              </div>
+            </div>
+
+            <div class="detail-paragraph">时间够的话两个湖都能玩，中间有观光车接驳。</div>
+
+            <div class="detail-section-title">路上留个心</div>
+            <div class="detail-tip-block is-warn">
+              ① 旺季观光车要排队，上午人最多<br />
+              ② 下湖枯水期水位低，水上迷宫游线可能关闭，购票前先问一句<br />
+              ③ 雨天石板路偏滑，带孩子老人慢一点
+            </div>
+          </div>
+
+          <div class="detail-action-zone">
+            <div class="detail-action-label">完整路线</div>
+            <div class="route-step-card">
+              <div class="route-step-title">卧龙潭 → 鸳鸯湖 · 看准上下湖</div>
+              <div v-for="(step, index) in steps" :key="step.act" class="route-step">
+                <div class="route-step-index">{{ index + 1 }}</div>
+                <div class="route-step-main">
+                  <div class="route-step-act">{{ step.act }}</div>
+                  <div class="route-step-meta">{{ step.meta }}</div>
+                </div>
+              </div>
+            </div>
+
+            <div class="route-step-card">
+              <div class="route-step-title">沿途设施</div>
+              <div v-for="facility in facilities" :key="facility.label" class="facility-row">
+                <div class="facility-label">{{ facility.label }}</div>
+                <div>{{ facility.text }}</div>
+              </div>
+            </div>
+
+            <div class="detail-action-label">继续追问</div>
+            <div class="detail-faq-wrap">
+              <div v-for="question in faq" :key="question" class="detail-faq-chip" @click="sendReply(question)">
+                {{ question }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
+
+const steps = [
+  {
+    act: "卧龙潭码头 → 卧龙潭站",
+    meta: "步行约 5 分钟 · 认准观光车乘车点",
+  },
+  {
+    act: "上车前先认准方向：去上湖 or 下湖",
+    meta: "两个湖站点不同，排队通道也不同，别走错",
+  },
+  {
+    act: "A·去上湖玩玻璃船 → 鸳鸯湖上湖站下车",
+    meta: "车程约 6 分钟 · 玻璃船 ¥50/人",
+  },
+  {
+    act: "B·去下湖玩铁皮船 → 鸳鸯湖站下车",
+    meta: "车程约 12 分钟 · 下车再步行 4 分钟 · 铁皮船 ¥30/人",
+  },
+];
+
+const facilities = [
+  { label: "换洗", text: "卧龙潭站 · 洗手间 + 换洗寄存点" },
+  { label: "休息", text: "鸳鸯湖上湖 · 美食驿站 + 休息亭" },
+  { label: "补给", text: "鸳鸯湖站 · 美食驿站 + 充电宝租赁" },
+  { label: "卫生间", text: "下湖卫生间在景点处，上湖卫生间在售票处前 150m" },
+];
+
+const faq = ["上湖下湖哪个好玩", "玻璃船和铁皮船怎么选", "两个湖都玩来得及吗"];
+
+const showToast = (title) => {
+  uni.showToast({
+    title,
+    icon: "none",
+  });
+};
+
+const sendReply = (item) => {
+  uni.navigateBack();
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
+};
+
+</script>
+
+<style scoped lang="scss">
+@import "./styles/detail.scss";
+</style>
diff --git a/src/pages/home/components/LongTextGuideCardPreview/styles/detail.scss b/src/pages/home/components/LongTextGuideCardPreview/styles/detail.scss
new file mode 100644
index 0000000..1764faa
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/styles/detail.scss
@@ -0,0 +1,530 @@
+.long-text-detail-page {
+  height: 100vh;
+  overflow: hidden;
+  background: #e5efe9;
+}
+
+.long-text-detail-scroll {
+  flex: 1;
+  min-height: 0;
+}
+
+.long-text-detail-content {
+  box-sizing: border-box;
+}
+
+.long-text-detail-card {
+  overflow: hidden;
+}
+
+.long-text-detail-header {
+  padding: 16px 18px 14px;
+  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.long-text-detail-title {
+  color: #1e293b;
+  font-size: 18px;
+  font-weight: 900;
+  line-height: 26px;
+}
+
+.long-text-detail-badge {
+  display: inline-flex;
+  width: fit-content;
+  min-height: 24px;
+  margin-top: 10px;
+  padding: 0 10px;
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 900;
+  line-height: 18px;
+}
+
+.long-text-detail-badge.is-amber {
+  color: #d97706;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.long-text-detail-badge.is-emerald {
+  color: #047857;
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.long-text-detail-badge.is-violet {
+  color: #7c3aed;
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+}
+
+.long-text-detail-badge.is-blue {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.long-text-detail-body {
+  padding: 18px 18px 4px;
+}
+
+.detail-paragraph {
+  margin-bottom: 14px;
+  color: #475569;
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.detail-highlight {
+  padding: 1px 5px;
+  border-radius: 4px;
+  color: #065f46;
+  background: #ecfdf5;
+  font-weight: 900;
+}
+
+.detail-section-title {
+  margin: 18px 0 8px;
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 20px;
+}
+
+.detail-main-image {
+  width: 100%;
+  height: 160px;
+  margin: 4px 0 16px;
+  border-radius: 14px;
+  background: #f1f5f9;
+}
+
+.detail-tip-block {
+  margin: 4px 0 16px;
+  padding: 10px 14px;
+  border-left: 3px solid #34d399;
+  border-radius: 12px;
+  color: #065f46;
+  background: #f0fdf4;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 22px;
+}
+
+.detail-tip-block.is-warn {
+  color: #92400e;
+  background: #fffbeb;
+  border-left-color: #fbbf24;
+}
+
+.detail-action-zone {
+  margin-top: 4px;
+  padding-bottom: 20px;
+  border-top: 1px solid rgba(15, 23, 42, 0.06);
+}
+
+.detail-action-label {
+  padding: 12px 18px 8px;
+  color: #94a3b8;
+  font-size: 10px;
+  font-weight: 900;
+  letter-spacing: 0.6px;
+  line-height: 16px;
+}
+
+.detail-action-card {
+  margin: 0 16px 12px;
+  overflow: hidden;
+  border: 1px solid #f1f5f9;
+  border-radius: 16px;
+  background: #fff;
+}
+
+.detail-action-card.is-raised {
+  border-radius: 24px;
+  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
+}
+
+.poi-mini-tag {
+  display: inline-flex;
+  width: fit-content;
+  margin: 14px 0 0 14px;
+  padding: 4px 10px;
+  align-items: center;
+  border-radius: 8px;
+  color: #059669;
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.poi-mini-body {
+  padding: 10px 20px 16px;
+}
+
+.poi-mini-title {
+  margin-bottom: 10px;
+  color: #1e293b;
+  font-size: 19px;
+  font-weight: 900;
+  line-height: 26px;
+}
+
+.poi-mini-desc {
+  margin-bottom: 12px;
+  padding: 10px 12px;
+  border: 1px solid rgba(167, 243, 208, 0.5);
+  border-radius: 12px;
+  color: #065f46;
+  background: linear-gradient(to right, #ecfdf5, rgba(240, 253, 250, 0.5));
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 20px;
+}
+
+.detail-solid-button {
+  width: 100%;
+  height: 42px;
+  padding: 0;
+  border: 0;
+  border-radius: 14px;
+  color: #fff;
+  background: #0f172a;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 42px;
+}
+
+.detail-solid-button::after {
+  border: 0;
+}
+
+.detail-product-scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.detail-product-row {
+  display: flex;
+  gap: 10px;
+  padding: 0 16px 2px;
+}
+
+.detail-product-card {
+  width: 220px;
+  flex-shrink: 0;
+  overflow: hidden;
+  border: 1px solid #f1f5f9;
+  border-radius: 20px;
+  background: #fff;
+  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.04);
+}
+
+.detail-product-image {
+  width: 100%;
+  height: 110px;
+  background: #f1f5f9;
+}
+
+.detail-product-body {
+  padding: 10px 12px 12px;
+}
+
+.detail-product-tag {
+  display: inline-flex;
+  width: fit-content;
+  margin-bottom: 4px;
+  padding: 2px 6px;
+  border-radius: 6px;
+  color: #f43f5e;
+  background: #fef2f2;
+  font-size: 9px;
+  font-weight: 900;
+}
+
+.detail-product-name {
+  overflow: hidden;
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 20px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.detail-product-price {
+  margin: 4px 0 8px;
+  color: #f43f5e;
+  font-size: 20px;
+  font-weight: 900;
+  line-height: 26px;
+}
+
+.detail-product-currency {
+  font-size: 12px;
+}
+
+.detail-product-original {
+  margin-left: 4px;
+  color: #cbd5e1;
+  font-size: 11px;
+  font-weight: 700;
+  text-decoration: line-through;
+}
+
+.detail-buy-button {
+  width: 100%;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 12px;
+  color: #451a03;
+  background: #fbbf24;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 34px;
+}
+
+.detail-buy-button::after {
+  border: 0;
+}
+
+.detail-faq-wrap {
+  margin: 0 16px;
+}
+
+.detail-faq-chip {
+  display: inline-flex;
+  margin: 0 6px 8px 0;
+  padding: 8px 13px;
+  border: 1px solid #e2e8f0;
+  border-radius: 20px;
+  color: #475569;
+  background: #fff;
+  font-size: 11.5px;
+  font-weight: 800;
+  line-height: 16px;
+}
+
+.route-vs-wrap {
+  display: flex;
+  gap: 8px;
+  margin: 6px 0 16px;
+}
+
+.route-vs-col {
+  flex: 1;
+  padding: 11px 12px;
+  border: 1px solid #e8edf2;
+  border-radius: 12px;
+  background: #f8fafc;
+}
+
+.route-vs-head {
+  margin-bottom: 8px;
+  padding-bottom: 7px;
+  border-bottom: 1px dashed #d8e0e8;
+  color: #1e293b;
+  font-size: 12px;
+  font-weight: 900;
+  line-height: 18px;
+}
+
+.route-vs-boat {
+  margin-bottom: 7px;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 18px;
+}
+
+.route-vs-row {
+  margin-bottom: 5px;
+  color: #64748b;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 17px;
+}
+
+.route-vs-bold {
+  color: #334155;
+  font-weight: 900;
+}
+
+.route-step-card {
+  margin: 0 16px 12px;
+  padding: 14px 16px;
+  border: 1px solid rgba(15, 23, 42, 0.07);
+  border-radius: 16px;
+  background: #fff;
+}
+
+.route-step-title {
+  margin-bottom: 12px;
+  color: #1e293b;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 20px;
+}
+
+.route-step {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.route-step:last-child {
+  margin-bottom: 0;
+}
+
+.route-step-index {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  color: #fff;
+  background: #8b5cf6;
+  font-size: 10px;
+  font-weight: 900;
+  line-height: 18px;
+  text-align: center;
+}
+
+.route-step-main {
+  flex: 1;
+}
+
+.route-step-act {
+  color: #334155;
+  font-size: 12px;
+  font-weight: 800;
+  line-height: 18px;
+}
+
+.route-step-meta {
+  margin-top: 1px;
+  color: #94a3b8;
+  font-size: 10.5px;
+  font-weight: 700;
+  line-height: 16px;
+}
+
+.facility-row {
+  display: flex;
+  gap: 8px;
+  padding: 5px 0;
+  color: #475569;
+  font-size: 11.5px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.facility-label {
+  width: 52px;
+  flex-shrink: 0;
+  color: #7c3aed;
+  font-weight: 900;
+}
+
+.photo-card {
+  position: relative;
+  margin: 0 16px 12px;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.photo-card-image {
+  width: 100%;
+  height: 200px;
+  background: #f1f5f9;
+}
+
+.photo-card-caption {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 28px 14px 12px;
+  background: linear-gradient(to top, rgba(15, 23, 42, 0.58), rgba(15, 23, 42, 0));
+}
+
+.photo-card-title {
+  color: #fff;
+  font-size: 13px;
+  font-weight: 900;
+  line-height: 18px;
+}
+
+.photo-card-subtitle {
+  margin-top: 2px;
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 11px;
+  font-weight: 700;
+  line-height: 16px;
+}
+
+.photo-card-expand {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  border-radius: 50%;
+  color: #fff;
+  background: rgba(15, 23, 42, 0.38);
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 30px;
+  text-align: center;
+}
+
+.aigc-image {
+  width: 100%;
+  height: 160px;
+  background: #f1f5f9;
+}
+
+.aigc-cover {
+  position: relative;
+}
+
+.aigc-badge {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  padding: 4px 10px;
+  border-radius: 10px;
+  color: #fff;
+  background: linear-gradient(135deg, #8b5cf6, #6366f1);
+  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.35);
+  font-size: 10px;
+  font-weight: 900;
+}
+
+.aigc-body {
+  padding: 12px 14px 14px;
+}
+
+.aigc-title {
+  color: #1e293b;
+  font-size: 15px;
+  font-weight: 900;
+  line-height: 22px;
+}
+
+.aigc-desc {
+  margin: 5px 0 12px;
+  color: #64748b;
+  font-size: 11.5px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+.aigc-button {
+  background: linear-gradient(135deg, #8b5cf6, #6366f1);
+}
diff --git a/src/pages/home/components/LongTextGuideCardPreview/styles/index.scss b/src/pages/home/components/LongTextGuideCardPreview/styles/index.scss
new file mode 100644
index 0000000..4842da1
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/styles/index.scss
@@ -0,0 +1,192 @@
+.long-text-guide-card__summary-card {
+  min-height: 178px;
+  margin-bottom: 16px;
+  padding: 28px 26px 22px;
+  border: 1px solid rgba(15, 23, 42, 0.04);
+  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04);
+  transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.long-text-guide-card__summary-card:active {
+  transform: scale(0.985);
+}
+
+.long-text-guide-card__summary-card.is-disabled {
+  opacity: 0.55;
+}
+
+.long-text-guide-card__badge {
+  display: inline-flex;
+  width: fit-content;
+  align-items: center;
+  justify-content: center;
+  min-height: 26px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  line-height: 18px;
+}
+
+.long-text-guide-card__badge.is-amber {
+  color: #d97706;
+  background: #fffbeb;
+  border-color: #fde68a;
+}
+
+.long-text-guide-card__badge.is-green {
+  color: #059669;
+  background: #ecfdf5;
+  border-color: #a7f3d0;
+}
+
+.long-text-guide-card__badge.is-violet {
+  color: #7c3aed;
+  background: #f5f3ff;
+  border-color: #ddd6fe;
+}
+
+.long-text-guide-card__badge.is-blue {
+  color: #2563eb;
+  background: #eff6ff;
+  border-color: #bfdbfe;
+}
+
+.long-text-guide-card__summary-title {
+  margin-top: 18px;
+  line-height: 24px;
+}
+
+.long-text-guide-card__summary-text {
+  margin-top: 10px;
+  line-height: 22px;
+}
+
+.long-text-guide-card__summary-footer {
+  margin-top: 24px;
+}
+
+.long-text-guide-card__arrow {
+  font-size: 26px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-card {
+  border: 1px solid rgba(15, 23, 42, 0.04);
+}
+
+.long-text-guide-card__detail-header {
+  min-height: 70px;
+  padding: 0 18px 0 20px;
+}
+
+.long-text-guide-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
+  color: #64748b;
+  background: #f2f4f6;
+  font-size: 24px;
+  line-height: 1;
+}
+
+.long-text-guide-card__detail-title {
+  flex: 1;
+  min-width: 0;
+}
+
+.long-text-guide-card__detail-badge {
+  margin-left: 12px;
+}
+
+.long-text-guide-card__rich-body {
+  padding: 24px 22px 26px;
+}
+
+.long-text-guide-card__paragraph {
+  margin-bottom: 20px;
+  line-height: 30px;
+}
+
+.long-text-guide-card__highlight {
+  color: #065f46;
+  background: #ecfdf5;
+  padding: 1px 6px;
+  border-radius: 4px;
+}
+
+.long-text-guide-card__main-image {
+  height: 198px;
+  margin-bottom: 24px;
+}
+
+.long-text-guide-card__section-title {
+  margin-bottom: 12px;
+  line-height: 22px;
+}
+
+.long-text-guide-card__tip-block {
+  margin-bottom: 22px;
+  padding: 12px 18px;
+  border-left: 3px solid #34d399;
+  border-radius: 12px;
+}
+
+.long-text-guide-card__tip {
+  line-height: 24px;
+}
+
+.long-text-guide-card__action-zone {
+  border-top: 1px solid #f1f5f9;
+  padding: 16px 20px 20px;
+}
+
+.long-text-guide-card__action-label {
+  margin-bottom: 10px;
+  letter-spacing: 0.6px;
+}
+
+.long-text-guide-card__map-card {
+  border: 1px solid #f1f5f9;
+}
+
+.long-text-guide-card__map-image {
+  height: 138px;
+}
+
+.long-text-guide-card__map-tag {
+  position: absolute;
+  left: 14px;
+  bottom: 12px;
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: rgba(15, 23, 42, 0.72);
+}
+
+.long-text-guide-card__map-bar {
+  padding: 14px 16px;
+}
+
+.long-text-guide-card__nav-btn {
+  padding: 12px 18px;
+  border-radius: 14px;
+}
+
+.long-text-guide-card__photo-card {
+  min-height: 178px;
+  overflow: hidden;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.long-text-guide-card__photo-image {
+  height: 178px;
+}
+
+.long-text-guide-card__expand {
+  position: absolute;
+  right: 14px;
+  bottom: 14px;
+  width: 38px;
+  height: 38px;
+  background: rgba(15, 23, 42, 0.36);
+}
diff --git a/src/pages/home/components/LongTextGuideCardPreview/长文本收纳组件_4类演示.html b/src/pages/home/components/LongTextGuideCardPreview/长文本收纳组件_4类演示.html
new file mode 100644
index 0000000..0abff15
--- /dev/null
+++ b/src/pages/home/components/LongTextGuideCardPreview/长文本收纳组件_4类演示.html
@@ -0,0 +1,1384 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="divport" content="width=device-width, initial-scale=1.0" />
+    <title>长文本收纳组件 · 4 类演示</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+      body {
+        background: #e5efe9;
+        font-family:
+          -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
+        padding: 24px 16px;
+      }
+      @keyframes fade-in-up {
+        from {
+          opacity: 0;
+          transform: translateY(12px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+      .animate-fade-in-up {
+        animation: fade-in-up 0.4s ease both;
+      }
+
+      /* ── page slide ── */
+      .c0-screen {
+        position: relative;
+        overflow: hidden;
+      }
+      .c0-page {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .c0-page.p1 {
+        transform: translateX(0);
+      }
+      .c0-page.p2 {
+        transform: translateX(100%);
+      }
+      .c0-page.p1.out {
+        transform: translateX(-100%);
+      }
+      .c0-page.p2.in {
+        transform: translateX(0);
+      }
+
+      /* ── p1 summary card ── */
+      .p1-card {
+        background: #fff;
+        border-radius: 24px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        overflow: hidden;
+        cursor: pointer;
+        transition: transform 0.15s;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .p1-card:active {
+        transform: scale(0.98);
+      }
+
+      /* ── p2 wrap ── */
+      .p2-wrap {
+        background: #fff;
+        border-radius: 24px;
+        border: 1px solid rgba(0, 0, 0, 0.06);
+        overflow: hidden;
+      }
+      .p2-header {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 14px 16px 12px;
+        border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
+      }
+      .back-btn {
+        width: 28px;
+        height: 28px;
+        border-radius: 50%;
+        background: #f2f2f2;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        font-size: 18px;
+        line-height: 1;
+        color: #555;
+        transition: background 0.15s;
+        flex-shrink: 0;
+        -webkit-tap-highlight-color: transparent;
+      }
+      .back-btn:active {
+        background: #ddd;
+      }
+
+      /* ── rich body ── */
+      .rich-body {
+        padding: 18px 18px 4px;
+      }
+      .rich-body p {
+        font-size: 13px;
+        color: #475569;
+        line-height: 1.85;
+        font-weight: 500;
+        margin-bottom: 14px;
+      }
+      .rich-body strong {
+        color: #065f46;
+        background: #ecfdf5;
+        padding: 1px 5px;
+        border-radius: 4px;
+        font-weight: 800;
+      }
+      .rich-body h5 {
+        font-size: 13px;
+        font-weight: 800;
+        color: #1e293b;
+        margin: 18px 0 8px;
+      }
+      .rich-img {
+        width: 100%;
+        border-radius: 14px;
+        object-fit: cover;
+        margin: 4px 0 16px;
+        display: block;
+        height: 160px;
+      }
+      .tip-block {
+        background: #f0fdf4;
+        border-radius: 12px;
+        border-left: 3px solid #34d399;
+        padding: 10px 14px;
+        margin: 4px 0 16px;
+        font-size: 12px;
+        color: #065f46;
+        font-weight: 700;
+        line-height: 1.7;
+      }
+      .tip-block.warn {
+        background: #fffbeb;
+        border-left-color: #fbbf24;
+        color: #92400e;
+      }
+
+      /* ── 双栏对照卡（上下湖对比专用）── */
+      .vs-wrap {
+        display: flex;
+        gap: 8px;
+        margin: 6px 0 16px;
+      }
+      .vs-col {
+        flex: 1;
+        background: #f8fafc;
+        border: 1px solid #e8edf2;
+        border-radius: 12px;
+        padding: 11px 12px;
+      }
+      .vs-col .vs-head {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 12px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 8px;
+        padding-bottom: 7px;
+        border-bottom: 1px dashed #d8e0e8;
+      }
+      .vs-col .vs-dot {
+        width: 7px;
+        height: 7px;
+        border-radius: 50%;
+        flex-shrink: 0;
+      }
+      .vs-col .vs-row {
+        font-size: 11px;
+        font-weight: 600;
+        color: #64748b;
+        line-height: 1.5;
+        margin-bottom: 5px;
+      }
+      .vs-col .vs-row:last-child {
+        margin-bottom: 0;
+      }
+      .vs-col .vs-row b {
+        color: #334155;
+        font-weight: 800;
+      }
+      .vs-col .vs-boat {
+        font-size: 13px;
+        font-weight: 900;
+        margin-bottom: 7px;
+      }
+
+      /* ── action zone shell ── */
+      .action-zone {
+        border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+        margin-top: 4px;
+      }
+      .action-zone-label {
+        font-size: 10px;
+        font-weight: 800;
+        color: #94a3b8;
+        letter-spacing: 0.6px;
+        text-transform: uppercase;
+        padding: 12px 18px 8px;
+      }
+      .action-zone-bottom {
+        height: 20px;
+      }
+
+      /* ── C1 景点详情 mini ── */
+      .c1-mini {
+        margin: 0 16px;
+        background: #fff;
+        border-radius: 24px;
+        overflow: hidden;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+        border: 1px solid #f1f5f9;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 0.15s;
+      }
+      .c1-mini:active {
+        transform: scale(0.98);
+      }
+      .c1-mini .c1-tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        background: rgba(255, 255, 255, 0.9);
+        color: #059669;
+        font-size: 10px;
+        font-weight: 900;
+        padding: 4px 10px;
+        border-radius: 8px;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+        margin: 14px 0 0 14px;
+        width: fit-content;
+      }
+      .c1-mini .c1-body {
+        padding: 10px 20px 16px;
+      }
+      .c1-mini .c1-title {
+        font-size: 19px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 10px;
+        letter-spacing: -0.3px;
+      }
+      .c1-mini .c1-desc {
+        background: linear-gradient(
+          to right,
+          #ecfdf5,
+          rgba(240, 253, 250, 0.5)
+        );
+        border-radius: 12px;
+        padding: 10px 12px;
+        margin-bottom: 12px;
+        border: 1px solid rgba(167, 243, 208, 0.5);
+        display: flex;
+        align-items: flex-start;
+        gap: 8px;
+      }
+      .c1-mini .c1-desc p {
+        font-size: 12px;
+        font-weight: 700;
+        color: #065f46;
+        line-height: 1.55;
+        margin: 0;
+      }
+      .c1-mini .c1-btn {
+        width: 100%;
+        background: #0f172a;
+        color: #fff;
+        border: none;
+        border-radius: 14px;
+        padding: 12px;
+        font-size: 13px;
+        font-weight: 900;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 0.15s;
+      }
+      .c1-mini .c1-btn:active {
+        transform: scale(0.97);
+      }
+
+      /* ── C8 地图点位 mini ── */
+      .c8-mini {
+        margin: 0 16px;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 0.5px solid rgba(0, 0, 0, 0.07);
+      }
+      .c8-mini .c8-img-wrap {
+        position: relative;
+      }
+      .c8-mini .c8-img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+        display: block;
+      }
+      .c8-mini .c8-dest-tag {
+        position: absolute;
+        bottom: 10px;
+        left: 10px;
+        background: rgba(0, 0, 0, 0.4);
+        border-radius: 10px;
+        padding: 4px 10px 4px 8px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 11px;
+        font-weight: 900;
+        color: #fff;
+      }
+      .c8-mini .c8-bar {
+        background: #fff;
+        padding: 12px 14px;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+      .c8-mini .c8-info {
+        flex: 1;
+        min-width: 0;
+      }
+      .c8-mini .c8-name {
+        font-size: 15px;
+        font-weight: 900;
+        color: #1e293b;
+      }
+      .c8-mini .c8-dist {
+        font-size: 11px;
+        color: #94a3b8;
+        font-weight: 700;
+        margin-top: 2px;
+      }
+      .c8-mini .c8-btn {
+        background: #0f172a;
+        color: #fff;
+        border: none;
+        border-radius: 14px;
+        padding: 10px 20px;
+        font-size: 13px;
+        font-weight: 900;
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        cursor: pointer;
+        flex-shrink: 0;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 0.15s;
+      }
+      .c8-mini .c8-btn:active {
+        transform: scale(0.96);
+      }
+
+      /* ── C9 商品卡轮播 ── */
+      .c9-scroll {
+        display: flex;
+        gap: 10px;
+        overflow-x: auto;
+        padding: 0 16px;
+        -webkit-overflow-scrolling: touch;
+        scroll-snap-type: x mandatory;
+      }
+      .c9-scroll::-webkit-scrollbar {
+        display: none;
+      }
+      .c9-card {
+        background: #fff;
+        border-radius: 20px;
+        border: 1px solid #f1f5f9;
+        overflow: hidden;
+        flex-shrink: 0;
+        width: 220px;
+        scroll-snap-align: start;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+      }
+      .c9-card .c9-thumb {
+        width: 100%;
+        height: 110px;
+        object-fit: cover;
+        display: block;
+      }
+      .c9-card .c9-body {
+        padding: 10px 12px 12px;
+      }
+      .c9-card .c9-name {
+        font-size: 13px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 6px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .c9-card .c9-price-row {
+        display: flex;
+        align-items: baseline;
+        gap: 4px;
+        margin-bottom: 8px;
+      }
+      .c9-card .c9-price {
+        font-size: 20px;
+        font-weight: 900;
+        color: #f43f5e;
+        letter-spacing: -0.5px;
+      }
+      .c9-card .c9-currency {
+        font-size: 12px;
+        font-weight: 900;
+        color: #f43f5e;
+      }
+      .c9-card .c9-original {
+        font-size: 11px;
+        font-weight: 700;
+        color: #cbd5e1;
+        text-decoration: line-through;
+      }
+      .c9-card .c9-btn {
+        width: 100%;
+        background: #fbbf24;
+        color: #451a03;
+        border: none;
+        border-radius: 12px;
+        padding: 8px;
+        font-size: 12px;
+        font-weight: 900;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 0.15s;
+      }
+      .c9-card .c9-btn:active {
+        transform: scale(0.97);
+      }
+      .c9-card .c9-sale-tag {
+        display: inline-block;
+        background: #fef2f2;
+        color: #f43f5e;
+        font-size: 9px;
+        font-weight: 900;
+        padding: 2px 6px;
+        border-radius: 6px;
+        margin-bottom: 4px;
+      }
+
+      /* ── AIGC 合影 mini ── */
+      .aigc-mini {
+        margin: 0 16px;
+        border-radius: 16px;
+        overflow: hidden;
+        border: 0.5px solid rgba(0, 0, 0, 0.07);
+        background: #fff;
+      }
+      .aigc-mini .aigc-img-wrap {
+        position: relative;
+      }
+      .aigc-mini .aigc-img {
+        width: 100%;
+        height: 160px;
+        object-fit: cover;
+        display: block;
+      }
+      .aigc-mini .aigc-badge {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        background: linear-gradient(135deg, #8b5cf6, #6366f1);
+        border-radius: 10px;
+        padding: 4px 10px 4px 8px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 10px;
+        font-weight: 900;
+        color: #fff;
+        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
+      }
+      .aigc-mini .aigc-body {
+        padding: 12px 14px 14px;
+      }
+      .aigc-mini .aigc-name {
+        font-size: 15px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 5px;
+      }
+      .aigc-mini .aigc-desc {
+        font-size: 11.5px;
+        font-weight: 700;
+        color: #64748b;
+        line-height: 1.6;
+        margin-bottom: 12px;
+      }
+      .aigc-mini .aigc-btn {
+        width: 100%;
+        background: linear-gradient(135deg, #8b5cf6, #6366f1);
+        color: #fff;
+        border: none;
+        border-radius: 14px;
+        padding: 11px;
+        font-size: 13px;
+        font-weight: 900;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: transform 0.15s;
+      }
+      .aigc-mini .aigc-btn:active {
+        transform: scale(0.97);
+      }
+
+      /* ── C4 路线步骤 mini ── */
+      .c4-mini {
+        margin: 0 16px;
+        background: #fff;
+        border-radius: 16px;
+        border: 0.5px solid rgba(0, 0, 0, 0.07);
+        padding: 14px 16px;
+      }
+      .c4-mini .c4-head {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 13px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 12px;
+      }
+      .c4-step {
+        display: flex;
+        gap: 10px;
+        margin-bottom: 10px;
+      }
+      .c4-step:last-child {
+        margin-bottom: 0;
+      }
+      .c4-step .c4-dot {
+        width: 18px;
+        height: 18px;
+        border-radius: 50%;
+        background: #8b5cf6;
+        color: #fff;
+        font-size: 10px;
+        font-weight: 900;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-shrink: 0;
+      }
+      .c4-step .c4-line {
+        flex: 1;
+      }
+      .c4-step .c4-act {
+        font-size: 12px;
+        font-weight: 800;
+        color: #334155;
+        line-height: 1.5;
+      }
+      .c4-step .c4-meta {
+        font-size: 10.5px;
+        color: #94a3b8;
+        font-weight: 700;
+        margin-top: 1px;
+      }
+
+      /* ── C5 设施位置 mini ── */
+      .c5-mini {
+        margin: 10px 16px 0;
+        background: #fff;
+        border-radius: 16px;
+        border: 0.5px solid rgba(0, 0, 0, 0.07);
+        padding: 12px 16px;
+      }
+      .c5-mini .c5-head {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-size: 12px;
+        font-weight: 900;
+        color: #1e293b;
+        margin-bottom: 8px;
+      }
+      .c5-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 5px 0;
+        font-size: 11.5px;
+        font-weight: 700;
+        color: #475569;
+      }
+      .c5-row .c5-ic {
+        width: 16px;
+        text-align: center;
+      }
+
+      /* ── C12 FAQ mini ── */
+      .c12-mini {
+        margin: 10px 16px 0;
+      }
+      .c12-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        background: #fff;
+        border: 1px solid #e2e8f0;
+        border-radius: 20px;
+        padding: 8px 13px;
+        font-size: 11.5px;
+        font-weight: 800;
+        color: #475569;
+        margin: 0 6px 8px 0;
+        cursor: pointer;
+        -webkit-tap-highlight-color: transparent;
+        transition: all 0.15s;
+      }
+      .c12-chip:active {
+        transform: scale(0.96);
+        background: #f1f5f9;
+      }
+      .c12-chip svg {
+        color: #10b981;
+      }
+
+      /* lightbox */
+      .lightbox {
+        position: fixed;
+        inset: 0;
+        z-index: 999;
+        background: rgba(0, 0, 0, 0.92);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.25s ease;
+      }
+      .lightbox.open {
+        opacity: 1;
+        pointer-events: all;
+      }
+      .lightbox img {
+        max-width: 100%;
+        max-height: 100%;
+        border-radius: 4px;
+        transform: scale(0.94);
+        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .lightbox.open img {
+        transform: scale(1);
+      }
+      .lb-close {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 34px;
+        height: 34px;
+        border-radius: 50%;
+        background: rgba(255, 255, 255, 0.15);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+      }
+
+      /* 跳转链路浮层 */
+      .flow-toast {
+        position: fixed;
+        left: 50%;
+        bottom: 32px;
+        transform: translateX(-50%) translateY(20px);
+        background: #0f172a;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 700;
+        padding: 11px 18px;
+        border-radius: 14px;
+        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
+        opacity: 0;
+        pointer-events: none;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        max-width: 340px;
+        line-height: 1.6;
+        z-index: 888;
+      }
+      .flow-toast.show {
+        opacity: 1;
+        transform: translateX(-50%) translateY(0);
+      }
+      .flow-toast .ft-label {
+        color: #fbbf24;
+        font-weight: 900;
+        margin-right: 4px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="max-w-[390px] mx-auto">
+      <!-- ════ 标题区 ════ -->
+      <div
+        class="flex flex-col items-start gap-3 w-full mb-6 animate-fade-in-up"
+      >
+        <div class="flex items-center gap-2 px-1">
+          <div
+            class="w-8 h-8 rounded-full border-[1.5px] border-emerald-100 shadow-sm overflow-hidden shrink-0 bg-emerald-50 flex items-center justify-center text-[15px]"
+          >
+            🐯
+          </div>
+          <span class="text-[12px] font-black text-slate-800"
+            >小七 · 荔波小七孔 AI 伴游</span
+          >
+        </div>
+        <div class="ml-1">
+          <span
+            class="bg-slate-900 text-white text-[9px] font-black px-2 py-1 rounded-md tracking-widest uppercase mr-2"
+            >演示</span
+          >
+          <span class="text-[12px] font-black text-slate-800"
+            >长文本收纳组件 · 4 类</span
+          >
+        </div>
+        <p class="ml-1 text-[11px] font-bold text-slate-400 leading-relaxed">
+          点击卡片 = 折叠态展开为完整内容。<br />
+          展开后下半部分是「行动条」，挂载真实可点击的组件。
+        </p>
+      </div>
+
+      <!-- ════ 屏幕 ════ -->
+      <div class="c0-screen w-full animate-fade-in-up" id="screen">
+        <!-- ─── p1 折叠态卡片列表 ─── -->
+        <div class="c0-page p1 w-full" id="p1">
+          <!-- 攻略型 -->
+          <div class="p1-card mb-3" onclick="goDetail('guide')">
+            <div class="p-5">
+              <div class="flex items-center gap-2 mb-2">
+                <span
+                  class="text-[10px] font-black text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full border border-amber-100"
+                  >漂流攻略</span
+                >
+                <span class="text-[9px] font-bold text-slate-300"
+                  >长文本-攻略组件</span
+                >
+              </div>
+              <h4 class="text-[14px] font-black text-slate-800 mb-1.5">
+                下水之前，先听小七唠两句
+              </h4>
+              <p
+                class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2"
+                id="sum-guide"
+              ></p>
+            </div>
+            <div class="px-5 pb-4 flex items-center justify-between">
+              <span class="text-[11px] text-slate-300 font-bold"
+                >点击查看完整攻略</span
+              >
+              <svg width="14" height="14" divBox="0 0 14 14" fill="none">
+                <path
+                  d="M5 3l4 4-4 4"
+                  stroke="#cbd5e1"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <!-- 景点型 -->
+          <div class="p1-card mb-3" onclick="goDetail('poi')">
+            <div class="p-5">
+              <div class="flex items-center gap-2 mb-2">
+                <span
+                  class="text-[10px] font-black text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded-full border border-emerald-100"
+                  >景点故事</span
+                >
+                <span class="text-[9px] font-bold text-slate-300"
+                  >长文本-景点组件</span
+                >
+              </div>
+              <h4 class="text-[14px] font-black text-slate-800 mb-1.5">
+                小七孔古桥 · 走了三百年的石拱
+              </h4>
+              <p
+                class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2"
+                id="sum-poi"
+              ></p>
+            </div>
+            <div class="px-5 pb-4 flex items-center justify-between">
+              <span class="text-[11px] text-slate-300 font-bold"
+                >点击查看完整介绍</span
+              >
+              <svg width="14" height="14" divBox="0 0 14 14" fill="none">
+                <path
+                  d="M5 3l4 4-4 4"
+                  stroke="#cbd5e1"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <!-- 路线型 -->
+          <div class="p1-card mb-3" onclick="goDetail('nav')">
+            <div class="p-5">
+              <div class="flex items-center gap-2 mb-2">
+                <span
+                  class="text-[10px] font-black text-violet-600 bg-violet-50 px-2 py-0.5 rounded-full border border-violet-100"
+                  >路线指引</span
+                >
+                <span class="text-[9px] font-bold text-slate-300"
+                  >长文本-路线组件</span
+                >
+              </div>
+              <h4 class="text-[14px] font-black text-slate-800 mb-1.5">
+                漂完卧龙潭，顺道去鸳鸯湖
+              </h4>
+              <p
+                class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2"
+                id="sum-nav"
+              ></p>
+            </div>
+            <div class="px-5 pb-4 flex items-center justify-between">
+              <span class="text-[11px] text-slate-300 font-bold"
+                >点击查看完整路线</span
+              >
+              <svg width="14" height="14" divBox="0 0 14 14" fill="none">
+                <path
+                  d="M5 3l4 4-4 4"
+                  stroke="#cbd5e1"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+
+          <!-- 拍照型 -->
+          <div class="p1-card" onclick="goDetail('photo')">
+            <div class="p-5">
+              <div class="flex items-center gap-2 mb-2">
+                <span
+                  class="text-[10px] font-black text-blue-600 bg-blue-50 px-2 py-0.5 rounded-full border border-blue-100"
+                  >拍照攻略</span
+                >
+                <span class="text-[9px] font-bold text-slate-300"
+                  >长文本-拍照组件</span
+                >
+              </div>
+              <h4 class="text-[14px] font-black text-slate-800 mb-1.5">
+                鸳鸯湖玻璃船，这样拍才不亏
+              </h4>
+              <p
+                class="text-[12px] text-slate-400 font-medium leading-relaxed line-clamp-2"
+                id="sum-photo"
+              ></p>
+            </div>
+            <div class="px-5 pb-4 flex items-center justify-between">
+              <span class="text-[11px] text-slate-300 font-bold"
+                >点击查看完整攻略</span
+              >
+              <svg width="14" height="14" divBox="0 0 14 14" fill="none">
+                <path
+                  d="M5 3l4 4-4 4"
+                  stroke="#cbd5e1"
+                  stroke-width="1.5"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        <!-- ─── p2 展开态 ─── -->
+        <div class="c0-page p2 w-full" id="p2">
+          <div class="p2-wrap">
+            <div class="p2-header">
+              <div class="back-btn" onclick="goBack()">‹</div>
+              <span
+                class="text-[14px] font-black text-slate-800"
+                id="p2-title"
+              ></span>
+              <span
+                class="text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border"
+                id="p2-badge"
+              ></span>
+            </div>
+            <div class="rich-body" id="rich-body"></div>
+            <div class="action-zone" id="action-zone"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- lightbox -->
+    <div class="lightbox" id="lightbox" onclick="closeLB()">
+      <div class="lb-close" onclick="closeLB()">
+        <svg
+          width="16"
+          height="16"
+          divBox="0 0 24 24"
+          fill="none"
+          stroke="white"
+          stroke-width="2.5"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </div>
+      <img id="lb-img" src="" alt="大图" onclick="event.stopPropagation()" />
+    </div>
+
+    <!-- 跳转链路提示 -->
+    <div class="flow-toast" id="flowToast"></div>
+
+    <script>
+      /* ════════════════════════════════
+   ACTION ZONE BUILDERS
+   ════════════════════════════════ */
+
+      /* 景点详情组件 */
+      function buildC1(poi) {
+        return `
+    <div class="action-zone-label">查看景点详情</div>
+    <div class="c1-mini" onclick="flow('景点详情组件','跳转 H5 景点详情页 ${poi.url}')">
+      <div class="c1-tag">
+        <svg width="10" height="10" divBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+        ${poi.tag}
+      </div>
+      <div class="c1-body">
+        <div class="c1-title">${poi.name}</div>
+        <div class="c1-desc"><p>${poi.desc}</p></div>
+        <button class="c1-btn">
+          <svg width="14" height="14" divBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
+          带我去
+        </button>
+      </div>
+    </div>
+  `;
+      }
+
+      /* 地图点位组件 */
+      function buildC8(dest) {
+        return `
+    <div class="action-zone-label">带我去这里</div>
+    <div class="c8-mini">
+      <div class="c8-img-wrap">
+        <img class="c8-img" src="${dest.img}" alt="${dest.name}">
+        <div class="c8-dest-tag">
+          <svg width="11" height="11" divBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+          目的地
+        </div>
+      </div>
+      <div class="c8-bar">
+        <div class="c8-info">
+          <div class="c8-name">前往${dest.name}</div>
+          <div class="c8-dist">${dest.dist}</div>
+        </div>
+        <button class="c8-btn" onclick="flow('地图点位组件','调起地图 App 导航 · ${dest.coord}')">
+          <svg width="13" height="13" divBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polygon points="3 11 22 2 13 21 11 13 3 11"/></svg>
+          导航
+        </button>
+      </div>
+    </div>
+  `;
+      }
+
+      /* 商品组件 */
+      function buildC9(products) {
+        const cards = products
+          .map(
+            (p) => `
+    <div class="c9-card">
+      <img class="c9-thumb" src="${p.img}" alt="${p.name}">
+      <div class="c9-body">
+        ${p.saleTag ? `<div class="c9-sale-tag">${p.saleTag}</div>` : ""}
+        <div class="c9-name">${p.name}</div>
+        <div class="c9-price-row">
+          <span class="c9-currency">¥</span>
+          <span class="c9-price">${p.price}</span>
+          ${p.original ? `<span class="c9-original">¥${p.original}</span>` : ""}
+        </div>
+        <button class="c9-btn" onclick="flow('商品组件','跳转商品详情页 · 下单 ${p.name}')">立即购买</button>
+      </div>
+    </div>
+  `,
+          )
+          .join("");
+        return `<div class="action-zone-label">相关票务</div><div class="c9-scroll">${cards}</div>`;
+      }
+
+      /* 路线组件 */
+      function buildC4(route) {
+        const steps = route.steps
+          .map(
+            (s, i) => `
+    <div class="c4-step">
+      <div class="c4-dot">${i + 1}</div>
+      <div class="c4-line">
+        <div class="c4-act">${s.act}</div>
+        <div class="c4-meta">${s.meta}</div>
+      </div>
+    </div>
+  `,
+          )
+          .join("");
+        return `
+    <div class="action-zone-label">完整路线</div>
+    <div class="c4-mini">
+      <div class="c4-head">
+        <svg width="14" height="14" divBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        ${route.title}
+      </div>
+      ${steps}
+    </div>
+  `;
+      }
+
+      /* 设施位置组件 */
+      function buildC5(facility) {
+        const rows = facility.items
+          .map(
+            (f) => `
+    <div class="c5-row"><span class="c5-ic">${f.ic}</span><span>${f.txt}</span></div>
+  `,
+          )
+          .join("");
+        return `
+    <div class="c5-mini">
+      <div class="c5-head">
+        <svg width="13" height="13" divBox="0 0 24 24" fill="none" stroke="#8b5cf6" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg>
+        沿途设施
+      </div>
+      ${rows}
+    </div>
+  `;
+      }
+
+      /* FAQ组件 */
+      function buildC12(faq) {
+        const chips = faq
+          .map(
+            (q) => `
+    <div class="c12-chip" onclick="flow('FAQ组件','把追问发回 AI 伴游区 · 「${q}」')">
+      <svg width="11" height="11" divBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+      ${q}
+    </div>
+  `,
+          )
+          .join("");
+        return `<div class="action-zone-label">继续追问</div><div class="c12-mini">${chips}</div>`;
+      }
+
+      /* AIGC 合影组件 */
+      function buildAIGC(a) {
+        return `
+    <div class="action-zone-label">AIGC 合影</div>
+    <div class="aigc-mini">
+      <div class="aigc-img-wrap">
+        <img class="aigc-img" src="${a.img}" alt="${a.name}">
+        <div class="aigc-badge">
+          <svg width="11" height="11" divBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/></svg>
+          AI 生成
+        </div>
+      </div>
+      <div class="aigc-body">
+        <div class="aigc-name">${a.name}</div>
+        <div class="aigc-desc">${a.desc}</div>
+        <button class="aigc-btn" onclick="flow('AIGC 合影','跳转 AIGC 合影功能页 · 生成专属合影')">
+          <svg width="13" height="13" divBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>
+          生成我的合影
+        </button>
+      </div>
+    </div>
+  `;
+      }
+
+      /* ════════════════════════════════
+   CONTENT DATA — 4 类组件演示数据
+   ════════════════════════════════ */
+      const contents = {
+        /* ── 攻略型 · 卧龙潭漂流 ── */
+        guide: {
+          title: "下水之前，先听小七唠两句",
+          badge: "漂流攻略",
+          badgeColor: "text-amber-600 bg-amber-50 border-amber-100",
+          /* content_summary = guide_conclusion 前 30 字 */
+          summary:
+            "卧龙潭漂流值得冲，全程四十分钟、三段激流，但晕水的人要掂量…",
+          body: `
+      <p>卧龙潭的水，是那种一眼就让人想跳进去的绿。<strong>皮筏艇漂流</strong>全程约两公里，三段激流接连而下，水花会结结实实拍在脸上——这趟值得冲，但晕水的朋友得先掂量掂量。</p>
+      <img class="rich-img" src="https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=600&q=75" alt="卧龙潭漂流">
+      <h5>下水前，这几样别落下</h5>
+      <div class="tip-block">
+        ① 换洗衣服塞进防水袋，手机一定要封好<br>
+        ② 穿凉鞋或防滑鞋，拖鞋是真的不让下<br>
+        ③ 贵重东西先存好寄存柜，别揣身上
+      </div>
+      <p>小七的私心建议：挑 <strong>上午九点到十一点</strong> 这一场。水量足、太阳还没毒,漂下来浑身舒坦,不会被晒得发昏。</p>
+      <h5>这些坑，提前绕开</h5>
+      <div class="tip-block warn">
+        雨后水量猛涨可能临时停漂,出发前先问一句开放状态;现场拖鞋不补租,光脚更危险。
+      </div>
+    `,
+          products: [
+            {
+              name: "卧龙潭皮筏艇漂流",
+              img: "https://images.unsplash.com/photo-1530866495561-507c9faab2ed?w=400&q=75",
+              price: "50",
+              original: null,
+              saleTag: null,
+            },
+            {
+              name: "鸳鸯湖玻璃船",
+              img: "https://images.unsplash.com/photo-1544551763-46a013bb70d5?w=400&q=75",
+              price: "50",
+              original: null,
+              saleTag: "漂完顺路",
+            },
+          ],
+          faq: ["几岁的孩子能玩", "会不会全身湿透", "漂完去哪儿歇脚"],
+        },
+
+        /* ── 景点型 · 小七孔古桥 ── */
+        poi: {
+          title: "小七孔古桥 · 走了三百年的石拱",
+          badge: "景点故事",
+          badgeColor: "text-emerald-700 bg-emerald-50 border-emerald-100",
+          /* content_summary = poi_definition 前 30 字 */
+          summary: "小七孔古桥是一座三百岁的七孔石桥,小七孔的名字就从这儿来…",
+          body: `
+      <p>小七孔古桥静静卧在响水河上,七个石拱挨着排开,桥身爬满青苔藤蔓。它建于清道光年间,<strong>三百多岁</strong>了——整个景区的名字,就是从这座桥来的。</p>
+      <img class="rich-img" src="https://images.unsplash.com/photo-1682687982501-1e5898cb8f4b?w=600&q=75" alt="小七孔古桥">
+      <h5>站在这儿,看什么</h5>
+      <div class="tip-block">
+        ① 桥拱与水面倒影合成完整的圆,这是古桥最经典的一眼<br>
+        ② 桥身的青苔和藤蔓,是三百年时间慢慢长出来的<br>
+        ③ 桥下水浅处清澈见底,能看见鹅卵石和游鱼
+      </div>
+      <p>小七的建议:别急着走过去。先在桥侧站一会儿——古桥不是用来"打卡"的,是用来 <strong>慢慢看</strong> 的。光线斜下来的时候,石桥、绿水、倒影会一起把你框进画里。</p>
+      <h5>顺带一提</h5>
+      <div class="tip-block warn">
+        桥面是三百年的老石头,雨后偏滑,慢点走;别翻护栏到桥下浅滩,既危险也伤桥。
+      </div>
+    `,
+          poi: {
+            tag: "核心地标",
+            name: "小七孔古桥",
+            desc: "清道光年间建的七孔石桥,响水河上的镇景之宝,小七孔之名由此而来,桥畔可观涵碧潭~",
+            url: "poi_xiaoqikong_bridge.html",
+          },
+          faq: ["古桥有什么传说", "最佳观赏时间", "旁边还有什么景点"],
+        },
+
+        /* ── 路线型 · 卧龙潭 → 鸳鸯湖 ── */
+        nav: {
+          title: "漂完卧龙潭，顺道去鸳鸯湖",
+          badge: "路线指引",
+          badgeColor: "text-violet-600 bg-violet-50 border-violet-100",
+          /* content_summary = route_summary 前 30 字 */
+          summary: "卧龙潭到鸳鸯湖,坐观光车约二十分钟。要紧的是鸳鸯湖分上下湖…",
+          body: `
+      <p>漂完卧龙潭,人多半是湿着、累着的——这时候去鸳鸯湖刚刚好。坐观光车顺路不绕,二十分钟左右就到。</p>
+      <h5>鸳鸯湖分上下湖,先选好玩哪个</h5>
+      <p style="margin-bottom:8px;">鸳鸯湖不是一个码头,它分成上下两个湖,玩的船不一样,<strong>下车站点也不同</strong>——上车前先选好。</p>
+      <div class="vs-wrap">
+        <div class="vs-col">
+          <div class="vs-head"><span class="vs-dot" style="background:#3b82f6"></span>上湖 · 鸳湖</div>
+          <div class="vs-boat" style="color:#2563eb">玻璃船 ¥50</div>
+          <div class="vs-row">透明船底,<b>适合拍照</b></div>
+          <div class="vs-row">带老人孩子图轻松</div>
+          <div class="vs-row">在 <b>鸳鸯湖上湖站</b> 下车</div>
+        </div>
+        <div class="vs-col">
+          <div class="vs-head"><span class="vs-dot" style="background:#10b981"></span>下湖 · 鸯湖</div>
+          <div class="vs-boat" style="color:#059669">铁皮船 ¥30</div>
+          <div class="vs-row">自己划,1-6 人一船</div>
+          <div class="vs-row"><b>水上迷宫</b>穿林,更有乐趣</div>
+          <div class="vs-row">在 <b>鸳鸯湖站</b> 下车,再走 4 分钟</div>
+        </div>
+      </div>
+      <p>时间够的话两个湖都能玩,中间有观光车接驳。</p>
+      <h5>路上留个心</h5>
+      <div class="tip-block warn">
+        ① 旺季观光车要排队,上午人最多<br>
+        ② 下湖枯水期水位低,水上迷宫游线可能关闭,购票前先问一句<br>
+        ③ 雨天石板路偏滑,带孩子老人慢一点
+      </div>
+    `,
+          route: {
+            title: "卧龙潭 → 鸳鸯湖 · 看准上下湖",
+            steps: [
+              {
+                act: "卧龙潭码头 → 卧龙潭站",
+                meta: "步行约 5 分钟 · 认准观光车乘车点",
+              },
+              {
+                act: "上车前先认准方向：去上湖 or 下湖",
+                meta: "两个湖站点不同,排队通道也不同,别走错",
+              },
+              {
+                act: "A·去上湖玩玻璃船 → 鸳鸯湖上湖站下车",
+                meta: "车程约 6 分钟 · 玻璃船 ¥50/人",
+              },
+              {
+                act: "B·去下湖玩铁皮船 → 鸳鸯湖站下车",
+                meta: "车程约 12 分钟 · 下车再步行 4 分钟 · 铁皮船 ¥30/人",
+              },
+            ],
+          },
+          facility: {
+            items: [
+              { ic: "🚻", txt: "卧龙潭站 · 洗手间 + 换洗寄存点" },
+              { ic: "🍦", txt: "鸳鸯湖上湖 · 美食驿站(文创雪糕)+ 休息亭" },
+              { ic: "🍜", txt: "鸳鸯湖站 · 美食驿站 + 充电宝租赁" },
+              { ic: "🚻", txt: "下湖卫生间在景点处,上湖卫生间在售票处前 150m" },
+            ],
+          },
+          faq: [
+            "上湖下湖哪个好玩",
+            "玻璃船和铁皮船怎么选",
+            "两个湖都玩来得及吗",
+          ],
+        },
+
+        /* ── 拍照型 · 鸳鸯湖玻璃船 ── */
+        photo: {
+          title: "鸳鸯湖玻璃船，这样拍才不亏",
+          badge: "拍照攻略",
+          badgeColor: "text-blue-600 bg-blue-50 border-blue-100",
+          /* content_summary = photo_conclusion 前 30 字 */
+          summary: "玻璃船拍照,关键是拍水下那抹通透的绿,顺光时段最出片…",
+          body: `
+      <p>鸳鸯湖的玻璃船,船底是透明的,水下世界看得清清楚楚。拍照的关键就一句话:<strong>别只顾着拍人,把水下那抹通透的绿一起收进来。</strong></p>
+      <h5>三个不会错的机位</h5>
+      <div class="tip-block">
+        ① 蹲低,贴着透明船底拍,水草和光斑会铺满整个画面<br>
+        ② 船头回拍人物,背景是大片湖光,人物站三分之一处<br>
+        ③ 把手伸进光里,拍水面波纹和指尖,是很灵的细节
+      </div>
+      <p>时间上,挑 <strong>上午十点到下午两点</strong> 的顺光时段。阳光直直照进水里,那种绿才透得出来——阴天和傍晚,水色会闷,差很多。</p>
+      <h5>手机党看这里</h5>
+      <div class="tip-block">
+        手机开 0.5x 广角,水面和船一起进画;隔着玻璃拍记得擦干净船底;逆光时手动点一下水面降曝光。
+      </div>
+    `,
+          img: {
+            thumb:
+              "https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=600&q=75",
+            full: "https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=1200&q=90",
+            title: "玻璃船底机位",
+            sub: "蹲低贴船底 · 上午顺光",
+          },
+          aigc: {
+            name: "鸳鸯湖玻璃船 AIGC 合影",
+            img: "https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=400&q=75",
+            desc: "上船拍一张,小七帮你一键生成专属合影,不用求人也不用自拍杆",
+          },
+          faq: ["几点光线最好", "船上能站起来拍吗", "穿什么颜色上镜"],
+        },
+      };
+
+      /* ════════════════════════════════
+   RENDER
+   ════════════════════════════════ */
+      /* 折叠态摘要回填 */
+      document.getElementById("sum-guide").textContent = contents.guide.summary;
+      document.getElementById("sum-poi").textContent = contents.poi.summary;
+      document.getElementById("sum-nav").textContent = contents.nav.summary;
+      document.getElementById("sum-photo").textContent = contents.photo.summary;
+
+      /* action_zone 按组件类型拼装 */
+      function buildActionZone(d) {
+        let html = "";
+        if (d.poi) html += buildC1(d.poi); // 景点详情组件
+        if (d.route) html += buildC4(d.route); // 路线组件
+        if (d.facility) html += buildC5(d.facility); // 设施位置组件
+        if (d.img) html += buildC7(d.img); // 图片组件
+        if (d.dest) html += buildC8(d.dest); // 地图点位组件
+        if (d.products) html += buildC9(d.products); // 商品组件
+        if (d.aigc) html += buildAIGC(d.aigc); // AIGC 合影
+        if (d.faq) html += buildC12(d.faq); // FAQ组件
+        html += '<div class="action-zone-bottom"></div>';
+        return html;
+      }
+
+      /* 图片组件（拍照型用） */
+      function buildC7(img) {
+        const caption = img.title
+          ? `
+    <div style="position:absolute;bottom:0;left:0;right:0;padding:28px 14px 12px;background:linear-gradient(to top,rgba(0,0,0,0.55),rgba(0,0,0,0));border-radius:0 0 16px 16px;">
+      <div style="color:#fff;font-size:13px;font-weight:900;margin-bottom:2px;">${img.title}</div>
+      ${img.sub ? `<div style="color:rgba(255,255,255,0.75);font-size:11px;font-weight:700;">${img.sub}</div>` : ""}
+    </div>`
+          : "";
+        return `
+    <div class="action-zone-label">查看机位图</div>
+    <div style="margin:0 16px;border-radius:16px;overflow:hidden;cursor:pointer;position:relative;" onclick="openLB('${img.full}')">
+      <img src="${img.thumb}" alt="${img.title || "大图"}" style="width:100%;height:200px;object-fit:cover;display:block;">
+      ${caption}
+      <div style="position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,0.35);display:flex;align-items:center;justify-content:center;">
+        <svg width="13" height="13" divBox="0 0 24 24" fill="none" stroke="white" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>
+      </div>
+    </div>
+  `;
+      }
+
+      /* ── transitions ── */
+      const p1 = document.getElementById("p1");
+      const p2 = document.getElementById("p2");
+      const screen = document.getElementById("screen");
+      function syncH(el) {
+        screen.style.minHeight = el.scrollHeight + "px";
+      }
+
+      function goDetail(type) {
+        const d = contents[type];
+        document.getElementById("p2-title").textContent = d.title;
+        const badge = document.getElementById("p2-badge");
+        badge.textContent = d.badge;
+        badge.className = `text-[10px] font-bold px-2 py-0.5 rounded-full ml-auto border ${d.badgeColor}`;
+        document.getElementById("rich-body").innerHTML = d.body;
+        document.getElementById("action-zone").innerHTML = buildActionZone(d);
+        p1.classList.add("out");
+        p2.classList.add("in");
+        setTimeout(() => syncH(p2), 60);
+        flow("展开", "折叠态 → 展开态 · content_summary 换成完整 content_body");
+      }
+
+      function goBack() {
+        p1.classList.remove("out");
+        p2.classList.remove("in");
+        setTimeout(() => syncH(p1), 60);
+      }
+
+      /* ── lightbox ── */
+      function openLB(src) {
+        document.getElementById("lb-img").src = src;
+        document.getElementById("lightbox").classList.add("open");
+        document.body.style.overflow = "hidden";
+        flow("图片组件", "点开机位样张大图");
+      }
+      function closeLB() {
+        document.getElementById("lightbox").classList.remove("open");
+        document.body.style.overflow = "";
+      }
+
+      /* ── 跳转链路提示 ── */
+      let flowTimer = null;
+      function flow(label, text) {
+        const t = document.getElementById("flowToast");
+        t.innerHTML = `<span class="ft-label">${label} ›</span>${text}`;
+        t.classList.add("show");
+        clearTimeout(flowTimer);
+        flowTimer = setTimeout(() => t.classList.remove("show"), 2600);
+      }
+
+      window.addEventListener("load", () => syncH(p1));
+    </script>
+  </body>
+</html>
diff --git a/src/pages/home/components/MapNavigationCard/index.vue b/src/pages/home/components/MapNavigationCard/index.vue
new file mode 100644
index 0000000..c74844d
--- /dev/null
+++ b/src/pages/home/components/MapNavigationCard/index.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="map-navigation-card bg-white rounded-24 overflow-hidden w-full">
+    <div class="map-navigation-card__media">
+      <img class="map-navigation-card__image block w-full" :src="data.image" mode="aspectFill" />
+      <div class="map-navigation-card__badge flex flex-items-center color-white font-size-12 font-900">
+        <span class="map-navigation-card__badge-icon">{{ badge.icon }}</span>
+        <span>{{ badge.text }}</span>
+      </div>
+    </div>
+
+    <div class="map-navigation-card__content flex flex-items-center">
+      <div class="map-navigation-card__info flex-full">
+        <div class="map-navigation-card__title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ data.title }}
+        </div>
+        <div class="map-navigation-card__distance color-94A3B8 font-size-14 font-900 ellipsis-1">
+          {{ data.distance }}
+        </div>
+      </div>
+      <div
+        class="map-navigation-card__button flex flex-items-center flex-justify-center bg-0F172A color-white font-size-18 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
+        <span class="map-navigation-card__button-icon">{{ action.icon }}</span>
+        <span>{{ action.text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "action"]);
+
+const badge = computed(() => props.data.badge || {});
+const action = computed(() => props.data.action || {});
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/MapNavigationCard/mocks.js b/src/pages/home/components/MapNavigationCard/mocks.js
new file mode 100644
index 0000000..081a477
--- /dev/null
+++ b/src/pages/home/components/MapNavigationCard/mocks.js
@@ -0,0 +1,14 @@
+export default {
+  id: "xiaoqikong-bridge-nav",
+  title: "前往小七孔桥",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  distance: "步行约 450 米",
+  badge: {
+    icon: "⌖",
+    text: "目的地",
+  },
+  action: {
+    icon: "↗",
+    text: "导航",
+  },
+};
diff --git a/src/pages/home/components/MapNavigationCard/styles/index.scss b/src/pages/home/components/MapNavigationCard/styles/index.scss
new file mode 100644
index 0000000..4c76cdb
--- /dev/null
+++ b/src/pages/home/components/MapNavigationCard/styles/index.scss
@@ -0,0 +1,70 @@
+.map-navigation-card {
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
+  box-sizing: border-box;
+}
+
+.map-navigation-card__media {
+  position: relative;
+}
+
+.map-navigation-card__image {
+  height: 248px;
+}
+
+.map-navigation-card__badge {
+  position: absolute;
+  left: 16px;
+  bottom: 16px;
+  height: 34px;
+  padding: 0 12px;
+  border-radius: 8px;
+  background: rgba(15, 23, 42, 0.72);
+  line-height: 34px;
+}
+
+.map-navigation-card__badge-icon {
+  margin-right: 6px;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.map-navigation-card__content {
+  min-height: 96px;
+  padding: 20px 26px 22px;
+  box-sizing: border-box;
+}
+
+.map-navigation-card__info {
+  min-width: 0;
+}
+
+.map-navigation-card__title {
+  line-height: 24px;
+}
+
+.map-navigation-card__distance {
+  margin-top: 6px;
+  line-height: 18px;
+}
+
+.map-navigation-card__button {
+  width: 108px;
+  height: 58px;
+  margin-left: 18px;
+  border-radius: 16px;
+}
+
+.map-navigation-card__button:active {
+  opacity: 0.86;
+}
+
+.map-navigation-card__button.is-disabled {
+  opacity: 0.55;
+}
+
+.map-navigation-card__button-icon {
+  margin-right: 8px;
+  font-size: 19px;
+  line-height: 19px;
+}
diff --git a/src/pages/home/components/MoreService/index.vue b/src/pages/home/components/MoreService/index.vue
new file mode 100644
index 0000000..3200067
--- /dev/null
+++ b/src/pages/home/components/MoreService/index.vue
@@ -0,0 +1,112 @@
+<template>
+  <uni-popup ref="popup" type="bottom" :safe-area="false">
+    <div class="popup-content border-box pt-12 pl-12 pr-12">
+      <div class="header flex flex-items-center pb-12">
+        <div class="title flex-full text-center font-size-17 color-000 font-500 ml-24">更多服务</div>
+        <uni-icons type="close" size="24" color="#CACFD8" @click="close" />
+      </div>
+
+      <div class="list bg-white border-box pl-20 pr-20">
+        <div class="item border-box border-bottom pt-20 pb-20" v-for="(item, index) in list" :key="index">
+          <div class="flex flex-items-center flex-justify-center">
+            <img v-if="item.icon" class="left" :src="item.icon" />
+            <div class="center flex-full">
+              <div class="font-size-16 color-000 line-height-24 font-500">
+                {{ item.title }}
+              </div>
+              <div class="font-size-12 color-A3A3A3 line-height-16">
+                {{ item.content }}
+              </div>
+            </div>
+            <div class="right border-box font-size-12 color-white line-height-16" @click="handleClick(item)">
+              {{ item.btnText }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </uni-popup>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { Command } from "@/model/ChatModel";
+import { SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+import { checkToken } from "@/hooks/useGoLogin";
+
+const popup = ref(null);
+
+const list = ref([
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/ksyd.png",
+    title: "快速预定",
+    content: "预定门票、房间、餐食",
+    btnText: "去预定",
+    type: Command.quickBooking,
+    path: "/pages-quick/list",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/tsfx.png",
+    title: "探索发现",
+    content: "发现景点、活动、特色内容",
+    btnText: "去探索",
+    type: Command.discovery,
+    path: "",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/mddd.png",
+    title: "我的订单",
+    content: "查看门票、住宿、餐饮等订单",
+    btnText: "去查看",
+    type: Command.myOrder,
+    path: "/pages-order/order/list",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/wdgd.png",
+    title: "呼叫服务",
+    content: "查看呼叫服务、进度与处理情况",
+    btnText: "去查看",
+    type: Command.myWorkOrder,
+    path: "/pages-service/order/list",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/fkyj.png",
+    title: "反馈意见",
+    content: "提交使用问题、建议与需求",
+    btnText: "去反馈",
+    type: Command.feedbackCard,
+    path: "",
+  },
+]);
+
+const open = () => {
+  popup.value && popup.value.open();
+};
+
+const close = () => {
+  popup.value && popup.value.close();
+};
+
+const handleClick = (item) => {
+  close();
+
+  if (item.path) {
+    checkToken().then(() => {
+      uni.navigateTo({ url: item.path });
+    });
+
+    return;
+  }
+
+  uni.$emit(SEND_MESSAGE_COMMAND_TYPE, item);
+};
+
+// 接收更多服务
+uni.$on("SHOW_MORE_POPUP", () => {
+  open();
+});
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/MoreService/styles/index.scss b/src/pages/home/components/MoreService/styles/index.scss
new file mode 100644
index 0000000..9cd8993
--- /dev/null
+++ b/src/pages/home/components/MoreService/styles/index.scss
@@ -0,0 +1,29 @@
+.popup-content {
+  background-color: #f5f7fa;
+  border-radius: 15px 15px 0 0;
+  padding-bottom: Max(env(safe-area-inset-bottom), 12px) !important;
+}
+
+.list {
+  border-radius: 15px;
+}
+
+.item {
+  gap: 20px;
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+.left {
+  width: 24px;
+  height: 24px;
+  margin-right: 12px;
+}
+
+.right {
+  background-color: #0ccd58;
+  border-radius: 5px;
+  padding: 6px;
+}
diff --git a/src/pages/home/components/NoticeCard/index.vue b/src/pages/home/components/NoticeCard/index.vue
new file mode 100644
index 0000000..c6506bb
--- /dev/null
+++ b/src/pages/home/components/NoticeCard/index.vue
@@ -0,0 +1,91 @@
+<template>
+  <div class="notice-card w-full">
+    <div v-if="!detailOpen" class="notice-card__summary bg-FFFBEB rounded-24 w-full">
+      <div class="notice-card__summary-title color-B45309 font-size-16 font-900">
+        {{ summary.title }}
+      </div>
+      <div class="notice-card__summary-content color-D97706 font-size-14 font-900">
+        {{ summary.content }}
+      </div>
+      <div class="notice-card__summary-footer flex flex-items-center flex-justify-between">
+        <div class="notice-card__summary-time color-D97706 font-size-12 font-900">
+          {{ summary.publishTime }}
+        </div>
+        <div class="notice-card__summary-link color-B45309 font-size-14 font-900" :class="{ 'is-disabled': disabled }"
+          @click="openDetail">
+          {{ summary.actionText }}
+        </div>
+      </div>
+    </div>
+
+    <div v-else class="notice-card__detail bg-white rounded-24 overflow-hidden w-full">
+      <div class="notice-card__detail-head flex flex-items-center">
+        <div class="notice-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
+          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+        </div>
+        <div class="notice-card__head-title color-1E293B font-size-18 font-900">
+          {{ detail.navTitle }}
+        </div>
+      </div>
+
+      <image class="notice-card__image block w-full" :src="detail.image" mode="aspectFill" />
+
+      <div class="notice-card__detail-body">
+        <div class="notice-card__detail-title color-1E293B font-size-20 font-900">
+          {{ detail.title }}
+        </div>
+        <div class="notice-card__time-pill flex flex-items-center bg-F8FAFC color-475569 font-size-13 font-900">
+          <span class="notice-card__time-icon">{{ detail.timeIcon }}</span>
+          <span>{{ detail.publishTime }}</span>
+        </div>
+        <div class="notice-card__divider"></div>
+        <div v-for="paragraph in paragraphs" :key="paragraph.id"
+          class="notice-card__paragraph color-475569 font-size-14 font-800">
+          <span v-for="segment in paragraph.segments" :key="segment.text"
+            :class="{ 'notice-card__strong': segment.strong }">
+            {{ segment.text }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back", "action"]);
+
+const detailOpen = ref(false);
+const summary = computed(() => props.data.summary || {});
+const detail = computed(() => props.data.detail || {});
+const paragraphs = computed(() => detail.value.paragraphs || []);
+
+const openDetail = () => {
+  if (props.disabled) return;
+  detailOpen.value = true;
+  emit("select", props.data);
+  emit("action", props.data);
+};
+
+const closeDetail = () => {
+  detailOpen.value = false;
+  emit("back");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/NoticeCard/mocks.js b/src/pages/home/components/NoticeCard/mocks.js
new file mode 100644
index 0000000..4d9148c
--- /dev/null
+++ b/src/pages/home/components/NoticeCard/mocks.js
@@ -0,0 +1,49 @@
+export default {
+  id: "wolongtan-trail-notice",
+  summary: {
+    title: "卧龙潭",
+    content: "卧龙潭排队严重。",
+    publishTime: "发布时间：2025年7月12日 09:30",
+    actionText: "详情",
+  },
+  detail: {
+    navTitle: "交通公告",
+    image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+    title: "卧龙潭至鸳鸯湖步道临时封闭通知",
+    timeIcon: "◷",
+    publishTime: "发布时间：2025年7月12日 09:30",
+    paragraphs: [
+      {
+        id: "rain",
+        segments: [
+          {
+            text: "因近日持续降雨导致景区内水位明显上升，为保障游客人身安全，景区管理部门决定自即日起临时封闭",
+          },
+          {
+            text: "卧龙潭至鸳鸯湖沉溪步道",
+            strong: true,
+          },
+          {
+            text: "，封闭时间视水位情况另行通知。",
+          },
+        ],
+      },
+      {
+        id: "route",
+        segments: [
+          {
+            text: "受影响游客可改走景区主干道绕行，全程增加约15分钟。观光车服务正常运营，建议优先乘车前往鸳鸯湖区域。",
+          },
+        ],
+      },
+      {
+        id: "reopen",
+        segments: [
+          {
+            text: "如水位下降恢复安全标准，景区将第一时间通过广播及公告重新开放步道，请游客留意景区实时公告。",
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git a/src/pages/home/components/NoticeCard/styles/index.scss b/src/pages/home/components/NoticeCard/styles/index.scss
new file mode 100644
index 0000000..a86568d
--- /dev/null
+++ b/src/pages/home/components/NoticeCard/styles/index.scss
@@ -0,0 +1,123 @@
+.notice-card {
+  width: 100%;
+}
+
+.notice-card__summary,
+.notice-card__detail {
+  box-sizing: border-box;
+}
+
+.notice-card__summary {
+  padding: 16px 20px 14px;
+  border: 1px solid #fde68a;
+  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.08);
+}
+
+.notice-card__summary-title {
+  line-height: 22px;
+}
+
+.notice-card__summary-content {
+  margin-top: 6px;
+  line-height: 20px;
+}
+
+.notice-card__summary-footer {
+  min-width: 0;
+  margin-top: 8px;
+}
+
+.notice-card__summary-time {
+  min-width: 0;
+  line-height: 18px;
+}
+
+.notice-card__summary-link {
+  margin-left: 16px;
+  line-height: 18px;
+  text-decoration: underline;
+  white-space: nowrap;
+}
+
+.notice-card__summary-link:active {
+  opacity: 0.82;
+}
+
+.notice-card__summary-link.is-disabled {
+  opacity: 0.55;
+}
+
+.notice-card__detail {
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
+}
+
+.notice-card__detail-head {
+  height: 68px;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+
+.notice-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 14px;
+  color: #64748b;
+  font-size: 28px;
+  line-height: 1;
+  background: #f8fafc;
+}
+
+.notice-card__head-title {
+  line-height: 24px;
+}
+
+.notice-card__image {
+  height: 250px;
+}
+
+.notice-card__detail-body {
+  padding: 22px 20px 28px;
+  box-sizing: border-box;
+}
+
+.notice-card__detail-title {
+  line-height: 28px;
+}
+
+.notice-card__time-pill {
+  display: inline-flex;
+  height: 34px;
+  margin-top: 16px;
+  padding: 0 12px;
+  border: 1px solid #e2e8f0;
+  border-radius: 999px;
+  line-height: 34px;
+  box-sizing: border-box;
+}
+
+.notice-card__time-icon {
+  margin-right: 6px;
+  color: #64748b;
+  font-size: 15px;
+  line-height: 15px;
+}
+
+.notice-card__divider {
+  height: 1px;
+  margin: 26px 0 20px;
+  background: #e5e7eb;
+}
+
+.notice-card__paragraph {
+  line-height: 30px;
+}
+
+.notice-card__paragraph + .notice-card__paragraph {
+  margin-top: 18px;
+}
+
+.notice-card__strong {
+  color: #1e293b;
+  font-weight: 900;
+}
diff --git a/src/pages/home/components/NoticeMessage/detail.vue b/src/pages/home/components/NoticeMessage/detail.vue
new file mode 100644
index 0000000..e9fd2ea
--- /dev/null
+++ b/src/pages/home/components/NoticeMessage/detail.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="flex flex-col bg-liner h-screen overflow-hidden">
+    <!-- ✅ 顶部固定导航 -->
+    <div class="flex-shrink-0">
+      <TopNavBar :title="detailTitle" background="transparent" />
+    </div>
+
+    <!-- ✅ 滚动区域 -->
+    <div class="flex-full overflow-hidden" scroll-y>
+      <div class="pb-24 border-box overflow-hidden">
+        <img v-if="coverImage" class="w-full block" :src="coverImage" mode="aspectFill" />
+
+        <div class="pt-16 px-12 pb-24 border-box">
+          <div class="color-171717 font-size-16 font-weight-600">{{ detailTitle }}</div>
+
+          <div v-if="publishTime" class="notice-time-tag flex flex-row flex-items-center mt-16">
+            <uni-icons type="clock" size="18" color="#5A6780" />
+            <span class="color-171717 font-size-12 font-weight-600 ml-8">发布时间：{{ publishTime }}</span>
+          </div>
+
+          <div class="mt-16 mx-12 bg-gray w-full height-1"></div>
+
+          <div class="mt-16 color-666 font-size-14 line-height-20">{{ noticeContent }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import TopNavBar from "@/components/TopNavBar/index.vue";
+import { computed, ref } from "vue";
+
+const noticeData = ref({});
+
+const detailTitle = computed(() => {
+  return noticeData.value.entityName?.trim() || "消息详情";
+});
+
+const publishTime = computed(() => {
+  return noticeData.value.effectiveStartTime?.trim();
+});
+
+const coverImage = computed(() => {
+  return noticeData.value.eventImage?.trim();
+});
+
+const noticeContent = computed(() => {
+  return noticeData.value.eventDescription?.trim();
+});
+
+// TODO
+// onLoad((query = {}) => {
+//   if (query.noticeData) {
+//     try {
+//       noticeData.value = JSON.parse(decodeURIComponent(query.noticeData));
+//     } catch (error) {
+//       console.warn("noticeData parse failed:", error);
+//     }
+//   }
+// });
+
+</script>
+
+<style lang="scss" scoped>
+.notice-time-tag {
+  display: inline-flex;
+  height: 28px;
+  padding: 6px 12px;
+  background: linear-gradient(180deg, #f4f7fb 0%, #e9eef6 100%);
+  border: 1px solid #d6dde8;
+  border-radius: 14px;
+  box-sizing: border-box;
+}
+</style>
diff --git a/src/pages/home/components/NoticeMessage/index.vue b/src/pages/home/components/NoticeMessage/index.vue
new file mode 100644
index 0000000..c212ed9
--- /dev/null
+++ b/src/pages/home/components/NoticeMessage/index.vue
@@ -0,0 +1,127 @@
+<template>
+  <div v-if="hasBannerList">
+    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
+      :duration="duration" :indicator-dots="false">
+      <swiper-item v-for="item in bannerList" :key="item.entityName">
+        <div class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
+          <span class="text-color font-size-12 font-600">
+            {{ item.entityName }}
+          </span>
+          <div class="flex flex-row flex-justify-between">
+            <span class="text-color font-size-10 font-500">
+              发布时间：{{ item.effectiveStartTime }}
+            </span>
+            <text class="text-color font-size-10 font-500 underline-text">
+              详情
+            </text>
+          </div>
+        </div>
+      </swiper-item>
+    </swiper>
+
+    <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" duration="0.5" default-width="4px"
+      active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
+      active-color="rgba(255,255,255,1)" />
+
+  </div>
+
+  <div v-else-if="props.tipsMessage">
+    <div class="noMessage">
+      <span class="noMessage-text text-color font-size-12 font-600">
+        {{ props.tipsMessage }}
+      </span>
+    </div>
+  </div>
+
+</template>
+
+<script setup>
+import { computed, onMounted, ref } from "vue";
+import { getTimeNoticeList } from "@/request/api/MainPageDataApi";
+import { NOTICE_EVENT_LOGIN_SUCCESS } from "@/constant/constant";
+
+const props = defineProps({
+  tipsMessage: {
+    type: String,
+    default: "随时吩咐，懂你的旅游搭子",
+  },
+});
+
+const autoplay = ref(true);
+const interval = ref(7000);
+const duration = ref(500);
+
+const currentIndex = ref(0);
+const bannerList = ref([]);
+const hasBannerList = computed(() => Array.isArray(bannerList.value) && bannerList.value.length > 0);
+
+const onSwiperChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+
+const getTimeNoticeListData = async () => {
+  const res = await getTimeNoticeList();
+  if (res && res.code === 0) {
+    bannerList.value = Array.isArray(res.data) ? res.data : [];
+  }
+}
+
+onMounted(() => {
+  getTimeNoticeListData();
+  uni.$on(NOTICE_EVENT_LOGIN_SUCCESS, () => {
+    getTimeNoticeListData();
+  });
+});
+
+const clickItem = (item) => {
+  uni.navigateTo({
+    url: `/pages/ChatMain/NoticeMessage/detail?noticeData=${encodeURIComponent(JSON.stringify(item))}`
+  });
+}
+
+</script>
+
+<style lang="scss" scoped>
+.swiper {
+  height: 50px;
+  margin-top: 8px;
+}
+
+.swiper-item {
+  display: block;
+  height: 46px;
+  background: #EBEFFF;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  border: 1px solid #C7D2FE;
+}
+
+.text-color {
+  color: #0CCD58;
+}
+
+.underline-text {
+  text-decoration: underline;
+  text-decoration-color: #0CCD58;
+}
+
+.noMessage {
+  display: inline-flex;
+  margin-top: 8px;
+  padding: 4px 12px;
+  background: #EBEFFF;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 8px;
+  border: 1px solid #C7D2FE;
+  width: fit-content;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.noMessage-text {
+  line-height: 18px;
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: break-all;
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/home/components/OpenMapComponent/index.vue b/src/pages/home/components/OpenMapComponent/index.vue
new file mode 100644
index 0000000..024ce13
--- /dev/null
+++ b/src/pages/home/components/OpenMapComponent/index.vue
@@ -0,0 +1,48 @@
+<template>
+    <div class="w-full bg-white border-box border-ff overflow-hidden rounded-20 flex flex-col">
+        <!-- 占位撑开 -->
+        <div class="w-vw"></div>
+        <div class="flex flex-items-center flex-justify-between p-12 border-box" @click="openMap">
+            <div class="rounded-16 p-16 bg-theme-color-50">
+                <div class="w-32 h-32 rounded-full bg-white flex flex-items-center flex-justify-center">
+                    <uni-icons type="location" size="16" color="#171717" />
+                </div>
+            </div>
+            <div class="center ml-12">
+                <div class="font-color-900 font-size-14">打开导览地图</div>
+                <div class="font-color-500 font-size-12 mt-6">距你 {{ distance }} · 步行 {{ walk }}</div>
+            </div>
+            <div class="ml-12 flex flex-items-center flex-justify-center w-32 h-32 rounded-full bg-F2F5F8">
+                <uni-icons class="mb-2" type="right" size="12" color="#99A0AE" />
+            </div>
+        </div>
+    </div>
+
+</template>
+
+<script>
+export default {
+    name: 'OpenMapComponent',
+    props: {
+        distance: {
+            type: String,
+            default: '500m'
+        },
+        walk: {
+            type: String,
+            default: '8分钟'
+        }
+    },
+    methods: {
+        openMap() {
+            this.$emit('open')
+        }
+    }
+}
+</script>
+
+<style scoped>
+.center {
+    flex: 1 1 auto;
+}
+</style>
diff --git a/src/pages/home/components/PoiCompareCard/index.vue b/src/pages/home/components/PoiCompareCard/index.vue
new file mode 100644
index 0000000..2d97cf8
--- /dev/null
+++ b/src/pages/home/components/PoiCompareCard/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <div class="poi-compare-card w-full">
+    <div v-if="!isDetail" class="poi-compare-card__overdiv bg-white rounded-24 overflow-hidden">
+      <div class="poi-compare-card__head flex flex-items-center">
+        <div class="poi-compare-card__mark flex flex-items-center flex-justify-center rounded-full flex-shrink-0">
+          {{ data.icon }}
+        </div>
+        <div class="poi-compare-card__title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
+          {{ data.title }}
+        </div>
+      </div>
+
+      <div class="poi-compare-card__columns grid grid-cols-2 gap-16">
+        <div v-for="item in items" :key="item.id || item.name" class="poi-compare-card__place"
+          :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
+          <img class="poi-compare-card__image block w-full" :src="item.image" mode="aspectFill" />
+          <div v-for="field in item.fields" :key="field.label" class="poi-compare-card__field">
+            <div class="poi-compare-card__field-label color-94A3B8 font-size-12 font-800">
+              {{ field.label }}
+            </div>
+            <div v-if="field.tone" class="poi-compare-card__chip font-size-12 font-900"
+              :class="getToneClass(field.tone)">
+              {{ field.value }}
+            </div>
+            <div v-else class="poi-compare-card__field-value color-1E293B font-size-14 font-900">
+              {{ field.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div
+        class="poi-compare-card__primary flex flex-items-center flex-justify-center bg-0F172A color-white font-size-15 font-900"
+        :class="{ 'is-disabled': disabled }" @click="openDetail">
+        {{ data.detailButtonText }}
+      </div>
+    </div>
+
+    <div v-else class="poi-compare-card__detail-card bg-white rounded-24 overflow-hidden">
+      <div class="poi-compare-card__detail-head flex flex-items-center">
+        <div class="poi-compare-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
+          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+        </div>
+        <div class="poi-compare-card__detail-title color-1E293B font-size-20 font-900 flex-full">
+          {{ detail.title }}
+        </div>
+        <div class="poi-compare-card__compare-label color-94A3B8 font-size-12 font-900">
+          {{ detail.compareLabel }}
+        </div>
+      </div>
+
+      <div class="poi-compare-card__table">
+        <div class="poi-compare-card__table-head poi-compare-card__table-row">
+          <div></div>
+          <div v-for="item in items" :key="item.id || item.name"
+            class="poi-compare-card__table-title color-1E293B font-size-14 font-900">
+            {{ item.name }}
+          </div>
+        </div>
+        <div v-for="row in detail.rows" :key="row.label" class="poi-compare-card__table-row poi-compare-card__data-row">
+          <div class="poi-compare-card__row-label color-94A3B8 font-size-12 font-900">
+            {{ row.label }}
+          </div>
+          <div v-for="cell in row.values" :key="row.label + '-' + cell.text"
+            class="poi-compare-card__cell color-1E293B font-size-14 font-900" :class="getCellClass(cell.tone)">
+            {{ cell.text }}
+          </div>
+        </div>
+      </div>
+
+      <div class="poi-compare-card__recommend">
+        <div class="poi-compare-card__recommend-title color-94A3B8 font-size-12 font-900">
+          {{ detail.recommendTitle }}
+        </div>
+        <div class="poi-compare-card__tips">
+          <div v-for="tip in detail.tips" :key="tip.text" class="poi-compare-card__tip flex gap-10">
+            <div class="poi-compare-card__dot rounded-full flex-shrink-0" :class="getDotClass(tip.tone)" />
+            <div class="poi-compare-card__tip-text color-334155 font-size-14 font-900">
+              {{ tip.text }}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="poi-compare-card__actions grid grid-cols-2 gap-14">
+        <div v-for="action in detail.actions" :key="action.id || action.text"
+          class="poi-compare-card__action flex flex-items-center flex-justify-center font-size-15 font-900"
+          :class="[action.primary ? 'poi-compare-card__action--primary bg-0F172A color-white' : 'poi-compare-card__action--secondary color-334155', { 'is-disabled': disabled }]"
+          @click="handleAction(action)">
+          <span class="poi-compare-card__action-icon">{{ action.icon }}</span>
+          <span>{{ action.text }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back", "action"]);
+
+const isDetail = ref(false);
+const items = computed(() => props.data.items || []);
+const detail = computed(() => props.data.detail || {});
+
+const getToneClass = (tone) => {
+  const toneMap = {
+    green: "poi-compare-card__chip--green color-047857 bg-ECFDF5",
+    amber: "poi-compare-card__chip--amber color-D97706 bg-FFFBEB",
+  };
+  return toneMap[tone] || "";
+};
+
+const getCellClass = (tone) => {
+  if (tone === "green") return "poi-compare-card__cell--green";
+  return "";
+};
+
+const getDotClass = (tone) => {
+  if (tone === "blue") return "poi-compare-card__dot--blue";
+  return "poi-compare-card__dot--green";
+};
+
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
+
+const openDetail = () => {
+  if (props.disabled) return;
+  isDetail.value = true;
+  emit("select", { type: "detail", items: items.value });
+};
+
+const closeDetail = () => {
+  isDetail.value = false;
+  emit("back");
+};
+
+const handleAction = (action) => {
+  if (props.disabled) return;
+  emit("action", action);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/PoiCompareCard/mocks.js b/src/pages/home/components/PoiCompareCard/mocks.js
new file mode 100644
index 0000000..b08cc60
--- /dev/null
+++ b/src/pages/home/components/PoiCompareCard/mocks.js
@@ -0,0 +1,115 @@
+export default {
+  icon: "✧",
+  title: "小七对比：卧龙潭 vs 鸳鸯湖",
+  detailButtonText: "查看详细对比",
+  items: [
+    {
+      id: "wolongtan",
+      name: "卧龙潭",
+      image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=700&q=80",
+      fields: [
+        {
+          label: "景观类型",
+          value: "深潭观景",
+        },
+        {
+          label: "额外付费",
+          value: "免费",
+          tone: "green",
+        },
+        {
+          label: "开放时间",
+          value: "08:00–18:00",
+        },
+      ],
+    },
+    {
+      id: "yuanyanghu",
+      name: "鸳鸯湖",
+      image: "https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=700&q=80",
+      fields: [
+        {
+          label: "景观类型",
+          value: "湖泊划船",
+        },
+        {
+          label: "额外付费",
+          value: "需付费",
+          tone: "amber",
+        },
+        {
+          label: "开放时间",
+          value: "08:00–17:30",
+        },
+      ],
+    },
+  ],
+  detail: {
+    title: "详细对比",
+    compareLabel: "卧龙潭 vs 鸳鸯湖",
+    rows: [
+      {
+        label: "景观类型",
+        values: [
+          {
+            text: "深潭观景",
+          },
+          {
+            text: "湖泊划船",
+            tone: "green",
+          },
+        ],
+      },
+      {
+        label: "额外付费",
+        values: [
+          {
+            text: "免费",
+          },
+          {
+            text: "需付费",
+            tone: "green",
+          },
+        ],
+      },
+      {
+        label: "开放时间",
+        values: [
+          {
+            text: "08:00–18:00",
+          },
+          {
+            text: "08:00–17:30",
+            tone: "green",
+          },
+        ],
+      },
+    ],
+    recommendTitle: "小七推荐",
+    tips: [
+      {
+        tone: "green",
+        text: "拍照 / 打卡 → 选卧龙潭，碧绿深潭配青山，随手出片。",
+      },
+      {
+        tone: "blue",
+        text: "带小孩 / 慢玩 → 选鸳鸯湖，划船探险，时间充裕不赶路。",
+      },
+    ],
+    actions: [
+      {
+        id: "go-wolongtan",
+        text: "去卧龙潭",
+        icon: "↗",
+        targetId: "wolongtan",
+        primary: true,
+      },
+      {
+        id: "go-yuanyanghu",
+        text: "去鸳鸯湖",
+        icon: "↗",
+        targetId: "yuanyanghu",
+      },
+    ],
+  },
+};
diff --git a/src/pages/home/components/PoiCompareCard/styles/index.scss b/src/pages/home/components/PoiCompareCard/styles/index.scss
new file mode 100644
index 0000000..f5c3d5f
--- /dev/null
+++ b/src/pages/home/components/PoiCompareCard/styles/index.scss
@@ -0,0 +1,234 @@
+.poi-compare-card {
+  width: 100%;
+}
+
+.poi-compare-card__overdiv,
+.poi-compare-card__detail-card {
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.05);
+}
+
+.poi-compare-card__overdiv {
+  padding: 24px 26px;
+  box-sizing: border-box;
+}
+
+.poi-compare-card__head {
+  min-width: 0;
+}
+
+.poi-compare-card__mark {
+  width: 34px;
+  height: 34px;
+  margin-right: 12px;
+  border: 1px solid #fde68a;
+  color: #f59e0b;
+  font-size: 22px;
+  line-height: 1;
+  background: #fffbeb;
+  box-sizing: border-box;
+}
+
+.poi-compare-card__title {
+  min-width: 0;
+  line-height: 24px;
+}
+
+.poi-compare-card__columns {
+  margin-top: 28px;
+}
+
+.poi-compare-card__place {
+  min-width: 0;
+}
+
+.poi-compare-card__place:active,
+.poi-compare-card__primary:active,
+.poi-compare-card__action:active {
+  opacity: 0.86;
+}
+
+.poi-compare-card__place.is-disabled,
+.poi-compare-card__primary.is-disabled,
+.poi-compare-card__action.is-disabled {
+  opacity: 0.55;
+}
+
+.poi-compare-card__image {
+  height: 140px;
+  border-radius: 18px;
+}
+
+.poi-compare-card__field {
+  margin-top: 12px;
+}
+
+.poi-compare-card__field-label {
+  line-height: 16px;
+}
+
+.poi-compare-card__field-value {
+  margin-top: 5px;
+  line-height: 18px;
+}
+
+.poi-compare-card__chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 22px;
+  margin-top: 5px;
+  padding: 0 10px;
+  border-radius: 999px;
+  line-height: 22px;
+}
+
+.poi-compare-card__chip--green {
+  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.02);
+}
+
+.poi-compare-card__chip--amber {
+  box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.02);
+}
+
+.poi-compare-card__primary {
+  height: 52px;
+  margin-top: 28px;
+  border-radius: 16px;
+}
+
+.poi-compare-card__detail-head {
+  min-width: 0;
+  height: 70px;
+  padding: 0 28px;
+  border-bottom: 1px solid #f1f5f9;
+  box-sizing: border-box;
+}
+
+.poi-compare-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 14px;
+  color: #64748b;
+  font-size: 28px;
+  line-height: 1;
+  background: #f8fafc;
+}
+
+.poi-compare-card__detail-title {
+  min-width: 0;
+  line-height: 24px;
+}
+
+.poi-compare-card__compare-label {
+  max-width: 142px;
+  text-align: right;
+  line-height: 16px;
+}
+
+.poi-compare-card__table {
+  padding: 18px 12px 0;
+}
+
+.poi-compare-card__table-row {
+  display: grid;
+  grid-template-columns: 29% 35.5% 35.5%;
+  align-items: stretch;
+}
+
+.poi-compare-card__table-head {
+  min-height: 36px;
+}
+
+.poi-compare-card__table-title {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 18px;
+}
+
+.poi-compare-card__data-row {
+  border-top: 1px solid #f1f5f9;
+}
+
+.poi-compare-card__row-label {
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  padding-left: 14px;
+  background: #fff;
+  line-height: 18px;
+  box-sizing: border-box;
+}
+
+.poi-compare-card__cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 52px;
+  text-align: center;
+  line-height: 18px;
+  background: #f8fafc;
+}
+
+.poi-compare-card__cell--green {
+  background: #ecfdf5;
+}
+
+.poi-compare-card__recommend {
+  padding: 20px 30px 0;
+}
+
+.poi-compare-card__recommend-title {
+  line-height: 16px;
+}
+
+.poi-compare-card__tips {
+  margin-top: 20px;
+  padding: 18px 16px;
+  border: 1px solid #e2e8f0;
+  border-radius: 16px;
+  background: #f8fafc;
+}
+
+.poi-compare-card__tip + .poi-compare-card__tip {
+  margin-top: 14px;
+}
+
+.poi-compare-card__dot {
+  width: 8px;
+  height: 8px;
+  margin-top: 8px;
+}
+
+.poi-compare-card__dot--green {
+  background: #10b981;
+}
+
+.poi-compare-card__dot--blue {
+  background: #3b82f6;
+}
+
+.poi-compare-card__tip-text {
+  line-height: 22px;
+}
+
+.poi-compare-card__actions {
+  padding: 26px 30px 26px;
+}
+
+.poi-compare-card__action {
+  height: 54px;
+  border-radius: 16px;
+  box-sizing: border-box;
+}
+
+.poi-compare-card__action--secondary {
+  border: 1px solid #e2e8f0;
+  background: #fff;
+}
+
+.poi-compare-card__action-icon {
+  margin-right: 8px;
+  font-size: 18px;
+  line-height: 18px;
+}
diff --git a/src/pages/home/components/PoiDetailCard/index.vue b/src/pages/home/components/PoiDetailCard/index.vue
new file mode 100644
index 0000000..14b4ee7
--- /dev/null
+++ b/src/pages/home/components/PoiDetailCard/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="poi-detail-card bg-white rounded-24 border-box overflow-hidden">
+    <div class="poi-detail-card__hero relative">
+      <image class="poi-detail-card__image w-full h-full block rounded-18" :src="data.image" mode="aspectFill" />
+      <div class="poi-detail-card__badge flex flex-items-center gap-4 font-size-10 font-900">
+        <span class="poi-detail-card__badge-icon">⌖</span>
+        <span>{{ data.badge?.text }}</span>
+      </div>
+    </div>
+
+    <div class="poi-detail-card__body">
+      <div class="poi-detail-card__title color-1E293B font-size-24 font-900">
+        {{ data.title }}
+      </div>
+
+      <div class="poi-detail-card__tip flex flex-items-center gap-10">
+        <div class="poi-detail-card__spark color-047857 font-size-18 font-900">✦</div>
+        <div class="poi-detail-card__tip-text color-047857 font-size-14 font-800">
+          {{ data.tip?.text }}
+        </div>
+      </div>
+
+      <div
+        class="poi-detail-card__button flex flex-items-center flex-justify-center gap-8 color-white bg-0F172A font-size-16 font-900"
+        :class="{ 'is-disabled': disabled }" @click="handleAction">
+        <span class="poi-detail-card__button-icon">↗</span>
+        <span>{{ data.action?.text }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["action"]);
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/PoiDetailCard/mocks.js b/src/pages/home/components/PoiDetailCard/mocks.js
new file mode 100644
index 0000000..fe2ee8d
--- /dev/null
+++ b/src/pages/home/components/PoiDetailCard/mocks.js
@@ -0,0 +1,13 @@
+export default {
+  title: "小七孔古桥",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=900&q=80",
+  badge: {
+    text: "核心地标",
+  },
+  tip: {
+    text: "建于道光十五年，走过这座桥就算跨省了哦～",
+  },
+  action: {
+    text: "带我去",
+  },
+};
diff --git a/src/pages/home/components/PoiDetailCard/styles/index.scss b/src/pages/home/components/PoiDetailCard/styles/index.scss
new file mode 100644
index 0000000..8ece0e1
--- /dev/null
+++ b/src/pages/home/components/PoiDetailCard/styles/index.scss
@@ -0,0 +1,69 @@
+.poi-detail-card {
+  border: 1px solid rgba(15, 23, 42, 0.04);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
+}
+
+.poi-detail-card__hero {
+  height: 206px;
+  padding: 8px 8px 0;
+}
+
+.poi-detail-card__badge {
+  position: absolute;
+  top: 18px;
+  left: 22px;
+  min-height: 30px;
+  padding: 0 12px;
+  border-radius: 999px;
+  color: #059669;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(8px);
+}
+
+.poi-detail-card__badge-icon {
+  font-size: 13px;
+  line-height: 1;
+}
+
+.poi-detail-card__body {
+  padding: 18px 26px 24px;
+}
+
+.poi-detail-card__title {
+  line-height: 32px;
+  letter-spacing: 0;
+}
+
+.poi-detail-card__tip {
+  min-height: 46px;
+  margin-top: 16px;
+  padding: 0 14px;
+  border: 1px solid #d1fae5;
+  border-radius: 12px;
+  background: linear-gradient(90deg, #ecfdf5 0%, rgba(240, 253, 244, 0.34) 100%);
+}
+
+.poi-detail-card__spark {
+  line-height: 1;
+}
+
+.poi-detail-card__tip-text {
+  flex: 1;
+  min-width: 0;
+  line-height: 20px;
+}
+
+.poi-detail-card__button {
+  height: 54px;
+  margin-top: 16px;
+  border-radius: 14px;
+}
+
+.poi-detail-card__button.is-disabled {
+  opacity: 0.55;
+}
+
+.poi-detail-card__button-icon {
+  font-size: 18px;
+  line-height: 1;
+}
diff --git a/src/pages/home/components/QuickBookingCalender/index.vue b/src/pages/home/components/QuickBookingCalender/index.vue
new file mode 100644
index 0000000..453c387
--- /dev/null
+++ b/src/pages/home/components/QuickBookingCalender/index.vue
@@ -0,0 +1,66 @@
+<template>
+  <div class="date-picker">
+    <div class="date-list">
+      <div v-for="(item, index) in dates" :key="index" class="date-item" :class="{ active: index === activeIndex }"
+        @click="selectDate(index)">
+        <span class="label">{{ item.label }}</span>
+        <span class="date">{{ item.date }}</span>
+      </div>
+
+      <!-- 日历按钮 -->
+      <div class="calendar-btn btn-bom" @click="openCalendar">
+        <img src="https://oss.nianxx.cn/mp/static/booking_calendar.png" mode="widthFix" class="calendar-img" />
+        <span class="calendar-text">日历</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+const emit = defineEmits(["update:date"]); // 声明事件
+
+const activeIndex = ref(2); // 默认今天
+const dates = ref([]);
+
+// 初始化日期（前天、昨天、今天、明天、后天）
+const initDates = () => {
+  const today = new Date();
+  const labels = ["前天", "昨天", "今天", "明天", "后天"];
+  for (let i = -2; i <= 2; i++) {
+    const d = new Date(today);
+    d.setDate(today.getDate() + i);
+    const month = d.getMonth() + 1;
+    const day = d.getDate();
+    dates.value.push({
+      label: labels[i + 2],
+      date: `${month}/${day}`,
+      fullDate: `${d.getFullYear()}-${String(month).padStart(2, "0")}-${String(
+        day
+      ).padStart(2, "0")}`,
+    });
+  }
+};
+
+const selectDate = (index) => {
+  activeIndex.value = index;
+  emit("update:date", dates.value[index]); // 传回父组件
+};
+
+const openCalendar = () => {
+  uni.$emit("openCalendar");
+
+  uni.$on("selectCalendarDate", (date) => {
+    emit("update:date", { fullDate: date });
+    uni.$off("selectCalendarDate");
+  });
+};
+
+onMounted(() => {
+  initDates();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/QuickBookingCalender/styles/index.scss b/src/pages/home/components/QuickBookingCalender/styles/index.scss
new file mode 100644
index 0000000..68aeb45
--- /dev/null
+++ b/src/pages/home/components/QuickBookingCalender/styles/index.scss
@@ -0,0 +1,57 @@
+.date-picker {
+  background: rgba(140, 236, 255, 0.24);
+  padding: 8rpx 0;
+  border-radius: 16rpx;
+  margin: 12px 0 6px;
+  min-width: 325px;
+  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1); /* 阴影 */
+}
+
+.date-list {
+  display: flex;
+}
+
+.date-item,
+.calendar-btn {
+  flex: 1; /* 等宽 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 12rpx 0;
+  border-radius: 16rpx;
+}
+
+.label {
+  font-size: 24rpx;
+  color: $uni-text-color-grey;
+}
+.date {
+  font-size: 28rpx;
+  font-weight: bold;
+  color: #555;
+}
+
+.date-item.active {
+  background-color: #0ccd58;
+}
+.date-item.active .label,
+.date-item.active .date {
+  color: #fff;
+}
+
+/* 日历按钮 */
+.calendar-btn {
+  background: #fff;
+  border-radius: 0 16rpx 16rpx 0;
+  margin: -8rpx 0;
+}
+.calendar-img {
+  width: 16px;
+  height: 16px;
+}
+.calendar-text {
+  font-size: 22rpx;
+  color: #666;
+  margin-top: 4rpx;
+}
diff --git a/src/pages/home/components/QuickBookingComponent/index.vue b/src/pages/home/components/QuickBookingComponent/index.vue
new file mode 100644
index 0000000..74cbb15
--- /dev/null
+++ b/src/pages/home/components/QuickBookingComponent/index.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="container">
+    <QuickBookingCalender class="calendar" @update:date="onDateSelected" />
+    <div v-for="item in commodityGroupDTOList" :key="commodityGroupKey(item.title)">
+      <QuickBookingContentList :commodityDTO="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import QuickBookingCalender from "../QuickBookingCalender/index.vue";
+import QuickBookingContentList from "../QuickBookingContentList/index.vue";
+import { ref, nextTick } from "vue";
+import { onMounted } from "vue";
+import { quickBookingComponent } from "@/request/api/MainPageDataApi";
+import { SCROLL_TO_BOTTOM } from "@/constant/constant";
+
+const selectedDate = ref({});
+
+const commodityGroupDTOList = ref([]);
+const formattedDate = ref("");
+
+const loadQuickBookingComponent = async () => {
+  formattedDate.value = formatDate(selectedDate.value.fullDate || new Date());
+  const res = await quickBookingComponent(formattedDate.value);
+  if (res.code === 0 && res.data) {
+    commodityGroupDTOList.value = res.data.commodityGroupDTOList;
+    nextTick(() => {
+      setTimeout(() => {
+        uni.$emit(SCROLL_TO_BOTTOM, true);
+      }, 300);
+    });
+  }
+};
+
+const onDateSelected = (date) => {
+  console.log("Selected date:", date);
+  selectedDate.value = date;
+  loadQuickBookingComponent();
+};
+
+// 格式化日期为 yyyy-MM-dd
+const formatDate = (date) => {
+  const d = new Date(date);
+  const year = d.getFullYear();
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+};
+
+const commodityGroupKey = (title) => {
+  return `${title}${formattedDate.value}`;
+};
+
+onMounted(() => {
+  console.log("=============");
+  loadQuickBookingComponent();
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/QuickBookingComponent/styles/index.scss b/src/pages/home/components/QuickBookingComponent/styles/index.scss
new file mode 100644
index 0000000..34a5eee
--- /dev/null
+++ b/src/pages/home/components/QuickBookingComponent/styles/index.scss
@@ -0,0 +1,9 @@
+.container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 12px;
+
+  .calendar {
+    width: 100%;
+  }
+}
diff --git a/src/pages/home/components/QuickBookingContentList/index.vue b/src/pages/home/components/QuickBookingContentList/index.vue
new file mode 100644
index 0000000..b5fa7e1
--- /dev/null
+++ b/src/pages/home/components/QuickBookingContentList/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="container">
+    <ModuleTitle :title="commodityDTO.title" />
+    <div class="container-scroll">
+      <div v-for="(item, index) in commodityDTO.commodityList" :key="`${item.commodityId}-${index}`">
+        <div class="mk-card-item" @click="placeOrderHandle(item)">
+          <!-- <div class="card-badge">超值推荐</div> -->
+          <img class="card-img" :src="item.commodityIcon" mode="aspectFill" />
+          <div class="card-content">
+            <div class="card-title-column">
+              <span class="card-title">{{ item.commodityName }}</span>
+              <div class="card-tags" v-for="tag in item.commodityTradeRuleList" :key="tag">
+                <span class="card-tag">{{ tag }}</span>
+              </div>
+            </div>
+            <template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
+              <div v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</div>
+            </template>
+            <div class="card-bottom-row">
+              <div class="card-price-row">
+                <span class="card-price-fu">￥</span>
+                <span class="card-price">{{ item.commodityPrice }}</span>
+                <span class="card-unit">/{{ item.stockUnitLabel }}</span>
+              </div>
+
+              <span class="card-btn">下单</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { checkToken } from "@/hooks/useGoLogin";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
+const props = defineProps({
+  commodityDTO: {
+    type: Object,
+    default: {},
+  },
+});
+
+/// 去下单
+const placeOrderHandle = (item) => {
+  checkToken().then(() => {
+    uni.navigateTo({
+      url: `/pages/goods/index?commodityId=${item.commodityId}`,
+    });
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/QuickBookingContentList/styles/index.scss b/src/pages/home/components/QuickBookingContentList/styles/index.scss
new file mode 100644
index 0000000..b619782
--- /dev/null
+++ b/src/pages/home/components/QuickBookingContentList/styles/index.scss
@@ -0,0 +1,137 @@
+.container {
+  .container-scroll {
+    display: flex;
+    flex-direction: row;
+    overflow-x: auto;
+    overflow-y: hidden;
+    margin: 4px 0;
+
+    .mk-card-item {
+      position: relative;
+
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+      width: 188px;
+      //   height: 244px;
+      background-color: #fff;
+      border-radius: 10px;
+      margin-right: 8px;
+      padding-bottom: 12px;
+
+      .card-badge {
+        position: absolute;
+        top: 8px;
+        left: 8px;
+        background: #ffe7b2;
+        color: #b97a00;
+        font-size: $uni-font-size-sm;
+        padding: 2px 8px;
+        border-radius: 4px;
+        z-index: 2;
+      }
+
+      .card-img {
+        width: 188px;
+        height: 114px;
+        border-radius: 10px;
+        object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
+        flex-shrink: 0; /* 防止图片被压缩 */
+      }
+
+      .card-content {
+        box-sizing: border-box;
+        padding: 10px 12px 0 12px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        align-items: start;
+        width: 100%;
+        flex: 1; /* 让内容区域占据剩余空间 */
+        overflow: hidden; /* 防止内容溢出 */
+      }
+
+      .card-title-column {
+        display: flex;
+        align-items: start;
+        flex-direction: column;
+        width: 100%;
+      }
+
+      .card-title {
+        font-size: $uni-font-size-lg;
+        font-weight: bold;
+        color: #222;
+        width: 100%;
+        /* 限制标题最多显示两行 */
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        line-height: 1.4;
+        max-height: 2.8em; /* 2行的高度 */
+      }
+
+      .card-tags {
+        display: flex;
+        flex-direction: row;
+        align-items: start;
+        padding: 6px 0;
+      }
+
+      .card-tag {
+        color: #ff6600;
+        font-size: 10px;
+        border-radius: 4px;
+        padding: 0 6px;
+        margin-left: 2px;
+        border: 1px solid #ff6600;
+      }
+
+      .card-desc {
+        font-size: 13px;
+        color: #888;
+        margin-top: 2px;
+      }
+
+      .card-bottom-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 8px;
+        width: 100%;
+      }
+
+      .card-price-row {
+        .card-price-fu {
+          color: #ff6600;
+          font-size: 11px;
+          font-weight: normal;
+        }
+
+        .card-price {
+          color: #ff6600;
+          font-size: $uni-font-size-lg;
+          font-weight: bold;
+        }
+        .card-unit {
+          font-size: 11px;
+          color: #888;
+          font-weight: normal;
+          margin-left: 2px;
+        }
+      }
+
+      .card-btn {
+        background: #ff6600;
+        color: #fff;
+        font-size: 15px;
+        border-radius: 20px;
+        padding: 0 18px;
+        height: 32px;
+        line-height: 32px;
+      }
+    }
+  }
+}
diff --git a/src/pages/home/components/RecommendPostsComponent/index.vue b/src/pages/home/components/RecommendPostsComponent/index.vue
new file mode 100644
index 0000000..a2c4378
--- /dev/null
+++ b/src/pages/home/components/RecommendPostsComponent/index.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="container">
+    <div v-for="item in recommendThemeList" :key="item.themeName">
+      <RecommendPostsList v-if="item.recommendPostsList.length > 0" :recommendTheme="item" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import RecommendPostsList from "../RecommendPostsList/index.vue";
+
+import { defineProps } from "vue";
+const props = defineProps({
+  recommendThemeList: {
+    type: Array,
+    default: [],
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/RecommendPostsComponent/styles/index.scss b/src/pages/home/components/RecommendPostsComponent/styles/index.scss
new file mode 100644
index 0000000..9da07fd
--- /dev/null
+++ b/src/pages/home/components/RecommendPostsComponent/styles/index.scss
@@ -0,0 +1,5 @@
+.container {
+  width: 100%;
+  flex: 1;
+  margin-bottom: 12px;
+}
diff --git a/src/pages/home/components/RecommendPostsList/index.vue b/src/pages/home/components/RecommendPostsList/index.vue
new file mode 100644
index 0000000..c34e2ab
--- /dev/null
+++ b/src/pages/home/components/RecommendPostsList/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="container">
+    <ModuleTitle :title="recommendTheme.themeName" />
+
+    <div class="container-scroll font-size-0 scroll-x whitespace-nowrap">
+      <div class="card-item bg-white inline-block rounded-20 mr-8"
+        v-for="(item, index) in recommendTheme.recommendPostsList" :key="index" @click="sendReply(item)">
+        <div class="m-4 relative">
+          <img class="card-img rounded-16 relative z-10" :src="item.coverPhoto" mode="aspectFill" />
+
+          <div class="shadow absolute rounded-16"></div>
+        </div>
+
+        <div class="card-text border-box">
+          <div class="font-size-11 color-99A0AE ellipsis-1">
+            {{ item.topic }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+import { SEND_MESSAGE_CONTENT_TEXT, SEND_MESSAGE_COMMAND_TYPE } from "@/constant/constant";
+import ModuleTitle from "@/components/ModuleTitle/index.vue";
+
+const props = defineProps({
+  recommendTheme: {
+    type: Object,
+    default: {},
+  },
+});
+
+const sendReply = (item) => {
+  if (item.userInputContentType && item.userInputContentType === '1') {
+    const commonItem = { type: item.userInputContent, title: item.topic }
+    uni.$emit(SEND_MESSAGE_COMMAND_TYPE, commonItem);
+    return;
+  }
+  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item.userInputContent);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/RecommendPostsList/styles/index.scss b/src/pages/home/components/RecommendPostsList/styles/index.scss
new file mode 100644
index 0000000..bd6fe32
--- /dev/null
+++ b/src/pages/home/components/RecommendPostsList/styles/index.scss
@@ -0,0 +1,26 @@
+.container-scroll {
+  margin: 4px 0 6px;
+}
+
+.card-item {
+  width: 128px;
+}
+
+.card-img {
+  height: 120px;
+  width: 120px;
+}
+
+.shadow {
+  background-color: #e5e8ee;
+  height: 96px;
+  width: 96px;
+  bottom: -4px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1;
+}
+
+.card-text {
+  padding: 4px 8px 8px;
+}
diff --git a/src/pages/home/components/RecommendationListCard/index.vue b/src/pages/home/components/RecommendationListCard/index.vue
new file mode 100644
index 0000000..6212279
--- /dev/null
+++ b/src/pages/home/components/RecommendationListCard/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="recommendation-list-card w-full">
+    <div class="recommendation-list-card__scroll scroll-x whitespace-nowrap w-full" scroll-x :show-scrollbar="false"
+      enhanced>
+      <div v-for="item in items" :key="item.id || item.title"
+        class="recommendation-list-card__item inline-block bg-white rounded-20 overflow-hidden"
+        :class="{ 'is-disabled': disabled }" @click="handleSelect(item)">
+        <img class="recommendation-list-card__image block w-full" :src="item.image" mode="aspectFill" />
+        <div class="recommendation-list-card__body p-16">
+          <div class="recommendation-list-card__name color-1E293B font-size-18 font-900 ellipsis-1">
+            {{ item.title }}
+          </div>
+          <div
+            class="recommendation-list-card__distance flex flex-items-center gap-4 mt-4 color-94A3B8 font-size-12 font-800">
+            <span class="recommendation-list-card__pin">⌖</span>
+            <span>{{ item.distance }}</span>
+          </div>
+          <div
+            class="recommendation-list-card__button flex flex-items-center flex-justify-center mt-12 color-334155 font-size-12 font-900"
+            @click.stop="handleSelect(item)">
+            {{ getActionText(item) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+const items = computed(() => props.data.items || []);
+
+const getActionText = (item) => {
+  return (item.action && item.action.text) || "";
+};
+
+const handleSelect = (item) => {
+  if (props.disabled) return;
+  emit("select", item);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/RecommendationListCard/mocks.js b/src/pages/home/components/RecommendationListCard/mocks.js
new file mode 100644
index 0000000..e04152e
--- /dev/null
+++ b/src/pages/home/components/RecommendationListCard/mocks.js
@@ -0,0 +1,22 @@
+export default {
+  items: [
+    {
+      id: "waterfall",
+      title: "翠谷瀑布",
+      image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=700&q=80",
+      distance: "1.2km",
+      action: {
+        text: "查看详情",
+      },
+    },
+    {
+      id: "forest",
+      title: "水上森林",
+      image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=700&q=80",
+      distance: "2.5km",
+      action: {
+        text: "查看详情",
+      },
+    },
+  ],
+};
diff --git a/src/pages/home/components/RecommendationListCard/styles/index.scss b/src/pages/home/components/RecommendationListCard/styles/index.scss
new file mode 100644
index 0000000..2d176c6
--- /dev/null
+++ b/src/pages/home/components/RecommendationListCard/styles/index.scss
@@ -0,0 +1,53 @@
+.recommendation-list-card {
+  padding: 4px 0 8px;
+}
+
+.recommendation-list-card__scroll {
+  padding-bottom: 2px;
+}
+
+.recommendation-list-card__item {
+  width: 200px;
+  margin-right: 14px;
+  vertical-align: top;
+  border: 1px solid #f1f5f9;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
+  box-sizing: border-box;
+}
+
+.recommendation-list-card__item:active {
+  opacity: 0.86;
+}
+
+.recommendation-list-card__item.is-disabled {
+  opacity: 0.55;
+}
+
+.recommendation-list-card__image {
+  height: 110px;
+}
+
+.recommendation-list-card__body {
+  box-sizing: border-box;
+}
+
+.recommendation-list-card__name {
+  line-height: 22px;
+}
+
+.recommendation-list-card__distance {
+  line-height: 16px;
+}
+
+.recommendation-list-card__pin {
+  font-size: 13px;
+  line-height: 13px;
+}
+
+.recommendation-list-card__button {
+  height: 36px;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  background: #f8fafc;
+  box-sizing: border-box;
+}
diff --git a/src/pages/home/components/RoutePlanCard/index.vue b/src/pages/home/components/RoutePlanCard/index.vue
new file mode 100644
index 0000000..47432e7
--- /dev/null
+++ b/src/pages/home/components/RoutePlanCard/index.vue
@@ -0,0 +1,133 @@
+<template>
+  <div class="route-plan-card w-full">
+    <div v-if="!detailOpen"
+      class="route-plan-card__summary flex flex-items-center bg-white rounded-24 overflow-hidden w-full"
+      :class="{ 'is-disabled': disabled }" @click="openDetail">
+      <img class="route-plan-card__cover block flex-shrink-0" :src="data.image" mode="aspectFill" />
+      <div class="route-plan-card__body flex-full">
+        <div class="route-plan-card__title color-1E293B font-size-18 font-900 ellipsis-1">
+          {{ data.title }}
+        </div>
+        <div class="route-plan-card__tags flex flex-items-center">
+          <div v-for="tag in summaryTags" :key="tag.id || tag.text" class="route-plan-card__tag font-size-12 font-900"
+            :class="getTagClass(tag.tone)">
+            {{ tag.text }}
+          </div>
+        </div>
+      </div>
+      <div class="flex-shrink-0">
+        <uni-icons type="right" size="16" color="#CBD5E1"></uni-icons>
+      </div>
+    </div>
+
+    <div v-else class="route-plan-card__detail bg-white rounded-24 overflow-hidden w-full">
+      <div class="route-plan-card__detail-head flex flex-items-center">
+        <div class="route-plan-card__back flex flex-items-center flex-justify-center rounded-full flex-shrink-0"
+          @click="closeDetail">
+          <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+        </div>
+        <div class="route-plan-card__detail-title color-1E293B font-size-18 font-900 ellipsis-1 flex-full">
+          {{ data.title }}
+        </div>
+        <div class="route-plan-card__detail-badge color-047857 bg-ECFDF5 font-size-12 font-900">
+          {{ detail.badge }}
+        </div>
+      </div>
+
+      <div class="route-plan-card__timeline">
+        <template v-for="(node, index) in nodes" :key="node.id || node.title">
+          <div class="route-plan-card__node-wrap" :class="{ 'is-disabled': disabled }" @click="handleSelect(node)">
+            <div
+              class="route-plan-card__node-number flex flex-items-center flex-justify-center rounded-full color-047857 bg-ECFDF5 font-size-12 font-900">
+              {{ index + 1 }}
+            </div>
+            <div class="route-plan-card__node bg-white rounded-20 flex flex-items-center">
+              <img class="route-plan-card__node-image block flex-shrink-0" :src="node.image" mode="aspectFill" />
+              <div class="route-plan-card__node-body flex-full">
+                <div class="route-plan-card__node-title color-1E293B font-size-16 font-900 ellipsis-1">
+                  {{ node.title }}
+                </div>
+                <div class="route-plan-card__node-desc color-94A3B8 font-size-12 font-800 ellipsis-1">
+                  {{ node.description }}
+                </div>
+                <div v-if="node.tag" class="route-plan-card__node-tag color-D97706 bg-FFFBEB font-size-12 font-900">
+                  {{ node.tag }}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-if="connectors[index]" class="route-plan-card__connector">
+            <div class="route-plan-card__connector-line"></div>
+            <div class="route-plan-card__connector-arrow"></div>
+            <div
+              class="route-plan-card__connector-chip flex flex-items-center bg-F8FAFC rounded-full color-64748B font-size-12 font-900">
+              <span class="route-plan-card__connector-icon">{{ connectors[index].icon }}</span>
+              <span>{{ connectors[index].text }}</span>
+            </div>
+          </div>
+        </template>
+      </div>
+
+      <div v-if="tips.length" class="route-plan-card__tips bg-F8FAFC rounded-20">
+        <div class="route-plan-card__tips-title color-64748B font-size-14 font-900">
+          {{ detail.tipsTitle }}
+        </div>
+        <div v-for="tip in tips" :key="tip"
+          class="route-plan-card__tip flex flex-items-center color-334155 font-size-13 font-900">
+          <div class="route-plan-card__tip-dot rounded-full flex-shrink-0"></div>
+          <div>{{ tip }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "back"]);
+
+const detailOpen = ref(false);
+const detail = computed(() => props.data.detail || {});
+const summaryTags = computed(() => props.data.summaryTags || []);
+const nodes = computed(() => detail.value.nodes || []);
+const connectors = computed(() => detail.value.connectors || []);
+const tips = computed(() => detail.value.tips || []);
+
+const getTagClass = (tone) => {
+  if (tone === "green") return "color-047857 bg-ECFDF5";
+  return "color-64748B bg-F1F5F9";
+};
+
+const openDetail = () => {
+  if (props.disabled) return;
+  detailOpen.value = true;
+  emit("select", props.data);
+};
+
+const closeDetail = () => {
+  detailOpen.value = false;
+  emit("back");
+};
+
+const handleSelect = (node) => {
+  if (props.disabled) return;
+  emit("select", node);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/RoutePlanCard/mocks.js b/src/pages/home/components/RoutePlanCard/mocks.js
new file mode 100644
index 0000000..fbff37a
--- /dev/null
+++ b/src/pages/home/components/RoutePlanCard/mocks.js
@@ -0,0 +1,74 @@
+export default {
+  id: "east-in-west-out",
+  title: "经典东进西出",
+  image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
+  summaryTags: [
+    {
+      id: "spots",
+      text: "4 个景点",
+      tone: "green",
+    },
+    {
+      id: "duration",
+      text: "5–6 小时",
+      tone: "gray",
+    },
+    {
+      id: "direction",
+      text: "东进西出",
+      tone: "gray",
+    },
+  ],
+  detail: {
+    badge: "4 个景点",
+    tipsTitle: "出行贴士",
+    nodes: [
+      {
+        id: "xiaoqikong-bridge",
+        title: "小七孔古桥",
+        description: "清代古桥，景区得名之处",
+        image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=400&q=80",
+      },
+      {
+        id: "cuigu-waterfall",
+        title: "翠谷瀑布",
+        description: "落差110米，国内罕见跌水群",
+        image: "https://images.unsplash.com/photo-1432405972618-c60b0225b8f9?auto=format&fit=crop&w=400&q=80",
+      },
+      {
+        id: "water-forest",
+        title: "水上森林",
+        description: "水中有树，绝无仅有",
+        image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?auto=format&fit=crop&w=400&q=80",
+        tag: "可竹筏游览",
+      },
+      {
+        id: "wolongtan",
+        title: "卧龙潭",
+        description: "蓝柔深潭，漂流终点",
+        image: "https://images.unsplash.com/photo-1559734840-f9509ee5677f?auto=format&fit=crop&w=400&q=80",
+        tag: "可卧龙潭漂流",
+      },
+    ],
+    connectors: [
+      {
+        icon: "👣",
+        text: "步行 · 约5分钟",
+      },
+      {
+        icon: "🚌",
+        text: "观光车 · 约6分钟",
+      },
+      {
+        icon: "🚣",
+        text: "漂流 · 约40分钟",
+      },
+    ],
+    tips: [
+      "旺季9点前入园，避开团客高峰",
+      "中午在翠谷小吃摊补给",
+      "下午2点后拍翠谷瀑布最出片",
+      "观光车票50元，建议入园即购",
+    ],
+  },
+};
diff --git a/src/pages/home/components/RoutePlanCard/styles/index.scss b/src/pages/home/components/RoutePlanCard/styles/index.scss
new file mode 100644
index 0000000..33ba781
--- /dev/null
+++ b/src/pages/home/components/RoutePlanCard/styles/index.scss
@@ -0,0 +1,227 @@
+.route-plan-card {
+  width: 100%;
+}
+
+.route-plan-card__summary,
+.route-plan-card__detail {
+  border: 1px solid rgba(226, 232, 240, 0.72);
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.05);
+  box-sizing: border-box;
+}
+
+.route-plan-card__summary {
+  min-height: 108px;
+  padding: 16px 20px;
+}
+
+.route-plan-card__summary:active,
+.route-plan-card__node-wrap:active {
+  opacity: 0.86;
+}
+
+.route-plan-card__summary.is-disabled,
+.route-plan-card__node-wrap.is-disabled {
+  opacity: 0.55;
+}
+
+.route-plan-card__cover {
+  width: 76px;
+  height: 76px;
+  border-radius: 10px;
+}
+
+.route-plan-card__body {
+  min-width: 0;
+  margin-left: 18px;
+}
+
+.route-plan-card__title {
+  line-height: 24px;
+}
+
+.route-plan-card__tags {
+  min-width: 0;
+  margin-top: 10px;
+}
+
+.route-plan-card__tag {
+  height: 24px;
+  padding: 0 11px;
+  border-radius: 999px;
+  line-height: 24px;
+  white-space: nowrap;
+}
+
+.route-plan-card__tag + .route-plan-card__tag {
+  margin-left: 8px;
+}
+
+.route-plan-card__arrow {
+  width: 12px;
+  height: 12px;
+  margin-left: 14px;
+  border-top: 2px solid #cbd5e1;
+  border-right: 2px solid #cbd5e1;
+  transform: rotate(45deg);
+}
+
+.route-plan-card__detail {
+  padding-bottom: 26px;
+}
+
+.route-plan-card__detail-head {
+  min-width: 0;
+  height: 70px;
+  padding: 0 22px;
+  border-bottom: 1px solid #f1f5f9;
+  box-sizing: border-box;
+}
+
+.route-plan-card__back {
+  width: 34px;
+  height: 34px;
+  margin-right: 14px;
+  color: #64748b;
+  font-size: 28px;
+  line-height: 1;
+  background: #f8fafc;
+}
+
+.route-plan-card__detail-title {
+  min-width: 0;
+  line-height: 24px;
+}
+
+.route-plan-card__detail-badge {
+  height: 26px;
+  margin-left: 12px;
+  padding: 0 12px;
+  border-radius: 999px;
+  line-height: 26px;
+  white-space: nowrap;
+}
+
+.route-plan-card__timeline {
+  padding: 26px 18px 0;
+}
+
+.route-plan-card__node-wrap {
+  position: relative;
+}
+
+.route-plan-card__node-number {
+  position: absolute;
+  left: 20px;
+  top: 50%;
+  z-index: 2;
+  width: 26px;
+  height: 26px;
+  transform: translateY(-50%);
+}
+
+.route-plan-card__node {
+  min-height: 88px;
+  padding: 12px 16px 12px 56px;
+  border: 1px solid #e5e7eb;
+  box-sizing: border-box;
+}
+
+.route-plan-card__node-image {
+  width: 64px;
+  height: 64px;
+  margin-right: 14px;
+  border-radius: 10px;
+}
+
+.route-plan-card__node-body {
+  min-width: 0;
+}
+
+.route-plan-card__node-title {
+  line-height: 22px;
+}
+
+.route-plan-card__node-desc {
+  margin-top: 4px;
+  line-height: 18px;
+}
+
+.route-plan-card__node-tag {
+  display: inline-flex;
+  align-items: center;
+  height: 22px;
+  margin-top: 6px;
+  padding: 0 9px;
+  border: 1px solid #fde68a;
+  border-radius: 999px;
+  line-height: 22px;
+}
+
+.route-plan-card__connector {
+  position: relative;
+  height: 56px;
+}
+
+.route-plan-card__connector-line {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 2px;
+  height: 52px;
+  border-radius: 2px;
+  background: #bbf7d0;
+}
+
+.route-plan-card__connector-arrow {
+  position: absolute;
+  left: 50%;
+  top: 42px;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid #86efac;
+  border-bottom: 2px solid #86efac;
+  transform: translateX(-4px) rotate(45deg);
+}
+
+.route-plan-card__connector-chip {
+  position: absolute;
+  right: 0;
+  top: 14px;
+  height: 28px;
+  padding: 0 12px;
+  border: 1px solid #e5e7eb;
+  line-height: 28px;
+  box-sizing: border-box;
+}
+
+.route-plan-card__connector-icon {
+  margin-right: 5px;
+}
+
+.route-plan-card__tips {
+  margin: 26px 20px 0;
+  padding: 18px 18px 18px 20px;
+  border: 1px solid #e2e8f0;
+  box-sizing: border-box;
+}
+
+.route-plan-card__tips-title {
+  margin-bottom: 14px;
+  line-height: 18px;
+}
+
+.route-plan-card__tip {
+  min-height: 22px;
+  line-height: 22px;
+}
+
+.route-plan-card__tip + .route-plan-card__tip {
+  margin-top: 4px;
+}
+
+.route-plan-card__tip-dot {
+  width: 5px;
+  height: 5px;
+  margin-right: 12px;
+  background: #cbd5e1;
+}
diff --git a/src/pages/home/components/ScenicImageCard/index.vue b/src/pages/home/components/ScenicImageCard/index.vue
new file mode 100644
index 0000000..d154aa0
--- /dev/null
+++ b/src/pages/home/components/ScenicImageCard/index.vue
@@ -0,0 +1,56 @@
+<template>
+  <div class="scenic-image-card relative rounded-24 overflow-hidden w-full" :class="{ 'is-disabled': disabled }"
+    @click="handleSelect">
+    <img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
+
+    <div
+      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
+      @click.stop="handleAction">
+      {{ action.icon }}
+    </div>
+
+    <div v-if="hasCaption" class="scenic-image-card__caption">
+      <div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
+        {{ caption.title }}
+      </div>
+      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white font-size-14 font-900 ellipsis-1">
+        {{ caption.subtitle }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    default: () => ({}),
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select", "action"]);
+
+const caption = computed(() => props.data.caption || {});
+const action = computed(() => props.data.action || {});
+const hasCaption = computed(() => Boolean(caption.value.title || caption.value.subtitle));
+
+const handleSelect = () => {
+  if (props.disabled) return;
+  emit("select", props.data);
+};
+
+const handleAction = () => {
+  if (props.disabled) return;
+  emit("action", props.data);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/ScenicImageCard/mocks.js b/src/pages/home/components/ScenicImageCard/mocks.js
new file mode 100644
index 0000000..788306f
--- /dev/null
+++ b/src/pages/home/components/ScenicImageCard/mocks.js
@@ -0,0 +1,19 @@
+export const scenicImageWithoutCaption = {
+  id: "bridge-mist-plain",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  action: {
+    icon: "↗",
+  },
+};
+
+export default {
+  id: "bridge-mist",
+  image: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?auto=format&fit=crop&w=1000&q=80",
+  caption: {
+    title: "古桥晨雾机位",
+    subtitle: "清晨 6:30 雾气最浓，长焦压缩效果极佳",
+  },
+  action: {
+    icon: "↗",
+  },
+};
diff --git a/src/pages/home/components/ScenicImageCard/styles/index.scss b/src/pages/home/components/ScenicImageCard/styles/index.scss
new file mode 100644
index 0000000..b7e8f1e
--- /dev/null
+++ b/src/pages/home/components/ScenicImageCard/styles/index.scss
@@ -0,0 +1,48 @@
+.scenic-image-card {
+  height: 324px;
+  background: #e2e8f0;
+}
+
+.scenic-image-card:active,
+.scenic-image-card__expand:active {
+  opacity: 0.86;
+}
+
+.scenic-image-card.is-disabled {
+  opacity: 0.55;
+}
+
+.scenic-image-card__image {
+  height: 100%;
+}
+
+.scenic-image-card__expand {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  z-index: 2;
+  width: 40px;
+  height: 40px;
+  background: rgba(15, 23, 42, 0.36);
+  line-height: 40px;
+}
+
+.scenic-image-card__caption {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 72px 22px 20px;
+  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 0%, rgba(15, 23, 42, 0.72) 100%);
+}
+
+.scenic-image-card__title {
+  line-height: 24px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+}
+
+.scenic-image-card__subtitle {
+  margin-top: 4px;
+  line-height: 18px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
+}
diff --git a/src/pages/home/components/SharedVisual/ActionRow.vue b/src/pages/home/components/SharedVisual/ActionRow.vue
new file mode 100644
index 0000000..59de945
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/ActionRow.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="visual-action-row flex flex-items-center gap-12 p-12 bg-white rounded-18 border-box"
+    :class="{ 'is-disabled': disabled }" @click="handleClick">
+    <div
+      class="visual-action-row__icon flex flex-items-center flex-justify-center w-42 h-42 rounded-14 font-size-18 font-900"
+      :class="toneClass">
+      <slot name="icon">{{ icon }}</slot>
+    </div>
+    <div class="visual-action-row__body flex-full">
+      <div class="visual-action-row__title color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
+      <div v-if="subtitle" class="visual-action-row__subtitle ellipsis-1">
+        {{ subtitle }}
+      </div>
+    </div>
+    <div class="visual-action-row__arrow color-CBD5E1 font-700">›</div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    default: "",
+  },
+  icon: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "green",
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  payload: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const emit = defineEmits(["action"]);
+
+const toneClass = computed(() => `visual-action-row__icon--${props.tone}`);
+
+const handleClick = () => {
+  if (props.disabled) return;
+  emit("action", props.payload);
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/SharedVisual/BadgePill.vue b/src/pages/home/components/SharedVisual/BadgePill.vue
new file mode 100644
index 0000000..4f03ea7
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/BadgePill.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    class="visual-badge flex flex-items-center flex-justify-center rounded-50 font-size-10 font-800 whitespace-nowrap"
+    :class="toneClass">
+    <slot>{{ label }}</slot>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "slate",
+  },
+});
+
+const toneClass = computed(() => `visual-badge--${props.tone}`);
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/SharedVisual/CardShell.vue b/src/pages/home/components/SharedVisual/CardShell.vue
new file mode 100644
index 0000000..ae022d3
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/CardShell.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="visual-card-shell w-full bg-white border-F1F5F9 rounded-24 border-box overflow-hidden"
+    :class="[{ 'is-pressable': pressable, 'is-disabled': disabled }, variantClass]" @click="handleClick">
+    <slot />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: "default",
+  },
+  pressable: {
+    type: Boolean,
+    default: false,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(["select"]);
+
+const variantClass = computed(() => `visual-card-shell--${props.variant}`);
+
+const handleClick = () => {
+  if (!props.pressable || props.disabled) return;
+  emit("select");
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/SharedVisual/DetailShell.vue b/src/pages/home/components/SharedVisual/DetailShell.vue
new file mode 100644
index 0000000..9dea8c2
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/DetailShell.vue
@@ -0,0 +1,39 @@
+<template>
+  <CardShell variant="detail">
+    <div class="visual-detail__header flex flex-items-center px-16 border-box border-bottom-F1F5F9">
+      <div class="visual-detail__back mr-8 rounded-full bg-F8FAFC color-334155 font-900 text-center"
+        @click="$emit('back')">
+        <uni-icons type="left" size="16" color="#CBD5E1"></uni-icons>
+      </div>
+      <div class="visual-detail__title flex-full color-1E293B font-size-14 font-900 ellipsis-1">{{ title }}</div>
+      <BadgePill v-if="tag" :label="tag" :tone="tone" />
+    </div>
+    <slot />
+  </CardShell>
+</template>
+
+<script setup>
+import CardShell from "./CardShell.vue";
+import BadgePill from "./BadgePill.vue";
+
+defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tag: {
+    type: String,
+    default: "",
+  },
+  tone: {
+    type: String,
+    default: "green",
+  },
+});
+
+defineEmits(["back"]);
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/SharedVisual/MediaFrame.vue b/src/pages/home/components/SharedVisual/MediaFrame.vue
new file mode 100644
index 0000000..d3a21ea
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/MediaFrame.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="visual-media relative w-full overflow-hidden bg-F1F5F9" :class="{ 'rounded-16': rounded }">
+    <img v-if="src" class="visual-media__image block w-full h-full" :src="src" :mode="mode" />
+    <div v-else class="visual-media__empty block w-full h-full"></div>
+    <slot />
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    default: "",
+  },
+  mode: {
+    type: String,
+    default: "aspectFill",
+  },
+  rounded: {
+    type: Boolean,
+    default: true,
+  },
+});
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>
diff --git a/src/pages/home/components/SharedVisual/styles/index.scss b/src/pages/home/components/SharedVisual/styles/index.scss
new file mode 100644
index 0000000..63c771c
--- /dev/null
+++ b/src/pages/home/components/SharedVisual/styles/index.scss
@@ -0,0 +1,134 @@
+.visual-card-shell {
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
+}
+
+.visual-card-shell--soft {
+  background: rgba(255, 255, 255, 0.84);
+  box-shadow: 0 9px 34px rgba(27, 9, 91, 0.07);
+}
+
+.visual-card-shell--detail {
+  border-radius: 20px;
+}
+
+.visual-card-shell.is-pressable {
+  transition: transform 0.18s ease, opacity 0.18s ease;
+}
+
+.visual-card-shell.is-pressable:active {
+  transform: scale(0.98);
+  opacity: 0.92;
+}
+
+.visual-card-shell.is-disabled,
+.visual-action-row.is-disabled {
+  opacity: 0.55;
+}
+
+.visual-badge {
+  min-height: 20px;
+  padding: 2px 8px;
+  box-sizing: border-box;
+  line-height: 16px;
+}
+
+.visual-badge--slate {
+  color: #475569;
+  background: #f1f5f9;
+}
+
+.visual-badge--green {
+  color: #047857;
+  background: #ecfdf5;
+}
+
+.visual-badge--amber {
+  color: #b45309;
+  background: #fffbeb;
+}
+
+.visual-badge--rose {
+  color: #be123c;
+  background: #fff1f2;
+}
+
+.visual-badge--blue {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.visual-badge--purple {
+  color: #7c3aed;
+  background: #f5f3ff;
+}
+
+.visual-media {
+}
+
+.visual-media__image,
+.visual-media__empty {
+}
+
+.visual-media__empty {
+  min-height: 96px;
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.visual-detail__header {
+  min-height: 48px;
+}
+
+.visual-detail__back {
+  width: 30px;
+  height: 30px;
+  font-size: 22px;
+  line-height: 28px;
+}
+
+.visual-detail__title {
+  min-width: 0;
+}
+
+.visual-action-row {
+}
+
+.visual-action-row__icon {
+}
+
+.visual-action-row__icon--green {
+  color: #047857;
+  background: #ecfdf5;
+}
+
+.visual-action-row__icon--blue {
+  color: #2563eb;
+  background: #eff6ff;
+}
+
+.visual-action-row__icon--amber {
+  color: #b45309;
+  background: #fffbeb;
+}
+
+.visual-action-row__icon--rose {
+  color: #be123c;
+  background: #fff1f2;
+}
+
+.visual-action-row__body {
+  min-width: 0;
+}
+
+.visual-action-row__title {
+}
+
+.visual-action-row__subtitle {
+  margin-top: 4px;
+  color: #94a3b8;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.visual-action-row__arrow {
+  font-size: 24px;
+}
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index e6b08c7..ccd7e07 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -3,13 +3,8 @@
     <ChatMainList @showDrawer="showDrawer" />
 
     <!-- 日历组件 -->
-    <Calender
-      :visible="calendarVisible"
-      mode="single"
-      :default-value="selectedDate"
-      @close="handleCalendarClose"
-      @select="handleDateSelect"
-    />
+    <Calender :visible="calendarVisible" mode="single" :default-value="selectedDate" @close="handleCalendarClose"
+      @select="handleDateSelect" />
 
     <!-- 更多服务 -->
     <MoreService />
@@ -20,14 +15,13 @@
 </template>
 
 <script setup>
-import { onLoad } from "@dcloudio/uni-app";
 import { ref, onUnmounted, onMounted } from "vue";
 import { getUrlParams } from "@/utils/UrlParams";
 import { useAppStore } from "@/store";
 import { checkToken } from "@/hooks/useGoLogin";
-import ChatMainList from "../ChatMain/ChatMainList/index.vue";
-import MoreService from "../ChatModule/MoreService/index.vue";
-import DrawerSection from "../DrawerSection/index.vue";
+import ChatMainList from "./components/ChatMainList/index.vue";
+import MoreService from "./components/MoreService/index.vue";
+import DrawerSection from "./components/DrawerSection/index.vue";
 import Calender from "@/components/Calender/index.vue";
 
 const appStore = useAppStore();
@@ -71,9 +65,10 @@ const getWeixinMiniProgramParams = (e) => {
   }
 };
 
-onLoad((e) => {
-  getWeixinMiniProgramParams(e);
-});
+// TODO
+// onLoad((e) => {
+//   getWeixinMiniProgramParams(e);
+// });
 
 onMounted(() => {
   uni.$on("openCalendar", openCalendar);
diff --git a/src/pages/login/components/AgreePopup/demo.vue b/src/pages/login/components/AgreePopup/demo.vue
index 911b661..1d54ca0 100644
--- a/src/pages/login/components/AgreePopup/demo.vue
+++ b/src/pages/login/components/AgreePopup/demo.vue
@@ -15,13 +15,7 @@
     </div>
 
     <!-- AgreePopup 组件 -->
-    <AgreePopup
-      :visible="popupVisible"
-      title="温馨提示"
-      @agree="handleAgree"
-      @close="handleClose"
-      @cancel="handleCancel"
-    />
+    <AgreePopup :visible="popupVisible" title="温馨提示" @agree="handleAgree" @close="handleClose" @cancel="handleCancel" />
   </div>
 </template>
 
@@ -103,7 +97,7 @@ const handleCancel = () => {
     }
 
     .demo-info {
-      background-color: $uni-bg-color;
+      background-color: #fff;
       padding: 20px;
       border-radius: 8px;
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
diff --git a/src/pages/login/components/AgreePopup/styles/index.scss b/src/pages/login/components/AgreePopup/styles/index.scss
index 421c4b5..ca8c20a 100644
--- a/src/pages/login/components/AgreePopup/styles/index.scss
+++ b/src/pages/login/components/AgreePopup/styles/index.scss
@@ -1,7 +1,7 @@
 // AgreePopup 组件样式
 .agree-popup {
   width: 327px;
-  background-color: $uni-bg-color;
+  background-color: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -32,7 +32,7 @@
 
       &:hover {
         background: #f5f5f5;
-        border-radius: $uni-border-radius-circle;
+        border-radius: 50%;
       }
     }
   }
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index a5297d7..97f0069 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -17,17 +17,9 @@
     <div class="login-agreement flex flex-items-center">
       <CheckBox v-model="isAgree">
         <span class="font-size-12 color-525866">我已阅读并同意</span>
-        <span
-          class="font-size-12 theme-color-500 ml-4 mr-4"
-          @click.stop="handleAgreeClick('service')"
-          >《服务协议》</span
-        >
+        <span class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('service')">《服务协议》</span>
         <span class="font-size-12 color-525866">和</span>
-        <span
-          class="font-size-12 theme-color-500 ml-4 mr-4"
-          @click.stop="handleAgreeClick('privacy')"
-          >《隐私协议》</span
-        >
+        <span class="font-size-12 theme-color-500 ml-4 mr-4" @click.stop="handleAgreeClick('privacy')">《隐私协议》</span>
         <span class="font-size-12 color-525866">，\n</span>
         <span class="font-size-12 color-525866 ml-30">授权与账号关联操作</span>
       </CheckBox>
@@ -36,36 +28,20 @@
     <!-- 按钮区域 -->
     <div class="login-btn-area">
       <!-- 同意隐私协议并获取手机号按钮 -->
-      <button
-        v-if="needWxAuthLogin && !isAppleLogin"
-        class="login-btn"
-        type="primary"
-        open-type="getPhoneNumber"
-        @getphonenumber="getPhoneNumber"
-      >
+      <button v-if="needWxAuthLogin && !isAppleLogin" class="login-btn" type="primary" open-type="getPhoneNumber"
+        @getphonenumber="getPhoneNumber">
         {{ loginButtonspan }}
       </button>
-      <button
-        v-else
-        class="login-btn"
-        type="primary"
-        @click="handleAgreeAndGetPhone"
-      >
+      <button v-else class="login-btn" type="primary" @click="handleAgreeAndGetPhone">
         {{ loginButtonspan }}
       </button>
     </div>
 
-    <AgreePopup
-      ref="agreePopup"
-      :visible="visible"
-      :agreement="computedAgreement"
-      @close="visible = false"
-    />
+    <AgreePopup ref="agreePopup" :visible="visible" :agreement="computedAgreement" @close="visible = false" />
   </div>
 </template>
 
 <script setup>
-import { onShow } from "@dcloudio/uni-app";
 import { ref, computed } from "vue";
 import {
   getServiceAgreement,
@@ -204,13 +180,14 @@ const getPrivacyAgreementData = async () => {
 };
 getPrivacyAgreementData();
 
-onShow(async () => {
-  if (!isAppleLogin.value) {
-    // 页面显示时检查微信授权登录状态
-    const res = await onCheckPhoneLogin();
-    needWxAuthLogin.value = res;
-  }
-});
+// TODO
+// onShow(async () => {
+//   if (!isAppleLogin.value) {
+//     // 页面显示时检查微信授权登录状态
+//     const res = await onCheckPhoneLogin();
+//     needWxAuthLogin.value = res;
+//   }
+// });
 </script>
 
 <style lang="scss" scoped>
@@ -218,6 +195,6 @@ onShow(async () => {
 
 @font-face {
   font-family: znicons;
-  src: url("@/static/fonts/znicons.ttf");
+  src: url("@/assets/fonts/znicons.ttf");
 }
 </style>
diff --git a/src/pages/login/styles/index.scss b/src/pages/login/styles/index.scss
index 6e45ead..880a570 100644
--- a/src/pages/login/styles/index.scss
+++ b/src/pages/login/styles/index.scss
@@ -30,7 +30,7 @@
     width: 304px;
 
     .login-btn {
-      background: $theme-color-500;
+      background: #0ccd58;
       width: 100%;
       border-radius: 10px;
     }
diff --git a/src/pages/order/order/components/OrderCard/styles/index.scss b/src/pages/order/order/components/OrderCard/styles/index.scss
index 43e108e..8d20ec3 100644
--- a/src/pages/order/order/components/OrderCard/styles/index.scss
+++ b/src/pages/order/order/components/OrderCard/styles/index.scss
@@ -30,7 +30,7 @@
   }
 
   &.tag-4 {
-    color: $theme-color-500;
+    color: #0ccd58;
   }
 
   &.tag-5 {
diff --git a/src/pages/order/order/components/OrderQrcode/styles/index.scss b/src/pages/order/order/components/OrderQrcode/styles/index.scss
index a7a78da..ff7c010 100644
--- a/src/pages/order/order/components/OrderQrcode/styles/index.scss
+++ b/src/pages/order/order/components/OrderQrcode/styles/index.scss
@@ -9,15 +9,15 @@
 }
 
 .borderColor {
-  border-color: $theme-color-500;
+  border-color: #0ccd58;
 }
 
 .actions-btn {
   width: 40px;
   height: 40px;
   border-radius: 20px;
-  background-color: #F5F5F5;
+  background-color: #f5f5f5;
   display: flex;
   align-items: center;
   justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/src/pages/order/order/detail.vue b/src/pages/order/order/detail.vue
index 145b369..dc26d92 100644
--- a/src/pages/order/order/detail.vue
+++ b/src/pages/order/order/detail.vue
@@ -1,21 +1,12 @@
 <template>
   <div class="order-detail-page flex flex-col h-screen">
-    <TopNavBar
-      titleAlign="center"
-      :background="$theme - color - 100"
-      title="订单详情"
-    />
+    <TopNavBar titleAlign="center" :background="$theme - color - 100" title="订单详情" />
 
-    <div
-      class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y"
-    >
+    <div class="order-detail-wrapper border-box flex-full overflow-hidden scroll-y">
       <OrderStatusInfo :orderData="orderData" />
 
-      <VoucherList
-        v-if="orderData.orderType != 0 && orderData.orderStatus === '2'"
-        :orderData="orderData"
-        @selected="handleSelectedVoucher"
-      />
+      <VoucherList v-if="orderData.orderType != 0 && orderData.orderStatus === '2'" :orderData="orderData"
+        @selected="handleSelectedVoucher" />
 
       <AmtSection :orderData="orderData" @click="refundVisible = true" />
 
@@ -26,23 +17,12 @@
       <OrderInfo :orderData="orderData" />
     </div>
 
-    <FooterSection
-      :orderData="orderData"
-      @refund="handleRefundConfirm"
-      @refresh="handlePaySuccess"
-    />
+    <FooterSection :orderData="orderData" @refund="handleRefundConfirm" @refresh="handlePaySuccess" />
   </div>
 
   <!-- 核销凭证 二维码 -->
-  <OrderQrcode
-    v-if="orderData.orderStatus === '2'"
-    v-show="visbleQrcode"
-    v-model="visbleQrcode"
-    :orderData="orderData"
-    :selectedVoucher="selectedVoucher"
-    :selectedVoucherIndex="selectedVoucherIndex"
-    @close="handleClose"
-  />
+  <OrderQrcode v-if="orderData.orderStatus === '2'" v-show="visbleQrcode" v-model="visbleQrcode" :orderData="orderData"
+    :selectedVoucher="selectedVoucher" :selectedVoucherIndex="selectedVoucherIndex" @close="handleClose" />
 
   <!-- 退款状态显示 -->
   <RefundPopup v-model="refundVisible" :orderData="orderData" />
@@ -50,7 +30,6 @@
 
 <script setup>
 import { ref, getCurrentInstance } from "vue";
-import { onLoad, onUnload } from "@dcloudio/uni-app";
 import { userOrderDetail, orderRefund } from "@/request/api/OrderApi";
 import TopNavBar from "@/components/TopNavBar/index.vue";
 import OrderQrcode from "./components/OrderQrcode/index.vue";
@@ -73,14 +52,15 @@ const visbleQrcode = ref(false);
 const selectedVoucher = ref(null);
 const selectedVoucherIndex = ref(0);
 
-onLoad(({ orderId }) => {
-  getOrderDetail(orderId);
+// TODO
+// onLoad(({ orderId }) => {
+//   getOrderDetail(orderId);
 
-  // 获取当前页面的事件通道（由 navigateTo 打开时可用）
-  const pages = getCurrentPages();
-  const currentPage = pages[pages.length - 1];
-  eventChannel = currentPage.getOpenerEventChannel();
-});
+//   // 获取当前页面的事件通道（由 navigateTo 打开时可用）
+//   const pages = getCurrentPages();
+//   const currentPage = pages[pages.length - 1];
+//   eventChannel = currentPage.getOpenerEventChannel();
+// });
 
 // 处理选中核销凭证事件
 const handleSelectedVoucher = (voucher) => {
@@ -129,9 +109,10 @@ const handlePaySuccess = ({ orderId }) => {
   }, 1000);
 };
 
-onUnload(() => {
-  eventChannel.on("refreshOrderList");
-});
+// TODO
+// onUnload(() => {
+//   eventChannel.on("refreshOrderList");
+// });
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/pages/quick/components/Tabs/styles/index.scss b/src/pages/quick/components/Tabs/styles/index.scss
index d412c4a..496cb7b 100644
--- a/src/pages/quick/components/Tabs/styles/index.scss
+++ b/src/pages/quick/components/Tabs/styles/index.scss
@@ -28,11 +28,11 @@
 }
 
 .icon-active {
-  color: $theme-color-500;
+  color: #0ccd58;
 }
 
 /* 组件模板中使用了绝对定位的内部元素，为保证父元素宽度基于内容，重置该子元素为静态布局 */
-.tab-item>.absolute {
+.tab-item > .absolute {
   position: static !important;
   display: flex;
   align-items: center;
@@ -50,12 +50,12 @@
     border-radius: 20px 20px 0 0;
     transform: perspective(40px) rotateX(6deg) translate(0, -1px);
     transform-origin: bottom bottom;
-    box-shadow: 0 -0.5px 0 $theme-color-500;
+    box-shadow: 0 -0.5px 0 #0ccd58;
   }
 }
 
 .tab-text-active {
-  color: $theme-color-500;
+  color: #0ccd58;
   z-index: 3;
 }
 
@@ -77,14 +77,16 @@
   transform: translateX(-50%) scaleX(0.9);
   height: 3px;
   width: 24px;
-  background-color: $theme-color-500;
+  background-color: #0ccd58;
   border-radius: 3px 3px 0 0;
   opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease;
   z-index: 3;
 }
 
 .tab-item-indicator.visible {
   opacity: 1;
   transform: translateX(-50%) scaleX(1);
-}
\ No newline at end of file
+}
diff --git a/src/pages/quick/index.vue b/src/pages/quick/index.vue
index d62da2a..13169e2 100644
--- a/src/pages/quick/index.vue
+++ b/src/pages/quick/index.vue
@@ -29,7 +29,7 @@
         </div>
 
         <!-- 日期图标 -->
-        <uni-icons class="ml-auto" type="calendar" size="24" color="$theme-color-500" @click="calendarVisible = true" />
+        <uni-icons class="ml-auto" type="calendar" size="24" color="#0CCD58" @click="calendarVisible = true" />
       </div>
     </template>
 
diff --git a/src/router/index.ts b/src/router/index.ts
index d9b7f06..ccca1c8 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -37,11 +37,6 @@ export const routes = [
     name: "quick",
     component: () => import("@/pages/quick/index.vue"),
   },
-  {
-    path: "/quick/list",
-    name: "quick_list",
-    component: () => import("@/pages/quick/list.vue"),
-  },
   {
     path: "/order",
     name: "order_list",
diff --git a/src/static/fonts/znicons.js b/src/static/fonts/znicons.js
new file mode 100644
index 0000000..e25995f
--- /dev/null
+++ b/src/static/fonts/znicons.js
@@ -0,0 +1,2 @@
+export { zniconsMap } from "@/assets/fonts/znicons.js";
+
diff --git a/src/styles/main.css b/src/styles/main.css
index c4eac3c..69af519 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -1,5 +1,11 @@
 @import "tailwindcss";
 
+@font-face {
+  font-family: znicons;
+  src: url("@/assets/fonts/znicons.ttf") format("truetype");
+  font-display: swap;
+}
+
 @theme {
   --color-brand-50: #eef8ff;
   --color-brand-100: #d9eeff;
diff --git a/src/utils/UrlParams.ts b/src/utils/UrlParams.ts
new file mode 100644
index 0000000..296a363
--- /dev/null
+++ b/src/utils/UrlParams.ts
@@ -0,0 +1,37 @@
+export function getUrlParams(url) {
+  let theRequest = {};
+  if(url.indexOf("#") != -1){
+	  const str=url.split("#")[1];
+	  const strs=str.split("&");
+	  for (let i = 0; i < strs.length; i++) {
+	  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
+	  }
+  }else if(url.indexOf("?") != -1){
+	  const str=url.split("?")[1];
+	  const strs=str.split("&");
+	  for (let i = 0; i < strs.length; i++) {
+	  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
+	  }
+  }
+  return theRequest;
+}
+
+/**
+ * 将对象参数转换为URL查询字符串格式
+ * @param {Object} args - 参数对象
+ * @returns {String} 返回key=value&格式的查询字符串
+ */
+export function objectToUrlParams(args) {
+  if (!args || typeof args !== 'object') {
+    return '';
+  }
+  
+  const params = [];
+  for (const key in args) {
+    if (args.hasOwnProperty(key) && args[key] !== undefined && args[key] !== null) {
+      params.push(`${key}=${args[key]}`);
+    }
+  }
+  
+  return params.length > 0 ? params.join('&') : '';
+}
diff --git a/vite.config.ts b/vite.config.ts
index 52671f9..af271b2 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -12,6 +12,14 @@ export default defineConfig({
       "@": path.join(__dirname, "./src"),
     },
   },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        api: "modern-compiler",
+        silenceDeprecations: ["legacy-js-api"],
+      },
+    },
+  },
   server: {
     host: "0.0.0.0",
     port: 5174,
diff --git a/yarn.lock b/yarn.lock
index 6bc2d8a..78bed3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1553,6 +1553,14 @@ ansi-styles@^4.0.0, ansi-styles@^4.1.0:
   dependencies:
     color-convert "^2.0.1"
 
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmmirror.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
 asynckit@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmmirror.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
@@ -1602,6 +1610,11 @@ baseline-browser-mapping@^2.10.12:
   resolved "https://registry.npmmirror.com/baseline-browser-mapping/-/baseline-browser-mapping-2.10.32.tgz#b6b553a4285fdd606327a617de36a5351e3aaa64"
   integrity sha512-wbPvpyjJPC0zdfdKXxqEL3Ea+bOMD/87X4lftiJkkaBiuG6ALQy1SLmEd7BSmVCuwCQsBrCamgBoLyfFDD1EPg==
 
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmmirror.com/binary-extensions/-/binary-extensions-2.3.0.tgz#f6e14a97858d327252200242d4ccfe522c445522"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
 birpc@^2.3.0:
   version "2.9.0"
   resolved "https://registry.npmmirror.com/birpc/-/birpc-2.9.0.tgz#b59550897e4cd96a223e2a6c1475b572236ed145"
@@ -1614,6 +1627,13 @@ brace-expansion@^2.0.2:
   dependencies:
     balanced-match "^1.0.0"
 
+braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.npmmirror.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
 browserslist-to-esbuild@^2.1.1:
   version "2.1.1"
   resolved "https://registry.npmmirror.com/browserslist-to-esbuild/-/browserslist-to-esbuild-2.1.1.tgz#50dc4c55a6889ba22c7b1bd820032f81b822faf0"
@@ -1653,6 +1673,21 @@ chalk@4.1.2:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.npmmirror.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -1852,6 +1887,13 @@ esutils@^2.0.2:
   resolved "https://registry.npmmirror.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
 follow-redirects@^1.16.0:
   version "1.16.0"
   resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.16.0.tgz#28474a159d3b9d11ef62050a14ed60e4df6d61bc"
@@ -1912,6 +1954,13 @@ get-proto@^1.0.1:
     dunder-proto "^1.0.1"
     es-object-atoms "^1.0.0"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmmirror.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 gopd@^1.2.0:
   version "1.2.0"
   resolved "https://registry.npmmirror.com/gopd/-/gopd-1.2.0.tgz#89f56b8217bdbc8802bd299df6d7f1081d7e51a1"
@@ -1964,6 +2013,18 @@ https-proxy-agent@^5.0.1:
     agent-base "6"
     debug "4"
 
+immutable@^4.0.0:
+  version "4.3.8"
+  resolved "https://registry.npmmirror.com/immutable/-/immutable-4.3.8.tgz#02d183c7727fb2bb1d5d0380da0d779dce9296a7"
+  integrity sha512-d/Ld9aLbKpNwyl0KiM2CT1WYvkitQ1TSvmRtkcV8FKStiDoA7Slzgjmb/1G2yhKM1p0XeNOieaTbFZmU1d3Xuw==
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmmirror.com/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
 is-core-module@^2.16.1:
   version "2.16.2"
   resolved "https://registry.npmmirror.com/is-core-module/-/is-core-module-2.16.2.tgz#3e07450a8080ebce3fbf0cac494f4d2ab324e082"
@@ -1971,11 +2032,28 @@ is-core-module@^2.16.1:
   dependencies:
     hasown "^2.0.3"
 
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmmirror.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
 is-fullwidth-code-point@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmmirror.com/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz#f116f8064fe90b3f7844a38997c0b75051269f1d"
   integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
 
+is-glob@^4.0.1, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmmirror.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmmirror.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
 is-what@^5.2.0:
   version "5.5.0"
   resolved "https://registry.npmmirror.com/is-what/-/is-what-5.5.0.tgz#a3031815757cfe1f03fed990bf6355a2d3f628c4"
@@ -2153,6 +2231,11 @@ node-releases@^2.0.36:
   resolved "https://registry.npmmirror.com/node-releases/-/node-releases-2.0.46.tgz#d188a129a83f5e03a101aacb58f260f2ee8faaa1"
   integrity sha512-GYVXHE2KnrzAfsAjl4uP++evGFCrAU1jta4ubEjIG7YWt/64Gqv66a30yKwWczVjA6j3bM4nBwH7Pk1JmDHaxQ==
 
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmmirror.com/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
 path-browserify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
@@ -2173,6 +2256,11 @@ picocolors@^1.1.1:
   resolved "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz#3d321af3eab939b083c8f929a1d12cda81c26b6b"
   integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
 
+picomatch@^2.0.4, picomatch@^2.2.1:
+  version "2.3.2"
+  resolved "https://registry.npmmirror.com/picomatch/-/picomatch-2.3.2.tgz#5a942915e26b372dc0f0e6753149a16e6b1c5601"
+  integrity sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==
+
 pinia@^3.0.3:
   version "3.0.4"
   resolved "https://registry.npmmirror.com/pinia/-/pinia-3.0.4.tgz#75dde12784a61e34c1fa6abcd13c1a1061c360c0"
@@ -2194,6 +2282,13 @@ proxy-from-env@^2.1.0:
   resolved "https://registry.npmmirror.com/proxy-from-env/-/proxy-from-env-2.1.0.tgz#a7487568adad577cfaaa7e88c49cab3ab3081aba"
   integrity sha512-cJ+oHTW1VAEa8cJslgmUZrc+sjRKgAKl3Zyse6+PV38hZe/V6Z14TbCuXcan9F9ghlz4QrFr2c92TNF82UkYHA==
 
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmmirror.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
 regenerate-unicode-properties@^10.2.2:
   version "10.2.2"
   resolved "https://registry.npmmirror.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.2.2.tgz#aa113812ba899b630658c7623466be71e1f86f66"
@@ -2296,6 +2391,15 @@ rxjs@7.8.2:
   dependencies:
     tslib "^2.1.0"
 
+sass@1.58.3:
+  version "1.58.3"
+  resolved "https://registry.npmmirror.com/sass/-/sass-1.58.3.tgz#2348cc052061ba4f00243a208b09c40e031f270d"
+  integrity sha512-Q7RaEtYf6BflYrQ+buPudKR26/lH+10EmO9bBqbmPh/KeLqv8bjpTNqxe71ocONqXq+jYiCbpPUmQMS+JJPk4A==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 semver@^6.3.1:
   version "6.3.1"
   resolved "https://registry.npmmirror.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
@@ -2306,7 +2410,7 @@ shell-quote@1.8.3:
   resolved "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.8.3.tgz#55e40ef33cf5c689902353a3d8cd1a6725f08b4b"
   integrity sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==
 
-source-map-js@^1.0.2, source-map-js@^1.2.1:
+"source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2, source-map-js@^1.2.1:
   version "1.2.1"
   resolved "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
   integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
@@ -2373,6 +2477,13 @@ tapable@^2.3.3:
   resolved "https://registry.npmmirror.com/tapable/-/tapable-2.3.3.tgz#5da7c9992c46038221267985ab28421a8879f160"
   integrity sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A==
 
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmmirror.com/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
 tree-kill@1.2.2:
   version "1.2.2"
   resolved "https://registry.npmmirror.com/tree-kill/-/tree-kill-1.2.2.tgz#4ca09a9092c88b73a7cdc5e8a01b507b0790a0cc"