lingniu-vehicle-ingest/design-qa.md

# Access Management Semi UI Design QA

## Evidence

- Accepted visual direction: `/tmp/semi-ui-reference-1440.png`.
- Existing flow baseline: `/tmp/access-before-desktop.jpg`.
- Final desktop implementation: `/tmp/access-after-desktop-final.jpg`.
- Final mobile queue: `/tmp/access-after-mobile-visible.jpg`.
- Final mobile evidence sheet: `/tmp/access-after-mobile-detail.jpg`.
- Final mobile governance sheet: `/tmp/access-after-mobile-governance.jpg`.
- Final mobile filter sheet: `/tmp/access-after-mobile-filter.jpg`.
- System comparison: `/tmp/semi-access-design-comparison.jpg`.
- Same-route comparison: `/tmp/access-before-after-comparison.jpg`.
- Desktop viewport and state: 1280 × 720, all authoritative vehicles, no row selected.
- Mobile viewport and states: 390 × 844, queue, filter, vehicle evidence and governance SideSheets.

## Full-view comparison

The final access workspace retains the accepted Semi UI skeleton: persistent navigation, white operational surfaces, cool-gray canvas, compact filters, restrained semantic colors, one dominant data list and on-demand SideSheets.

The primary hierarchy changed from vehicle → brand/model → protocols → difference to vehicle → difference conclusion → protocols → brand/model. The actionable conclusion is now always adjacent to the vehicle and remains fixed during horizontal table movement. The 1280px state has no page or table overflow and shows five vehicle rows in the active viewport.

## Focused comparison

The mobile queue was checked separately because the protocol matrix becomes a card list at 390px. Three protocol states now share one evidence band instead of three competing nested cards. Semantic rails make healthy, degraded, offline and selected vehicles scannable without increasing card height.

The filter, vehicle evidence and governance sheets were each opened in the browser. Primary reset/apply, evidence disclosure, configuration summary and completion actions remain visible without horizontal overflow.

## Fidelity ledger

| Surface | Source evidence | Render evidence | Result |
| --- | --- | --- | --- |
| Typography | Strong work-surface title, compact labels and tabular evidence values | Command title, difference conclusion, vehicle identity, protocol timestamps and inspector hierarchy use the shared Semi scale | Passed |
| Spacing and layout rhythm | Compact command/filter band with one dominant list | Filter height remains 54px; table rows are reduced to 54px; five desktop rows and roughly four mobile cards are visible | Passed |
| Colors and tokens | White/cool-gray surfaces, blue actions and restrained semantic state colors | Existing green, amber, red and blue tokens are reused for row rails, status tags and selected state | Passed |
| Image and asset fidelity | Supplied brand logo and Semi icon family | Brand logo is unchanged; search, settings, refresh, filter, download and disclosure icons remain Semi assets | Passed |
| Table hierarchy | Differences should dominate the access workflow | `差异结论` is now the second fixed column; protocol evidence follows and brand/model is explicitly secondary | Passed |
| Mobile density | Small screens need concise but complete vehicle evidence | Three protocol cells are grouped into one band; 390 × 844 has zero horizontal overflow and keeps pagination reachable | Passed |
| Detail and governance | Evidence and configuration should not replace the list permanently | Vehicle and governance tasks use focused SideSheets with summaries, evidence and stable close/complete actions | Passed |
| Interaction and accessibility | Rows, filters, disclosures and actions must be keyboard/touch operable | Whole-row selection, arrow-key table scrolling, filter SideSheet, evidence disclosure and governance actions are test-covered | Passed |

## Above-the-fold copy diff

- Changed `真实来源与接入健康` to `接入健康工作台`.
- Changed `全部主车辆` panel title to `接入差异清单`; the current scope now appears in its description.
- Changed table header `差异摘要` to `差异结论`.
- Existing filter fields, protocol names, vehicle facts, governance actions and business claims are preserved.

## Comparison history

1. P2 — The baseline placed the actionable difference summary after brand/model and three protocol columns.
   - Fix: moved `差异结论` next to vehicle identity and fixed both columns.
   - Post-fix evidence: `/tmp/access-before-after-comparison.jpg`; the first three headers are `车辆`, `差异结论`, `GB/T 32960`.
2. P2 — Mobile protocol status appeared as three independent mini-cards and made each vehicle feel fragmented.
   - Fix: grouped the three protocol cells into one bordered evidence band with internal dividers.
   - Post-fix evidence: `/tmp/access-after-mobile-visible.jpg`.
3. P2 — Row status depended mainly on small status tags and required close reading.
   - Fix: added semantic row/card rails for healthy, degraded/incomplete, offline/not-connected and selected states.
   - Post-fix evidence: desktop and mobile final captures; no added row or card height.

## Findings

- No actionable P0, P1 or P2 visual differences remain.
- P3 follow-up: Semi UI 2.101 continues to emit its existing `findDOMNode` StrictMode warning in tests; it does not affect this layout or workflow.

## Core interaction verification

- Desktop vehicle, status, protocol and brand query.
- Difference and all-vehicle metric shortcuts.
- Whole-row mouse and keyboard selection.
- Horizontal protocol browsing with fixed vehicle and difference columns.
- Mobile filter open, reset/apply affordances and close.
- Mobile vehicle evidence open, protocol disclosure and close.
- Mobile governance open, pending identity summary, threshold disclosure and complete.
- Browser state: no application error overlay, no visible error alert and no page-level horizontal overflow.
- Full suite: 73 files, 366 tests passed.
- Production build gate: passed.

## Final result

final result: passed