AI-Health/健康管家-页面设计文档.md

# 健康管家 — 页面设计文档

> 本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 V2 和技术设计文档 V2 使用。

---
你是一名顶级移动端产品设计师和Flutter UI工程师。

不要设计功能。

不要思考业务。

只关注视觉表现。

==================================================

产品定位：

AI健康陪伴助手

不是：

医院系统

不是：

企业后台

不是：

健康管理工具

==================================================

视觉参考：

支付宝蚂蚁阿福

Apple Health

Headspace

Calm

==================================================

用户第一眼看到页面时必须觉得：

温暖

轻松

有陪伴感

有生命力

高级

可信赖

==================================================

不要出现：

后台管理系统感

表格感

数据中心感

医院感

安卓原生感

Material3默认感

==================================================

视觉关键词：

Soft

Friendly

Companion

Minimal

Premium

AI-first

==================================================

设计原则：

聊天优先于表单

卡片优先于列表

陪伴优先于工具

情感优先于数据

==================================================

页面整体留白必须充足。

不要塞满内容。

每个页面只保留最重要的信息。

==================================================

所有页面必须看起来像：

一个会关心用户的AI

而不是一个记录数据的软件。

==================================================

视觉密度：

低密度

大量留白

==================================================

圆角：

非常圆润

卡片24+

按钮20+

胶囊999

==================================================

颜色：

以浅紫色为核心

大面积白色

少量渐变

少量高饱和色

==================================================

阴影：

非常轻

几乎感受不到

==================================================

背景：

不是纯白

使用浅灰白

局部加入柔和渐变

==================================================

图标：

圆润

可爱

避免锐利线条

==================================================

所有页面必须符合：

Dribbble作品级别

Behance展示级别

而不是业务系统页面。

==================================================

最终目标：

用户第一眼认为：

“这是一个AI健康管家。”

而不是：

“这是一个健康管理APP。”



请把整个产品设计成：

支付宝阿福 × Apple Health × AI Companion。

用户打开App时，
感觉自己是在和一个关心自己的AI交流，

而不是在使用一个健康记录工具。
## P1. 登录页 `/login`

### 功能
手机号 + 验证码登录（登录即注册）

### 布局
```
┌──────────────────────────────────┐
│                                  │
│          🏥 健康管家              │  Logo + App 名称
│                                  │
│  ┌──────────────────────────────┐│
│  │ +86 │ 输入手机号...          ││  手机号输入框
│  └──────────────────────────────┘│
│                                  │
│  ┌────────────────┐ ┌──────────┐│
│  │ 输入验证码...   │ │ 获取验证码 ││  验证码输入框 + 发送按钮
│  └────────────────┘ └──────────┘│
│                                  │
│  ┌──────────────────────────────┐│
│  │        登   录               ││  主按钮（紫底白字）
│  └──────────────────────────────┘│
│                                  │
│  ☐ 已阅读并同意《服务协议》《隐私政策》│  协议勾选
│                                  │
└──────────────────────────────────┘
```

### 交互
- 输入手机号 → [获取验证码] 按钮亮起
- 点击 [获取验证码] → 倒计时 60 秒 → 按钮变灰
- 开发阶段：验证码输入任意 6 位数字即可
- 输入 6 位验证码 + 勾选协议 → [登录] 亮起
- 登录成功 → 跳转 `/home`
- 登录失败 → 红色提示文字

### 状态
| 状态 | 显示 |
|------|------|
| 正常 | 如上 |
| 手机号格式错误 | "请输入正确的手机号" |
| 验证码错误 | "验证码错误，请重新输入" |
| 网络错误 | "网络连接失败，请检查网络" |
| 加载中 | [登录] 按钮显示 loading 动画 |

---

## P2. 首页 `/home`

### 功能
App 主界面，包含对话流、任务卡片区、Agent 面板、输入框、侧滑抽屉

