feat(web): refine semi application shell

design-qa.md

@@ -1,82 +1,109 @@
-# Vehicle Data Platform Semi UI System QA
+# Semi UI shell vNext — Design QA
 
-## Evidence
+- Source visual truth: `/Users/lingniu/.codex/attachments/e33960ff-ed87-40f8-9da6-8e6615a653c5/image-1.png`
+- Desktop implementation: `/tmp/lingniu-ui-audit-20260720/14-after-desktop-pass2.png`
+- Mobile implementation: `/tmp/lingniu-ui-audit-20260720/05-after-mobile-pass2.png`
+- Mobile secondary navigation: `/tmp/lingniu-ui-audit-20260720/06-mobile-more.png`
+- Mobile cross-page state: `/tmp/lingniu-ui-audit-20260720/07-mobile-statistics.png`
+- 2K implementation: `/tmp/lingniu-ui-audit-20260720/15-after-2k.png`
+- Full-view comparison: `/tmp/lingniu-ui-audit-20260720/16-reference-comparison-final.png`
+- Focused navigation comparison: `/tmp/lingniu-ui-audit-20260720/17-sidebar-comparison.png`
+- Viewports: 1440 × 900, 2560 × 1440, 390 × 844
+- State: authenticated mock administrator; Monitor list mode with four vehicles
 
-- Accepted source truth: the production application immediately before shared identity convergence.
-- Desktop source contact sheet: `.codex-audit/semi-system-20260720/desktop-all-routes-before-normalized.png`.
-- Desktop implementation contact sheet: `.codex-audit/semi-system-20260720/desktop-all-routes-after-contact.png`.
-- Desktop same-state comparison: `.codex-audit/semi-system-20260720/desktop-before-after-comparison.png`.
-- Mobile source contact sheet: `.codex-audit/semi-system-20260720/mobile-all-routes-before-normalized.png`.
-- Mobile implementation contact sheet: `.codex-audit/semi-system-20260720/mobile-all-routes-after-contact.png`.
-- Mobile same-state comparison: `.codex-audit/semi-system-20260720/mobile-before-after-comparison.png`.
-- Desktop viewport and state: 1280 × 720, authenticated administrator, default route state.
-- Mobile viewport and state: 390 × 844, authenticated administrator, default route state.
-- Audited routes: `/monitor`, `/vehicles`, `/tracks`, `/history`, `/statistics`, `/alerts`, `/access`, `/users`, `/operations`.
-- Production release: `semi-system-audit-20260720025208`.
+## Comparison scope
 
-## Full-view comparison
+The supplied Semi image is a different product and data state, so it is not a
+pixel-for-pixel content specification. The comparison treats its application
+shell, navigation rhythm, whitespace, typography, surface treatment and
+interaction hierarchy as the visual truth. The vehicle table keeps the width
+required by the operational task instead of copying the reference's team rail.
 
-All nine primary routes retain the accepted product grammar: persistent desktop navigation, mobile bottom navigation, cool-gray canvas, white operational surfaces, compact filters, restrained semantic color and data-first content density. Maps remain dominant on monitoring and replay; tables or queues remain dominant on the remaining workspaces.
+## Findings and iteration history
 
-The implementation changes the source of the identity styling rather than the visible hierarchy. Primary, warning, authority and health identity tones are now owned by `WorkspaceCommandBar` and shared CSS custom properties. Page-specific rules retain only genuine layout differences such as the compact replay rail, the larger vehicle record identity, the hidden mobile alert copy and the short-landscape operations header.
+### Pass 1
 
