lingniu-vehicle-ingest/vehicle-data-platform/design-qa.md

接入管理 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