# 健康模块增强设计方案

> 日期: 2026-01-27
> 状态: 待实现

## 概述

本设计方案涵盖三个健康模块的功能增强：

1. **运动模块** - BMI 分析与目标达成预估
2. **饮食模块** - 营养建议区间与配餐推荐
3. **睡眠模块** - 睡眠预警与健康提示

## 设计决策

| 决策点 | 选择 | 理由 |
|-------|------|------|
| 目标设定方式 | 目标体重 | 用户更容易理解，系统反推 BMI |
| 达成预估计算 | 综合运动+饮食数据 | TDEE - 摄入 + 运动消耗，最精准 |
| 营养建议基准 | 基于用户 TDEE 动态计算 | 个性化推荐 |
| 睡眠预警阈值 | 固定阈值 | < 6h 不足，7-9h 理想 |
| 预警展示方式 | 卡片式提示 | 颜色区分状态，不打扰用户 |
| 配餐推荐范围 | 简单文字建议 | 根据营养缺口给出提示 |

## 设计风格

基于现有深色科技风格 + Dark Mode (OLED) 设计语言：

- **背景**: 深色渐变 `#0A0E27` → `#121212`
- **卡片**: `rgba(255,255,255,0.05)` 玻璃质感 + 微发光边框
- **字体**: Fira Code / Fira Sans（数据仪表盘风格）
- **强调色**:
  - 健康绿 `#10B981`
  - 警告橙 `#F59E0B`
  - 危险红 `#EF4444`
  - 信息蓝 `#3B82F6`

---

## 一、运动模块 - BMI 分析卡片

### 位置

运动概览页面统计卡片区域下方

### UI 结构

```
┌──────────────────────────────────────────────────────────────┐
│  BMI 健康分析                                    [设置目标 →] │
├──────────────────────────────────────────────────────────────┤
│                                                              │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐          │
│  │ 当前体重    │  │ 当前 BMI    │  │ BMI 状态    │          │
│  │   75.0      │  │   24.5      │  │  ● 偏重     │          │
│  │   kg        │  │             │  │  (24-27.9)  │          │
│  └─────────────┘  └─────────────┘  └─────────────┘          │
│                                                              │
│  ─────────────── BMI 刻度条 ───────────────                  │
│  [偏瘦 ][正常      ][偏重  ▲][肥胖    ]                      │
│   <18.5  18.5-24    24-28   >28                             │
│                                                              │
│  ┌────────────────────────────────────────────────────────┐ │
│  │  目标达成预估                                           │ │
│  │  ─────────────────────────────────────────────────     │ │
│  │  目标体重: 70.0 kg  →  目标 BMI: 22.9 (正常)           │ │
│  │  距离目标: -5.0 kg                                      │ │
│  │                                                         │ │
│  │  预估达成: 约 50 天                                     │ │
│  │  ────────────────────────────────────────────          │ │
│  │  计算依据: 近30天平均每日净消耗 350 卡                   │ │
│  │  (TDEE 1800 - 摄入 1650 + 运动 200 = 350 卡/天)         │ │
│  └────────────────────────────────────────────────────────┘ │
│                                                              │
│  提示: 健康减重建议每周 0.5-1 kg                             │
└──────────────────────────────────────────────────────────────┘
```

### BMI 状态颜色映射

| BMI 范围 | 状态 | 颜色 | CSS Class |
|---------|------|------|-----------|
| < 18.5 | 偏瘦 | 蓝色 | `text-blue-400` / `#60A5FA` |
| 18.5-24 | 正常 | 绿色 | `text-emerald-400` / `#34D399` |
| 24-28 | 偏重 | 橙色 | `text-amber-400` / `#FBBF24` |
| > 28 | 肥胖 | 红色 | `text-red-400` / `#F87171` |

### 计算逻辑

```python
# 每日净消耗
daily_deficit = TDEE - daily_intake + exercise_calories

# 预估天数 (7700 卡 ≈ 1 kg 脂肪)
estimated_days = (current_weight - target_weight) * 7700 / avg_daily_deficit
```

### 数据不足降级显示

当缺少必要数据时，显示引导用户完善信息的提示卡片。

---

## 二、饮食模块 - 营养建议区间

### 增强点

1. 营养成分分布图 - 添加 TDEE 推荐比例参考环
2. 餐次分布图 - 添加理想餐次比例参考
3. 近7天摄入趋势 - 添加每日建议摄入参考线
4. 新增营养差距卡片 - 显示今日缺口 + 配餐建议

### 1. 营养成分分布图（双环饼图）

```
外环: 用户实际摄入比例（实心）
内环: TDEE 计算的建议比例（虚线边框）

偏差提示:
- 绿色 = 达标
- 橙色 = 偏低/偏高
```

### 2. 餐次分布建议比例

| 餐次 | 建议比例 |
|-----|---------|
| 早餐 | 25-30% |
| 午餐 | 35-40% |
| 晚餐 | 25-30% |
| 加餐 | 0-10% |

### 3. 摄入趋势图参考线

```
虚线: 建议摄入上限（TDEE）
实线: 目标摄入（根据减重/增重目标调整）
绿色区域: 健康摄入区间
```

