轨迹回放 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.

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.

Fidelity Ledger

Surface	Source evidence	Production 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.

Above-the-fold Copy Diff

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.

Comparison History

Pass 1 — blocked

[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.

Pass 2 — passed

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.

final result: passed

7.2 KiB Raw Blame History Unescape Escape