feat: focus mobile alert triage

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

@@ -254,7 +254,11 @@ test('renders only selectable Semi alert cards on mobile', async () => {
   expect(view.container.querySelector('.v2-alert-table-scroll.is-mobile-scroll')).toHaveAttribute('tabindex', '0');
   expect(view.container.querySelector('.v2-alert-table-scroll.is-mobile-scroll')).toHaveAttribute('aria-label', '告警事件列表，可上下滚动');
   expect(view.container.querySelector('.v2-alert-event-table')).not.toBeInTheDocument();
-  expect(view.container.querySelectorAll('.v2-alert-kpis .v2-metric-action')).toHaveLength(3);
+  const mobileMetrics = Array.from(view.container.querySelectorAll('.v2-alert-kpis .v2-metric-action'));
+  expect(mobileMetrics).toHaveLength(3);
+  expect(mobileMetrics.map((metric) => metric.textContent)).toEqual(['待处置1', '处理中0', '全部事件1']);
+  expect(screen.getByRole('button', { name: '筛选待处置，共 1 条' })).toHaveAttribute('aria-pressed', 'false');
+  expect(view.container.querySelector('.v2-alert-secondary-states')).not.toBeInTheDocument();
   expect(screen.queryByRole('button', { name: /查看未读通知/ })).not.toBeInTheDocument();
   expect(screen.getByRole('tab', { name: /站内通知/ })).toBeInTheDocument();
   expect(action).toHaveAttribute('aria-expanded', 'false');

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

@@ -225,11 +225,17 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
     <label><span>起始时间</span><Input aria-label="告警起始时间" type="datetime-local" value={draft.dateFrom} onChange={(value) => setDraft({ ...draft, dateFrom: value })} /></label>
     <label><span>结束时间</span><Input aria-label="告警结束时间" type="datetime-local" value={draft.dateTo} onChange={(value) => setDraft({ ...draft, dateTo: value })} /></label>
   </>;
-  const primaryMetrics = [
+  const primaryMetrics = mobileLayout
+    ? [
+      { label: '待处置', value: sums?.unprocessed, tone: 'unprocessed', status: 'unprocessed' },
+      { label: '处理中', value: sums?.processing, tone: 'processing', status: 'processing' },
+      { label: '全部事件', value: allEventCount, tone: 'active', status: '' }
+    ]
+    : [
       { label: '全部事件', value: allEventCount, tone: 'active', status: '' },
       { label: '未处理', value: sums?.unprocessed, tone: 'unprocessed', status: 'unprocessed' },
       { label: '处理中', value: sums?.processing, tone: 'processing', status: 'processing' },
-    ...(mobileLayout ? [] : [{ label: '未读通知', value: unread, tone: 'notice', status: 'notice' }])
+      { label: '未读通知', value: unread, tone: 'notice', status: 'notice' }
     ];
   return <>
     {mobileLayout ? <div className="v2-alert-mobile-discovery">
@@ -285,13 +291,13 @@ function EventWorkspace({ filters, draft, setDraft, setFilters, rules, unread, e
         const value = Number(item.value ?? 0).toLocaleString('zh-CN');
         return <MetricActionButton key={item.label} label={item.label} value={value} tone={item.tone} active={item.status !== 'notice' && filters.status === item.status} ariaLabel={item.status === 'notice' ? `查看未读通知，共 ${value} 条` : `筛选${item.label}，共 ${value} 条`} onClick={() => item.status === 'notice' ? onTab('notifications') : quickStatus(item.status)} />;
       })}</section>
-      <nav className="v2-alert-secondary-states" aria-label="已结束告警状态">{
+      {!mobileLayout ? <nav className="v2-alert-secondary-states" aria-label="已结束告警状态">{
         [
           { label: '已恢复', value: sums?.recovered, status: 'recovered' },
           { label: '已关闭', value: sums?.closed, status: 'closed' },
           { label: '已忽略', value: sums?.ignored, status: 'ignored' }
         ].map((item) => <Button key={item.status} theme="borderless" type="tertiary" aria-pressed={filters.status === item.status} onClick={() => quickStatus(item.status)}><span>{item.label}</span><b>{Number(item.value ?? 0).toLocaleString('zh-CN')}</b></Button>)
-      }</nav>
+      }</nav> : null}
     </Card>
     {events.isError ? <InlineError message={events.error instanceof Error ? events.error.message : '告警事件读取失败'} onRetry={() => events.refetch()} /> : null}
     <div className={`v2-alert-workspace${selectedID && !mobileLayout ? ' is-inspector-open' : ''}`}>

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

@@ -8481,6 +8481,11 @@
     font-size: 11px;
   }
 
+  .v2-alert-navigation .v2-alert-tabs > .semi-button:not(.is-active) .v2-segmented-tab-count {
+    background: #eef2f7;
+    color: #6e7f95;
+  }
+
   .v2-alert-navigation-meta {
     display: none;
   }
@@ -16843,7 +16848,7 @@
   }
 
   .v2-alert-mobile-discovery > .v2-mobile-filter-toggle.semi-button {
-    min-height: 58px;
+    min-height: 52px;
     margin: 0;
   }
 
@@ -16957,18 +16962,18 @@
   }
 
   .v2-alert-context-card.semi-card {
-    min-height: 96px;
+    min-height: 58px;
   }
 
   .v2-alert-context-card .v2-alert-kpis {
-    height: 62px;
+    height: 58px;
-    min-height: 62px;
+    min-height: 58px;
     grid-template-columns: repeat(3, minmax(0, 1fr));
   }
 
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action,
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action-content {
-    min-height: 62px;
+    min-height: 58px;
   }
 
   .v2-alert-context-card .v2-alert-kpis .v2-metric-action {
@@ -16989,12 +16994,6 @@
     color: #28415f;
     font-size: 18px;
   }
-
-  .v2-alert-context-card .v2-alert-secondary-states {
-    min-height: 34px;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    padding: 3px 4px;
-  }
 }
 
 /*