From 5ba636419b3394da3be720da648fe149baac1a5b Mon Sep 17 00:00:00 2001
From: lingniu <lingniu@lingnius-Mac-mini.local>
Date: Mon, 20 Jul 2026 03:49:28 +0800
Subject: [PATCH] feat(web): unify semantic empty states

---
 .../apps/web/src/v2/pages/AlertsPage.tsx      |  10 +-
 .../apps/web/src/v2/pages/MonitorPage.tsx     |   8 +-
 .../apps/web/src/v2/pages/OperationsPage.tsx  |  20 +-
 .../web/src/v2/pages/ReconciliationCenter.tsx |  20 +-
 .../apps/web/src/v2/pages/TrackPage.tsx       |  10 +-
 .../apps/web/src/v2/pages/VehiclePage.tsx     |   6 +-
 .../src/v2/pages/VehicleSearchWorkspace.tsx   |  14 +-
 .../apps/web/src/v2/productionEntry.test.ts   |  19 +-
 .../web/src/v2/shared/AsyncState.test.tsx     |  11 +-
 .../apps/web/src/v2/shared/AsyncState.tsx     |  36 +++-
 .../v2/shared/VehicleSourceEvidencePanel.tsx  |   6 +-
 .../apps/web/src/v2/styles/workspace.css      | 181 ++++++++++++++++++
 vehicle-data-platform/design-qa.md            |  50 +++++
 13 files changed, 345 insertions(+), 46 deletions(-)

diff --git a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx
index ff325313..316efda7 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/AlertsPage.tsx
@@ -1,5 +1,5 @@
 import { IconAlarm, IconBell, IconChevronRight, IconClose, IconFilter, IconPlus, IconRefresh, IconSearch, IconSetting } from '@douyinfe/semi-icons';
