# H5 客户中心设计方案

> **文档状态**：产品设计（先评审，再开发）  
> **编写日期**：2026-07-25  
> **关联页面**：`/assistant`、`/order/priceCheck`、`/order/myOrders`、`/user/profile`  
> **关联能力**：微信注册/绑定（`/wechat/*`）、公开轨迹查询（`/track/query`）、营销体系（`docs/客户裂变与营销体系设计方案.md`）  
> **关联规范**：`docs/前端页面设计规范.md`（桌面中后台）；本文为 **手机 H5 客户视角** 专项，不照搬 PC 表格规范  
> **目标读者**：产品、前端、后端、运营

---

## 1　背景与目标

### 1.1 为什么要做

现有四个客户能力页均按 **PC 中后台** 设计：

| 路由 | 现状形态 | 手机端痛点 |
| --- | --- | --- |
| `/assistant` | AI 顾问对话壳 | 相对适合手机，但缺统一入口与底部导航 |
| `/order/priceCheck` | 多条件表单 + 宽表格报价 | 字段多、表格列多，一屏看不全 |
| `/order/myOrders` | Handsontable + 十余个状态 Tab + 批量操作 | 操作台过重，客户只想「看状态 / 去支付 / 看轨迹」 |
| `/user/profile` | 多卡片网格 | 信息全但优先级不突出 |

客户在微信里打开系统时，屏幕窄、时间碎、注意力短。需要一个 **底部四 Tab 的 H5 客户中心**，把「查价 → 下单/支付 → 盯状态 → 找人问」串成一条手机可完成的闭环。

### 1.2 建设目标

1. **一入口四 Tab**：AI顾问 / 查价格 / 查订单 / 我的  
2. **客户语言优先**：少运营术语，多「多少钱、到哪了、要不要付钱、出没出问题」  
3. **一屏一件事**：每页首屏只解决一个主问题，次要能力折叠或下钻  
4. **复用业务能力**：接口与权限尽量不变；**信息架构与交互必须重做**，禁止简单缩放 PC 页  
5. **可渐进上线**：先打通「查价 + 看单 + 问顾问」，再补充值/营销/完整下单

### 1.3 非目标（首版不做）

- 不做管理端 H5  
- 不在手机上复刻全部仓库批量操作（预报、批量打印、列配置等）  
- 不新建独立小程序（可先微信内 H5；后续再抽组件）  
- 不改变订单状态机与计费公式

---

## 2　客户视角：他们真正关心什么

### 2.1 客户一天里的高频问题

按紧迫度排序：

```text
1. 我这票货大概多少钱？有没有更划算/更稳的渠道？
2. 我的单现在什么状态？卡在哪？要不要付钱？
3. 货到哪了？（轨迹）
4. 出问题了找谁？能不能一句话说清楚？
5. 余额够不够？券能不能用？账号信息在哪改？
```

对应到四 Tab：

| 客户问题 | 落点 Tab | 成功标准（客户感受） |
| --- | --- | --- |
| 多少钱 / 选哪条 | **查价格** | 30 秒内看到「推荐价 + 时效」，可一键去问 AI 或去下单 |
| 到哪了 / 要付钱吗 | **查订单** | 打开即看到「待我处理」与在途单，两步进轨迹 |
| 搞不懂 / 异常 | **AI顾问** | 带着运单上下文开口问，不用自己拼单号 |
| 钱 / 人 / 设置 | **我的** | 余额、充值、资料、客服入口一眼找得到 |

### 2.2 客户心智 vs 系统状态（关键映射）

PC「我的订单」有 10+ 业务状态，手机不能原样铺 Tab。建议映射为 **客户可理解的 5 组**：

| 客户分组（H5） | 包含系统状态（示意） | 客户文案 |
| --- | --- | --- |
| **待我处理** | `pendingPayment`、部分可操作草稿、需补资料的问题件 | 「等你付钱 / 等你确认」 |
| **仓库处理中** | `predeclared`、`received`、`pendingAllocation`、`pendingShip`、`pendingOnline` | 「仓里在弄」 |
| **运输中** | `shipping` | 「在路上」 |
| **已完成** | `deliverySuccess` | 「已签收」 |
| **异常/理赔** | `deliveryFailed`、`problematic`、`claimed` | 「出问题了」 |

> `draft` / `deleted`：默认收入「更多筛选」，不强占首屏 Tab。  
> 分组用于 **导航与角标**；详情页仍展示真实系统状态名，避免和客服对不上号。

