lingniu-vehicle-ingest/design-qa.md

Semi UI shell vNext — Design QA

• 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

Comparison scope

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.

Findings and iteration history

Pass 1

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

Pass 2

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

Required fidelity surfaces

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

Interaction and console checks

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

Follow-up polish

• 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

---

Access portrait evidence viewport — Design QA

• Source visual truth: /tmp/access-mobile-density-20260720/01-production-320-before.png
• Local implementation: /tmp/access-mobile-density-20260720/02-local-320-after.png
• Local detail interaction: /tmp/access-mobile-density-20260720/03-local-320-detail.png
• Local 390px regression: /tmp/access-mobile-density-20260720/04-local-390-after.png
• Deployed 320px evidence: /tmp/access-mobile-density-20260720/05-production-320-after.png
• Deployed detail interaction: /tmp/access-mobile-density-20260720/06-production-320-detail.png
• Deployed 390px evidence: /tmp/access-mobile-density-20260720/07-production-390-after.png
• Same-viewport production comparison: /tmp/access-mobile-density-20260720/08-production-320-comparison.png
• Viewports: 320 × 568 and 390 × 844
• State: authenticated administrator; Access directory with all vehicles selected and live protocol evidence

Findings and comparison history

Baseline

• [P1] The portrait mobile evidence list was almost entirely clipped.
  • Evidence: at 320 × 568 the page reserved 72px of redundant bottom padding, a 72px filter trigger, a 58px repeated panel heading and a 92px metric rail. Only 19px remained for the vehicle scroller, so the first 155px vehicle card could not be read or selected reliably.
  • Impact: the primary Access task—identifying a vehicle and opening its protocol evidence—was effectively blocked on narrow mobile devices.
  • Fix: removed the redundant portrait-only page reserve, reduced the filter trigger to 56px, reduced the metric rail to 60px minimum height and hid the repeated mobile panel heading. The established command bar, filters, metrics, pagination and bottom navigation remain present.

Final pass

• No actionable P0, P1 or P2 issue remains in this mobile Access flow.
• At 320 × 568 the evidence scroller increased from 19px to 195px, a 176px gain and more than tenfold improvement. One complete vehicle card and the next-card affordance are visible.
• At 390 × 844 the scroller is 471px tall and three evidence cards are visible before pagination.
• Both viewports report document width equal to viewport width. The bottom navigation, pagination and detail sheet do not overlap or introduce horizontal scrolling.

Required fidelity surfaces

• Fonts and typography: existing Semi UI typography, plate hierarchy and protocol metadata remain unchanged and readable.
• Spacing and layout rhythm: only portrait Access density changed. Existing short-landscape rules and Web layout are untouched.
• Colors and visual tokens: the existing neutral, blue, green and amber semantic states are preserved, including partial-source warning evidence.
• Image quality and assets: no new imagery, icon approximation or replacement asset was introduced.
• Copy and content: command, filter, vehicle, source and evidence labels are unchanged; only the duplicate 接入差异清单 mobile heading is visually removed.
• Icons: existing Semi icons and controls retain their current sizing and active states.
• Responsiveness: 320px and 390px portrait layouts have no horizontal overflow. The portrait-only media query does not alter desktop or landscape composition.
• Accessibility: every vehicle remains a semantic button and the selected vehicle opens a labeled 车辆接入详情 dialog with a labeled close action. This visual and DOM pass does not replace a full assistive-technology audit.

Interaction and console checks

• Production Access → first vehicle card → vehicle detail → close was exercised successfully at 320px.
• The detail sheet measured 320px wide and 477px tall, retained its internal scroller, and exposed 接入健康概览 plus 协议证据.
• Automated gate: 73 test files and 383 tests passed. The targeted Access and production-entry gate passed 14 tests.
• TypeScript, Vite, distribution preparation and the release build verifier completed successfully with 74 current assets.
• Release access-mobile-list-20260720182508 is active. /access returned HTTP 200, the service is active, and the deployed app-DC_UXKeU.css SHA-256 matches the local production asset: 8e723387c096e156fb70e2a234ade464c0d1faca000c2d54ef8a65e402638c78.
• No application runtime failure or visible error state was observed during local or deployed interaction testing. Existing development-only Semi UI findDOMNode warnings remain unchanged.

Follow-up polish

• P3: revisit Access card vertical density only if future protocol evidence adds a fourth simultaneous source; the current three-source layout is readable at 320px.

final result: passed

---

Account governance clarity pass — 2026-07-20

Scope

• Route: /users
• Surfaces: desktop directory, mobile directory, desktop configuration SideSheet, mobile configuration SideSheet.
• Production release: users-clarity-20260720181338.

Findings and fixes