### 布局
```
┌──────────────────────────────────┐
│ ☰                              ←│  顶部：左侧菜单按钮 → 抽屉
│                                  │
│ ┌ 任务卡片区（可折叠）───────────┐│
│ │ 💊 计划8:00吃阿司匹林  [✓]   ││  用药提醒卡片
│ │ 🏃 今日待运动：散步30分钟 [✓]  ││  运动打卡卡片
│ │ 🩺 今日待测量：血压           ││  指标测量提醒
│ └──────────────────────────────┘│
│                                  │
│ ┌ 对话流 ───────────────────────┐│
│ │                                ││
│ │  AI: 早上好！昨天心率105...    ││  AI 气泡（白底紫左边框）
│ │                                ││
│ │             用户: 血压135/85  ││  用户气泡（紫底白字右对齐）
│ │                                ││
│ │  AI: 收到！已记录血压 135/85 ✅││
│ │                                ││
│ └────────────────────────────────┘│
│                                  │
│ ┌ Agent 面板（点击胶囊后出现）───┐│  ← 仅当有激活的 Agent 时显示
│ │ [手动录入血压] [手动录入血糖]  ││
│ │ ...                            ││
│ └────────────────────────────────┘│
│                                  │
├──────────────────────────────────┤
│ [胶囊1][胶囊2][胶囊3]...[胶囊6]  │  智能体胶囊栏（横向滑动）
├──────────────────────────────────┤
│ [📎] │ 输入你想说的...    │ [📤] │  输入框（系统键盘语音）
└──────────────────────────────────┘
```

### 组件树
```
HomePage (Scaffold)
  ├── Drawer (HealthDrawer)
  ├── Body: Column
  │    ├── TaskCardArea (可折叠)
  │    │    ├── MedicationCard
  │    │    ├── ExerciseCard
  │    │    └── MeasurementCard
  │    ├── Expanded: ChatMessagesView (ListView.builder)
  │    │    ├── ChatBubble (AI)
  │    │    ├── ChatBubble (User)
  │    │    ├── DataConfirmCard
  │    │    ├── DietResultCard
  │    │    ├── MedicationConfirmCard
  │    │    ├── ReportCard
  │    │    └── QuickOptionsRow
  │    └── AgentPanel (AnimatedContainer, 条件显示)
  ├── Bottom: Column
  │    ├── AgentBar (SingleChildScrollView horizontal)
  │    │    └── CapsuleButton × 6
  │    └── InputBar
  │         ├── AttachButton (📎)
  │         ├── TextField
  │         └── SendButton (📤)
```

### 交互
- 输入消息 → [📤] 发送 → 消息上屏 → SSE 流式返回 → AI 逐字显示
- 点击胶囊 → 胶囊高亮 → AgentPanel 出现 → 对话切换到该 Agent
- 再次点击同一胶囊 → 胶囊恢复 → AgentPanel 消失 → 对话回到默认
- 向上滑动对话流 → 任务卡片区自动折叠
- 任务卡片 ✓ 点击 → 快捷打卡
- 左上角菜单 → 打开侧滑抽屉

### 状态
| 状态 | 显示 |
|------|------|
| 首次打开（零数据） | AI 问候语 + 引导建档 |
| 正常有数据 | AI 问候（带异常提醒） + 任务卡片 |
| SSE 流式中 | AI 气泡逐字增长 + Tool Calling 中间提示 |
| 网络错误 | 全屏"无网络连接" |
| 无任务卡片 | 卡片区不显示，对话流占满 |

---

## P3. 侧滑抽屉（HealthDrawer）

### 功能
不跳转页面，从左侧滑出的抽屉面板

### 布局
```
┌──────────────┬──────────────────┐
│              │                  │
│  👤 张三      │  点击 → P12     │
│  冠心病支架术后│  个人中心       │
│              │                  │
│  ⚙️ 设置     │  点击 → P17     │
│              │                  │
│  ❤️ 血压 128/82                │  最新测量值
│  💓 心率 72                     │  未测显示 "--"
│  💉 血糖 5.2                    │
│  🫁 血氧 98%                    │
│              │                  │
│  📋 历史对话                    │
│  05-31  血压咨询 + 胸闷         │  日期 + 摘要
│  05-30  饮食分析                │
│  05-28  用药调整                │
│  ...                            │
│              │                  │
│  [退出登录]                     │
└──────────────┴──────────────────┘
```