### 2.3 核心旅程（手机）

```mermaid
flowchart LR
  A[打开客户中心] --> B{今天想干嘛}
  B -->|算运费| C[查价格]
  C -->|选中渠道| D[去下单 / 问顾问]
  B -->|看货在哪| E[查订单]
  E -->|待支付| F[确认支付]
  E -->|运输中| G[看轨迹]
  E -->|异常| H[问 AI / 联系客服]
  B -->|有疑问| I[AI顾问]
  B -->|充值/资料| J[我的]
```

设计原则：**查价格与查订单是主战场；AI 是随身顾问；我的是账户后勤。**

---

## 3　整体信息架构

### 3.1 壳层结构

```text
┌─────────────────────────────┐
│  顶栏（可选：标题 / 语言）    │
├─────────────────────────────┤
│                             │
│     Tab 内容区（可滚动）      │
│                             │
├─────────────────────────────┤
│ AI顾问 │ 查价格 │ 查订单 │ 我的 │  ← 固定底栏
└─────────────────────────────┘
```

| 项 | 约定 |
| --- | --- |
| 路由壳 | 建议 `/h5` 或 `/m` 布局路由，子路由映射四页；底栏常驻 |
| 与 PC 关系 | 同业务 API；**独立 H5 视图**（`views/h5/customer-center/*`），不直接嵌 PC 大表格页 |
| 默认落地 | 已登录优先 **查订单**（状态刚需）；未登录引导登录/微信授权后再进 |
| 底栏高度 | 约 56px + 安全区；内容区 `padding-bottom` 避让 |
| 角标 | 「查订单」展示「待我处理」数量；其余 Tab 默认可无角标 |
| 语言 | 默认中文，支持中/英切换（复用现有 i18n + `arco-locale`） |

### 3.2 底栏四入口定义

| Tab | 文案 | 对应能力 | 首屏一句话 |
| --- | --- | --- | --- |
| AI顾问 | AI顾问 | `/assistant` 能力 | 「有问题直接问」 |
| 查价格 | 查价格 | `/order/priceCheck` 能力 | 「先算一笔运费」 |
| 查订单 | 查订单 | `/order/myOrders` 能力 | 「看看货到哪了」 |
| 我的 | 我的 | `/user/profile` 能力 | 「余额与账号」 |

**Tab 顺序建议（从左到右）：**  
`AI顾问 · 查价格 · 查订单 · 我的`

说明：中间两个是高频业务；顾问放左侧方便「带着上下文回来问」；「我的」固定最右符合手机习惯。

若运营希望强化转化，可将默认选中设为 **查价格**；日常使用仍建议默认 **查订单**。

### 3.3 页面关系（不是四个孤岛）

```mermaid
flowchart TB
  subgraph tabs [底部四 Tab]
    AI[AI顾问]
    PC[查价格]
    OD[查订单]
    ME[我的]
  end

  PC -->|「问顾问：为什么推荐这条」| AI
  PC -->|「按此渠道去下单」| CREATE[下单页/引导]
  OD -->|「问顾问」带运单上下文| AI
  OD -->|余额不足| ME
  ME -->|去充值| RECHARGE[充值]
  OD -->|公开轨迹兜底| TRACK[/track/query]
```

已有能力可复用：

- `useAskAdvisor` / `openAskAdvisor`：订单行 → AI 带运单上下文  
- `/track/query`：轻量轨迹 H5（未登录也可查，作补充入口）  
- 查价草稿 `oms_price_check_order_draft`：查价结果带到下单

---

## 4　分页面规划

### 4.1 查价格（客户最在意的「钱」）

#### 客户目标

> 「告诉我：到某国、某重量，大概多少钱、多久到、推荐哪条。」

#### 首屏结构（自上而下）

1. **极简条件区（必填只留 2～3 项）**  
   - 目的国家（快捷芯片：美/加/英/德… + 搜索选全部）  
   - 实重（kg）  
   - 尺寸：默认折叠一行「长×宽×高（选填，填了更准）」  
2. **主按钮**：查价格（全宽、主色）  
3. **结果区**（查完后占主视觉）  
   - 顶部排序：推荐 / 低价 / 快时效（三段 Segmented）  
   - **推荐卡**（1 张置顶）：渠道名、应付价、时效、一句话推荐理由  
   - **报价列表**（卡片，非表格）：每张只露  
     - 渠道/产品名  
     - **应付金额**（大字）  
     - 时效  
     - 计费重（小字）  
     - 次要：费用明细抽屉、渠道说明  
