polish operations quality workspace

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

@@ -1,7 +1,8 @@
 import { IconRefresh, IconSearch, IconTickCircle } from '@douyinfe/semi-icons';
 import { Button, Card, CardGroup, Checkbox, Descriptions, Empty, Input, Progress, SideSheet, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { FormEvent, useDeferredValue, useEffect, useState } from 'react';
+import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { VehicleCoverageRow, VehicleLocationSourceEvidence, VehicleSourceDiagnostic } from '../../api/types';
 import { InlineError } from '../shared/AsyncState';
@@ -17,6 +18,7 @@ import { useSideSheetA11y } from '../hooks/useSideSheetA11y';
 import ReconciliationCenter from './ReconciliationCenter';
 
 type OperationsWorkspace = 'reconciliation' | 'diagnostic' | 'health';
+const operationsWorkspaces = new Set<OperationsWorkspace>(['reconciliation', 'diagnostic', 'health']);
 
 function statusLabel(status: string) {
   return { ok: '正常', warning: '关注', error: '异常' }[status] ?? status;
@@ -324,18 +326,39 @@ function SourceDiagnosticWorkspace() {
 }
 
 export default function OperationsPage() {
-  const [workspace, setWorkspace] = useState<OperationsWorkspace>('reconciliation');
+  const [searchParams, setSearchParams] = useSearchParams();
+  const requestedWorkspace = searchParams.get('view') as OperationsWorkspace | null;
+  const workspace = requestedWorkspace && operationsWorkspaces.has(requestedWorkspace) ? requestedWorkspace : 'reconciliation';
+  const setWorkspace = (next: OperationsWorkspace) => {
+    const copy = new URLSearchParams(searchParams);
+    if (next === 'reconciliation') copy.delete('view');
+    else copy.set('view', next);
+    setSearchParams(copy, { replace: true });
+  };
   const health = useQuery({ queryKey: ['ops-health-v2'], queryFn: ({ signal }) => api.opsHealth(signal), refetchInterval: 15_000, staleTime: 8_000, gcTime: QUERY_MEMORY.summaryGcTime, ...LIVE_QUERY_POLICY });
   const readiness = useQuery({ queryKey: ['ops-source-readiness-v2'], queryFn: ({ signal }) => api.sourceReadiness(signal), refetchInterval: 30_000, staleTime: 15_000, gcTime: QUERY_MEMORY.summaryGcTime, ...LIVE_QUERY_POLICY });
+  const reconciliation = useQuery({ queryKey: ['reconciliation-summary', 30], queryFn: ({ signal }) => api.reconciliationSummary(30, signal), staleTime: 60_000, gcTime: QUERY_MEMORY.summaryGcTime });
   const data = health.data; const sources = readiness.data;
-  const refresh = () => Promise.all([health.refetch(), readiness.refetch()]);
+  const refresh = () => Promise.all([health.refetch(), readiness.refetch(), reconciliation.refetch()]);
   const linkIssueCount = data?.linkHealth.filter((item) => item.status !== 'ok').length ?? 0;
   const runtimeIssueCount = data ? Number(!data.mysqlWritable) + Number(!data.tdengineWritable) + Number(data.runtime.dataMode !== 'production') : 0;
   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 sortedLinks = useMemo(() => [...(data?.linkHealth ?? [])].sort((left, right) => {
+    const priority = { error: 0, warning: 1, ok: 2 } as Record<string, number>;
+    return (priority[left.status] ?? 3) - (priority[right.status] ?? 3);
+  }), [data?.linkHealth]);
+  const sortedSources = useMemo(() => [...(sources?.sources ?? [])].sort((left, right) => {
+    const priority = { error: 0, warning: 1, ok: 2 } as Record<string, number>;
+    return (priority[left.severity] ?? 3) - (priority[right.severity] ?? 3);
+  }), [sources?.sources]);
   const workspaceContext = workspace === 'reconciliation'
-    ? { description: '每日自动对账', status: '证据处置', color: 'blue' as const }
+    ? {
+        description: '每日自动对账',
+        status: reconciliation.data ? `${reconciliation.data.pending.toLocaleString('zh-CN')} 项待复核` : '读取差异证据',
+        color: reconciliation.data?.overSla ? 'orange' as const : 'blue' as const
+      }
     : workspace === 'diagnostic'
       ? { description: '按需读取单车来源', status: '精确诊断', color: 'cyan' as const }
       : {
@@ -362,9 +385,9 @@ export default function OperationsPage() {
         value={workspace}
         onChange={setWorkspace}
         items={[
-          { key: 'reconciliation', label: '差异处置' },
+          { key: 'reconciliation', label: '差异处置', count: reconciliation.data?.pending || undefined },
           { key: 'diagnostic', label: '单车诊断' },
-          { key: 'health', label: '全局健康' }
+          { key: 'health', label: '全局健康', count: healthIssueCount || undefined }
         ]}
       />
       <div className="v2-ops-navigation-meta" aria-live="polite">
@@ -392,7 +415,7 @@ export default function OperationsPage() {
             <OpsMetric label="服务身份 / 在线" value={sources ? `${sources.totalVehicles} / ${sources.onlineVehicles}` : '—'} detail={sources ? `已绑定 ${sources.boundVehicles} · 待绑定 ${sources.identityRequiredVehicles}` : '档案与快照并集'} />
           </section>
         </Card>
-        <div className="v2-ops-grid"><Card className="v2-ops-panel v2-ops-links" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="数据链路" description="按链路查看当前状态与服务端诊断证据" meta={<HealthTag status={!data ? 'unknown' : linkIssueCount > 0 ? 'warning' : 'ok'}>{!data ? '读取中' : linkIssueCount > 0 ? `${linkIssueCount} 条异常` : '链路正常'}</HealthTag>} /><div className="v2-ops-link-list" role="list">{data?.linkHealth.length ? data.linkHealth.map((item) => <article className={`v2-ops-link-card is-${item.status}`} key={item.name} role="listitem"><span className="v2-ops-link-status"><i /><strong>{item.name}</strong></span><p>{item.detail || '无补充信息'}</p><HealthTag status={item.status} /></article>) : <Empty className="v2-ops-link-empty" title={data ? '暂无链路探针' : '正在读取链路状态'} description={data ? '当前响应没有可展示的数据链路证据。' : '全局健康数据返回后将在这里更新。'} />}</div></Card>
+        <div className="v2-ops-grid"><Card className="v2-ops-panel v2-ops-links" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="数据链路" description="按链路查看当前状态与服务端诊断证据" meta={<HealthTag status={!data ? 'unknown' : linkIssueCount > 0 ? 'warning' : 'ok'}>{!data ? '读取中' : linkIssueCount > 0 ? `${linkIssueCount} 条异常` : '链路正常'}</HealthTag>} /><div className="v2-ops-link-list" role="list">{sortedLinks.length ? sortedLinks.map((item) => <article className={`v2-ops-link-card is-${item.status}`} key={item.name} role="listitem"><span className="v2-ops-link-status"><i /><strong>{item.name}</strong></span><p>{item.detail || '无补充信息'}</p><HealthTag status={item.status} /></article>) : <Empty className="v2-ops-link-empty" title={data ? '暂无链路探针' : '正在读取链路状态'} description={data ? '当前响应没有可展示的数据链路证据。' : '全局健康数据返回后将在这里更新。'} />}</div></Card>
           <Card className="v2-ops-panel v2-ops-runtime" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="运行时安全" description="生产模式、写入探针与代理配置" meta={<HealthTag status={!data ? 'unknown' : runtimeIssueCount + capacityIssueCount > 0 ? 'warning' : 'ok'}>{!data ? '读取中' : runtimeIssueCount + capacityIssueCount > 0 ? `${runtimeIssueCount + capacityIssueCount} 项关注` : '配置正常'}</HealthTag>} /><Descriptions className="v2-ops-runtime-descriptions" align="left" size="small" data={[
             { key: '生产数据模式', value: <HealthTag status={data?.runtime.dataMode === 'production' ? 'ok' : 'error'}>{data?.runtime.dataMode === 'production' ? '已启用' : '未启用'}</HealthTag> },
             { key: 'MySQL 写探针', value: <HealthTag status={data?.mysqlWritable ? 'ok' : 'error'}>{data?.mysqlWritable ? '正常' : '异常'}</HealthTag> },
@@ -400,7 +423,7 @@ export default function OperationsPage() {
             { key: '请求超时', value: `${data?.runtime.requestTimeoutMs ?? '—'} ms` },
             { key: '高德安全代理', value: <HealthTag status={data?.runtime.amapSecurityProxyEnabled && !data?.runtime.amapSecurityCodeExposed ? 'ok' : 'warning'}>{data?.runtime.amapSecurityProxyEnabled ? '服务端代理' : '未启用'}</HealthTag> }
           ]} />{data?.capacityFindings?.length ? <div className="v2-ops-capacity-findings">{data.capacityFindings.map((item) => <Card className="v2-ops-capacity-finding" key={item}><HealthTag status="warning">待处理</HealthTag><p>{item}</p></Card>)}</div> : <Empty className="v2-ops-capacity-empty" image={<IconTickCircle />} title="容量检查通过" description="当前没有需要处理的容量风险。" />}</Card></div>
-        <Card className="v2-ops-panel v2-ops-sources" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="协议来源就绪度" description="在线覆盖、当前证据、处置动作与验收口径" meta={<Tag color="blue" type="light" size="small">{sources ? `${sources.sources.length} 个协议` : '正在读取'}</Tag>} />{sources ? sources.sources.length ? <CardGroup className="v2-ops-source-list" type="grid" spacing={0}>{sources.sources.map((source) => {
+        <Card className="v2-ops-panel v2-ops-sources" bodyStyle={{ padding: 0 }}><WorkspacePanelHeader title="协议来源就绪度" description="在线覆盖、当前证据、处置动作与验收口径" meta={<Tag color="blue" type="light" size="small">{sources ? `${sources.sources.length} 个协议` : '正在读取'}</Tag>} />{sources ? sortedSources.length ? <CardGroup className="v2-ops-source-list" type="grid" spacing={0}>{sortedSources.map((source) => {
           const onlineRate = sourceOnlineRate(source.online, source.total, source.onlineRate);
           return <Card className={`v2-ops-source-card is-${source.severity}`} key={source.protocol} title={<span className="v2-ops-source-title"><Tag color="blue" type="light" size="small">{source.protocol}</Tag><small>{source.role}</small></span>} headerExtraContent={<HealthTag status={source.severity}>{source.status || statusLabel(source.severity)}</HealthTag>} headerLine>
           <div className="v2-ops-source-coverage"><span><strong>在线覆盖</strong><b>{source.online.toLocaleString('zh-CN')} / {source.total.toLocaleString('zh-CN')}</b></span><Progress aria-label={`${source.protocol} 在线覆盖率`} percent={onlineRate} showInfo={false} stroke="var(--v2-blue)" /><small>{number(onlineRate)}% 在线{source.missingVehicles ? ` · ${source.missingVehicles.toLocaleString('zh-CN')} 辆待恢复` : ''}</small></div>