-Live vehicle, mileage, alert and access values changed between the before and after captures because both sets use production data. Component placement, spacing, responsive behavior and visual hierarchy remain continuous.
+- **[P1] Layered navigation chrome made the shell feel heavy.**
+  - Evidence: the baseline used a soft square behind every icon, gradient
+    selection fills and several shadow layers; the reference uses quiet icons,
+    one selected row and neutral white space.
+  - Fix: removed icon plates and gradients, simplified hover/selected states,
+    aligned group labels and introduced one restrained active indicator.
+  - Post-fix evidence: focused navigation comparison.
+- **[P1] Mobile hierarchy was too compressed.**
+  - Evidence: `/tmp/lingniu-ui-audit-20260720/02-before-mobile.png` used an
+    unbranded title bar, 9px navigation labels and truncated vehicle facts.
+  - Fix: added the supplied brand mark, rebuilt the bottom navigation rhythm,
+    increased the essential text scale and redistributed the four vehicle
+    metrics evenly without reducing the visible vehicle count.
+  - Post-fix evidence: mobile implementation and mobile cross-page state.
+- **[P2] Page transitions rebuilt the content container.**
+  - Evidence: the shell keyed the entire content container by pathname.
+  - Fix: kept the content container stable and animated only the newly mounted
+    route surface; reduced-motion users receive no transition.
+  - Post-fix evidence: Monitor → Mileage route change retained the shell and
+    updated the title, active navigation and page content.
 
-## Focused comparison
+### Pass 2
 
-Desktop and mobile comparisons were viewed as combined before/after images at matching route viewports. The warning tone remains amber in Alert Center, the authority tone remains purple in Account Management, the health tone remains green in Operations Quality, and the remaining identity workspaces retain the primary blue treatment.
+- **[P2] Collapsed sidebar hid its reopen affordance.**
+  - Evidence: `/tmp/lingniu-ui-audit-20260720/08-desktop-collapsed.png` showed
+    an empty collapse footer because a legacy selector hid every nested span,
+    including Semi's icon wrapper.
+  - Fix: restored only the icon wrapper, rotated the chevron and preserved the
+    text-hidden compact state.
+  - Post-fix evidence:
+    `/tmp/lingniu-ui-audit-20260720/11-desktop-collapsed-final.png`; browser
+    state changed from `收起侧栏` to `展开侧栏` and back.
+- **[P2] Desktop data type remained optically smaller than the reference.**
+  - Evidence: first full-view comparison showed the header, filter controls,
+    table headings and primary row values losing hierarchy at 1440px.
+  - Fix: increased the desktop shell header to 76px, raised navigation and
+    table type sizes, and increased control and row heights while retaining
+    the operational density.
+  - Post-fix evidence: final full-view comparison and 2K implementation.
 
-At 390 × 844, command bars preserve the existing single-screen density. Descriptions and metadata continue to collapse only where the prior mobile behavior already required it. All nine routes report `scrollWidth === clientWidth`; no page-level horizontal overflow was introduced.
+## Required fidelity surfaces
 
-## Fidelity ledger
+- **Fonts and typography:** system/PingFang stack is appropriate for Chinese;
+  page titles, navigation, controls and primary values now form a clear scale.
+  Tabular figures are enabled for telemetry. No actionable P0–P2 issue remains.
+- **Spacing and layout rhythm:** the shell uses a 220px desktop rail, 76px
+  desktop header, 56px mobile header and 64px safe-area-aware mobile
+  navigation. Cards use quieter 9–10px radii and one-pixel boundaries.
+- **Colors and tokens:** white surfaces, `#f5f6f7` canvas, `#e6e8eb` borders
+  and Semi blue `#0064fa` now match the reference's foreground/background
+  balance. Operational green/red tones remain semantic.
+- **Image quality and assets:** supplied brand SVG assets are used directly.
+  No placeholder illustration, custom SVG or CSS-drawn brand asset was added.
+- **Icons:** all shell actions use the existing Semi icon family. Selected,
+  hover, pressed and collapsed states remain optically aligned.
+- **Copy and content:** each page title now has a short task description on
+  desktop. Mobile keeps only the title to protect first-screen task density.
+- **Responsiveness:** 390px mobile, 1440px desktop and 2560px 2K states were
+  rendered without overlap, hidden persistent controls or shell overflow.
+- **Accessibility:** semantic navigation names and page headings remain intact;
+  mobile targets are at least 42px in the shell, focus styles are preserved,
+  and `prefers-reduced-motion` disables the new transitions. Screenshot review
+  cannot prove full assistive-technology compatibility.
 