4. **更多条件**（折叠）：运输方式、货物类型、仓库、邮编、优惠券  

#### 手机上要砍/藏的 PC 能力

| PC 能力 | H5 策略 |
| --- | --- |
| 宽表格多列 | → 卡片列表 |
| 渠道指导侧栏常驻 | → 点「说明」开半屏抽屉 |
| 复杂分页表格 | → 先展示 Top N（如 20），「加载更多」 |
| 完整费用拆行 | → 默认只显示应付；点开看会员折扣/券 |

#### 主行动作（每张报价卡）

1. **去下单**（主按钮）— 写入 `oms_price_check_order_draft` 并跳转 `/h5/place-order`  
2. **问顾问**（次按钮）— 把国家/重量/渠道/价格塞进 AI 上下文  

#### 空态与提示

- 未查询：插画/短文案「输入国家与重量，马上比价」  
- 估价提示：保留 `queryHint`（缺尺寸等）用顶部黄条，可关闭  
- 无结果：引导改重量/国家，或「问问 AI」

---

### 4.2 查订单（客户最在意的「状态」）

#### 客户目标

> 「哪些单要我处理？货在路上吗？出问题了吗？」

#### 首屏结构

1. **待办摘要条**（有数据才显示）  
   - 例：`待支付 2` · `异常 1`（可点筛选）  
2. **搜索框**  
   - 运单号 / 客户单号 / 跟踪号，单一输入即可  
3. **客户分组 Tab**（横向滑动，最多 5～6 个）  
   - 全部 · 待我处理 · 仓库中 · 运输中 · 已完成 · 异常  
4. **订单卡片列表**（替代 Handsontable）

#### 单张订单卡片信息层级

```text
[状态标签]                    应付 ¥xx / 已付
运单号  XXXXXXX          （可复制）
线路/渠道  ·  目的国
最新轨迹摘要（一行，没有则隐藏）
时间：下单/发货/签收 中最有意义的一个

[支付] [轨迹] [更多]
```

| 元素 | 规则 |
| --- | --- |
| 状态标签 | 用客户文案色；详情内展示系统状态全名 |
| 金额 | `pendingPayment` 突出「待付」；已付显示实付或隐藏干扰 |
| 最新轨迹 | 列表接口若无摘要，可懒加载或不显示，详情再拉全量 |
| 主按钮 | 待支付 → **去支付**；运输中 → **看轨迹**；异常 → **问顾问** |
| 更多 | 详情、复制单号、拦截/取消等（按权限与状态，收入 ActionSheet） |

#### 详情（全屏页或高度 90% 的 Sheet）

建议 Tab：**概要 · 轨迹 · 费用**（不要一次塞 PC 抽屉全部字段）

- **概要**：收件人摘要、重量、渠道、系统状态、仓库  
- **轨迹**：时间轴（复用 `/track/query` 视觉语言）  
- **费用**：应收/优惠/应付/支付状态  

#### 手机上明确不做（或极弱化）

- 列配置、批量勾选导出、批量创建轨迹、批量下游转发  
- 仓库操作台式工具条  
- 超多 HandleStatus 二级 Tab（可放入「更多筛选」）

> 员工/仓库若必须用完整能力，继续走 PC；H5 只服务 **客户自助**。

#### 角标规则

- 底栏「查订单」角标 = `待支付数 + 异常待关注数`（产品可配置是否含问题件）  
- Tab「待我处理」显示数量

---

### 4.3 AI顾问（随身客服）

#### 客户目标

> 「别让我翻帮助文档，直接问。」

#### 首屏结构

- 对话区铺满（扣除顶栏 + 底栏）  
- 顶部可展示 **当前运单上下文条**（从查订单跳入时）：运单号 + 状态 + 「清除」  
- 快捷问题芯片（未带上下文时）：  
  - 怎么查运费？  
  - 待支付订单怎么付？  
  - 轨迹多久更新？  
  - 问题件怎么办？

#### 与其他 Tab 的联动

| 来源 | 带入上下文 |
| --- | --- |
| 查订单 · 问顾问 | orderId / 运单号 / 状态（已有 `openAskAdvisor`） |
| 查价格 · 问顾问 | 国家、重量、尺寸、推荐渠道、报价 |
| 我的 · 联系顾问 | 无单号，纯咨询 |

#### 约束

- 输入框避开底栏与 iOS 键盘（`visualViewport` / 安全区）  
- 首版可复用 `AiAdvisorShell`，套进 H5 布局并做键盘适配即可

---

### 4.4 我的（账户后勤 + 注册/绑定融合）

#### 客户目标

> 「钱还够吗？我是谁？没账号怎么注册？已有账号怎么绑微信？」

#### 两种态

| 态 | 谁看到 | 首屏内容 |
| --- | --- | --- |
| **访客态** | 未登录 | 欢迎文案 + **微信注册** / **绑定已有账号** + 账号密码登录入口 |
| **登录态** | 已登录客户 | 身份条 + 资产 + 服务列表（含退出） |

#### 与现有 `/wechat/register`、`/wechat/bind` 的关系

- **OAuth 回调地址不变**：微信公众号仍回调 `/wechat/register`、`/wechat/bind`（避免改 MP 白名单）。  
- **入口收拢到「我的」**：访客在 `/h5/me` 点按钮进入上述流程；成功后引导回 `/h5/me` 或去登录。  
- **其它 Tab 未登录**：统一跳到 `/h5/me`（而不是 PC 登录大页），降低手机跳出。

```mermaid
flowchart TD
  ME[/h5/me 访客] -->|微信注册| REG[/wechat/register OAuth]
  ME -->|绑定已有账号| BIND[/wechat/bind OAuth]
  ME -->|账号密码登录| LOGIN[/h5/login]
  REG -->|成功| ME2[/h5/me 或 /h5/login]
  BIND -->|成功| ME2
  LOGIN -->|登录成功| H5[/h5/orders]
```

#### 登录态首屏结构（短页 + 列表入口）

1. **身份条**：头像、名称、会员等级徽章、客户编号（可复制）  
2. **资产条（两块并排）**  
   - 账户余额 → 点进充值  
   - 可用优惠券数 / 积分（营销上线后显示；未上线可隐藏）  
3. **服务列表（单元格）**  
   - 充值  
   - 编辑资料 / 修改密码  
   - 语言切换  
   - 联系客服  
   - 退出登录  

#### 原则

- **注册/绑定是「我的」的获客入口**，不再作为孤立营销页理解  
- **余额与待办强相关**：支付失败深链「我的 → 充值」  
- 不做 PC 多卡片仪表盘；手机用 **身份 + 资产 + 列表** 三段式

---

## 5　跨页关键流程（必须打通）

### 5.1 查价 → 决策

```text
填国家+重量 → 出推荐卡 → 
  ├─ 去下单（有 H5 下单则进；否则引导 PC / 客服协助）
  └─ 问顾问（解释价差、时效、货物限制）
```

### 5.2 订单待支付 → 支付

```text
查订单（待我处理）→ 卡片「去支付」→ 支付确认 
  → 成功：回到列表并刷新
  → 余额不足：跳转「我的-充值」，充值后可返回原单
```

### 5.3 运输中 → 轨迹

```text
查订单 → 「看轨迹」→ 详情-轨迹 Tab
（无登录场景可降级 /track/query）
```

### 5.4 异常 → 顾问

```text
异常卡片 → 「问顾问」→ AI 页预填运单与状态
（次要）提供「复制单号给人工客服」
```

---

## 6　视觉与交互（手机客户产品感）

> 对齐 PC 工作台的「问候 + 余额 + 情绪色卡片」，做成 **轻量移动版**；不整页照搬液态玻璃动画。  
> Token：`src/views/h5/customer-center/styles/tokens.less`（仅 `/h5` 壳）。

### 6.1 设计原则（客户视角）

1. **先看见钱与待办，再看见设置**  
2. **一屏一件事**：Hero / 待办 / 快捷宫格分层，不把营销和改密同权  
3. **情绪色可扫读**：催办橙、应付红、品牌青绿、成功绿  
4. **微信友好**：少持续动画；主交互 2～3 个微动效即可  

### 6.2 Design Token

| Token | 用途 |
| --- | --- |
| `--h5-bg` / `--h5-bg-hero` | 雾灰底 + 主色浅渐变顶带 |
| `--h5-surface` | 白卡片 |
| `--h5-radius` 16 / `--h5-radius-sm` 12 | 卡片圆角 |
| `--h5-shadow` | 轻浮起阴影 |
| `--h5-warning` / `--h5-danger` / `--h5-success` | 待办 / 应付 / 完成 |

主色继续 `var(--app-primary-color)`，不另起品牌色。

### 6.3 卡片层级

