From 0f51e3d3751ee6d5c54bd1cf1c8163af9d0b1389 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sun, 19 Jul 2026 18:21:44 +0800 Subject: [PATCH] refactor(ui): polish semi alert workspace --- .../apps/web/src/v2/pages/AlertsPage.tsx | 15 +- .../apps/web/src/v2/styles/workspace.css | 322 ++++++++++++++++++ 2 files changed, 336 insertions(+), 1 deletion(-) diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx index 38c1b791..c1026986 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx @@ -31,6 +31,15 @@ const EMPTY_FILTERS: Filters = { keyword: '', severity: '', status: '', ruleId: const PROTOCOLS = ['GB32960', 'JT808', 'YUTONG_MQTT']; const NUMERIC_OPERATORS = ['gt', 'gte', 'lt', 'lte', 'eq', 'neq', 'between', 'outside']; const BOOLEAN_OPERATORS = ['eq', 'neq', 'changed']; +const COMPACT_ALERT_COLUMN_WIDTHS: Record = { + selection: 40, + severity: 80, + plate: 132, + ruleName: 148, + protocol: 100, + triggeredAt: 120, + status: 78 +}; type RuleTemplate = { id: string; title: string; summary: string; draft: AlertRuleInput }; const RULE_TEMPLATES: RuleTemplate[] = [ @@ -100,7 +109,11 @@ const AlertEventTable = memo(function AlertEventTable({ rows, selectedID, compac }, { title: '位置', dataIndex: 'location', width: 180, render: (value: string) => {value || '—'} }, ]; - return compact ? allColumns.filter((column) => column.dataIndex !== 'evidence' && column.dataIndex !== 'location') : allColumns; + return compact + ? allColumns + .filter((column) => column.dataIndex !== 'evidence' && column.dataIndex !== 'location') + .map((column) => ({ ...column, width: COMPACT_ALERT_COLUMN_WIDTHS[column.dataIndex] ?? column.width })) + : allColumns; }, [compact, onSelect, selectedID]); return .semi-button { + min-height: 34px; + border: 1px solid transparent; + color: #617188; + font-size: 12px; + font-weight: 680; + box-shadow: none; +} + +.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button:hover { + border-color: #e0e7f0; + background: #fff; + color: #315f98; +} + +.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active, +.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button.is-active:hover { + border-color: #c7daf7; + background: linear-gradient(180deg, #f7faff 0%, #eaf2ff 100%); + color: #1268df; + box-shadow: 0 2px 8px rgba(18, 104, 223, .08), inset 0 -2px #75a6ed; +} + +.v2-alert-navigation .v2-alert-tabs > .semi-button.is-active .v2-segmented-tab-count { + background: #fff; + color: #d9473f; + box-shadow: 0 0 0 1px rgba(217, 71, 63, .12); +} + +.v2-alert-filter.v2-alert-filter-primary { + min-height: 66px; + padding: 9px 13px; +} + +.v2-alert-filter.v2-alert-filter-primary label > div, +.v2-alert-filter.v2-alert-filter-primary .semi-select, +.v2-alert-filter.v2-alert-filter-primary .semi-input-wrapper, +.v2-alert-filter.v2-alert-filter-primary > .semi-button { + min-height: 36px; +} + +.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header { + min-height: 56px; + padding-inline: 15px; +} + +.v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography { + color: #253d58; + font-size: 16px; + font-weight: 720; +} + +.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography { + font-size: 11px; +} + +.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-thead > .semi-table-row > .semi-table-row-head { + height: 44px; + background: #f7f9fc; + color: #5d6f86; + font-size: 12px; + font-weight: 650; +} + +.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell { + height: 56px; + padding: 8px 10px; + color: #405269; + font-size: 12.5px; + transition: background-color .16s ease; +} + +.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell { + background: #f6f9fe; +} + +.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row.is-selected > .semi-table-row-cell { + background: #edf5ff; +} + +.v2-alert-event-evidence strong { + font-size: 13px; +} + +.v2-alert-event-evidence small { + font-size: 10.5px; +} + +.v2-alert-workspace { + gap: 10px; +} + +.v2-alert-workspace.is-inspector-open { + grid-template-columns: minmax(650px, 1fr) 420px; +} + +.v2-alert-workspace.is-inspector-open .v2-alert-event-table.is-compact.semi-table-wrapper { + width: 100%; + min-width: 0; + box-sizing: border-box; +} + +.v2-alert-inspector.semi-card { + background: #f4f7fb; +} + +.v2-alert-inspector > .semi-card-body > .v2-alert-inspector-heading { + border-bottom: 1px solid #e1e8f1; + background: rgba(255, 255, 255, .92); +} + +.v2-alert-inspector-heading > .v2-workspace-panel-copy > .semi-typography:first-child { + color: #253d58; + font-size: 15px; +} + +.v2-alert-inspector-heading > .v2-workspace-panel-copy > .semi-typography:last-child { + max-width: 285px; + font-size: 11px; +} + +.v2-alert-inspector-content { + scrollbar-color: #b7c4d2 transparent; + scrollbar-width: thin; +} + +.v2-alert-inspector-content::-webkit-scrollbar { + width: 8px; +} + +.v2-alert-inspector-content::-webkit-scrollbar-thumb { + border: 2px solid transparent; + border-radius: 999px; + background: #b7c4d2; + background-clip: padding-box; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-inspector-content { + gap: 10px; + padding: 10px; +} + +.v2-alert-detail-card.semi-card, +.v2-alert-technical-collapse.semi-collapse { + border-color: #dce5ef; + border-radius: 12px; + box-shadow: 0 4px 14px rgba(31, 53, 80, .035); +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity { + min-height: 76px; + padding: 11px 13px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity strong { + font-size: 20px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-identity code { + font-size: 11px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts > span { + min-height: 58px; + padding: 8px 10px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts small { + font-size: 10px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-facts strong { + font-size: 13px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence { + grid-template-columns: .9fr 1.25fr .9fr; + gap: 8px; + padding: 10px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence > .v2-alert-evidence-value > .semi-card-body { + min-height: 70px; + padding: 8px 6px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence small { + font-size: 10px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-card .v2-alert-evidence strong { + font-size: 14px; + line-height: 1.35; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-rule { + min-height: 38px; + padding: 7px 10px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-focus-rule > span { + font-size: 11px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card > .semi-card-header { + min-height: 42px; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card > .semi-card-body { + padding: 10px !important; +} + +.v2-alert-inspector:not(.is-sheet) .v2-alert-disposition-card .semi-input-textarea { + min-height: 54px; +} + +.v2-alert-inspector > .semi-card-body > .v2-alert-links { + min-height: 52px; + gap: 7px; + padding: 7px 10px; +} + +.v2-alert-inspector > .semi-card-body > .v2-alert-links a { + min-height: 36px; + border-radius: 8px; + background: #edf4fc; + color: #155fc5; + font-weight: 650; +} + +@media (max-width: 1280px) and (min-width: 681px) { + .v2-alert-workspace.is-inspector-open > .v2-alert-inspector { + width: min(420px, calc(100% - 56px)); + } +} + +@media (max-width: 680px) { + .v2-alert-page { + gap: 8px; + padding: 8px 8px 10px; + } + + .v2-alert-navigation { + min-height: 48px; + border-radius: 12px; + } + + .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs { + min-height: 40px; + grid-auto-columns: minmax(102px, 1fr); + padding: 3px; + } + + .v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .semi-button { + min-height: 34px; + font-size: 11px; + } + + .v2-alert-mobile-discovery { + gap: 6px; + } + + .v2-alert-mobile-discovery > .v2-mobile-filter-toggle.semi-button { + min-height: 48px; + } + + .v2-alert-mobile-list > .v2-alert-mobile-card.semi-card { + border-color: #dfe6ef; + border-radius: 10px; + box-shadow: 0 2px 8px rgba(31, 53, 80, .025); + } + + .v2-alert-mobile-card-content { + padding: 9px 10px; + } + + .v2-alert-mobile-card-content header > strong { + color: #293f58; + font-size: 14px; + } + + .v2-alert-inspector.is-sheet .v2-alert-inspector-content { + gap: 8px; + padding: 8px; + } +}