Appearance
PRD：体征监测 health-metrics
一句话：面向 C 端用户，汇总展示十大体征指标的最新数值与状态，并提供各指标详情的统一入口。
0. 快速评审卡
| 项 | 内容 |
|---|---|
| 产品 | funde-client |
| 模块 | 健康 / 体征监测中心 |
| 页面/功能 | 体征监测 |
| 路由 | /health/metrics |
| 页面类型 | 聚合页 |
| 状态 | 已实现 / PRD 初版 |
| 产品负责人 | [待确认] |
| 研发负责人 | [待确认] |
| 测试负责人 | [待确认] |
| 关联原型 | funde-client/prototype/src/views/health/metrics/MetricsView.vue |
| 关联 page-spec | funde-client/docs/page-specs/health-metrics.page.yaml |
| 关联 mock | funde-client/prototype/src/mock/health.json |
1. 为什么做
1.1 背景
体征监测中心是健康 Tab 的核心子功能，将血压、血糖、体重、心率、睡眠、血氧、心电图、运动饮食、眼底检测、消化健康十项指标集中呈现。用户可在一屏内掌握整体健康状态，并快速跳转到单项指标的历史趋势页面。原型已实现两列网格卡片布局、指标状态色标记、蓝牙设备连接状态点、趋势箭头以及管理蓝牙设备入口。
1.2 目标
- 业务目标：帮助平台快速感知用户健康概况，支撑健管师在异常指标出现时及时干预
- 用户/运营目标：一眼查看所有体征指标的最新状态，快速进入关注的指标详情或录入新数据
- 交付目标：当前版本跑通"浏览全部指标 → 点击进入单项详情"的核心路径，并展示蓝牙设备连接状态
1.3 不解决的问题
- 指标排序与自定义：用户暂不能拖拽重排指标卡片
- 批量录入入口：此页面不提供录入功能，录入从各指标详情页进入
- 指标开关（隐藏不关心的指标）：MVP 阶段不做个性化配置
2. 当前交付切片
这里只写当前准备评审、开发和测试的内容。
2.1 做什么
| 能力 | 说明 | 优先级 |
|---|---|---|
| 十大指标卡片展示 | 网格排列，每张卡片含指标名称、最新值、单位、状态标签、趋势箭头、蓝牙状态点 | P0 |
| 指标详情跳转 | 点击任意卡片跳转到对应指标页面 | P0 |
| 蓝牙设备入口 | 底部"管理蓝牙设备"横条，展示在线设备数量，点击跳转 /me/devices | P1 |
| 异常指标高亮 | statusType === 'warning' 的卡片使用橙色边框背景，明显区分于正常状态 | P1 |
2.2 暂不做
| 暂不做 | 原因 | 后续处理 |
|---|---|---|
| 指标排序与自定义 | 用户暂不能拖拽重排指标卡片 | 当前指标数量固定，优先级不高 |
| 批量录入入口 | 此页面不提供录入功能，录入从各指标详情页进入 | [待确认] |
| 指标开关（隐藏不关心的指标） | MVP 阶段不做个性化配置 | [待确认] |
2.3 后续候选
| 候选能力 | 触发条件 |
|---|---|
| 允许用户自定义展示的指标类型与排序 | [待确认] |
| 支持在本页面直接触发快速录入（长按卡片） | [待确认] |
智能设备绑定页（/health/metrics/devices，当前规划中）建成后，蓝牙入口对应跳转目标调整 | [待确认] |
3. 谁来用，怎么用
| 角色 | 场景 | 目标 |
|---|---|---|
| C 端用户（含老年用户） | 早起测完血压后打开 App，想快速确认各项指标是否正常 | 一屏扫完十大指标，发现异常立刻进入详情 |
| C 端用户 | 收到健管师随访提醒，进入健康 Tab 查看近期体征整体情况 | 了解哪些指标处于预警状态，准备好向健管师反馈 |
4. 主流程与页面入口
4.1 入口与出口
| 类型 | 内容 |
|---|---|
| 从哪里进入 | 健康概览 -> 体征监测中心 / 底部 Tab 健康 -> 体征 |
| 可以去哪里 | 血压详情、血糖详情、体重/BMI、心率详情、睡眠详情、血氧饱和度、心电图、运动与饮食、眼底检查、消化健康、体征录入 |
| 依赖数据 | 本地 mock prototype/src/mock/health.json 中 metrics 数组、useDevicesStore（设备状态）、Vue Router 各指标路由：/health/metrics/blood-pressure 等 |
4.2 主流程
4.3 异常场景
| 场景 | 系统表现 | 提示 |
|---|---|---|
| 无任何历史数据 | 卡片内数值区域展示"暂无数据"占位，状态标签显示"未记录" | - |
| 指标值异常（statusType === 'warning'） | 卡片边框变橙色，背景呈浅橙色渐变，状态标签文字红色高亮 | - |
| 蓝牙设备全部离线 | 状态点显示为灰色，底部横条显示"0 台在线" | - |
5. 页面结构与字段
5.1 页面区块
| 区块 | 内容 | 说明 |
|---|---|---|
| metrics-hint | fd-text-hint / custom | 顶部小字提示"点击各指标查看详情与历史趋势"。 |
| metrics-grid | metric-card / grid-2 | 两列网格，每张卡片含：指标图标（iconify）、蓝牙状态点（绿/灰）、指标名称、 最新值+单位、趋势箭头、状态标签（van-tag）、测量时间徽章。 statusType=warning 时卡片边框橙色 + 浅橙渐变背景。 |
| bluetooth-banner | fd-banner / custom | 底部蓝牙设备管理横条，展示蓝牙图标、"管理蓝牙设备 · N 台在线"，点击跳转 /me/devices。 |
5.3 页面功能说明
列出本页全部功能点，含说明、跳转目标、特殊情况与业务限制。
| 功能 | 说明 | 跳转/触发 | 特殊情况 | 特殊限制 |
|---|---|---|---|---|
| metrics-hint | 顶部小字提示"点击各指标查看详情与历史趋势"。 | - | - | - |
| metrics-grid | 两列网格，每张卡片含：指标图标（iconify）、蓝牙状态点（绿/灰）、指标名称、 最新值+单位、趋势箭头、状态标签（van-tag）、测量时间徽章。 statusType=warning 时卡片边框橙色 + 浅橙渐变背景。 | tap→/health/metrics/:key | - | - |
| bluetooth-banner | 底部蓝牙设备管理横条，展示蓝牙图标、"管理蓝牙设备 · N 台在线"，点击跳转 /me/devices。 | tap→/me/devices | - | - |
5.4 后续字段候选
| 字段 | 为什么暂不进入当前交付 |
|---|---|
| device_sync_status | 智能设备绑定后补充设备同步状态 |
| trend_direction | 趋势算法确认后补充 |
6. 业务规则
| ID | 规则 | 说明 |
|---|---|---|
| R1 | 十大指标展示顺序固定 | 血压、血糖、体重/BMI、心率、睡眠、血氧、心电图、运动/饮食、眼底检测、消化健康 |
7. 数据、接口与权限
7.1 数据来源
| 类型 | 来源 |
|---|---|
| 产品级页面清单 | funde-client/docs/v0.1/05-page-inventory.md |
| 产品级页面补充 | funde-client/docs/v0.1/pages/health/metrics/overview.md |
| Page Spec | funde-client/docs/page-specs/health-metrics.page.yaml |
| 页面实现 | funde-client/prototype/src/views/health/metrics/MetricsView.vue |
| Mock 数据 | funde-client/prototype/src/mock/health.json |
| 路由源 | funde-client/prototype/src/router/index.ts |
| source_route | /health/metrics |
7.2 接口说明
| 接口 | 用途 | 备注 |
|---|---|---|
| 获取体征汇总 | 返回所有指标最新值和状态 | 当前原型使用本地 mock |
| 获取指标历史趋势 | 各指标卡片趋势图 | 当前原型使用 mock 数据 |
7.3 权限
| 操作 | 权限要求 | 当前处理 |
|---|---|---|
| 查看体征中心 | 登录用户 | 登录后可访问 /health/metrics |
| 录入体征 | 本人数据授权 | 点击录入进入 /health/metrics/:key/add |
8. 验收标准
| 编号 | 验收项 | 预期结果 |
|---|---|---|
| AC1 | 十大指标卡片全部展示，每张卡片包含指标名、最新值、单位、状态标签、测量时间 | 十大指标卡片全部展示，每张卡片包含指标名、最新值、单位、状态标签、测量时间 |
| AC2 | 异常指标卡片有明显的橙色高亮样式，与正常卡片有视觉区分 | 异常指标卡片有明显的橙色高亮样式，与正常卡片有视觉区分 |
| AC3 | 点击任意已实现的指标卡片可正确跳转到对应详情页 | 点击任意已实现的指标卡片可正确跳转到对应详情页 |
| AC4 | 蓝牙设备状态点正确区分已连接（绿）和未连接（灰） | 蓝牙设备状态点正确区分已连接（绿）和未连接（灰） |
| AC5 | 底部蓝牙设备横条展示在线设备数量并可点击跳转 | 底部蓝牙设备横条展示在线设备数量并可点击跳转 |
9. 待确认问题
| 问题 | 影响 | 负责人 |
|---|---|---|
| 指标数据刷新频率 | 进页面时拉取一次还是定时轮询；影响电量与流量 | 后端 |
| 老年用户大字号模式下卡片数值字号是否需要单独放大（当前 20px）；负责人 | 产品 | [待确认] |
| 蓝牙设备跳转目标 | 当前为 /me/devices，设备绑定页（/health/metrics/devices）上线后是否切换 | 产品 |
10. 变更记录
| 日期 | 变更 | 作者 |
|---|---|---|
| 2026-06-19 | 按需求源 PRD 模板创建 | Codex |