| 层级 | 形态 | 典型位置 |
| --- | --- | --- |
| Hero | 渐变头图 + 大数字 CTA | 「我的」问候/余额 |
| 情绪卡 | 左边色条或 tone 底 | 待支付订单、待办条、推荐报价 |
| 内容卡 | 白底圆角轻阴影 | 普通订单、表单 |
| 工具列表 | 弱化字色 | 改密、退出 |

### 6.4 「我的」信息架构（P0 已落地）

```text
Hero（问候 + 头像 + 会员标 + 语言）
 → 余额大卡（低余额变橙色）
 → 待办条（有才显示 → 查订单对应 Tab）
 → 快捷宫格：下单 / 券 / 邀请 / 佣金
 → 次要列表：资料 / 改密 / 退出
```

访客：品牌氛围 + 扫码主卡 + 注册/绑定主次按钮。

### 6.5 底栏

- 选中：主色小圆底 + 加粗文案（不仅改文字色）  
- 查订单角标保留；有待办时可轻脉冲（仅角标/待办点）  

### 6.6 交互

- 列表用 **触底加载**；破坏性操作二次确认  
- 复制单号：点击即复制 + Toast  
- 主按钮 `:active` 轻微缩放  
- Hero 进入：短上升淡入（`h5-enter`）  

### 6.7 美化波次

| 波次 | 内容 | 状态 |
| --- | --- | --- |
| **P0** | Token +「我的」Hero/余额/宫格 + 底栏选中态 | ✅ |
| **P1** | 订单卡情绪条 + 查价推荐卡 | ✅ |
| **P2** | 顾问上下文 tip + prefill；券/邀请/佣金视觉；空态 | ✅ |
| **P3** | 骨架屏、微动效、余额不足回流文案统一 | ✅ |

### 6.8 性能与包体

- H5 壳走轻量入口（参考 `/wechat/*`、`/track/query`）  
- 查订单 **禁止** HandsontablePro  
- 查价格结果用普通列表；避免工作台级持续 blob 动画

---

## 7　登录与入口

### 7.1 推荐入口

| 入口 | 说明 |
| --- | --- |
| 微信公众号菜单 / 消息链接 | 直达 `/h5`（或约定域名） |
| 扫码登录后的手机跳转 | 已绑定用户进入客户中心而非 PC 首页 |
| PC 登录页提示 | 「手机访问请用微信打开客户中心」 |

### 7.2 鉴权

- 四 Tab 均需客户登录态（JWT / 现有 RBAC customer）  
- 未登录：统一跳转客户登录；微信内优先走已有绑定/静默策略（与 `docs/微信登录整合方案.md` 衔接）  
- `/track/query` 保持可公开，作为未登录查轨迹补充，**不替代**「查订单」Tab

### 7.3 与 PC 路由的关系

| 方案 | 说明 | 建议 |
| --- | --- | --- |
| A. 独立 `/h5/*` | 手机专用路由 + 底栏布局 | **推荐**，边界清晰 |
| B. 同路由响应式改造 | 同一 `priceCheck/myOrders` 自适应 | 成本高、易拖垮 PC |
| C. User-Agent 自动切换组件 | 同 path 不同 view | 可作优化，首版不必 |

首版建议 **方案 A**：  

- `/h5` → 重定向到 `/h5/orders` 或 `/h5/price`  
- `/h5/assistant` · `/h5/price` · `/h5/orders` · `/h5/me`  
- 底栏 `router-link` 对应上述四路径  
- 业务 API 与 PC 共用

---

## 8　技术落地建议（供评审，非详细设计）

### 8.1 目录草案

```text
src/views/h5/customer-center/
  layout.vue          # 底栏壳
  assistant/index.vue
  price/index.vue
  orders/index.vue
  orders/detail.vue
  me/index.vue
  components/
    OrderCard.vue
    QuoteCard.vue
    StatusTabs.vue
    AppTabBar.vue
```

### 8.2 接口复用

| 页面 | 主要复用 |
| --- | --- |
| 查价格 | `postOrderPriceCheck`、shipping options、优惠券报价字段 |
| 查订单 | `postOrderList`、`getOrderStatusCounts`、`getOrderDetail`、支付确认接口 |
| 轨迹 | 详情内轨迹接口；或公开 `queryPublicTrackTimeline` |
| 我的 | 现有 profile / 余额 / 充值相关 API |
| AI | 现有顾问组件与 `openAskAdvisor` |

