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