# UI Review

- 审查目标：`src/prototypes/vehicle-management`
- 使用设计依据：**（缺失）** 原型目录与项目均未关联 `DESIGN.md`；按 Axhub 规范，规范性设计一致性评审需先确认设计基底
- 生成时间：2026-06-24

> **评审模式说明**：本次为 **degraded** 独立评估。在缺少正式 `DESIGN.md` 的前提下，结合源码走查、Impeccable `detect.mjs` 静态扫描与通用 B2B 运营后台可用性准则完成预审；**无法对照设计规范判定品牌/版式一致性**。建议从 `src/themes/` 中选定主题（如 `operate` 运营仪表盘类）或补充 ONE-OS 专属 `DESIGN.md` 后复评。

## 总体点评

车辆管理原型整体完成了「筛选 → KPI 分群 → 宽表浏览 → 详情下钻 → 导入/运维负责人弹窗」的主链路，信息架构与参考实现意图基本一致，视觉采用 ONE-OS 绿色主色与 Data-Dense 布局，KPI 可点击筛选、表格左右冻结列、状态色标签与到期提醒等关键业务表达已落地，作为可演示原型具备较高完成度。

主要风险集中在 **高密度表格的可读性**、**部分筛选控件的原生交互陷阱** 以及 **弹层/辅助说明的可访问性**。页面在桌面宽屏下表现尚可，但笔记本常见宽度下 17 列表格横向滚动严重，证照/保险等异常字段容易离开首屏；筛选区「运营城市」使用原生 `multiple` 多选下拉，对非技术用户几乎不可发现操作方式，会直接阻断按城市筛车的核心任务。模态框缺少焦点陷阱与 Esc 关闭策略，点击遮罩即关闭，运维负责人多选场景存在误操作丢数据风险。

亮点方面：触控主按钮普遍达到 44px 最小高度；主按钮、链接、KPI 卡片具备 `:focus-visible` 环；表格空态、分页、Toast 反馈、详情页 Tab 语义角色等基础状态较完整；`prefers-reduced-motion` 已做降级处理。Impeccable CLI 扫描未检出静态规则违规项。

## P0-P3 优先级问题

### P0 - 运营城市多选控件对普通用户不可用

- 证据：`FilterPanel.tsx` 中「运营城市」为原生 `<select multiple>`，无操作提示、无标签化多选 UI；桌面端需 Ctrl/⌘ 点击，移动端行为更不可预期。
- 影响：按运营城市筛选是台账高频任务；用户会误以为单选或无法完成多城筛选，直接阻断查询链路。
- 修复方向：改为可搜索的多选标签组件（如输入框 + 下拉勾选 + 已选 Tag），并在字段旁增加一句操作说明；保留键盘可达与 `aria-label`。

### P1 - 宽表信息密度过高，关键异常字段易离开首屏

- 证据：`VehicleTable.tsx` 共 17 列，字号 `0.8125rem`（约 13px）；`style.css` 中 `.vm-table-wrap` 横向滚动，仅冻结「车辆信息」「操作」两列，证照状态、检验有效期、保险状态位于中后段。
- 影响：运维/车管需在列表中快速发现证照、保险异常车辆；在 1280px 及以下屏宽时，用户需大量横向拖动才能看到异常列，显著增加任务耗时与漏检风险。
- 修复方向：提供列显示配置或「异常摘要」紧凑列；默认将证照/保险合并为「合规状态」前置列；或允许按 KPI（证照异常/保险异常）切换精简列集。

### P1 - 占位与辅助文字对比度未达 WCAG AA

- 证据：`style.css` 中 `.vm-input .placeholder` 为 `#94a3b8`，`.vm-muted` 为 `#64748b`，用于筛选项占位、表头辅助、KPI 标题等；在白色背景上前者约 2.8:1、后者边界偏低。
- 影响：低视力用户与强光环境下阅读困难，不符合 AA 级正文/占位对比要求，影响表单可完成性。
- 修复方向：占位文字提升至 ≥ `#64748b` 或更深；辅助标签改用 `#475569` 并抽样用对比度工具复核 4.5:1。

### P1 - 模态框缺少焦点管理与误关保护

- 证据：`ImportModal.tsx`、`OpsManagerModal.tsx` 使用 `role="presentation"` 遮罩 + `onClick={onClose}`；无焦点陷阱、无 `Escape` 关闭、打开时未将焦点移入对话框；`OpsManagerModal` 未设置 `aria-labelledby`。
- 影响：键盘用户 Tab 可能穿透到背景；运维负责人多选时误点遮罩会丢失已选内容；屏幕阅读器对弹窗标题关联不完整。
- 修复方向：使用 `<dialog>` 或实现 focus trap；遮罩点击改为需确认或仅允许显式「取消」关闭；打开时 `focus()` 到标题或首控件，关闭后还原触发按钮焦点。

### P2 - KPI 指标口径说明对键盘与触屏不可达

