iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
281c71ebfc34c59edcbfdb65ff421b67ebfe008f
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

14 KiB
Raw Blame History

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 项）

  1. 全局触控不足：约 30 个页面的可点击元素无 min-height ≥ 48px
  2. P01 首页：.action-icon 36px 硬编码字号
  3. P02 健康数据：.vital-icon 28px 硬编码字号
  4. P13 体征录入：4 处硬编码字号（22/14/12/18px）
  5. P14 日常监测：6 处硬编码字号（22/11/12/14/18px）
  6. P16-P18 积分商城：共 7 处硬编码字号
  7. P22 设备同步：2 处硬编码字号 36px
  8. P39 化验报告详情、P38 AI详情：2 处 11px 硬编码
  9. P46/P48 告警/随访：JS 层内联颜色 ~16 处 hex
  10. P51 化验详情-医护：CSS 3 处 hex #fa541c/#1890ff/#52c41a
  11. P31-P34 透析相关页面：~10 处状态颜色硬编码
  12. P37-P40 AI/报告/随访详情：~9 处状态颜色硬编码
  13. P08/P09 预约创建/详情：缺 Loading 组件
  14. P02 健康数据：体征全空无引导录入 UI
  15. P47 随访详情-医护：CSS color: #fff 硬编码
  16. P09 预约详情：3 处硬编码颜色 + 取消按钮 44px
  17. P15/P17/P18 Tab 触控：padding 6px 16px 约 32px
  18. P13/P14 体征录入/日常监测：无 Loading 组件

LOW（12 项）

  1. ~12 个个人中心页面：用文字"加载中..."而非统一 Loading 组件
  2. P59/P60 法律页面：未引入 useElderClass，长者模式不生效
  3. P41 工作台：错误静默处理
  4. P35 长者模式设置：开关控件高度 30px < 48px
  5. P03 消息：catch 静默与空列表不可区分
  6. P29 诊断记录：有 loadMore 但无 scroll-view 触发
  7. P04 我的：loadPatients 无 Loading
  8. P07 预约列表/积分商城：列表项/商品不可点击
  9. P11 登录：2 处字号硬编码 + 复选框 36px
  10. P40 随访详情：提交按钮 44px
  11. P16 积分兑换：确认按钮 44px
  12. 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