62 lines
4.1 KiB
Markdown
62 lines
4.1 KiB
Markdown
# 接入管理 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
|