feat(ui): 卡片可点进详情 + 身体年龄 + 运动详情 + 指标选择弹窗

需求 3.5 / 3.6 / 4.4 / 4.5 / 4.8 / 4.9

- 删掉导航栏右上角那两个 Link,就是它们渲染成半透明椭圆的。
  睡眠入口改为点健康页的睡眠卡片,每日入口移进趋势页内容里。
- 新增 lib/metrics.ts 作为唯一的指标注册表。label/unit/取值函数原本在
  今日、健康、趋势各写一份,改一处要改三处,也就有三次写不一致的机会。
- /metric/:id/ 指标详情:大数值 + 参考区间 + 7/30/90/365 趋势图 +
  平均最高最低达标天数 + 这个指标是什么 + 评分依据(取自后端,不在前端另写一份)
- /activity/:id/ 运动详情:概览/数据/分段/图表,数据分组照搬手表的排法,
  心率区间用单色顺序色阶(区间是有序刻度,不是分类,不能用分类色)
- /body-age/ 身体年龄:逐步展示 VO₂max 基准与各项修正,以及每步的出处
- 趋势页 15 个 chip 占满一屏且像张表单,改成弹窗选择,页面上只留一行摘要

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
ericwyuan
2026-08-24 00:39:33 +08:00
parent 6b4c5375dc
commit b0e0799a97
17 changed files with 1677 additions and 171 deletions

View File

@@ -39,8 +39,9 @@
| 3.2 | Tab今日 / 健康 / 趋势 / 运动 / 设置 | 每日是趋势的子页 | ✅ |
| 3.3 | 首页改三圆环:步数 / 睡眠 / HRV | 并列三环,满环=进入参考区间 | ✅ |
| 3.4 | 交互流畅、有动画 | 数字滚动、入场揭示、`prefers-reduced-motion` | ✅ |
| 3.5 | 删掉各页右上角的半透明椭圆 | 导航栏右侧 `Link`(带 tooltip渲染出来的 | 📋 |
| 3.6 | 睡眠入口不放右上角,改为点健康页睡眠卡片进入 | 入口跟着内容走 | 📋 |
| 3.7 | 主界面切到子界面加 loading 动画 | 路由切换时的过渡指示 | 📋 |
| 3.5 | 删掉各页右上角的半透明椭圆 | 导航栏右侧 `Link`(带 tooltip渲染出来的已移除 | |
| 3.6 | 睡眠入口不放右上角,改为点健康页睡眠卡片进入 | 入口跟着内容走;每日入口同样移进趋势页内容 | ✅ |
## 四、数据展示
@@ -49,12 +50,12 @@
| 4.1 | 每日详情模块,看某天所有数据 | 每日页 | ✅ |
| 4.2 | 趋势模块7 天 / 月 / 季 / 年 周期 | 按周期取日均,桶长不同也可比 | ✅ |
| 4.3 | 趋势覆盖全部 15 组指标,可自选显示/隐藏 | 指标选择器 | ✅ |
| 4.4 | 指标选择器太丑,改成选择弹窗 | F7 Popup/Sheet 承载 | 📋 |
| 4.5 | 所有卡片可点击进入详情 | 每个指标一个详情页:历史曲线 + 参考区间 + 说明 | 📋 |
| 4.4 | 指标选择器太丑,改成选择弹窗 | 改为 F7 Popup,页面上只留一行「显示指标 n/15」 | |
| 4.5 | 所有卡片可点击进入详情 | `/metric/:id/`:大数值 + 参考区间 + 趋势图 + 统计 + 依据;新增 `lib/metrics.ts` 统一指标注册表 | ✅ 健康页完成,🚧 今日页 |
| 4.6 | 今日页左右箭头切换前一天/后一天 | | 📋 |
| 4.7 | 今日页顶部日期选择控件,可看历史任一天 | | 📋 |
| 4.8 | 点击每个运动看本次运动详情,数据全展示 | 概览/数据/分段/图表:配速、速度、计时、心率、训练效果、营养补水、温度、强度分钟、海拔、心率区间、分段表、采样曲线 | ✅ 接口完成,🚧 界面 |
| 4.9 | 健康页增加身体年龄 | 本地按公开常模推算,展示推算过程 | ✅ 接口完成,🚧 界面 |
| 4.8 | 点击每个运动看本次运动详情,数据全展示 | 概览/数据/分段/图表四个 Tab含心率区间条与时间/距离横轴切换 | ✅ |
| 4.9 | 健康页增加身体年龄 | 健康页卡片 + `/body-age/` 展示每一步推算过程与出处 | ✅ |
## 五、设置