df1d85bfde
- T40 UI 审计计划和结果文档（docs/qa/） - wiki 更新：miniprogram 设计系统合规审计记录 + index 关键数字更新 - 审计 V2 完整报告（docs/audits/v2/） - 讨论记录文档（docs/discussions/） - 设计规格和实施计划（docs/superpowers/） - 角色测试计划和结果（docs/qa/role-test-*） - Docker 生产部署配置
88 lines
4.0 KiB
Markdown
88 lines
4.0 KiB
Markdown
# 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 以上
|