后端: - User表加Role字段 + DoctorProfile表 + 废弃旧Doctor数据 - JWT加Role claim + 注册/登录拆分(/api/auth/register + /api/auth/login) - 医生端点全量加JWT鉴权+Role校验(15个端点) - 日历端点改造(用药/运动/随访按日期+星期匹配) - 饮食记录PUT端点 + 健康记录DELETE端点 - 用户Profile端点返回Role 前端: - 登录页重做(角色选择卡片 用户紫/医生蓝 + 审核码6666 + 注册返登录) - App路由分流(userRole→患者端/医生端) - 医生端: 工作台Dashboard + 患者管理(搜索分页) + 问诊/报告/随访CRUD - 报告审核: AI预分析+指标表格+严重程度4级+模板多选+评语 - 随访编辑: 患者选择器+日期时间+打通患者端 - 健康日历: 可点击日历+当日安排列表+用药/运动/随访颜色标记 - 饮食记录: 热量趋势7/30天+日历(一周)+当日胶囊详情+侧滑编辑删除 - 健康档案: 日期选择器+手术可添加多条+白底渐变保存按钮 - 配色系统: 清理25个未使用色+新增doctorBlue/drawerGradient/pageGrey - 患者端侧边栏: 新渐变+白底按钮+紫色汉堡图标 - AI对话: 用户气泡白底黑字+药管家改蓝色 - App启动闪屏: 防登录页闪烁 文档: color_design_system.md(20页面完整配色设计+图标底色对照表)
42 KiB
42 KiB
健康管家 — 配色设计文档 v3.0
2026-06-12 更新:清理未使用色,新增医生端色系,全面页面配色拆解
0. AppColors 色彩表(定义在 app_colors.dart)
主色
| 常量 | 色号 | 色块 | 用途 |
|---|---|---|---|
primary |
#8B5CF6 |
🟣🟣🟣🟣🟣 | 用户端主紫 |
primaryLight |
#A78BFA |
🟣 | 浅紫/渐变 |
primaryDark |
#7C3AED |
🟣 | 深紫/按下 |
doctorBlue |
#0891B2 |
🔵 | 医生端主色 |
背景
| 常量 | 色号 | 色块 | 用途 |
|---|---|---|---|
background |
#F0ECFF |
⬜ | 患者端页面底 |
cardBackground |
#FFFFFF |
⬜ | 卡片白 |
cardInner |
#F5F2FF |
⬜ | 卡片内底 |
pageGrey |
#F5F5F5 |
⬜ | 医生端页面底 |
iconBg |
#E8E0FA |
⬜ | 图标底 |
avatarBg |
#F0F0FF |
⬜ | 头像底 |
文字
| 常量 | 色号 | 色块 | 用途 |
|---|---|---|---|
textPrimary |
#1F2937 |
⬛⬛⬛ | 主文字 |
textSecondary |
#6B7280 |
⬛⬛ | 副文字 |
textHint |
#9CA3AF |
⬛ | 提示 |
textOnGradient |
#FFFFFF |
⬜ | 渐变上白色文字 |
边框
| 常量 | 色号 | 色块 |
|---|---|---|
border |
#E5E7EB |
⬜ |
borderLight |
#F3F4F6 |
⬜ |
功能色
| 常量 | 色号 | 色块 | 含义 |
|---|---|---|---|
success |
#10B981 |
🟢 | 成功/正常/绿色 |
successLight |
#D1FAE5 |
🟢 | 成功浅底 |
error |
#EF4444 |
🔴 | 错误/异常/红色 |
errorLight |
#FEE2E2 |
🔴 | 错误浅底 |
warning |
#F59E0B |
🟡 | 警告/待定 |
warningLight |
#FEF3C7 |
🟡 | 警告浅底 |
blueMeasure |
#3B82F6 |
🔵 | 指标蓝色 |
渐变
| 常量 | 方向 | 色值 |
|---|---|---|
primaryGradient |
上→下 | #8B5CF6 → #A78BFA |
bgGradient |
左→右 | #F0ECFF → #EBF4FF (4:6比例) |
1. 登录页 (login_page.dart)
┌──────────────────────────────────┐
│ │
│ [❤] 图标 │ color: _accent (用户=primary, 医生=doctorBlue)
│ 健康管家 │ color: textPrimary
│ 登录你的账号 │ color: textSecondary
│ │
│ ┌──────────────────────────┐ │
│ │ [用户] │ [医生] │ │ 选中: 对应_accent背景+白字
│ │ 用户卡 │ 医生卡 │ │ 未选中: 白底+textPrimary字+border边框
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │ 背景: #F5F5F5
│ │ 手机号 │ │ 文字: textPrimary
│ └──────────────────────────┘ │ 提示: textHint
│ │
│ ┌─────────────────┐ ┌──────┐ │
│ │ 验证码 │ │获取 │ │ 左侧同手机号
│ └─────────────────┘ │验证码│ │ 按钮: _accent底+白字
│ └──────┘ │ 倒计时: #F5F5F5底+_accent字
│ │
│ ┌──────────────────────────┐ │ 仅注册+医生时显示
│ │ 医生审核码 │ │ 同手机号样式
│ └──────────────────────────┘ │
│ │
│ ☑ 已阅读并同意《服务协议》 │ 未勾选: 白+border边框
│ 和《隐私政策》 │ 已勾选: _accent底+白勾
│ │
│ ┌──────────────────────────┐ │
│ │ 登 录 / 注 册 │ │ 按钮: _accent底+白字
│ └──────────────────────────┘ │
│ │
│ 没有账号?去注册 / 已有账号? │ color: _accent
│ │
└──────────────────────────────────┘
大背景: #FFFFFF (白色)
| 区域 | 背景色 | 文字色 | 边框色 |
|---|---|---|---|
| 页面底 | #FFFFFF |
— | — |
| 输入框 | #F5F5F5 |
textPrimary |
无 |
| 角色卡片(选中) | primary或doctorBlue |
#FFFFFF |
同背景 |
| 角色卡片(未选中) | #FFFFFF |
textPrimary |
border (#E5E7EB) |
| 获取验证码按钮 | _accent |
#FFFFFF |
无 |
| 主按钮 | _accent |
#FFFFFF |
无 |
| 协议链接 | 透明 | _accent |
— |
2. 患者端首页 (home_page.dart)
┌──────────────────────────────────┐
│ ☰ 健康管家 ⚙ │ AppBar: 紫底渐变(navGradient?)
│ │
│ [AI对话区域] │
│ ┌──────────────────────────┐ │
│ │ 患者消息(右) │ │ 气泡: primary底+白字
│ │ AI消息(左) │ │ 气泡: cardBackground+textPrimary
│ │ 医生消息(左) │ │ 气泡: #FEFEFF+ #D8DCFD边框
│ └──────────────────────────┘ │
│ │
│ ┌──────────────────────────┐ │
│ │ 输入框 [发送]│ │ 输入: background底+textPrimary
│ └──────────────────────────┘ │ 发送: blueMeasure(可用时)
│ │
└──────────────────────────────────┘
大背景: bgGradient (紫→蓝横向渐变)
| 区域 | 背景色 | 文字色 | 边框色 |
|---|---|---|---|
| 页面底 | bgGradient 渐变 |
— | — |
| 用户气泡 | primary |
#FFFFFF |
无 |
| AI气泡 | cardBackground |
textPrimary |
#E2E8F0 |
| 医生气泡 | #FEFEFF |
textPrimary |
#D8DCFD |
| 输入栏 | background |
textPrimary |
无 |
3. 侧边抽屉 — 患者端 (health_drawer.dart)
┌──────────────────────────┐
│ [头像] 用户名 │ bg: transparent(融入bgGradient)
│ 手机号 [设置] │
│ │
│ ┌────────┐ ┌────────┐ │
│ │🔵蓝牙 │ │📁档案 │ │ 白底 + #C8DDFD 边框
│ └────────┘ └────────┘ │
│ │
│ ┌ 健康仪表盘 ────────┐ │
│ │ 血压 心率 血糖 血氧 体重│ 白底 + #C8DDFD 边框
│ └────────────────────┘ │
│ │
│ ┌ 功能 ──────────────┐ │
│ │ 报告 日历 饮食 随访 │ │ 白底 + #C8DDFD 边框
│ └────────────────────┘ │
│ │
│ ┌ VIP服务 ──────────┐ │
│ └────────────────────┘ │ 白底 + #C8DDFD 边框
│ │
│ ┌ 保险 ────────────┐ │
│ └────────────────────┘ │ 白底 + #C8DDFD 边框
└──────────────────────────┘
大背景: bgGradient
| 区域 | 背景色 | 文字色 | 边框 |
|---|---|---|---|
| 抽屉底 | bgGradient |
— | — |
| 信息区 | transparent | textPrimary/textSecondary |
无 |
| 分类卡片 | cardBackground (#FFF) |
— | #C8DDFD (1.5px) |
| 分类标题 | primaryGradient 紫渐变胶囊 |
#FFFFFF |
— |
4. 侧边抽屉 — 医生端 (doctor_drawer.dart)
┌──────────────────────────┐
│ ┌──────────────────────┐ │
│ │ [头像] │ │ bg: doctorBlue (#0891B2)
│ │ 医生姓名 │ │ 文字: #FFFFFF
│ │ 点击完善信息 │ │
│ └──────────────────────┘ │
│ │
│ 📊 工作台 │ 选中: doctorBlue字+doctorBlue淡底
│ 👥 患者管理 │ 未选中: textPrimary字+无色
│ 💬 问诊列表 │
│ 📋 报告审核 │
│ 📅 复查随访 │
│ ──────────────────────── │
│ ⚙ 设置 │
│ 🚪 退出登录 │
└──────────────────────────┘
大背景: #FFFFFF
| 区域 | 背景色 | 文字色 | 选中态 |
|---|---|---|---|
| 抽屉底 | #FFFFFF |
— | — |
| 头部 | doctorBlue |
#FFFFFF |
— |
| 菜单项(选中) | doctorBlue 8%透明 |
doctorBlue |
— |
| 菜单项(未选中) | transparent | textPrimary |
— |
| 头像 | #FFFFFF 24%透明 |
#FFFFFF |
— |
5. 医生工作台 (doctor_dashboard_page.dart)
┌──────────────────────────────────┐
│ ┌ 请完善个人信息 ───────────┐ │ bg: #E0F2FE, 字: doctorBlue
│ └────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 👥 患者 │ │ 💬 问诊 │ │ 统计卡片: 白底
│ │ 总数 N │ │ 进行中N │ │ 图标底: 各色10%透明
│ └──────────┘ └──────────┘ │
│ ┌──────────┐ ┌──────────┐ │
│ │ 📋 报告 │ │ 📅 随访 │ │
│ │ 待审核N │ │ 今日 N │ │
│ └──────────┘ └──────────┘ │
│ │
│ ┌ 待回复问诊 (N项) ────────┐ │ 白底, 绿色图标
│ │ 患者A 待回复 > │ │
│ │ 患者B 待回复 > │ │
│ └──────────────────────────┘ │
│ │
│ ┌ 待审核报告 (N项) ────────┐ │ 白底, 黄色图标
│ └──────────────────────────┘ │
│ │
│ ┌ 今日随访 (N项) ──────────┐ │ 白底, 红色图标
│ └──────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
| 卡片 | 图标色 | 卡底色 | 文字色 |
|---|---|---|---|
| 患者总数 | blueMeasure (#3B82F6) |
#FFFFFF |
textPrimary |
| 进行中问诊 | success (#10B981) |
#FFFFFF |
textPrimary |
| 待审核报告 | warning (#F59E0B) |
#FFFFFF |
textPrimary |
| 今日随访 | error (#EF4444) |
#FFFFFF |
textPrimary |
| 待回复问诊 | success |
#FFFFFF |
textPrimary |
| 待审核报告 | warning |
#FFFFFF |
textPrimary |
| 今日随访 | error |
#FFFFFF |
textPrimary |
6. 患者列表 (doctor_patients_page.dart)
┌──────────────────────────────────┐
│ ┌──────────────────────────────┐ │
│ │ 🔍 搜索患者姓名或手机号 │ │ 白底, 无边框, textPrimary
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ [头像] 张三 > │ │ 白底卡片, 14px圆角
│ │ 138xxxx │ │ 头像底: avatarBg (#F0F0FF)
│ └──────────────────────────────┘ │ 名字: textPrimary (16px 粗)
│ ┌──────────────────────────────┐ │ 手机: textHint (13px)
│ │ [头像] 李四 > │ │ 箭头: textHint
│ └──────────────────────────────┘ │
│ ... │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
| 区域 | 背景色 | 文字色 | 边框 |
|---|---|---|---|
| 搜索栏 | cardBackground (#FFF) |
textPrimary |
无 |
| 患者卡片 | cardBackground (#FFF) |
— | 无 |
| 头像 | avatarBg (#F0F0FF) |
primary |
无 |
| 名字 | — | textPrimary |
— |
| 副信息 | — | textHint |
— |
7. 患者详情 (doctor_patient_detail_page.dart)
┌──────────────────────────────────┐
│ ← 患者详情 │ 白底AppBar
│ │
│ ┌──────────────────────────────┐ │
│ │ [头像] 张三 │ │ 白底卡片
│ │ 138xxxx · 男 · 1990 │ │ 头像底: avatarBg (#F0F0FF)
│ └──────────────────────────────┘ │
│ │
│ ┌ 健康档案 ──────────────────┐ │
│ │ 诊断 高血压 │ │ 白底卡片
│ │ 手术史 心脏搭桥 2023-01 │ │ 标签: textHint (13px)
│ │ 过敏史 青霉素、头孢 │ │ 值: 14px
│ │ 慢病 糖尿病 │ │
│ │ 家族史 父亲高血压 │ │
│ └──────────────────────────────┘ │
│ │
│ ┌ 健康指标 ──────────────────┐ │
│ │ 血压 122/80 mmHg │ │ 白底卡片
│ │ 心率 72 次/分 │ │ 异常值: error 色
│ │ 血糖 5.6 mmol/L │ │
│ └──────────────────────────────┘ │
│ │
│ ┌ 当前用药 ──────────────────┐ │
│ │ 阿司匹林 100mg 每日 │ │ 白底卡片
│ └──────────────────────────────┘ │
│ │
│ ┌ 报告(N) ────┐ ┌ 随访(N) ────┐│ 入口卡片
│ └──────────────┘ └──────────────┘│
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
8. 问诊列表 (doctor_consultations_page.dart)
┌──────────────────────────────────┐
│ ┌──────────────────────────────┐ │
│ │ [头像] 患者A [AI中] │ │ 白底卡片, 圆角14
│ │ 最新消息预览... │ │ 头像: avatarBg
│ └──────────────────────────────┘ │ 状态标签: 各色10%底+对应色字
│ ┌──────────────────────────────┐ │
│ │ [头像] 患者B [等待医生] │ │ AI中: #6366F1
│ └──────────────────────────────┘ │ 等待医生: warning
│ ┌──────────────────────────────┐ │ 已回复: success
│ │ [头像] 患者C [已回复] │ │ 已关闭: textHint
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
9. 报告审核列表 (doctor_reports_page.dart)
┌──────────────────────────────────┐
│ [全部] [待审核] [已审核] │ 筛选标签: 选中=primary底+白字
│ │ 未选中=白底+border边框
│ ┌──────────────────────────────┐ │
│ │ 📋 患者A [待审核] │ │ 白底卡片, 圆角14
│ │ 血常规 · 2026-06-11 │ │ 图标: primary
│ └──────────────────────────────┘ │ 状态: warning/ success
│ ┌──────────────────────────────┐ │
│ │ 📋 患者B [已审核] │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
10. 报告审核详情 (doctor_report_detail_page.dart)
┌──────────────────────────────────┐
│ ← 报告审核 │
│ │
│ ┌──────────────────────────────┐ │
│ │ [头像] 患者A [待审核] │ │ 白底卡片
│ │ 血常规 · Image │ │ 头像: avatarBg
│ └──────────────────────────────┘ │
│ │
│ ┌ AI 预分析 ─────────────────┐ │
│ │ 摘要文字... │ │ 白底卡片, 左侧紫色竖条
│ └──────────────────────────────┘ │
│ │
│ ┌ 指标检测 ─────────────────┐ │
│ │ 白细胞 7.5 正常 │ │ 白底卡片
│ │ 红细胞 4.1 偏低 │ │ 正常: success 绿
│ │ 血红蛋白 125 偏低 │ │ 偏高: error 红
│ └──────────────────────────────┘ │ 偏低: warning 黄
│ │
│ [查看原始报告] │ 白底+primary字+border边框
│ │
│ ─────── 医生审核 ─────── │
│ │
│ 严重程度: │
│ [正常] [异常] [严重] [危急] │ 选中: 对应色底+白字
│ │ 正常=success, 异常=warning
│ 建议模板: │ 严重=error, 危急=#991B1B
│ [药量调整] [复查建议] [生活方式] │ 选中: #EFF6FF底+#0891B2字+#0891B2边框
│ [进一步检查] [专科转诊] [无需] │ 未选中: 白底+border边框+textSecondary字
│ │
│ 评语: │
│ ┌──────────────────────────────┐ │
│ │ (多行输入) │ │ 白底, 无边框
│ └──────────────────────────────┘ │
│ │
│ ┌ 提交审核 ──────────────────┐ │
│ └──────────────────────────────┘ │ doctorBlue底+白字
│ │
│ (已审核时) │
│ ┌ ✅ 审核已完成 ─────────────┐ │ 白底+#D1FAE5边框
│ │ 严重程度: 异常 │ │ 标签: textHint
│ │ 建议: 复查建议、生活方式 │ │
│ │ 评语: ... │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
11. 随访列表 (doctor_followups_page.dart)
┌──────────────────────────────────┐
│ [全部] [待完成] [已完成] [+] │ 筛选: 同报告页
│ │ 添加: primary图标
│ ┌──────────────────────────────┐ │
│ │ 术后一个月复查 [待完成] │ │ 白底卡片
│ │ 患者A · 2026-06-18 09:00 │ │ 待完成: warning标签
│ │ 备注: ... │ │ 已完成: success标签
│ │ [编辑] [完成] [删除] │ │ 按钮: textHint/success/error
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
12. 随访编辑 (doctor_followup_edit_page.dart)
┌──────────────────────────────────┐
│ ← 新建随访 / 编辑随访 │
│ │
│ 患者 │
│ ┌──────────────────────────────┐ │
│ │ ▼ 选择患者 │ │ 白底, 下拉选择器
│ └──────────────────────────────┘ │
│ │
│ 随访标题 │
│ ┌──────────────────────────────┐ │
│ │ 例:术后一个月复查 │ │ 白底, 无边框
│ └──────────────────────────────┘ │
│ │
│ 随访时间 │
│ ┌──────────────┐ ┌────────────┐ │
│ │ 2026-06-18 │ │ 09:00 │ │ 白底卡片, 点击弹出选择器
│ └──────────────┘ └────────────┘ │
│ │
│ 备注 │
│ ┌──────────────────────────────┐ │
│ │ (多行) │ │ 白底, 无边框
│ └──────────────────────────────┘ │
│ │
│ ┌ 创建随访 / 保存修改 ────────┐ │
│ └──────────────────────────────┘ │ doctorBlue底+白字
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
13. 医生设置 (doctor_settings_page.dart)
┌──────────────────────────────────┐
│ ← 设置 │
│ │
│ ┌──────────────────────────────┐ │
│ │ 🔔 推送通知 [开关] │ │ 白底, 圆角14
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 📄 隐私政策 > │ │
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 📃 用户协议 > │ │
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 🗑 删除账号 > │ │ 红色文字
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 退出登录 │ │ error字+#FECACA边框
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
14. 医生个人信息 (doctor_profile_page.dart)
┌──────────────────────────────────┐
│ ← 个人信息 │
│ │
│ ┌──────────────────────────────┐ │
│ │ 姓名 │ │ 白底输入框
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 职称 │ │ 白底输入框
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 科室 │ │ 白底输入框
│ └──────────────────────────────┘ │
│ ┌──────────────────────────────┐ │
│ │ 医院 │ │ 白底输入框
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 保存 │ │ doctorBlue底+白字
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
15. 健康概览趋势页 (trend_page.dart)
┌──────────────────────────────────┐
│ [血压] [心率] [血糖] [血氧] [体重] 指标chip切换
│ 🔴 🟡 🔵 🟢 🟣 颜色来自硬编码
│ │
│ ┌ 趋势图 (fl_chart) ──────────┐ │
│ │ │ │
│ │ 📈 折线图 30天趋势 │ │
│ │ │ │
│ └──────────────────────────────┘ │
│ │
│ 历史记录 (N条) │
│ ┌──────────────────────────────┐ │
│ │ 🫀 6月12日 18:30 │ │ 白底卡片(左滑删除)
│ │ 122/80 mmHg │ │ 异常值: error红
│ └──────────────────────────────┘ │ 正常值: #1A1A1A
│ ┌──────────────────────────────┐ │ 删除背景: error红
│ │ 💓 6月12日 08:00 │ │
│ │ 72 次/分 │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: bgGradient渐变
| 指标 | 色号 | 色块 |
|---|---|---|
| 血压 | #EF4444 (error) |
🔴 |
| 心率 | #F59E0B (warning) |
🟡 |
| 血糖 | #4F6EF7 |
🔵 |
| 血氧 | #20C997 |
🟢 |
| 体重 | #845EF7 |
🟣 |
16. 蓝牙设备管理 (device_management_page.dart)
┌──────────────────────────────────┐
│ 蓝牙设备 [+] │ AppBar: #FFFFFF
│ │
│ ┌──────────────────────────────┐ │
│ │ [蓝牙] 血压计 🟢 已连接 │ │ 已连接: success绿边框+绿点
│ │ CB:1C:DF:93:7F:7A │ │ 未连接: border灰边框+灰点
│ │ 上次同步: 6/12 18:30 │ │ 点击重连(未连接时)
│ └──────────────────────────────┘ │ 头像底: successLight/ #F5F5F5
│ │
│ ┌ 最近测量 ──────────────────┐ │
│ │ 122/80 mmHg │ │ 白底卡片
│ └──────────────────────────────┘ │
│ │
│ ┌──────────────────────────────┐ │
│ │ 解绑设备 │ │ error字+#FECACA边框
│ └──────────────────────────────┘ │
│ │
│ ┌ 使用说明 ──────────────────┐ │
│ │ 1. 血压计装好电池... │ │
│ │ 2. 按开始键测量... │ │
│ │ 3. 点击设备栏自动连接... │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: pageGrey (#F5F5F5)
空状态:
[蓝牙图标] 灰色 #BBBBBB
暂无设备
点击右上角 + 添加血压计
17. 蓝牙扫描/连接 (device_scan_page.dart)
┌──────────────────────────────────┐
│ ← BLESmart_xxx │
│ │
│ 扫描中/已发现 N 台设备 │ 状态栏: iconBg底
│ │
│ ┌──────────────────────────────┐ │
│ │ [蓝牙] BLESmart... [连接] │ │ 白底卡片, #EEEEEE边框
│ │ CB:1C:DF... · 信号强 │ │ 连接按钮: primary底+白字
│ └──────────────────────────────┘ │
│ │
│ [重新扫描] │ primary字+border边框
│ │
│ (无设备时居中显示) │
│ [脉动动画] │ #F0F0FF底, primary图标
│ 正在搜索蓝牙设备... │ textHint
│ 请确保血压计处于通信模式 │ #CCCCCC
│ │
│ (已连接时居中显示) │
│ [✓ 图标] │ #D1FAE5底/#F0F0FF底
│ 测量完成 / 设备已连接 │ textPrimary
│ 122/80 mmHg │ textPrimary 大字
│ 脉搏 78 bpm │ #EFF6FF底, primary字
│ 数据已自动同步 │ textHint
└──────────────────────────────────┘
大背景: #FFFFFF
18. 健康档案页 (HealthArchivePage in remaining_pages.dart)
┌──────────────────────────────────┐
│ ← 健康档案 │
│ │
│ 基本信息: 姓名/性别/出生日期 │ 输入框: backgroundSoft
│ 既往病史/手术史/过敏/慢病/饮食 │
│ │
│ [保存] │ primary底+白字
└──────────────────────────────────┘
大背景: bgGradient
19. 复查随访页-患者端 (FollowUpListPage in remaining_pages.dart)
┌──────────────────────────────────┐
│ ← 复查随访 │
│ │
│ (空状态) │
│ [📅图标] 暂无随访安排 │ textHint色
│ 医生创建随访后将显示在这里 │
│ │
│ (有数据) │
│ ┌──────────────────────────────┐ │
│ │ 随访标题 [即将到来] │ │ 白底卡片
│ │ 医生名 · 科室 │ │ 状态: primary/success/error
│ │ 时间 │ │
│ └──────────────────────────────┘ │
└──────────────────────────────────┘
大背景: bgGradient
20. 启动闪屏 (app.dart _RootNavigator)
┌──────────────────────────────────┐
│ │
│ │
│ ❤ 心形图标 │ primary色
│ │
│ 健康管家 │ textPrimary
│ │
│ │
└──────────────────────────────────┘
大背景: #FFFFFF
颜色使用频率排名
| 颜色 | 使用文件数 | 最常用途 |
|---|---|---|
textPrimary #1F2937 |
28 | 全项目主文字 |
textHint #9CA3AF |
28 | 全项目提示文字 |
primary #8B5CF6 |
26 | 用户端主色/按钮/选中 |
error #EF4444 |
21 | 错误/删除 |
textSecondary #6B7280 |
19 | 副文字 |
border #E5E7EB |
13 | 通用边框 |
cardInner #F5F2FF |
11 | 卡片内底 |
success #10B981 |
10 | 成功/绿色状态 |
warning #F59E0B |
7 | 警告/黄色状态 |
pageGrey #F5F5F5 |
7 | 医生端页面底 |
doctorBlue #0891B2 |
7 | 医生端主色 |
avatarBg #F0F0FF |
6 | 头像底 |
21. 图标与底色对照表
全局图标
| 位置 | 图标 | 图标色 | 底色 | 底色号 |
|---|---|---|---|---|
| 登录页心形 | favorite | _accent (用户紫/医生蓝) |
无 | — |
| 登录页成功 | check_circle | #059669 |
#D1FAE5 |
successLight |
| 抽屉菜单项 | 各种 | primary |
无 | — |
| 抽屉蓝牙入口 | bluetooth_rounded | primary |
无 | — |
| 空状态图标 | inbox_outlined | textHint |
无 | — |
| 空状态图标 | bluetooth_disabled | #BBBBBB |
#F0F0F0 |
— |
| 药瓶确认 | check_circle_outline | textHint |
无 | — |
| 添加按钮(FAB) | add | #FFFFFF |
primary |
— |
| 侧边栏AI图标 | smart_toy | primaryLight |
无 | — |
| 侧边栏头像 | person | textHint |
#FFFFFF |
— |
| AI消息头像 | health_and_safety | primary |
无 | — |
医生端
| 位置 | 图标 | 图标色 | 底色 | 底色号 |
|---|---|---|---|---|
| 抽屉头部 | person | #FFFFFF |
#FFFFFF 24%透明 |
— |
| 抽屉菜单(选中) | 各种 | doctorBlue |
doctorBlue 8%透明 |
— |
| 抽屉菜单(未选中) | 各种 | textHint |
无 | — |
| 统计卡片-患者 | people | blueMeasure |
blueMeasure 10%透明 |
— |
| 统计卡片-问诊 | chat | success |
success 10%透明 |
— |
| 统计卡片-报告 | description | warning |
warning 10%透明 |
— |
| 统计卡片-随访 | event_note | error |
error 10%透明 |
— |
| 待办图标 | chat_outlined 等 | success/warning/error |
无 | — |
| 完善信息提示 | info_outline | doctorBlue |
#E0F2FE |
— |
| 患者列表头像 | person/male/female | primary |
avatarBg #F0F0FF |
— |
| 患者详情头像 | person文字 | primary |
avatarBg #F0F0FF |
— |
| 问诊列表头像 | person文字 | primary |
avatarBg #F0F0FF |
— |
| 报告列表图标 | description | primary |
无 | — |
| 报告详情头像 | person文字 | primary |
avatarBg #F0F0FF |
— |
| 审核完成图标 | check_circle | success |
无 | — |
| AI预分析竖条 | (Container) | — | #6366F1 |
— |
| 设置列表图标 | notifications/description/article/delete | textPrimary (删除为红) |
无 | — |
| 返回箭头 | arrow_back | textPrimary |
无 | — |
| 抽屉汉堡菜单 | menu | textPrimary |
无 | — |
蓝牙设备页
| 位置 | 图标 | 图标色 | 底色 | 底色号 |
|---|---|---|---|---|
| 设备卡片(已连接) | bluetooth | success |
successLight |
— |
| 设备卡片(未连接) | bluetooth | #BBBBBB |
#F5F5F5 |
— |
| 连接状态点(已连接) | (Container圆) | — | success+shadow |
— |
| 连接状态点(未连接) | (Container圆) | — | #BBBBBB |
— |
| 扫描中动画 | bluetooth_searching | primary |
#F0F0FF |
— |
| 扫描脉动环 | (Container) | — | primary 8%透明 |
— |
| 已连接图标 | bluetooth_connected | primary |
#F0F0FF |
— |
| 测量完成图标 | check_rounded | success |
successLight |
— |
健康概览趋势页
| 位置 | 图标/色 | 图标色 | 底色 |
|---|---|---|---|
| 血压chip | favorite_rounded (🫀) | error (#EF4444) |
error 20%透明 |
| 心率chip | monitor_heart (💓) | warning (#F59E0B) |
warning 20%透明 |
| 血糖chip | bloodtype (🩸) | #4F6EF7 |
#4F6EF7 20%透明 |
| 血氧chip | air (🫁) | #20C997 |
#20C997 20%透明 |
| 体重chip | monitor_weight (⚖️) | #845EF7 |
#845EF7 20%透明 |
| 历史记录项图标 | emoji文字 | primary |
各色20%透明 |
| 删除背景 | delete_outline | #FFFFFF |
error |
饮食页
| 位置 | 图标 | 图标色 | 底色 |
|---|---|---|---|
| 添加食物 | add_circle_outline | _dietAccent (#F0A060) |
无 |
| AI按钮 | auto_awesome | _dietAccent (#F0A060) |
无 |
| 食物列表项 | — | — | #FFFBF5 |
套餐卡片
| 位置 | 图标 | 图标色 | 底色 |
|---|---|---|---|
| 功能列表项图标 | — | #F5A623 |
#FFF8EE |
| 套餐头 | workspace_premium | #FFFFFF |
primaryGradient |
| 前进箭头 | chevron_right | textHint |
无 |
问诊聊天
| 位置 | 图标 | 图标色 | 底色 |
|---|---|---|---|
| AI头像 | smart_toy | primaryLight |
— |
| 在线指示点 | (Container圆) | — | #F0F2FF |
| 健康图标 | — | blueMeasure |
#DBEAFE |
| 运动图标 | — | warning |
warningLight |
| 用药图标 | — | #EC4899 |
#FCE7F3 |
| 建议灯泡 | lightbulb_outline | primary |
无 |
| Agent卡片图标 | 各种 | 各Agent accent色 | 各Agent iconBg色 |
设置/通知页
| 位置 | 图标 | 图标色 | 底色 |
|---|---|---|---|
| 通知项图标 | 各种 | iconColor (#9B8AF7) |
iconBg (#E8E0FA) |
统一规则
| 场景 | 图标色 | 底色 |
|---|---|---|
| 可点击图标 | primary |
无/透明 |
| 不可点击图标 | textHint |
无/透明 |
| 成功/正常状态 | success (#10B981) |
successLight (#D1FAE5) |
| 警告/待处理 | warning (#F59E0B) |
warningLight (#FEF3C7) |
| 错误/删除 | error (#EF4444) |
errorLight (#FEE2E2) |
| 医生端强调 | doctorBlue (#0891B2) |
doctorBlue 淡底 |
| 禁用/空状态 | #BBBBBB |
#F0F0F0 |
| 头像/人员底 | primary |
avatarBg (#F0F0FF) |
文档中标注的色号均为定义在 AppColors 中的常量名。要修改任何地方的颜色,告诉我"XX页面的XX区域换成XX色"即可。