-import { Button, Card, CardGroup, Collapse, Descriptions, Empty, Input, Select, Spin, Table, Tag, TextArea, Timeline, Typography } from '@douyinfe/semi-ui';
+import { Button, Card, CardGroup, Collapse, Descriptions, Input, Select, Spin, Table, Tag, TextArea, Timeline, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, memo, useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
@@ -129,7 +129,7 @@ const AlertEventTable = memo(function AlertEventTable({ rows, selectedID, compac
 });
 
 function EventInspector({ event, note, acting, actionError, editable, onNote, onAction, onClose, sheet = false }: { event?: AlertEvent; note: string; acting: boolean; actionError?: string; editable: boolean; onNote: (value: string) => void; onAction: (action: 'acknowledge' | 'close' | 'ignore') => void; onClose: () => void; sheet?: boolean }) {
-  if (!event) return <Card className="v2-alert-inspector" bodyStyle={{ padding: 0 }}><Empty className="v2-alert-inspector-empty" image={<IconAlarm />} title="选择告警事件" description="查看触发证据、状态时间线和处置动作。" /></Card>;
+  if (!event) return <Card className="v2-alert-inspector" bodyStyle={{ padding: 0 }}><PanelEmpty className="v2-alert-inspector-empty" compact tone="warning" icon={<IconAlarm />} title="选择告警事件" description="查看触发证据、状态时间线和处置动作。" /></Card>;
   const actionCount = event.actions?.length ?? 0;
   return <Card className={`v2-alert-inspector${sheet ? ' is-sheet' : ''}`} bodyStyle={{ padding: 0 }}>
     {!sheet ? <WorkspacePanelHeader className="v2-alert-inspector-heading" title="事件处置" description={event.ruleName} actions={<><span className="v2-alert-inspector-status"><SeverityTag severity={event.severity} /></span><Button className="v2-alert-inspector-close" theme="borderless" icon={<IconClose />} aria-label="关闭告警详情" onClick={onClose} /></>} /> : null}
@@ -155,7 +155,7 @@ function EventInspector({ event, note, acting, actionError, editable, onNote, on
         {editable ? <><TextArea maxCount={200} autosize={{ minRows: 2, maxRows: 5 }} placeholder="请输入处置说明（选填）" value={note} onChange={onNote} />{actionError ? <p className="v2-alert-action-error">{actionError}</p> : null}<div className="v2-alert-actions"><Button theme="solid" className="is-primary" disabled={acting || !canAct(event.status, 'acknowledge')} onClick={() => onAction('acknowledge')}>确认告警</Button><Button theme="light" disabled={acting || !canAct(event.status, 'close')} onClick={() => onAction('close')}>关闭</Button><Button theme="borderless" disabled={acting || !canAct(event.status, 'ignore')} onClick={() => onAction('ignore')}>忽略</Button></div></> : <p className="v2-role-notice">当前为只读角色，可查看完整证据与处置记录。</p>}
       </Card>
       <Card className="v2-alert-detail-card v2-alert-progress-card" title={<span className="v2-alert-detail-title"><strong>处理进度</strong><Tag color={actionCount ? 'blue' : 'amber'} type="light" size="small">{actionCount ? `${actionCount} 条记录` : '待处置'}</Tag></span>} headerLine>
-        {event.actions?.length ? <Timeline className="v2-alert-timeline" aria-label="告警处理进度">{event.actions.map((item, index) => <Timeline.Item key={item.id} type={index === event.actions!.length - 1 ? 'ongoing' : 'default'} time={<span>{item.actor} · <AlertTime value={item.createdAt} /></span>}><strong>{actionLabels[item.action] ?? item.action}</strong>{item.note ? <p>{item.note}</p> : null}</Timeline.Item>)}</Timeline> : <Empty className="v2-alert-timeline-empty" title="暂无处理记录" description="事件被确认、关闭或忽略后，将在这里形成审计履历。" />}
+        {event.actions?.length ? <Timeline className="v2-alert-timeline" aria-label="告警处理进度">{event.actions.map((item, index) => <Timeline.Item key={item.id} type={index === event.actions!.length - 1 ? 'ongoing' : 'default'} time={<span>{item.actor} · <AlertTime value={item.createdAt} /></span>}><strong>{actionLabels[item.action] ?? item.action}</strong>{item.note ? <p>{item.note}</p> : null}</Timeline.Item>)}</Timeline> : <PanelEmpty className="v2-alert-timeline-empty" compact title="暂无处理记录" description="事件被确认、关闭或忽略后，将在这里形成审计履历。" />}
       </Card>
       <Collapse className="v2-alert-technical-collapse" keepDOM>
         <Collapse.Panel
@@ -556,7 +556,7 @@ function RulesWorkspace({ rules, metrics }: { rules: AlertRule[]; metrics: Metri
           </span>
           <Tag className="v2-alert-rule-state" size="small" color={rule.enabled ? 'green' : 'grey'} type="light">{rule.enabled ? '已启用' : '已停用'}</Tag>
         </Button>)}
-        {!rules.length ? <Empty className="v2-alert-rule-empty" title="暂无告警规则" description="新建规则后可从常用模板开始，也可直接配置自定义条件。" /> : null}
+        {!rules.length ? <PanelEmpty className="v2-alert-rule-empty" tone="warning" icon={<IconAlarm />} title="暂无告警规则" description="新建规则后可从常用模板开始，也可直接配置自定义条件。" /> : null}
       </div>
     </Card>
     {!mobileLayout ? editor : null}
@@ -602,7 +602,7 @@ function NotificationsWorkspace({ editable }: { editable: boolean }) {
     <div className="v2-alert-notification-list">{notifications.isPending ? <div className="v2-alert-notification-loading"><Spin size="middle" tip="正在读取站内通知" /></div> : items.length ? <CardGroup className="v2-alert-notification-cards" type="grid" spacing={0}>{items.map((item) => <Card className={`v2-alert-notification-card${item.read ? ' is-read' : ' is-unread'}`} key={item.id} title={<span className="v2-alert-notification-title"><SeverityTag severity={item.severity} /><span title={item.title}>{item.title}</span></span>} headerExtraContent={<Tag color={item.read ? 'grey' : 'orange'} type="light" size="small">{item.read ? '已读' : '未读'}</Tag>} headerLine bodyStyle={{ padding: 0 }}>
       <p className="v2-alert-notification-content" title={item.content}>{item.content}</p>
       <footer><Typography.Text type="tertiary"><AlertTime value={item.createdAt} /></Typography.Text>{editable && !item.read ? <Button theme="borderless" disabled={read.isPending} onClick={() => read.mutate([item.id])}>{read.isPending ? '更新中' : '标为已读'}</Button> : null}</footer>
-    </Card>)}</CardGroup> : !notifications.isError ? <Empty className="v2-alert-notification-empty" image={<IconBell />} title="暂无站内通知" description="告警触发或状态变更后，通知会在这里形成可追溯记录。" /> : null}</div>
+    </Card>)}</CardGroup> : !notifications.isError ? <PanelEmpty className="v2-alert-notification-empty" compact tone="primary" icon={<IconBell />} title="暂无站内通知" description="告警触发或状态变更后，通知会在这里形成可追溯记录。" /> : null}</div>
     <footer className="v2-alert-notification-pagination"><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 条 · 本页 ${items.length.toLocaleString('zh-CN')} 条`} disabled={notifications.isFetching} onPageChange={(next) => setOffset((next - 1) * limit)} pageSize={limit} pageSizeLabel="每页通知数" onPageSizeChange={(next) => { setLimit(next); setOffset(0); }} pageSizeOptions={[{ value: 20, label: '20 条/页' }, { value: 50, label: '50 条/页' }]} /></footer>
     <Collapse className="v2-alert-channel-collapse" keepDOM>
       <Collapse.Panel itemKey="external-channels" header={<span className="v2-alert-channel-heading"><span><strong>外部通知通道</strong><small>短信、邮件与企业微信均为预留能力</small></span><Tag color="grey" type="light" size="small">3 个 · 未启用</Tag></span>}>
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx
index 71c4cbbf..89897bd4 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/MonitorPage.tsx
@@ -2,14 +2,14 @@ import {
   IconChevronLeft, IconFilter, IconList, IconMapPin,
   IconQrCode, IconRefresh, IconSearch
 } from '@douyinfe/semi-icons';
-import { Button, Card, Empty, Input, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
+import { Button, Card, Input, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
 import { useQuery } from '@tanstack/react-query';
 import { lazy, memo, Suspense, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { Page, VehicleRealtimeRow } from '../../api/types';
 import { FleetMap } from '../map/FleetMap';
-import { EmptyState, InlineError } from '../shared/AsyncState';
+import { EmptyState, InlineError, PanelEmpty } from '../shared/AsyncState';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
 import { TablePagination } from '../shared/TablePagination';
 import { ProtocolTag } from '../shared/ProtocolTag';
@@ -196,8 +196,8 @@ function MonitorVehicleTable({ rows, total, page, totalPages, limit, loading, mo
       description={mobile ? '实时数据 · 地址按需解析' : '覆盖全部授权车辆；缺失值显示“—”，地址按需解析'}
       meta={`${total.toLocaleString('zh-CN')} 辆${mobile ? '' : '车辆'}`}
     />
-    {!mobile ? <div className="v2-monitor-table-scroll"><Table className="v2-monitor-table" columns={columns} dataSource={rows} rowKey="vin" pagination={false} empty={null} />{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <Empty className="v2-monitor-table-empty" title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
-    {mobile ? <div className="v2-monitor-mobile-cards">{rows.map((row) => <MonitorMobileVehicleCard row={row} onSelect={onSelect} key={row.vin} />)}{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <Empty className="v2-monitor-table-empty" title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
+    {!mobile ? <div className="v2-monitor-table-scroll"><Table className="v2-monitor-table" columns={columns} dataSource={rows} rowKey="vin" pagination={false} empty={null} />{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <PanelEmpty className="v2-monitor-table-empty" tone="primary" icon={<IconSearch />} title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
+    {mobile ? <div className="v2-monitor-mobile-cards">{rows.map((row) => <MonitorMobileVehicleCard row={row} onSelect={onSelect} key={row.vin} />)}{loading ? <div className="v2-monitor-table-loading" role="status"><Spin size="small" tip="正在更新车辆实时数据…" /></div> : null}{!loading && !rows.length ? <PanelEmpty className="v2-monitor-table-empty" tone="primary" icon={<IconSearch />} title="暂无符合条件的车辆" description="调整搜索、协议或在线状态筛选后重试。" /> : null}</div> : null}
     <footer><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 辆车辆`} onPageChange={onPage} pageSize={limit} pageSizeLabel="每页车辆数" onPageSizeChange={onLimit} pageSizeOptions={[{ value: 20, label: '20 辆/页' }, { value: 50, label: '50 辆/页' }, { value: 100, label: '100 辆/页' }]} /></footer>
   </Card>;
 }
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
index 6cfd65ec..37d36381 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/OperationsPage.tsx
@@ -1,11 +1,11 @@
-import { IconPulse, IconRefresh, IconSearch, IconTickCircle } from '@douyinfe/semi-icons';
-import { Button, Card, CardGroup, Checkbox, Descriptions, Empty, Input, Progress, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
+import { IconAlertTriangle, IconPulse, IconRefresh, IconSearch, IconTickCircle } from '@douyinfe/semi-icons';
+import { Button, Card, CardGroup, Checkbox, Descriptions, Input, Progress, Spin, Table, Tag, Typography } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { FormEvent, useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
 import type { LinkHealth, SourceReadinessRow, VehicleCoverageRow, VehicleLocationSourceEvidence, VehicleSourceDiagnostic } from '../../api/types';
-import { InlineError } from '../shared/AsyncState';
+import { InlineError, PanelEmpty } from '../shared/AsyncState';
 import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
 import { PlatformTime } from '../shared/PlatformTime';
@@ -408,7 +408,7 @@ function SourceDiagnosticWorkspace() {
         actions={selected ? <Button theme="light" icon={<IconRefresh />} onClick={() => diagnostic.refetch()} disabled={diagnostic.isFetching}>刷新该车</Button> : null}
       />
       {diagnostic.isError ? <InlineError message={diagnostic.error.message} onRetry={() => diagnostic.refetch()} /> : null}
-      {!selected ? <Empty className="v2-source-empty" title="先选择一辆车" description="将展示所有协议和同协议多终端、推荐原因、上报周期与可审计策略。" /> : null}
+      {!selected ? <PanelEmpty className="v2-source-empty" tone="primary" icon={<IconSearch />} title="先选择一辆车" description="将展示所有协议和同协议多终端、推荐原因、上报周期与可审计策略。" /> : null}
       {selected && diagnostic.isPending ? <div className="v2-source-loading" role="status"><Spin size="large" /><strong>正在读取来源证据</strong><span>只查询当前车辆，不会扫描整车队。</span></div> : null}
       {data ? <>
       <section className="v2-source-summary-region" role="group" aria-label="车辆来源诊断概览">
@@ -594,18 +594,24 @@ export default function OperationsPage() {
           <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>
           <div className="v2-ops-source-evidence"><strong>当前证据</strong><p>{source.evidence}</p></div><div className="v2-ops-source-action"><strong>建议动作</strong><p>{source.action}</p></div><footer><Tag color="green" type="light" size="small">验收标准</Tag><span>{source.acceptance}</span></footer>
         </Card>;
-        })}</CardGroup> : <Empty className="v2-ops-source-empty" title="暂无协议来源" description="当前响应没有可展示的协议来源就绪度。" /> : readinessUnavailable ? <Empty className="v2-ops-source-empty is-error" title="协议来源证据不可用" description="运行证据仍可查看；请使用上方重试恢复协议覆盖判断。" /> : <div className="v2-ops-source-loading" role="status"><Spin size="middle" tip="正在读取协议来源就绪度" /></div>}</Card>
+        })}</CardGroup> : <PanelEmpty className="v2-ops-source-empty" icon={<IconPulse />} title="暂无协议来源" description="当前响应没有可展示的协议来源就绪度。" /> : readinessUnavailable ? <PanelEmpty
+          className="v2-ops-source-empty is-error"
+          tone="danger"
+          icon={<IconAlertTriangle />}
+          title="协议来源证据不可用"
+          description="运行证据仍可查看；恢复来源证据后再判断协议覆盖。"
+        /> : <div className="v2-ops-source-loading" role="status"><Spin size="middle" tip="正在读取协议来源就绪度" /></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) => {
           const label = opsLinkLabel(item.name);
           return <article className={`v2-ops-link-card is-${item.status}`} key={item.name} role="listitem"><span className="v2-ops-link-status"><i /><span><strong>{label}</strong>{label !== item.name ? <small>{item.name}</small> : null}</span></span><p>{item.detail || '无补充信息'}</p><HealthTag status={item.status} /></article>;
-        }) : <Empty className="v2-ops-link-empty" title={data ? '暂无链路探针' : '正在读取链路状态'} description={data ? '当前响应没有可展示的数据链路证据。' : '全局健康数据返回后将在这里更新。'} />}</div></Card>
+        }) : <PanelEmpty className="v2-ops-link-empty" compact icon={<IconPulse />} 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> },
             { key: 'TDengine 写探针', value: <HealthTag status={data?.tdengineWritable ? 'ok' : 'error'}>{data?.tdengineWritable ? '正常' : '异常'}</HealthTag> },
             { key: '请求超时', value: `${data?.runtime.requestTimeoutMs ?? '—'} ms` },
             { key: '高德安全代理', value: <HealthTag status={data?.runtime.amapSecurityProxyEnabled && !data?.runtime.amapSecurityCodeExposed ? 'ok' : 'warning'}>{data?.runtime.amapSecurityProxyEnabled ? '服务端代理' : '未启用'}</HealthTag> }