• P1 — Mobile directory hierarchy consumed too much of the first viewport.

  • Before: at 320 × 568 the directory began at y=291, so only about three complete customer rows were visible.
  • Fix: removed the repeated mobile directory heading, reduced the metric rail to 56px and kept the list itself as a single-row directory.
  • After: the directory begins at y=227. Four complete rows plus the next-row affordance are visible at 320 × 568; all five current accounts fit at 390 × 844.

• P1 — Mobile configuration repeated identity information before the first editable field.

  • Before: header, three-column summary, numbered tabs and identity overview pushed the first editable field to roughly y=425.
  • Fix: kept only the decision-critical permission scope and account-status summary on mobile, removed duplicate step circles and hid the repeated identity overview.
  • After: the first identity field begins at y=253 in production. Permission scope, account enable/disable state, section tabs and persistent save state remain visible.

• P2 — Narrow directory scrolling reduced usable row width.

  • Fix: hid the decorative inner scrollbar on mobile while preserving the keyboard-focusable scroll region and native touch scrolling.

Fidelity and interaction checks

• Desktop remains a true one-row directory with dedicated columns for menu permissions, vehicle permissions, recent login and access state.
• Desktop configuration retains the complete three-part summary and detailed identity overview; mobile removes only duplicated information.
• The mobile vehicle-permission tab was exercised in production: assigned plates remain primary, VIN secondary, and effective periods, adjust/remove actions, pagination and history remain reachable.
• No horizontal document overflow occurred at 390px or 1440px.
• Production console: no warnings or errors for the deployed route.
• Automated gate: 73 test files and 382 tests passed. Production build gate passed with 74 release assets.
• Local and ECS UsersPage-CNmDqRKT.css SHA-256 matched: 6d5e0f80489967fc5f4eac7c30236091969e66730e68031713740c3f8c603ba3.

Evidence

• /tmp/responsive-audit-20260720/users-list-mobile-production.png
• /tmp/responsive-audit-20260720/users-config-mobile-production.png
• /tmp/responsive-audit-20260720/users-config-vehicles-mobile-after.png
• /tmp/responsive-audit-20260720/users-list-desktop-production.png

final result: passed

2026-07-20 Operations mobile clarity audit

Audit scope

• Surface: authenticated /operations quality workspace.
• User goal: scan the active reconciliation queue, understand the two urgent counts, and move between reconciliation and diagnosis without leaving the viewport or losing mobile navigation.
• Production baseline: /tmp/cross-route-audit-20260720/mobile-operations-stable.png.
• Local implementation: /tmp/cross-route-audit-20260720/mobile-operations-local-after-stable.png.
• Production verification: /tmp/cross-route-audit-20260720/mobile-operations-production-final.png.

Findings and resolution

1. P1 — the operations command surfaces exceeded the phone viewport.

   • Baseline measurement: the 390px-wide command bar started at x=8 and ended at x=398 because a desktop width: 100% combined with 8px mobile margins. The adjacent workspace navigation inherited the same geometry.
   • Impact: the global refresh action and right edge of the segmented workspace control were visibly clipped.
   • Fix: the mobile operations command bar and workspace navigation now use their available flex width (width: auto) and remain inset from x=8 to x=382.

2. P1 — half of the reconciliation metric rail was reserved for hidden desktop context.

   • Baseline measurement: the rail body retained 199px 180px columns at 390px even though the context column was hidden. The two visible metrics were compressed to 99.5px each, truncating both supporting notes.
   • Impact: users could see the large numbers but not understand whether 1,327 represented active items or what caused 1,189 SLA breaches.
   • Fix: the hidden context column now collapses on phones. The visible list occupies all 379px with two equal 189.5px columns, and each metric uses a clear label/value/note stack.

Final pass

• 390 × 844 production document width equals viewport width.
• Command bar and workspace navigation are both fully inside the viewport.
• 待复核 1,327 / 活跃 1,327 项 and SLA 超时 1,189 / 超过 24 小时 are fully legible.
• The 差异处置 → 单车诊断 → 差异处置 interaction was exercised against ECS production. Both panels rendered correctly and document width remained 390px.
• 1440 × 900 retained the existing five-column reconciliation table, summary context, side navigation and pagination without reflow.
• No production console warning or error was emitted during the smoke test. The known Semi UI findDOMNode message remains development-only.
• Automated gate: 73 test files and 381 tests passed.
• Production build gate: 74 release assets passed.
• Release ops-mobile-clarity-20260720175459 is active. The served app-BUsvckVz.css SHA-256 matches the local build: feb4f945ff7dc586a31d1c65f985048b7ef6399574911db182767fc813c28121.

Evidence limits

• Screenshot and DOM evidence verifies responsive reflow, visible hierarchy, interaction state and console health. It does not by itself prove full WCAG conformance or screen-reader announcements.
• The diagnosis vehicle picker was not used to mutate production state; its empty state and workspace transition were verified read-only.

