ericwyuan/GarminHealthLab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
38 Commits 1 Branch 0 Tags
6ad87115abe6de6eceaddffc46ec008fce020f94
Commit Graph

6 Commits

Author SHA1 Message Date
ericwyuan
34940cc387 feat(sync): 运动详情改为同步入库，详情页只读本地 
按需回源是错的：点一次运动要等七个 Garmin 接口，网络好的时候慢，
网络差的时候直接超时（实测公网下 Network Error）。

- sync_data 顺带补齐缺详情的运动
- POST /api/garmin/sync-details 后台补齐存量，GET 查进度
- 详情页只读本地库；没有就提示去同步，不再回源
- 同步页新增「补齐运动详情」按钮，带进度

身体年龄：加入公开的阻尼系数
- 34 岁 VO₂max 46 原本算出 21 岁。不是算错，是方法本身会饱和：
  人与人之间的 VO₂max 标准差约 7，而年龄每年只带来约 0.35 的衰减，
  于是稍微能练的人都会撞到参考表最年轻一档。
- 按 50% 向实际年龄收拢，收敛范围 ±20 → ±12 岁，同一算例现在给 27 岁。
- 去掉「高于最年轻一档按 20 岁计」的硬地板，那是一道正好落在用户身上的悬崖。
- 界面同时显示未收拢的原始值，阻尼系数写进评分依据。

路由：为每个路径补无斜杠别名
- F7 写地址栏时去掉尾斜杠，于是 /daily/ 在地址栏是 /daily，
  而那个地址匹配不到任何路由，刷新或分享就落到「找不到页面」。

布局：让页面结构上无法被撑宽
- 网格改用 minmax(min(210px,100%),1fr)：裸的 minmax(210px,1fr) 允许
  两列加起来超过窄屏宽度，第二张卡就被切掉在屏幕外。
- .ring-row 用 minmax(0,1fr)，1fr 会以 min-content 兜底，一句长说明就能
  把整行顶宽。
- .page-inner 加 overflow-x: clip。
- html/body 用 100dvh：手机浏览器把自己的地址栏盖在布局视口上，
  100% 高的应用会把底部 Tab 栏顶到它们下面——对用户来说就是没有 Tab 栏。

测试：新增 122 项（设置 44、身体年龄 44、运动详情 42），全量 446 项通过。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-24 04:03:49 +08:00
ericwyuan
85c00759f8 fix(ui): 三处实机问题 + hero 改为三圆环 
fix: 标题在窄栏里一行一个字
- Framework7 对裸 <button> 有全局样式，把「看数据」按钮拉成整行宽，
  标题/副标题容器被挤成 0 宽，文字只能竖排。给按钮显式 width:auto

fix: 标题旁边有个灰色方块
- 今日页没有右侧动作，但 NavRight 容器仍然渲染并带半透明白底。
  改为有内容才渲染

hero 改为三圆环（步数 / 睡眠 / HRV）:
- 每个环以「进入自己的参考区间」为满环，所以三个环的满度含义一致，
  尽管单位不可比
- 并列而非同心：Apple 的同心环成立是因为三环共享一个概念
  （动/练/站），而这三项是互不相关的度量，分开更好读

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-24 00:01:27 +08:00
ericwyuan
fd9b610810 [阶段10.1] Tab 改为 今日/健康/趋势/运动/设置 
按指定结构调整导航：每日归入趋势、睡眠归入健康、同步归入设置，
它们是各自 Tab 的详情视图而非独立目的地。新增「运动」Tab。

运动页（新）:
- 近 30 天运动时长/距离/消耗，以及今日强度分钟
- 项目分布：按累计时长排序，横条表示占比。只用一个色相 —— 每个项目
  一种颜色会让人以为分类另有含义
- 强度分钟趋势图，附 WHO 每周 150 分钟的参考
- 记录 / 个人纪录 / 奖励三个分页，运动记录 174 条

fix(nav): 五个 Tab 全部加载了同一个页面
- browserHistory 开在每个 View 上，导致它们都去读浏览器地址栏（当时是
  "/"）而不是各自的 url，五个 Tab 渲染出五份「今日」
- 浏览器历史只绑定主 View，其余 Tab 用自己的 url 独立加载

fix(nav): 导航栏右侧对所有页面塞同一组图标
- 睡眠/同步/设置三个图标出现在每个页面上，其中两个在多数页面无意义。
  改为按页面声明：趋势 → 每日，健康 → 睡眠，设置 → 同步

fix(viz): 图表标题在窄栏里竖排
- 标题与「看数据」按钮争抢宽度，短标题被压成竖排字符。
  标题允许收缩省略，按钮不收缩

fix: 未映射的运动类型直接暴露 snake_case
- 补充登山/划船/椭圆机等映射；仍未覆盖的转为空格分词并首字母大写，
  而不是把 Garmin 的原始 key 摆给用户看

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-23 23:52:18 +08:00
ericwyuan
7ab150537d [阶段10] 前端以 Framework7 重建，采用 iOS 原生形态 
按要求废弃手写外壳，改用 Framework7 React（theme=ios）。参照 PeakWatch
的信息架构与卡片语言。

保留（这些是资产，不该重来）:
- 数据层 services/api.ts、聚合 lib/aggregate.ts、参考区间 lib/ranges.ts
- 图表组件 Chart / Ring / Sparkline / BandBar / MetricCard / MetricStrip
- 经校验的配色令牌（色盲安全 + 对比度，浅深两档）

替换:
- 路由与外壳交给 F7：五个 Tab 各自独立导航栈，推入详情页不影响其他 Tab
- 页面转场、橡皮筋滚动、大标题折叠、半透明栏 —— 这些正是换框架的理由，
  手写做不像
