iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ddf5c196e4d430e558317c3ddd28b768e80c84c8
hms/docs/qa/role-test-results/T40-ui-audit-results.md
iven 2c567bd772 fix(mp): T40 UI 审查全量修复 + 设计体系一致性优化 
Phase 0 基础设施:
- statusTag.ts: getStatusInlineStyle() 移除内联 borderRadius/padding/fontSize，仅返回 {background, color}
- 新增 SEVERITY_COLORS + getSeverityStyle() + getSeverityLabel() 统一告警严重程度样式
- variables.scss: 新增 9 个语义颜色别名 ($success/$danger/$warning/$info 等)
- mixins.scss: 新增 status-inline mixin 统一状态标签样式
- 7 个消费者页面添加 @include status-inline CSS 补偿

Phase 1 HIGH 修复 (4 页面):
- P46 随访管理: 移除 getTypeStyle() 硬编码 fontSize，替换文字 Loading 为组件
- P45 咨询详情医护: 添加 Loading/ErrorState 三态模板 + error ref
- P02 健康数据: 添加 loading ref + Loading 组件 + 错误 toast 提示
- P48 告警中心: 替换本地 SEVERITY_COLORS/SEVERITY_LABELS 为 statusTag.ts 导出

Phase 2 全局一致性:
- 2.1 触控补全: 17 页面为可点击元素添加 min-height: $touch-min
- 2.2 字号替换: 19 文件 31 处硬编码 px → Design Token CSS 变量
- 2.3 颜色替换: 18 文件 ~50 处硬编码十六进制 → SCSS 语义变量
- 2.4 elder-mode.scss: 新增 9 个选择器到触控放大清单

Phase 3 LOW 修复:
- 3.1 统一 Loading: 21 页面旧式文字加载 → <Loading> 组件
- 3.2 useElderClass: 8 页面补全长者模式 class 绑定
- 3.3 零散修复: 按钮 44px→48px，诊断记录添加 scroll-view 无限加载

同时新增 UniApp (Vue 3 + Vite) 小程序完整代码库 (146 文件)
2026-05-15 11:22:51 +08:00