### 交互
- 点击头像 → 跳转 P12 个人中心
- 点击设置 → 跳转 P17 设置
- 点击最新指标 → 跳转 P4 趋势图表
- 点击历史对话 → 加载该对话到首页对话流
- 退出登录 → 确认弹窗 → 清除 token → 跳转 P1

---

## P4. 趋势图表页 `/trend/:type`

### 功能
查看某个健康指标的历史趋势曲线

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    血压趋势               │  顶栏
├──────────────────────────────────┤
│  [7天] [30天] [90天]             │  时间切换
├──────────────────────────────────┤
│                                  │
│   📈 折线图                      │  血压：双轴（收缩压+舒张压）
│                                  │  其他：单轴
│   支持双指缩放、滑动              │
│                                  │
├──────────────────────────────────┤
│ 最近 7 天                        │
│ 05/31  128/82  ✅               │  数据列表
│ 05/30  135/85  ⚠️ 偏高          │
│ 05/29  --      未测量            │
│ ...                              │
└──────────────────────────────────┘
```

### 状态
| 状态 | 显示 |
|------|------|
| 有数据 | 折线图 + 数据列表 |
| 数据不足（<2条） | "暂无足够数据生成趋势图" |
| 从未测量 | "--" + 引导去记数据 |

---

## P5. 健康日历页 `/calendar`

### 功能
月视图日历，标记用药/运动/复查

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    2026年6月              │  顶栏 + 月份切换
├──────────────────────────────────┤
│  一  二  三  四  五  六  日       │
│              1   2   3   4        │
│  5   6   7   8   9   10  11       │
│  ...                             │
│            💊  💊         📋      │  用药=紫点 运动=绿点 复查=黄标记
│                                  │
├──────────────────────────────────┤
│ 6月3日                           │  当日摘要
│ 💊 阿司匹林 ✓                    │
│ 🏃 散步30分钟 ✓                  │
│ 🩺 血压 128/82                   │
└──────────────────────────────────┘
```

---

## P6. 用药列表页 `/medications`

### 功能
查看当前用药计划

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    我的用药               │
├──────────────────────────────────┤
│ 💊 阿司匹林 100mg                │  每条药品卡片
│    每天 08:00  早饭后             │  点击 → P7 编辑
│    2026/05/01 - 长期              │
│    来源：处方                     │
│    [✓ 今日已打卡]                │
├──────────────────────────────────┤
│ 💊 阿托伐他汀 20mg               │
│    每天 20:00  晚饭后             │
│    来源：AI 录入                  │
│    [○ 待打卡]                    │
├──────────────────────────────────┤
│ [+ 添加药品]                     │  跳转 P7 新建
└──────────────────────────────────┘
```

### 空状态
```
┌──────────────────────────────────┐
│         💊                       │
│    暂无用药计划                   │
│  可通过AI对话或手动添加          │
│    [去药管家]                    │
└──────────────────────────────────┘
```

---

## P7. 编辑用药页 `/medications/:id/edit`

### 功能
新增/修改用药计划

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    添加药品 / 编辑药品    │
├──────────────────────────────────┤
│ 药品名称  [_______________]      │
│ 剂量      [______]  mg/片/粒    │
│ 服药时间  [08:00] [20:00]       │  支持多个时间
│          [+ 添加时间]            │
│ 起始日期  [2026/06/01]          │
│ 结束日期  [长期]                │
│                                │
│ [删除该药品]  [保存]            │
└──────────────────────────────────┘
```

---

## P8. 报告列表页 `/reports`

