iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
df1d85bfde169ed17c7ab7a5b186a2ebf6f3b6bb
hms/docs/qa/role-test-results/T40-ui-audit-results.md
iven df1d85bfde docs: T40 UI 审计报告 + wiki 更新 + Docker 配置 
- T40 UI 审计计划和结果文档（docs/qa/）
- wiki 更新：miniprogram 设计系统合规审计记录 + index 关键数字更新
- 审计 V2 完整报告（docs/audits/v2/）
- 讨论记录文档（docs/discussions/）
- 设计规格和实施计划（docs/superpowers/）
- 角色测试计划和结果（docs/qa/role-test-*）
- Docker 生产部署配置
2026-05-13 23:29:42 +08:00

727 lines
18 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# T40 小程序全页面 UI 审查结果
> 日期: 2026-05-13 | 分支: feat/media-library-banner | 审查方法: 代码审查 + 全局 Grep 扫描
> MCP 截图在 Taro 虚拟 DOM 下不可用（已知限制），以静态代码审查为主要依据。
---
## 审查汇总
| 分组 | 页面数 | PASS | PASS_WITH_ISSUES | NEEDS_WORK |
|------|--------|------|-----------------|------------|
| TabBar 页面 | 4 | 2 | 2 | 0 |
| 医护工作站 | 12 | 4 | 8 | 0 |
| 患者端核心 | 7 | 3 | 4 | 0 |
| 患者端子包 | 11 | 5 | 5 | 1 |
| 个人中心 | 18 | 12 | 5 | 1 |
| 透析+法律 | 8 | 5 | 3 | 0 |
| **合计** | **60** | **31** | **27** | **2** |
**问题统计：**
- HIGH: 2 个
- MEDIUM: 14 个
- LOW: 33 个
---
## 全局扫描结果
### G1. 硬编码字号（4 处）
| 文件 | 行 | 值 | 严重级 |
|------|-----|-----|--------|
| `app.scss` | 8 | `font-size: 28px` | LOW（全局基础样式） |
| `components/ErrorState/index.scss` | 12 | `font-size: 80px` | MEDIUM（长者模式不缩放） |
| `pages/mall/index.scss` | 64 | `font-size: 72px` | MEDIUM（长者模式不缩放） |
| `pages/pkg-profile/elder-mode/index.scss` | 125 | `font-size: 21px` | LOW（预览示例） |
### G2. 硬编码颜色（42 处，跨 20 文件）
**#fff/#FFFFFF 用法（35 处）**— 白色在深色背景上（按钮/渐变/胶囊），多属合理，但应统一用 `$white` 变量。
**脱 palette 颜色（7 处）**：
| 文件 | 行 | 值 | 问题 |
|------|-----|-----|------|
| `pages/ai-report/detail/index.scss` | 96-102 | `#f0e6ff`, `#7c3aed`, `#fffbeb`, `#fde68a`, `#92400e` | 紫色/黄色系，偏离赤土橙+鼠尾草绿 palette |
| `pages/pkg-health/daily-monitoring/index.scss` | 248 | `#0284C7` | 蓝色，不在设计体系内 |
| `pages/index/index.scss` | 343, 346, 358, 362 | `#3D5A40`, `#8B6F4E` | 渐变色标，可接受 |
**TSX 内联硬编码颜色（4 处）**：
| 文件 | 位置 | 问题 |
|------|------|------|
| `pages/doctor/patients/index.tsx` | ~L181 | `fontSize: '24px', color: '#78716C'` 绕过 token |
| `pages/doctor/action-inbox/index.tsx` | TYPE_COLOR | hex 颜色硬编码在 TSX 对象中 |
| `pages/pkg-mall/exchange/index.tsx` | TYPE_COLOR | hex 颜色硬编码在 TSX 对象中 |
| `pages/pkg-mall/orders/index.tsx` | STATUS_CONFIG | hex 颜色硬编码在 TSX 对象中 |
### G3. 硬编码圆角（36 处，跨 20 文件）
**可直接替换为 Token 的（13 处）**— 纯 find-and-replace：
| 原值 | 应替换为 | 涉及文件数 |
|------|---------|-----------|
| `8px` | `$r-xs` | 7 |
| `12px` | `$r-sm` | 2 |
| `16px` | `$r` | 1 |
| `20px` | `$r-lg` | 3 |
**低于 token 体系的（9 处）**— `2px` 或 `4px`，无对应 token。
**非标值（14 处）**— 如 `48px`, `32px`, `40px`, `15px`, `13px` 等。
### G4. 缺失 mixins 导入（2 文件）
| 文件 | 缺失 |
|------|------|
| `pages/article/index.scss` | `@import '../../styles/mixins.scss'` |
| `pages/article/detail/index.scss` | `@import '../../styles/mixins.scss'` |
### G5. 缺失 UI 状态
| 状态 | 缺失页面 |
|------|---------|
| 加载态 | profile, device-sync, pkg-health/trend, pkg-health/input, appointment/create, family, medication(内联), article/detail(内联) |
| 空态 | device-sync(设备/读数), pkg-health/trend(图表), doctor/followup/detail(记录), index(文章/AI建议隐藏而非提示) |
| 错误态 | 大部分页面仅用 `showToast`，无持久错误 UI（仅 detail 页有 ErrorState） |
| GuestGuard | consultation/index 使用自定义 UI 而非 GuestGuard 组件 |
---
## 逐页审查记录
### Batch 1: TabBar 页面
#### P1 首页（pages/index/index）
**角色:** 访客 + 患者
**截图:** N/A（MCP 限制）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | 全部使用 `var(--tk-font-*)` |
| 颜色变量 | ✅ | SCSS 变量为主，`#fff` 用于深色背景白字（合理） |
| 圆角变量 | ✅ | `$r`, `$r-sm`, `$r-xs`, `$r-pill` |
| 触控区域 | ✅ | 按钮/卡片均有 `:active` 反馈 |
| 空态 | ⚠️ | 访客文章为空时显示 fallback 卡片；登录后 AI建议/提醒 为空时整块隐藏 |
| 加载态 | ✅ | `<Loading />` 组件用于体征数据 |
| 错误态 | ⚠️ | 4 处 silent catch（AI建议/趋势/未读/提醒） |
| 长者模式 | ✅ | `modeClass` 正确传递 |
| 访客守卫 | ✅ | 设计决策：访客看 GuestHome，非 Guard |
**问题清单：**
- [ ] AI建议/智能提醒为空时整块隐藏，应显示空态提示（LOW）
- [ ] 4 处 catch 静默处理，网络错误时用户无感知（LOW）
- [ ] `#3D5A40`、`#8B6F4E` 渐变色标未定义变量（LOW）
---
#### P2 健康数据（pages/health/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | 全部 `var(--tk-font-*)` |
| 颜色变量 | ✅ | `$pri`, `$acc`, `$wrn`, `$tx` 等 |
| 圆角变量 | ✅ | `$r`, `$r-sm`, `$r-xs` |
| 触控区域 | ✅ | Tab/按钮/输入框均 ≥48px |
| 空态 | ✅ | 趋势图有空态提示 |
| 加载态 | ✅ | `<Loading />` |
| 错误态 | ⚠️ | silent catch（AI建议/趋势） |
| 长者模式 | ✅ | `useElderClass()` |
| 访客守卫 | ✅ | `<GuestGuard>` |
**问题清单：**
- [ ] AI 建议为空时整块隐藏（LOW）
---
#### P3 消息（pages/messages/index）
**角色:** 患者
**结果:** PASS
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | |
| 触控区域 | ✅ | |
| 空态 | ✅ | 咨询/通知均有空态提示 |
| 加载态 | ✅ | `<Loading />` |
| 错误态 | ✅ | 刷新失败显示 toast |
| 长者模式 | ✅ | `useElderClass()` |
| 访客守卫 | ✅ | `<GuestGuard>` |
---
#### P4 我的（pages/profile/index）
**角色:** 访客 + 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | |
| 触控区域 | ✅ | 菜单项 min-height: 48px |
| 空态 | N/A | 静态菜单数据 |
| 加载态 | ⚠️ | 积分刷新无 Loading 指示器 |
| 错误态 | N/A | |
| 长者模式 | ✅ | |
| 访客守卫 | ✅ | isGuest 判断显示不同菜单组 |
**问题清单：**
- [ ] 积分/打卡刷新时无 Loading 指示器（LOW）
---
### Batch 2: 医护工作站
#### P41 医护工作台（pages/doctor/index）
**角色:** Doctor / Nurse / HM
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | grid 布局修复后正常 |
| 空态 | N/A | 静态 dashboard |
| 加载态 | ✅ | `<Loading />` |
| 错误态 | ⚠️ | catch 静默（"静默失败，显示占位"） |
| 长者模式 | ✅ | `useElderClass()` |
**问题清单：**
- [ ] Dashboard 加载失败静默处理（LOW）
---
#### P42 患者列表（pages/doctor/patients/index）
**角色:** Doctor / Nurse
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ⚠️ | TSX 内联 `fontSize: '24px'` |
| 颜色变量 | ⚠️ | TSX 内联 `color: '#78716C'` |
| 圆角变量 | ✅ | |
| 空态 | ✅ | `<EmptyState />` |
| 加载态 | ✅ | `<Loading />` |
| 错误态 | ✅ | toast |
| 长者模式 | ✅ | |
**问题清单：**
- [ ] 内联 `fontSize: '24px'` 应改为 `var(--tk-font-h2)`（MEDIUM）
- [ ] 内联 `color: '#78716C'` 应改为 `$tx3`（LOW）
---
#### P43 患者详情（pages/doctor/patients/detail/index）
**角色:** Doctor / Nurse
**结果:** PASS
---
#### P44 咨询管理（pages/doctor/consultation/index）
**角色:** Doctor / Nurse
**结果:** PASS
---
#### P45 咨询详情-医护（pages/doctor/consultation/detail/index）
**角色:** Doctor / Nurse
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 错误态 | ⚠️ | 轮询超时静默重试（可接受但应记录） |
---
#### P46 随访管理（pages/doctor/followup/index）
**角色:** Doctor / Nurse / HM
**结果:** PASS
---
#### P47 随访详情-医护（pages/doctor/followup/detail/index）
**角色:** Doctor / Nurse
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 空态 | ⚠️ | 历史记录为空时无提示 |
---
#### P48 告警中心（pages/doctor/alerts/index）
**角色:** Doctor / Nurse / HM
**结果:** PASS
---
#### P49 告警详情（pages/doctor/alerts/detail/index）
**角色:** Doctor / Nurse / HM
**结果:** PASS
---
#### P50 化验审核（pages/doctor/report/index）
**角色:** Doctor
**结果:** PASS
---
#### P51 化验详情-医护（pages/doctor/report/detail/index）
**角色:** Doctor
**结果:** PASS
---
#### P52 待办事项（pages/doctor/action-inbox/index）
**角色:** Doctor / Nurse / HM
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 颜色变量 | ⚠️ | `TYPE_COLOR` 对象中硬编码 hex 颜色 |
**问题清单：**
- [ ] TYPE_COLOR 中的 hex 颜色应提取为 SCSS 变量或设计 token（LOW）
---
### Batch 3: 患者端核心功能
#### P5 咨询列表（pages/consultation/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| GuestGuard | ⚠️ | 使用自定义 UI 而非 `<GuestGuard>` 组件 |
**问题清单：**
- [ ] 访客态使用自定义 UI，应统一使用 `<GuestGuard>` 组件（MEDIUM）
---
#### P6 咨询详情（pages/consultation/detail/index）
**角色:** 患者
**结果:** PASS
---
#### P7 预约列表（pages/appointment/index）
**角色:** 患者
**结果:** PASS
---
#### P8 创建预约（pages/appointment/create/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 加载态 | ⚠️ | 初始数据（医生/排班）加载时无 Loading |
---
#### P9 预约详情（pages/appointment/detail/index）
**角色:** 患者
**结果:** PASS
---
#### P10 积分商城（pages/mall/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ⚠️ | `.points-balance` 硬编码 `font-size: 72px`（长者模式不缩放） |
**问题清单：**
- [ ] 积分余额 `72px` 硬编码 → 改用 `--tk-font-hero` 或新建 `--tk-font-display` token（MEDIUM）
---
#### P11 登录（pages/login/index）
**角色:** 访客
**结果:** PASS
注：故意不应用关怀模式（`loginClass = ''`），属设计决策。
---
### Batch 4: 患者端子包功能
#### P12 健康趋势（pages/pkg-health/trend/index）
**角色:** 患者
**结果:** NEEDS_WORK
| 维度 | 状态 | 备注 |
|------|------|------|
| 空态 | ❌ | 无数据时图表区域完全空白 |
| 加载态 | ❌ | 无 `<Loading />` |
| 错误态 | ❌ | catch 后无反馈 |
**问题清单：**
- [ ] 缺少空态 UI（HIGH）
- [ ] 缺少加载态（HIGH）
---
#### P13 体征录入（pages/pkg-health/input/index）
**角色:** 患者
**结果:** PASS
---
#### P14 日常监测（pages/pkg-health/daily-monitoring/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 颜色变量 | ⚠️ | `#0284C7` 蓝色不在设计体系内 |
**问题清单：**
- [ ] 低值警告颜色 `#0284C7` 应替换为设计体系内的颜色（LOW）
---
#### P15 健康告警（pages/pkg-health/alerts/index）
**角色:** 患者
**结果:** PASS
---
#### P16 积分兑换（pages/pkg-mall/exchange/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 颜色变量 | ⚠️ | TYPE_COLOR 内联 hex |
---
#### P17 兑换订单（pages/pkg-mall/orders/index）
**角色:** 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 颜色变量 | ⚠️ | STATUS_CONFIG 内联 hex |
---
#### P18 商品详情（pages/pkg-mall/detail/index）
**角色:** 患者
**结果:** PASS
---
#### P19 文章列表（pages/article/index）
**角色:** 访客 + 患者
**结果:** NEEDS_WORK
| 维度 | 状态 | 备注 |
|------|------|------|
| Mixins 导入 | ❌ | 缺少 `@import '../../styles/mixins.scss'` |
| 圆角变量 | ❌ | 硬编码 `border-radius: 32px` 和 `12px` |
**问题清单：**
- [ ] 缺少 mixins.scss 导入（MEDIUM）
- [ ] 硬编码圆角 `32px`（Tab）和 `12px`（Tag）（MEDIUM）
---
#### P20 文章详情（pages/article/detail/index）
**角色:** 访客 + 患者
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| Mixins 导入 | ⚠️ | 缺少 mixins 导入 |
| 圆角变量 | ⚠️ | 硬编码 `12px` |
---
#### P21 线下活动（pages/events/index）
**角色:** 患者
**结果:** PASS
---
#### P22 设备同步（pages/device-sync/index）
**角色:** 患者
**结果:** PASS
---
### Batch 5: 个人中心子页面
#### P23 健康记录（pages/pkg-profile/health-records/index）
**结果:** PASS
#### P24 我的报告（pages/pkg-profile/reports/index）
**结果:** PASS
#### P25 我的随访（pages/pkg-profile/followups/index）
**结果:** PASS
#### P26 就诊人管理（pages/pkg-profile/family/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 加载态 | ⚠️ | 有 `loading` state 但未渲染 `<Loading />` |
---
#### P27 添加就诊人（pages/pkg-profile/family-add/index）
**结果:** PASS（表单页）
#### P28 用药记录（pages/pkg-profile/medication/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 加载态 | ⚠️ | 内联 "加载中..." 使用硬编码颜色 `#94A3B8` |
---
#### P29 诊断记录（pages/pkg-profile/diagnoses/index）
**结果:** PASS
#### P30 知情同意（pages/pkg-profile/consents/index）
**结果:** PASS
#### P31 透析记录（pages/pkg-profile/dialysis-records/index）
**结果:** PASS
#### P32 透析记录详情（pages/pkg-profile/dialysis-records/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | status-tag 硬编码 `8px` |
---
#### P33 透析处方（pages/pkg-profile/dialysis-prescriptions/index）
**结果:** PASS
#### P34 处方详情（pages/pkg-profile/dialysis-prescriptions/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | status-tag 硬编码 `8px` |
---
#### P35 长者模式（pages/pkg-profile/elder-mode/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ⚠️ | 预览示例 `21px` 硬编码 |
---
#### P36 设置（pages/pkg-profile/settings/index）
**结果:** PASS
#### P37 AI 分析列表（pages/ai-report/list/index）
**结果:** PASS
#### P38 AI 分析详情（pages/ai-report/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 颜色变量 | ⚠️ | 紫色/黄色系（`#f0e6ff`, `#7c3aed`, `#fffbeb`, `#fde68a`, `#92400e`） |
| 圆角变量 | ⚠️ | auto-badge 硬编码 `8px` |
---
#### P39 化验报告详情（pages/report/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | indicator-status 硬编码 `16px` |
---
#### P40 随访详情-患者（pages/followup/detail/index）
**结果:** PASS
---
### Batch 6: 透析管理 + 法律页面
#### P53 透析记录-医护（pages/doctor/dialysis/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | type-tag/status-tag 硬编码 `8px` |
---
#### P54 透析详情-医护（pages/doctor/dialysis/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | record-header__status 硬编码 `8px` |
---
#### P55 新建透析（pages/doctor/dialysis/create/index）
**结果:** PASS
#### P56 透析处方-医护（pages/doctor/prescription/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | status-tag 硬编码 `8px` |
---
#### P57 处方详情-医护（pages/doctor/prescription/detail/index）
**结果:** PASS_WITH_ISSUES
| 维度 | 状态 | 备注 |
|------|------|------|
| 圆角变量 | ⚠️ | rx-header__status 硬编码 `8px` |
---
#### P58 新建处方（pages/doctor/prescription/create/index）
**结果:** PASS
#### P59 用户协议（pages/legal/user-agreement）
**结果:** PASS（静态页面）
#### P60 隐私政策（pages/legal/privacy-policy）
**结果:** PASS（静态页面）
---
## 修复优先级排序
### HIGH（必须修复）
| # | 问题 | 页面 | 修复建议 |
|---|------|------|---------|
| H1 | 健康趋势页缺少空态/加载态 | pkg-health/trend | 添加 EmptyState + Loading |
| H2 | 文章列表缺少 mixins 导入 + 硬编码圆角 | article/index | 补导入，替换 32px/12px |
### MEDIUM（建议修复）
| # | 问题 | 影响范围 | 修复建议 |
|---|------|---------|---------|
| M1 | 积分余额 72px 硬编码，长者模式不缩放 | mall | 新建 `--tk-font-display` token |
| M2 | ErrorState 80px 硬编码，长者模式不缩放 | ErrorState 组件 | 同上 |
| M3 | AI 分析详情使用脱 palette 颜色 | ai-report/detail | 新增语义化 token 或变量 |
| M4 | TSX 内联 fontSize/color 绕过 token | doctor/patients | 改用 className + SCSS |
| M5 | 咨询列表访客态未用 GuestGuard | consultation/index | 替换为 `<GuestGuard>` |
| M6 | TSX TYPE_COLOR/STATUS_CONFIG 硬编码 | exchange, orders, action-inbox | 提取为 SCSS 类 |
### LOW（可后续处理）
| # | 问题 | 数量 |
|---|------|------|
| L1 | `#fff` 用法未统一为变量 | 35 处 |
| L2 | 硬编码圆角 8px/12px 可直接替换为 token | 13 处 |
| L3 | 静默 catch 无用户反馈 | ~10 处 |
| L4 | 缺少 Loading 指示器 | 8 页 |
| L5 | 空列表整块隐藏而非显示提示 | 3 页 |
| L6 | daily-monitoring `#0284C7` 蓝色 | 1 处 |
| L7 | elder-mode 预览 `21px` 硬编码 | 1 处 |
| L8 | article/detail 缺 mixins 导入 | 1 处 |
---
## 长者模式专项
| 检查项 | 状态 | 备注 |
|--------|------|------|
| 所有页面使用 `useElderClass()` | ✅ 56/58 页 | login 有意跳过，legal 不需要 |
| 字号使用 `var(--tk-font-*)` | ⚠️ 4 处硬编码 | app.scss/ErrorState/mall/elder-mode |
| 触控区域 ≥ 48px | ✅ | 按钮和菜单项均有保证 |
| 体征网格 2→1 列 | ✅ | elder-mode.scss 有降级规则 |
---
*审查完成。建议优先修复 HIGH × 2 和 MEDIUM × 6，总计约 2 小时工作量。*
Reference in New Issue View Git Blame Copy Permalink