final result: passed

---

Account management guided onboarding — Design QA

• Source visual truth: /tmp/account-management-audit-20260720/07-users-mobile-create-production-baseline.png
• Rendered implementation: /tmp/account-management-audit-20260720/08-users-mobile-create-local-after.png
• Deployed production implementation: /tmp/account-management-audit-20260720/14-users-mobile-create-production-after.png
• Full-view comparison: /tmp/account-management-audit-20260720/12-users-mobile-create-full-comparison.png
• Focused summary/footer comparison: /tmp/account-management-audit-20260720/13-users-mobile-create-focus-comparison.png
• Web implementation: /tmp/account-management-audit-20260720/11-users-desktop-create-local-after.png
• Follow-on menu step: /tmp/account-management-audit-20260720/09-users-mobile-create-menu-local-after.png
• Follow-on vehicle step: /tmp/account-management-audit-20260720/10-users-mobile-create-vehicles-local-after.png
• Viewports: 390 × 844 and 1440 × 900
• State: authenticated administrator; customer directory, existing customer editor and new-customer draft

Findings and comparison history

Baseline

• [P1] The new-account default contradicted the page's least-privilege promise.
  • Evidence: the production source capture opened a new customer with all four customer menus already granted, while the header and supporting copy said permissions were opened by minimum necessary scope.
  • Impact: an administrator could create a broadly authorized account without explicitly reviewing menu access.
  • Fix: new drafts now begin with zero menu and zero vehicle permissions. Existing accounts retain their saved menu and vehicle grants unchanged.
  • Post-fix evidence: the implementation summary shows 0 菜单 · 0 辆, the badge reads 待开放菜单, and every menu row begins unchecked.
• [P2] Draft state and the primary action implied that an unsaved account was already synchronized.
  • Evidence: before the fix, the new-account footer showed 已同步 and the disabled action was 创建账号, even though no server-side account existed.
  • Impact: administrators could not distinguish a local draft from a saved identity and were not prompted to review permissions in order.
  • Fix: new drafts show 新建草稿; the primary action advances through 下一步：菜单权限, 下一步：车辆权限, then 创建账号. The first step remains disabled until username, display name and a 10–128 character password with at least three character categories are complete.
  • Post-fix evidence: the focused comparison shows the corrected state badge, zero-permission summary and step-specific action.

Final pass

• No actionable P0, P1 or P2 issue remains in the audited account-management flow.
• The existing Web single-line customer directory, mobile dense customer list, identity editor, menu editor, vehicle paging and grant-window editor were preserved.
• A production smoke used a disposable client-side draft, advanced from identity to the zero-menu state, then discarded the draft. No customer was created or modified.

Required fidelity surfaces

• Fonts and typography: the existing PingFang/system stack, title weights, compact metadata and tab hierarchy remain unchanged. Step labels fit at 390px without wrapping or truncating the primary action.
• Spacing and layout rhythm: the established full-width mobile sheet, sticky summary, three-step tabs, scrollable form and sticky footer remain aligned. The Web sheet retains its 820px maximum width and two-column fields.
• Colors and visual tokens: existing Semi blue, neutral and semantic green/amber states are retained. Amber now consistently communicates an incomplete permission scope; blue communicates a local new draft.
• Image quality and assets: no new imagery or replacement asset was introduced. The product's supplied vector brand mark and Semi icon family remain unchanged.
• Copy and content: 新建草稿, 待开放菜单 and the step-specific actions accurately describe server state and the administrator's next task.
• Icons: the existing Semi close, eye, plus and checkbox icons remain aligned and use the same active/disabled treatments.
• Responsiveness: 390px and 1440px captures show no horizontal overflow, clipped footer, hidden close action or obscured form field.
• Accessibility: the flow exposes a dialog, three semantic tabs, labeled fields, checkboxes and buttons. Disabled state prevents advancing with an incomplete or weak identity. Screenshot and DOM review do not replace a full assistive-technology audit.

Interaction and console checks

• Production customer directory → new account → identity draft → menu step → discard draft was exercised without a write.
• Local identity fields were completed with a compliant preview password; the primary action became enabled and advanced to a zero-menu state.
• Menu and vehicle tabs rendered their unchecked/empty states and the final create action without layout shift.
• Existing-customer identity, menu and 44-vehicle states were captured on Web and mobile before implementation.
• Local development emitted only Semi UI's known React findDOMNode deprecation warning. Deployed production emitted no warning or error.
• Automated gate: 73 test files and 380 tests passed. TypeScript, Vite and the release build verifier completed successfully.
• Production release account-onboarding-ux-20260720173338 is active. The immutable release gate verified 74 current and 116 compatibility assets; the served UsersPage bundle is byte-for-byte identical to the local build.

Follow-up polish