### 功能
查看已上传的报告

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    我的报告               │
├──────────────────────────────────┤
│ 📋 血常规 2026/05/28             │
│    状态：医生已确认 ✅            │
│                                  │
│ 📋 心电图 2026/05/15             │
│    状态：待医生确认 ⏳            │
│                                  │
│ 📋 出院小结 2026/05/01           │
│    状态：医生已确认 ✅            │
└──────────────────────────────────┘
```

### 空状态
```
┌──────────────────────────────────┐
│         📋                       │
│     暂无报告                      │
│  可到「看报告」上传              │
└──────────────────────────────────┘
```

---

## P9. 报告详情页 `/reports/:id`

### 功能
查看报告 AI 解读 + 原始图片

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    报告详情               │
├──────────────────────────────────┤
│ 报告类型：血常规                  │
│ 上传时间：2026/05/28 14:30       │
│ 状态：⏳ 待医生确认               │
├──────────────────────────────────┤
│ AI 预解读结果                     │
│                                  │
│ 指标列表：                        │
│ 白细胞   8.5×10⁹/L  正常 ✅     │
│ 红细胞   4.2×10¹²/L 正常 ✅     │
│ 血红蛋白 105 g/L     偏低 ⚠️    │
│ ...                              │
│                                  │
│ AI 分析：血红蛋白略偏低...         │
│ ⚠️ AI 预解读，待医生确认          │
├──────────────────────────────────┤
│ [查看原始图片]                    │
└──────────────────────────────────┘
```

---

## P10. 医生列表页 `/doctors`

### 功能
选择要咨询的医生

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    选择医生               │
│         本月剩余 3 次             │
├──────────────────────────────────┤
│ 👨‍⚕️ 王建国  主任医师            │  医生卡片
│    心血管内科                     │
│    擅长冠心病术后管理             │
│    [咨询王主任]                   │
├──────────────────────────────────┤
│ 👩‍⚕️ 李芳  副主任医师            │
│    营养科                         │
│    擅长术后营养指导               │
│    [咨询李主任]                   │
└──────────────────────────────────┘
```

---

## P11. 问诊对话页 `/consultation/:id`

### 功能
患者与医生的文字聊天（含 AI 分身对话）

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    王建国 主任            │
│    以上为AI分身回复              │  医生未亲自回复时的提示
├──────────────────────────────────┤
│                                  │
│  AI分身: 根据您的描述...          │  AI 分身气泡
│  以上为AI分析，具体请咨询王主任   │
│                                  │
│  患者: 我最近两天胸口有点闷       │
│                                  │
│  医生: 持续多久了？做过什么检查？ │  医生亲自回复
│                                  │
├──────────────────────────────────┤
│ │ 输入消息...              │ [📤] │
└──────────────────────────────────┘
```

### 状态
| 状态 | 显示 |
|------|------|
| AI 分身对话中 | 回复末尾标注 AI 免责声明 |
| 医生已读未回 | "医生已读" |
| 医生已回复 | 正常消息气泡 |
| 问诊已结束 | 输入框锁定，显示"本次问诊已结束" |
| 问诊配额用完 | 显示"本月问诊次数已用完" |

---

## P12. 个人中心页 `/profile`

### 功能
用户信息 + 功能菜单

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    个人中心               │
├──────────────────────────────────┤
│  👤 张三                         │
│     冠心病支架术后 12周           │
│     138****1234                  │
│                         [编辑]   │  跳转 P13
├──────────────────────────────────┤
│  📋 健康档案              >      │  跳转 P14
│  📱 设备管理              >      │  跳转占位页
│  🔔 通知偏好              >      │  跳转 P18
│  ⚙️ 设置                  >      │  跳转 P17
│  ❓ 关于                  >      │  跳转 P19
│  🚪 退出登录              >      │  确认弹窗
└──────────────────────────────────┘
```

---

## P13. 编辑资料页 `/profile/edit`

### 功能
修改个人基本信息

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    编辑资料               │
├──────────────────────────────────┤
│ 头像      [👤 点击更换]          │
│ 姓名      [张三____________]     │
│ 性别      [男] [女]              │
│ 出生日期  [1970-03-15]          │
│ 手机号    138****1234（不可改）   │
│                                  │
│ [保存]                           │
└──────────────────────────────────┘
```

---

## P14. 健康档案页 `/health-archive`

