# Web 前端性能与兼容性测试

> 测试工具: chrome-devtools MCP (Lighthouse + Performance Trace + Emulate)
> 截图: `g:\hms\screenshots/` | 追踪: `g:\hms\trace-*.json`

## 1. Lighthouse 审计

### 1.1 Desktop (Navigation)

| 类别 | 分数 | 状态 |
|------|------|------|
| Accessibility | **94** | GOOD |
| Best Practices | **100** | PERFECT |
| SEO | **100** | PERFECT |
| Agentic Browsing | **61** | NEEDS_WORK |

**失败审计项 (4):**
1. CLS 0.127 超过 0.1 阈值（Desktop 有，Mobile 无）
2. 浅色模式 `#94a3b8` 灰色文字在白底上对比度 2.56:1（需 4.5:1）
3. h1 后直接跳 h3，缺少 h2 层级
4. llms.txt 文件缺少 H1 标题和链接

### 1.2 Mobile (Navigation)

| 类别 | 分数 | 状态 |
|------|------|------|
| Accessibility | **94** | GOOD |
| Best Practices | **100** | PERFECT |
| SEO | **100** | PERFECT |
| Agentic Browsing | **67** | NEEDS_WORK |

**失败项与 Desktop 相同**（color-contrast + heading-order + llms-txt）。Mobile CLS 为 0 通过。

### 1.3 Dark Mode (Snapshot)

| 类别 | 分数 | 下降 |
|------|------|------|
| Accessibility | **92** | -2 |
| Best Practices | **100** | — |
| SEO | **80** | -20 |

**Dark Mode 额外问题:**
- 侧边栏菜单项对比度不足（4.39:1 / 3.95:1 / 4.45:1，均未达 4.5:1）
- 表单元素缺少 `label` 关联
- 分页链接不可爬取

## 2. Core Web Vitals

### 2.1 工作台（Dashboard）

| 指标 | 值 | 评级 |
|------|-----|------|
| **LCP** | **1381ms** | NEEDS IMPROVEMENT |
| **CLS** | **0.04** | GOOD |
| **TTFB** | **6ms** | GOOD |
| DOM 大小 | 311 elements | GOOD |
| DOM 深度 | 13 层 | GOOD |

**LCP 瓶颈:** TTFB 6ms (0.4%) + Render Delay **1375ms (99.6%)**
**CLS 根因:** Noto Sans SC 字体从 Google Fonts 加载导致 FOUT，5 个 woff2 文件

### 2.2 患者列表

| 指标 | 值 | 评级 |
|------|-----|------|
| **LCP** | **2643ms** | NEEDS IMPROVEMENT |
| **CLS** | **0.01** | GOOD |
| **TTFB** | **4ms** | GOOD |
| DOM 大小 | 944 elements | MODERATE |

**LCP 瓶颈:** TTFB 4ms (0.2%) + Render Delay **2639ms (99.8%)**

**强制回流:** 总计 **460ms**
- `measureScrollbarSize` (antd): 341ms + 43ms
- `setScaleParam` (antd): 76ms
- 全部来自 Ant Design 表格组件内部

## 3. 多视口兼容性

### 3.1 Desktop 1920×1080 — PASS
- 侧边栏展开，菜单完整
- 表格完整显示
- **注意:** 仪表盘出现"网络连接异常"错误提示

### 3.2 Laptop 1366×768 — PASS
- 侧边栏正常展开
- 患者表格完整，分页器可见
- 筛选栏全部可见

### 3.3 Tablet iPad 768×1024 — **FAIL (HIGH)**

- 侧边栏折叠为仅图标模式
- **面包屑显示"页面"而非实际名称**
- **表格数据完全未加载** — 主内容区只有头部和筛选栏，表格区域为空
- 评级: **H-03**

### 3.4 Mobile iPhone 375×812 — **FAIL (CRITICAL)**

