fix(web): align alert queue table

vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx

@@ -89,20 +89,20 @@ function AlertTime({ value, className = '' }: { value?: string; className?: stri
 const AlertEventTable = memo(function AlertEventTable({ rows, selectedID, compact, onSelect }: { rows: AlertEvent[]; selectedID: string; compact: boolean; onSelect: (id: string) => void }) {
   const columns = useMemo(() => {
     const allColumns = [
-    { title: '级别', dataIndex: 'severity', width: 78, render: (_: AlertEvent['severity'], event: AlertEvent) => <SeverityTag severity={event.severity} /> },
+    { title: '级别', dataIndex: 'severity', className: 'is-severity', width: 78, render: (_: AlertEvent['severity'], event: AlertEvent) => <SeverityTag severity={event.severity} /> },
     {
-      title: '车牌 / VIN', dataIndex: 'plate', width: 132,
+      title: '车牌 / VIN', dataIndex: 'plate', className: 'is-vehicle', width: 132,
       render: (_: string, event: AlertEvent) => <div className="v2-alert-event-vehicle"><strong>{event.plate || '未绑定车牌'}</strong><small>{event.vin}</small></div>
     },
-    { title: '规则', dataIndex: 'ruleName', width: 146, render: (value: string) => <span className="v2-alert-event-rule" title={value}>{value}</span> },
+    { title: '规则', dataIndex: 'ruleName', className: 'is-rule', width: 146, render: (value: string) => <span className="v2-alert-event-rule" title={value}>{value}</span> },
-    { title: '协议', dataIndex: 'protocol', width: 98, render: (value: string) => <ProtocolTag className="v2-alert-protocol-tag" protocol={value} compact /> },
+    { title: '协议', dataIndex: 'protocol', className: 'is-protocol', width: 98, render: (value: string) => <ProtocolTag className="v2-alert-protocol-tag" protocol={value} compact /> },
-    { title: '触发时间', dataIndex: 'triggeredAt', width: 124, render: (value: string) => <AlertTime value={value} /> },
+    { title: '触发时间', dataIndex: 'triggeredAt', className: 'is-triggered-at', width: 124, render: (value: string) => <AlertTime value={value} /> },
-    { title: '状态', dataIndex: 'status', width: 78, render: (_: AlertEvent['status'], event: AlertEvent) => <StatusTag status={event.status} /> },
+    { title: '状态', dataIndex: 'status', className: 'is-status', width: 78, render: (_: AlertEvent['status'], event: AlertEvent) => <StatusTag status={event.status} /> },
     {
-      title: '触发证据', dataIndex: 'evidence', width: 150,
+      title: '触发证据', dataIndex: 'evidence', className: 'is-evidence', width: 150,
       render: (_: unknown, event: AlertEvent) => <div className="v2-alert-event-evidence"><strong>{alertValue(event)}</strong><small>{thresholdText(event)}</small></div>
     },
-    { title: '位置', dataIndex: 'location', width: 164, render: (value: string) => <span className="v2-alert-event-location" title={value}>{value || '—'}</span> },
+    { title: '位置', dataIndex: 'location', className: 'is-location', width: 164, render: (value: string) => <span className="v2-alert-event-location" title={value}>{value || '—'}</span> },
     ];
     return compact
       ? allColumns

vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts

@@ -47,6 +47,8 @@ describe('V2 production entry', () => {
     expect(mainSource).toContain("window.history.scrollRestoration = 'manual'");
     expect(workspaceStyles).toContain('.v2-navigation.semi-navigation .semi-navigation-item-icon-toggle-right:empty');
     expect(workspaceStyles).toContain('.v2-mileage-source-trigger.semi-button .semi-button-content-right > b');
+    expect(workspaceStyles).toContain('.semi-table-row > .semi-table-row-cell:first-child::before');
+    expect(workspaceStyles).not.toContain('.semi-table-row::before');
   });
 
   test('renders a static boot shell and recovers when the React entry never becomes ready', () => {

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -8923,7 +8923,7 @@
   transition: background-color .16s ease, box-shadow .16s ease;
 }
 
-.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row::before {
+.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row > .semi-table-row-cell:first-child::before {
   position: absolute;
   z-index: 2;
   top: 7px;
@@ -8936,15 +8936,15 @@
   pointer-events: none;
 }
 
-.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-critical::before {
+.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-critical > .semi-table-row-cell:first-child::before {
   background: #e5484d;
 }
 
-.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-major::before {
+.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-major > .semi-table-row-cell:first-child::before {
   background: #ed8d32;
 }
 
-.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-minor::before {
+.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-minor > .semi-table-row-cell:first-child::before {
   background: #d9a31d;
 }
 
@@ -26143,6 +26143,24 @@
   background: #edf5ff;
 }
 
+.v2-alert-event-table.semi-table-wrapper :is(.semi-table-row-head, .semi-table-row-cell):is(.is-severity, .is-protocol, .is-triggered-at, .is-status) {
+  text-align: center;
+}
+
+.v2-alert-event-table .semi-table-row-cell.is-rule {
+  color: #31465f;
+  font-weight: 620;
+}
+
+.v2-alert-event-table .semi-table-row-cell.is-triggered-at .v2-alert-time {
+  color: #53667d;
+  font-variant-numeric: tabular-nums;
+}
+
+.v2-alert-event-table .semi-table-row-cell.is-location {
+  color: #607187;
+}
+
 .v2-alert-event-evidence strong {
   font-size: 13px;
 }