shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): refine Semi UI access workspace

Browse Source
This commit is contained in:
lingniu
2026-07-20 00:12:46 +08:00
parent cd13a2952d
commit 58ab1ff7bb
5 changed files with 135 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
design-qa.md
View File

@@ -1,76 +1,78 @@
# Alert Center Semi UI Design QA
# Access Management Semi UI Design QA
## Evidence
- Accepted visual direction: `/tmp/semi-ui-reference-1440.png`.
- Existing flow baseline: `/tmp/alerts-before-desktop.jpg`.
- Final desktop implementation: `/tmp/alerts-after-desktop-v2.jpg`.
- Final desktop inspector state: `/tmp/alerts-after-inspector.jpg`.
- Final mobile queue: `/tmp/alerts-after-mobile-v2.jpg`.
- Final mobile disposition sheet: `/tmp/alerts-after-mobile-detail.jpg`.
- System comparison: `/tmp/semi-alerts-design-comparison.jpg`.
- Same-route comparison: `/tmp/alerts-before-after-comparison.jpg`.
- Desktop capture: 1280 × 720 (the embedded browser's available desktop surface).
- Responsive viewport: 390 × 844.
- Existing flow baseline: `/tmp/access-before-desktop.jpg`.
- Final desktop implementation: `/tmp/access-after-desktop-final.jpg`.
- Final mobile queue: `/tmp/access-after-mobile-visible.jpg`.
- Final mobile evidence sheet: `/tmp/access-after-mobile-detail.jpg`.
- Final mobile governance sheet: `/tmp/access-after-mobile-governance.jpg`.
- Final mobile filter sheet: `/tmp/access-after-mobile-filter.jpg`.
- System comparison: `/tmp/semi-access-design-comparison.jpg`.
- Same-route comparison: `/tmp/access-before-after-comparison.jpg`.
- Desktop viewport and state: 1280 × 720, all authoritative vehicles, no row selected.
- Mobile viewport and states: 390 × 844, queue, filter, vehicle evidence and governance SideSheets.
## Full-view comparison
The final alert center preserves the accepted Semi UI product skeleton: persistent navigation, white operational surfaces, cool-gray canvas, blue primary actions, compact segmented tabs, restrained status colors, and one list-first work surface.
The final access workspace retains the accepted Semi UI skeleton: persistent navigation, white operational surfaces, cool-gray canvas, compact filters, restrained semantic colors, one dominant data list and on-demand SideSheets.
Compared with the baseline, the filter band is 14px shorter, the misleading radio-selection column is removed, row priority can be scanned through semantic left rails, and the desktop table no longer produces 160px of avoidable horizontal overflow. The recovered height is returned to the event queue.
The primary hierarchy changed from vehicle → brand/model → protocols → difference to vehicle → difference conclusion → protocols → brand/model. The actionable conclusion is now always adjacent to the vehicle and remains fixed during horizontal table movement. The 1280px state has no page or table overflow and shows five vehicle rows in the active viewport.
## Focused comparison
The selected-event state was checked independently because the evidence inspector changes the page grid. At 1280 × 720 the final split is 628px / 390px with zero page overflow; the list remains interactive and the inspector keeps vehicle identity, trigger evidence, disposition controls and audit progress visible.
The mobile queue was checked separately because the protocol matrix becomes a card list at 390px. Three protocol states now share one evidence band instead of three competing nested cards. Semantic rails make healthy, degraded, offline and selected vehicles scannable without increasing card height.
The 390 × 844 mobile state shows four high-density event cards in one screen. Opening a card produces one bottom SideSheet with the same evidence and disposition order as desktop, without horizontal overflow.
The filter, vehicle evidence and governance sheets were each opened in the browser. Primary reset/apply, evidence disclosure, configuration summary and completion actions remain visible without horizontal overflow.
## Fidelity ledger
| Surface | Source evidence | Render evidence | Result |
| --- | --- | --- | --- |
| Typography | Strong task title, compact utility copy, tabular values | Command title, queue title, vehicle identity, evidence values and helper copy retain the shared Semi hierarchy | Passed |
| Spacing and density | 12–18px workspace gutters and compact operational controls | Filter height reduced from 68px to 54px; table rows remain 52px and mobile cards preserve four visible records | Passed |
| Colors and states | White/cool-gray surfaces, blue action state, restrained semantic colors | Severity rails and tags use existing critical/major/minor tokens; no new palette or decorative gradient was introduced | Passed |
| Icons and assets | Brand logo plus Semi icon family | Existing logo and alarm, filter, refresh, settings, bell and chevron icons are retained | Passed |
| Table and queue | List-first operational workspace | Radio chrome removed; fixed table layout eliminates desktop horizontal overflow and selected rows use the shared blue focus state | Passed |
| Evidence inspector | On-demand detail without replacing the queue | Desktop 628/390 split and mobile SideSheet preserve trigger, threshold, delta, notes and audit timeline | Passed |
| Responsive behavior | Dense desktop with focused mobile disclosure | 1280 × 720 and 390 × 844 have zero page-level horizontal overflow; mobile title, metrics, cards and pagination remain reachable | Passed |
| Interaction | Rows, filters, tabs and actions must remain functional | Whole-row keyboard/click selection, advanced filter SideSheet, status metrics, rule tabs and mobile disposition sheet are test-covered | Passed |
| Typography | Strong work-surface title, compact labels and tabular evidence values | Command title, difference conclusion, vehicle identity, protocol timestamps and inspector hierarchy use the shared Semi scale | Passed |
| Spacing and layout rhythm | Compact command/filter band with one dominant list | Filter height remains 54px; table rows are reduced to 54px; five desktop rows and roughly four mobile cards are visible | Passed |
| Colors and tokens | White/cool-gray surfaces, blue actions and restrained semantic state colors | Existing green, amber, red and blue tokens are reused for row rails, status tags and selected state | Passed |
| Image and asset fidelity | Supplied brand logo and Semi icon family | Brand logo is unchanged; search, settings, refresh, filter, download and disclosure icons remain Semi assets | Passed |
| Table hierarchy | Differences should dominate the access workflow | `差异结论` is now the second fixed column; protocol evidence follows and brand/model is explicitly secondary | Passed |
| Mobile density | Small screens need concise but complete vehicle evidence | Three protocol cells are grouped into one band; 390 × 844 has zero horizontal overflow and keeps pagination reachable | Passed |
| Detail and governance | Evidence and configuration should not replace the list permanently | Vehicle and governance tasks use focused SideSheets with summaries, evidence and stable close/complete actions | Passed |
| Interaction and accessibility | Rows, filters, disclosures and actions must be keyboard/touch operable | Whole-row selection, arrow-key table scrolling, filter SideSheet, evidence disclosure and governance actions are test-covered | Passed |
## Above-the-fold copy diff
- Changed `告警事件` to `当前事件队列` to clarify the primary work surface.
- Changed table header `严重程度` to `级别` and `触发 / 阈值` to `触发证据` for faster scanning.
- Changed the list meta from only `共 N 条` to `N 条待处置 · 共 N 条`.
- Existing business claims, tab names, statuses, rules, routes and disposition actions are preserved.
- Changed `真实来源与接入健康` to `接入健康工作台`.
- Changed `全部主车辆` panel title to `接入差异清单`; the current scope now appears in its description.
- Changed table header `差异摘要` to `差异结论`.
- Existing filter fields, protocol names, vehicle facts, governance actions and business claims are preserved.
## Comparison history
1. P2 — The baseline desktop table had a 160px horizontal overflow at 1280px, despite all columns being operationally compact.
- Fix: removed the redundant radio column, tightened column widths and applied a fixed table layout.
- Post-fix measurement: `scrollWidth 1015px = clientWidth 1015px`.
2. P2 — The first compact-inspector pass still overflowed because the final cascade restored a 650px + 420px grid.
- Fix: changed the final grid to `minmax(0, 1fr) minmax(360px, 390px)` and tightened compact columns.
- Post-fix measurement: `628px / 390px`, page overflow `0`.
3. P2 — The first mobile capture hid the queue title and left a visually empty header area.
- Fix: hide only the description on mobile while retaining the `当前事件队列` heading.
- Post-fix evidence: `/tmp/alerts-after-mobile-v2.jpg`.
1. P2 — The baseline placed the actionable difference summary after brand/model and three protocol columns.
- Fix: moved `差异结论` next to vehicle identity and fixed both columns.
- Post-fix evidence: `/tmp/access-before-after-comparison.jpg`; the first three headers are `车辆`, `差异结论`, `GB/T 32960`.
2. P2 — Mobile protocol status appeared as three independent mini-cards and made each vehicle feel fragmented.
- Fix: grouped the three protocol cells into one bordered evidence band with internal dividers.
- Post-fix evidence: `/tmp/access-after-mobile-visible.jpg`.
3. P2 — Row status depended mainly on small status tags and required close reading.
- Fix: added semantic row/card rails for healthy, degraded/incomplete, offline/not-connected and selected states.
- Post-fix evidence: desktop and mobile final captures; no added row or card height.
## Findings
- No actionable P0, P1 or P2 visual differences remain.
- P3 follow-up: Semi UI 2.101 still emits its existing `findDOMNode` StrictMode warning in tests; it does not affect this layout or interaction path.
- P3 follow-up: Semi UI 2.101 continues to emit its existing `findDOMNode` StrictMode warning in tests; it does not affect this layout or workflow.
## Core interaction verification
- Desktop keyword, severity and status query.
- Advanced filter SideSheet open, apply and reset.
- Metric shortcuts for active and ended states.
- Desktop vehicle, status, protocol and brand query.
- Difference and all-vehicle metric shortcuts.
- Whole-row mouse and keyboard selection.
- Desktop inspector open, switch event and close.
- Mobile filter sheet open/apply and mobile event SideSheet open/close.
- Rule configuration and notification tabs remain covered by the full suite.
- Horizontal protocol browsing with fixed vehicle and difference columns.
- Mobile filter open, reset/apply affordances and close.
- Mobile vehicle evidence open, protocol disclosure and close.
- Mobile governance open, pending identity summary, threshold disclosure and complete.
- Browser state: no application error overlay, no visible error alert and no page-level horizontal overflow.
- Full suite: 73 files, 366 tests passed.
- Production build gate: passed.