# 接入管理 Semi UI Design QA

- source visual truth: Git `2c9399941` 的 `/access` 页面
- source screenshots:
  - `/tmp/access-desktop-baseline.png`
  - `/tmp/access-detail-baseline.png`
  - `/tmp/access-mobile-baseline-full.jpg`
- implementation screenshots:
  - `/tmp/access-desktop-updated.jpg`
  - `/tmp/access-detail-updated.jpg`
  - `/tmp/access-mobile-updated.jpg`
- viewport and state:
  - desktop `1440 × 900`，全部主车辆，未选中车辆
  - desktop detail `1440 × 900`，选中 `粤AG18312`
  - mobile `390 × 844`，全部主车辆，列表首屏
- data source: local Vite UI plus the same `20302` mock API for both source and implementation

## Comparison Evidence

- desktop before/after: `/tmp/access-desktop-comparison.jpg`
- detail before/after: `/tmp/access-detail-comparison.jpg`
- mobile before/after: `/tmp/access-mobile-comparison.jpg`
- every comparison uses the same viewport, API data and interaction state; all three combined images were inspected with `view_image`.

## Fidelity Ledger

| Surface | Source evidence | Implementation evidence | Result |
| --- | --- | --- | --- |
| Information hierarchy | The vehicle list already owns the viewport and the two top metrics stay restrained. | The list-first structure, metric count, filters, pagination and governance entry remain unchanged. | Preserved. |
| Protocol identity | Desktop headers and protocol detail cards exposed internal names such as `GB32960`, `JT808` and `YUTONG_MQTT`. | Both surfaces now use the shared Semi protocol identity: `GB/T 32960`, `JT/T 808`, `宇通 MQTT`, with one consistent color grammar and human-readable descriptions. | Improved. |
| Status scanability | Protocol state, time and provider were presented as loose text in wide table cells. | Each status is contained in a subtle semantic surface; online, offline and missing states remain distinguishable without increasing row height. | Improved. |
| Selection feedback | Selection relied mainly on a light row fill. | The selected row keeps the light fill and adds a restrained blue leading accent; keyboard focus remains independently visible. | Improved. |
| Detail evidence | Detail cards had raw protocol headings while their state tag used Semi UI. | Protocol identity and state are now both Semi UI primitives, with the protocol description directly beneath the tag. | Improved. |
| Mobile density | Four vehicles were visible in the `390 × 844` viewport. | The same four-vehicle density, fixed pagination, touch targets and vertical-only scrolling are preserved. | Preserved. |
| Responsive behavior | No horizontal overflow at desktop or mobile. | Browser verification reports no document-level horizontal overflow at `390 × 844`; desktop fixed columns and protocol scrolling remain functional. | Passed. |

## Interaction And Accessibility Checks

- desktop protocol headers expose complete accessible names including protocol and Chinese description;
- table row opens the vehicle detail sheet by pointer or keyboard;
- selected row exposes `aria-expanded=true`;
- protocol evidence expands and collapses without an API refetch;
- mobile list remains vertically scrollable and has no document-level horizontal overflow;
- existing filter, export, pagination and governance contracts remain covered by `AccessPage.test.tsx`.

## Comparison History

### Pass 1 — passed

- No P0/P1/P2 visual or interaction issue was found.
- The desktop protocol columns are materially easier to scan while retaining the existing six-row viewport.
- The detail sheet now matches the shared protocol language used by alert and history evidence surfaces.
- Mobile structure is intentionally unchanged because the existing density and task priority already meet the product requirement.

## Intentional Constraints

- The compact coverage strip retains `32960 / 808 / 宇通` abbreviations because full tags would crowd the 292px context rail.
- Semantic state surfaces use low-contrast borders and tints; they do not become large cards or compete with the vehicle and discrepancy columns.
- No additional runtime query, animation or component state was introduced.

final result: passed