# 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 小时工作量。*