# Historical Data Semi UI Design QA

## Evidence

- Source visual truth: `/tmp/semi-ui-reference-1440.png` (accepted Semi UI workspace direction).
- Existing flow source: `/tmp/history-before-desktop.jpg` (historical data before this iteration).
- Implementation screenshot: `/tmp/history-after-desktop.jpg`.
- Responsive screenshots: `/tmp/history-after-1024.jpg`, `/tmp/history-after-mobile-sheet.jpg`.
- Full-view comparison: `/tmp/semi-history-design-comparison.jpg`.
- Same-route iteration comparison: `/tmp/history-before-after-comparison.jpg`.
- Requested desktop viewport: 1440 × 900. The embedded browser surface captured 1280 × 720; an additional exact 1024 × 768 capture was checked.
- Mobile viewport: 390 × 844.
- State: location history query for one vehicle, empty local result, desktop query collapsed; mobile filter sheet open.

## Full-view comparison

The implementation keeps the accepted product skeleton: persistent left navigation, white header, blue/gray visual hierarchy, restrained cards, compact controls, table-first workspace, and the same icon family. The historical-data workflow intentionally keeps its evidence table instead of copying the mileage-specific hero and mileage matrix.

The before/after comparison shows the material layout change: the applied query remains readable in the command rail while the full desktop filter panel can collapse, returning the vertical workspace to the historical detail table.

## Focused comparison

The mobile filter sheet was checked separately because its labels and controls are too small to assess reliably in the desktop comparison. At 390 × 844, the summary rail, date range, type/source selects, export action, and sticky reset/apply actions remain visible and touch-safe without horizontal overflow.

## Fidelity ledger

| Surface | Source evidence | Render evidence | Result |
| --- | --- | --- | --- |
| Typography | Compact Semi UI chrome with strong page/task titles and smaller utility copy | History title, command rail, metric values, panel title, filters and mobile sheet preserve the same hierarchy | Passed |
| Layout rhythm | Persistent navigation, 12–18px page gutters, one main data surface | Query rail, three metrics and the table align on one grid; collapsed state increases table height without adding another card family | Passed |
| Colors/tokens | White surfaces, cool gray canvas, blue primary, green healthy state | Existing shared tokens and Semi UI variants are reused; no new palette or gradient was introduced | Passed |
| Icons/assets | Supplied brand logo and Semi icon family | Brand assets are unchanged; filter, calendar, search, setting, export and more actions use the same Semi icon family | Passed |
| Copy/content | Query, range, data type/source and result actions are business-native | No business fields or routes were added or removed; the applied scope reuses existing query values | Passed |
| Responsive behavior | Dense desktop workspace with task-focused mobile disclosure | 1280 × 720, 1024 × 768 and 390 × 844 checks show no clipped primary action or horizontal page overflow | Passed |
| Interaction | Query controls should not compete with results after submission | Collapse/expand, apply/reset, mobile filter sheet and row/detail paths are covered by interaction tests | Passed |

## Above-the-fold copy diff

- Added visible control labels: `收起条件` and `修改条件`, required for the new query disclosure.
- Existing task title, description, status, query labels and result labels are preserved.
- No unapproved marketing copy, badge, module, navigation item or business claim was added.

## Comparison history

1. Earlier finding — P2: the desktop filter panel permanently occupied roughly 108px after a query, reducing the primary evidence-table viewport.
   - Fix: added a lightweight desktop-only disclosure control and an applied-scope summary for time, category and source.
   - Post-fix evidence: `/tmp/history-before-after-comparison.jpg`; the table begins materially higher while the query remains recoverable through `修改条件`.
2. Earlier finding — P2: mobile record quality relied on a small text indicator only.
   - Fix: added a three-pixel semantic quality rail with selected-state override while retaining the existing quality label.
   - Post-fix evidence: component test confirms semantic quality classes; no additional card height is introduced.

## Findings

- No actionable P0, P1 or P2 visual differences remain.
- P3 follow-up: Semi UI 2.101 still emits its existing `findDOMNode` StrictMode warning; it does not affect the rendered layout or interaction path in this iteration.

## Core interaction verification

- Desktop query collapse and re-open.
- Query submission collapses the desktop panel and preserves applied scope.
- Reset restores the full desktop query panel.
- Mobile filter sheet open, reset, apply and close.
- Historical trend, field settings, export task menu, pagination and row-detail interaction remain covered by the full test suite.
- Browser console contains no application exception or framework overlay; only the existing Semi UI StrictMode deprecation warning appears.

## Final result

final result: passed