Appearance
PRD：健康概览 health-hub
一句话：面向 C 端消费者，集中呈现用户当前综合健康评分、关键体征摘要与档案完整度，是用户进入健康 Tab 后的第一视角。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 健康 / 健康概览 |
| 页面/功能 | 健康概览 |
| 路由 | /health |
| 页面类型 | 聚合页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/health/HealthView.vue |
| 关联 page-spec | funde-client/docs/page-specs/health-hub.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/health.json |
1. 为什么做
1.1 背景
健康概览是 funde-client 健康 Tab 的根页面（/health），用户点击底部导航「健康」即进入此页。平台整体目标是让用户感受到"主动健康管理"的价值，健康概览需要在第一屏让用户看到自己的健康状态全貌，并通过档案完整度进度条和健管师批注驱动用户继续行动。当前原型已实现综合评分卡（含环形仪表盘）、体征 2×2 卡片网格、档案完整度区块和快速入口四个主要区块，数据全部来自 src/mock/health.json。
1.2 目标
- 业务目标：提升健康 Tab 的打开率和停留深度；推动用户补全档案、增加体征录入频次，为健管团队提供充足数据基础
- 用户/运营目标：一眼看到综合健康评分和体征状态，知道哪里需要改善，知道下一步做什么
- 交付目标：原型跑通"看评分 → 看体征 → 点击体征卡片进入详情 → 点击去补全进入档案"的核心路径
1.3 不解决的问题
- 体征卡片自定义排序/隐藏：当前"编辑卡片"链接指向
/health/metrics，不做拖拽排序。等体征模块稳定后统一支持 - 健管师批注实时接口：批注内容为 mock 静态文本，不做接口对接
- 评分历史趋势图：评分卡仅展示与 3 周前对比的差值文字，不做完整趋势折线图
- Tab 角标联动：档案完整度预警角标在此版本不接入消息模块
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 综合健康评分卡 | 展示环形仪表盘（riskScore）、等级标签（riskLevel）、改善提示文字和健管师批注 | P0 |
| 体征监测网格 | 2×2 动态卡片网格，展示 mock metrics 中所有体征；每张卡片展示指标名称、最新数值/单位、状态标签和趋势图标，点击跳转 /health/metrics/:key | P0 |
| 档案完整度区块 | 展示完整度百分比、缺失项提示、进度条和"去补全"按钮，点击跳转 /health/record | P0 |
| 快速入口 | 底部四格图标入口，分别跳转健康档案、体征监测、六维评测、我的报告 | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 体征卡片自定义排序/隐藏 | 当前"编辑卡片"链接指向 /health/metrics，不做拖拽排序。等体征模块稳定后统一支持 | [待确认] |
| 健管师批注实时接口 | 批注内容为 mock 静态文本，不做接口对接 | [待确认] |
| 评分历史趋势图 | 评分卡仅展示与 3 周前对比的差值文字，不做完整趋势折线图 | [待确认] |
| Tab 角标联动 | 档案完整度预警角标在此版本不接入消息模块 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 健康概览支持家庭成员切换（子女代管场景） | [待确认] |
| 评分卡点击展开历史评分趋势图 | [待确认] |
| 体征卡片支持按风险等级或个人偏好排序显示 | [待确认] |
| 指标异常时卡片高亮并支持一键发送给健管师 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（以退休老年人为主） | 早晨测完血压，打开 App 切换到健康 Tab，查看今天体征数据是否有异常 | 快速确认血压测量结果已录入，判断今天健康状态是否正常 |
| C 端用户 | 收到健管师消息提醒"您的档案还缺少家族病史信息"，进入健康概览看到档案完整度 72% | 点击"去补全"跳转档案页，按提示补充缺失项 |
| C 端用户（初次使用或定期回访） | 做完六维测评后回到健康概览，查看综合评分是否有提升，阅读健管师批注获取改善建议 | 了解自己的健康等级，决定是否联系健管师 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 底部 Tab 「健康」-> 健康概览 |
| 可以去哪里 | /health/metrics/:key（体征详情）、/health/record（档案补全）、/health/assessment/six-dim（六维评测）、/health/assessment/report（我的报告） |
| 依赖数据 | Vue Router /health、/health/record、/health/metrics、/health/assessment/six-dim、/health/assessment/report、本地 mock prototype/src/mock/health.json、后端规划接口 GET /api/health/overview |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 网络异常 | 展示骨架屏，提示"数据加载失败，下拉刷新重试" | 不崩溃页面 |
| 用户未完成 Onboarding | 健康评分显示为 0 或展示"完成健康信息填写后开始评分"引导提示 | - |
| 某体征从未录入 | 对应卡片显示"暂无数据"占位文字，点击跳转该体征录入页 | - |
| 档案完整度达到 100% | "去补全"按钮改为"查看档案"，缺失项提示隐藏 | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| 综合健康评分 | fd-card / custom | 展示环形 SVG 仪表盘（riskScore、渐变描边）、评分大字、风险等级 badge（riskLevel）、 改善提示文字（riskHint）和健管师批注（advisorNote：头像+姓名+批注文字）。 Topbar 副标题展示"档案完整度 X% · riskLevel"。 |
| 健康档案完整度 | fd-card / banner | 展示完整度百分比大字、缺失项提示文字（"缺：心电图 / 家族病史"）、 fd-progress 进度条、补全奖励提示和"去补全"按钮（fd-btn-soft）。 点击"去补全"跳转 /health/record。 |
| 体征监测 | fd-card / grid-2 | 2×N 动态卡片网格，展示所有体征（blood-pressure、blood-sugar、weight、heart-rate、 sleep、ecg、fundus、exercise、spo2、digestive）； 每卡片展示：指标图标（彩色背景圆角方块）、状态 badge（warning/success）、 指标名称、最新数值+单位、趋势图标、最后测量时间； warning 卡片带橙色边框高亮。标题右侧"编辑卡片"链接跳转 /health/metrics。 |
| 快速入口 | fd-card / grid-4 | 四格图标入口，每格含彩色圆角图标（tint 背景）和标签文字； 分别跳转健康档案、体征监测、六维评测、我的报告。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| 综合健康评分 | 展示环形 SVG 仪表盘（riskScore、渐变描边）、评分大字、风险等级 badge（riskLevel）、 改善提示文字（riskHint）和健管师批注（advisorNote：头像+姓名+批注文字）。 Topbar 副标题展示"档案完整度 X% · riskLevel"。 | - | - | - |
| 健康档案完整度 | 展示完整度百分比大字、缺失项提示文字（"缺：心电图 / 家族病史"）、 fd-progress 进度条、补全奖励提示和"去补全"按钮（fd-btn-soft）。 点击"去补全"跳转 /health/record。 | tap→/health/record | - | - |
| 体征监测 | 2×N 动态卡片网格，展示所有体征（blood-pressure、blood-sugar、weight、heart-rate、 sleep、ecg、fundus、exercise、spo2、digestive）； 每卡片展示：指标图标（彩色背景圆角方块）、状态 badge（warning/success）、 指标名称、最新数值+单位、趋势图标、最后测量时间； warning 卡片带橙色边框高亮。标题右侧"编辑卡片"链接跳转 /health/metrics。 | tap→/health/metrics/:key | - | - |
| 快速入口 | 四格图标入口，每格含彩色圆角图标（tint 背景）和标签文字； 分别跳转健康档案、体征监测、六维评测、我的报告。 | tap→/health/record；tap→/health/metrics；tap→/health/assessment/six-dim；tap→/health/assessment/report | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| advisorNote.text（实时接口） | 进入后续字段口径确认 |
| riskScore（后端计算接口） | 进入后续字段口径确认 |
| 家庭成员切换支持 | 进入后续字段口径确认 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 风险等级（riskLevel）按评分分三段 | 高风险（0-39）、中风险（40-69）、低风险（70-100）；badge 颜色分别为红、橙、绿 |
| R2 | 趋势图标（trend）分三类 | up（趋势上升，红色箭头）、down（趋势下降，绿色箭头）、flat（平稳，灰色横线）；是否为好趋势由指标类型决定（血压上升为负面红，体重下降为正面绿） |
| R3 | 档案完整度（archiveProgress）为 0-100% 整数；缺失项由后端返回，当前 mock 固定为"缺 | 心电图 / 家族病史" |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面清单 | funde-client/docs/v0.1/05-page-inventory.md |
| 产品级页面补充 | funde-client/docs/v0.1/pages/health/hub.md |
| Page Spec | funde-client/docs/page-specs/health-hub.page.yaml |
| 页面实现 | funde-client/prototype/src/views/health/HealthView.vue |
| Mock 数据 | funde-client/prototype/src/mock/health.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /health |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 打开健康 Tab，环形仪表盘正常渲染，评分数字与 mock riskScore 一致（62），等级 badge 显示"中风险" | 打开健康 Tab，环形仪表盘正常渲染，评分数字与 mock riskScore 一致（62），等级 badge 显示"中风险" |
| AC2 | 体征网格展示 mock 全部 10 条体征数据；血压卡片显示橙色 warning 边框，其余卡片为绿色 success 风格 | 体征网格展示 mock 全部 10 条体征数据；血压卡片显示橙色 warning 边框，其余卡片为绿色 success 风格 |
| AC3 | 血压卡片趋势显示红色上升箭头，体重卡片显示绿色下降箭头，其余显示灰色平稳横线 | 血压卡片趋势显示红色上升箭头，体重卡片显示绿色下降箭头，其余显示灰色平稳横线 |
| AC4 | 档案完整度进度条展示 72%，缺失项文字显示"缺 | 心电图 / 家族病史"；"去补全"按钮可点击 |
| AC5 | 点击血压体征卡片能跳转至 /health/metrics/blood-pressure | 点击血压体征卡片能跳转至 /health/metrics/blood-pressure |
| AC6 | 点击"去补全"按钮能跳转至 /health/record | 点击"去补全"按钮能跳转至 /health/record |
| AC7 | 快速入口四个按钮点击后分别跳转 | 健康档案→/health/record，体征监测→/health/metrics，六维评测→/health/assessment/six-dim，我的报告→/health/assessment/report |
| AC8 | 健管师批注区块正常显示头像、姓名和批注文字，文字不截断 | 健管师批注区块正常显示头像、姓名和批注文字，文字不截断 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 综合健康评分的计算规则（涉及哪些数据维度、各维度权重）尚未定义 | 影响接口设计和分数解释文案 | 产品 |
| 体征卡片是否支持用户自定义显示/排序 | "编辑卡片"入口在此版本功能边界需确认 | 产品 |
| 用户未绑定健管师时（新用户）的批注区块展示方案 | 是否隐藏或展示默认引导文字 | 产品 |
| 大字号适配 | 页面字号和按钮尺寸是否随 /me/settings/accessibility 中"大字显示"设置动态调整，当前原型未实现，老年用户场景需重点考虑 | 前端/设计 |
| mock 中评分对比文字"↓ 3 周前 65"硬编码，需确认对比时间窗口（1周/4周）业务规则；负责人 | 产品 | [待确认] |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |