refactor(ui): polish semi alert workspace

2026-07-19 18:21:44 +08:00
parent adc01f2fa4
commit 0f51e3d375
2 changed files with 336 additions and 1 deletions
--- 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<string, number> = {
+  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) => <span className="v2-alert-event-location" title={value}>{value || '—'}</span> },
    ];
-    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 <Table
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -24827,3 +24827,325 @@
    box-shadow: inset 2px 0 #c9d2de;
  }
 }
+
+/*
+ * Semi UI alert convergence — keep the event queue dominant while making the
+ * navigation, evidence inspector and responsive detail flow share the calmer
+ * hierarchy used by the vehicle, track, history and mileage workspaces.
+ */
+.v2-alert-page {
+  gap: 10px;
+  padding: 14px 18px 16px;
+  background: #f4f7fa;
+}
+
+.v2-alert-navigation,
+.v2-alert-filter-card.semi-card,
+.v2-alert-metric-rail.is-queue.semi-card,
+.v2-alert-table-card.semi-card,
+.v2-alert-inspector.semi-card {
+  border-color: #dbe4ee;
+  border-radius: 14px;
+  box-shadow: 0 5px 18px rgba(31, 53, 80, .04);
+}
+
+.v2-alert-navigation {
+  min-height: 50px;
+  background: rgba(255, 255, 255, .96);
+}
+
+.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs {
+  min-height: 40px;
+  grid-auto-columns: minmax(126px, 1fr);
+  gap: 3px;
+  border: 1px solid #e3e9f1;
+  background: #f4f6f9;
+  padding: 3px;
+}
+
+.v2-alert-navigation .v2-alert-tabs.v2-segmented-tabs > .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;
+  }
+}