数据展示
卡片、列表项、气泡、进度、时间线与信息展示组件。数值一律使用 Manrope 等宽数字，配合趋势色与状态徽章，保证多行对齐与语义可读。
07 · DATA · 数据展示
MetricCard / GroupKPI / StatusBadge · 列表与时间线
今日
步数
8,420步
▲ 12.4%较昨日
7.2
睡眠 h
68
静息心率
6.4
空腹血糖
指标状态
全部 ›
血压正常
血糖偏高
血脂超标
待复查
70%目标完成
周目标 56,000 步
已完成 39,200 步
还差 16,800 步（约 2 天）
还差 16,800 步（约 2 天）
进度分段
有氧力量拉伸日常
HbA1c 5.8% LDL 已达标
MetricCard 数值 34pt · GroupKPI 24pt
郑
待就诊
›
郑宗范
心内科 · 复诊
王
已完成
›
王丽
内分泌科 · 初诊
张
›
张伟
检验报告待解读
近期动态
- 血压记录 142/90今天 08:12 · 偏高
- 服药 二甲双胍 0.5g今天 08:00 · 依从
- 晨间体重 70.2 kg今天 07:30
- 检验报告已出昨天 16:40 · 2 项异常
对话气泡
我这周空腹血糖 6.4，需要调整用药吗？
单次 6.4 尚不需调整。建议连续记录 7 天空腹值，若均值 > 7.0 请复诊。
💡每日 30 分钟中等强度运动可显著改善胰岛素敏感性。
列表项 14×16pt · 时间线节点 12pt
InfoTable · 数据表格（移动端适配）
| 指标 | 本次 | 参考区间 | 状态 |
|---|---|---|---|
| 空腹血糖 | 6.4 mmol/L | 3.9 – 6.1 | 偏高 |
| 糖化血红蛋白 | 5.8 % | 4.0 – 6.0 | 正常 |
| 低密度脂蛋白 | 4.2 mmol/L | < 3.4 | 超标 |
| 收缩压 | 142 mmHg | < 140 | 偏高 |
移动端表格最多 4 列；超出时改为「键值对列表」或横向滚动（需保留首列固定）。数值列右对齐并使用等宽数字。
规格
| 组件 | 关键尺寸 | 说明 |
|---|---|---|
| Card | 圆角 16pt，内边距 16pt，间距 12pt | 白底 + sm 阴影；暖色变体用于品牌区 |
| ListItem | 行高 56–64pt，内边距 14×16pt | 左侧图标/头像 + 主副标题 + 右侧值/状态/箭头 |
| ChatBubble | 最大宽 78%，圆角 18pt | 对方左下角 6pt、自己右下角 6pt |
| ProgressBar | 高 8pt（细 4pt），圆角 full | 填充 600ms ease-out |
| ProgressRing | 直径 96pt，描边 8pt | 中心放主数值 + 辅助文字 |
| Timeline | 轴线 2pt，节点 12pt | 已完成节点实心主色，未完成空心 |
| MetricCard | 数值 34pt/700，标签 13pt | 数值用 Manrope + tabular-nums |
| GroupKPI | 数值 24pt/600，标签 12pt | 2–3 个等宽分栏，不换行 |
| StatusBadge | 高 24pt，圆点 6pt | 四态：ok / warn / bad / info |
| InfoTable | 行高 44pt，表头 12pt | 数值列右对齐 + 等宽数字 |
| InfoCapsule | 高 30pt，圆角 full | 浅蓝底 + 蓝色数值，用于摘要指标 |
| AdviceTip | 圆角 12pt，内边距 12×14pt | 浅绿底 + 绿勾/灯泡图标 |
| SectionTitle | 字号 19pt/700，装饰条 3×16pt | 左侧主色竖条 |
使用规则
- 任何检验数值必须同时给出单位与参考区间，缺一不可。
- 异常值不得只靠颜色区分，必须叠加文字（偏高/超标）或图标。
- 趋势色遵循「好为绿、坏为红」，指标方向相反的（血糖、血压）需反转语义。
- 卡片内最多承载 1 个主指标 + 1 组辅助指标，超出拆分为多张卡片。
- 长列表使用分页或虚拟滚动，单屏渲染节点不超过 50 个。