# UI Review

- 审查目标：`src/prototypes/xll-miniapp`（小羚羚小程序）
- 使用设计依据：`src/prototypes/xll-miniapp/DESIGN.md`（V1.0，自现有源码 token/组件规范提炼）
- 生成时间：2026-06-29
- 修复时间：2026-06-29

## 总体点评

小羚羚小程序在**手机预览框 + 微信式 chrome** 上形成了较稳定的自有视觉语言：品牌绿 `#7AB929`、Arco 系中性灰、14px 圆角卡片与流程色条标签，审批中心近期的 **`.xll-mod-sheet-*` 手机框内抽屉**与滚轮选择器与 DESIGN.md 方向一致。运维类长表单（交车、车辆管理）信息密度高但层级尚可辨认，Hero 区按流程配色有助于扫读。

**2026-06-29 修复后**：P1–P3 共 5 项已全部落地——底栏与列表辅助文字可读性提升、卡片 focus 环补齐、车辆筛选改为框内 sheet、Ant `message` 统一为框内 `MpToast`、列表卡片左侧色条改为顶部 2px 色带。Impeccable detector 仅剩 1 条 `layout-transition` warning（非本次范围）。

## 修复记录

| 优先级 | 问题 | 状态 | 修复说明 |
|--------|------|------|----------|
| P1 | 辅助文字字号与对比度不足 | ✅ 已修复 | 底栏 Tab 13px；`.xll-mod-list-head` / `.xll-mod-meta` 13px + `COLOR_TEXT_SEC` |
| P1 | 列表卡片缺 focus 环 | ✅ 已修复 | `.xll-mod-card:focus-visible`、`.xll-mod-card-btn:focus-visible` |
| P2 | 车辆管理 Ant Drawer | ✅ 已修复 | 筛选改为 `.xll-mod-sheet-overlay`，与审批/交车一致 |
| P2 | Ant message 脱离手机框 | ✅ 已修复 | 封装 `MpToast` + `MpToastHost`，全文件 117 处替换 |
| P3 | 左侧 3px 色条 AI accent | ✅ 已修复 | 卡片改为顶部 2px 色带；`.xll-prd-highlight` 改顶部色带 |

## P0-P3 优先级问题（原始记录）

### P1 - 辅助文字字号与对比度未达 DESIGN.md 可读底线 ✅

- 证据：底栏 Tab 标签 `font-size: 11px`（`.xll-tabbar-btn`）；列表区头 / 元信息 `12px` + `COLOR_MUTED`。
- 修复：底栏 **13px**；列表区头 / meta **13px** + `COLOR_TEXT_SEC`；「去审批」按钮 **44px** 触控高。

### P1 - 可点击列表卡片缺少键盘 focus 可视反馈 ✅

- 证据：`.xll-mod-card` 无 `:focus-visible`。
- 修复：`outline: 2px solid XLL_GREEN; outline-offset: 2px`；上传区 `.xll-mod-upload:focus-visible` 同步补齐。

### P2 - 车辆管理等模块仍用 Ant Design 全宽 Drawer ✅

- 证据：车辆管理「筛选车辆」曾用 `<Drawer placement="bottom">`。
- 修复：迁移为 `.xll-mod-sheet-panel` 结构，挂载于 `.xll-mod-root` 内；返回键可关闭 sheet。

### P2 - Ant Design `message` 反馈脱离手机预览框 ✅

- 证据：全文件大量 `message.*` 挂载 document 层。
- 修复：`mpToast` 限定在 `.xll-phone` 内顶部 stack 展示。

### P3 - 列表卡片左侧色条被识别为通用 AI 侧栏 accent ✅

- 证据：`.xll-mod-card::before` 3px 左侧色条；`.xll-prd-highlight` 左侧 border。
- 修复：改为**顶部 2px 色带**；工作台 `.xll-task-card` 同步。

## 核心元件

### 手机 Chrome（状态栏 / 导航栏 / 胶囊 / 底栏 Tab）

**符合点**：390px 预览框、44px 触控区、Tab 带 `role="tablist"` 与 `aria-selected`；底栏标签已升至 13px。

### 审批中心（Tab + 搜索 + Chip + 列表卡片 + Sheet）

**符合点**：四 Tab 结构清晰；搜索 15px + focus-within 绿环；框内 sheet；卡片 focus 环与 44px 操作按钮。

### 详情 Hero + 底部操作栏（提车 / 还车 / 通用审批）

**符合点**：`.tc-hero` 渐变 + 大字号金额；`.tc-action-bar` 固定底栏、按钮高度 44px+；`prefers-reduced-motion` 已覆盖 sheet 动画。

### 运维长表单（交车 / 车辆管理 / 年审）

**符合点**：分步导航、44px 表单行；车辆筛选已与审批中心 sheet 一致；上传区有 focus 样式。

## 响应式与可访问性

- **响应式**：原型锁定 390px 宽，无断点需求。
- **触控**：主按钮与「去审批」≥44px。
- **键盘**：Tab 栏 / 搜索 / 返回 / 列表卡片 / 上传区有 focus 环。
- **对比度**：列表辅助信息改用 `COLOR_TEXT_SEC` 13px，可读性提升。
- **Reduced motion**：sheet / 卡片入场已降级。
- **语义**：审批 Tab、筛选 sheet 有 `aria-modal` / `aria-label`；toast 有 `aria-live="polite"`。

## 证据与评估说明

- **浏览器/截图**：本次未启动浏览器目视检查；结论基于源码静态审查 + 修复 diff。
- **Scanner**：`detect.mjs` 修复后仅剩 1 条 `layout-transition: width` warning（约 461 行），`side-tab` 已消除。
- **独立评估**：`degraded`（无浏览器双评估）。