- 证据：`KpiCards.tsx` 中说明文案仅放在 `.vm-kpi-tip` 的 `title` 属性上，依赖鼠标悬停；图标 `CircleHelp` 非可聚焦控件。
- 影响：触屏与键盘用户无法理解「库存」「证照异常」等指标统计口径，可能误用 KPI 筛选导致结果偏差。
- 修复方向：将帮助图标改为 `button` 并绑定 `aria-describedby`；或提供可聚焦的「指标说明」抽屉/Popover，支持 Esc 关闭。

## 核心元件

### 页面标题区（Header）

标题「车辆管理」与副标题层级清晰，字重对比足够。副标题使用 muted 色，在强光下略淡，建议复核对比度。区块未占用过多垂直空间，符合数据密集型后台习惯。**保留**简洁标题结构；**调整**副标题色阶以达 AA。

### 筛选面板（FilterPanel）

四列栅格 +「展开更多」有效降低首屏认知负荷，重置/查询按钮位置符合右对齐操作习惯。车牌号弹层输入多车牌的体验优于纯下拉。**问题**：运营城市 `multiple`  select（见 P0）；车牌 Popover 无点击外部关闭与 Esc 处理；展开后 14+ 字段同时暴露，决策点偏多。**建议**对高频筛选项（车牌、城市、运营状态、停车场）做「常用/高级」分组。

### KPI 卡片行（KpiCards）

七张 KPI 可点击切换列表，激活态描边与 `aria-pressed` 语义正确，数字使用等宽数字利于扫读。圆形渐变图标 + 大数字布局略偏通用 SaaS 仪表盘模板感，但业务语义（营运/库存/异常）表达清楚。**保留**可点击筛选交互；**调整**指标说明可达性（见 P2）；窄屏下改为 2 列/1 列的响应式已具备。

### 数据表格（VehicleTable）

车辆信息列堆叠车牌/VIN/品牌型号，信息密度合理；状态 Tag、到期组件 `ExpireDate`、在线圆点等视觉编码一致。左右冻结列在横向滚动时可用。**问题**：列过多导致异常字段不可见（见 P1）；「更多操作」图标按钮无菜单实现，属可发现但不可用的死胡同；`.vm-icon-btn` 为 36×36px，低于 44px 触控建议。**建议**实现更多操作菜单或暂时隐藏；放大行内图标触控区。

### 详情页（DetailPage）

返回列表、车牌 Hero、四格摘要、Tab 分区结构清楚；基本信息/资产状况字段卡片化便于扫读。非「基本信息」Tab 仅为占位文案，切换后信息架构断层，评审时应标注为原型限制。**保留** Hero + 摘要 + Tab 骨架；**调整**占位 Tab 增加「即将上线」视觉区分，避免与已完成 Tab 同等权重。

### 弹窗（ImportModal / OpsManagerModal）

导入两步流程（模板下载 → 上传）符合业务心智，步骤编号清晰。上传区文案写「拖拽」但未实现 `onDrop`，与文案不符。运维负责人多选列表结构清楚，checkbox 标签可点区域够大。**调整**补齐拖拽或改文案；落实模态焦点与误关策略（见 P1）。

## 响应式与可访问性

- **响应式**：`style.css` 在 1600/1280/960/640px 断点下对 KPI、筛选、详情栅格有降级；宽表仍依赖横向滚动，移动端可用性有限，符合后台桌面优先场景，但需在评审说明中标注「移动端仅只读浏览，不建议完整运维操作」。
- **键盘**：主按钮、Tab、KPI 卡片具备 focus 样式；模态与车牌 Popover 焦点管理不足。
- **语义**：表格使用原生 `<table>` 结构良好；详情 Tab 有 `role="tablist"` / `aria-selected`，但缺少 `tabpanel` 与 `aria-controls` 关联。
- **对比度**：主文字 `#0f172a` 达标；占位与部分 muted 文案需加深（见 P1）。
- **动效**：已提供 `prefers-reduced-motion` 全局关闭 transition。

## 证据与评估说明

- **浏览器/截图**：本次未启动本地预览与浏览器截图，结论主要来自源码与样式走查。
- **Scanner**：已运行 `node .claude/skills/impeccable/scripts/detect.mjs --json src/prototypes/vehicle-management`，返回 `[]`（无静态检出项）。
- **独立评估**：`degraded` — 缺少 `DESIGN.md`，未完成设计规范一致性评估；可用性与实现风险评估基于源码与通用准则。

### 后续建议

1. 请从 `src/themes/<theme-id>/DESIGN.md` 指定设计基底，或于 `src/prototypes/vehicle-management/` 补充专属 `DESIGN.md`。
2. 提供设计基底后，可复评品牌色、字体、间距、组件形态与 DESIGN 强制规则的一致性。
3. 修复 P0/P1 后建议在 Make Client 预览中做一次桌面（1440px / 1280px）与触屏宽度验收，并附截图存档。
