Appearance
PRD：我的 me-hub
一句话：面向 C 端用户，作为"我的"Tab 的聚合入口，汇总用户身份、权益状态、服务履约进度和健康管理快捷入口。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 我的 / 个人中心聚合 |
| 页面/功能 | 我的 |
| 路由 | /me |
| 页面类型 | 聚合页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/me/MeView.vue |
| 关联 page-spec | funde-client/docs/page-specs/me-hub.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/me.json |
1. 为什么做
1.1 背景
个人中心是用户每次打开"我的"Tab 首先看到的页面。它需要同时呈现用户身份标识（头像/姓名/会员等级）、核心权益数字（积分/家庭成员/保单/健康等级）、服务履约四格统计及在途服务列表，以及通往各健康管理子页的功能组。原型已实现完整版面，包括渐变 Hero 区、会员卡、成员统计条、服务履约卡和功能组列表，并通过退出登录按钮提供账号切换能力。
1.2 目标
- 业务目标：让用户一眼感知当前权益状态与服务进度，提升对健康管理平台价值的认知
- 用户/运营目标：一眼感知权益与服务状态，快速跳转子页
- 交付目标：当前版本实现 Mock 数据驱动的完整首屏展示，所有入口跳转正确
1.3 不解决的问题
- 消息红点角标：消息未读数由消息模块处理，个人中心不聚合
- 实时余额/积分刷新：当前版本使用 Mock，不发起接口轮询
- 推荐活动 Banner：商业化推广 Banner 不在当前版本范围内
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| Hero 区展示 | 头像、姓名、会员等级卡、积分/家庭成员/保单/健康等级四格统计 | P0 |
| 服务履约卡 | 待使用/使用中/已完成/待评价四格数字 + 在途服务列表（含服务名、状态标签、进度描述） | P0 |
| 健康管理功能组 | 健康档案、健康报告、体检报告单、监测方案、饮食方案、健康评估、我的预约、我的卡券/兑换记录共 8 个入口 | P0 |
| 账号设置入口 | 右上角齿轮图标跳转到 /me/settings | P0 |
| 退出登录 | 底部退出登录按钮，原型跳回 /login | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 消息红点角标 | 消息未读数由消息模块处理，个人中心不聚合 | [待确认] |
| 实时余额/积分刷新 | 当前版本使用 Mock，不发起接口轮询 | [待确认] |
| 推荐活动 Banner | 商业化推广 Banner 不在当前版本范围内 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 健康档案完整度进度条提示（引导补档） | [待确认] |
| 会员到期预警横幅 | [待确认] |
| 首屏骨架屏加载态 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户 | 用户打开 App 想确认当前积分余额或服务状态 | 在首屏即可看到积分、会员等级和服务进度，无需进入子页 |
| C 端用户 | 用户想补充健康信息或查看监测方案 | 从功能组一键进入对应子页 |
| C 端用户（如老人手机借给家人使用） | 需要切换账号 | 滚动到底部点击退出登录 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 底部 Tab Bar -> 我的 |
| 可以去哪里 | 个人资料、健康档案、会员权益、积分明细、家庭管理、保单管理、设置中心 |
| 依赖数据 | Vue Router /me、/me/profile、/me/health-profile、/me/membership、/me/points、/me/family、/me/policy、/me/settings、/orders、prototype/src/mock/me.json |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 用户未绑定保单 | 保单数显示为 0，点击跳转 /me/policy 后展示引导绑定提示 | - |
| 网络加载失败 | 显示上次缓存数据，关键数字处显示"—"占位符 | - |
| 头像加载失败 | 显示姓名首字符作为兜底头像 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| me-hero | custom-hero / hero | 渐变橙色背景，包含头像（首字兜底）、姓名、个人信息按钮、健康档案快捷按钮、右上角齿轮图标跳设置页。 |
| membership-card | fd-card / banner | 渐变橙色会员卡片，展示会员等级名称和"查看更多"入口。 |
| 常用功能 | fd-card / grid-4 | 我的卡券和购物车的图标右上角仅在存在待处理数据时展示数字角标： 我的卡券统计待使用且未锁定的权益卡与待使用优惠券之和；不统计已兑换、已使用、已过期及转赠记录。购物车统计当前购物车内全部待结算套餐卡片，同套餐同规格的独立卡片分别计数，不统计已删除、已结算移除的卡片及非套餐类资产。数量为 0 时隐藏，超过 99 显示 99+；加入、删除、正常去结算和演示重置后同步刷新，重复下单拦截时数量不变。 |
| stats-strip | custom-stats-strip / grid-4 | 四格统计条，展示积分、家庭成员数、保单数、健康等级，每格可点击跳转对应路由。 |
| 服务履约 | fd-card / list | 顶部四格数字（待使用/使用中/已完成/待评价），下方在途服务列表每行含图标/服务名/状态标签/进度描述/右箭头。 |
| 健康管理 | fd-card / list | 8 个功能行（来自 mock.healthManagementActions）： 健康档案、健康报告、体检报告单、监测方案、饮食方案、健康评估、我的预约、我的卡券/兑换记录。 每行含图标（按颜色区分）、标签、detail 文字和右箭头。 |
| logout | fd-btn-danger / custom | 底部危险操作按钮"退出登录"，点击后清除本地演示会话并进入登录页。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| me-hero | 渐变橙色背景，包含头像（首字兜底）、姓名、个人信息按钮、健康档案快捷按钮、右上角齿轮图标跳设置页。 | tap→/me/profile；tap→/health/record；tap→/me/settings | - | - |
| membership-card | 渐变橙色会员卡片，展示会员等级名称和"查看更多"入口。 | tap→/me/membership | - | - |
| 常用功能 | 我的卡券和购物车的图标右上角仅在存在待处理数据时展示数字角标： 我的卡券统计待使用且未锁定的权益卡与待使用优惠券之和；不统计已兑换、已使用、已过期及转赠记录。购物车统计当前购物车内全部待结算套餐卡片，同套餐同规格的独立卡片分别计数，不统计已删除、已结算移除的卡片及非套餐类资产。数量为 0 时隐藏，超过 99 显示 99+；加入、删除、正常去结算和演示重置后同步刷新，重复下单拦截时数量不变。 | tap:我的卡券→/me/vouchers；tap:购物车→/services/cart | - | - |
| stats-strip | 四格统计条，展示积分、家庭成员数、保单数、健康等级，每格可点击跳转对应路由。 | tap→/me/points；tap→/me/family；tap→/me/policy；tap→/me/membership | - | - |
| 服务履约 | 顶部四格数字（待使用/使用中/已完成/待评价），下方在途服务列表每行含图标/服务名/状态标签/进度描述/右箭头。 | tap→/orders?tab=pending_use；tap→/orders?tab=in_progress；tap→/orders?tab=completed；tap→/orders?tab=pending_review；tap→/services/dehao | - | - |
| 健康管理 | 8 个功能行（来自 mock.healthManagementActions）： 健康档案、健康报告、体检报告单、监测方案、饮食方案、健康评估、我的预约、我的卡券/兑换记录。 每行含图标（按颜色区分）、标签、detail 文字和右箭头。 | tap→/health/record；tap→/me/health-report；tap→/me/medical-reports；tap→/me/monitoring-plan；tap→/me/diet-plan；tap→/me/health-evaluations；tap→/me/appointments；tap→/me/vouchers | - | - |
| logout | 底部危险操作按钮"退出登录"，点击后清除本地演示会话并进入登录页。 | tap→/login | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| fulfillment_service_id | 服务履约接口打通后补充 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 路由 /me，必须显示底部 Tab Bar，当前 tab 为 me | 当前交付切片需遵守 |
| R2 | 四格统计每格均可独立点击跳转对应路由 | 当前交付切片需遵守 |
| R3 | 服务列表最多展示 3 条，超出引导"全部订单" | 当前交付切片需遵守 |
| R4 | 功能组顺序固定，不动态调整 | 当前交付切片需遵守 |
| R5 | 退出登录清除本地演示会话，写入主动退出标记，并跳转 /login | 当前交付切片需遵守 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面补充 | funde-client/docs/v0.1/pages/me/index.md |
| Page Spec | funde-client/docs/page-specs/me-hub.page.yaml |
| 页面实现 | funde-client/prototype/src/views/me/MeView.vue |
| Mock 数据 | funde-client/prototype/src/mock/me.json |
| source_route | /me |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取我的聚合数据 | 返回用户信息、会员状态、服务履约和功能组配置 | 当前原型使用本地 mock |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 访问我的页 | 登录用户 | 登录后可访问 /me |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | Hero 区头像、姓名、会员等级、四格统计全部展示且数据与 Mock 一致 | Hero 区头像、姓名、会员等级、四格统计全部展示且数据与 Mock 一致 |
| AC2 | 四格统计每一格点击后跳转到对应页面 | 四格统计每一格点击后跳转到对应页面 |
| AC3 | 服务履约卡展示正确的四格数字，点击数字跳转到 /orders?tab=对应值 | 服务履约卡展示正确的四格数字，点击数字跳转到 /orders?tab=对应值 |
| AC4 | 在途服务列表每行展示服务名、状态标签和进度描述，点击跳转到对应路由 | 在途服务列表每行展示服务名、状态标签和进度描述，点击跳转到对应路由 |
| AC5 | 健康管理功能组全部 8 个入口可点击跳转（含我的卡券/兑换记录 → /me/vouchers） | 健康管理功能组全部 8 个入口可点击跳转（含我的卡券/兑换记录 → /me/vouchers） |
| AC6 | 设置图标点击跳转 /me/settings | 设置图标点击跳转 /me/settings |
| AC7 | 退出登录按钮点击跳转 /login | 退出登录按钮点击跳转 /login |
| AC8 | 页面在 375px 宽度下无横向溢出 | 页面在 375px 宽度下无横向溢出 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 四格统计中"健康等级"是否等同于会员等级，或有独立评分维度？影响 | 字段设计与跳转目标。负责人：产品 | [待确认] |
| 在途服务列表条数上限是否固定为 3 条？影响 | 接口分页策略。负责人：产品 | [待确认] |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |
| 2026-06-27 | 新增"我的服务"功能组（我的卡券/兑换记录入口 → /me/vouchers） | 同步 page-spec；Codex |