From 16caad1c40cb126e362f5e893f3d3677f0b50a41 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Tue, 11 Aug 2026 22:05:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(mini-app):=20=E5=AE=9E=E7=8E=B0=E7=8E=A9?=
 =?UTF-8?q?=E6=B3=95=E3=80=81=E7=AE=A1=E5=AE=B6=E9=A1=B5=E9=9D=A2=E4=B8=8E?=
 =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=BB=84=E4=BB=B6=E5=8C=96=E9=87=8D=E6=9E=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增管家服务全套页面、组件与模拟数据
- 新增玩法分类页面与线路展示组件
- 重构首页为可复用组件模块
- 更新路由配置替换旧目的地页面路由
- 移除废弃页面与客服弹窗冗余逻辑
- 更新项目文档与gitignore配置
---
 .gitignore                                    |   1 +
 AGENTS.md                                     |   2 +
 README.md                                     | 156 ++++++-
 .../assets/concierge/wonderq-concierge-qr.png | Bin 0 -> 633 bytes
 WonderQ-MiniAPP/src/components/BottomNav.vue  |  50 +--
 .../src/components/SupportSheet.vue           | 395 ------------------
 WonderQ-MiniAPP/src/components/TopHeader.vue  |   8 +-
 WonderQ-MiniAPP/src/lib/support.ts            |  52 ---
 WonderQ-MiniAPP/src/pages.json                |  43 +-
 WonderQ-MiniAPP/src/pages/benefits/index.vue  |  56 ---
 WonderQ-MiniAPP/src/pages/booking/index.vue   | 195 ---------
 WonderQ-MiniAPP/src/pages/campaign/index.vue  |  68 ---
 .../concierge/components/ConciergeAdvisor.vue |  47 +++
 .../components/ConciergeContactSheet.vue      |  94 +++++
 .../concierge/components/ConciergeHero.vue    |  10 +
 .../components/ConciergePrinciples.vue        |  29 ++
 .../concierge/components/conciergeTypes.ts    |  10 +
 WonderQ-MiniAPP/src/pages/concierge/index.vue |  80 ++++
 WonderQ-MiniAPP/src/pages/demand/index.vue    | 180 --------
 .../src/pages/destination-picker/index.vue    |  85 ----
 .../src/pages/destination/index.vue           | 103 -----
 WonderQ-MiniAPP/src/pages/detail/index.vue    |   9 +-
 .../home/components/HomeExperienceCard.vue    |  35 ++
 .../home/components/HomeExperienceList.vue    |  23 +
 .../home/components/HomeHeroCarousel.vue      |  49 +++
 .../home/components/HomeTeamBuilding.vue      |  43 ++
 .../pages/home/components/HomeVehicleGrid.vue |  39 ++
 .../home/components/HomeWildArchives.vue      |  48 +++
 .../home/components/homeExperienceData.ts     |  30 ++
 .../home/components/homeTeamBuildingData.ts   |  35 ++
 .../home/components/homeWildArchivesData.ts   |  33 ++
 WonderQ-MiniAPP/src/pages/home/index.vue      |  99 ++---
 WonderQ-MiniAPP/src/pages/login/index.vue     |   5 +-
 WonderQ-MiniAPP/src/pages/mine/index.vue      |   6 +-
 .../play/components/PlayCategorySidebar.vue   |  26 ++
 .../pages/play/components/PlayRouteCard.vue   |  26 ++
 .../src/pages/play/components/PlayTopBar.vue  |  14 +
 .../src/pages/play/components/playData.ts     |  87 ++++
 WonderQ-MiniAPP/src/pages/play/index.vue      |  44 ++
 WonderQ-MiniAPP/src/pages/search/index.vue    |  71 ----
 docs/public-api.md                            |   2 +-
 41 files changed, 1016 insertions(+), 1372 deletions(-)
 create mode 100644 WonderQ-MiniAPP/public/assets/concierge/wonderq-concierge-qr.png
 delete mode 100644 WonderQ-MiniAPP/src/components/SupportSheet.vue
 delete mode 100644 WonderQ-MiniAPP/src/lib/support.ts
 delete mode 100644 WonderQ-MiniAPP/src/pages/benefits/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/booking/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/campaign/index.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/components/ConciergeAdvisor.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/components/ConciergeHero.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/components/ConciergePrinciples.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/components/conciergeTypes.ts
 create mode 100644 WonderQ-MiniAPP/src/pages/concierge/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/demand/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/destination-picker/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/destination/index.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeExperienceCard.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeExperienceList.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeHeroCarousel.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeTeamBuilding.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeVehicleGrid.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/HomeWildArchives.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/homeExperienceData.ts
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/homeTeamBuildingData.ts
 create mode 100644 WonderQ-MiniAPP/src/pages/home/components/homeWildArchivesData.ts
 create mode 100644 WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/play/components/PlayRouteCard.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/play/components/PlayTopBar.vue
 create mode 100644 WonderQ-MiniAPP/src/pages/play/components/playData.ts
 create mode 100644 WonderQ-MiniAPP/src/pages/play/index.vue
 delete mode 100644 WonderQ-MiniAPP/src/pages/search/index.vue

diff --git a/.gitignore b/.gitignore
index 3d379e0..2b3446a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules/
 dist/
