69 lines
5.1 KiB
Markdown
69 lines
5.1 KiB
Markdown
# 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
|