- 侧边栏展开覆盖全屏
- 8 列数据在 375px 宽度严重挤压
- 出现 3 条错误消息（"网络连接异常" + 2×"加载数据失败"）
- 操作按钮（edit/delete）极小，触摸目标不足 44px
- 评级: **C-03** — 应提供卡片视图替代

### 3.5 Mobile Landscape 812×375 — **FAIL (CRITICAL)**

- **内容区域完全空白** — main 区域只有 loading/busy 状态
- 面包屑显示"页面"
- 评级: **C-04**

## 4. Dark Mode 对比度问题

### 4.1 侧边栏低对比度

| 元素 | 对比度 | 标准 |
|------|--------|------|
| 跳转链接 / H logo | 4.07:1 | 需 4.5:1 |
| 患者中心 | 4.39:1 | 需 4.5:1 |
| 患者管理 | 3.95:1 | 需 4.5:1 |

### 4.2 系统管理卡片浅色背景（Dark Mode 下不协调）

| 元素 | 对比度 | 背景 |
|------|--------|------|
| 运行中 | 3.15:1 | 浅绿 |
| 菜单管理 | 3.84:1 | 浅蓝 |
| 系统配置 | 3.07:1 | 浅黄 |

**根因:** 系统管理区块在 Dark Mode 下仍使用浅色背景，未跟随主题切换。

## 5. 网络请求分析

### 5.1 API 重复调用

仪表盘每个端点被调用 **4 次**:

| 端点 | 调用次数 |
|------|---------|
| `/health/admin/statistics/patients` | ×4 |
| `/health/admin/statistics/consultations` | ×4 |
| `/health/admin/statistics/follow-ups` | ×4 |
| `/health/admin/points/statistics` | ×4 |
| `/health/admin/statistics/health-data` | ×4 |
| `/health/admin/statistics/dialysis` | ×4 |
| `/health/doctors` | ×4 |
| `/menus/user` | ×4 |
| `/config/themes` | ×4 |
| `/health/action-inbox` | ×4 |

**根因:** 可能来自 React Strict Mode 双重渲染 + 组件重复挂载
**评级:** H-05

### 5.2 第三方资源

| 资源 | 大小 | 影响 |
|------|------|------|
| Google Fonts (Noto Sans SC) | 1.3 MB | 最大外部资源，导致 CLS |

## 6. 问题汇总

| ID | 严重性 | 问题 | 修复建议 | 工时 |
|----|--------|------|----------|------|
| C-03 | CRITICAL | Mobile 375px 表格不可用 | 添加 `<768px` 卡片视图 | 2d |
| C-04 | CRITICAL | Mobile 横屏内容空白 | 修复 812×375 路由加载 | 4h |
| H-03 | HIGH | Tablet 768px 数据不加载 | 修复断点 + 侧边栏同步 | 4h |
| H-04 | HIGH | 患者列表 LCP 2643ms | 字体预加载 + 虚拟滚动 | 1d |
| H-05 | HIGH | 仪表盘 API ×4 重复调用 | 检查 useEffect 依赖 | 4h |
| M-03 | MEDIUM | 浅色模式 #94a3b8 对比度 | 改为 #64748b | 30min |
| M-04 | MEDIUM | Dark Mode 系统管理卡片 | 深色背景变体 | 4h |
| M-05 | MEDIUM | Antd 表格 reflow 460ms | 固定 scroll.x/y | 2h |
| M-06 | MEDIUM | Noto Sans SC 1.3MB CLS | font-display: optional | 1h |
| M-07 | MEDIUM | 面包屑显示"页面" | 修复 tablet/mobile 路由名 | 1h |
| L-01 | LOW | heading-order h1→h3 | 插入 h2 或 aria-level | 30min |
| L-02 | LOW | 表单元素缺 label | 添加 aria-label | 1h |
| L-03 | LOW | antd Drawer width 弃用 | 迁移到 size 属性 | 30min |