-          ]} />{capacityFindings.length ? <div className="v2-ops-capacity-findings">{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>
+          ]} />{capacityFindings.length ? <div className="v2-ops-capacity-findings">{capacityFindings.map((item) => <Card className="v2-ops-capacity-finding" key={item}><HealthTag status="warning">待处理</HealthTag><p>{item}</p></Card>)}</div> : <PanelEmpty className="v2-ops-capacity-empty" compact tone="success" icon={<IconTickCircle />} title="容量检查通过" description="当前没有需要处理的容量风险。" />}</Card></div>
       </> : null}
     </section>
   </div>;
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/ReconciliationCenter.tsx b/vehicle-data-platform/apps/web/src/v2/pages/ReconciliationCenter.tsx
index f52f035d..ee5ddbb4 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/ReconciliationCenter.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/ReconciliationCenter.tsx
@@ -1,10 +1,10 @@
 import { IconAlertTriangle, IconChevronDown, IconChevronRight, IconChevronUp, IconClose, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
-import { Button, Card, Empty, Input, RadioGroup, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
+import { Button, Card, Input, RadioGroup, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useDeferredValue, useEffect, useMemo, useState } from 'react';
 import { api } from '../../api/client';
 import type { ReconciliationIssue, ReconciliationSummary } from '../../api/types';
-import { InlineError } from '../shared/AsyncState';
+import { InlineError, PanelEmpty } from '../shared/AsyncState';
 import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { PlatformTime } from '../shared/PlatformTime';
 import { TablePagination } from '../shared/TablePagination';
@@ -268,6 +268,13 @@ export default function ReconciliationCenter() {
   const [selectedID, setSelectedID] = useState('');
   const [filtersCollapsed, setFiltersCollapsed] = useState(true);
   const [trendExpanded, setTrendExpanded] = useState(false);
+  const resetFilters = () => {
+    setKeyword('');
+    setStatus('active');
+    setSeverity('all');
+    setRuleCode('all');
+    setOffset(0);
+  };
   const closeDetail = () => setSelectedID('');
   const openDetail = (id: string) => {
     setTrendExpanded(false);
@@ -439,7 +446,14 @@ export default function ReconciliationCenter() {
             </Button>
           </Card>)}</div>}
           {issues.isPending ? <div className="v2-reconcile-loading" role="status"><Spin size="middle" tip="正在读取差异队列…" /></div> : null}
-          {!issues.isPending && !issueRows.length ? <Empty className="v2-reconcile-empty" title="当前筛选条件没有差异" description="调整状态、等级、规则或搜索条件后重试。" /> : null}
+          {!issues.isPending && !issueRows.length ? <PanelEmpty
+            className="v2-reconcile-empty"
+            tone="success"
+            icon={<IconSearch />}
+            title="当前筛选条件没有差异"
+            description="当前范围没有待复核证据，可重置筛选返回活跃差异。"
+            action={<Button theme="light" type="primary" icon={<IconRefresh />} onClick={resetFilters}>重置筛选</Button>}
+          /> : null}
         </div>
         <footer className="v2-reconcile-pagination"><TablePagination page={currentPage} totalPages={totalPages} info={`共 ${(page?.total ?? 0).toLocaleString('zh-CN')} 条 · 本页 ${activeCount} 条活跃`} onPageChange={(next) => setOffset((next - 1) * pageSize)} /></footer>
       </div>
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
index 13a76373..7020d2bc 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/TrackPage.tsx
@@ -3,7 +3,7 @@ import {
   IconChevronLeft, IconChevronRight, IconClose, IconDownload, IconEyeClosed,
   IconEyeOpened, IconList, IconMapPin, IconPause, IconPlay, IconRefresh, IconRoute, IconSearch
 } from '@douyinfe/semi-icons';
-import { Button, Card, Descriptions, Empty, Input, List, Select, Slider, Tag } from '@douyinfe/semi-ui';
+import { Button, Card, Descriptions, Input, List, Select, Slider, Tag } from '@douyinfe/semi-ui';
 import { FormEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { api } from '../../api/client';
@@ -11,7 +11,7 @@ import type { TrackPlaybackEvent, TrackPlaybackResponse, VehicleRow } from '../.
 import { protocolDisplayLabel } from '../domain/protocols';
 import { buildTrackRailSelection, compactTrackWindowLabel, downloadTrackCsv, formatDuration, sampledEventIndex, TRACK_ADDRESS_SETTLE_MS, trackAddressCoordinate, trackPlaybackInterval, trackPointMileageAvailable, type TrackAddressCoordinate } from '../domain/track';
 import { TrackMap } from '../map/TrackMap';
-import { InlineError, WorkspaceEmptyGuide } from '../shared/AsyncState';
+import { InlineError, PanelEmpty, WorkspaceEmptyGuide } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
 import { ProtocolTag } from '../shared/ProtocolTag';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
@@ -310,9 +310,9 @@ const TrackRail = memo(function TrackRail({ draft, track, summaryItems, loading,
         />
         <SegmentedTabs className="v2-track-rail-tabs" ariaLabel="轨迹明细分类" value={tab} onChange={onTab} items={[{ key: 'stops', label: '停留点', count: track?.stops.length ?? 0 }, { key: 'events', label: '事件点', count: track?.events.length ?? 0 }, { key: 'overview', label: '概览' }]} />
         <div className="v2-track-rail-scroll">
-          {!track ? <Empty className="v2-track-rail-empty" image={<IconMapPin />} title="选择车辆后查询轨迹" description="停留点、轨迹事件与行程证据会在这里统一呈现。" /> : null}
-          {track && tab === 'stops' ? <List className="v2-track-evidence-list v2-track-stop-list">{track.stops.map((stop, index) => <List.Item className="v2-track-evidence-item" key={`${stop.startTime}-${index}`}><Button theme="borderless" type="tertiary" className={`v2-track-list-action${activeStopIndexes.includes(index) ? ' is-active' : ''}`} onClick={() => onSelectIndex(stop.sampledIndex)}><i>{index + 1}</i><span><strong>{dateTime(stop.startTime)}</strong><small>停留 {formatDuration(stop.durationSeconds)} · {stop.pointCount} 个点</small></span><em>{time(stop.endTime)}</em></Button></List.Item>)}{!track.stops.length ? <Empty className="v2-track-list-empty" image={<IconMapPin />} title="当前没有停留点" description="时间窗内没有超过 3 分钟的连续停留。" /> : null}</List> : null}
-          {track && tab === 'events' ? <List className="v2-track-evidence-list v2-track-event-list">{track.events.map((event, index) => { const sampled = sampledEventIndex(event, track.points.length, track.summary.pointCount); return <List.Item className="v2-track-evidence-item" key={`${event.type}-${event.time}-${index}`}><Button theme="borderless" type="tertiary" className={`v2-track-list-action${activeEventIndexes.includes(index) ? ' is-active' : ''}`} onClick={() => onSelectIndex(sampled)}><i className={`is-${eventTone(event.type)}`}>{index + 1}</i><span><strong>{event.title}</strong><small>{dateTime(event.time)}</small></span><em>{number(event.speedKmh, 0)} km/h</em></Button></List.Item>; })}{!track.events.length ? <Empty className="v2-track-list-empty" image={<IconMapPin />} title="当前没有事件点" description="时间窗内没有识别到启停、急加速或异常间隔。" /> : null}</List> : null}
+          {!track ? <PanelEmpty className="v2-track-rail-empty" compact tone="primary" icon={<IconMapPin />} title="选择车辆后查询轨迹" description="停留点、轨迹事件与行程证据会在这里统一呈现。" /> : null}
+          {track && tab === 'stops' ? <List className="v2-track-evidence-list v2-track-stop-list">{track.stops.map((stop, index) => <List.Item className="v2-track-evidence-item" key={`${stop.startTime}-${index}`}><Button theme="borderless" type="tertiary" className={`v2-track-list-action${activeStopIndexes.includes(index) ? ' is-active' : ''}`} onClick={() => onSelectIndex(stop.sampledIndex)}><i>{index + 1}</i><span><strong>{dateTime(stop.startTime)}</strong><small>停留 {formatDuration(stop.durationSeconds)} · {stop.pointCount} 个点</small></span><em>{time(stop.endTime)}</em></Button></List.Item>)}{!track.stops.length ? <PanelEmpty className="v2-track-list-empty" compact icon={<IconMapPin />} title="当前没有停留点" description="时间窗内没有超过 3 分钟的连续停留。" /> : null}</List> : null}
+          {track && tab === 'events' ? <List className="v2-track-evidence-list v2-track-event-list">{track.events.map((event, index) => { const sampled = sampledEventIndex(event, track.points.length, track.summary.pointCount); return <List.Item className="v2-track-evidence-item" key={`${event.type}-${event.time}-${index}`}><Button theme="borderless" type="tertiary" className={`v2-track-list-action${activeEventIndexes.includes(index) ? ' is-active' : ''}`} onClick={() => onSelectIndex(sampled)}><i className={`is-${eventTone(event.type)}`}>{index + 1}</i><span><strong>{event.title}</strong><small>{dateTime(event.time)}</small></span><em>{number(event.speedKmh, 0)} km/h</em></Button></List.Item>; })}{!track.events.length ? <PanelEmpty className="v2-track-list-empty" compact icon={<IconMapPin />} title="当前没有事件点" description="时间窗内没有识别到启停、急加速或异常间隔。" /> : null}</List> : null}
           {track && tab === 'overview' ? <OverviewPanel track={track} /> : null}
         </div>
       </section>
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.tsx
index ac9b8442..d2fb4c4e 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/VehiclePage.tsx
@@ -16,7 +16,7 @@ import { formatZhNumber, vehicleOperationStatusLabels } from '../domain/formatte
 import { protocolDisplayLabel, protocolSourceLabel } from '../domain/protocols';
 import { isValidAMapCoordinate } from '../../integrations/amap';
 import { FleetMap } from '../map/FleetMap';
-import { InlineError, PageLoading } from '../shared/AsyncState';
+import { InlineError, PageLoading, PanelEmpty } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
 import { PlatformTime } from '../shared/PlatformTime';
 import { ProtocolTag } from '../shared/ProtocolTag';
@@ -134,7 +134,7 @@ function Events({ detail }: { detail: VehicleDetail }) {
       className="v2-event-list"
       dataSource={events}
       split={false}
-      emptyContent={<Empty className="v2-event-empty" title="暂无可用事件证据" description="车辆产生质量提醒或来源状态变化后会显示在这里。" />}
+      emptyContent={<PanelEmpty className="v2-event-empty" compact tone="warning" icon={<IconAlarm />} title="暂无可用事件证据" description="车辆产生质量提醒或来源状态变化后会显示在这里。" />}
       renderItem={(event, index) => <List.Item className={`v2-event-row is-${event.tone}`} key={`${event.title}-${event.time}-${index}`}>
         <span className="v2-event-icon">{event.tone === 'success' ? <IconTickCircle /> : <IconAlarm />}</span>
         <div><strong>{event.title}</strong><p>{event.detail}</p></div><time title={fmt(event.time)}>{eventTimeLabel(event.time)}</time>
@@ -284,7 +284,7 @@ function TelemetryPanel({ data, pending, error }: { data?: LatestTelemetryRespon
     : error
       ? <div className="v2-telemetry-state is-error" role="alert"><strong>最新遥测不可用</strong><span>{error}</span></div>
       : visibleMetrics.length === 0
-        ? <Empty className="v2-telemetry-empty" title="暂无可展示字段" description={`该协议最近 ${data?.scannedFrames ?? 0} 帧没有可展示的标量遥测。`} />
+        ? <PanelEmpty className="v2-telemetry-empty" compact icon={<IconBox />} title="暂无可展示字段" description={`该协议最近 ${data?.scannedFrames ?? 0} 帧没有可展示的标量遥测。`} />
         : mobileLayout
           ? <List className="v2-telemetry-mobile-list" dataSource={visibleMetrics} split={false} renderItem={(item) => <List.Item className="v2-telemetry-mobile-item" key={telemetryRowKey(item)}>
             <header><TelemetryFieldCell item={item} /><TelemetryValueCell item={item} /></header>
diff --git a/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx b/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx
index f9b15f32..73d801ef 100644
--- a/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/pages/VehicleSearchWorkspace.tsx
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { IconArrowRight, IconBox, IconChevronRight, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
-import { Button, Card, Empty, Input, Table, Tag } from '@douyinfe/semi-ui';
+import { Button, Card, Input, Table, Tag } from '@douyinfe/semi-ui';
 import { type FormEvent, lazy, Suspense, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { api } from '../../api/client';
@@ -10,6 +10,7 @@ import { canAdminister } from '../auth/session';
 import { formatZhNumber } from '../domain/formatters';
 import { useMobileLayout } from '../hooks/useMobileLayout';
 import { QUERY_MEMORY, queryScopeKey, retainPreviousPageWithinScope } from '../queryPolicy';
+import { PanelEmpty } from '../shared/AsyncState';
 import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { MobileFilterSheet, MobileFilterSheetSection } from '../shared/MobileFilterSheet';
 import { ProtocolTag } from '../shared/ProtocolTag';
@@ -405,7 +406,16 @@ export default function VehicleSearchWorkspace() {
               loading={candidates.isFetching}
               empty={null}
             />
-            : <Empty className="v2-vehicle-recent-empty" title={deferredKeyword ? '没有匹配车辆' : '暂无授权车辆'} description={deferredKeyword ? '调整车牌、VIN 或手机号后重试。' : '管理员分配车辆权限后会显示在这里。'} />}
+            : <PanelEmpty
+                className="v2-vehicle-recent-empty"
+                tone="primary"
+                icon={<IconSearch />}
+                title={deferredKeyword ? '没有匹配车辆' : '暂无授权车辆'}
+                description={deferredKeyword ? '当前范围没有结果，可清除搜索返回完整车辆目录。' : '管理员分配车辆权限后会显示在这里。'}
+                action={deferredKeyword
+                  ? <Button theme="light" type="primary" icon={<IconRefresh />} onClick={() => { setKeyword(''); setDraftKeyword(''); setPage(1); setCandidatesOpen(false); }}>清除搜索</Button>
+                  : <Button theme="light" type="primary" icon={<IconRefresh />} loading={candidates.isFetching} onClick={() => candidates.refetch()}>刷新车辆目录</Button>}
+              />}
       {total > 0 ? <footer className="v2-vehicle-directory-pagination"><TablePagination page={page} totalPages={totalPages} info={`共 ${total.toLocaleString('zh-CN')} 辆 · 本页 ${pageVehicles.length.toLocaleString('zh-CN')} 辆`} disabled={candidates.isFetching} onPageChange={(next) => { setPage(next); setCandidatesOpen(false); }} /></footer> : null}
     </Card>
     {syncOpen ? <Suspense fallback={<Card className="v2-profile-sync-panel v2-profile-sync-loading" bodyStyle={{ padding: 0 }}><span role="status"><span className="v2-spinner" />正在加载主档同步工具…</span></Card>}><VehicleProfileSyncPanel onClose={() => setSyncOpen(false)} /></Suspense> : null}
diff --git a/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts b/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
index 0aa635eb..7d6b53dc 100644
--- a/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
+++ b/vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts
@@ -153,17 +153,17 @@ describe('V2 production entry', () => {
     expect(corePageSources.MonitorPage).not.toContain('<aside className="v2-detail-peek"');
     expect(corePageSources.MonitorPage).not.toContain('<section className="v2-event-strip"');
     expect(corePageSources.MonitorPage).toContain('<Table className="v2-monitor-table"');
-    expect(corePageSources.MonitorPage).toContain('<Empty className="v2-monitor-table-empty"');
+    expect(corePageSources.MonitorPage).toContain('<PanelEmpty className="v2-monitor-table-empty"');
     expect(corePageSources.MonitorPage).toContain('<Spin size="small" tip="正在更新车辆实时数据…"');
     expect(corePageSources.MonitorPage).not.toContain('<table><thead><tr><th>车辆</th>');
-    expect(sourceEvidenceSource).toContain("import { Button, Card, Empty, Input, Spin, Tag } from '@douyinfe/semi-ui'");
+    expect(sourceEvidenceSource).toContain("import { Button, Card, Input, Spin, Tag } from '@douyinfe/semi-ui'");
     expect(sourceEvidenceSource).toContain('<Card className={`v2-source-evidence');
     expect(sourceEvidenceSource).toContain('<Card className={`v2-source-evidence-card');
     expect(sourceEvidenceSource).toContain('<WorkspaceDetailSideSheet');
     expect(sourceEvidenceSource).toContain('className="v2-source-evidence-sidesheet"');
     expect(sourceEvidenceSource).toContain('<Tag className="is-recommended"');
     expect(sourceEvidenceSource).toContain('<Spin size="small"');
-    expect(sourceEvidenceSource).toContain('<Empty className="v2-source-evidence-empty"');
+    expect(sourceEvidenceSource).toContain('<PanelEmpty className="v2-source-evidence-empty"');
     expect(sourceEvidenceSource).not.toContain('<article className={`v2-source-evidence-card');
     expect(sourceEvidenceSource).not.toContain('<section className={`v2-source-evidence');
     expect(workspaceDetailSideSheetSource).toContain('variant="detail"');
@@ -243,7 +243,7 @@ describe('V2 production entry', () => {
     expect(corePageSources.AlertsPage).not.toContain('<button');
     expect(corePageSources.AlertsPage).toContain('<Descriptions className="v2-alert-descriptions"');
     expect(corePageSources.AlertsPage).toContain('<Timeline className="v2-alert-timeline"');
-    expect(corePageSources.AlertsPage).toContain('<Empty className="v2-alert-inspector-empty"');
+    expect(corePageSources.AlertsPage).toContain('<PanelEmpty className="v2-alert-inspector-empty"');
     expect(corePageSources.AlertsPage).toContain('<Card className="v2-alert-detail-card v2-alert-focus-card"');
     expect(corePageSources.AlertsPage).toContain('<Collapse className="v2-alert-technical-collapse"');
     expect(corePageSources.AlertsPage).not.toContain('<section><h3>事件信息</h3>');
@@ -254,7 +254,7 @@ describe('V2 production entry', () => {
     expect(corePageSources.AlertsPage).toContain('<CardGroup className="v2-alert-notification-cards"');
     expect(corePageSources.AlertsPage).toContain('<Card className={`v2-alert-notification-card');
     expect(corePageSources.AlertsPage).toContain('<Descriptions className="v2-alert-channel-descriptions"');
-    expect(corePageSources.AlertsPage).toContain('<Empty className="v2-alert-notification-empty"');
+    expect(corePageSources.AlertsPage).toContain('<PanelEmpty className="v2-alert-notification-empty"');
     expect(corePageSources.AlertsPage).toContain('<PanelEmpty className="v2-alert-empty"');
     expect(corePageSources.AlertsPage).toContain('<PanelLoading className="v2-alert-loading"');
     expect(corePageSources.AlertsPage).not.toContain('<article className={item.read');
@@ -372,13 +372,13 @@ describe('V2 production entry', () => {
     expect(corePageSources.OperationsPage).toContain('<article className={`v2-ops-link-card');
     expect(corePageSources.OperationsPage).not.toContain('<Card className={`v2-ops-link-card');
     expect(corePageSources.OperationsPage).toContain('<Descriptions className="v2-ops-runtime-descriptions"');
-    expect(corePageSources.OperationsPage).toContain('<Empty className="v2-ops-capacity-empty"');
+    expect(corePageSources.OperationsPage).toContain('<PanelEmpty className="v2-ops-capacity-empty"');
     expect(corePageSources.OperationsPage).toContain('<CardGroup className="v2-ops-source-list"');
     expect(corePageSources.OperationsPage).toContain('<Card className={`v2-ops-source-card');
     expect(corePageSources.OperationsPage).not.toContain('<article key={item.name}');
     expect(corePageSources.OperationsPage).not.toContain('<article key={source.protocol}');
     expect(corePageSources.OperationsPage).not.toContain('<dl><div><dt>生产数据模式</dt>');
-    expect(corePageSources.OperationsPage).toContain('<Empty className="v2-source-empty"');
+    expect(corePageSources.OperationsPage).toContain('<PanelEmpty className="v2-source-empty"');
     expect(corePageSources.OperationsPage).toContain('<Spin size="large"');
     expect(corePageSources.OperationsPage).toContain('className="v2-source-summary-rail"');
     expect(corePageSources.OperationsPage).toContain('ariaLabel="车辆来源诊断概览"');
@@ -401,7 +401,8 @@ describe('V2 production entry', () => {
     expect(reconciliationSource).toContain('<Table className="v2-reconcile-table"');
     expect(reconciliationSource).toContain('detailTriggerRow({');
     expect(reconciliationSource).toContain('<Card key={item.id} className={`v2-reconcile-mobile-card');
-    expect(reconciliationSource).toContain('<Empty className="v2-reconcile-empty"');
+    expect(reconciliationSource).toContain('<PanelEmpty');
+    expect(reconciliationSource).toContain('className="v2-reconcile-empty"');
     expect(reconciliationSource).toContain('<Spin size="middle" tip="正在读取差异队列…"');
     expect(reconciliationSource).not.toContain('<table className="v2-reconcile-table"');
     expect(detailTriggerRowSource).toContain("'aria-expanded': expanded");
@@ -425,7 +426,7 @@ describe('V2 production entry', () => {
     expect(corePageSources.TrackPage).toContain('<Card className="v2-track-playback-dock"');
     expect(corePageSources.TrackPage).toContain('<section className="v2-track-overview-section">');
     expect(corePageSources.TrackPage).toContain('<Descriptions className="v2-track-overview-descriptions"');
-    expect(corePageSources.TrackPage).toContain('<Empty className="v2-track-rail-empty"');
+    expect(corePageSources.TrackPage).toContain('<PanelEmpty className="v2-track-rail-empty"');
     expect(corePageSources.TrackPage).toContain('<List className="v2-track-evidence-list v2-track-stop-list"');
     expect(corePageSources.TrackPage).toContain('<List className="v2-track-evidence-list v2-track-event-list"');
     expect(corePageSources.TrackPage).toContain('<List.Item className="v2-track-evidence-item"');
diff --git a/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.test.tsx b/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.test.tsx
index 85ee55c2..f658ec5c 100644
--- a/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.test.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.test.tsx
@@ -1,3 +1,4 @@
+import { IconSearch } from '@douyinfe/semi-icons';
 import { cleanup, fireEvent, render, screen } from '@testing-library/react';
 import { afterEach, expect, test, vi } from 'vitest';
 import { EmptyState, InlineError, PageLoading, PanelEmpty, PanelLoading, WorkspaceEmptyGuide } from './AsyncState';
@@ -20,11 +21,19 @@ test('uses one semantic loading language for page and panel scopes', () => {
 test('keeps empty states consistent while allowing a clear next action', () => {
   const action = vi.fn();
   const view = render(<>
-    <PanelEmpty title="还没有客户账号" description="创建后可分配菜单和车辆。" action={<button onClick={action}>创建账号</button>} />
+    <PanelEmpty
+      title="还没有客户账号"
+      description="创建后可分配菜单和车辆。"
+      tone="primary"
+      compact
+      icon={<IconSearch />}
+      action={<button onClick={action}>创建账号</button>}
+    />
     <EmptyState title="暂无符合条件的车辆" />
   </>);
 
   expect(view.container.querySelectorAll('.v2-state-empty.semi-empty')).toHaveLength(2);
+  expect(view.container.querySelector('.v2-state-surface.tone-primary.is-compact .v2-state-empty-icon')).toBeInTheDocument();
   fireEvent.click(screen.getByRole('button', { name: '创建账号' }));
   expect(action).toHaveBeenCalledTimes(1);
 });
diff --git a/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.tsx b/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.tsx
index 4bc7f3fe..100b83e0 100644
--- a/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/shared/AsyncState.tsx
@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 
 type StateScope = 'page' | 'panel' | 'inline';
 type StateKind = 'loading' | 'empty' | 'error';
+export type WorkspaceStateTone = 'neutral' | 'primary' | 'success' | 'warning' | 'danger';
 
 const PAGE_LOADING_SKELETON = <div className="v2-state-skeleton v2-page-skeleton" aria-hidden="true"><i /><i /><i /><i /></div>;
 const PANEL_LOADING_SKELETON = <div className="v2-state-skeleton" aria-hidden="true"><i /><i /><i /></div>;
@@ -19,7 +20,9 @@ function StateSurface({
   description,
   className = '',
   action,
-  compact = false
+  compact = false,
+  tone = 'neutral',
+  icon
 }: {
   kind: StateKind;
   scope: StateScope;
@@ -28,12 +31,19 @@ function StateSurface({
   className?: string;
   action?: ReactNode;
   compact?: boolean;
+  tone?: WorkspaceStateTone;
+  icon?: ReactNode;
 }) {
-  const classes = ['v2-state-surface', `is-${kind}`, `is-${scope}`, compact ? 'is-compact' : '', className].filter(Boolean).join(' ');
+  const classes = ['v2-state-surface', `is-${kind}`, `is-${scope}`, `tone-${tone}`, compact ? 'is-compact' : '', className].filter(Boolean).join(' ');
 
   return <section className={classes} role={stateRole(kind)} aria-live={kind === 'error' ? 'assertive' : 'polite'}>
     {kind === 'empty'
-      ? <Empty className={`v2-state-empty${className ? ` ${className}` : ''}`} title={title} description={description}>{action}</Empty>
+      ? <Empty
+          className={`v2-state-empty${className ? ` ${className}` : ''}`}
+          image={icon ? <span className="v2-state-empty-icon">{icon}</span> : undefined}
+          title={title}
+          description={description}
+        >{action}</Empty>
       : <div className="v2-state-message">
         <span className="v2-state-icon">{kind === 'loading' ? <Spin size={scope === 'page' ? 'large' : 'middle'} /> : <IconAlertTriangle />}</span>
         <div className="v2-state-copy"><Typography.Text strong>{title}</Typography.Text>{description ? <Typography.Text type={kind === 'error' ? 'danger' : 'tertiary'} size="small">{description}</Typography.Text> : null}</div>
@@ -65,14 +75,30 @@ export function PanelEmpty({
   title,
   description,
   className = '',
-  action
+  action,
+  compact = false,
+  tone = 'neutral',
+  icon
 }: {
   title: string;
   description?: string;
   className?: string;
   action?: ReactNode;
+  compact?: boolean;
+  tone?: WorkspaceStateTone;
+  icon?: ReactNode;
 }) {
-  return <StateSurface className={className} kind="empty" scope="panel" title={title} description={description} action={action} />;
+  return <StateSurface
+    className={className}
+    kind="empty"
+    scope="panel"
+    title={title}
+    description={description}
+    action={action}
+    compact={compact}
+    tone={tone}
+    icon={icon}
+  />;
 }
 
 export type WorkspaceEmptyGuideStep = {
diff --git a/vehicle-data-platform/apps/web/src/v2/shared/VehicleSourceEvidencePanel.tsx b/vehicle-data-platform/apps/web/src/v2/shared/VehicleSourceEvidencePanel.tsx
index 87ebd0aa..e2fce3df 100644
--- a/vehicle-data-platform/apps/web/src/v2/shared/VehicleSourceEvidencePanel.tsx
+++ b/vehicle-data-platform/apps/web/src/v2/shared/VehicleSourceEvidencePanel.tsx
@@ -1,11 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
-import { Button, Card, Empty, Input, Spin, Tag } from '@douyinfe/semi-ui';
+import { IconSearch } from '@douyinfe/semi-icons';
+import { Button, Card, Input, Spin, Tag } from '@douyinfe/semi-ui';
 import { useMemo, useState } from 'react';
 import { api } from '../../api/client';
 import type { VehicleLocationSourceEvidence, VehicleMileageSourceEvidence } from '../../api/types';
 import { protocolDisplayLabel, protocolSourceLabel } from '../domain/protocols';
 import { useMobileLayout } from '../hooks/useMobileLayout';
 import { QUERY_MEMORY } from '../queryPolicy';
+import { PanelEmpty } from './AsyncState';
 import { WorkspaceDetailSideSheet } from './WorkspaceDetailSideSheet';
 
 function today() {
@@ -126,7 +128,7 @@ export function VehicleSourceEvidencePanel({
         </div>
         {query.data.locationSources.length ? <section className="v2-source-evidence-group"><header><strong>当前位置来源</strong><span>{query.data.locationConflict ? `后台检测到位置冲突${query.data.conflictDistanceM == null ? '' : ` · ${number(query.data.conflictDistanceM)} m`}` : '推荐来源与备用来源并列展示'}</span></header><div>{query.data.locationSources.map((source, index) => <LocationSourceCard key={`${source.protocol}-${source.sourceLabel}-${source.terminalLabel}-${index}`} source={source} />)}</div></section> : null}
         {query.data.mileageSources.length ? <section className="v2-source-evidence-group"><header><strong>{query.data.mileageDate} 里程来源</strong><span>日里程差 {number(query.data.comparison.dailyMileageDeltaKm)} km</span></header><div>{query.data.mileageSources.map((source, index) => <MileageSourceCard key={`${source.protocol}-${source.sourceLabel}-${source.terminalLabel}-${index}`} source={source} />)}</div></section> : null}
-        {!query.data.locationSources.length && !query.data.mileageSources.length ? <Empty className="v2-source-evidence-empty" title="暂无来源证据" description="该车辆当前没有可展示的位置或里程来源。" /> : null}
+        {!query.data.locationSources.length && !query.data.mileageSources.length ? <PanelEmpty className="v2-source-evidence-empty" compact icon={<IconSearch />} title="暂无来源证据" description="该车辆当前没有可展示的位置或里程来源。" /> : null}
       </> : null}
     </div>;
 
diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
index d432e234..e62d77fc 100644
--- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
+++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css
@@ -27344,3 +27344,184 @@
     line-height: 14px;
   }
 }
+
+/*
+ * Semi UI semantic panel states.
+ * Empty evidence surfaces share one visual and interaction contract instead
+ * of inheriting page-specific illustrations, spacing and typography.
+ */
+.v2-state-surface.is-empty {
+  --v2-state-accent: #70839a;
+  --v2-state-soft: #f4f7fa;
+  --v2-state-border: #dfe6ee;
+  position: relative;
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 190px;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px solid var(--v2-state-border);
+  border-radius: 10px;
+  background: linear-gradient(180deg, var(--v2-state-soft) 0, #fff 58%);
+  padding: 18px;
+}
+
+.v2-state-surface.is-empty::before {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 2px;
+  background: var(--v2-state-accent);
+  content: "";
+  opacity: .88;
+}
+
+.v2-state-surface.is-empty.tone-primary {
+  --v2-state-accent: #1769dc;
+  --v2-state-soft: #f2f7ff;
+  --v2-state-border: #d7e5f8;
+}
+
+.v2-state-surface.is-empty.tone-success {
+  --v2-state-accent: #1b9b6a;
+  --v2-state-soft: #f2faf7;
+  --v2-state-border: #d7ece4;
+}
+
+.v2-state-surface.is-empty.tone-warning {
+  --v2-state-accent: #d88622;
+  --v2-state-soft: #fff8ef;
+  --v2-state-border: #f0e0ca;
+}
+
+.v2-state-surface.is-empty.tone-danger {
+  --v2-state-accent: #d54c4c;
+  --v2-state-soft: #fff5f5;
+  --v2-state-border: #f0d7d7;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty.semi-empty {
+  position: relative;
+  z-index: 1;
+  min-height: 0;
+  padding: 4px;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty .semi-empty-image {
+  display: grid !important;
+  width: auto;
+  height: auto;
+  place-items: center;
+  margin: 0 0 12px;
+  opacity: 1;
+}
+
+.v2-state-empty-icon {
+  display: grid;
+  width: 48px;
+  height: 48px;
+  place-items: center;
+  border: 1px solid var(--v2-state-border);
+  border-radius: 14px;
+  background: #fff;
+  color: var(--v2-state-accent);
+  box-shadow: 0 8px 18px rgba(38, 58, 82, .08);
+}
+
+.v2-state-empty-icon .semi-icon {
+  font-size: 21px;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty .semi-empty-title {
+  margin-top: 0;
+  color: #2f435a;
+  font-size: 14px;
+  font-weight: 760;
+  letter-spacing: -.01em;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty .semi-empty-description {
+  max-width: 460px;
+  margin-top: 6px;
+  color: #77869a;
+  font-size: 11px;
+  line-height: 1.6;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty .semi-empty-content {
+  margin-top: 15px;
+}
+
+.v2-state-surface.is-empty > .v2-state-empty .semi-empty-content > .semi-button {
+  min-height: 34px;
+  border-radius: 8px;
+  padding-inline: 15px;
+  font-weight: 700;
+}
+
+.v2-state-surface.is-empty.is-panel.is-compact {
+  position: relative;
+  top: auto;
+  min-height: 112px;
+  border-bottom: 1px solid var(--v2-state-border);
+  background: linear-gradient(180deg, var(--v2-state-soft) 0, #fff 72%);
+  padding: 10px 12px;
+  backdrop-filter: none;
+}
+
+.v2-state-surface.is-empty.is-compact > .v2-state-empty .semi-empty-image {
+  margin-bottom: 7px;
+}
+
+.v2-state-surface.is-empty.is-compact .v2-state-empty-icon {
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  box-shadow: 0 5px 12px rgba(38, 58, 82, .06);
+}
+
+.v2-state-surface.is-empty.is-compact .v2-state-empty-icon .semi-icon {
+  font-size: 17px;
+}
+
+.v2-state-surface.is-empty.is-compact > .v2-state-empty .semi-empty-title {
+  font-size: 12px;
+}
+
+.v2-state-surface.is-empty.is-compact > .v2-state-empty .semi-empty-description {
+  margin-top: 3px;
+  font-size: 9px;
+  line-height: 1.5;
+}
+
+.v2-vehicle-recent-card > .semi-card-body > .v2-state-surface.v2-vehicle-recent-empty {
+  min-height: 0;
+  flex: 1 1 auto;
+  border: 0;
+  border-radius: 0;
+}
+
+@media (max-width: 680px) {
+  .v2-state-surface.is-empty {
+    min-height: 170px;
+    padding: 15px 12px;
+  }
+
+  .v2-state-surface.is-empty > .v2-state-empty .semi-empty-title {
+    font-size: 13px;
+  }
+
+  .v2-state-surface.is-empty > .v2-state-empty .semi-empty-description {
+    max-width: 300px;
+    font-size: 10px;
+  }
+
+  .v2-state-surface.is-empty.is-panel.is-compact {
+    min-height: 104px;
+    padding: 9px 10px;
+  }
+}
diff --git a/vehicle-data-platform/design-qa.md b/vehicle-data-platform/design-qa.md
index 27cce4d3..32d4011f 100644
--- a/vehicle-data-platform/design-qa.md
+++ b/vehicle-data-platform/design-qa.md
@@ -198,4 +198,54 @@
 - 第二轮同视口截图确认“每日统计—车辆每日里程—20 / 1024 辆”层级可辨，刷新、导出和首屏表格均可达。
 - 桌面端里程、告警、接入与运维四个结果面板语义色克制、密度稳定，未发现 P0、P1 或 P2 视觉与交互问题。
 
+## 共享语义状态 Semi UI Design QA
+
+- source visual truth: ECS 生产端车辆目录空结果与运维、轨迹证据状态
+- source screenshots:
+  - vehicle directory normal baseline: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/03-vehicles-mobile-before.png`
+  - vehicle directory empty baseline: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/04-vehicles-empty-before.png`
+- implementation screenshots:
+  - vehicle directory empty: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/05-vehicles-empty-after.png`
+  - operations health overview: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/06-operations-health-after.png`
+  - operations compact success: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/08-operations-health-bottom-after.png`
+  - track mobile initial state: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/09-track-empty-after.png`
+  - track desktop initial and evidence state: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/10-track-desktop-empty-after.png`
+  - alert center regression: `/Users/lingniu/project/ai-coding/lingniu-vehicle-ingest/.codex-audit/semi-empty-secondary-20260720/11-alerts-empty-after.png`
+- viewport and state:
+  - mobile `390 × 844`
+  - desktop `1440 × 900`
+  - 管理员权限、生产数据、空查询与健康检查通过状态
+
+### Fidelity Ledger
+
+| Surface | Required fidelity | Implementation evidence | Result |
+| --- | --- | --- | --- |
+| Empty result recognition | 无结果不能只剩大块白色画布，用户应立即识别当前状态。 | 共享 `PanelEmpty` 增加 Semi Icon、标题、说明和轻量语义底色；车辆目录空结果获得明确搜索图标。 | Improved. |
+| Recovery path | 可恢复的空结果必须给出唯一、直接的下一步。 | 车辆目录提供“清除搜索”，实测点击后恢复 1,024 辆授权目录；对账空结果提供“重置筛选”。 | Passed. |
+| Semantic tone | 空结果、通过、提醒和失败不能使用同一种视觉语义。 | primary、success、warning、danger 四类状态共享同一结构，仅使用克制的顶部语义线、图标色和浅背景区分。 | Passed. |
+| Compact evidence | 侧栏、时间线和小型证据区不能被完整空状态撑高。 | `compact` 状态在轨迹证据、告警履历、来源证据、遥测和运维容量检查中保持约 104–112px 的稳定高度。 | Passed. |
+| Functional continuity | 状态迁移不能改变查询、刷新、分页和证据读取逻辑。 | 仅替换呈现组件；车辆清除搜索、运维唯一重试路径和原页面查询键保持不变。 | Preserved. |
+| Cross-page reuse | 页面不能继续维护互不相同的 Empty 字号、插图和间距。 | 车辆、监控、轨迹、告警、单车、来源、对账和运维共用 `PanelEmpty` 的 tone、icon、compact 契约。 | Improved. |
+| Dense-page stability | 新状态样式不得挤压正常数据页。 | 告警队列、运维健康卡片、车辆正常目录和轨迹工作台生产截图均保持原行数、滚动区与操作位置。 | Passed. |
+
+### Interaction And Accessibility Checks
+
+- 空状态继续使用 Semi Empty，并由外层 `role="status"` 与 `aria-live="polite"` 公布；
+- 失败状态保留 `role="alert"`，运维来源失败只保留一个“重试”按钮，避免重复恢复入口；
+- 图标来自 `@douyinfe/semi-icons`，不使用文本符号、临时 SVG 或占位资产；
+- 车辆目录“清除搜索”按钮在 `390 × 844` 下可见、可点击，点击后空状态消失且授权目录恢复；
+- 轨迹桌面端左侧紧凑状态与中央引导状态互不重复，查询表单和播放控制仍可达；
+- 运维健康页容量检查通过状态没有覆盖运行时表格，主滚动区域继续可上下浏览；
+- `1440 × 900` 与 `390 × 844` 下均未发现横向溢出、文字裁切或不可达操作。
+- 生产发布版本 `semi-semantic-states-20260720033333` 完成资源烟测与管理员登录态复核。
+
+### Comparison History
+
+#### Pass 1 — fixed
+
+- 原车辆空结果只有两行居中文字，整张结果卡大面积留白，且没有恢复动作。
+- 首轮共享状态实现增加图标、语义背景和恢复按钮，同时发现运维来源失败同时出现两个“重试”入口。
+- 删除重复的状态内重试，只保留页面级错误恢复；全量 370 项前端测试恢复通过。
+- 第二轮生产截图确认车辆空结果、轨迹紧凑证据和运维成功状态遵循同一套 Semi UI 结构，未发现 P0、P1 或 P2 视觉与交互问题。
+
 final result: passed