Initial commit: 健康管家 AI 健康陪伴助手
- Backend: .NET 10 Minimal API + EF Core + PostgreSQL - Frontend: Flutter + Riverpod + GoRouter + Dio - AI: DeepSeek LLM + Qwen VLM (OpenAI-compatible) - Auth: SMS + JWT (access/refresh tokens) - Features: AI chat, health tracking, medication management, diet analysis, exercise plans, doctor consultations, report analysis
This commit is contained in:
MingNian
967
健康管家-页面设计文档.md
Normal file
967
健康管家-页面设计文档.md
Normal file
@@ -0,0 +1,967 @@
|
||||
# 健康管家 — 页面设计文档
|
||||
|
||||
> 本文档逐一描述每个页面的布局、组件、交互、状态。配合需求规格文档 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 分钟" │
|
||||
└──────────────────────────────────┘
|
||||
```
|
||||
Reference in New Issue
Block a user