### 4. 营养差距与配餐建议卡片

```
┌────────────────────────────────────────────────────────────┐
│  今日营养状况                                              │
├────────────────────────────────────────────────────────────┤
│  ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐      │
│  │ 热量     │ │ 蛋白质   │ │ 碳水     │ │ 脂肪     │      │
│  │ 1420     │ │ 45g      │ │ 180g     │ │ 52g      │      │
│  │ /1800卡  │ │ /90g     │ │ /200g    │ │ /60g     │      │
│  │ ████░░   │ │ ███░░░   │ │ █████░   │ │ █████░   │      │
│  │ 79%      │ │ 50%      │ │ 90%      │ │ 87%      │      │
│  └──────────┘ └──────────┘ └──────────┘ └──────────┘      │
│                                                            │
│  ┌──────────────────────────────────────────────────────┐ │
│  │  晚餐建议                                             │ │
│  │  蛋白质缺口较大 (-45g)，建议晚餐增加:                  │ │
│  │  • 鸡胸肉 150g (+46g 蛋白质, 165 卡)                  │ │
│  │  • 或 鸡蛋 3 个 (+18g 蛋白质, 210 卡)                 │ │
│  │  • 或 豆腐 200g (+16g 蛋白质, 160 卡)                 │ │
│  └──────────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────────────┘
```

### TDEE 营养素计算公式

| 营养素 | 建议比例 | 计算方式 |
|-------|---------|---------|
| 蛋白质 | 20-30% | TDEE × 0.25 ÷ 4 (每克4卡) |
| 碳水 | 45-55% | TDEE × 0.50 ÷ 4 (每克4卡) |
| 脂肪 | 20-30% | TDEE × 0.25 ÷ 9 (每克9卡) |

---

## 三、睡眠模块 - 预警与提示

### 增强点

1. 睡眠状态评估卡片 - 根据近期睡眠时长显示健康状态
2. 睡眠不足警告 - 红色警示卡片，列出对身体的危害
3. 睡眠充足益处 - 绿色激励卡片，列出健康益处
4. 趋势图增强 - 添加健康睡眠区间参考带

### 状态阈值定义

| 睡眠时长 | 状态 | 颜色 | 显示卡片 |
|---------|------|------|---------|
| < 5h | 严重不足 | `#EF4444` 红色 | 警告卡片（强调） |
| 5-6h | 不足 | `#F59E0B` 橙色 | 警告卡片 |
| 7-9h | 理想 | `#10B981` 绿色 | 益处卡片 |
| > 9h | 过多 | `#3B82F6` 蓝色 | 提示卡片 |

### 1. 睡眠状态评估卡片

位于统计卡片下方，显示：
- 近 7 天平均睡眠时长
- BMI 式刻度条（偏少/不足/理想/过多）
- 当前状态与距理想的差距

### 2. 睡眠不足警告卡片

背景色: `#7F1D1D20`（深红半透明）

危害分类：
- **认知能力**: 注意力下降 40%、记忆力减退、决策能力受损
- **身体健康**: 免疫力下降、肥胖风险增加 33%、心血管疾病风险上升
- **情绪状态**: 焦虑抑郁风险增加、情绪波动大、压力耐受力降低
- **运动表现**: 反应速度下降、肌肉恢复减慢、受伤风险增加

### 3. 睡眠充足益处卡片

背景色: `#065F4620`（深绿半透明）

益处分类：
- **认知提升**: 记忆巩固增强、专注力提高、创造力活跃
- **身体修复**: 免疫系统强化、肌肉组织修复、激素分泌平衡
- **情绪稳定**: 情绪调节能力增强、压力抵抗力提升、心态积极
- **运动增益**: 运动表现提升 15%、恢复速度加快、耐力增强

### 4. 趋势图增强

- 绿色半透明带：7-9 小时理想睡眠区间
- 理想区间内的点用绿色，区间外用橙色/红色
- 底部增加统计：理想天数/不足天数占比

---

## 技术实现要点

### 前端修改文件

- `src/vitals/web/app.py` - 运动/饮食/睡眠页面 HTML 模板

### 后端新增 API

| API | 功能 |
|-----|------|
| `GET /api/bmi/analysis` | 获取 BMI 分析数据 |
| `GET /api/nutrition/recommendations` | 获取营养建议 |
| `GET /api/sleep/assessment` | 获取睡眠评估 |

### 数据依赖

- 用户配置：身高、体重、年龄、性别、活动水平、目标体重
- 运动记录：近 30 天运动消耗
- 饮食记录：近 30 天摄入数据
- 睡眠记录：近 7/30 天睡眠时长

---

## 预交付检查清单

- [ ] 无 emoji 作为图标（使用 SVG: Heroicons/Lucide）
- [ ] 所有可点击元素添加 `cursor-pointer`
- [ ] Hover 状态使用平滑过渡（150-300ms）
- [ ] 深色模式文字对比度 4.5:1 以上
- [ ] 键盘导航焦点状态可见
- [ ] 响应式适配：375px, 768px, 1024px, 1440px