iven/hms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
447126b6c547adcec831756e2e2e1daa0b0a85f9
hms/docs/qa/role-test-results/T40-ui-audit-results.md
iven a8d7183d7c fix(mp): T40 UI 审计修复 — 28 项设计系统合规 + MCP forceSetAuth bridge 
T40 小程序 UI 审计全部 60 页面，发现 28 项问题（HIGH×3 MEDIUM×10 LOW×15），
全部修复并通过静态验证（0 硬编码 border-radius/font-size 残留）。

主要修复：
- border-radius: 12 个文件硬编码值 → $r-xs/$r-lg/$r-pill 设计 token
- touch target: 5 个交互元素添加 min-height: 48px（action-inbox/mall/family/medication）
- elder-mode 页面接入 useElderClass()，预览字号改用 var(--tk-font-body)
- consultation 页面增加加载失败 toast 提示
- app.tsx 新增 forceSetAuth bridge 解决 MCP auth 注入兼容问题
- FAB 按钮和开关控件尺寸规范化

审计结果：PASS 41 / PASS_WITH_ISSUES 19 → 修复后全量 PASS
2026-05-14 09:38:02 +08:00

318 lines
12 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-14 | 分支: feat/media-library-banner | 审查方法: 静态代码审查 + MCP 实时验证
>
> 审查计划: `docs/qa/T40-miniprogram-ui-audit-plan.md`
## 审查汇总
| 分组 | 页面数 | PASS | PASS_WITH_ISSUES | NEEDS_WORK |
|------|--------|------|-----------------|------------|
| §3.1 TabBar 页面 | 4 | 1 | 3 | 0 |
| §3.2 患者端核心功能 | 7 | 4 | 3 | 0 |
| §3.3 患者端子包功能 | 11 | 9 | 2 | 0 |
| §3.4 个人中心子页面 | 18 | 15 | 3 | 0 |
| §3.5 医护工作站 | 12 | 4 | 8 | 0 |
| §3.6 透析管理 + §3.7 法律 | 8 | 8 | 0 | 0 |
| **合计** | **60** | **41** | **19** | **0** |
**通过率: 100% (0 NEEDS_WORK), 其中 68.3% 完全通过, 31.7% 有轻微问题**
## 问题统计
| 严重级 | 数量 | 类型分布 |
|--------|------|----------|
| HIGH | 3 | 硬编码字号 1 + 错误态遗漏 1 + 触控不足 1 |
| MEDIUM | 10 | 触控区域不足 5 + 圆角硬编码 3 + 模式 hook 缺失 1 + 边框硬编码 1 |
| LOW | 15 | 装饰性圆角硬编码 10 + 样式不一致 2 + 无 :active 反馈 2 + 无 toast 提示 1 |
## 关键合规指标
| 指标 | 合规率 | 说明 |
|------|--------|------|
| 字号 Token (`var(--tk-font-*)`) | **59/60 (98.3%)** | 仅 1 处硬编码: `elder-mode/index.scss` 的预览示例 |
| 颜色 SCSS 变量 | **60/60 (100%)** | 零硬编码 hex（index.scss 渐变中间色为设计意图） |
| 长者模式覆盖 | **59/60 (98.3%)** | 仅 `elder-mode/index.scss` 自身未使用 hook |
| 空态处理 | **39/60** | 列表页全覆盖；21 个表单/详情/设置页 N/A |
| 加载态处理 | **52/60** | 8 个设置/静态页/表单页无独立加载态 |
| 错误态处理 | **55/60** | API 页面全覆盖；5 个静态页无 API 调用 |
---
## 详细审查结果
### Batch 1 — TabBar 页面 (P1-P4)
#### P1 首页（pages/index/index）
**角色:** 访客 + 患者 | **截图:** 有 | **结果: PASS_WITH_ISSUES**
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | 全部 var(--tk-font-*) |
| 颜色变量 | ✅ | 全部 SCSS 变量（渐变中间色 #3D5A40/#8B6F4E 为设计意图） |
| 圆角变量 | ✅ | 全部 $r/$r-sm/$r-xs/$r-pill |
| 触控区域 | ✅ | greeting-bell 44px（略低于 48px） |
| 空态 | ✅ | 轮播图/文章均有 fallback |
| 加载态 | ✅ | Loading 组件 + remindersLoading |
| 错误态 | ✅ | catch + showToast |
| 长者模式 | ✅ | modeClass |
| 访客守卫 | ✅ | 内置 GuestHome/HomeDashboard 切换 |
**问题:**
- [ ] greeting-bell 44px 触控区域略低于 48px 标准（LOW）
#### P2 健康数据（pages/health/index）
**角色:** 患者 | **结果: PASS_WITH_ISSUES**
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | |
| 触控区域 | ✅ | vital-tab 40px（Tab 按钮略低） |
| 空态 | ✅ | trend-empty + 资讯入口 |
| 加载态 | ✅ | Loading 组件 |
| 错误态 | ✅ | catch + toast |
| 长者模式 | ✅ | useElderClass |
| 访客守卫 | ✅ | GuestGuard 组件 |
**问题:**
- [ ] vital-tab height 40px 低于 48px（LOW）
#### P3 消息（pages/messages/index）
**角色:** 患者 | **结果: PASS_WITH_ISSUES**
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | |
| 触控区域 | ✅ | msg-segment-tab 40px |
| 空态 | ✅ | 咨询/通知双空态 |
| 加载态 | ✅ | Loading |
| 错误态 | ✅ | catch + toast |
| 长者模式 | ✅ | useElderClass |
| 访客守卫 | ✅ | GuestGuard 组件 |
**问题:**
- [ ] msg-segment-tab height 40px 低于 48px（LOW）
#### P4 我的（pages/profile/index）
**角色:** 访客 + 患者 | **结果: PASS**
| 维度 | 状态 | 备注 |
|------|------|------|
| 字号 Token | ✅ | |
| 颜色变量 | ✅ | |
| 圆角变量 | ✅ | |
| 触控区域 | ✅ | menu-item min-height: 48px |
| 空态 | N/A | |
| 加载态 | N/A | |
| 错误态 | N/A | |
| 长者模式 | ✅ | mode 变量（未使用 useElderClass hook，但功能等价） |
---
### Batch 2 — 医护工作站 (P41-P52)
> 静态代码审查。MCP 分包导航超时（已知限制 LIMIT-2），未进行实时截图验证。
| # | 页面 | 结果 | 关键问题 |
|---|------|------|---------|
| P41 | 医护工作台 | PASS | |
| P42 | 患者列表 | PASS | |
| P43 | 患者详情 | PASS | |
| P44 | 咨询管理 | PASS_WITH_ISSUES | border-radius: 2px 硬编码 |
| P45 | 咨询详情(医护) | PASS | |
| P46 | 随访管理 | PASS_WITH_ISSUES | border-radius: 2px 硬编码 |
| P47 | 随访详情(医护) | PASS | |
| P48 | 告警中心 | PASS | |
| P49 | 告警详情 | PASS_WITH_ISSUES | 告警操作按钮触控区域不足 |
| P50 | 化验审核 | PASS | |
| P51 | 化验详情(医护) | PASS | |
| P52 | 待办事项 | PASS_WITH_ISSUES | Tab 触控区域不足 48px（HIGH）; border-radius: 2px 硬编码 |
**Batch 2 问题清单:**
| 级别 | 页面 | 问题 |
|------|------|------|
| HIGH | P52 待办事项 | Tab 触控区域不足 48px |
| MEDIUM | P44 咨询管理 | border-radius: 2px 硬编码 |
| MEDIUM | P46 随访管理 | border-radius: 2px 硬编码 |
| MEDIUM | P52 待办事项 | border-radius: 2px 硬编码 |
| LOW | P48 告警中心 | 多处装饰性 border-radius 硬编码 |
| LOW | P44/P46/P50/P52 | 各处 border-radius: 2px（Tab 指示条） |
---
### Batch 3 — 患者端核心功能 (P5-P11)
| # | 页面 | 结果 | 关键问题 |
|---|------|------|---------|
| P5 | 咨询列表 | PASS_WITH_ISSUES | catch 无 toast; avatar/tag 圆角硬编码 |
| P6 | 咨询详情 | PASS | |
| P7 | 预约列表 | PASS | |
| P8 | 创建预约 | PASS | |
| P9 | 预约详情 | PASS | |
| P10 | 积分商城 | PASS_WITH_ISSUES | 签到按钮约 40px; type-tab 圆角硬编码 |
| P11 | 登录 | PASS_WITH_ISSUES | divider-line 圆角硬编码 |
**Batch 3 问题清单:**
| 级别 | 页面 | 问题 |
|------|------|------|
| HIGH | P5 咨询列表 | `loadSessions` catch 块缺少 showToast，用户无法感知加载失败 |
| MEDIUM | P5 咨询列表 | `.session-avatar` border-radius: 18px 硬编码 |
| MEDIUM | P5 咨询列表 | `.session-tag` border-radius: 4px 硬编码 |
| MEDIUM | P10 积分商城 | `.checkin-btn` 触控区域约 40px < 48px |
| LOW | P10 积分商城 | `.type-tab.active::after` border-radius: 2px |
| LOW | P11 登录 | `.login-divider-line` border-radius: 2px |
---
### Batch 4 — 患者端子包功能 (P12-P22)
| # | 页面 | 结果 |
|---|------|------|
| P12 | 健康趋势 | PASS |
| P13 | 体征录入 | PASS |
| P14 | 日常监测 | PASS |
| P15 | 健康告警 | PASS |
| P16 | 积分兑换 | PASS |
| P17 | 兑换订单 | PASS_WITH_ISSUES | status-tab 圆角硬编码 |
| P18 | 商品详情 | PASS_WITH_ISSUES | type-tab 圆角硬编码 |
| P19 | 文章列表 | PASS |
| P20 | 文章详情 | PASS |
| P21 | 线下活动 | PASS |
| P22 | 设备同步 | PASS |
**Batch 4 问题清单:**
| 级别 | 页面 | 问题 |
|------|------|------|
| LOW | P17 兑换订单 | `.status-tab.active::after` border-radius: 2px |
| LOW | P18 商品详情 | `.type-tab.active::after` border-radius: 2px |
---
### Batch 5 — 个人中心子页面 (P23-P40)
| # | 页面 | 结果 | 关键问题 |
|---|------|------|---------|
| P23 | 健康记录 | PASS | |
| P24 | 我的报告 | PASS | |
| P25 | 我的随访 | PASS | |
| P26 | 就诊人管理 | PASS_WITH_ISSUES | 编辑按钮触控不足 48px |
| P27 | 添加就诊人 | PASS | |
| P28 | 用药记录 | PASS_WITH_ISSUES | toggle 44px; delete-btn 触控不足; 非标 Loading |
| P29 | 诊断记录 | PASS | |
| P30 | 知情同意 | PASS | |
| P31 | 透析记录 | PASS | |
| P32 | 透析详情 | PASS | |
| P33 | 透析处方 | PASS | |
| P34 | 处方详情 | PASS | |
| P35 | 长者模式 | PASS_WITH_ISSUES | 硬编码 font-size: 21px; 无 useElderClass |
| P36 | 设置 | PASS | |
| P37 | AI 分析列表 | PASS | |
| P38 | AI 分析详情 | PASS | |
| P39 | 化验报告详情 | PASS | |
| P40 | 随访详情 | PASS | |
**Batch 5 问题清单:**
| 级别 | 页面 | 问题 |
|------|------|------|
| HIGH | P35 长者模式 | `.elder-mode-preview-sample--large` font-size: 21px 硬编码 |
| MEDIUM | P35 长者模式 | 页面自身未使用 useElderClass() hook |
| MEDIUM | P26 就诊人管理 | `.family-edit` 编辑按钮触控不足 48px |
| MEDIUM | P28 用药记录 | `.toggle` 开关高度 44px < 48px |
| MEDIUM | P28 用药记录 | `.delete-btn` 删除按钮触控不足 48px |
| LOW | P28 用药记录 | 加载态使用自定义文字而非统一 Loading 组件 |
| LOW | P26 就诊人管理 | `.family-edit-text` 无 :active 反馈 |
---
### Batch 6 — 透析管理 + 法律页面 (P53-P60)
| # | 页面 | 结果 |
|---|------|------|
| P53 | 透析记录(医护) | PASS |
| P54 | 透析详情(医护) | PASS |
| P55 | 新建透析 | PASS |
| P56 | 透析处方(医护) | PASS |
| P57 | 处方详情(医护) | PASS |
| P58 | 新建处方 | PASS |
| P59 | 用户协议 | PASS |
| P60 | 隐私政策 | PASS |
Batch 6 零问题。
---
## MCP 实时验证记录
### 已验证页面
| 页面 | 角色 | 方式 | 结果 |
|------|------|------|------|
| pages/index/index | 访客 | reLaunch + screenshot | 轮播图+文章+登录引导正常 |
| pages/index/index | 患者(admin) | inject_auth + reLaunch + page_data | 问候区+进度环+体征网格+快捷操作正常 |
| pages/health/index | 患者(admin) | switchTab + page_data | AI建议+体征Tab+录入表单+趋势图正常 |
| pages/messages/index | 患者(admin) | switchTab | 导航成功 |
| pages/profile/index | 患者(admin) | switchTab + page_data | 用户卡片+积分统计+分组菜单正常 |
### 未验证页面（MCP 限制）
分包页面通过 MCP navigateTo/reLaunch 导航超时，DevTools 无响应（已知限制 LIMIT-2）。
涉及全部 Batch 2/4/5/6 的分包页面，需手动在 DevTools 中验证。
### MCP 限制汇总
1. **截图超时** — 部分页面截图超时，改用 page_data 替代
2. **分包导航超时** — navigateTo 到 `pages/doctor/*`、`pages/pkg-*/*` 超时，DevTools 无响应
3. **角色切换** — doctor_test 用户注入后分包页面无法加载，可能需要重新编译小程序
---
## 建议修复优先级
### HIGH（3 个，建议立即修复）
| # | 文件 | 修复方案 |
|---|------|---------|
| H1 | `consultation/index.tsx` loadSessions catch | 添加 `Taro.showToast({ title: '加载失败', icon: 'none' })` |
| H2 | `pkg-profile/elder-mode/index.scss:125` | `font-size: 21px` → `font-size: var(--tk-font-body-sm)` 或对应 token |
| H3 | `doctor/action-inbox/index.scss` Tab | 调整 Tab min-height 至 48px |
### MEDIUM（10 个，建议本迭代修复）
| # | 文件 | 修复方案 |
|---|------|---------|
| M1 | `consultation/index.scss` session-avatar | `border-radius: 18px` → `$r-lg` |
| M2 | `consultation/index.scss` session-tag | `border-radius: 4px` → `$r-xs` |
| M3 | `mall/index.scss` checkin-btn | 增大 padding 使高度 ≥ 48px |
| M4 | `pkg-profile/elder-mode/index.tsx` | 添加 `useElderClass()` hook |
| M5 | `pkg-profile/family/index.scss` family-edit | 增大 padding 使触控区域 ≥ 48px |
| M6 | `pkg-profile/medication/index.scss` toggle | 调整高度至 48px |
| M7 | `pkg-profile/medication/index.scss` delete-btn | 增大 padding 使触控区域 ≥ 48px |
| M8 | `doctor/consultation/index.scss` Tab indicator | `border-radius: 2px` → 使用变量 |
| M9 | `doctor/followup/index.scss` Tab indicator | `border-radius: 2px` → 使用变量 |
| M10 | `doctor/action-inbox/index.scss` Tab indicator | `border-radius: 2px` → 使用变量 |
### LOW（15 个，可批量修复）
均为装饰性 `border-radius: 2px`（Tab 指示条）和轻微样式不一致，影响极小。
涉及文件：`mall/index.scss`、`pkg-mall/orders/index.scss`、`pkg-mall/detail/index.scss`、`login/index.scss`、`doctor/dialysis/index.scss`、`doctor/prescription/index.scss`、`pkg-profile/followups/index.scss` 等。
---
## 结论
T40 UI 审查覆盖全部 60 个页面，**零 NEEDS_WORK**。设计体系接入率极高（字号 98.3%、颜色 100%、长者模式 98.3%）。主要问题集中在：
1. **border-radius 硬编码**（15 处 LOW + 3 处 MEDIUM）— 几乎都是 `border-radius: 2px` 的 Tab 指示条装饰线，建议统一提取为 `$r-line` 变量
2. **触控区域不足**（5 处 MEDIUM + 1 处 HIGH）— 小按钮/Toggle/Tab 高度在 40-44px，建议统一增大至 48px
3. **1 处字号硬编码**（HIGH）— `elder-mode` 页面预览示例，需改为 token
建议下一步：批量修复 HIGH 3 项 + MEDIUM 10 项，LOW 项可作为 lint 规则后续统一处理。
Reference in New Issue View Git Blame Copy Permalink