后端若能为列表增加「最新轨迹一句摘要」「待我处理聚合计数」，可明显减请求；**非首版阻塞**，前端可先聚合 `pendingPayment + problematic`。

### 8.3 状态分组实现

前端维护 `H5_ORDER_STATUS_GROUPS` 映射表（客户分组 → 系统 status 列表），请求时：

- 选中某一客户分组 → `status in (...)` 或多次 count 聚合  
- 与 PC `ORDER_STATUS_TABS` 并存，互不影响

---

## 9　分期计划

### 一期（可用闭环，建议 1～2 周量级评估）

- [x] H5 布局壳 + 四 Tab 路由（`/h5/*`）  
- [x] 查价格：精简表单 + 报价卡片列表 + 问顾问  
- [x] 查订单：客户分组 Tab + 订单卡 + 详情（概要/轨迹/费用）+ 待支付  
- [x] AI顾问：嵌入壳（复用 AiAdvisorShell）  
- [x] 我的：访客态融合微信注册/绑定；登录态身份、余额、改资料/改密、退出  
- [x] 独立 H5 账号密码登录（`/h5/login`，不跳 PC 登录页）  
- [x] H5 微信扫码登录：`GET /wechat/mp/login-qrcode` + 长按识别 + 轮询登录  
- [x] 独立 H5 充值（`/h5/recharge`，不跳 PC 充值页）  
- [x] 中英文与 nginx `/h5` SPA 回退  
- [ ] 键盘适配与运单上下文在顾问页的完整预填联调  
- [x] 手机完整下单（二期）：`/h5/place-order` 三步精简下单 + 查价「去下单」草稿深链  

### 二期

- [x] H5 精简下单（`/h5/place-order`）+ 查价结果写入 `oms_price_check_order_draft` 深链  
- [x] 营销：券包 `/h5/coupons`、邀请 `/h5/invite`、佣金 `/h5/commission`（「我的」入口）  
- [x] 支付失败/余额不足回流：订单列表/详情 → 确认弹窗 → `/h5/recharge`  
- [ ] 待办推送（公众号模板消息：待支付、异常）  

### 三期

- [ ] 更完整的订单操作（拦截等）按需放开  
- [ ] 离线缓存最近查询条件 / 最近订单  
- [ ] PWA 或小程序封装  

---

## 10　验收标准（客户视角）

1. **查价格**：只填国家+重量，可在一屏内看到推荐价与至少 1 个比价结果。  
2. **查订单**：进入后 3 秒内理解「有没有要我处理的单」；运输中订单 2 步内看到轨迹。  
3. **AI顾问**：从订单点「问顾问」后，输入框上方能看到运单上下文。  
4. **我的**：余额与充值入口无需滚动过久即可发现。  
5. **底栏**：四 Tab 切换不丢登录态；内容不被底栏遮挡。  
6. **不出现**：手机上横向巨大表格、十余个状态 Tab 挤爆首屏、批量仓库工具条。

---

## 11　开放问题（评审时拍板）

| # | 问题 | 选项 | 建议 |
| --- | --- | --- | --- |
| 1 | 默认落地 Tab | 查订单 / 查价格 | **查订单**（刚需状态） |
| 2 | 手机能否完整下单 | 一期仅查价；二期下单 | **二期已落地** `/h5/place-order` |
| 3 | 异常是否进「待我处理」 | 是 / 否（仅待支付） | **待支付必进**；问题件进「异常」Tab，角标可合并 |
| 4 | 是否微信内强制竖屏 H5 壳 | 独立 `/h5` vs 响应式 | **独立 `/h5`** |
| 5 | AI 是否要登录 | 要 / 游客可问通用问题 | 与现网顾问策略对齐，建议 **要登录** |
| 6 | 品牌名展示 | 顶栏显示公司名 / 仅 Tab | 顶栏短名 +「客户中心」 |

---

## 12　总结

H5 客户中心不是把四个 PC 页塞进底栏，而是用客户的两条主线重组界面：

1. **钱**：查价格（算清楚再行动）  
2. **状态**：查订单（待我处理 → 在途 → 轨迹 / 异常）  

**AI顾问** 负责降低理解成本，**我的** 负责账户后勤。  
先做「看得清价格、盯得住订单」，再扩展下单与营销，才能在手机上真正替客户省时间。

---

**下一步**：评审本文 §11 开放问题 → 出交互线框（四 Tab 首屏）→ 再拆前端任务与接口缺口清单。