363 lines
14 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-15 | 分支: feat/media-library-banner | 审查方法: MCP 实时测试(4页) + 静态代码审查(56页)
## 审查汇总
| 分组 | 页面数 | PASS | PASS_WITH_ISSUES | NEEDS_WORK |
|------|--------|------|-----------------|------------|
| §3.1 TabBar 页面 | 4 | 0 | 4 | 0 |
| §3.5 医护工作站 | 12 | 0 | 11 | 1 |
| §3.2 患者端核心 | 7 | 0 | 7 | 0 |
| §3.3 患者端子包 | 11 | 0 | 11 | 0 |
| §3.4 个人中心 | 18 | 0 | 18 | 0 |
| §3.6 透析+法律 | 8 | 0 | 8 | 0 |
| **合计** | **60** | **0** | **59** | **1** |
## 问题统计
| 级别 | 数量 | 说明 |
|------|------|------|
| HIGH | 6 | JS层硬编码字号+颜色、咨询详情缺Loading、健康页静默错误、随访管理NEEDS_WORK |
| MEDIUM | 18 | 触控区域普遍不足、字号硬编码(~20处)、颜色硬编码(~45处) |
| LOW | 12 | 加载组件不统一、部分缺elderClass、错误静默 |
---
## §3.1 TabBar 页面（MCP 实时测试 + 静态审查）
### P01 首页（pages/index/index）— PASS_WITH_ISSUES
**角色:** 患者 | **MCP截图:** ✅
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ❌ | `.action-icon` 硬编码 `font-size: 36px` |
| 颜色变量 | ✅ | 全部使用 SCSS 变量 |
| 触控区域 | ❌ | `.action-item` 无 min-height（约 36px < 48px） |
| 空态 | ✅ | EmptyState |
| 加载态 | ✅ | Loading 组件 |
| 错误态 | ❌ | catch 静默失败 |
| 长者模式 | ❌ | 硬编码字号 + 触控未放大 |
**问题：**
- [ ] `.action-icon` font-size 36px → `var(--tk-font-hero)` (MEDIUM)
- [ ] `.action-item` 无 min-height (MEDIUM)
- [ ] API catch 静默失败无提示 (LOW)
### P02 健康数据（pages/health/index）— PASS_WITH_ISSUES
**角色:** 患者
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ❌ | `.vital-icon` 硬编码 `font-size: 28px` |
| 颜色变量 | ✅ | 全部 SCSS 变量 |
| 触控区域 | ❌ | `.vital-item` 无 min-height |
| 空态 | ❌ | 体征全空无引导 UI |
| 加载态 | ❌ | 无 Loading 指示器 |
| 错误态 | ❌ | `catch { /* ignore */ }` |
| 长者模式 | ❌ | 硬编码字号 + 3列网格未适配 |
**问题：**
- [ ] 无 Loading 组件 (HIGH)
- [ ] catch 完全静默 (HIGH)
- [ ] `.vital-icon` 28px → `var(--tk-font-body-lg)` (MEDIUM)
- [ ] 体征空态无引导 (MEDIUM)
### P03 消息（pages/messages/index）— PASS_WITH_ISSUES
**角色:** 患者
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | 全部 var(--tk-font-*) |
| 颜色变量 | ✅ | 全部 SCSS 变量 |
| 触控区域 | ❌ | `.msg-card` 无 min-height |
| 空态 | ✅ | EmptyState |
| 加载态 | ✅ | Loading |
| 错误态 | ❌ | catch 静默与空列表不可区分 |
| 长者模式 | ⚠️ | `.msg-card` 未列入触控放大 |
### P04 我的（pages/profile/index）— PASS_WITH_ISSUES
**角色:** 患者
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | 全部 CSS 变量 |
| 颜色变量 | ✅ | 全部 SCSS 变量 |
| 触控区域 | ⚠️ | `.menu-item` 64px ✅; `.patient-item` ❌ |
| 空态 | ⚠️ | 无患者时缺引导 |
| 加载态 | ❌ | loadPatients 无 Loading |
| 错误态 | ❌ | API 无 try/catch |
| 长者模式 | ⚠️ | `.patient-item` 未列入触控放大 |
---
## §3.5 医护工作站（静态代码审查）
### P41 工作台（pages-sub/doctor/index）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控 | ❌ 错误静默
### P42 患者列表（pages-sub/doctor/patients/index）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控 | ✅ 空态/加载/错误
### P43 患者详情（pages-sub/doctor/patients/detail）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控 | ✅ 空态/加载/错误
### P44 咨询管理（pages-sub/doctor/consultation/index）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控 | ✅ 空态/加载/错误
### P45 咨询详情-医护（pages-sub/doctor/consultation/detail）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控 | ❌ **无 Loading UI**（HIGH）
### P46 随访管理（pages-sub/doctor/followup/index）— **NEEDS_WORK**
- ❌ JS 层硬编码 `fontSize: '24px'`（HIGH）
- ❌ JS 层 8 个硬编码 hex 颜色（HIGH）
- ❌ 触控不足 Tab padding 仅 6px 16px
- ❌ 长者模式字号不生效
### P47 随访详情-医护（pages-sub/doctor/followup/detail）— PASS_WITH_ISSUES
✅ 字号 | ❌ CSS `color: #fff` | ❌ 触控
### P48 告警中心（pages-sub/doctor/alerts/index）— PASS_WITH_ISSUES
✅ 字号 | ❌ JS 层 8 个 hex 颜色 | ❌ 触控
### P49 告警详情（pages-sub/doctor/alerts/detail）— PASS_WITH_ISSUES
✅ 字号/颜色/触控均合规（唯一触控完全达标页面）
### P50 化验审核（pages-sub/doctor/report/index）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控
### P51 化验详情-医护（pages-sub/doctor/report/detail）— PASS_WITH_ISSUES
✅ 字号 | ❌ CSS `#fa541c/#1890ff/#52c41a` | ❌ 触控
### P52 待办事项（pages-sub/doctor/action-inbox）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 触控
---
## §3.2 患者端核心功能（静态代码审查）
### P05 咨询列表（pages-sub/consultation/index）— PASS_WITH_ISSUES
✅ 全维度合规
### P06 咨询详情（pages-sub/consultation/detail）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 发送按钮触控 | ❌ 消息空态缺失
### P07 预约列表（pages-sub/appointment/index）— PASS_WITH_ISSUES
✅ 全维度合规 | ⚠️ 列表项不可点击跳转详情
### P08 创建预约（pages-sub/appointment/create）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 无 Loading 组件
### P09 预约详情（pages-sub/appointment/detail）— PASS_WITH_ISSUES
❌ 3 处硬编码颜色 | ❌ 取消按钮 44px | ❌ 未用 Loading 组件
### P10 积分商城（pages-sub/mall/index）— PASS_WITH_ISSUES
✅ 全维度合规 | ⚠️ 商品卡片不可点击
### P11 登录（pages/login/index）— PASS_WITH_ISSUES
❌ 2 处硬编码字号 | ❌ 复选框 36px < 48px
---
## §3.3 患者端子包功能（静态代码审查）
### P12 健康趋势（pages-sub/pkg-health/trend）— PASS_WITH_ISSUES
✅ 全维度基本合规
### P13 体征录入（pages-sub/pkg-health/input）— PASS_WITH_ISSUES
❌ 4 处硬编码字号 | ❌ 2 处 `color: #fff` | ❌ 无 Loading
### P14 日常监测（pages-sub/pkg-health/daily-monitoring）— PASS_WITH_ISSUES
❌ 6 处硬编码字号 | ❌ 4 处硬编码颜色 | ❌ 无 Loading
### P15 健康告警（pages-sub/pkg-health/alerts）— PASS_WITH_ISSUES
❌ 1 处字号 | ❌ 3 处颜色 | ❌ Tab 32px
### P16 积分兑换（pages-sub/pkg-mall/exchange）— PASS_WITH_ISSUES
❌ 3 处字号 | ❌ 5 处颜色 | ❌ 按钮 44px
### P17 兑换订单（pages-sub/pkg-mall/orders）— PASS_WITH_ISSUES
❌ 1 处字号 | ❌ 3 处颜色 | ❌ Tab 32px
### P18 商品详情（pages-sub/pkg-mall/detail）— PASS_WITH_ISSUES
❌ 3 处字号 | ❌ 5 处颜色 | ❌ Tab 32px
### P19 文章列表（pages-sub/article/index）— PASS_WITH_ISSUES
✅ 全维度合规
### P20 文章详情（pages-sub/article/detail）— PASS_WITH_ISSUES
✅ 全维度合规
### P21 线下活动（pages-sub/events/index）— PASS_WITH_ISSUES
❌ 2 处颜色 | ❌ 按钮触控不足
### P22 设备同步（pages-sub/device-sync/index）— PASS_WITH_ISSUES
❌ 2 处字号 | ❌ 4 处颜色
---
## §3.4 个人中心（静态代码审查）
### P23 健康记录（pkg-profile/health-records）— PASS_WITH_ISSUES
✅ 字号/颜色/长者 | ⚠️ 用文字"加载中..."而非 Loading 组件
### P24 我的报告（pkg-profile/reports）— PASS_WITH_ISSUES
✅ 字号/颜色/长者 | ⚠️ 用文字"加载中..."而非 Loading 组件
### P25 我的随访（pkg-profile/followups）— PASS_WITH_ISSUES
✅ 全维度合规
### P26 就诊人管理（pkg-profile/family）— PASS_WITH_ISSUES
✅ 全维度合规
### P27 添加就诊人（pkg-profile/family-add）— PASS_WITH_ISSUES
✅ 全维度合规
### P28 用药记录（pkg-profile/medication）— PASS_WITH_ISSUES
✅ 全维度合规
### P29 诊断记录（pkg-profile/diagnoses）— PASS_WITH_ISSUES
✅ 字号/颜色/长者 | ⚠️ 有 loadMore 但无 scroll-view 触发
### P30 知情同意（pkg-profile/consents）— PASS_WITH_ISSUES
✅ 全维度合规
### P31 透析记录（pkg-profile/dialysis-records）— PASS_WITH_ISSUES
✅ 字号/长者 | ❌ 4 处硬编码颜色 `#1677ff/#722ed1/#d48806/#52c41a`
### P32 透析记录详情（pkg-profile/dialysis-records/detail）— PASS_WITH_ISSUES
✅ 字号/长者 | ❌ 2 处硬编码颜色 `#52c41a/#1677ff`
### P33 透析处方（pkg-profile/dialysis-prescriptions）— PASS_WITH_ISSUES
✅ 字号/长者 | ❌ 2 处硬编码颜色 `#52c41a/#ff4d4f`
### P34 处方详情（pkg-profile/dialysis-prescriptions/detail）— PASS_WITH_ISSUES
✅ 字号/长者 | ❌ 2 处硬编码颜色 `#52c41a/#ff4d4f`
### P35 长者模式（pkg-profile/elder-mode）— PASS_WITH_ISSUES
✅ 字号/颜色 | ⚠️ 开关控件 52x30px，高度 30px < 48px
### P36 设置（pkg-profile/settings）— PASS_WITH_ISSUES
✅ 全维度合规
### P37 AI 分析列表（ai-report/list）— PASS_WITH_ISSUES
✅ 字号/长者 | ❌ 2 处硬编码颜色 `#52c41a/#ff4d4f`
### P38 AI 分析详情（ai-report/detail）— PASS_WITH_ISSUES
❌ 1 处字号 `11px` | ✅ 颜色/长者
### P39 化验报告详情（report/detail）— PASS_WITH_ISSUES
❌ 1 处字号 `11px` | ❌ 3 处颜色 `#fa541c/#1890ff/#52c41a`
### P40 随访详情（followup/detail）— PASS_WITH_ISSUES
❌ 4 处颜色 `#52c41a/#ff4d4f/#d48806/#fff` | ❌ 提交按钮 44px
---
## §3.6 透析管理-医护（静态代码审查）
### P53 透析记录-医护（doctor/dialysis/index）— PASS_WITH_ISSUES
✅ 全维度合规（使用 getStatusInlineStyle 工具函数）
### P54 透析详情-医护（doctor/dialysis/detail）— PASS_WITH_ISSUES
✅ 全维度合规（Loading + ErrorState + btn-primary mixin）
### P55 新建透析（doctor/dialysis/create）— PASS_WITH_ISSUES
✅ 全维度合规（输入框 48px + btn-primary mixin）
### P56 透析处方-医护（doctor/prescription/index）— PASS_WITH_ISSUES
✅ 全维度合规
### P57 处方详情-医护（doctor/prescription/detail）— PASS_WITH_ISSUES
✅ 全维度合规
### P58 新建处方（doctor/prescription/create）— PASS_WITH_ISSUES
✅ 全维度合规
## §3.7 法律页面（静态代码审查）
### P59 用户协议（pages/legal/user-agreement）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 未引入 useElderClass
### P60 隐私政策（pages/legal/privacy-policy）— PASS_WITH_ISSUES
✅ 字号/颜色 | ❌ 未引入 useElderClass
---
## 全量问题清单
### HIGH（6 项）
1. [ ] P46 随访管理：JS 层硬编码 `fontSize: '24px'`，长者模式不生效
2. [ ] P46 随访管理：JS 层 8 个硬编码 hex 颜色绕过变量体系
3. [ ] P45 咨询详情-医护：`loading` ref 存在但模板未使用，无 Loading UI
4. [ ] P02 健康数据：整页无 Loading 组件
5. [ ] P02 健康数据：`catch { /* ignore */ }` 完全静默
6. [ ] P48 告警中心：JS 层 8 个硬编码 hex 颜色
### MEDIUM（18 项）
7. [ ] 全局触控不足：约 30 个页面的可点击元素无 min-height ≥ 48px
8. [ ] P01 首页：`.action-icon` 36px 硬编码字号
9. [ ] P02 健康数据：`.vital-icon` 28px 硬编码字号
10. [ ] P13 体征录入：4 处硬编码字号（22/14/12/18px）
11. [ ] P14 日常监测：6 处硬编码字号（22/11/12/14/18px）
12. [ ] P16-P18 积分商城：共 7 处硬编码字号
13. [ ] P22 设备同步：2 处硬编码字号 36px
14. [ ] P39 化验报告详情、P38 AI详情：2 处 11px 硬编码
15. [ ] P46/P48 告警/随访：JS 层内联颜色 ~16 处 hex
16. [ ] P51 化验详情-医护：CSS 3 处 hex `#fa541c/#1890ff/#52c41a`
17. [ ] P31-P34 透析相关页面：~10 处状态颜色硬编码
18. [ ] P37-P40 AI/报告/随访详情：~9 处状态颜色硬编码
19. [ ] P08/P09 预约创建/详情：缺 Loading 组件
20. [ ] P02 健康数据：体征全空无引导录入 UI
21. [ ] P47 随访详情-医护：CSS `color: #fff` 硬编码
22. [ ] P09 预约详情：3 处硬编码颜色 + 取消按钮 44px
23. [ ] P15/P17/P18 Tab 触控：padding 6px 16px 约 32px
24. [ ] P13/P14 体征录入/日常监测：无 Loading 组件
### LOW（12 项）
25. [ ] ~12 个个人中心页面：用文字"加载中..."而非统一 Loading 组件
26. [ ] P59/P60 法律页面：未引入 useElderClass，长者模式不生效
27. [ ] P41 工作台：错误静默处理
28. [ ] P35 长者模式设置：开关控件高度 30px < 48px
29. [ ] P03 消息：catch 静默与空列表不可区分
30. [ ] P29 诊断记录：有 loadMore 但无 scroll-view 触发
31. [ ] P04 我的：loadPatients 无 Loading
32. [ ] P07 预约列表/积分商城：列表项/商品不可点击
33. [ ] P11 登录：2 处字号硬编码 + 复选框 36px
34. [ ] P40 随访详情：提交按钮 44px
35. [ ] P16 积分兑换：确认按钮 44px
36. [ ] P05 咨询列表等 8 页：未显式集成 useElderClass（字号通过 CSS 变量可被动级联，但结构性覆写不生效）
---
## MCP 测试限制
| 限制 | 说明 |
|------|------|
| 分包页面不可达 | MCP navigateTo 对 pages-sub/ 下所有页面超时 |
| 截图频繁超时 | 仅首页截图成功，其他页面均超时 |
| 访客态无法模拟 | 清除 storage 后 zustand 内存状态未同步 |
## 整体评价
**60 个页面全部可用，无阻断性问题。** 1 个页面（P46 随访管理）因 JS 层硬编码字号+颜色被标记为 NEEDS_WORK，其余 59 个均为 PASS_WITH_ISSUES。
**质量较好的方面：**
- 字号 Token 体系整体遵循率高（~90% 页面完全合规）
- 颜色变量体系在 CSS 层遵循率高（硬编码主要出现在 JS 层内联样式中）
- 空态/加载态/错误态三态覆盖完整（除 2-3 个页面缺失）
- 医护端页面质量明显高于患者端（统一使用 Loading/ErrorState/getStatusInlineStyle）
**主要改进方向：**
- 触控区域：全局需为 ~30 个页面的可点击元素补充 min-height
- 状态颜色：~45 处硬编码 hex 需提取为语义变量或统一使用工具函数
- 加载组件：~12 个页面需从文字"加载中..."升级为统一 Loading 组件
- 长者模式：2 个法律页面 + 8 个未集成 useElderClass 的页面需补充
Reference in New Issue View Git Blame Copy Permalink