- 底部标签栏改用 F7 Toolbar，触控目标与安全区由框架处理

配色接入:
- 新增 f7theme.css 把我们的令牌映射到 F7 的 CSS 变量，让它的导航栏/
  列表/面板与我们的图表同属一套设计，而不是两种视觉打架
- F7 的深色靠 .dark 类，我们的靠 data-theme，两者在 App 里同步切换

fix: 图标显示为原始名称（squ/hea/cale…）
- iconIos/iconMd 引用的是 framework7-icons 字体，没装就只会渲染出名字

其他:
- tsconfig moduleResolution 改为 bundler —— F7 用 exports 映射，
  node 解析方式找不到它的类型
- 登录页不套 Tab 外壳，未登录时不该出现导航

桌面与手机都要好看：内容在宽屏收进 1100px 居中列并加密卡片列数，
窄屏走底部标签栏；两档都已实机核对。

bundle 190KB -> 399KB，是换取原生手感的代价。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-23 23:38:21 +08:00
ericwyuan
757afdc941 [阶段9] 界面打磨：hero 圆环、sparkline、骨架屏、动效 
参考了 itsdrchen/Garmin-AI-Coach 与主流健康 App（Apple 活动圆环、
Oura/Whoop 的评分环、Garmin Connect 的卡内趋势）的做法。

hero 区（每个视图只有一个 hero 数字）:
- 步数目标圆环，超额时转为 status-good 色并保持满环 + 端点标记，
  而不是绕第二圈 —— 绕圈会让 101% 看起来比 100% 还少
- 圆环轨道用填充色同色系的浅阶而非中性灰，两者才读作同一个量器

sparkline（12 点，卡片内嵌）:
- 线用去强调色，只有最新一点用强调色，让它成为数字的背景而非对手
- null 处断开而不插值 —— 设备没记录的那天连一条平线过去等于编数据

骨架屏取代转圈:
- 形状与将要出现的内容一致，数据到位时布局不跳
- 用扫光而非闪烁，读起来像进度而不是元素在求关注

动效:
- 卡片/图表依次入场（45ms 递增），引导视线扫过而不是整屏同时砸下来
- 数字滚动到位、圆环扫过、sparkline 描线、悬停抬升、按下微缩
- 全部尊重 prefers-reduced-motion：直接跳过而非缩短时长 ——
  引起不适的是位移本身，不是它持续多久

深色改为冷调（借鉴参考项目）:
- 表面从暖近黑 #1a1a19 改为冷近黑 #181b21，更像运动 App
- 换表面意味着原有校验作废，已用校验器对新表面重跑：四个系列色
  全部通过含 3:1 对比度；文字亦逐个复核（正文 14.56:1、
  次要 7.98、弱化 4.38、按钮白字 6.63）

fix(a11y): 大号独立数字不应使用 tabular-nums
- 等宽数字让每个字形都占 0 的宽度，大字号下显得松散；
  等宽只保留给需要纵向对齐的表格列与坐标轴刻度

fix: 数字滚动动画吞掉了小数位
- StatTile 内部按 decimals 格式化，而调用方已经先 round 过一次，
  距离显示成 "9 km"、久坐成 "11 小时"。改为传原值 + decimals

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-23 22:48:09 +08:00
ericwyuan
ad88ec7e41 [阶段7] 前端重做：31 项指标全部露出，配色经色盲校验 
原来仪表板只有 4 张卡片和 4 张图，31 项指标里绝大多数没有出口。

信息架构重组为 7 个页面（原 5 个）:
- 今日   按活动 / 心率压力 / 睡眠呼吸三组展示 16 项指标
- 趋势   15 组指标可切换，5 档时间窗口（最长一年）
- 睡眠   新增。分期堆叠图 + 夜间血氧/呼吸/压力
- 成就   新增。奖励徽章按年份分组、个人纪录、运动记录
- 建议 / 同步 / 设置 保持

配色（依据 dataviz 规范，用校验器实测而非目测）:
- 采用验证过的分类色板并按既定 slot 顺序取色 —— 顺序本身就是
  色盲安全机制，不是审美选择，因此只取不循环
- 浅色 worst adjacent CVD ΔE 9.1 / 常视觉 22.9
  深色 worst adjacent CVD ΔE 8.4 / 常视觉 19.8，两档全部通过
- 浅色表面下 aqua 2.74:1、yellow 2.11:1 低于 3:1，按规范提供
  "relief"：每张图都带表格视图，且图例始终与文字标签同现
- 深色不是自动反色，是同色相针对深色表面重新取阶并单独校验
- 状态色（good/warning/serious/critical）保留专用，绝不当作
  第 N 个系列色；且始终图标 + 文字同现，不靠颜色单独表意

图表规范:
- 单一 y 轴，绝不双轴；量纲不同的指标拆成不同图
- 2px 线宽、4px 圆角柱端锚定基线、堆叠段间 2px 表面色间隙、
  悬停标记 2px 表面色描边
- 两系列以上必有图例，单系列不加（标题已经点明）
- 折线 connectNulls，设备漏记的日子不把线打断
- 数值文字一律用文字色令牌，不染系列色

其他:
- 主题切换（自动/浅色/深色），选择写入 localStorage 并标在 <html>
- 导航改为顶部横向，移动端可横滑
- 表格、徽章、空状态等组件统一到设计令牌

验证方式: DOM 审计确认 2px 线宽、圆角为 A 4,4 弧、堆叠段
2px 间隙、图例数量与系列数匹配、两档主题令牌各自解析到校验过的色值。

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
 2026-08-23 21:17:08 +08:00