1125 lines
40 KiB
Markdown
1125 lines
40 KiB
Markdown
# 健康管家 — 页面设计文档
|
||
|
||
> 本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 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 | 食物图片识别 |
|