40 KiB
40 KiB
健康管家 — 页面设计文档
本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 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 分钟" │
└──────────────────────────────────┘
当前实现状态（2026-06-11）
色彩系统
| 用途 | 色值 |
|---|---|
| 主色（紫） | #8B5CF6 |
| 浅紫 | #A78BFA |
| 背景渐变 | #F0ECFF → #EBF4FF（紫→蓝，左→右） |
| 卡片白 | #FFFFFF |
| 文字主色 | #1F2937 |
| 文字辅色 | #6B7280 |
| 文字提示 | #9CA3AF |
| 成功绿 | #10B981 |
| 错误红 | #EF4444 |
| 警告橙 | #F59E0B |
| 蓝色（测量/发送按钮） | #3B82F6 |
智能体专属渐变色：
| 智能体 | 主色 | 配色 |
|---|---|---|
| 记数据 | 绿 #5FB88D |
#B8E6CF → #5FB88D |
| 拍饮食 | 橙 #F0A060 |
#FFD8B8 → #F0A060 |
| 药管家 | 青绿 #68B8AC |
#B8E0D8 → #68B8AC |
| 问诊 | 蓝 #7B98E0 |
#C5D5F8 → #7B98E0 |
| 报告分析 | 紫 #A898D8 |
#D8D0F0 → #A898D8 |
| 运动 | 青 #68B4B4 |
#B8E0E0 → #68B4B4 |
圆角规范：
- 主卡片 28px，子卡片 20px，按钮 16-20px，胶囊/标签 10-18px
已实现页面
1. 登录页
- 手机号+验证码登录（登录即注册）
- 白底+紫蓝渐变外框输入框，无 focus 内框
- 白底紫字登录按钮
- 开发阶段验证码任意6位
2. 首页（对话页）
- 顶部：智能体胶囊横排（6个），白底深色字，阴影
- 左上：抽屉菜单图标（无背景，融入顶栏）
- 右上：消息通知
- 对话流：从上到下排列，新消息出现在底部
- 底部输入栏：+号附件按钮（拍照/相册/文件），圆角输入框，蓝紫渐变发送按钮
- 今日健康卡片：在对话顶部，分3栏（健康指标→运动→用药），健康指标汇总一行（异常提醒/正常显示），用药显示具体药品名+状态
- 确认卡片：从下方滑入+淡入动画(600ms)，白色卡片，主数据展示区+字段列表+确认按钮
3. 欢迎卡片（各智能体）
- 每个智能体独立配色（图标渐变+装饰条+底部提示）
- 功能特性区：有图片显示图片（带渐变外框），无图片显示图标卡片网格
- 快捷操作按钮：横向排列
- 底部提示：每个智能体专属引导文案
- 问诊专属：医生选择卡片（3位医生）
4. 侧边栏（Drawer）
- 个人信息+昵称+手机号
- 健康仪表盘：5项指标小卡片（血压/心率/血糖/血氧/体重）
- 功能：报告管理/健康日历/饮食记录/复查随访
- VIP服务：服务包卡片（心血管/心力衰竭两种）
- 保险栏：待上线，显示"即将上线"
- 退出登录按钮
5. 饮食分析页
- 暖橙主题配色（
#FFFBF7底，#F0A060强调） - 图片自适应（220px 高）
- 餐次选择：emoji+文字横排（早餐/午餐/晚餐/加餐）
- 识别结果：白色卡片，橙色装饰条，可编辑食物名/份量/热量
- 营养摘要：环形进度条+宏量元素条（碳水/蛋白/脂肪）
- AI 点评：淡黄暖底色
- 保存按钮：暖橙色
6. 用药管理页
- 顶部 TabBar（全部/服用中/已停药）
- 药品列表：白底药丸图标+药品名+剂量+时间
- 右滑删除
- 右下角 FAB ➕ 添加药品
- 添加/编辑用药：白底选择器（服药次数+时间），白底紫字保存按钮
7. 服药打卡页
- 按药品分组显示
- 打卡按钮：对号圆圈形式（灰→绿），与运动计划一致
- 支持撤回（点击已打卡取消）
8. 运动计划页
- 列表显示运动类型+时长+完成进度
- 打卡按钮：对号圆圈（灰→绿）
- 右滑删除计划
- 右下角 FAB 新建计划
9. 报告管理页
- 报告列表：白色卡片，白底紫色图标
- 标题：后端 VLM 自动识别类型（抽血化验单/心电图报告等），前端
_catTitle映射 - 删除按钮（确认弹窗）
- 右下角 FAB 上传（拍照/相册/PDF）
- 后端 DELETE 接口
10. 报告解读页（AI 智能解读）
- 三栏布局：指标分析 → 综合解读 → 医生审核意见
- 统一白色卡片+轻阴影
- 指标行：名称+参考值+状态图标（正常/偏高/偏低）
- 医生审核：未审核显示"待审核"，已审核显示医生留言
- 去掉了五颜六色的背景
11. 个人资料页
- 头像+昵称+手机号
- 信息卡片（姓名/手机号/健康档案）
- 白底图标，去紫色背景
- 退出登录按钮（红色描边）
- 去掉了蓝牙设备/健康档案/设置快捷入口
12. 设置页
- 白色圆角卡片样式菜单项（16px圆角+轻阴影）
- 消息通知/字体大小/清除缓存/关于/隐私协议
- 退出登录红字按钮
13. 蓝牙设备页
- 左上返回按钮
- 扫描血压计设备
14. 医生对话页
- 输入栏：与主页面一致（圆角容器+蓝紫色发送按钮）
- 右上角剩余次数：白底深色字
- 对话气泡：用户紫色/AI白底，支持 Markdown
15. 饮食记录列表
- 本地列表管理（删除不闪屏）
- 左滑删除，点击进详情
交互特性
- 流式输出：AI 回复逐字追加（最简实现，无 buffer/Timer/淡入动画）
- 卡片入场动画：欢迎卡片+确认卡片从下方滑入+淡入（600ms, easeOutCubic）
- 确认卡片：字段行横向排列（标签固定80px宽），可编辑字段支持点击修改
- Markdown 渲染：AI 消息使用 flutter_markdown 渲染，支持粗体/标题
- localhost + adb reverse：解决 IP 变动问题，手机通过 USB 转发连接电脑后端
后端接口
| 模块 | 接口 | 说明 |
|---|---|---|
| 健康数据 | POST /api/health/record | 录入健康指标 |
| GET /api/health/latest | 获取最新指标 | |
| 用药 | GET/POST/PUT/DELETE /api/medications | 用药 CRUD |
| POST /api/medications/{id}/confirm-dose | 服药打卡 | |
| 运动 | POST /api/exercise/plans | 创建运动计划 |
| POST /api/exercise/{id}/checkin | 运动打卡 | |
| 饮食 | POST /api/diet-records | 保存饮食记录 |
| GET /api/diet-records | 获取记录列表 | |
| 报告 | GET/POST /api/reports | 报告列表/上传 |
| DELETE /api/reports/{id} | 删除报告 | |
| AI | GET /api/ai/{agent}/chat (SSE) | AI 对话流 |
| POST /api/ai/analyze-food-image | 食物图片识别 |