refactor(ui): refine semi access workspace
This commit is contained in:
lingniu
@@ -1,77 +1,61 @@
|
||||
# 轨迹回放 Design QA
|
||||
# 接入管理 Semi UI Design QA
|
||||
|
||||
- source visual truth path: `/Users/lingniu/.codex/attachments/70622989-d5e8-4010-9aba-11b1c6974c78/image-1.png`
|
||||
- implementation route: `http://115.29.187.205:20300/tracks?keyword=LB9A32A23R0LS1529&dateFrom=2026-07-15T00%3A00&dateTo=2026-07-15T23%3A59`
|
||||
- implementation screenshot path: `/tmp/tracks-production-desktop.png`
|
||||
- current browser screenshot path: `/tmp/tracks-production-current.png`
|
||||
- mobile screenshots: `/tmp/tracks-production-mobile.png`, `/tmp/tracks-production-mobile-open.png`
|
||||
- viewport and state: desktop `2560 × 1285`, loaded vehicle `粤AGR9866`, first point, rail expanded, stop points visible, follow enabled, speed `1×`; current in-app viewport `815 × 874`; mobile `390 × 844`, both map-first collapsed state and query-sheet expanded state.
|
||||
- source native size: `5120 × 2570`. Browser viewport override uses DPR 1, so the production capture used the exact same 1.992:1 logical aspect at `2560 × 1285`; the source was normalized to that size for comparison. A literal `5120 × 2570` CSS viewport would change the responsive composition instead of reproducing the source's logical viewport.
|
||||
- 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
|
||||
|
||||
- full-view combined comparison: `/tmp/tracks-reference-vs-production.png`
|
||||
- focused feature-rail comparison: `/tmp/tracks-reference-vs-production-rail.png`
|
||||
- focused playback-dock comparison: `/tmp/tracks-reference-vs-production-dock.png`
|
||||
- both the native source and the latest production desktop screenshot were opened with `view_image` in the same QA pass, followed by the combined full, rail, dock, and mobile comparisons.
|
||||
- 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 | Production evidence | Result |
|
||||
| Surface | Source evidence | Implementation evidence | Result |
|
||||
| --- | --- | --- | --- |
|
||||
| Information architecture | G7 uses a map-first canvas with a fixed query/detail rail and a persistent bottom playback strip. | Production uses the same three-region skeleton: query/detail rail, dominant map canvas, and persistent playback dock. | Matched. |
|
||||
| Feature rail | G7 exposes vehicle/time query and stop/event detail lists in one continuous left rail. | Production keeps vehicle suggestions, time presets, source selection, stop/event/overview tabs and selectable evidence rows in one rail. | Matched; `概览` intentionally replaces G7's implementation-specific cache tab. |
|
||||
| Map and route | G7 keeps the map visually dominant, with route, stop markers and a dark current-vehicle overlay. | Production uses the required AMap `whitesmoke` style, full route, passed route, start/end/stop/current markers, follow behavior and a dark telemetry/address card. | Matched interaction model; palette intentionally follows the platform's requested global map style. |
|
||||
| Playback dock | G7 shows a full-width time strip and centered playback controls. | Production shows segment-colored activity rail, range seek, start/end times, previous/play/next, `0.5×–4×`, reset, mileage/source/status metrics. | Matched and functionally expanded. |
|
||||
| Typography | G7 uses compact utility typography and dense tabular labels. | Production uses the existing platform font stack with compact 8–14px utility hierarchy on the desktop rail and 16px mobile form controls. | Matched density while preserving product typography. |
|
||||
| Color and surfaces | G7 has a dark global header, white rail and colorful default map. | Production preserves the existing light global shell, white rail, blue action system, dark telemetry card and `whitesmoke` map. | Intentional product-system deviation; feature hierarchy remains faithful. |
|
||||
| Icons | G7 uses compact utility icons for map and playback actions. | Production reuses the platform's Semi icon family; mobile tools now retain visible icons and explicit accessible names. | Matched and accessible. |
|
||||
| Responsive behavior | Source only provides desktop evidence. | Production was verified at `815 × 874` and `390 × 844`; mobile becomes a collapsible bottom sheet without horizontal overflow and preserves the map/dock task. | Passed; mobile is a product extension of the source. |
|
||||
| Motion | Source implies moving vehicle playback and map following. | Production uses `requestAnimationFrame`, 0.5×/1×/2×/4× speeds, smooth map panning and manual-drag follow cancellation. | Matched and performance-safe. |
|
||||
| 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. |
|
||||
|
||||
## Above-the-fold Copy Diff
|
||||
## Interaction And Accessibility Checks
|
||||
|
||||
The source's functional labels `轨迹回放`, vehicle/time query, `停留点`, `事件点`, distance, and playback controls are retained in product-appropriate Chinese. Intentional additions are `数据来源`, `概览`, `跟随车辆`, `停留点` visibility, `导出`, and bounded-coverage evidence because they expose source priority, playback state, and data completeness required by this platform. G7-specific brand/navigation strings, `缓存`, and its proprietary map tools were not copied.
|
||||
|
||||
## Primary Interactions Tested in Browser/IAB
|
||||
|
||||
- stop/event/overview tab switching and selecting an event to move the active point;
|
||||
- playback at `4×`, verified progress advanced from point `0` to point `11`, then pause;
|
||||
- follow vehicle / free browse toggle;
|
||||
- stop-marker show/hide toggle;
|
||||
- desktop and mobile query/detail rail collapse and expand;
|
||||
- reset to start, speed reset to `1×`, and sample query loading with `1600` returned points;
|
||||
- mobile toolbar accessible names: `展开查询与明细`, `关闭车辆跟随`, `隐藏停留点`, `导出轨迹 CSV`;
|
||||
- console errors checked: none.
|
||||
- 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 — blocked
|
||||
### Pass 1 — passed
|
||||
|
||||
- [P1] Mobile map toolbar icons were blank because a broad rule hid every nested `span`, including the Semi icon wrapper.
|
||||
- Fix: hide only the text span and explicitly retain `.semi-icon` at 17px.
|
||||
- Post-fix evidence: `/tmp/tracks-production-mobile.png` visibly shows list, follow, stop visibility and export icons.
|
||||
- [P2] Two-column mobile `datetime-local` inputs clipped the minute value at 390px.
|
||||
- Fix: stack start and end time fields into one column while keeping 16px touch-safe input text.
|
||||
- Post-fix evidence: `/tmp/tracks-production-mobile-open.png` shows complete `2026/07/15 00:00` and `2026/07/15 23:59` values.
|
||||
- [P2] Mobile icon-only controls lost meaningful accessible names when their visible text was hidden.
|
||||
- Fix: add explicit dynamic `aria-label` values to expand, follow, stop and export controls.
|
||||
- Post-fix evidence: Browser/IAB resolved each label exactly once.
|
||||
- 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.
|
||||
|
||||
### Pass 2 — passed
|
||||
## Intentional Constraints
|
||||
|
||||
- Full desktop, current in-app viewport, mobile collapsed map and mobile expanded query sheet were recaptured from the final ECS release.
|
||||
- No actionable P0/P1/P2 layout, typography, color-token, icon, image-quality, copy, interaction, accessibility or responsiveness findings remain.
|
||||
|
||||
## Intentional Deviations
|
||||
|
||||
- The platform's existing light top bar and vertical application navigation are preserved instead of cloning G7's dark global header.
|
||||
- The required AMap `whitesmoke` map style is preserved instead of G7's colorful default map.
|
||||
- A source/quality overview replaces G7's product-specific cache tab; data completeness is exposed as an on-map evidence strip.
|
||||
- The route color is platform blue with state overlays rather than G7 red/green, keeping consistency with existing monitoring pages.
|
||||
|
||||
## Follow-up Polish
|
||||
|
||||
- P3: a future product iteration may add a paged sampled-point list if operations users confirm they need row-level point inspection in addition to the seek rail and event list.
|
||||
- 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
|
||||
|
||||
Reference in New Issue
Block a user