• P3: add a compact password-rule checklist to the administrator's initial password field when the shared password-input pattern is next consolidated.

final result: passed

---

Intermediate sidebar continuity — Design QA

• Source visual truth: /tmp/sidebar-continuity-20260720/02-monitor-901-production.png
• Rendered implementation: /tmp/sidebar-continuity-20260720/11-monitor-901-local-settled.png
• Full-view comparison: /tmp/sidebar-continuity-20260720/12-monitor-901-full-comparison.png
• Focused navigation comparison: /tmp/sidebar-continuity-20260720/13-monitor-901-focus-comparison.png
• Cross-route implementation evidence: /tmp/sidebar-continuity-20260720/09-routes-1024-local-montage.png
• Mobile regression evidence: /tmp/sidebar-continuity-20260720/10-statistics-390-mobile-regression.png
• Viewports: 680 × 700, 681 × 700, 900 × 700, 901 × 700, 1024 × 700, 1100 × 700, 1101 × 700, 1280 × 700 and 390 × 844
• State: authenticated customer; Monitor map mode, plus Vehicles, Tracks and Statistics default workspaces

Findings and comparison history

Baseline

• [P2] A one-pixel viewport change caused a disproportionate workspace reflow.
  • Evidence: production at 900px used a 72px compact rail and an 828px main region, while 901px immediately restored a 228px rail and reduced the main region to 673px. The full-view source capture shows the map losing about one third of its width even though the device width increased.
  • Impact: tablet and browser-zoom users could cross the breakpoint and see filters, telemetry and the map recompose abruptly.
  • Fix: aligned the React shell state and shared CSS breakpoint so the 72px Semi icon rail remains active from 681px through 1100px. Full navigation returns at 1101px, where the main region still has 873px.
  • Post-fix evidence: the 901px implementation has a 72px rail, 829px main region and complete 284px account action region. The focused comparison shows the recovered workspace width without changing the page hierarchy.

Final pass

• No actionable P0, P1 or P2 mismatch remains.
• Boundary measurements:
  • 680px: mobile shell, 680px main region.
  • 681px: 72px rail, 609px main region.
  • 900px: 72px rail, 828px main region.
  • 901px: 72px rail, 829px main region.
  • 1024px: 72px rail, 952px main region.
  • 1100px: 72px rail, 1028px main region.
  • 1101px: 228px rail, 873px main region.
  • 1280px: 228px rail, 1052px main region.
• Vehicles, Tracks and Statistics all retained the same shell geometry at 1024px and 1101px with document width equal to viewport width.

Required fidelity surfaces

• Fonts and typography: the existing PingFang/system stack, weights and hierarchy remain unchanged. Labels stay readable in the compact rail and the 901px topbar has no wrapping or clipping.
• Spacing and layout rhythm: the change preserves the established 72px and 228px shell tokens and removes the unstable intermediate reflow. Page margins, card spacing and content density remain consistent across routes.
• Colors and visual tokens: no palette or semantic state color changed. Existing white surfaces, neutral borders and Semi blue selection states remain faithful to the current production design.
• Image quality and assets: the supplied vector brand mark remains the single shell asset. No raster substitute, custom SVG or CSS-drawn asset was introduced.
• Copy and content: no product copy changed. Compact navigation uses the existing accessible menu labels while hiding only visible text.
• Icons: the existing Semi icon set remains optically centered in the 72px rail; selected and inactive states were checked at 901px and 1024px.
• Responsiveness: no horizontal document overflow occurred at any tested boundary. The 390px mileage matrix retained fixed vehicle and total columns, horizontal date navigation and bottom navigation.
• Accessibility: complementary navigation remains present at 681–1100px; mobile navigation remains available below 681px; the account menu remains fully inside the 901px viewport. This visual pass does not replace an assistive-technology audit.

Interaction and console checks

• Monitor, Vehicles, Tracks and Statistics were navigated in the authenticated browser at 1024px and measured again at 1101px.
• Route changes retained the shell, active navigation and full-width work area.
• The 390px Statistics page preserved usable pagination and bottom navigation.
• No application runtime error was observed. Semi UI's known React findDOMNode development StrictMode deprecation warning remains.
• Automated gate: 73 test files and 379 tests passed; production build and release verification completed successfully.
• Deployed production evidence: /tmp/sidebar-continuity-20260720/14-monitor-901-production-after.png. The authenticated ECS page measured a 72px rail and 829px main region at 901px, with no horizontal overflow and no browser console warning or error.
• Release sidebar-continuity-ux-20260720171458 is active. The immutable release gate verified 74 current assets and 116 compatibility assets; the served shell stylesheet is byte-for-byte identical to the local build.

Follow-up polish

• P3: replace the remaining Semi UI components that trigger React findDOMNode development warnings when the library exposes ref-safe alternatives.

final result: passed