+docs/
 apps/*/dist/
 .env
 .env.local
diff --git a/AGENTS.md b/AGENTS.md
index 1dfc082..e7348ab 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -271,6 +271,8 @@ yarn dev:mp-weixin
 - `WonderQ-MiniAPP` 使用 Vue 3 SFC、`<script setup lang="ts">` 和 uni-app 组件，不引入 React。
 - `WonderQ-Admin-UI` 使用 React 函数组件和 Hooks，不引入 class component。
 - 样式优先使用项目已集成的 TailwindCSS；管理端同时遵守 `src/styles.css` 的设计变量和已有类名体系。
+- `WonderQ-MiniAPP` 页面和组件默认只能使用 TailwindCSS 工具类完成布局、间距、颜色、字体、边框、响应式及交互状态；禁止新增自定义 `<style>` 或 `<style scoped>`。仅在 uni-app 平台兼容性、伪元素或 Tailwind 无法表达的特殊规则下允许例外，并在代码附近说明原因。
+- `WonderQ-MiniAPP` 的响应式样式优先使用 TailwindCSS 断点和任意值变体，避免在单文件组件中新增独立媒体查询；重复的视觉规则应提取为全局工具类或可复用组件。
 - `WonderQ-MiniAPP` 移动端采用简约、内容优先的视觉风格：以白色和低饱和中性色为基础，使用绿色作为主操作色，避免大面积渐变、金色渐变按钮、装饰性光晕和重阴影。
 - MiniAPP 卡片、输入框和操作按钮优先使用 8-12px 圆角、细边框和轻阴影；图片负责表达目的地与线路，不额外叠加装饰性图形。
 - MiniAPP 顶部栏和底部导航保持扁平、稳定的固定布局，选中态通过颜色、细线或浅色底区分，不使用会改变布局的浮动徽章或缩放动画。
diff --git a/README.md b/README.md
index 2020db0..1641272 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,155 @@
-# WonderQ-Project
+# WonderQ Project
 
-万趣项目
\ No newline at end of file
+万趣旅行三端项目集合，围绕 MiniAPP/H5 前台、运营管理后台和后端 API 协同开发。
+
+## 项目组成
+
+| 子项目 | 定位 | 技术栈 | 默认地址 |
+| --- | --- | --- | --- |
+| `WonderQ-MiniAPP` | H5 与微信小程序前台 | uni-app、Vue 3、TypeScript、Tailwind CSS | `http://localhost:5173` |
+| `WonderQ-Admin-UI` | 运营管理后台前端 | Vite、React、TypeScript、Tailwind CSS 4 | `http://localhost:5602` |
+| `WonderQ-Admin` | Public API 与 Admin API | Python、FastAPI、SQLAlchemy 2、Alembic、PostgreSQL、JWT、Pydantic | `http://localhost:4000` |
+
+项目采用页面驱动开发：前台页面定义用户流程，管理后台维护运营内容，后端负责鉴权、接口、数据持久化和发布能力。
+
+## 目录结构
+
+```text
+WonderQ-Project/
+├─ AGENTS.md                 # AI 协作与项目开发约定
+├─ README.md                 # 项目入口文档
+├─ docs/                     # 接口契约、联调流程和技术决策
+├─ WonderQ-MiniAPP/          # 前台 H5 / 微信小程序
+├─ WonderQ-Admin-UI/         # 运营管理后台前端
+└─ WonderQ-Admin/            # 后端 API 服务
+```
+
+### MiniAPP 页面
+
+当前页面路由配置位于 `WonderQ-MiniAPP/src/pages.json`：
+
+- `pages/home/index`：首页
+- `pages/play/index`：玩法
+- `pages/concierge/index`：管家
+- `pages/detail/index`：线路详情
+- `pages/login/index`：登录
+- `pages/mine/index`：我的
+
+前台可复用组件位于 `WonderQ-MiniAPP/src/components/`，页面专属组件按页面放在对应的 `components/` 目录中。
+
+## 本地启动
+
+建议按后端、管理后台、前台的顺序启动。
+
+### 1. 启动后端
+
+要求：Python `3.12 - 3.14`、Docker Desktop。
+
+```powershell
+Set-Location .\WonderQ-Admin
+Copy-Item .env.example .env
+python -m venv .venv
+.\.venv\Scripts\Activate.ps1
+python -m pip install -r requirements.txt
+docker-compose up -d postgres redis
+python -m alembic upgrade head
+python -m uvicorn app.main:app --host 0.0.0.0 --port 4000 --reload
+```
+
+健康检查和 OpenAPI 文档：
+
+- `http://localhost:4000/health`
+- `http://localhost:4000/docs`
+
+首次初始化空库时才执行 `python -m app.seed`。该命令可能重置站点、商品、目的地、活动和媒体内容，已有开发数据时不要重复执行。
+
+### 2. 启动管理后台
+
+```powershell
+Set-Location .\WonderQ-Admin-UI
+yarn install
+yarn dev
+```
+
+访问 `http://localhost:5602`。
+
+### 3. 启动前台
+
+```powershell
+Set-Location .\WonderQ-MiniAPP
+yarn install
+yarn dev
+```
+
+访问 `http://localhost:5173`。微信小程序开发构建使用：
+
+```powershell
+yarn dev:mp-weixin
+```
+
+构建产物位于 `WonderQ-MiniAPP/dist/build/mp-weixin`，需使用微信开发者工具导入验证。
+
+### 本地 API 端口说明
+
+后端文档和默认启动命令使用 `4000`；当前 `WonderQ-MiniAPP/vite.config.ts` 与 `WonderQ-Admin-UI/vite.config.ts` 的 `/api` 代理目标为 `4001`。三端联调前必须统一端口：
+
+- 让后端监听 `4001`；或
+- 将两个前端 Vite 配置中的代理目标同步改为 `4000`。
+
+不要同时使用不一致的端口，否则页面会出现接口连接失败或空数据。
+
+## 接口与文档
+
+`docs/README.md` 是详细文档入口。推荐阅读顺序：
+
+1. [`docs/integration-workflow.md`](docs/integration-workflow.md)：三端启动、联调顺序和接口变更流程
+2. [`docs/development-status.md`](docs/development-status.md)：当前能力对接状态和联调路径
+3. [`docs/public-api.md`](docs/public-api.md)：MiniAPP 使用的 Public API 契约
+4. [`docs/admin-api-requirements.md`](docs/admin-api-requirements.md)：Admin UI 使用的 Admin API 契约
+5. [`docs/module-config-api.md`](docs/module-config-api.md)：页面模块 CRUD 细节契约
+6. [`docs/backend-api-service.md`](docs/backend-api-service.md)：后端运行和集成说明
+7. [`docs/decisions.md`](docs/decisions.md)：当前技术与文档决策
+
+接口边界保持如下：
+
+- MiniAPP 只访问 `/api/public/...`，不依赖后台登录态。
+- Admin UI 访问 `/api/admin/...`，登录后使用 Bearer Token。
+- 页面模块字段、排序、删除冲突和媒体上传规则以 `docs/module-config-api.md` 为准。
+
+## 常用验证命令
+
+后端：
+
+```powershell
+Set-Location .\WonderQ-Admin
+python -m pytest
+```
+
+管理后台：
+
+```powershell
+Set-Location .\WonderQ-Admin-UI
+yarn build
+```
+
+前台：
+
+```powershell
+Set-Location .\WonderQ-MiniAPP
+yarn test
+yarn build:h5
+yarn build:mp-weixin
+```
+
+UI 或跨端兼容改动还需要在浏览器中检查移动端和桌面宽度；微信小程序改动需要使用微信开发者工具检查构建产物。
+
+## 开发约定
+
+- MiniAPP 使用 Vue 3 SFC、`<script setup lang="ts">`、uni-app 组件和 Tailwind CSS。
+- UI 样式优先使用现有 Tailwind 类、`src/app.css` 的 `--wq-*` 变量和共享组件，不重复建立颜色、阴影和圆角体系。
+- 组件按职责拆分，页面只负责组合和数据流，不把可复用业务堆在单个文件中。
+- 前台内容优先来自 Public API，接口失败或字段缺失时沿用已有本地 fallback 机制。
+- 新增或变更接口时，先更新对应契约文档，再同步后端和前端实现。
+- 不提交 `.env`、`.env.local`、Token、密码、真实客服信息、`node_modules/`、`.venv/`、`dist/`、日志和数据库备份。
+
+更完整的协作边界、锁定文件和安全要求见 [`AGENTS.md`](AGENTS.md)。
diff --git a/WonderQ-MiniAPP/public/assets/concierge/wonderq-concierge-qr.png b/WonderQ-MiniAPP/public/assets/concierge/wonderq-concierge-qr.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b5c0396aeae552ddae023726046eed09333a70d
GIT binary patch
literal 633
zcmV-<0*3vGP)<h;3K|Lk000e1NJLTq00C$K00C$L0{{R3Kr8c>00006P)t-s|Ns90
z0033O(|!N|010qNS#tmY4#WTe4#WYKD-Ig~00J3FL_t(|ob8*tal<eWL{Gzjp-Mn0
zDvd0SrKkjj3^+XFejq4Q9>^(nBN=#Lv~xeeL|<v*&@O-8nMR)TkHJ@8#1#R$TY7cF
zq@5BAoi)bso6s*O9-zCX#aNrrrtGSbmw}g?yXxfxXwd(llWdCtS9<8CegQP-cUM_l
zlK9o)LC{^%RZg=~Cr6*WDf&ADf(HG8=1^2hRZe@}_;dXYx+nT9SzD$2S=3U@#Zp%S
z-4E@q+N|&q6Rokf+kxz~Y_oZgFMtN!PA}@P607J`DY5#p%4wkcqiJ+nT~*J0B3$J)
zjsgjE-?Ws(x}ytocF^eyCHjB{-AZpV=FuItxet5$o{pKJw_>1srE@{ENeX+aiAn*j
zCd%|(&z779x>H)_gK8L^<PgOqM^$&|3V{aQLX)N|`<=Y=^3bGnAI)<<h6dd)J(*#K
zG9R=KeWA;o2D)3i*vq>t*@?B}k%u)zSxy5Dx`m#Oiu%;g`|Si(i4Szgv^YpBYKj+u
zV;LB}mDr#=ro~krWjy+@cIbS_?jUy1pquDg$zzrIGONTYI|I63dMeI2I&^atMJpCB
zy^dp``=jH6D*696uy*K6)X3EnLEb@wZl%p(DP9D|@rS>)5Y-tFG-#nphwiA|b~0$t
z2W_>Fdr7*nI~Oek8gwgd`t3pTck8No0NpiROmlv>9=8*5hdy1^-=INX(qHKZV!&Hb
TTc5~I00000NkvXXu0mjf&p{)d

literal 0
HcmV?d00001

diff --git a/WonderQ-MiniAPP/src/components/BottomNav.vue b/WonderQ-MiniAPP/src/components/BottomNav.vue
index b432e1b..4e877c8 100644
--- a/WonderQ-MiniAPP/src/components/BottomNav.vue
+++ b/WonderQ-MiniAPP/src/components/BottomNav.vue
@@ -2,24 +2,25 @@
   <view>
     <view class="fixed bottom-0 left-1/2 z-40 w-full max-w-[430px] -translate-x-1/2">
       <view
-        class="bottom-nav-bar relative border-t border-[#1f6b57]/15 bg-white px-3 pb-[calc(6px+env(safe-area-inset-bottom))]"
+        class="bottom-nav-bar relative border-t border-[#e8e1d7] bg-[#fffdf9] px-2 pb-[calc(6px+env(safe-area-inset-bottom))]"
       >
-        <view class="relative z-20 grid grid-cols-5 gap-1">
+        <view class="relative z-20 grid grid-cols-4 gap-1">
           <view
             v-for="item in items"
             :key="item.id"
-            class="tap-feedback relative m-0 flex min-h-[48px] flex-col items-center justify-center gap-0.5 border-t-2 border-transparent bg-transparent px-1 py-0.5 text-[11px] leading-none"
-            :class="visualActive === item.id ? 'border-[#1f6b57] text-[#1f6b57]' : 'text-[#7d877f]'"
+            class="tap-feedback relative m-0 flex min-h-[50px] flex-col items-center justify-center gap-0.5 border-0 bg-transparent px-1 py-1 text-[11px] leading-none"
+            :class="visualActive === item.id ? 'text-[#2f2d2a]' : 'text-[#9a9590]'"
+            :aria-label="item.label"
             @click="select(item)"
           >
             <view
               class="bottom-nav-icon flex h-7 w-7 items-center justify-center rounded-[8px]"
-              :class="visualActive === item.id ? 'bg-[#e7f1ed]' : 'bg-transparent'"
+              :class="visualActive === item.id ? 'bg-[#eee9e2]' : 'bg-transparent'"
             >
               <uni-icons
                 :type="item.icon"
                 :size="20"
-                :color="visualActive === item.id ? '#1f6b57' : '#7d877f'"
+                :color="visualActive === item.id ? '#2f2d2a' : '#9a9590'"
               />
             </view>
             <text class="mt-0.5" :class="visualActive === item.id ? 'font-semibold' : 'font-medium'">{{ item.label }}</text>
@@ -27,18 +28,16 @@
         </view>
       </view>
     </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
   </view>
 </template>
 
 <script setup lang="ts">
-import SupportSheet from "@/components/SupportSheet.vue";
-import { go, goRoot } from "@/lib/navigation";
+import { goRoot } from "@/lib/navigation";
 import { isLoggedIn, requireLogin } from "@/lib/auth";
 import { ref, watch } from "vue";
 
-type NavId = "home" | "destination" | "order" | "manager" | "mine";
-type NavIcon = "home" | "location" | "list" | "headphones" | "person";
+type NavId = "home" | "play" | "manager" | "mine";
+type NavIcon = "home" | "list" | "headphones" | "person";
 
 const props = defineProps<{
   active: NavId;
@@ -48,20 +47,18 @@ const items: Array<{ id: NavId; label: string; icon: NavIcon; url?: string }> =
   [
     { id: "home", label: "首页", icon: "home", url: "/pages/home/index" },
     {
-      id: "destination",
-      label: "目的地",
-      icon: "location",
-      url: "/pages/destination/index",
+      id: "play",
+      label: "玩法",
+      icon: "list",
+      url: "/pages/play/index",
     },
-    { id: "order", label: "需求", icon: "list", url: "/pages/demand/index" },
-    { id: "manager", label: "管家", icon: "headphones" },
+    { id: "manager", label: "管家", icon: "headphones", url: "/pages/concierge/index" },
     { id: "mine", label: "我的", icon: "person", url: "/pages/mine/index" },
   ];
 
 const NAV_SLIDE_DELAY_MS = 150;
 let navigationTimer: ReturnType<typeof setTimeout> | undefined;
 const visualActive = ref<NavId>(props.active);
-const supportOpen = ref(false);
 
 watch(
   () => props.active,
@@ -71,15 +68,7 @@ watch(
 );
 
 function select(item: (typeof items)[number]) {
-  if (item.id === props.active && item.id !== "manager") return;
-  if (item.id === "manager") {
-    if (navigationTimer) {
-      clearTimeout(navigationTimer);
-      navigationTimer = undefined;
-    }
-    supportOpen.value = true;
-    return;
-  }
+  if (item.id === props.active) return;
   if (item.id === "mine" && !isLoggedIn()) {
     if (navigationTimer) {
       clearTimeout(navigationTimer);
@@ -90,13 +79,6 @@ function select(item: (typeof items)[number]) {
   }
   visualActive.value = item.id;
   if (navigationTimer) clearTimeout(navigationTimer);
-  if (item.id === "order") {
-    navigationTimer = setTimeout(() => {
-      navigationTimer = undefined;
-      go(item.url!);
-    }, NAV_SLIDE_DELAY_MS);
-    return;
-  }
   navigationTimer = setTimeout(() => {
     navigationTimer = undefined;
     goRoot(item.url!);
diff --git a/WonderQ-MiniAPP/src/components/SupportSheet.vue b/WonderQ-MiniAPP/src/components/SupportSheet.vue
deleted file mode 100644
index 68fbfed..0000000
--- a/WonderQ-MiniAPP/src/components/SupportSheet.vue
+++ /dev/null
@@ -1,395 +0,0 @@
-<template>
-  <uni-popup
-    ref="supportPopupRef"
-    type="bottom"
-    background-color="transparent"
-    mask-background-color="rgba(12, 22, 18, 0.62)"
-    border-radius="28px 28px 0 0"
-    @change="handlePopupChange"
-  >
-    <view class="support-sheet">
-      <view class="support-sheet__grabber" />
-      <view class="support-sheet__header">
-        <button
-          class="tap-feedback support-sheet__close m-0 p-0"
-          aria-label="关闭咨询服务管家弹窗"
-          @click="emit('close')"
-        >
-          <text class="support-sheet__close-line support-sheet__close-line--one" />
-          <text class="support-sheet__close-line support-sheet__close-line--two" />
-        </button>
-        <view class="support-sheet__heading">
-          <text class="support-sheet__eyebrow">WonderQ Concierge</text>
-          <text class="support-sheet__title">咨询服务管家</text>
-          <text class="support-sheet__subtitle">路线、酒店、用车和预算，都可以先找管家沟通</text>
-        </view>
-      </view>
-
-      <view class="support-sheet__body">
-        <button class="tap-feedback support-sheet__option support-sheet__option--primary m-0 p-0" aria-label="在线联系服务管家" @click="online">
-          <view class="support-sheet__icon support-sheet__icon--chat">
-            <view class="support-sheet__chat-icon" aria-hidden="true" />
-          </view>
-          <view class="support-sheet__copy">
-            <text class="support-sheet__row-title">在线联系</text>
-            <text class="support-sheet__row-desc">服务管家时间：8:30-22:30</text>
-            <view class="support-sheet__status">
-              <view class="support-sheet__status-dot" />
-              <text>当前可咨询</text>
-            </view>
-          </view>
-          <text class="support-sheet__arrow">›</text>
-        </button>
-
-        <button class="tap-feedback support-sheet__option m-0 p-0" aria-label="电话联系服务管家" @click="phone">
-          <view class="support-sheet__icon support-sheet__icon--phone">
-            <uni-icons type="headphones" :size="25" color="#1f6b57" />
-          </view>
-          <view class="support-sheet__copy">
-            <text class="support-sheet__row-title">电话联系</text>
-            <text class="support-sheet__row-label">境内拨打</text>
-            <text class="support-sheet__row-desc">{{ supportPhone }}</text>
-          </view>
-          <text class="support-sheet__arrow">›</text>
-        </button>
-        <view class="support-sheet__footnote">
-          <text>提交需求后，管家会按出行日期和人数继续补全方案。</text>
-        </view>
-      </view>
-    </view>
-  </uni-popup>
-</template>
-
-<script setup lang="ts">
-import { nextTick, onMounted, ref, watch } from "vue";
-import { callSupport, openOnlineSupport } from "@/lib/support";
-import { SUPPORT_PHONE } from "@/lib/types";
-
-type PopupExpose = {
-  open: (type?: string) => void;
-  close: () => void;
-};
-
-const props = defineProps<{
-  open: boolean;
-}>();
-
-const emit = defineEmits<{
-  close: [];
-}>();
-
-const supportPopupRef = ref<PopupExpose | null>(null);
-const supportPhone = SUPPORT_PHONE;
-
-async function syncPopup(open: boolean) {
-  await nextTick();
-  if (open) {
-    supportPopupRef.value?.open("bottom");
-    return;
-  }
-  supportPopupRef.value?.close();
-}
-
-watch(
-  () => props.open,
-  (open) => {
-    void syncPopup(open);
-  },
-);
-
-onMounted(() => {
-  if (props.open) {
-    void syncPopup(true);
-  }
-});
-
-function handlePopupChange(event: { show: boolean }) {
-  if (!event.show && props.open) {
-    emit("close");
-  }
-}
-
-function online() {
-  openOnlineSupport();
-  emit("close");
-}
-
-function phone() {
-  callSupport();
-  emit("close");
-}
-</script>
-
-<style scoped>
-.support-sheet {
-  position: relative;
-  box-sizing: border-box;
-  overflow: hidden;
-  width: 100%;
-  max-width: 430px;
-  margin: 0 auto;
-  border: 1px solid rgba(31, 107, 87, 0.15);
-  border-bottom: 0;
-  border-radius: 16px 16px 0 0;
-  background: #ffffff;
-  padding-bottom: calc(12px + env(safe-area-inset-bottom));
-  box-shadow: 0 -8px 24px rgba(31, 41, 36, 0.08);
-}
-
-.support-sheet__grabber {
-  position: absolute;
-  top: 9px;
-  left: 50%;
-  z-index: 2;
-  width: 42px;
-  height: 4px;
-  border-radius: 999px;
-  background: rgba(255, 255, 255, 0.55);
-  transform: translateX(-50%);
-}
-
-.support-sheet__header {
-  position: relative;
-  display: flex;
-  min-height: 116px;
-  align-items: flex-end;
-  border-bottom: 1px solid rgba(36, 92, 69, 0.1);
-  background: #1f6b57;
-  padding: 32px 22px 22px;
-  color: #fff;
-}
-
-.support-sheet__header::after {
-  display: none;
-}
-
-.support-sheet__heading {
-  position: relative;
-  z-index: 1;
-  min-width: 0;
-  padding-left: 48px;
-}
-
-.support-sheet__eyebrow {
-  display: block;
-  color: #f6dfb7;
-  font-size: 11px;
-  font-weight: 800;
-  letter-spacing: 0.12em;
-  line-height: 1;
-  text-transform: uppercase;
-}
-
-.support-sheet__title {
-  display: block;
-  margin-top: 9px;
-  color: #ffffff;
-  font-size: 24px;
-  font-weight: 800;
-  line-height: 1;
-}
-
-.support-sheet__subtitle {
-  display: block;
-  margin-top: 10px;
-  color: rgba(255, 255, 255, 0.74);
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.55;
-}
-
-.support-sheet__close {
-  position: absolute;
-  left: 18px;
-  top: 40px;
-  z-index: 3;
-  width: 34px;
-  height: 34px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  border-radius: 8px;
-  background: rgba(255, 255, 255, 0.14);
-  box-shadow: none;
-}
-
-.support-sheet__close::after {
-  display: none;
-}
-
-.support-sheet__close-line {
-  position: absolute;
-  left: 8px;
-  top: 16px;
-  width: 18px;
-  height: 2px;
-  border-radius: 999px;
-  background: #fffaf2;
-}
-
-.support-sheet__close-line--one {
-  transform: rotate(45deg);
-}
-
-.support-sheet__close-line--two {
-  transform: rotate(-45deg);
-}
-
-.support-sheet__body {
-  padding: 14px 14px 0;
-}
-
-.support-sheet__option {
-  display: grid;
-  width: 100%;
-  min-height: 92px;
-  grid-template-columns: 48px minmax(0, 1fr) 18px;
-  align-items: center;
-  column-gap: 13px;
-  border: 1px solid rgba(36, 92, 69, 0.11);
-  border-radius: 12px;
-  background: #ffffff;
-  padding: 16px 16px 16px 14px;
-  text-align: left;
-  box-shadow: none;
-}
-
-.support-sheet__option + .support-sheet__option {
-  margin-top: 10px;
-}
-
-.support-sheet__option--primary {
-  border-color: rgba(36, 92, 69, 0.16);
-  background: #f4f8f6;
-}
-
-.support-sheet__option::after {
-  display: none;
-}
-
-.support-sheet__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 48px;
-  height: 48px;
-  border-radius: 18px;
-}
-
-.support-sheet__icon--chat {
-  background: #1f6b57;
-  box-shadow: none;
-}
-
-.support-sheet__icon--phone {
-  border: 1px solid rgba(31, 107, 87, 0.15);
-  background: #e7f1ed;
-}
-
-.support-sheet__copy {
-  min-width: 0;
-}
-
-.support-sheet__row-title {
-  display: block;
-  color: #1f2c25;
-  font-size: 18px;
-  font-weight: 800;
-  line-height: 1.1;
-}
-
-.support-sheet__row-label {
-  display: block;
-  margin-top: 10px;
-  color: #3a463e;
-  font-size: 15px;
-  font-weight: 700;
-  line-height: 1;
-}
-
-.support-sheet__row-desc {
-  display: block;
-  margin-top: 7px;
-  color: #718073;
-  font-size: 13px;
-  font-weight: 400;
-  line-height: 1.35;
-}
-
-.support-sheet__status {
-  display: inline-flex;
-  min-height: 22px;
-  align-items: center;
-  gap: 6px;
-  margin-top: 9px;
-  border-radius: 8px;
-  background: #e7f1ed;
-  padding: 0 9px;
-  color: #245c45;
-  font-size: 11px;
-  font-weight: 700;
-  line-height: 22px;
-}
-
-.support-sheet__status-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: #2f8c62;
-  box-shadow: none;
-}
-
-.support-sheet__chat-icon {
-  position: relative;
-  width: 26px;
-  height: 21px;
-  border: 2px solid #fffaf2;
-  border-radius: 7px;
-}
-
-.support-sheet__chat-icon::after {
-  position: absolute;
-  left: 2px;
-  bottom: -7px;
-  width: 8px;
-  height: 8px;
-  border-left: 2px solid #fffaf2;
-  border-bottom: 2px solid #fffaf2;
-  border-radius: 0 0 0 3px;
-  background: #1f5a46;
-  content: "";
-}
-
-.support-sheet__arrow {
-  color: #8a7560;
-  font-size: 28px;
-  font-weight: 300;
-  line-height: 1;
-}
-
-.support-sheet__footnote {
-  padding: 12px 8px 2px;
-  color: #718073;
-  font-size: 11px;
-  line-height: 1.45;
-  text-align: center;
-}
-
-@media (max-width: 360px) {
-  .support-sheet__header {
-    min-height: 112px;
-    padding-right: 18px;
-    padding-left: 18px;
-  }
-
-  .support-sheet__heading {
-    padding-left: 44px;
-  }
-
-  .support-sheet__row-title {
-    font-size: 17px;
-  }
-
-  .support-sheet__row-desc {
-    font-size: 12px;
-  }
-}
-</style>
diff --git a/WonderQ-MiniAPP/src/components/TopHeader.vue b/WonderQ-MiniAPP/src/components/TopHeader.vue
index b0b6c1e..5facdc4 100644
--- a/WonderQ-MiniAPP/src/components/TopHeader.vue
+++ b/WonderQ-MiniAPP/src/components/TopHeader.vue
@@ -9,7 +9,7 @@
       </view>
       <view
         class="pointer-events-none absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center"
-        :class="search ? 'w-[calc(100%-192px)]' : 'w-[calc(100%-136px)]'">
+        :class="search ? 'w-[calc(100%-136px)]' : 'w-[calc(100%-88px)]'">
         <text class="block max-w-full truncate text-[17px] font-semibold leading-5 text-[#1f2924]">{{ title }}</text>
         <text v-if="subtitle" class="mt-0.5 block max-w-full truncate text-[11px] leading-4 text-[#68766e]">{{ subtitle
         }}</text>
@@ -20,11 +20,6 @@
           aria-label="搜索" @click="$emit('search')">
           <uni-icons type="search" :size="18" color="#1f6b57" />
         </view>
-        <view
-          class="tap-feedback m-0 flex h-11 w-11 items-center justify-center rounded-[10px] bg-[#1f6b57] p-0 text-white"
-          aria-label="服务管家" @click="$emit('support')">
-          <uni-icons type="headphones" :size="18" color="#ffffff" />
-        </view>
       </view>
     </view>
   </view>
@@ -40,7 +35,6 @@ defineProps<{
 defineEmits<{
   back: [];
   search: [];
-  support: [];
 }>();
 </script>
 
diff --git a/WonderQ-MiniAPP/src/lib/support.ts b/WonderQ-MiniAPP/src/lib/support.ts
deleted file mode 100644
index 4c0f569..0000000
--- a/WonderQ-MiniAPP/src/lib/support.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import { SUPPORT_PHONE } from "./types";
-
-const WECOM_CUSTOMER_SERVICE_URL = String(import.meta.env.VITE_WECOM_CUSTOMER_SERVICE_URL ?? "");
-const WECOM_CORP_ID = String(import.meta.env.VITE_WECOM_CORP_ID ?? "");
-
-type CustomerServiceOptions = {
-  extInfo: { url: string };
-  corpId: string;
-  success?: (result: unknown) => void;
-  fail?: (error: unknown) => void;
-  complete?: (result: unknown) => void;
-};
-
-type WechatRuntime = {
-  openCustomerServiceChat?: (options: CustomerServiceOptions) => void;
-};
-
-export function openOnlineSupport() {
-  const runtime = (uni as unknown as WechatRuntime).openCustomerServiceChat
-    ? (uni as unknown as WechatRuntime)
-    : ((globalThis as { wx?: WechatRuntime }).wx ?? {});
-
-  if (!runtime.openCustomerServiceChat) {
-    uni.showToast({ title: "请在微信内联系服务管家", icon: "none" });
-    return false;
-  }
-
-  if (!WECOM_CUSTOMER_SERVICE_URL || !WECOM_CORP_ID) {
-    console.info("Missing WeCom customer service env: VITE_WECOM_CUSTOMER_SERVICE_URL or VITE_WECOM_CORP_ID.");
-    uni.showToast({ title: "客服配置待完善", icon: "none" });
-    return false;
-  }
-
-  runtime.openCustomerServiceChat({
-    extInfo: { url: WECOM_CUSTOMER_SERVICE_URL },
-    corpId: WECOM_CORP_ID,
-    fail(error) {
-      console.warn("Failed to open WeCom customer service.", error);
-      uni.showToast({ title: "暂未打开客服", icon: "none" });
-    },
-  });
-  return true;
-}
-
-export function callSupport() {
-  uni.makePhoneCall({
-    phoneNumber: SUPPORT_PHONE,
-    fail() {
-      uni.showToast({ title: `可拨打 ${SUPPORT_PHONE}`, icon: "none" });
-    },
-  });
-}
diff --git a/WonderQ-MiniAPP/src/pages.json b/WonderQ-MiniAPP/src/pages.json
index c5d7164..1745d97 100644
--- a/WonderQ-MiniAPP/src/pages.json
+++ b/WonderQ-MiniAPP/src/pages.json
@@ -8,51 +8,16 @@
       }
     },
     {
-      "path": "pages/destination/index",
+      "path": "pages/play/index",
       "style": {
-        "navigationBarTitleText": "目的地",
+        "navigationBarTitleText": "玩法",
         "navigationStyle": "custom"
       }
     },
     {
-      "path": "pages/destination-picker/index",
+      "path": "pages/concierge/index",
       "style": {
-        "navigationBarTitleText": "选择目的地",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/search/index",
-      "style": {
-        "navigationBarTitleText": "搜索结果",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/campaign/index",
-      "style": {
-        "navigationBarTitleText": "活动",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/demand/index",
-      "style": {
-        "navigationBarTitleText": "提交需求",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/benefits/index",
-      "style": {
-        "navigationBarTitleText": "万趣权益",
-        "navigationStyle": "custom"
-      }
-    },
-    {
-      "path": "pages/booking/index",
-      "style": {
-        "navigationBarTitleText": "预订咨询",
+        "navigationBarTitleText": "管家",
         "navigationStyle": "custom"
       }
     },
diff --git a/WonderQ-MiniAPP/src/pages/benefits/index.vue b/WonderQ-MiniAPP/src/pages/benefits/index.vue
deleted file mode 100644
index 3fc5166..0000000
--- a/WonderQ-MiniAPP/src/pages/benefits/index.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<template>
-  <AppShell>
-    <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader title="万趣权益" subtitle="小包团旅行服务边界" search @back="goBack()" @search="goSearch('贵州')" @support="supportOpen = true" />
-      <view class="px-4 pt-4">
-        <view class="brand-panel rounded-[26px] p-5 text-white">
-          <view class="relative z-10">
-            <text class="block text-[12px] font-semibold uppercase tracking-[0.12em] text-[#f6dfb7]">{{ BRAND_FULL_NAME }}</text>
-            <text class="mt-2 block text-[28px] font-bold leading-9">把复杂的贵州旅行交给服务管家</text>
-            <text class="mt-3 block text-[13px] leading-6 text-white/85">小车小团、弹性动线、酒店资源和行前沟通统一协同。</text>
-          </view>
-        </view>
-      </view>
-      <view class="grid grid-cols-2 gap-3 px-4 py-5">
-        <view v-for="(item, index) in benefits" :key="item.title" class="travel-info-card p-4">
-          <view class="travel-dot mb-3 flex items-center justify-center">
-            <text class="text-[13px] font-bold">0{{ index + 1 }}</text>
-          </view>
-          <text class="block text-[16px] font-bold text-[#1f2c25]">{{ item.title }}</text>
-          <text class="mt-2 block text-[12px] leading-5 text-[#718073]">{{ item.desc }}</text>
-        </view>
-      </view>
-      <SectionHeading title="适合权益用户的线路" subtitle="从经典线路开始沟通更高效" />
-      <ProductList :products="appState.data.products.slice(8, 12)" @select="goDetail" />
-      <view class="px-4 py-6">
-        <button class="primary-action tap-feedback m-0 w-full text-[15px] font-bold" @click="supportOpen = true">咨询服务管家</button>
-      </view>
-    </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import ProductList from "@/components/ProductList.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { goBack, goDetail, goSearch } from "@/lib/navigation";
-import { appState, loadAppData } from "@/lib/store";
-import { BRAND_FULL_NAME } from "@/lib/types";
-
-const supportOpen = ref(false);
-const benefits = [
-  { title: "专属管家", desc: "出行人数、预算、酒店偏好和体力强度统一沟通。" },
-  { title: "弹性动线", desc: "按天气、交通和同行人状态调整每日节奏。" },
-  { title: "小车小团", desc: "2-8人小团优先匹配舒适车型和错峰入园。" },
-  { title: "资源确认", desc: "门票、住宿、体验和用车按最终方案确认边界。" },
-];
-
-onShow(() => {
-  void loadAppData();
-});
-</script>
diff --git a/WonderQ-MiniAPP/src/pages/booking/index.vue b/WonderQ-MiniAPP/src/pages/booking/index.vue
deleted file mode 100644
index 231b5ba..0000000
--- a/WonderQ-MiniAPP/src/pages/booking/index.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <AppShell>
-    <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader title="预订咨询" :subtitle="stripTitle(product.title)" @back="goBack()" @search="goSearch(product.destinationName || '贵州')" @support="supportOpen = true" />
-
-      <view v-if="step === 'success'" class="px-4 py-8 text-center">
-        <view class="elevated-card rounded-[26px] p-8">
-          <text class="block text-[26px] font-bold text-[#245c45]">需求已提交</text>
-          <text class="mt-3 block text-[13px] leading-6 text-[#718073]">服务管家会结合线路、日期、人数和备注给你确认方案。</text>
-          <button class="primary-action tap-feedback m-0 mt-6 w-full text-[15px] font-semibold" @click="supportOpen = true">联系服务管家</button>
-          <button class="secondary-action tap-feedback m-0 mt-3 w-full text-[15px] font-semibold" @click="goRoot('/pages/mine/index')">查看我的需求</button>
-        </view>
-      </view>
-
-      <view v-else>
-        <view class="elevated-card m-4 flex gap-3 rounded-[24px] p-3">
-          <image class="h-[100px] w-[116px] shrink-0 rounded-[18px]" :src="product.image" mode="aspectFill" />
-          <view class="min-w-0 flex-1">
-            <text class="text-clamp-2 text-[15px] font-bold leading-5 text-[#1f2c25]">{{ stripTitle(product.title) }}</text>
-            <text class="mt-2 block text-[12px] text-[#718073]">{{ product.tags.slice(0, 3).join(" / ") }}</text>
-            <text class="mt-3 block text-[18px] font-bold text-[#c36f21]">¥{{ formatWan(product.price) }}万/人起</text>
-          </view>
-        </view>
-
-        <view class="mx-4 mb-4 grid grid-cols-3 gap-2">
-          <view v-for="(item, index) in steps" :key="item" class="rounded-[18px] border px-2 py-3 text-center" :class="index <= activeIndex ? 'border-[#245c45] bg-[#245c45] text-white shadow-[0_10px_18px_rgba(36,92,69,0.15)]' : 'border-[#245c45]/10 bg-white/80 text-[#718073]'">
-            <text class="text-[12px]">{{ item }}</text>
-          </view>
-        </view>
-
-        <view class="elevated-card mx-4 rounded-[24px] p-4">
-          <view v-if="step === 'select'">
-            <text class="mb-3 block text-[16px] font-bold text-[#1f2c25]">选择行程偏好</text>
-            <view class="grid grid-cols-2 gap-2">
-              <button
-                v-for="item in plans"
-                :key="item"
-                class="tap-feedback m-0 min-h-[58px] rounded-[18px] border px-3 py-4 text-left"
-                :class="plan === item ? 'border-[#245c45] bg-[#245c45] text-white' : 'border-[#245c45]/10 bg-[#f6f7f2] text-[#1f2c25]'"
-                @click="plan = item"
-              >
-                {{ item }}
-              </button>
-            </view>
-            <label class="mt-4 block">
-              <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">出行日期</text>
-              <input v-model="travelDate" class="form-field rounded-[18px] px-3 text-[14px]" type="text" />
-            </label>
-            <view class="form-field mt-4 flex items-center justify-between rounded-[18px] px-3 py-3">
-              <view>
-                <text class="block text-[13px] font-semibold text-[#1f2c25]">同行人数</text>
-                <text class="text-[11px] text-[#718073]">按人数估算参考总价</text>
-              </view>
-              <view class="flex items-center gap-3">
-                <button class="tap-feedback m-0 h-10 w-10 rounded-full bg-white p-0 text-[18px] font-bold text-[#245c45] shadow-sm" @click="peopleCount = Math.max(1, peopleCount - 1)">-</button>
-                <text class="w-8 text-center text-[17px] font-bold">{{ peopleCount }}</text>
-                <button class="tap-feedback m-0 h-10 w-10 rounded-full bg-white p-0 text-[18px] font-bold text-[#245c45] shadow-sm" @click="peopleCount += 1">+</button>
-              </view>
-            </view>
-          </view>
-
-          <view v-if="step === 'contact'">
-            <text class="mb-3 block text-[16px] font-bold text-[#1f2c25]">留下联系方式</text>
-            <label class="mb-3 block">
-              <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">姓名</text>
-              <input v-model="contactName" class="form-field rounded-[18px] px-3 text-[14px]" type="text" placeholder="怎么称呼你" />
-            </label>
-            <label class="mb-3 block">
-              <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">手机号 / 微信号</text>
-              <input v-model="phone" class="form-field rounded-[18px] px-3 text-[14px]" type="text" placeholder="服务管家联系你" />
-            </label>
-            <label class="block">
-              <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">备注</text>
-              <textarea v-model="note" class="form-field min-h-[96px] w-full rounded-[18px] px-3 py-3 text-[14px]" maxlength="220" placeholder="酒店、预算、老人小孩、想避开的内容" />
-            </label>
-          </view>
-
-          <view v-if="step === 'confirm'">
-            <text class="mb-3 block text-[16px] font-bold text-[#1f2c25]">确认咨询信息</text>
-            <view v-for="[label, value] in confirmRows" :key="label" class="flex justify-between border-b border-black/5 py-3 text-[13px]">
-              <text class="text-[#718073]">{{ label }}</text>
-              <text class="max-w-[220px] text-right font-semibold text-[#1f2c25]">{{ value }}</text>
-            </view>
-          </view>
-        </view>
-
-        <text v-if="message" class="mx-4 mt-3 block text-[12px] text-[#c36f21]">{{ message }}</text>
-        <view class="fixed bottom-0 left-1/2 z-40 flex w-full max-w-[430px] -translate-x-1/2 items-center justify-between border-t border-[#245c45]/10 bg-[#fffaf2]/95 px-4 pb-[calc(12px+env(safe-area-inset-bottom))] pt-3 shadow-[0_-14px_32px_rgba(31,44,37,0.1)] backdrop-blur">
-          <view>
-            <text class="block text-[10px] text-[#718073]">参考总价</text>
-            <text class="block text-[18px] font-bold text-[#c36f21]">¥{{ totalLabel }}万</text>
-          </view>
-          <button class="primary-action tap-feedback m-0 px-8 text-[15px] font-bold" :class="submitting ? 'opacity-70' : ''" :disabled="submitting" @click="step === 'confirm' ? submit() : next()">
-            {{ submitting ? "提交中..." : step === "confirm" ? "提交需求" : "下一步" }}
-          </button>
-        </view>
-      </view>
-    </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { formatWan, isUuid, normalizeContactInput, stripTitle } from "@/lib/data";
-import { goBack, goRoot, goSearch } from "@/lib/navigation";
-import { findProduct, loadAppData, setLatestBooking, submitLead } from "@/lib/store";
-import type { Product } from "@/lib/types";
-
-const product = ref<Product>(findProduct());
-const step = ref<"select" | "contact" | "confirm" | "success">("select");
-const plan = ref("经典人文");
-const travelDate = ref("2027-01-01");
-const peopleCount = ref(2);
-const contactName = ref("");
-const phone = ref("");
-const note = ref("");
-const message = ref("");
-const submitting = ref(false);
-const supportOpen = ref(false);
-const steps = ["选择方案", "联系方式", "确认提交"];
-const plans = ["经典人文", "轻户外", "亲子舒适", "野奢住宿"];
-
-onLoad((query) => {
-  product.value = findProduct(typeof query?.product === "string" ? decodeURIComponent(query.product) : undefined);
-});
-
-onShow(() => {
-  void loadAppData();
-});
-
-const activeIndex = computed(() => steps.indexOf(step.value === "select" ? "选择方案" : step.value === "contact" ? "联系方式" : "确认提交"));
-const totalLabel = computed(() => {
-  const amount = Number(product.value.price) * peopleCount.value;
-  return Number.isFinite(amount) ? formatWan(String(amount)) : formatWan(product.value.price);
-});
-const confirmRows = computed(() => [
-  ["线路", stripTitle(product.value.title)],
-  ["偏好", plan.value],
-  ["日期", travelDate.value],
-  ["人数", `${peopleCount.value}人`],
-  ["联系", contactName.value ? `${contactName.value} / ${phone.value}` : phone.value],
-]);
-
-function next() {
-  message.value = "";
-  if (step.value === "select") step.value = "contact";
-  else if (step.value === "contact") {
-    if (!normalizeContactInput(phone.value)) {
-      message.value = "请留下手机号或微信号，方便服务管家联系你。";
-      return;
-    }
-    step.value = "confirm";
-  }
-}
-
-async function submit() {
-  const contact = normalizeContactInput(phone.value);
-  if (!contact) {
-    message.value = "请留下手机号或微信号，方便服务管家联系你。";
-    return;
-  }
-
-  submitting.value = true;
-  const result = await submitLead(
-    {
-      destination: product.value.destinationName || "贵州",
-      phone: contact,
-      travelDate: travelDate.value,
-      peopleCount: peopleCount.value,
-      sourcePage: "product_consult",
-      sourceProductId: isUuid(product.value.apiId) ? product.value.apiId : undefined,
-      note: [`咨询线路：${stripTitle(product.value.title)}`, `方案偏好：${plan.value}`, contactName.value ? `称呼：${contactName.value}` : "", note.value].filter(Boolean).join("；"),
-    },
-    false,
-  );
-  submitting.value = false;
-  if (!result.ok) {
-    message.value = result.message || "提交失败，请稍后再试。";
-    return;
-  }
-
-  setLatestBooking({
-    product: product.value,
-    status: "待管家确认",
-    time: "刚刚",
-    action: "联系服务管家",
-  });
-  step.value = "success";
-}
-</script>
diff --git a/WonderQ-MiniAPP/src/pages/campaign/index.vue b/WonderQ-MiniAPP/src/pages/campaign/index.vue
deleted file mode 100644
index bb04d4a..0000000
--- a/WonderQ-MiniAPP/src/pages/campaign/index.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <AppShell>
-    <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader :title="campaignTitle" subtitle="限时优惠和主题玩法" search @back="goBack()" @search="goSearch(campaignTitle)" @support="supportOpen = true" />
-      <view class="px-4 pt-4">
-        <view class="relative h-[260px] overflow-hidden rounded-[26px] text-white shadow-[0_16px_34px_rgba(31,44,37,0.15)]">
-          <image class="absolute inset-0 h-full w-full" :src="heroImage" mode="aspectFill" />
-          <view class="hero-scrim absolute inset-0" />
-          <view class="absolute bottom-5 left-5 right-5">
-            <text class="block text-[12px] font-semibold uppercase tracking-[0.12em] text-white/85">{{ BRAND_FULL_NAME }}</text>
-            <text class="mt-2 block text-[27px] font-bold leading-9">{{ campaignTitle }}</text>
-            <text class="mt-3 block text-[13px] leading-5 opacity-90">{{ campaignCopy }}</text>
-          </view>
-        </view>
-      </view>
-      <view class="grid grid-cols-2 gap-3 px-4 py-4">
-        <button class="primary-action tap-feedback m-0 px-4 text-[14px] font-bold" @click="products[0] && goDetail(products[0])">查看首条线路</button>
-        <button class="gold-action tap-feedback m-0 px-4 text-[14px] font-bold" @click="goDemand(campaignTitle)">提交定制需求</button>
-      </view>
-      <SectionHeading title="活动线路" subtitle="管家会按同行人数重新核价" />
-      <ProductList :products="products" @select="goDetail" />
-    </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import ProductList from "@/components/ProductList.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { getSearchProducts } from "@/lib/data";
-import { goBack, goDemand, goDetail, goSearch } from "@/lib/navigation";
-import { appState, loadAppData } from "@/lib/store";
-import { BRAND_FULL_NAME } from "@/lib/types";
-
-const type = ref("经典打卡特惠");
-const supportOpen = ref(false);
-
-onLoad((query) => {
-  if (typeof query?.type === "string") type.value = decodeURIComponent(query.type);
-});
-
-onShow(() => {
-  void loadAppData();
-});
-
-const campaignTitle = computed(() => type.value);
-const campaign = computed(() =>
-  appState.data.campaigns.find(
-    (item) =>
-      item.campaignType === type.value ||
-      item.title === type.value ||
-      item.slug === type.value,
-  ),
-);
-const campaignCopy = computed(() => {
-  if (campaign.value?.description) return campaign.value.description;
-  if (type.value === "山野野咖特惠") return "溶洞、漂流、峰林骑行和山野咖啡组合，适合喜欢轻户外和松弛感的同行人。";
-  if (type.value === "综合混搭特惠") return "把自然风光、人文村寨和精品住宿组合进一条更松弛的贵州线路。";
-  return "黄果树、荔波、西江、梵净山等首游动线，提前锁定小包团优惠。";
-});
-const heroImage = computed(() => campaign.value?.image ?? (type.value === "山野野咖特惠" ? "/assets/guizhou/shuichunhe-rafting.jpg" : "/assets/guizhou/libo-xiaoqikong.jpg"));
-const products = computed(() => getSearchProducts(appState.data.products, type.value).slice(0, 8));
-</script>
diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeAdvisor.vue b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeAdvisor.vue
new file mode 100644
index 0000000..8f0f578
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeAdvisor.vue
@@ -0,0 +1,47 @@
+<template>
+  <view class="pb-8">
+    <view
+      v-for="advisor in advisors"
+      :key="advisor.name"
+      class="tap-feedback cursor-pointer px-5 pb-4 last:pb-0"
+      @click="emit('select', advisor)"
+    >
+      <view class="rounded-[16px] bg-[#252321] px-6 py-6 text-white shadow-[0_18px_32px_rgba(45,37,31,0.12)]">
+        <view class="flex items-center gap-3">
+          <image
+            class="h-14 w-14 shrink-0 rounded-full border border-white/30 bg-[#b9a99b] object-cover"
+            :src="advisor.avatar"
+            mode="aspectFill"
+            :alt="`${advisor.name}头像`"
+          />
+          <view class="min-w-0">
+            <text class="block text-[15px] font-medium tracking-[0.14em]">{{ advisor.name }}</text>
+            <text class="mt-1 block text-[9px] font-semibold tracking-[0.2em] text-[#ee5b2a]">{{ advisor.role }}</text>
+          </view>
+          <view class="ml-auto flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-white/10">
+            <uni-icons type="checkmarkempty" :size="15" color="#d8d0c8" />
+          </view>
+        </view>
+
+        <view class="mt-11 flex flex-col gap-3">
+          <view v-for="detail in advisor.details" :key="detail.label" class="flex items-center gap-2">
+            <uni-icons :type="detail.icon" :size="15" color="#f0e6dc" />
+            <text class="text-[12px] text-[#f0e6dc]">{{ detail.label }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { ConciergeAdvisor as Advisor } from "./conciergeTypes";
+
+defineProps<{
+  advisors: Advisor[];
+}>();
+
+const emit = defineEmits<{
+  select: [advisor: Advisor];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue
new file mode 100644
index 0000000..840d1c4
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeContactSheet.vue
@@ -0,0 +1,94 @@
+<template>
+  <uni-popup
+    ref="popupRef"
+    type="bottom"
+    background-color="transparent"
+    mask-background-color="rgba(0,0,0,0.45)"
+    :is-mask-click="true"
+    :safe-area="false"
+    @change="onPopupChange"
+  >
+    <view
+      v-if="advisor"
+      class="mx-auto max-h-[88vh] w-full max-w-[430px] overflow-y-auto rounded-t-[24px] bg-white px-5 pb-[calc(20px+env(safe-area-inset-bottom))] pt-3"
+    >
+      <view class="mx-auto h-1 w-10 rounded-full bg-[#d9d3cd]" />
+
+      <view class="mt-5 flex items-center justify-between">
+        <view>
+          <text class="block text-[11px] font-semibold tracking-[0.28em] text-[#ee5b2a]">CONTACT ADVISOR</text>
+          <text class="mt-2 block text-[22px] font-semibold text-[#171615]">添加专属管家</text>
+        </view>
+        <view
+          class="tap-feedback flex h-10 w-10 items-center justify-center text-[#4d4945]"
+          aria-label="关闭"
+          @click="$emit('close')"
+        >
+          <uni-icons type="closeempty" :size="22" color="#4d4945" />
+        </view>
+      </view>
+
+      <view class="mt-5 flex items-center gap-3 rounded-[12px] bg-[#f7f4f0] p-3">
+        <image class="h-12 w-12 shrink-0 rounded-full bg-[#b9a99b] object-cover" :src="advisor.avatar" mode="aspectFill" />
+        <view class="min-w-0">
+          <text class="block text-[15px] font-semibold text-[#171615]">{{ advisor.name }}</text>
+          <text class="mt-1 block text-[10px] font-semibold tracking-[0.12em] text-[#ee5b2a]">{{ advisor.role }}</text>
+        </view>
+      </view>
+
+      <view class="mt-5 flex flex-col items-center rounded-[16px] border border-[#ece7e1] bg-[#fffdfb] px-5 py-5">
+        <image
+          class="h-[220px] w-[220px]"
+          :src="advisor.qrImage"
+          mode="aspectFit"
+          show-menu-by-longpress
+          alt="管家微信二维码"
+        />
+        <text class="mt-4 text-center text-[13px] font-semibold text-[#252321]">长按二维码识别，添加管家好友</text>
+        <text class="mt-2 text-center text-[11px] leading-5 text-[#77716b]">添加后可沟通路线、预算、酒店和用车安排</text>
+      </view>
+
+      <view class="mt-4 grid grid-cols-2 gap-2">
+        <view v-for="detail in advisor.details" :key="detail.label" class="flex items-center gap-2 rounded-[10px] bg-[#f7f4f0] px-3 py-3">
+          <uni-icons :type="detail.icon" :size="15" color="#4d4945" />
+          <text class="text-[11px] text-[#4d4945]">{{ detail.label }}</text>
+        </view>
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script setup lang="ts">
+import { nextTick, ref, watch } from "vue";
+import type { ConciergeAdvisor } from "./conciergeTypes";
+
+type UniPopupExpose = {
+  open: (direction?: string) => void;
+  close: () => void;
+};
+
+const props = defineProps<{
+  open: boolean;
+  advisor: ConciergeAdvisor | null;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const popupRef = ref<UniPopupExpose | null>(null);
+
+watch(
+  () => props.open,
+  async (open) => {
+    await nextTick();
+    if (open) popupRef.value?.open("bottom");
+    else popupRef.value?.close();
+  },
+  { immediate: true },
+);
+
+function onPopupChange(event: { show: boolean }) {
+  if (!event.show) emit("close");
+}
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeHero.vue b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeHero.vue
new file mode 100644
index 0000000..d43a11f
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergeHero.vue
@@ -0,0 +1,10 @@
+<template>
+  <view class="px-8 pb-12 pt-10 text-center">
+    <text class="block text-[10px] font-semibold tracking-[0.46em] text-[#ee5b2a]">BESPOKE SERVICE</text>
+    <text class="mt-5 block text-[30px] font-medium leading-10 tracking-[0.08em] text-[#171615]">专属私享管家</text>
+    <text class="mt-3 block text-[13px] tracking-[0.08em] text-[#77716b]">一对一高定咨询与行程重塑</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/ConciergePrinciples.vue b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergePrinciples.vue
new file mode 100644
index 0000000..a77e070
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/components/ConciergePrinciples.vue
@@ -0,0 +1,29 @@
+<template>
+  <view class="px-8 pb-12">
+    <view class="concierge-principles relative">
+      <view class="absolute bottom-5 left-[15px] top-5 w-px bg-[#eae6e1]" />
+      <view v-for="principle in principles" :key="principle.title" class="relative flex gap-4 pb-9 last:pb-0">
+        <view
+          class="relative z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full border border-[#ece8e3] bg-white">
+          <uni-icons :type="principle.icon" :size="15" color="#4d4945" />
+        </view>
+        <view class="min-w-0 pt-0.5">
+          <text class="block text-[16px] font-semibold leading-6 text-[#171615]">{{ principle.title }}</text>
+          <text class="mt-2 block text-[12px] leading-5 text-[#716b66]">{{ principle.description }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+export interface Principle {
+  icon: string;
+  title: string;
+  description: string;
+}
+
+defineProps<{
+  principles: Principle[];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/concierge/components/conciergeTypes.ts b/WonderQ-MiniAPP/src/pages/concierge/components/conciergeTypes.ts
new file mode 100644
index 0000000..bbb44df
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/components/conciergeTypes.ts
@@ -0,0 +1,10 @@
+export type ConciergeAdvisor = {
+  avatar: string;
+  name: string;
+  role: string;
+  details: Array<{
+    icon: string;
+    label: string;
+  }>;
+  qrImage: string;
+};
diff --git a/WonderQ-MiniAPP/src/pages/concierge/index.vue b/WonderQ-MiniAPP/src/pages/concierge/index.vue
new file mode 100644
index 0000000..182f555
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/concierge/index.vue
@@ -0,0 +1,80 @@
+<template>
+  <AppShell>
+    <scroll-view scroll-y class="min-h-screen bg-white text-[#171615] safe-bottom no-scrollbar">
+      <ConciergeHero />
+      <ConciergeAdvisor :advisors="advisors" @select="openAdvisor" />
+      <ConciergePrinciples :principles="principles" />
+    </scroll-view>
+
+    <BottomNav active="manager" />
+    <ConciergeContactSheet :open="Boolean(selectedAdvisor)" :advisor="selectedAdvisor" @close="selectedAdvisor = null" />
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import AppShell from "@/components/AppShell.vue";
+import BottomNav from "@/components/BottomNav.vue";
+import ConciergeHero from "./components/ConciergeHero.vue";
+import ConciergePrinciples from "./components/ConciergePrinciples.vue";
+import ConciergeAdvisor from "./components/ConciergeAdvisor.vue";
+import ConciergeContactSheet from "./components/ConciergeContactSheet.vue";
+import type { ConciergeAdvisor as ConciergeAdvisorData } from "./components/conciergeTypes";
+
+const principles = [
+  {
+    icon: "star",
+    title: "不设限的行程重塑",
+    description: "真正的探索，无需向标准路线妥协。打破既定行程的束缚，由专属管家跨越地理限制重新拼图，交付绝无仅有的融合方案。",
+  },
+  {
+    icon: "checkmarkempty",
+    title: "极致的安全冗余",
+    description: "配备两套保障系统与全套野外救援预案。专业执行团队将一切未知的野外风险，转化为精准的数据兜底。",
+  },
+  {
+    icon: "person",
+    title: "专业级的小众视角",
+    description: "摒弃走马观花的常规打卡。依托对在地资源的绝对掌控，在耳熟能详的大众景点中，开辟极高的隐藏动线，重塑探索的深度与质感。",
+  },
+];
+
+const advisors: ConciergeAdvisorData[] = [
+  {
+    avatar: "/assets/source/asset-001-e3ccdf0858.jpg",
+    name: "Amanda",
+    role: "SENIOR TRAVEL ADVISOR",
+    qrImage: "/assets/concierge/wonderq-concierge-qr.png",
+    details: [
+      { icon: "calendar", label: "服务经验：8年" },
+      { icon: "navigate", label: "擅长领域：瀑降 / 探洞" },
+    ],
+  },
+  {
+    avatar: "/assets/source/asset-000-6130f5faf6.jpg",
+    name: "Mia",
+    role: "LIFESTYLE TRAVEL ADVISOR",
+    qrImage: "/assets/concierge/wonderq-concierge-qr.png",
+    details: [
+      { icon: "calendar", label: "服务经验：6年" },
+      { icon: "navigate", label: "擅长领域：溯溪 / 人文探索" },
+    ],
+  },
+  {
+    avatar: "/assets/guizhou/karst-cave-explorer.jpg",
+    name: "Leo",
+    role: "WILD TRAVEL ADVISOR",
+    qrImage: "/assets/concierge/wonderq-concierge-qr.png",
+    details: [
+      { icon: "calendar", label: "服务经验：9年" },
+      { icon: "navigate", label: "擅长领域：洞穴探险 / 山地徒步" },
+    ],
+  },
+];
+
+const selectedAdvisor = ref<ConciergeAdvisorData | null>(null);
+
+function openAdvisor(advisor: ConciergeAdvisorData) {
+  selectedAdvisor.value = advisor;
+}
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/demand/index.vue b/WonderQ-MiniAPP/src/pages/demand/index.vue
deleted file mode 100644
index 795b2e7..0000000
--- a/WonderQ-MiniAPP/src/pages/demand/index.vue
+++ /dev/null
@@ -1,180 +0,0 @@
-<template>
-  <AppShell>
-    <view class="demand-page bg-transparent">
-      <TopHeader title="提交出行需求" subtitle="服务管家会按需求给方案" search @back="goBack()" @search="goSearch(destination || '贵州')"
-        @support="supportOpen = true" />
-      <view class="demand-page__body no-scrollbar">
-      <view class="px-4 pt-4">
-        <view class="brand-panel rounded-[26px] p-5 text-white">
-          <view class="relative z-10">
-            <text class="block text-[12px] font-semibold uppercase tracking-[0.12em] text-[#f6dfb7]">{{
-              demandHero.kicker }}</text>
-            <text class="mt-2 block text-[26px] font-bold leading-8">{{ demandHero.title }}</text>
-            <text class="mt-3 block text-[13px] leading-6 text-white/80">{{ demandHero.description }}</text>
-            <view class="mt-4 grid grid-cols-3 gap-2">
-              <view v-for="step in demandHero.steps" :key="step"
-                class="flex min-h-[42px] items-center justify-center rounded-full border border-white/16 bg-white/10 px-3 py-2 text-center">
-                <text class="text-[12px] font-semibold">{{ step }}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </view>
-
-      <view class="mx-4 mt-4 grid grid-cols-3 gap-2">
-        <view v-for="card in demandFeatureCards" :key="card.title" class="travel-info-card px-3 py-3 text-center">
-          <text class="block text-[14px] font-bold text-[#245c45]">{{ card.title }}</text>
-          <text class="mt-1 block text-[10px] leading-4 text-[#718073]">{{ card.description }}</text>
-        </view>
-      </view>
-
-      <view class="elevated-card mx-4 mt-4 rounded-[24px] p-4">
-        <label class="mb-3 block">
-          <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">{{ demandForm.destinationLabel }}</text>
-          <input v-model="destination" class="form-field rounded-[18px] px-3 text-[14px]" type="text"
-            :placeholder="demandForm.destinationPlaceholder" />
-        </label>
-        <view class="mb-3 flex flex-wrap gap-2">
-          <view v-for="chip in demandForm.chips" :key="chip"
-            class="demand-chip tap-feedback m-0 rounded-full bg-[#edf4ee] px-3 text-center"
-            @click="destination = chip">
-            <text class="text-[12px] font-semibold leading-none text-[#245c45]">{{ chip }}</text>
-          </view>
-        </view>
-        <label class="mb-3 block">
-          <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">{{ demandForm.phoneLabel }}</text>
-          <input v-model="phone" class="form-field rounded-[18px] px-3 text-[14px]" type="text"
-            :placeholder="demandForm.phonePlaceholder" />
-        </label>
-        <label class="mb-3 block">
-          <text class="mb-2 block text-[13px] font-semibold text-[#1f2c25]">{{ demandForm.noteLabel }}</text>
-          <textarea v-model="note" class="form-field min-h-[96px] w-full rounded-[18px] px-3 py-3 text-[14px]"
-            maxlength="200" :placeholder="demandForm.notePlaceholder" />
-        </label>
-        <button class="demand-submit-action primary-action tap-feedback m-0 w-full text-[15px] font-bold"
-          :class="submitting ? 'opacity-70' : ''" :disabled="submitting" @click="submit">
-          {{ submitting ? "提交中..." : demandForm.submitLabel }}
-        </button>
-        <text v-if="message" class="mt-3 block text-[12px]" :class="submitOk ? 'text-[#245c45]' : 'text-[#c36f21]'">{{
-          message }}</text>
-      </view>
-
-      <view class="py-5">
-        <SectionHeading :title="demandRecommendation.title" :subtitle="demandRecommendation.subtitle" />
-        <ProductList :products="demandRecommendation.products" @select="goDetail" />
-      </view>
-      </view>
-    </view>
-    <BottomNav active="order" />
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import BottomNav from "@/components/BottomNav.vue";
-import ProductList from "@/components/ProductList.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { normalizeContactInput } from "@/lib/data";
-import { goBack, goDetail, goSearch } from "@/lib/navigation";
-import { appState, findProduct, loadAppData, submitLead } from "@/lib/store";
-
-const destination = ref("贵州");
-const phone = ref("");
-const note = ref("");
-const message = ref("");
-const submitOk = ref(false);
-const submitting = ref(false);
-const supportOpen = ref(false);
-const sourceProductId = ref<string | undefined>();
-const demandHero = computed(() => appState.data.demandHero);
-const demandFeatureCards = computed(() => appState.data.demandFeatureCards);
-const demandForm = computed(() => appState.data.demandForm);
-const demandRecommendation = computed(() => appState.data.demandRecommendation);
-
-onLoad((query) => {
-  if (typeof query?.destination === "string") destination.value = decodeURIComponent(query.destination);
-  if (typeof query?.product === "string") {
-    const product = findProduct(decodeURIComponent(query.product));
-    sourceProductId.value = product.apiId;
-    destination.value = product.destinationName || destination.value;
-    note.value = `咨询线路：${product.title}`;
-  }
-});
-
-onShow(() => {
-  void loadAppData();
-});
-
-async function submit() {
-  const contact = normalizeContactInput(phone.value);
-  if (!contact) {
-    message.value = "请留下手机号或微信号，方便服务管家联系你。";
-    submitOk.value = false;
-    return;
-  }
-
-  submitting.value = true;
-  const result = await submitLead(
-    {
-      destination: destination.value.trim() || "贵州",
-      phone: contact,
-      note: note.value.trim() || undefined,
-      sourcePage: "demand_page",
-      sourceProductId: sourceProductId.value,
-    },
-    false,
-  );
-  submitting.value = false;
-  submitOk.value = result.ok;
-  message.value = result.message ?? (result.ok ? "已提交" : "提交失败");
-  if (result.ok) {
-    phone.value = "";
-    note.value = "";
-  }
-}
-</script>
-
-<style scoped>
-.demand-page {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  min-height: 100vh;
-  overflow: hidden;
-}
-
-.demand-page__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding-bottom: calc(64px + env(safe-area-inset-bottom));
-}
-
-.demand-submit-action {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  text-align: center;
-  line-height: normal;
-}
-
-.demand-chip {
-  display: flex;
-  height: 36px;
-  align-items: center;
-  justify-content: center;
-}
-
-@media (min-width: 431px) {
-  .demand-page {
-    height: calc(100vh - 32px);
-    min-height: calc(100vh - 32px);
-  }
-}
-</style>
diff --git a/WonderQ-MiniAPP/src/pages/destination-picker/index.vue b/WonderQ-MiniAPP/src/pages/destination-picker/index.vue
deleted file mode 100644
index 1496b9a..0000000
--- a/WonderQ-MiniAPP/src/pages/destination-picker/index.vue
+++ /dev/null
@@ -1,85 +0,0 @@
-<template>
-  <AppShell>
-    <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader title="选择目的地" subtitle="国内/出境目的地入口沿用源站结构" search @back="goBack('/pages/destination/index')" @search="goSearch('贵州')" @support="supportOpen = true" />
-      <view class="flex">
-        <scroll-view scroll-y class="h-[calc(100vh-76px)] w-[112px] border-r border-[#245c45]/10 bg-[#edf2ea]/90">
-          <button
-            v-for="group in groups"
-            :key="group.label"
-            class="tap-feedback m-0 w-full rounded-none border-l-[3px] px-3 py-4 text-left text-[13px]"
-            :class="activeGroup === group.label ? 'border-[#245c45] bg-[#fffaf2] font-bold text-[#245c45]' : 'border-transparent bg-transparent text-[#718073]'"
-            @click="activeGroup = group.label"
-          >
-            {{ group.label }}
-          </button>
-        </scroll-view>
-        <scroll-view scroll-y class="h-[calc(100vh-76px)] flex-1 px-4 py-4">
-          <SectionHeading :title="activeGroup" subtitle="点击目的地查看对应产品" />
-          <view class="grid grid-cols-2 gap-3">
-            <button
-              v-for="item in activeItems"
-              :key="item.label"
-              class="tap-feedback relative m-0 h-[116px] overflow-hidden rounded-[20px] p-0 text-white shadow-[0_10px_22px_rgba(31,44,37,0.12)]"
-              @click="goSearch(item.keyword || item.label)"
-            >
-              <image v-if="item.image" class="absolute inset-0 h-full w-full" :src="item.image" mode="aspectFill" />
-              <view class="hero-scrim absolute inset-0" />
-              <text class="absolute bottom-3 left-3 right-3 text-[15px] font-bold">{{ item.label }}</text>
-            </button>
-          </view>
-        </scroll-view>
-      </view>
-    </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import AppShell from "@/components/AppShell.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { goBack, goSearch } from "@/lib/navigation";
-import { appState } from "@/lib/store";
-
-const supportOpen = ref(false);
-const activeGroup = ref("热门推荐");
-
-const groups = computed(() => [
-  {
-    label: "热门推荐",
-    items: appState.data.destinations.slice(0, 10).map((item) => ({ label: item.label, image: item.image, keyword: item.label })),
-  },
-  {
-    label: "贵州玩法",
-    items: [
-      { label: "经典人文打卡", keyword: "经典人文打卡线路", image: "/assets/guizhou/xijiang-miao-village.jpg" },
-      { label: "山野户外野咖", keyword: "极限山野户外野咖线路", image: "/assets/guizhou/wanfenglin.jpg" },
-      { label: "溶洞探险", keyword: "天然的溶洞探险", image: "/assets/guizhou/zhijin-cave.jpg" },
-      { label: "非遗体验", keyword: "特有的人文体验", image: "/assets/guizhou/miao-costume.jpg" },
-    ],
-  },
-  {
-    label: "国内长线",
-    items: [
-      { label: "云南", keyword: "云南", image: "/assets/source/secondary-yunnan-cce4700549.png" },
-      { label: "新疆", keyword: "新疆", image: "/assets/source/secondary-xinjiang-7bdff060a5.jpg" },
-      { label: "甘肃", keyword: "甘肃", image: "/assets/source/secondary-gansu-0a92435395.jpg" },
-      { label: "内蒙古", keyword: "内蒙古", image: "/assets/source/asset-001-e3ccdf0858.jpg" },
-    ],
-  },
-  {
-    label: "出境灵感",
-    items: [
-      { label: "泰国", keyword: "泰国", image: "/assets/source/secondary-thailand-e9aa2cae4e.jpg" },
-      { label: "马尔代夫", keyword: "马尔代夫", image: "/assets/source/secondary-maldives-283b20785e.jpg" },
-      { label: "法国", keyword: "法国", image: "/assets/source/secondary-france-41bf852d5e.jpg" },
-      { label: "肯尼亚", keyword: "肯尼亚", image: "/assets/source/secondary-kenya-1c2c61d13a.jpg" },
-    ],
-  },
-]);
-
-const activeItems = computed(() => groups.value.find((group) => group.label === activeGroup.value)?.items ?? groups.value[0].items);
-</script>
diff --git a/WonderQ-MiniAPP/src/pages/destination/index.vue b/WonderQ-MiniAPP/src/pages/destination/index.vue
deleted file mode 100644
index 32831dc..0000000
--- a/WonderQ-MiniAPP/src/pages/destination/index.vue
+++ /dev/null
@@ -1,103 +0,0 @@
-<template>
-  <AppShell>
-    <view class="destination-page bg-transparent">
-      <TopHeader title="目的地" subtitle="贵州省内玩法和目的地" search @back="goBack()" @search="goSearch('贵州')" @support="supportOpen = true" />
-      <view class="destination-page__body no-scrollbar">
-        <view class="px-4 pt-4">
-          <view class="relative h-[220px] overflow-hidden rounded-[26px] text-white shadow-[0_16px_32px_rgba(31,44,37,0.14)]">
-            <image class="absolute inset-0 h-full w-full" :src="destinationHero.image" mode="aspectFill" />
-            <view class="hero-scrim absolute inset-0" />
-            <view class="absolute bottom-5 left-5 right-5">
-              <text class="block text-[12px] font-semibold">{{ destinationHero.kicker }}</text>
-              <text class="mt-2 block text-[25px] font-bold leading-8">{{ destinationHero.title }}</text>
-            </view>
-          </view>
-        </view>
-
-        <view class="py-5">
-          <SectionHeading title="热门区域" subtitle="按区域快速选线路" />
-          <view class="grid grid-cols-3 gap-2 px-4">
-            <button
-              v-for="region in destinationRegions"
-              :key="region.label"
-              class="tap-feedback m-0 min-h-[104px] rounded-[20px] border border-[#245c45]/10 bg-white/90 px-3 py-4 text-left shadow-[0_10px_20px_rgba(31,44,37,0.06)]"
-              @click="goSearch(region.keyword)"
-            >
-              <text class="block text-[14px] font-bold text-[#245c45]">{{ region.label }}</text>
-              <text class="mt-1 text-clamp-2 text-[10px] leading-4 text-[#718073]">{{ region.spots }}</text>
-            </button>
-          </view>
-        </view>
-
-        <view class="py-2">
-          <SectionHeading title="省内目的地" subtitle="点击查看对应线路" action="全部" @action="go('/pages/destination-picker/index')" />
-          <view class="grid grid-cols-2 gap-3 px-4">
-            <button
-              v-for="destination in appState.data.destinations"
-              :key="destination.id || destination.label"
-              class="tap-feedback relative m-0 h-[118px] overflow-hidden rounded-[20px] p-0 text-left text-white shadow-[0_10px_22px_rgba(31,44,37,0.12)]"
-              @click="goSearch(destination.label)"
-            >
-              <image v-if="destination.image" class="absolute inset-0 h-full w-full" :src="destination.image" mode="aspectFill" />
-              <view class="absolute inset-0 bg-black/35" />
-              <text class="absolute bottom-3 left-3 right-3 text-[16px] font-bold">{{ destination.label }}</text>
-            </button>
-          </view>
-        </view>
-
-        <view class="py-5">
-          <SectionHeading title="推荐线路" subtitle="先看几条贵州经典线路" />
-          <ProductList :products="products.slice(0, 4)" @select="goDetail" />
-        </view>
-      </view>
-    </view>
-    <BottomNav active="destination" />
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import BottomNav from "@/components/BottomNav.vue";
-import ProductList from "@/components/ProductList.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { go, goBack, goDetail, goSearch } from "@/lib/navigation";
-import { appState, loadAppData } from "@/lib/store";
-
-const supportOpen = ref(false);
-const products = computed(() => appState.data.products);
-const destinationHero = computed(() => appState.data.destinationHero);
-const destinationRegions = computed(() => appState.data.destinationRegions);
-
-onShow(() => {
-  void loadAppData();
-});
-</script>
-
-<style scoped>
-.destination-page {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  min-height: 100vh;
-  overflow: hidden;
-}
-
-.destination-page__body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding-bottom: calc(64px + env(safe-area-inset-bottom));
-}
-
-@media (min-width: 431px) {
-  .destination-page {
-    height: calc(100vh - 32px);
-    min-height: calc(100vh - 32px);
-  }
-}
-</style>
diff --git a/WonderQ-MiniAPP/src/pages/detail/index.vue b/WonderQ-MiniAPP/src/pages/detail/index.vue
index 5315013..c785fbb 100644
--- a/WonderQ-MiniAPP/src/pages/detail/index.vue
+++ b/WonderQ-MiniAPP/src/pages/detail/index.vue
@@ -9,7 +9,6 @@
             <button class="tap-feedback m-0 h-11 w-11 rounded-full bg-black/30 p-0 text-[28px] leading-none text-white backdrop-blur" @click="goBack()">‹</button>
             <view class="flex gap-2">
               <button class="tap-feedback m-0 h-11 min-w-[48px] rounded-full bg-black/30 px-3 text-[12px] font-semibold text-white backdrop-blur" @click="toggleFavorite">{{ favorite ? "已藏" : "收藏" }}</button>
-              <button class="tap-feedback m-0 h-11 min-w-[48px] rounded-full bg-black/30 px-3 text-[12px] font-semibold text-white backdrop-blur" @click="supportOpen = true">管家</button>
             </view>
           </view>
           <view class="absolute bottom-8 left-0 right-0 px-5">
@@ -70,12 +69,10 @@
         </view>
       </scroll-view>
 
-      <view class="fixed bottom-0 left-1/2 z-40 flex w-full max-w-[430px] -translate-x-1/2 items-center gap-3 border-t border-[#245c45]/10 bg-[#fffaf2]/95 px-4 pb-[calc(12px+env(safe-area-inset-bottom))] pt-3 shadow-[0_-14px_32px_rgba(31,44,37,0.1)] backdrop-blur">
-        <button class="secondary-action tap-feedback m-0 flex-1 text-[14px] font-semibold" @click="supportOpen = true">服务管家</button>
-        <button class="primary-action tap-feedback m-0 flex-[1.4] text-[15px] font-bold" @click="goBooking(product)">预订咨询</button>
+      <view class="fixed bottom-0 left-1/2 z-40 flex w-full max-w-[430px] -translate-x-1/2 items-center justify-end gap-3 border-t border-[#245c45]/10 bg-[#fffaf2]/95 px-4 pb-[calc(12px+env(safe-area-inset-bottom))] pt-3 shadow-[0_-14px_32px_rgba(31,44,37,0.1)] backdrop-blur">
+        <button class="primary-action tap-feedback m-0 w-full text-[15px] font-bold" @click="goBooking(product)">预订咨询</button>
       </view>
     </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
   </AppShell>
 </template>
 
@@ -85,7 +82,6 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
 import AppShell from "@/components/AppShell.vue";
 import ProductList from "@/components/ProductList.vue";
 import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
 import { formatWan, getDetailMeta, getProductDetailSections, productKey, stripTitle } from "@/lib/data";
 import { goBack, goBooking, goDetail } from "@/lib/navigation";
 import { appState, findProduct, isProductFavorite, loadAppData, rememberProduct, toggleFavoriteProduct } from "@/lib/store";
@@ -93,7 +89,6 @@ import type { Product } from "@/lib/types";
 
 const product = ref<Product>(findProduct());
 const activeTab = ref("overview");
-const supportOpen = ref(false);
 
 onLoad((query) => {
   product.value = findProduct(typeof query?.product === "string" ? decodeURIComponent(query.product) : undefined);
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceCard.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceCard.vue
new file mode 100644
index 0000000..a24fd40
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceCard.vue
@@ -0,0 +1,35 @@
+<template>
+  <view
+    class="w-full bg-[#fffdf9] pt-[18px] tap-feedback min-[431px]:pt-[22px]"
+    :aria-label="`${item.title}，${item.category}`"
+    @click="$emit('select', item)"
+  >
+    <view class="flex items-start justify-between gap-4 pr-[18px] min-[431px]:pr-[22px]">
+      <view class="min-w-0 flex-1">
+        <view class="flex min-h-5 items-center gap-[10px]">
+          <text class="inline-flex min-h-5 items-center rounded-[2px] border border-[#eadfce] bg-[#f8f1e8] px-[6px] text-[10px] leading-[18px] tracking-[0.06em] text-[#98744b]">{{ item.badge }}</text>
+          <text class="text-[13px] font-semibold leading-5 text-[#283b4d]">{{ item.category }}</text>
+        </view>
+        <text class="mt-[10px] block whitespace-pre-line font-serif text-[25px] font-medium leading-8 tracking-[0.04em] text-[#18212a]">{{ item.title }}</text>
+        <text class="mt-0.5 block font-sans text-[11px] font-medium leading-[18px] tracking-[0.22em] text-[#a7a0a0]">{{ item.englishTitle }}</text>
+      </view>
+      <view class="mt-8 flex h-10 w-6 shrink-0 items-center justify-center" aria-hidden="true">
+        <uni-icons type="right" :size="24" color="#c8c8c8" />
+      </view>
+    </view>
+
+    <image class="mt-[17px] block h-[174px] w-full bg-[#eae7e1] min-[431px]:h-[190px]" :src="item.image" mode="aspectFill" />
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { HomeExperience } from "./homeExperienceData";
+
+defineProps<{
+  item: HomeExperience;
+}>();
+
+defineEmits<{
+  select: [item: HomeExperience];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceList.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceList.vue
new file mode 100644
index 0000000..13038bd
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeExperienceList.vue
@@ -0,0 +1,23 @@
+<template>
+  <view class="bg-[#fffdf9] px-[8.5%] pb-[26px]">
+    <HomeExperienceCard
+      v-for="item in items"
+      :key="item.id"
+      :item="item"
+      @select="$emit('select', $event)"
+    />
+  </view>
+</template>
+
+<script setup lang="ts">
+import HomeExperienceCard from "./HomeExperienceCard.vue";
+import type { HomeExperience } from "./homeExperienceData";
+
+defineProps<{
+  items: HomeExperience[];
+}>();
+
+defineEmits<{
+  select: [item: HomeExperience];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeHeroCarousel.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeHeroCarousel.vue
new file mode 100644
index 0000000..52d3e74
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeHeroCarousel.vue
@@ -0,0 +1,49 @@
+<template>
+  <view class="relative w-full overflow-hidden bg-[#1f2924]">
+    <swiper
+      class="h-[620px]"
+      circular
+      autoplay
+      :interval="4600"
+      :current="heroIndex"
+      @change="onSlideChange"
+    >
+      <swiper-item v-for="slide in slides" :key="slide.id || slide.image">
+        <view
+          class="relative m-0 h-full w-full overflow-hidden rounded-none p-0 text-left"
+          @click="$emit('select', slide.title)"
+        >
+          <image class="absolute inset-0 h-full w-full" :src="slide.image" mode="aspectFill" />
+        </view>
+      </swiper-item>
+    </swiper>
+
+    <view class="absolute bottom-8 left-0 right-0 flex justify-center gap-2">
+      <text
+        v-for="(_, index) in slides"
+        :key="index"
+        class="h-1.5 rounded-full transition-all"
+        :class="heroIndex === index ? 'w-6 bg-white' : 'w-1.5 bg-white/50'"
+      />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import type { HeroSlide } from "@/lib/types";
+
+defineProps<{
+  slides: HeroSlide[];
+}>();
+
+defineEmits<{
+  select: [title: string];
+}>();
+
+const heroIndex = ref(0);
+
+function onSlideChange(event: { detail: { current: number } }) {
+  heroIndex.value = Number(event.detail.current);
+}
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeTeamBuilding.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeTeamBuilding.vue
new file mode 100644
index 0000000..c5cc3dc
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeTeamBuilding.vue
@@ -0,0 +1,43 @@
+<template>
+  <view class="bg-[#fffdf9] pb-7 pt-8">
+    <view class="mx-[8.5%] mb-[18px] flex items-baseline justify-between gap-[18px]">
+      <view class="flex min-w-0 items-baseline gap-[10px]">
+        <text class="font-serif text-[20px] font-semibold leading-7 tracking-[0.04em] text-[#18212a]">团队共创</text>
+        <text class="text-[14px] leading-[22px] text-[#8b8781]">团建旅行</text>
+      </view>
+      <text class="flex-none font-sans text-[9px] leading-[18px] tracking-[0.2em] text-[#a3988e]">TEAM BUILDING</text>
+    </view>
+
+    <view class="mx-[8.5%] grid gap-3">
+      <view
+        v-for="item in items"
+        :key="item.id"
+        class="flex min-h-[112px] overflow-hidden rounded-[4px] border border-[#e8e1d7] bg-white tap-feedback active:border-[#d3b890] active:bg-[#fffaf2]"
+        :aria-label="`${item.title}，${item.description}`"
+        @click="$emit('select', item)"
+      >
+        <image class="block h-[112px] w-[128px] shrink-0 bg-[#e8e5df] min-[431px]:w-[142px]" :src="item.image" mode="aspectFill" />
+        <view class="min-w-0 flex-1 p-[12px_12px_11px]">
+          <view class="flex items-center justify-between gap-2">
+            <text class="text-[10px] leading-[18px] tracking-[0.04em] text-[#9a744b]">{{ item.tag }}</text>
+            <uni-icons type="right" :size="16" color="#b5aaa0" />
+          </view>
+          <text class="mt-[5px] text-clamp-2 font-serif text-[15px] font-semibold leading-[21px] text-[#1c252d]">{{ item.title }}</text>
+          <text class="mt-1 text-clamp-2 text-[11px] leading-[17px] text-[#7a7d78]">{{ item.description }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { HomeTeamBuilding } from "./homeTeamBuildingData";
+
+defineProps<{
+  items: HomeTeamBuilding[];
+}>();
+
+defineEmits<{
+  select: [item: HomeTeamBuilding];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeVehicleGrid.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeVehicleGrid.vue
new file mode 100644
index 0000000..6dc1b9a
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeVehicleGrid.vue
@@ -0,0 +1,39 @@
+<template>
+  <view class="bg-[#fffdf9] pb-[30px] pt-7">
+    <view class="mb-[14px] px-[8.5%]">
+      <text class="block font-serif text-[21px] font-semibold leading-7 tracking-[0.04em] text-[#18212a]">万趣用车</text>
+      <text class="mt-1 block text-[12px] leading-[18px] text-[#7a7d78]">2-8人小团，按人数和行李匹配车型</text>
+    </view>
+
+    <view class="mx-[8.5%] grid grid-cols-2 gap-3">
+      <view
+        v-for="vehicle in vehicleOptions"
+        :key="vehicle.title"
+        class="min-w-0 overflow-hidden rounded-[4px] border border-[#e8e1d7] bg-white tap-feedback active:border-[#d3b890] active:bg-[#fffaf2]"
+        :aria-label="`${vehicle.title}，${vehicle.description}`"
+        @click="$emit('select', vehicle)"
+      >
+        <image class="block h-[112px] w-full bg-[#ebe8e2] min-[431px]:h-[126px]" :src="vehicle.image" mode="aspectFill" />
+        <view class="p-[11px_10px_13px]">
+          <view class="flex min-h-[22px] items-center justify-between gap-1.5">
+            <text class="min-w-0 flex-1 font-serif text-[15px] font-semibold leading-[22px] text-[#1c252d]">{{ vehicle.title }}</text>
+            <uni-icons type="right" :size="16" color="#b5aaa0" />
+          </view>
+          <text class="mt-1.5 text-clamp-2 text-[11px] leading-[17px] text-[#7a7d78]">{{ vehicle.description }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { VehicleOption } from "@/lib/types";
+
+defineProps<{
+  vehicleOptions: VehicleOption[];
+}>();
+
+defineEmits<{
+  select: [item: VehicleOption];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/HomeWildArchives.vue b/WonderQ-MiniAPP/src/pages/home/components/HomeWildArchives.vue
new file mode 100644
index 0000000..567cb39
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/HomeWildArchives.vue
@@ -0,0 +1,48 @@
+<template>
+  <view class="bg-[#fffdf9] pb-7 pt-8">
+    <view class="mx-[8.5%] mb-5 flex items-baseline justify-between gap-[18px]">
+      <view class="flex min-w-0 items-baseline gap-[10px]">
+        <text class="font-serif text-[20px] font-semibold leading-7 tracking-[0.04em] text-[#18212a]">极境视界</text>
+        <text class="text-[14px] leading-[22px] text-[#8b8781]">客片案例</text>
+      </view>
+      <text class="flex-none font-sans text-[9px] leading-[18px] tracking-[0.24em] text-[#a3988e]">WILD ARCHIVES</text>
+    </view>
+
+    <view class="mx-[8.5%] grid grid-cols-2 gap-3">
+      <view
+        v-for="item in items"
+        :key="item.id"
+        class="relative h-[220px] overflow-hidden rounded-[4px] bg-[#e8e5df] tap-feedback min-[431px]:h-[234px]"
+        :aria-label="item.title"
+        @click="$emit('select', item)"
+      >
+        <image class="absolute inset-0 block h-full w-full" :src="item.image" mode="aspectFill" />
+        <view class="absolute inset-0 h-full w-full bg-[linear-gradient(180deg,transparent_55%,rgba(10,16,14,0.62)_100%)]" />
+        <text class="absolute bottom-3 left-3 right-3 truncate text-[13px] font-semibold leading-[18px] text-white">{{ item.title }}</text>
+      </view>
+    </view>
+
+    <view
+      class="mx-[8.5%] mt-[17px] flex h-11 w-[83%] items-center justify-center gap-1 rounded-[4px] border border-[#eeeae4] bg-white p-0 text-[13px] leading-[42px] text-[#7f7770] tap-feedback active:bg-[#fbf5ec] active:text-[#6e6258]"
+      hover-class="bg-[#fbf5ec] text-[#6e6258]"
+      aria-label="查看更多"
+      @click="$emit('more')"
+    >
+      <text>查看更多</text>
+      <uni-icons type="right" :size="16" color="#9a9189" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { HomeWildArchive } from "./homeWildArchivesData";
+
+defineProps<{
+  items: HomeWildArchive[];
+}>();
+
+defineEmits<{
+  select: [item: HomeWildArchive];
+  more: [];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/home/components/homeExperienceData.ts b/WonderQ-MiniAPP/src/pages/home/components/homeExperienceData.ts
new file mode 100644
index 0000000..f592424
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/homeExperienceData.ts
@@ -0,0 +1,30 @@
+export type HomeExperience = {
+  id: string;
+  badge: string;
+  category: string;
+  title: string;
+  englishTitle: string;
+  image: string;
+  searchKeyword: string;
+};
+
+export const homeExperienceMocks: HomeExperience[] = [
+  {
+    id: "waterfall-descent",
+    badge: "玩过推荐",
+    category: "瀑降体验",
+    title: "悬崖瀑降",
+    englishTitle: "WATERFALL DESCENT",
+    image: "/assets/guizhou/tiankeng-pool.jpg",
+    searchKeyword: "悬崖瀑降",
+  },
+  {
+    id: "cave-exploration",
+    badge: "玩过推荐",
+    category: "地心探险",
+    title: "森林&探洞",
+    englishTitle: "CAVE EXPLORATION",
+    image: "/assets/guizhou/zhijin-cave-pool.jpg",
+    searchKeyword: "地心探险",
+  },
+];
diff --git a/WonderQ-MiniAPP/src/pages/home/components/homeTeamBuildingData.ts b/WonderQ-MiniAPP/src/pages/home/components/homeTeamBuildingData.ts
new file mode 100644
index 0000000..cd730e0
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/homeTeamBuildingData.ts
@@ -0,0 +1,35 @@
+export type HomeTeamBuilding = {
+  id: string;
+  tag: string;
+  title: string;
+  description: string;
+  image: string;
+  searchKeyword: string;
+};
+
+export const homeTeamBuildingMocks: HomeTeamBuilding[] = [
+  {
+    id: "wild-challenge",
+    tag: "户外挑战",
+    title: "山野挑战，共同完成一次极境任务",
+    description: "洞穴、瀑降与协作任务组合，适合 10-30 人团队。",
+    image: "/assets/guizhou/tiankeng-sunbeam-group.jpg",
+    searchKeyword: "户外团建",
+  },
+  {
+    id: "canyon-teamwork",
+    tag: "团队协作",
+    title: "峡谷溯溪，把默契带进自然",
+    description: "轻户外水线和分组任务，兼顾参与感与安全保障。",
+    image: "/assets/guizhou/shuichunhe-rafting.jpg",
+    searchKeyword: "峡谷团建",
+  },
+  {
+    id: "village-gathering",
+    tag: "人文聚会",
+    title: "苗寨共聚，换一种方式认识彼此",
+    description: "夜游、长桌宴与在地文化体验，适合企业团建收尾。",
+    image: "/assets/guizhou/xijiang-miao-village.jpg",
+    searchKeyword: "贵州团建",
+  },
+];
diff --git a/WonderQ-MiniAPP/src/pages/home/components/homeWildArchivesData.ts b/WonderQ-MiniAPP/src/pages/home/components/homeWildArchivesData.ts
new file mode 100644
index 0000000..058785a
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/home/components/homeWildArchivesData.ts
@@ -0,0 +1,33 @@
+export type HomeWildArchive = {
+  id: string;
+  title: string;
+  image: string;
+  searchKeyword: string;
+};
+
+export const homeWildArchiveMocks: HomeWildArchive[] = [
+  {
+    id: "hundred-meter-descent",
+    title: "百米自降",
+    image: "/assets/guizhou/tiankeng-pool.jpg",
+    searchKeyword: "悬崖瀑降",
+  },
+  {
+    id: "shilong-cave",
+    title: "石龙洞",
+    image: "/assets/guizhou/zhijin-cave-pool.jpg",
+    searchKeyword: "地心探险",
+  },
+  {
+    id: "cliff-current",
+    title: "绝壁迎流",
+    image: "/assets/guizhou/gorge-paddle.jpg",
+    searchKeyword: "峡谷探险",
+  },
+  {
+    id: "canyon-streaming",
+    title: "峡谷溯溪",
+    image: "/assets/guizhou/shuichunhe-rafting.jpg",
+    searchKeyword: "峡谷溯溪",
+  },
+];
diff --git a/WonderQ-MiniAPP/src/pages/home/index.vue b/WonderQ-MiniAPP/src/pages/home/index.vue
index 431c3b8..a035923 100644
--- a/WonderQ-MiniAPP/src/pages/home/index.vue
+++ b/WonderQ-MiniAPP/src/pages/home/index.vue
@@ -1,93 +1,56 @@
 <template>
   <AppShell>
-    <scroll-view id="home-scroll" scroll-y class="h-screen safe-bottom no-scrollbar" @scroll="onScroll">
-      <view class="relative">
-        <swiper class="h-[620px]" circular autoplay :interval="4600" :current="heroIndex"
-          @change="heroIndex = Number($event.detail.current)">
-          <swiper-item v-for="slide in appState.data.heroSlides" :key="slide.id || slide.image">
-            <view class="relative m-0 h-full w-full overflow-hidden rounded-none p-0 text-left"
-              @click="openHero(slide.title)">
-              <image class="absolute inset-0 h-full w-full" :src="slide.image" mode="aspectFill" />
-            </view>
-          </swiper-item>
-        </swiper>
-        <view class="absolute bottom-8 left-0 right-0 flex justify-center gap-2">
-          <text v-for="(_, index) in appState.data.heroSlides" :key="index" class="h-1.5 rounded-full transition-all"
-            :class="heroIndex === index ? 'w-6 bg-white' : 'w-1.5 bg-white/50'" />
-        </view>
-      </view>
-
-      <view class="py-6">
-        <SectionHeading title="万趣用车" subtitle="2-8人小团，按人数和行李匹配车型" />
-        <view class="grid grid-cols-2 gap-3 px-4">
-          <view v-for="vehicle in vehicleOptions" :key="vehicle.title"
-            class="tap-feedback m-0 overflow-hidden rounded-[22px] p-0 text-left soft-card" @click="goDemand('贵州')">
-            <image class="block h-[118px] w-full" :src="vehicle.image" mode="aspectFill" />
-            <view class="p-3">
-              <text class="home-card-title-clamp text-[15px] font-bold text-[#1f2c25]">{{
-                vehicle.title
-              }}</text>
-              <text class="mt-1 text-clamp-2 text-[11px] leading-4 text-[#718073]">{{ vehicle.description }}</text>
-            </view>
-          </view>
-        </view>
-      </view>
+    <scroll-view id="home-scroll" scroll-y class="h-screen safe-bottom no-scrollbar">
+      <HomeHeroCarousel :slides="appState.data.heroSlides" @select="openHero" />
+      <HomeExperienceList :items="homeExperienceMocks" @select="openExperience" />
+      <HomeVehicleGrid :vehicle-options="vehicleOptions" @select="goDemand('贵州')" />
+      <HomeTeamBuilding :items="homeTeamBuildingMocks" @select="openTeamBuilding" />
+      <HomeWildArchives :items="homeWildArchiveMocks" @select="openWildArchive" @more="openWildArchives" />
     </scroll-view>
 
-    <view id="home-topbar"
-      class="top-safe fixed left-1/2 top-0 z-30 w-full max-w-[430px] -translate-x-1/2 border-b px-4 pb-2 pt-2"
-      :class="scrolled
-        ? 'border-[#1f6b57]/15 bg-white/95 text-[#1f2924]'
-        : 'border-white/20 bg-[#2f2618]/20 text-white'
-        ">
-      <view class="flex h-11 items-center justify-between gap-2">
-        <text class="min-w-0 flex-1 truncate text-[16px] font-bold leading-[44px]">{{
-          BRAND_FULL_NAME
-        }}</text>
-        <view class="-space-x-3 flex items-center">
-          <view aria-label="搜索" class="tap-feedback m-0 flex h-11 w-11 items-center justify-center rounded-[10px] p-0" :class="scrolled ? 'text-[#1f6b57]' : 'text-white/95'
-            " @click="goSearch('贵州')">
-            <uni-icons type="search" :size="22" :color="scrolled ? '#1f6b57' : '#ffffff'" />
-          </view>
-          <view aria-label="客服" class="tap-feedback m-0 flex h-11 w-11 items-center justify-center rounded-[10px] p-0" :class="scrolled ? 'text-[#1f6b57]' : 'text-white/95'
-            " @click="supportOpen = true">
-            <uni-icons type="headphones" :size="22" :color="scrolled ? '#1f6b57' : '#ffffff'" />
-          </view>
-        </view>
-      </view>
-    </view>
-
     <BottomNav active="home" />
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
   </AppShell>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from "vue";
+import { computed } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import AppShell from "@/components/AppShell.vue";
 import BottomNav from "@/components/BottomNav.vue";
-import SectionHeading from "@/components/SectionHeading.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
+import HomeHeroCarousel from "./components/HomeHeroCarousel.vue";
+import HomeExperienceList from "./components/HomeExperienceList.vue";
+import HomeTeamBuilding from "./components/HomeTeamBuilding.vue";
+import HomeWildArchives from "./components/HomeWildArchives.vue";
+import HomeVehicleGrid from "./components/HomeVehicleGrid.vue";
+import { homeExperienceMocks, type HomeExperience } from "./components/homeExperienceData";
+import { homeTeamBuildingMocks, type HomeTeamBuilding as HomeTeamBuildingItem } from "./components/homeTeamBuildingData";
+import { homeWildArchiveMocks, type HomeWildArchive } from "./components/homeWildArchivesData";
 import { goDemand, goSearch } from "@/lib/navigation";
 import { appState, loadAppData } from "@/lib/store";
-import { BRAND_FULL_NAME } from "@/lib/types";
 
-const heroIndex = ref(0);
-const scrolled = ref(false);
-const supportOpen = ref(false);
 const vehicleOptions = computed(() => appState.data.vehicleOptions);
 
 onShow(() => {
   void loadAppData();
 });
 
-function onScroll(event: { detail: { scrollTop: number } }) {
-  const scrollTop = event.detail.scrollTop;
-  scrolled.value = scrollTop > 24;
-}
-
 function openHero(title: string) {
   goSearch(title);
 }
+
+function openExperience(item: HomeExperience) {
+  goSearch(item.searchKeyword);
+}
+
+function openWildArchive(item: HomeWildArchive) {
+  goSearch(item.searchKeyword);
+}
+
+function openWildArchives() {
+  goSearch("极境视界");
+}
+
+function openTeamBuilding(item: HomeTeamBuildingItem) {
+  goSearch(item.searchKeyword);
+}
 </script>
diff --git a/WonderQ-MiniAPP/src/pages/login/index.vue b/WonderQ-MiniAPP/src/pages/login/index.vue
index 0a63620..3039c91 100644
--- a/WonderQ-MiniAPP/src/pages/login/index.vue
+++ b/WonderQ-MiniAPP/src/pages/login/index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppShell>
     <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader title="手机号登录" subtitle="用于查看我的需求" @back="goRoot('/pages/home/index')" @support="supportOpen = true" />
+      <TopHeader title="手机号登录" subtitle="用于查看我的需求" @back="goRoot('/pages/home/index')" />
 
       <view class="px-4 pt-5">
         <view class="brand-panel rounded-[28px] p-6 text-white">
@@ -40,7 +40,6 @@
         </view>
       </view>
     </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
   </AppShell>
 </template>
 
@@ -48,7 +47,6 @@
 import { ref } from "vue";
 import { onLoad } from "@dcloudio/uni-app";
 import AppShell from "@/components/AppShell.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
 import TopHeader from "@/components/TopHeader.vue";
 import { loginWithPhoneCode } from "@/lib/auth";
 import { goRoot } from "@/lib/navigation";
@@ -64,7 +62,6 @@ type PhoneNumberEvent = {
 const redirect = ref("/pages/mine/index");
 const loading = ref(false);
 const message = ref("");
-const supportOpen = ref(false);
 
 function safeRedirect(value: unknown) {
   if (typeof value !== "string") return "/pages/mine/index";
diff --git a/WonderQ-MiniAPP/src/pages/mine/index.vue b/WonderQ-MiniAPP/src/pages/mine/index.vue
index c55f013..5969b73 100644
--- a/WonderQ-MiniAPP/src/pages/mine/index.vue
+++ b/WonderQ-MiniAPP/src/pages/mine/index.vue
@@ -1,7 +1,7 @@
 <template>
   <AppShell>
     <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader title="我的" subtitle="需求、收藏和最近浏览" search @back="goRoot('/pages/home/index')" @search="goSearch('贵州')" @support="supportOpen = true" />
+      <TopHeader title="我的" subtitle="需求、收藏和最近浏览" search @back="goRoot('/pages/home/index')" @search="goSearch('贵州')" />
       <view class="px-4 pt-4">
         <view class="brand-panel rounded-[26px] p-5 text-white">
           <view class="relative z-10 flex items-center justify-between">
@@ -42,7 +42,6 @@
                 <text class="mt-2 block text-[11px] text-[#718073]">{{ appState.latestBooking.product.tags.slice(0, 3).join(" / ") }}</text>
               </view>
             </button>
-            <button class="primary-action tap-feedback m-0 mt-3 w-full text-[13px] font-semibold" @click="supportOpen = true">{{ appState.latestBooking.action }}</button>
           </view>
           <EmptyState v-else title="暂无提交记录" action="去提交需求" @action="go('/pages/demand/index')" />
         </view>
@@ -73,7 +72,6 @@
       </view>
     </view>
     <BottomNav active="mine" />
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
   </AppShell>
 </template>
 
@@ -84,7 +82,6 @@ import AppShell from "@/components/AppShell.vue";
 import BottomNav from "@/components/BottomNav.vue";
 import EmptyState from "@/components/EmptyState.vue";
 import MineProductRow from "@/components/MineProductRow.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
 import TopHeader from "@/components/TopHeader.vue";
 import { getAuthSession, redirectToLogin } from "@/lib/auth";
 import { productKey, stripTitle } from "@/lib/data";
@@ -95,7 +92,6 @@ import type { Product } from "@/lib/types";
 type MineTab = "requests" | "favorites" | "history";
 
 const tab = ref<MineTab>("requests");
-const supportOpen = ref(false);
 const customerLine = ref("已登录，可查看当前设备的需求、收藏和浏览记录。");
 const tabs = computed(() => [
   { id: "requests" as MineTab, label: "需求", count: appState.latestBooking ? 1 : 0 },
diff --git a/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue b/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
new file mode 100644
index 0000000..fcf5b2d
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/play/components/PlayCategorySidebar.vue
@@ -0,0 +1,26 @@
+<template>
+  <scroll-view scroll-y class="no-scrollbar h-full min-h-0 w-[104px] shrink-0 border-r border-[#f0f0f0] bg-white">
+    <view class="pb-[96px] pt-[12px]">
+      <button v-for="category in categories" :key="category.id"
+        class="tap-feedback m-0 flex h-[62px] w-full items-center justify-center rounded-none border-0 bg-white px-2 text-center text-[13px] leading-5 text-[#171717] after:border-0"
+        :class="activeId === category.id ? 'border-l-2 border-[#f26424] bg-[#f5f5f5] font-semibold' : 'border-l-2 border-transparent font-medium'"
+        :aria-current="activeId === category.id ? 'page' : undefined" :aria-label="category.label"
+        @click="$emit('select', category.id)">
+        <text>{{ category.label }}</text>
+      </button>
+    </view>
+  </scroll-view>
+</template>
+
+<script setup lang="ts">
+import type { PlayCategory } from "./playData";
+
+defineProps<{
+  categories: PlayCategory[];
+  activeId: string;
+}>();
+
+defineEmits<{
+  select: [id: string];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/play/components/PlayRouteCard.vue b/WonderQ-MiniAPP/src/pages/play/components/PlayRouteCard.vue
new file mode 100644
index 0000000..d4bf5e6
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/play/components/PlayRouteCard.vue
@@ -0,0 +1,26 @@
+<template>
+  <view class="tap-feedback m-0 block w-full border-0 bg-transparent p-0 text-center after:border-0"
+    :aria-label="`${route.title}，${route.routeCount}条路线`" @click="$emit('select', route)">
+    <view class="relative h-[140px] w-full overflow-hidden rounded-[8px] bg-[#eeeeeb]">
+      <image class="block h-full w-full" :src="route.image" mode="aspectFill" />
+      <view class="absolute bottom-2 right-2 rounded-[2px] bg-white px-2 py-1">
+        <text class="block text-[10px] leading-3 text-[#151515]">{{ route.routeCount }} 条路线</text>
+      </view>
+    </view>
+    <view class="mx-auto mt-[13px] h-px w-12 bg-[#d9d9d9]" aria-hidden="true" />
+    <text class="mt-[10px] block text-[16px] font-semibold leading-5 text-[#151515]">{{ route.title }}</text>
+    <text class="mt-1 block text-[11px] leading-4 text-[#aaa3a0]">{{ route.subtitle }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { PlayRoute } from "./playData";
+
+defineProps<{
+  route: PlayRoute;
+}>();
+
+defineEmits<{
+  select: [route: PlayRoute];
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/play/components/PlayTopBar.vue b/WonderQ-MiniAPP/src/pages/play/components/PlayTopBar.vue
new file mode 100644
index 0000000..cc2a048
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/play/components/PlayTopBar.vue
@@ -0,0 +1,14 @@
+<template>
+  <view class="flex shrink-0 border-b border-[#eeeeee] bg-white pt-[env(safe-area-inset-top)]">
+    <view class="w-[104px] shrink-0" aria-hidden="true" />
+    <view class="flex h-12 min-w-0 flex-1 items-center pl-[20px] pr-[88px]">
+      <text class="truncate text-[17px] font-semibold leading-6 text-[#151515]">{{ title }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title: string;
+}>();
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/play/components/playData.ts b/WonderQ-MiniAPP/src/pages/play/components/playData.ts
new file mode 100644
index 0000000..9d2fd8f
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/play/components/playData.ts
@@ -0,0 +1,87 @@
+export type PlayRoute = {
+  id: string;
+  title: string;
+  subtitle: string;
+  image: string;
+  routeCount: number;
+  searchKeyword: string;
+};
+
+export type PlayCategory = {
+  id: string;
+  label: string;
+  routes: PlayRoute[];
+};
+
+const route = (
+  id: string,
+  title: string,
+  subtitle: string,
+  image: string,
+  routeCount: number,
+  searchKeyword = title,
+): PlayRoute => ({
+  id,
+  title,
+  subtitle,
+  image: `/public/assets/guizhou/${image}.jpg`,
+  routeCount,
+  searchKeyword,
+});
+
+export const playCategories: PlayCategory[] = [
+  {
+    id: "family-route",
+    label: "亲子路线",
+    routes: [
+      route("family-water", "亲子玩水", "贵州·轻松节奏与自然课堂", "libo-xiaoqikong", 4, "亲子玩水"),
+      route("family-village", "亲子村寨漫游", "贵州·苗寨、古城与在地体验", "xijiang-miao-village", 3, "亲子村寨漫游"),
+      route("family-grassland", "高原亲子假期", "贵州·草甸、花海与轻徒步", "wumeng-grassland", 2, "高原亲子假期"),
+    ],
+  },
+  {
+    id: "photo-route",
+    label: "旅拍路线",
+    routes: [
+      route("miao-photo", "苗寨人文旅拍", "黔东南·村寨与非遗影像", "miao-costume", 3, "苗寨旅拍"),
+      route("peak-photo", "峰林风光旅拍", "黔西南·峰林与峡谷取景", "wanfenglin", 2, "万峰林旅拍"),
+      route("terrace-photo", "梯田日落旅拍", "黔东南·侗寨与山野光影", "jiabang-terrace", 2, "梯田旅拍"),
+    ],
+  },
+  {
+    id: "healing-route",
+    label: "疗愈路线",
+    routes: [
+      route("mountain-healing", "山野慢游", "贵州·森林、溪谷与松弛时光", "mountain-resort", 3, "山野慢游"),
+      route("hot-spring-healing", "温泉与村寨", "黔东南·泡汤、慢行与在地风味", "jianhe-hot-spring", 2, "温泉与村寨"),
+      route("river-healing", "清凉河谷", "荔波·水线轻徒步与自然疗愈", "libo-water-forest", 3, "清凉河谷"),
+    ],
+  },
+  {
+    id: "team-building",
+    label: "团建",
+    routes: [
+      route("team-challenge", "山野挑战", "贵州·峡谷协作与户外任务", "gorge-paddle", 3, "山野挑战"),
+      route("team-stream", "溪谷共创", "贵州·溯溪、协作与团队复盘", "shuichunhe-rafting", 2, "溪谷共创"),
+      route("team-culture", "苗寨共聚", "黔东南·人文体验与团队共创", "miao-dragon-boat", 2, "苗寨共聚"),
+    ],
+  },
+  {
+    id: "guizhou-panorama",
+    label: "贵州全景",
+    routes: [
+      route("classic-panorama", "经典贵州全景", "贵州·瀑布、苗寨、古城与梵净山", "huangguoshu-waterfall", 8, "经典人文打卡线路"),
+      route("mountain-panorama", "山水人文全景", "贵州·小七孔、侗寨与山地风光", "xijiang-miao-village", 6, "贵州全景"),
+      route("wild-panorama", "山野户外全景", "贵州·溶洞、峰林与野咖路线", "wanfenglin", 7, "山野户外全景"),
+    ],
+  },
+  {
+    id: "private-custom",
+    label: "私人定制",
+    routes: [
+      route("private-family", "家庭专属定制", "贵州·按同行人和节奏安排", "zhenyuan-ancient-town", 1, "家庭专属定制"),
+      route("private-business", "企业专属定制", "贵州·团建、会议与奖励旅行", "wanfenglin", 1, "企业专属定制"),
+      route("private-wild", "山野深度定制", "贵州·溶洞、瀑降与小众目的地", "zhijin-cave", 1, "山野深度定制"),
+    ],
+  },
+];
diff --git a/WonderQ-MiniAPP/src/pages/play/index.vue b/WonderQ-MiniAPP/src/pages/play/index.vue
new file mode 100644
index 0000000..04c533e
--- /dev/null
+++ b/WonderQ-MiniAPP/src/pages/play/index.vue
@@ -0,0 +1,44 @@
+<template>
+  <AppShell>
+    <view class="flex h-screen max-h-screen flex-col overflow-hidden bg-white">
+      <PlayTopBar :title="activeCategory.label" />
+      <view class="flex min-h-0 flex-1">
+        <PlayCategorySidebar :categories="playCategories" :active-id="activeCategoryId" @select="selectCategory" />
+
+        <scroll-view scroll-y class="no-scrollbar h-full min-h-0 min-w-0 flex-1 bg-white pl-[20px] pr-0 pt-[16px]">
+          <view class="min-h-full bg-white pb-[calc(96px+env(safe-area-inset-bottom))]">
+            <view class="pb-10">
+              <view v-for="route in activeCategory.routes" :key="route.id" class="pb-[40px] last:pb-0">
+                <PlayRouteCard :route="route" @select="selectRoute" />
+              </view>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+    <BottomNav active="play" />
+  </AppShell>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import AppShell from "@/components/AppShell.vue";
+import BottomNav from "@/components/BottomNav.vue";
+import { goSearch } from "@/lib/navigation";
+import PlayCategorySidebar from "./components/PlayCategorySidebar.vue";
+import PlayRouteCard from "./components/PlayRouteCard.vue";
+import PlayTopBar from "./components/PlayTopBar.vue";
+import { playCategories, type PlayCategory, type PlayRoute } from "./components/playData";
+
+const defaultCategory = playCategories[0]!;
+const activeCategoryId = ref(defaultCategory.id);
+const activeCategory = computed<PlayCategory>(() => playCategories.find((category) => category.id === activeCategoryId.value) ?? defaultCategory);
+
+function selectCategory(id: string) {
+  activeCategoryId.value = id;
+}
+
+function selectRoute(route: PlayRoute) {
+  goSearch(route.searchKeyword);
+}
+</script>
diff --git a/WonderQ-MiniAPP/src/pages/search/index.vue b/WonderQ-MiniAPP/src/pages/search/index.vue
deleted file mode 100644
index fba9e19..0000000
--- a/WonderQ-MiniAPP/src/pages/search/index.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <AppShell>
-    <view class="safe-bottom min-h-screen bg-transparent">
-      <TopHeader :title="`${keyword} 相关线路`" subtitle="筛选结果和推荐方案" @back="goBack()" @support="supportOpen = true" />
-
-      <SearchFilterBar v-model="filterState" :products="baseResults" />
-
-      <view class="py-4">
-        <view v-if="results.length" class="flex flex-col gap-[12px] px-4">
-          <view v-for="product in results" :key="product.apiId || product.id"
-            class="tap-feedback m-0 flex w-full gap-3 rounded-[22px] p-3 text-left soft-card"
-            @click="goDetail(product)">
-            <image class="h-[116px] w-[128px] shrink-0 rounded-[18px]" :src="product.image" mode="aspectFill" />
-            <view class="min-w-0 flex-1">
-              <text class="text-clamp-2 text-[15px] font-bold leading-5 text-[#1f2c25]">{{ product.title }}</text>
-              <text class="mt-2 text-clamp-2 text-[11px] leading-4 text-[#718073]">{{ product.tags.join(" / ") ||
-                product.summary }}</text>
-              <view class="mt-2 flex items-end justify-between">
-                <text class="text-[11px] text-[#718073]">{{ product.destinationName || "贵州" }}</text>
-                <text class="text-[18px] font-bold text-[#c36f21]">¥{{ formatWan(product.price) }}万起</text>
-              </view>
-            </view>
-          </view>
-        </view>
-        <view v-else class="elevated-card mx-4 rounded-[24px] p-8 text-center">
-          <text class="block text-[16px] font-bold text-[#1f2c25]">暂无匹配线路</text>
-          <text class="mt-2 block text-[12px] text-[#718073]">可以提交需求，让管家按你的想法重新匹配。</text>
-          <button class="primary-action tap-feedback m-0 mt-4 px-5 text-[13px] font-semibold"
-            @click="goDemand(keyword)">提交需求</button>
-        </view>
-      </view>
-      <InlineLeadForm source-page="search_inline" :destination="keyword" />
-    </view>
-    <SupportSheet :open="supportOpen" @close="supportOpen = false" />
-  </AppShell>
-</template>
-
-<script setup lang="ts">
-import { computed, ref } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import AppShell from "@/components/AppShell.vue";
-import InlineLeadForm from "@/components/InlineLeadForm.vue";
-import SearchFilterBar from "@/components/SearchFilterBar.vue";
-import SupportSheet from "@/components/SupportSheet.vue";
-import TopHeader from "@/components/TopHeader.vue";
-import { formatWan, getSearchProducts } from "@/lib/data";
-import { goBack, goDemand, goDetail } from "@/lib/navigation";
-import {
-  defaultSearchFilterState,
-  filterAndSortSearchProducts,
-  type SearchFilterState,
-} from "@/lib/searchFilters";
-import { appState, loadAppData } from "@/lib/store";
-
-const keyword = ref("贵州");
-const supportOpen = ref(false);
-const filterState = ref<SearchFilterState>({ ...defaultSearchFilterState });
-
-const baseResults = computed(() => getSearchProducts(appState.data.products, keyword.value));
-const results = computed(() => filterAndSortSearchProducts(baseResults.value, filterState.value));
-
-onLoad((query) => {
-  const value = typeof query?.keyword === "string" ? decodeURIComponent(query.keyword) : "贵州";
-  keyword.value = value || "贵州";
-});
-
-onShow(() => {
-  void loadAppData();
-});
-
-</script>
diff --git a/docs/public-api.md b/docs/public-api.md
index a02898e..8bb38a6 100644
--- a/docs/public-api.md
+++ b/docs/public-api.md
@@ -42,7 +42,7 @@
 
 MiniAPP 兼容说明：
 - Public API 使用 `name` 表示目的地名称；MiniAPP 会在 `src/lib/data.ts` 中归一化为页面内部使用的 `label`。
-- 目的地页 `src/pages/destination/index.vue` 直接消费归一化后的 `appState.data.destinations`，不读取 `slug`、`region` 或后台专用计数字段。
+- 玩法页 `src/pages/play/index.vue` 当前使用 `src/pages/play/components/playData.ts` 的本地模拟分类和线路数据，后续接入 Public API 时再按页面契约替换。
 - `isActive=false` 的目的地不得出现在 Public `site-config.destinations`；Admin API 仍需返回未启用项供后台维护。
 
 ### `DestinationHero`