### 功能
查看和编辑完整健康信息

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    健康档案         [编辑] │
├──────────────────────────────────┤
│ 📋 基本信息                       │
│   姓名：张三  性别：男            │
│   出生：1970-03-15                │
│   身高：170cm  体重：72kg         │
├──────────────────────────────────┤
│ 🩺 诊断信息                       │
│   主要诊断：冠心病                 │
│   手术类型：PCI支架植入术          │
│   手术日期：2026-03-15             │
├──────────────────────────────────┤
│ 🏥 病史与限制                     │
│   过敏史：无                      │
│   饮食限制：低盐 低脂              │
│   慢性病史：高血压 高血脂          │
│   家族病史：父亲冠心病             │
├──────────────────────────────────┤
│ 📊 健康数据（本周平均）            │
│   血压 130/82  心率 74            │
│                       [查看趋势]  │
├──────────────────────────────────┤
│ 📋 检查报告  3份          [查看]  │
│ 💊 当前用药  2种          [查看]  │
│ 🎯 运动计划  进行中       [查看]  │
└──────────────────────────────────┘
```

### 交互
- 点击 [编辑] → 各字段变为可编辑状态
- 点击各功能入口 → 跳转对应页面
- AI 对话中了解到的信息自动填充到对应字段

---

## P15. 饮食记录列表页 `/diet-records`

### 功能
按日期查看历史饮食记录

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    饮食记录               │
├──────────────────────────────────┤
│ 2026-06-01                       │  按日期分组
│  🍽️ 午餐  644千卡  ★★★☆☆       │
│    米饭 1碗 | 红烧肉 5块          │
│                                  │
│ 2026-05-31                       │
│  🍽️ 晚餐  520千卡  ★★★★☆       │
│    面条 1碗 | 青菜 1份            │
│  🍽️ 午餐  380千卡  ★★★★☆       │
│    三明治 1个                     │
└──────────────────────────────────┘
```

### 空状态
```
┌──────────────────────────────────┐
│        🍽️                        │
│    暂无饮食记录                   │
│  可通过「拍饮食」或对话录入       │
└──────────────────────────────────┘
```

---

## P16. 运动计划页 `/exercise-plan`

### 功能
查看和编辑本周运动计划

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    运动计划               │
│          2026年 第23周            │
├──────────────────────────────────┤
│ 周一   散步 30分钟    ✅ 已完成    │  每日条目
│ 周二   慢跑 20分钟    ○ 待完成    │
│ 周三   游泳 30分钟    ○ 待完成    │
│ 周四   休息日                    │
│ 周五   散步 30分钟    ○ 待完成    │
│ 周六   休息日                    │
│ 周日   散步 30分钟    ○ 待完成    │
├──────────────────────────────────┤
│ [修改计划]  [本周已完成 1/5]      │
└──────────────────────────────────┘
```

### 空状态
```
┌──────────────────────────────────┐
│        🏃                        │
│    暂无运动计划                   │
│  可通过「运动计划」或对话创建     │
│    [创建计划]                     │
└──────────────────────────────────┘
```

---

## P17. 设置页 `/settings`

### 功能
App 设置

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    设置                   │
├──────────────────────────────────┤
│ 隐私保护中心              >      │  P19 文本页
│ 通知偏好                  >      │  P18
│ 字体大小    ───●─────           │  滑动条 0.8x-1.6x
│ 协议与公告                >      │  P19 文本页
│ 关于                      >      │  P19 文本页
│                                  │
│ [退出登录]                       │  确认弹窗
│ [注销账号]                       │  二次确认 + 清数据
└──────────────────────────────────┘
```

---

## P18. 通知偏好页 `/settings/notifications`

### 功能
各类型推送独立开关

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    通知偏好               │
├──────────────────────────────────┤
│ 💊 用药提醒               [🔘]   │  开关
│ 📋 复查提醒               [🔘]   │
│ 💬 医生回复               [🔘]   │
│ ⚠️ 异常警告               [🔘]   │
└──────────────────────────────────┘
```

---

## P19. 静态文本页 `/page/:type`

### 功能
展示隐私政策 / 服务协议 / 关于

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    隐私政策               │  标题随 type 变化
├──────────────────────────────────┤
│                                  │
│  纯文本内容（后期填充）           │
│                                  │
└──────────────────────────────────┘
```

---