-| Surface | Source evidence | Render evidence | Result |
-| --- | --- | --- | --- |
-| Navigation and workspace frame | Consistent desktop rail and mobile bottom navigation | All nine routes retain the same navigation, canvas and viewport ownership | Passed |
-| Identity hierarchy | Icon, eyebrow, task title, supporting context and actions | Shared `WorkspaceCommandBar` anatomy is unchanged across desktop and mobile | Passed |
-| Semantic colors | Blue operational work, amber warnings, purple authority, green health | Four explicit tones resolve to the accepted icon, glow and status-tag colors | Passed |
-| Typography | Compact operational hierarchy with restrained supporting copy | Existing Semi title, text and tag scale is preserved at both viewports | Passed |
-| Spacing and density | Maps, tables and queues dominate their workspaces | Header convergence does not reduce visible rows, cards or map area | Passed |
-| Responsive behavior | Mobile descriptions and actions collapse selectively | Existing per-workspace breakpoints remain; all routes have zero page overflow | Passed |
-| Component architecture | Repeated identity styling existed in page-specific CSS | Semantic variables now centralize palette and shared anatomy without page coupling | Passed |
-| Runtime behavior | Production routes must load without unstable placeholders | No skeletons, spin overlays, loading copy or browser errors remained at capture | Passed |
+## Interaction and console checks
 
-## Above-the-fold copy diff
+- Mobile More opens a Semi SideSheet with grouped analysis and governance
+  destinations, then closes without changing page state.
+- Mobile Mileage navigation changes URL, heading and active tab and renders the
+  fixed-column mileage matrix.
+- Desktop sidebar collapses and expands with a visible affordance in both
+  states.
+- No framework error overlay or application runtime error was observed.
+  Semi UI's known React `findDOMNode` development deprecation warning remains.
 
-- No user-facing product copy changed.
-- No route, field, status label, action or business claim changed.
-- The only DOM contract change is the semantic identity class: `is-primary`, `is-warning`, `is-authority` or `is-health`.
+## Follow-up polish
 
-## Comparison history
-
-1. P2 — Identity colors, icon surfaces and status tags were repeated in vehicle, replay, history, alert, access, account and operations CSS blocks.
-   - Fix: introduced a typed `tone` property on `WorkspaceCommandBar` and centralized semantic CSS custom properties.
-   - Post-fix evidence: both combined contact sheets preserve the accepted appearance while production computed-style checks confirm all four tones.
-2. P2 — The repeated page rules allowed title, description, icon and mobile breakpoint values to drift independently.
-   - Fix: moved shared color and component anatomy to the base identity rules; retained only layout-specific page overrides.
-   - Post-fix evidence: desktop and mobile route contact sheets show continuous hierarchy and density.
-3. P2 — A shared refactor could have caused mobile overflow or reduced one-screen data density.
-   - Fix: audited every primary route at 390 × 844 and recorded document dimensions after stable render.
-   - Post-fix evidence: all nine routes have `scrollWidth = 390`, `clientWidth = 390`, no loading overlays and no layout clipping.
-
-## Findings
-
-- No actionable P0, P1 or P2 visual differences remain in this batch.
-- Production browser warnings and errors after route traversal: 0.
-- Build output retains the upstream Semi Sass `@import` deprecation warning; it does not affect this release.
-
-## Core interaction and release verification
-
-- Nine desktop routes rendered at 1280 × 720 without horizontal overflow.
-- Nine mobile routes rendered at 390 × 844 without horizontal overflow.
-- Primary, warning, authority and health classes and computed colors were verified in production.
-- Full web suite: 73 files, 369 tests passed.
-- Production build gate: passed.
-- Web release smoke suite: passed.
-- ECS HTTP check: 200 OK.
-- ECS active release: `/opt/lingniu-vehicle-platform/releases/semi-system-audit-20260720025208`.
-- Served assets: `app-fqr7mrEB.js`, `app-BHAi6qMP.css`.
-
-## Final result
+- P3: continue raising secondary explanatory text on legacy page-specific
+  surfaces as each page enters the Semi migration.
+- P3: consolidate older workspace CSS overrides after the visual migration is
+  complete; removing them now would expand regression scope without changing
+  this shell's rendered result.
 
 final result: passed