refine Semi UI operations workspace

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

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { cleanup, fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import { afterEach, expect, test, vi } from 'vitest';
 import OperationsPage from './OperationsPage';
 
@@ -61,8 +61,12 @@ test('renders reconciliation queue, loads evidence on demand and records review
   expect(await screen.findByText('数据差异中心')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '运行与数据质量', level: 5 })).toBeInTheDocument();
   expect(screen.getByLabelText('运维质量操作')).toHaveClass('v2-workspace-command-bar', 'v2-ops-command-bar');
+  const navigation = screen.getByRole('navigation', { name: '运维质量视图' });
+  expect(navigation).toHaveClass('v2-ops-navigation');
+  expect(within(navigation).getByText('每日自动对账')).toBeInTheDocument();
+  expect(within(navigation).getByText('证据处置')).toBeInTheDocument();
   expect(screen.getByRole('tab', { name: '差异处置', selected: true })).toHaveClass('semi-button');
-  expect(screen.getByRole('tabpanel', { name: '差异处置' })).toBeInTheDocument();
+  expect(screen.getByRole('tabpanel', { name: '差异处置' })).toHaveAttribute('tabindex', '0');
   expect(document.querySelector('.v2-ops-page')).toHaveClass('is-reconciliation');
   expect(screen.queryByText('先选择一辆车')).not.toBeInTheDocument();
   expect(screen.getByText('数据差异中心').closest('.semi-card')).toHaveClass('v2-reconcile-center');
@@ -167,6 +171,8 @@ test('reconciles service identities with bound and identity-required vehicles',
 
   fireEvent.click(screen.getByRole('tab', { name: '全局健康' }));
   expect(await screen.findByText('1024 / 234')).toBeInTheDocument();
+  expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('15 秒刷新运行证据')).toBeInTheDocument();
+  expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('运行正常')).toBeInTheDocument();
   for (const key of [['ops-health-v2'], ['ops-source-readiness-v2']]) {
     const query = client.getQueryCache().find({ queryKey: key });
     const liveOptions = query?.options as { refetchIntervalInBackground?: boolean; refetchOnWindowFocus?: boolean };
@@ -195,6 +201,8 @@ test('reconciles service identities with bound and identity-required vehicles',
   expect(screen.getByText('验收标准').closest('.semi-card')).toHaveClass('v2-ops-source-card');
   expect(screen.queryByText('单车多来源诊断')).not.toBeInTheDocument();
   fireEvent.click(screen.getByRole('tab', { name: '单车诊断' }));
+  expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('按需读取单车来源')).toBeInTheDocument();
+  expect(within(screen.getByRole('navigation', { name: '运维质量视图' })).getByText('精确诊断')).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '诊断车辆', level: 5 })).toBeInTheDocument();
   expect(screen.getByRole('heading', { name: '诊断车辆', level: 5 }).closest('.semi-card')).toHaveClass('v2-source-filter-panel', 'v2-workspace-filter-panel');
   expect(screen.getByText('先选择一辆车').closest('.semi-empty')).toHaveClass('v2-source-empty');

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

@@ -339,6 +339,15 @@ export default function OperationsPage() {
   const capacityIssueCount = data?.capacityFindings.length ?? 0;
   const healthIssueCount = linkIssueCount + runtimeIssueCount + capacityIssueCount + Number((data?.kafkaLag ?? 0) > 0);
   const overallStatus = !data ? 'unknown' : healthIssueCount > 0 ? 'warning' : 'ok';
+  const workspaceContext = workspace === 'reconciliation'
+    ? { description: '每日自动对账', status: '证据处置', color: 'blue' as const }
+    : workspace === 'diagnostic'
+      ? { description: '按需读取单车来源', status: '精确诊断', color: 'cyan' as const }
+      : {
+          description: '15 秒刷新运行证据',
+          status: !data ? '读取中' : healthIssueCount > 0 ? `${healthIssueCount} 项关注` : '运行正常',
+          color: !data ? 'grey' as const : healthIssueCount > 0 ? 'orange' as const : 'green' as const
+        };
   return <div className={`v2-ops-page is-${workspace}`}>
     <WorkspaceCommandBar
       className="v2-ops-command-bar"
@@ -350,19 +359,25 @@ export default function OperationsPage() {
       meta={<Typography.Text type="tertiary">{data?.runtime.platformRelease ? `版本 ${data.runtime.platformRelease}` : '正在读取运行版本'}</Typography.Text>}
       actions={<Button theme="light" icon={<IconRefresh />} loading={health.isFetching || readiness.isFetching} onClick={refresh}>刷新全局证据</Button>}
     />
-    <SegmentedTabs
-      className="v2-ops-tabs"
-      variant="filled"
-      ariaLabel="运维质量工作区"
-      value={workspace}
-      onChange={setWorkspace}
-      items={[
-        { key: 'reconciliation', label: '差异处置' },
-        { key: 'diagnostic', label: '单车诊断' },
-        { key: 'health', label: '全局健康' }
-      ]}
-    />
-    <section className={`v2-ops-workspace is-${workspace}`} role="tabpanel" aria-label={workspace === 'reconciliation' ? '差异处置' : workspace === 'diagnostic' ? '单车诊断' : '全局健康'}>
+    <nav className="v2-ops-navigation" aria-label="运维质量视图">
+      <SegmentedTabs
+        className="v2-ops-tabs"
+        variant="filled"
+        ariaLabel="运维质量工作区"
+        value={workspace}
+        onChange={setWorkspace}
+        items={[
+          { key: 'reconciliation', label: '差异处置' },
+          { key: 'diagnostic', label: '单车诊断' },
+          { key: 'health', label: '全局健康' }
+        ]}
+      />
+      <div className="v2-ops-navigation-meta" aria-live="polite">
+        <Typography.Text type="tertiary">{workspaceContext.description}</Typography.Text>
+        <Tag color={workspaceContext.color} type="light" size="small">{workspaceContext.status}</Tag>
+      </div>
+    </nav>
+    <section className={`v2-ops-workspace is-${workspace}`} role="tabpanel" tabIndex={0} aria-label={workspace === 'reconciliation' ? '差异处置' : workspace === 'diagnostic' ? '单车诊断' : '全局健康'}>
       {workspace === 'reconciliation' ? <ReconciliationCenter /> : null}
       {workspace === 'diagnostic' ? <SourceDiagnosticWorkspace /> : null}
       {workspace === 'health' ? <>