## P20. 复查列表页 `/followups`

### 功能
查看复查/随访安排

### 布局
```
┌──────────────────────────────────┐
│ ← 返回    复查随访               │
├──────────────────────────────────┤
│ 即将到来                          │
│ 📋 心内科复查  06/05 15:00       │
│    地点：市一医院 3楼             │
│    提醒：后天                      │
├──────────────────────────────────┤
│ 已完成                            │
│ ✅ 术后3周复查  04/05             │
│ ✅ 术后6周复查  04/26             │
└──────────────────────────────────┘
```

### 空状态
```
┌──────────────────────────────────┐
│        📋                         │
│    暂无复查安排                   │
│  医生端创建后自动同步             │
└──────────────────────────────────┘
```

---

## 页面汇总

| # | 路由 | 页面 | 类型 |
|---|------|------|------|
| 1 | `/login` | 登录页 | 独立页面 |
| 2 | `/home` | 首页（含抽屉+面板+胶囊栏） | 独立页面 |
| 3 | — | 侧滑抽屉 | 组件（非页面） |
| 4 | `/trend/:type` | 趋势图表 | 独立页面 |
| 5 | `/calendar` | 健康日历 | 独立页面 |
| 6 | `/medications` | 用药列表 | 独立页面 |
| 7 | `/medications/:id/edit` | 编辑用药 | 独立页面 |
| 8 | `/reports` | 报告列表 | 独立页面 |
| 9 | `/reports/:id` | 报告详情 | 独立页面 |
| 10 | `/doctors` | 医生列表 | 独立页面 |
| 11 | `/consultation/:id` | 问诊对话 | 独立页面 |
| 12 | `/profile` | 个人中心 | 独立页面 |
| 13 | `/profile/edit` | 编辑资料 | 独立页面 |
| 14 | `/health-archive` | 健康档案 | 独立页面 |
| 15 | `/diet-records` | 饮食记录列表 | 独立页面 |
| 16 | `/exercise-plan` | 运动计划 | 独立页面 |
| 17 | `/settings` | 设置 | 独立页面 |
| 18 | `/settings/notifications` | 通知偏好 | 独立页面 |
| 19 | `/page/:type` | 静态文本页 | 独立页面 |
| 20 | `/followups` | 复查列表 | 独立页面 |

**总计：20 个独立页面 + 1 个侧滑抽屉组件 + 6 个 Agent 面板组件**

---

## Agent 面板设计（首页内嵌，非独立页面）

### 默认对话（无面板）
只有对话流，无额外面板。

### 记数据面板
```
┌──────────────────────────────────┐
│ 📊 记数据                        │
│ [手动录入血压] [手动录入血糖]    │  快捷按钮
│ [手动录入心率] [手动录入血氧]    │
│ [手动录入体重]                   │
│                                  │
│ 或直接对我说：                   │
│ "血压 135/85"                   │
└──────────────────────────────────┘
```

### 拍饮食面板
```
┌──────────────────────────────────┐
│ 📸 拍饮食                        │
│ [拍照] [上传照片]（支持多张）    │
│                                  │
│ 或直接对我说：                   │
│ "中午吃了牛肉面"                 │
└──────────────────────────────────┘
```

### 药管家面板
```
┌──────────────────────────────────┐
│ 💊 药管家                        │
│ [用药管理] [用药提醒]            │
│                                  │
│ 或直接对我说：                   │
│ "医生让我吃阿托伐他汀 20mg"      │
└──────────────────────────────────┘
```

### AI 问诊面板
```
┌──────────────────────────────────┐
│ 🩺 AI 问诊                       │
│ [找医生]                         │
│                                  │
│ 或直接对我说你的症状              │
└──────────────────────────────────┘
```

### 看报告（无面板）
点击直接调起相机/文件选择器，不弹出面板。

### 运动计划面板
```
┌──────────────────────────────────┐
│ 🏃 运动计划                      │
│ [查看本周计划] [创建新计划]      │
│                                  │
│ 或直接对我说：                   │
│ "我想每周一三五散步 30 分钟"     │
└──────────────────────────────────┘
```