# UX 一致性审计（Web vs 小程序）

> 审计范围：`apps/web` vs `apps/miniprogram`，基于代码审查

## 1. 日期格式化

| 维度 | Web | 小程序 | 一致性 |
|------|-----|--------|--------|
| 库 | `dayjs` v1.11（含 relativeTime 插件、zh-cn locale） | **无第三方库**，原生 `Date` + `toLocaleDateString('zh-CN')` | **不一致** |
| 日期格式 | `YYYY-MM-DD` / `YYYY-MM-DD HH:mm` / `fromNow()` | 每个页面独立实现 `formatDate()`，输出不统一 | **不一致** |
| 空值处理 | 统一返回 `'--'` | 无统一空值处理 | **不一致** |

**问题**：MP 端有 6+ 处独立的 `formatDate` 实现（orders/events/daily-monitoring/doctor-report/followup 等），格式各异。Web 端通过 `utils/format.ts` 统一。

## 2. 数字格式化

| 维度 | Web | 小程序 |
|------|-----|--------|
| 方式 | `.toFixed(1)` / `.toFixed(2)` 散布在组件中 | TrendChart 中 `val.toFixed(1)` |
| 统一工具 | **无** | **无** |

**问题**：两端均无统一的数字格式化工具。体重/血压等健康数值没有统一的精度标准（如保留 1 位还是 2 位小数）。

## 3. 状态标签

| 状态 | Web（Ant Tag） | MP（CSS class） | 文案一致？ |
|------|---------------|-----------------|-----------|
| pending | `gold` "待确认" | `$wrn`(琥珀) "待确认" | **是** |
| confirmed | `blue` "已确认" | `$acc`(鼠尾草绿) "已确认" | **色不同** |
| completed | `green` "已完成" | `$pri`(赤土橙) "已完成" | **色不同** |
| cancelled | `default` "已取消" | `$tx3`(灰) "已取消" | **是** |

**问题**：confirmed 和 completed 的语义色映射不一致。Web 用蓝/绿，MP 用绿/橙。MP 端无统一 StatusTag 组件，预约页和咨询页各自定义 `STATUS_MAP`。

## 4. 空状态

| 维度 | Web | 小程序 |
|------|-----|--------|
| 组件 | Ant Design `<Empty>` | 自研 `<EmptyState>` 组件 |
| 文案 | "暂无数据"/"暂无消息"/"暂无待办" 等 10+ 种 | "暂无预约"/"暂无报告" 等 |
| 图标 | Ant 内置简单图标 | Emoji（📭） |
| 行动按钮 | 部分有 | 支持可选 `actionText` + `onAction` |

**结论**：结构基本一致，但图标风格不统一（Ant 图标 vs Emoji）。

## 5. 加载状态

| 维度 | Web | 小程序 |
|------|-----|--------|
| 组件 | Ant `<Spin>` | 自研 `<Loading>` 组件 |
| 样式 | Ant 旋转圆环 + 可选文字 | 自定义 spinner + "加载中..." |
| 全局 | Suspense fallback 用 Spin | 无全局加载 |

**结论**：基本一致，均为旋转动画 + 文字。

## 6. 错误提示

| 场景 | Web | 小程序 |
|------|-----|--------|
| 403 | `antMessage.error('权限不足')` | 无 403 专用处理 |
| 404 | 静默（组件自行处理） | `<ErrorState text='未找到'>` |
| 500 | `antMessage.error('服务器异常')` | 抛出 `'请求失败'` |
| 运行时崩溃 | `<ErrorBoundary>` → Ant `Result` 页面 | `<ErrorBoundary>` → 自定义页面（emoji + 文字） |

**问题**：MP 端 `request.ts` 无 HTTP 状态码分支处理，所有非成功统一 `throw new Error(body.message)`。

## 7. 适老化（MP 端）

MP 设计系统 `variables.scss` 已定义老年友好参数：

- `$touch-min: 48px` — 满足 WCAG 最小触控
- `$btn-primary-h: 56px` — 主按钮足够大
- `$font-min: 22px` — 最小字号（约 11pt）

**实际检测**：部分页面存在 20px 以下字号（如 `WeekCalendar` 20px、`appointment` 20px），**低于 $font-min 阈值**。约 15 处 20-22px 的字号处于边界线。

**建议**：全局 audit 所有 < 22px 字号，确保不低于设计系统最低值。

---

## 优先修复建议

1. **P0** — MP 端引入 dayjs 或抽取统一 `formatDate` 工具，消除 6+ 处重复实现
2. **P1** — 统一状态标签色值：confirmed(completed) 应两端语义一致
3. **P1** — MP `request.ts` 增加 403/500 分支处理
4. **P2** — 抽取统一数字格式化工具（精度标准：体重 1 位、血压 0 位、血糖 1 位）
5. **P2** — MP 端将 < 22px 字号提升至 22px 以上