80 lines
5.4 KiB
Markdown
80 lines
5.4 KiB
Markdown
# Alert Center 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.
|
||
|
||
## 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.
|
||
|
||
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.
|
||
|
||
## 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 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.
|
||
|
||
## 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 |
|
||
|
||
## 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.
|
||
|
||
## 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`.
|
||
|
||
## 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.
|
||
|
||
## Core interaction verification
|
||
|
||
- Desktop keyword, severity and status query.
|
||
- Advanced filter SideSheet open, apply and reset.
|
||
- Metric shortcuts for active and ended states.
|
||
- 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.
|
||
- Full suite: 73 files, 366 tests passed.
|
||
- Production build gate: passed.
|
||
|
||
## Final result
|
||
|
||
final result: passed
|