feat(platform): harden telemetry pipeline and unify Semi UI workspaces

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

@@ -1,13 +1,20 @@
-import { IconChevronLeft, IconChevronRight, IconClose, IconFilter, IconList, IconMapPin, IconQrCode, IconRefresh, IconSearch } from '@douyinfe/semi-icons';
+import {
+  IconChevronLeft, IconChevronRight, IconClose, IconFilter, IconList, IconMapPin,
+  IconQrCode, IconRefresh, IconSearch
+} from '@douyinfe/semi-icons';
+import { Button, ButtonGroup, Card, Empty, Input, Modal, Select, Spin, Table, Tag, TextArea } from '@douyinfe/semi-ui';
 import { useQuery } from '@tanstack/react-query';
-import { memo, useCallback, useDeferredValue, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useDeferredValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { Link, 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 { TablePagination } from '../shared/TablePagination';
 import { VehicleSourceEvidencePanel } from '../shared/VehicleSourceEvidencePanel';
+import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { formatNumber, relativeFreshness, statusLabel, vehicleStatus } from '../domain/monitor';
+import { formatTelemetryValue } from '../domain/telemetry';
 import { MAX_MONITOR_SEARCH_TERMS, MONITOR_REFRESH, monitorFilterScope, monitorQueryParams, parseMonitorSearchTerms, useMonitorData, useMonitorVehicleCard, type MonitorViewport } from '../hooks/useMonitorData';
 import { LIVE_QUERY_POLICY, QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
 import { buildMonitorPath, parseMonitorRouteContext, withMonitorReturn } from '../routing/monitorContext';
@@ -20,21 +27,24 @@ const MOBILE_MONITOR_QUERY = '(max-width: 760px)';
 function BatchVehicleSearchDialog({ initialValue, onApply, onClose }: { initialValue: string; onApply: (value: string) => void; onClose: () => void }) {
   const [draft, setDraft] = useState(initialValue);
   const terms = useMemo(() => parseMonitorSearchTerms(draft), [draft]);
-  useEffect(() => {
-    const closeOnEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', closeOnEscape);
-    return () => window.removeEventListener('keydown', closeOnEscape);
-  }, [onClose]);
 
-  return <div className="v2-batch-search-backdrop" role="presentation" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}>
-    <section className="v2-batch-search-dialog" role="dialog" aria-modal="true" aria-labelledby="batch-search-title">
-      <header><div><strong id="batch-search-title">批量搜索车辆</strong><span>从 Excel、文本或聊天记录中直接粘贴车牌</span></div><button type="button" onClick={onClose} aria-label="关闭批量搜索"><IconClose /></button></header>
+  return <Modal
+    className="v2-batch-search-modal"
+    visible
+    centered
+    closeOnEsc
+    maskClosable
+    width={520}
+    title={<div className="v2-batch-search-title"><strong id="batch-search-title">批量搜索车辆</strong><span>从 Excel、文本或聊天记录中直接粘贴车牌</span></div>}
+    onCancel={onClose}
+    footer={<div className="v2-batch-search-actions"><Button onClick={onClose}>取消</Button><Button theme="solid" disabled={!terms.length} onClick={() => onApply(terms.join('，'))}>应用搜索（{terms.length}）</Button></div>}
+  >
+    <div className="v2-batch-search-dialog">
       <label htmlFor="batch-vehicle-search">每行一个车牌，也支持空格、逗号或分号分隔</label>
-      <textarea id="batch-vehicle-search" autoFocus value={draft} onChange={(event) => setDraft(event.target.value)} placeholder={'粤A12345\n粤B67890\n粤C24680'} />
+      <TextArea id="batch-vehicle-search" autoFocus value={draft} onChange={setDraft} autosize={{ minRows: 8, maxRows: 14 }} resize="vertical" placeholder={'粤A12345\n粤B67890\n粤C24680'} />
       <div className="v2-batch-search-summary"><span>已识别 <strong>{terms.length}</strong> 辆，重复项已自动去除</span><em>最多 {MAX_MONITOR_SEARCH_TERMS} 辆</em></div>
-      <footer><button type="button" className="v2-secondary-button" onClick={onClose}>取消</button><button type="button" className="v2-primary-button" disabled={!terms.length} onClick={() => onApply(terms.join('，'))}>应用搜索（{terms.length}）</button></footer>
-    </section>
-  </div>;
+    </div>
+  </Modal>;
 }
 
 function useMobileMonitorLayout() {
@@ -66,6 +76,10 @@ function hasRealtimeMileage(vehicle: VehicleRealtimeRow) {
   return vehicle.mileageAvailable ?? hasRealtimeLocation(vehicle);
 }
 
+function hasTodayMileage(vehicle: VehicleRealtimeRow): vehicle is VehicleRealtimeRow & { todayMileageKm: number } {
+  return vehicle.todayMileageAvailable === true && vehicle.todayMileageKm != null;
+}
+
 function hasRealtimeSOC(vehicle: VehicleRealtimeRow) {
   return vehicle.socAvailable ?? (vehicle.primaryProtocol === 'GB32960' || vehicle.primaryProtocol === 'YUTONG_MQTT');
 }
@@ -97,33 +111,37 @@ const MonitorAddressCell = memo(function MonitorAddressCell({ vehicle }: { vehic
   const moved = Boolean(current && requested && current.key !== requested.key);
 
   if (!current) return <span className="v2-monitor-address-empty">暂无实时位置</span>;
-  if (!requested) return <button type="button" className="v2-monitor-address-action" aria-label={`解析${vehicle.plate || vehicle.vin}位置`} title="按需调用高德逆地理编码，不随实时数据刷新重复请求" onClick={() => setRequested(current)}><IconMapPin />解析位置</button>;
-  if (addressQuery.isFetching && !addressQuery.data) return <span className="v2-monitor-address-loading"><i className="v2-spinner" />解析中</span>;
-  if (addressQuery.isError) return <button type="button" className="v2-monitor-address-action is-error" onClick={() => void addressQuery.refetch()}>解析失败，重试</button>;
-  return <div className="v2-monitor-address-result"><span title={addressQuery.data?.formattedAddress}>{addressQuery.data?.formattedAddress || '暂无地址'}</span><small>{addressQuery.dataUpdatedAt ? `解析于 ${new Date(addressQuery.dataUpdatedAt).toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })}` : ''}</small>{moved ? <button type="button" title="车辆已移动，按需更新地址" onClick={() => setRequested(current)}>位置已移动 · 更新</button> : null}</div>;
+  if (!requested) return <Button className="v2-monitor-address-action" size="small" theme="light" type="primary" icon={<IconMapPin />} aria-label={`解析${vehicle.plate || vehicle.vin}位置`} title="按需调用高德逆地理编码，不随实时数据刷新重复请求" onClick={() => setRequested(current)}>解析位置</Button>;
+  if (addressQuery.isFetching && !addressQuery.data) return <span className="v2-monitor-address-loading"><Spin size="small" />解析中</span>;
+  if (addressQuery.isError) return <Button className="v2-monitor-address-action is-error" size="small" theme="light" type="danger" aria-label={`${vehicle.plate || vehicle.vin}位置解析失败，重试`} onClick={() => void addressQuery.refetch()}>解析失败，重试</Button>;
+  return <div className="v2-monitor-address-result"><span title={addressQuery.data?.formattedAddress}>{addressQuery.data?.formattedAddress || '暂无地址'}</span><small>{addressQuery.dataUpdatedAt ? `解析于 ${new Date(addressQuery.dataUpdatedAt).toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })}` : ''}</small>{moved ? <Button className="v2-monitor-address-update" size="small" theme="borderless" type="warning" title="车辆已移动，按需更新地址" onClick={() => setRequested(current)}>位置已移动 · 更新</Button> : null}</div>;
 });
 
 function MonitorVehicleTable({ rows, total, page, totalPages, limit, loading, onSelect, onPage, onLimit }: { rows: VehicleRealtimeRow[]; total: number; page: number; totalPages: number; limit: number; loading: boolean; onSelect: (vin: string) => void; onPage: (page: number) => void; onLimit: (limit: number) => void }) {
   const mobile = useMobileMonitorLayout();
-  return <section className="v2-monitor-table-panel">
-    <header><div><strong>车辆实时列表</strong><span>覆盖全部授权车辆；实时字段缺失时显示“—”，文字地址按需解析</span></div><b>{total.toLocaleString('zh-CN')} 辆车辆</b></header>
-    {!mobile ? <div className="v2-monitor-table-scroll"><table><thead><tr><th>车辆</th><th>推荐来源</th><th>速度</th><th>里程</th><th>经纬度</th><th>地理位置</th><th>最新上报</th></tr></thead>
-      <tbody>{rows.map((row) => <tr key={row.vin}>
-        <td className="v2-monitor-table-vehicle"><button type="button" title="在地图中定位" onClick={() => onSelect(row.vin)}><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin}</span></button></td>
-        <td><span className="v2-monitor-source-badge">{row.primaryProtocol || '—'}</span></td>
-        <td><strong className="v2-monitor-live-value">{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}</strong>{hasRealtimeSpeed(row) ? <small className="v2-monitor-live-unit">km/h</small> : null}</td>
-        <td><div className="v2-monitor-mileage"><span><small>总</small><strong>{hasRealtimeMileage(row) ? `${formatNumber(row.totalMileageKm, 1)} km` : '—'}</strong></span><span><small>今日</small><strong>{row.todayMileageAvailable ? `${formatNumber(row.todayMileageKm ?? 0, 1)} km` : '—'}</strong></span></div></td>
-        <td>{hasRealtimeLocation(row) ? <code className="v2-monitor-coordinate">{row.longitude.toFixed(6)}<br />{row.latitude.toFixed(6)}</code> : <span className="v2-monitor-unavailable">—</span>}</td>
-        <td><MonitorAddressCell vehicle={row} /></td>
-        <td><div className="v2-monitor-last-seen"><strong>{row.lastSeen ? relativeFreshness(row.lastSeen) : '从未上报'}</strong><span>{row.lastSeen || '—'}</span></div></td>
-      </tr>)}</tbody></table>{loading ? <div className="v2-monitor-table-loading"><i className="v2-spinner" />正在更新车辆实时数据…</div> : null}{!loading && !rows.length ? <EmptyState /> : null}</div> : null}
-    {mobile ? <div className="v2-monitor-mobile-cards">{rows.map((row) => <article key={row.vin}>
-      <header><div><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin} · {row.primaryProtocol || '暂无来源'}</span></div><b>{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}{hasRealtimeSpeed(row) ? <small>km/h</small> : null}</b></header>
-      <dl><div><dt>总里程</dt><dd>{hasRealtimeMileage(row) ? `${formatNumber(row.totalMileageKm, 1)} km` : '—'}</dd></div><div><dt>今日里程</dt><dd>{row.todayMileageAvailable ? `${formatNumber(row.todayMileageKm ?? 0, 1)} km` : '—'}</dd></div><div><dt>经纬度</dt><dd>{hasRealtimeLocation(row) ? <code>{row.longitude.toFixed(6)}, {row.latitude.toFixed(6)}</code> : '—'}</dd></div><div><dt>最新上报</dt><dd>{row.lastSeen ? relativeFreshness(row.lastSeen) : '从未上报'}</dd></div><div className="is-address"><dt>地理位置</dt><dd><MonitorAddressCell vehicle={row} /></dd></div></dl>
-      <footer><button type="button" onClick={() => onSelect(row.vin)}><IconMapPin />{hasRealtimeLocation(row) ? '地图定位' : '查看车辆'}</button></footer>
-    </article>)}{loading ? <div className="v2-monitor-table-loading"><i className="v2-spinner" />正在更新车辆实时数据…</div> : null}{!loading && !rows.length ? <EmptyState /> : null}</div> : null}
-    <footer><span>第 {page} / {totalPages} 页</span><div><button type="button" disabled={page <= 1} onClick={() => onPage(page - 1)}>上一页</button><button type="button" disabled={page >= totalPages} onClick={() => onPage(page + 1)}>下一页</button><select aria-label="每页车辆数" value={limit} onChange={(event) => onLimit(Number(event.target.value))}><option value="20">20 辆/页</option><option value="50">50 辆/页</option><option value="100">100 辆/页</option></select></div></footer>
-  </section>;
+  const columns = useMemo(() => [
+    { title: '车辆', dataIndex: 'plate', width: 210, className: 'v2-monitor-table-vehicle', render: (_value: string, row: VehicleRealtimeRow) => <Button className="v2-monitor-vehicle-action" theme="borderless" type="tertiary" title="在地图中定位" onClick={() => onSelect(row.vin)}><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin}</span></Button> },
+    { title: '速度', dataIndex: 'speedKmh', width: 120, render: (_value: number, row: VehicleRealtimeRow) => <><strong className="v2-monitor-live-value">{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}</strong>{hasRealtimeSpeed(row) ? <small className="v2-monitor-live-unit">km/h</small> : null}</> },
+    { title: '当日里程', dataIndex: 'todayMileageKm', width: 140, render: (_value: number, row: VehicleRealtimeRow) => <><strong className="v2-monitor-live-value is-today">{hasTodayMileage(row) ? formatNumber(row.todayMileageKm, 1) : '—'}</strong>{hasTodayMileage(row) ? <small className="v2-monitor-live-unit">km</small> : null}</> },
+    { title: '总里程', dataIndex: 'totalMileageKm', width: 170, render: (_value: number, row: VehicleRealtimeRow) => <><strong className="v2-monitor-live-value">{hasRealtimeMileage(row) ? formatNumber(row.totalMileageKm, 1) : '—'}</strong>{hasRealtimeMileage(row) ? <small className="v2-monitor-live-unit">km</small> : null}</> },
+    { title: '协议来源', dataIndex: 'primaryProtocol', width: 150, render: (_value: string, row: VehicleRealtimeRow) => <div className="v2-monitor-protocol"><Tag color={row.primaryProtocol ? 'blue' : 'grey'} type="light" size="small">{row.primaryProtocol || '未知'}</Tag>{row.protocols.length > 1 ? <small>+{row.protocols.length - 1} 路</small> : null}</div> },
+    { title: '经纬度', dataIndex: 'longitude', width: 190, render: (_value: number, row: VehicleRealtimeRow) => hasRealtimeLocation(row) ? <code className="v2-monitor-coordinate">{row.longitude.toFixed(6)}<br />{row.latitude.toFixed(6)}</code> : <span className="v2-monitor-unavailable">—</span> },
+    { title: '地理位置', dataIndex: 'vin', render: (_value: string, row: VehicleRealtimeRow) => <MonitorAddressCell vehicle={row} /> }
+  ], [onSelect]);
+  return <Card className="v2-monitor-table-panel" bodyStyle={{ padding: 0 }}>
+    <WorkspacePanelHeader
+      title="车辆实时列表"
+      description="覆盖全部授权车辆；实时字段缺失时显示“—”，文字地址按需解析"
+      meta={`${total.toLocaleString('zh-CN')} 辆车辆`}
+    />
+    {!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) => <Card className="v2-monitor-mobile-card" key={row.vin}>
+      <header><div><strong>{row.plate || '未绑定车牌'}</strong><span>{row.vin}</span></div><b>{hasRealtimeSpeed(row) ? formatNumber(row.speedKmh, 1) : '—'}{hasRealtimeSpeed(row) ? <small>km/h</small> : null}</b></header>
+      <dl><div><dt>当日里程</dt><dd className="is-today">{hasTodayMileage(row) ? `${formatNumber(row.todayMileageKm, 1)} km` : '—'}</dd></div><div><dt>总里程</dt><dd>{hasRealtimeMileage(row) ? `${formatNumber(row.totalMileageKm, 1)} km` : '—'}</dd></div><div><dt>协议来源</dt><dd><span className="v2-monitor-mobile-protocol">{row.primaryProtocol || '未知'}{row.protocols.length > 1 ? ` · ${row.protocols.length} 路` : ''}</span></dd></div><div><dt>经纬度</dt><dd>{hasRealtimeLocation(row) ? <code>{row.longitude.toFixed(6)}, {row.latitude.toFixed(6)}</code> : '—'}</dd></div><div className="is-address"><dt>地理位置</dt><dd><MonitorAddressCell vehicle={row} /></dd></div></dl>
+      <footer><Button className="v2-monitor-card-locate" theme="borderless" type="primary" icon={<IconMapPin />} onClick={() => onSelect(row.vin)}>{hasRealtimeLocation(row) ? '地图定位' : '查看车辆'}</Button></footer>
+    </Card>)}{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}
+    <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>;
 }
 
 function MobileEntry({ onClose }: { onClose: () => void }) {
@@ -132,11 +150,9 @@ function MobileEntry({ onClose }: { onClose: () => void }) {
   const [copyState, setCopyState] = useState<'idle' | 'copied' | 'error'>('idle');
   const [attempt, setAttempt] = useState(0);
   const url = `${window.location.origin}/monitor`;
-  useEffect(() => {
-    const closeOnEscape = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose(); };
-    window.addEventListener('keydown', closeOnEscape);
-    return () => window.removeEventListener('keydown', closeOnEscape);
-  }, [onClose]);
+  useLayoutEffect(() => {
+    document.querySelector('.v2-monitor-qr-modal .semi-modal-close')?.setAttribute('aria-label', '关闭手机端入口');
+  }, []);
   useEffect(() => {
     if (copyState === 'idle') return;
     const timer = window.setTimeout(() => setCopyState('idle'), 1_800);
@@ -161,17 +177,35 @@ function MobileEntry({ onClose }: { onClose: () => void }) {
       setCopyState('error');
     }
   };
-  return <div className="v2-monitor-qr-backdrop" role="dialog" aria-modal="true" aria-label="手机端入口" onMouseDown={(event) => { if (event.target === event.currentTarget) onClose(); }}><section><button type="button" autoFocus onClick={onClose} aria-label="关闭手机端入口"><IconClose /></button><IconQrCode /><h3>手机端全局监控</h3><p>扫码后使用现有账号鉴权，不在二维码中保存 Token</p>{qr ? <img src={qr} alt="全局监控手机端二维码" /> : error ? <div className="v2-monitor-qr-error" role="alert"><span>{error}</span><button type="button" onClick={() => setAttempt((value) => value + 1)}>重新生成</button></div> : <span className="v2-spinner" role="status" aria-label="正在生成二维码" />}<code>{url}</code><button type="button" aria-live="polite" onClick={() => void copyURL()}>{copyState === 'copied' ? '已复制访问地址' : copyState === 'error' ? '复制失败，重试' : '复制访问地址'}</button></section></div>;
+  return <Modal
+    className="v2-monitor-qr-modal"
+    visible
+    centered
+    width={390}
+    title="手机端全局监控"
+    closeIcon={<IconClose aria-label="关闭手机端入口" />}
+    closeOnEsc
+    maskClosable
+    onCancel={onClose}
+    footer={<Button block theme="solid" aria-live="polite" onClick={() => void copyURL()}>{copyState === 'copied' ? '已复制访问地址' : copyState === 'error' ? '复制失败，重试' : '复制访问地址'}</Button>}
+  >
+    <div className="v2-monitor-qr-content">
+      <span className="v2-monitor-qr-icon"><IconQrCode /></span>
+      <p>扫码后使用现有账号鉴权，不在二维码中保存 Token</p>
+      {qr ? <img src={qr} alt="全局监控手机端二维码" /> : error ? <div className="v2-monitor-qr-error" role="alert"><span>{error}</span><Button theme="light" type="danger" onClick={() => setAttempt((value) => value + 1)}>重新生成</Button></div> : <span className="v2-spinner" role="status" aria-label="正在生成二维码" />}
+      <code>{url}</code>
+    </div>
+  </Modal>;
 }
 
 const VehicleRow = memo(function VehicleRow({ vehicle, selected, onSelect }: { vehicle: VehicleRealtimeRow; selected: boolean; onSelect: (vin: string) => void }) {
   const status = vehicleStatus(vehicle);
   return (
-    <button type="button" className={`v2-vehicle-row ${selected ? 'is-selected' : ''}`} onClick={() => onSelect(vehicle.vin)}>
+    <Button theme="borderless" type="tertiary" className={`v2-vehicle-row ${selected ? 'is-selected' : ''}`} onClick={() => onSelect(vehicle.vin)}>
       <i className={`v2-status-dot is-${status}`} />
       <span className="v2-vehicle-identity"><strong>{vehicle.plate || '未绑定车牌'}</strong><small>{vehicle.vin}</small></span>
       <span className="v2-vehicle-motion"><strong>{formatNumber(vehicle.speedKmh, 1)} <small>km/h</small></strong><small>{statusLabel(status)}</small></span>
-    </button>
+    </Button>
   );
 });
 
@@ -192,60 +226,94 @@ function VehicleDetailCard({
   const card = useMonitorVehicleCard(vehicle.vin, vehicle, true);
   const detail = card.detail.data;
   const activeAlerts = card.activeAlerts.data;
+  const telemetry = card.telemetry?.data;
   const address = card.address.data;
   const status = vehicleStatus(vehicle);
-  const dailyMileage = detail?.mileage.items[0]?.dailyMileageKm;
+  // The realtime row is joined to vehicle_daily_mileage with stat_date = CURDATE().
+  // Vehicle detail mileage is ordered by recency and may start with yesterday, so it
+  // must never be used as a fallback for a metric explicitly labelled "今日里程".
+  const dailyMileage = vehicle.todayMileageAvailable === true ? vehicle.todayMileageKm : undefined;
   const latestAlert = activeAlerts?.items[0];
+  const mileageLabel = vehicle.primaryProtocol === 'JT808' ? 'GPS 总里程' : '仪表盘总里程';
+  const encodedVin = encodeURIComponent(vehicle.vin);
+  const accessSource = detail?.profile?.accessProvider || vehicle.locationSource;
+  const workflowLinks = [
+    ['单车详情', `/vehicles/${encodedVin}`],
+    ['轨迹回放', `/tracks?vin=${encodedVin}`],
+    ['历史数据', `/history?vin=${encodedVin}`],
+    ['里程查询', `/statistics?vins=${encodedVin}`]
+  ] as const;
+  const gbHighlights = (telemetry?.values ?? []).filter((item) => item.protocol === 'GB32960' && [
+    'fuel_cell_voltage_v', 'fuel_cell_current_a', 'hydrogen_consumption_kg_per_100km',
+    'hydrogen_concentration_percent', 'hydrogen_pressure_mpa', 'hydrogen_temperature_c',
+    'engine_speed_rpm', 'total_voltage_v', 'total_current_a'
+  ].includes(item.key)).slice(0, 9);
   return (
-    <aside className="v2-vehicle-detail">
-      <div className="v2-detail-controls">
-        <button type="button" aria-label="收起车辆详情" title="收起到地图右侧" onClick={onCollapse}><IconChevronRight /></button>
-        <button type="button" aria-label="取消选择车辆" title="取消选择车辆" onClick={onClear}><IconClose /></button>
-      </div>
-      <div className="v2-detail-title">
-        <div><strong>{vehicle.plate || '未绑定车牌'}</strong><span className={`v2-status-text is-${status}`}>{statusLabel(status)}</span></div>
-        <small>{vehicle.vin}</small>
-      </div>
-      <div className="v2-detail-actions">
-        <Link to={withMonitorReturn(`/vehicles/${encodeURIComponent(vehicle.vin)}`, monitorReturn)}>单车详情</Link>
-        <Link to={withMonitorReturn(`/tracks?vin=${encodeURIComponent(vehicle.vin)}`, monitorReturn)}>轨迹回放</Link>
-        <Link to={withMonitorReturn(`/history?vin=${encodeURIComponent(vehicle.vin)}`, monitorReturn)}>历史数据</Link>
-        <Link to={withMonitorReturn(`/statistics?vins=${encodeURIComponent(vehicle.vin)}`, monitorReturn)}>里程查询</Link>
-      </div>
-      <section>
-        <h3>车辆信息</h3>
+    <Card className="v2-vehicle-detail" bodyStyle={{ padding: 0 }}>
+      <div className="v2-detail-body" role="region" aria-label={`${vehicle.plate || vehicle.vin}车辆详情`}>
+        <div className="v2-detail-shell-header">
+          <div className="v2-detail-controls">
+            <Button size="small" theme="light" type="tertiary" icon={<IconChevronRight />} aria-label="收起车辆详情" title="收起到地图右侧" onClick={onCollapse} />
+            <Button size="small" theme="light" type="danger" icon={<IconClose />} aria-label="取消选择车辆" title="取消选择车辆" onClick={onClear} />
+          </div>
+          <div className="v2-detail-title">
+            <div><strong>{vehicle.plate || '未绑定车牌'}</strong><Tag className={`v2-status-text is-${status}`} color={status === 'driving' ? 'blue' : status === 'idle' || status === 'online' ? 'green' : status === 'alert' ? 'red' : 'grey'} type="light" size="small">{statusLabel(status)}</Tag></div>
+            <small>{vehicle.vin}</small>
+          </div>
+          <nav className="v2-detail-actions" aria-label="车辆快捷操作">
+            {workflowLinks.map(([label, path]) => <Link key={label} to={withMonitorReturn(path, monitorReturn)}>{label}</Link>)}
+          </nav>
+        </div>
+      <section className="v2-detail-section v2-detail-report">
+        <WorkspacePanelHeader
+          variant="compact"
+          title="最新上报"
+          description="车辆最近一次有效实时数据"
+          meta={<Tag color={vehicle.online ? 'green' : 'grey'} type="light" size="small">{relativeFreshness(vehicle.lastSeen)}</Tag>}
+        />
+        <div className="v2-detail-report-time"><small>平台接收时间</small><strong>{vehicle.lastSeen || '暂无上报'}</strong></div>
+        <div className="v2-detail-report-source"><span><small>主协议</small><b>{vehicle.primaryProtocol || '未知'}</b></span><span><small>接入来源</small><b>{accessSource || '待补充'}</b></span></div>
         <dl className="v2-detail-list">
-          <div><dt>VIN</dt><dd>{vehicle.vin}</dd></div>
-          <div><dt>厂家</dt><dd>{vehicle.oem || '待补充'}</dd></div>
-          <div><dt>协议</dt><dd>{vehicle.primaryProtocol || vehicle.protocols.join('、') || '未知'}</dd></div>
-          <div><dt>数据来源</dt><dd>{detail?.sources.join('、') || vehicle.protocols.join('、') || '未知'}</dd></div>
-          <div><dt>接入供应商</dt><dd>{detail?.profile?.accessProvider || '待补充'}</dd></div>
-          <div><dt>来源覆盖</dt><dd>{vehicle.onlineSourceCount}/{vehicle.sourceCount}</dd></div>
+          <div><dt>坐标</dt><dd><Button theme="borderless" type="tertiary" className="v2-detail-source-link" aria-label="查看全部位置来源" title="展开全部位置来源" onClick={() => setSourceEvidenceOpen(true)}>{hasRealtimeLocation(vehicle) ? `${vehicle.longitude.toFixed(6)}, ${vehicle.latitude.toFixed(6)}` : '—'}</Button></dd></div>
+          <div><dt>位置</dt><dd>{hasRealtimeLocation(vehicle) ? address?.formattedAddress || '位置解析中' : '暂无实时位置'}</dd></div>
         </dl>
       </section>
-      <section>
-        <h3>实时状态</h3>
+      <section className="v2-detail-section">
+        <WorkspacePanelHeader
+          variant="compact"
+          title="实时状态"
+          description={accessSource || '来源待补充'}
+          meta={<Tag color="blue" type="light" size="small">{vehicle.primaryProtocol || '未知协议'}</Tag>}
+        />
         <div className="v2-metric-grid">
           <div><small>速度</small><strong>{hasRealtimeSpeed(vehicle) ? formatNumber(vehicle.speedKmh, 1) : '—'}<em>{hasRealtimeSpeed(vehicle) ? 'km/h' : ''}</em></strong></div>
           <div><small>SOC</small><strong>{hasRealtimeSOC(vehicle) ? formatNumber(vehicle.socPercent, 1) : '—'}<em>{hasRealtimeSOC(vehicle) ? '%' : ''}</em></strong></div>
-          <div><small>总里程</small><button type="button" className="v2-metric-source-link" title="展开全部里程来源" onClick={() => setSourceEvidenceOpen(true)}>{hasRealtimeMileage(vehicle) ? formatNumber(vehicle.totalMileageKm, 1) : '—'}<em>{hasRealtimeMileage(vehicle) ? 'km' : ''}</em></button></div>
-          <div><small>今日里程</small><button type="button" className="v2-metric-source-link" title="展开全部里程来源" onClick={() => setSourceEvidenceOpen(true)}>{dailyMileage == null ? '—' : formatNumber(dailyMileage, 1)}<em>{dailyMileage == null ? '' : 'km'}</em></button></div>
+          <div><small>{mileageLabel}</small><Button theme="borderless" type="tertiary" className="v2-metric-source-link" aria-label="查看总里程全部来源" title="展开全部里程来源" onClick={() => setSourceEvidenceOpen(true)}><span>{hasRealtimeMileage(vehicle) ? formatNumber(vehicle.totalMileageKm, 1) : '—'}<em>{hasRealtimeMileage(vehicle) ? 'km' : ''}</em></span><IconChevronRight /></Button></div>
+          <div><small>今日里程</small><Button theme="borderless" type="tertiary" className="v2-metric-source-link" aria-label="查看今日里程全部来源" title="展开全部里程来源" onClick={() => setSourceEvidenceOpen(true)}><span>{dailyMileage == null ? '—' : formatNumber(dailyMileage, 1)}<em>{dailyMileage == null ? '' : 'km'}</em></span><IconChevronRight /></Button></div>
           <div><small>状态</small><strong>{statusLabel(status)}</strong></div>
           <div><small>当前告警</small><strong>{formatNumber(activeAlerts?.total ?? 0)}<em>条</em></strong></div>
         </div>
+        {gbHighlights.length ? <div className="v2-gb-highlight-grid">{gbHighlights.map((item) => <div key={`${item.key}-${item.sourceField}`} title={item.description}><small>{item.label}</small><strong>{formatTelemetryValue(item.value, item.displayValue)}<em>{item.unit}</em></strong></div>)}</div> : null}
       </section>
-      <section>
-        <h3>最新上报</h3>
+      <section className="v2-detail-section">
+        <WorkspacePanelHeader
+          variant="compact"
+          title="车辆信息"
+          description="身份、车型与来源覆盖"
+          meta={`${vehicle.onlineSourceCount}/${vehicle.sourceCount} 在线`}
+        />
         <dl className="v2-detail-list">
-          <div><dt>时间</dt><dd>{vehicle.lastSeen || '暂无'}</dd></div>
-          <div><dt>新鲜度</dt><dd>{relativeFreshness(vehicle.lastSeen)}</dd></div>
-          <div><dt>坐标</dt><dd><button type="button" className="v2-detail-source-link" title="展开全部位置来源" onClick={() => setSourceEvidenceOpen(true)}>{hasRealtimeLocation(vehicle) ? `${vehicle.longitude.toFixed(6)}, ${vehicle.latitude.toFixed(6)}` : '—'}</button></dd></div>
-          <div><dt>位置</dt><dd>{hasRealtimeLocation(vehicle) ? address?.formattedAddress || '位置解析中' : '暂无实时位置'}</dd></div>
+          <div><dt>VIN</dt><dd>{vehicle.vin}</dd></div>
+          <div><dt>品牌 / 车型</dt><dd>{[detail?.profile?.brandName, detail?.profile?.modelName].filter(Boolean).join(' / ') || vehicle.oem || '待补充'}</dd></div>
+          <div><dt>可用协议</dt><dd>{detail?.sources.join('、') || vehicle.protocols.join('、') || '未知'}</dd></div>
+          <div><dt>接入供应商</dt><dd>{detail?.profile?.accessProvider || '待补充'}</dd></div>
+          <div><dt>来源覆盖</dt><dd>{vehicle.onlineSourceCount}/{vehicle.sourceCount}</dd></div>
           <div><dt>告警状态</dt><dd>{latestAlert ? `${latestAlert.ruleName} · ${latestAlert.severity}` : '无当前业务告警'}</dd></div>
         </dl>
       </section>
       <VehicleSourceEvidencePanel vin={vehicle.vin} compact open={sourceEvidenceOpen} onOpenChange={setSourceEvidenceOpen} />
-    </aside>
+      </div>
+    </Card>
   );
 }
 
@@ -343,13 +411,13 @@ export default function MonitorPage() {
 
   return (
     <div className="v2-monitor-page">
-      <section className="v2-filterbar" aria-label="车辆筛选">
+      <Card className="v2-filterbar" bodyStyle={{ padding: 0 }} aria-label="车辆筛选">
         <div className={`v2-search-field${searchTerms.length > 1 ? ' is-batch' : ''}`}>
-          <IconSearch />
-          <input
+          <Input
             aria-label="搜索车辆"
+            prefix={<IconSearch />}
             value={keyword}
-            onChange={(event) => { setKeyword(event.target.value); setListOffset(0); }}
+            onChange={(value) => { setKeyword(value); setListOffset(0); }}
             onPaste={(event) => {
               const pastedTerms = parseMonitorSearchTerms(event.clipboardData.getData('text'));
               if (pastedTerms.length <= 1) return;
@@ -358,35 +426,36 @@ export default function MonitorPage() {
               setListOffset(0);
             }}
             placeholder="车牌 / VIN；可批量粘贴车牌"
+            suffix={<Button className="v2-search-batch-action" size="small" theme="borderless" onClick={() => setBatchSearchOpen(true)}>批量</Button>}
           />
-          <button type="button" className="v2-search-batch-action" onClick={() => setBatchSearchOpen(true)}>批量</button>
           {searchTerms.length > 1 ? <span className={`v2-search-batch-count${batchMatch.missing.length && !batchSearchPending ? ' has-missing' : ''}`} aria-live="polite" title={searchTerms.length === MAX_MONITOR_SEARCH_TERMS ? `最多支持 ${MAX_MONITOR_SEARCH_TERMS} 条；${batchStatusTitle}` : batchStatusTitle}>{batchSearchPending ? `已识别 ${searchTerms.length} 辆` : `已找到 ${batchMatch.matched}/${searchTerms.length}`}</span> : null}
         </div>
-        <select value={protocol} onChange={(event) => { setProtocol(event.target.value); setListOffset(0); }} aria-label="协议">
-          {protocols.map((item) => <option key={item} value={item}>{item || '全部协议'}</option>)}
-        </select>
-        <select value={status} onChange={(event) => { setStatus(event.target.value); setListOffset(0); }} aria-label="在线状态">
-          {statuses.map((item) => <option key={item} value={item}>{item === 'no_location' ? '无实时位置' : item ? statusLabel(item as never) : '全部状态'}</option>)}
-        </select>
-        <button type="button" className="v2-secondary-button" onClick={() => { setKeyword(''); setProtocol(''); setStatus(''); setListOffset(0); }}><IconRefresh />清空</button>
+        <span className="v2-sr-only" id="monitor-protocol-filter-label">协议</span>
+        <Select value={protocol} onChange={(value) => { setProtocol(String(value)); setListOffset(0); }} aria-labelledby="monitor-protocol-filter-label" optionList={protocols.map((item) => ({ value: item, label: item || '全部协议' }))} />
+        <span className="v2-sr-only" id="monitor-status-filter-label">在线状态</span>
+        <Select value={status} onChange={(value) => { setStatus(String(value)); setListOffset(0); }} aria-labelledby="monitor-status-filter-label" optionList={statuses.map((item) => ({ value: item, label: item === 'no_location' ? '无实时位置' : item ? statusLabel(item as never) : '全部状态' }))} />
+        <Button className="v2-filter-reset" icon={<IconRefresh />} onClick={() => { setKeyword(''); setProtocol(''); setStatus(''); setListOffset(0); }}>清空</Button>
         <span className="v2-filter-live-status" role="status" title="搜索和筛选条件修改后自动生效"><IconFilter />实时筛选</span>
-        <div className="v2-monitor-mode" aria-label="监控视图"><button type="button" className={mode === 'map' ? 'is-active' : ''} onClick={() => setMode('map')}><IconMapPin />地图</button><button type="button" className={mode === 'list' ? 'is-active' : ''} onClick={() => { setMode('list'); setDetailOpen(false); }}><IconList />列表</button></div>
-        <button type="button" className="v2-monitor-mobile-entry" onClick={() => setMobileEntryOpen(true)}><IconQrCode />手机端</button>
-      </section>
+        <ButtonGroup className="v2-monitor-mode" aria-label="监控视图">
+          <Button aria-pressed={mode === 'map'} className={mode === 'map' ? 'is-active' : ''} theme={mode === 'map' ? 'solid' : 'borderless'} type={mode === 'map' ? 'primary' : 'tertiary'} icon={<IconMapPin />} onClick={() => setMode('map')}>地图</Button>
+          <Button aria-pressed={mode === 'list'} className={mode === 'list' ? 'is-active' : ''} theme={mode === 'list' ? 'solid' : 'borderless'} type={mode === 'list' ? 'primary' : 'tertiary'} icon={<IconList />} onClick={() => { setMode('list'); setDetailOpen(false); }}>列表</Button>
+        </ButtonGroup>
+        <Button className="v2-monitor-mobile-entry" theme="light" icon={<IconQrCode />} onClick={() => setMobileEntryOpen(true)}>手机端</Button>
+      </Card>
       {batchSearchOpen ? <BatchVehicleSearchDialog initialValue={searchTerms.join('\n')} onClose={() => setBatchSearchOpen(false)} onApply={(value) => { setKeyword(value); setListOffset(0); setBatchSearchOpen(false); }} /> : null}
 
-      <section className="v2-kpis" aria-label="车辆整体统计">
+      <Card className="v2-kpis" bodyStyle={{ padding: 0 }} aria-label="车辆整体统计">
         {[
-          ['车辆总数', formatNumber(summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length), 'fleet'],
-          ['无实时位置', formatNumber(summary.data?.noLocationVehicles ?? 0), 'missing'],
-          ['当前在线', formatNumber(summary.data?.onlineVehicles ?? rows.length - offline), 'online'],
-          ['当前离线', formatNumber(summary.data?.offlineVehicles ?? offline), 'offline'],
-          ['行驶车辆', formatNumber(summary.data?.drivingVehicles ?? driving), 'driving'],
-          ['静止车辆', formatNumber(summary.data?.idleVehicles ?? idle), 'idle'],
-          ['告警车辆', summary.data?.alertDataAvailable ? formatNumber(summary.data.alertVehicles) : '—', 'alert'],
-          ['今日上报', formatNumber(summary.data?.frameToday ?? 0), 'today']
-        ].map(([label, value, tone]) => <div key={label} className={`v2-kpi is-${tone}`}><small>{label}</small><strong>{value}</strong></div>)}
-      </section>
+          { label: '车辆总数', value: formatNumber(summary.data?.totalVehicles ?? vehicles.data?.total ?? rows.length), tone: 'fleet', priority: 'primary', unit: '辆' },
+          { label: '当前在线', value: formatNumber(summary.data?.onlineVehicles ?? rows.length - offline), tone: 'online', priority: 'primary', unit: '辆' },
+          { label: '当前离线', value: formatNumber(summary.data?.offlineVehicles ?? offline), tone: 'offline', priority: 'standard', unit: '辆' },
+          { label: '行驶车辆', value: formatNumber(summary.data?.drivingVehicles ?? driving), tone: 'driving', priority: 'standard', unit: '辆' },
+          { label: '静止车辆', value: formatNumber(summary.data?.idleVehicles ?? idle), tone: 'idle', priority: 'standard', unit: '辆' },
+          { label: '告警车辆', value: summary.data?.alertDataAvailable ? formatNumber(summary.data.alertVehicles) : '—', tone: 'alert', priority: 'standard', unit: '辆' },
+          { label: '今日上报', value: formatNumber(summary.data?.frameToday ?? 0), tone: 'today', priority: 'support', unit: '条' },
+          { label: '无实时位置', value: formatNumber(summary.data?.noLocationVehicles ?? 0), tone: 'missing', priority: 'support', unit: '辆' }
+        ].map(({ label, value, tone, priority, unit }) => <div key={label} className={`v2-kpi is-${tone} is-${priority}`}><small>{label}</small><strong>{value}<em>{unit}</em></strong></div>)}
+      </Card>
 
       {vehicles.isError ? <InlineError message={vehicles.error instanceof Error ? vehicles.error.message : '车辆数据加载失败'} onRetry={() => vehicles.refetch()} /> : null}
       {mode === 'list' && realtimeListQuery.isError ? <InlineError message={realtimeListQuery.error instanceof Error ? realtimeListQuery.error.message : '车辆列表加载失败'} onRetry={() => realtimeListQuery.refetch()} /> : null}
@@ -419,23 +488,23 @@ export default function MonitorPage() {
           />
         ) : null}
         {selected && !detailOpen ? (
-          <aside className="v2-detail-peek" aria-label="已收起的车辆详情">
-            <button type="button" aria-label="展开车辆详情" title={`展开 ${selected.plate || selected.vin} 的车辆详情`} onClick={expandDetail}>
+          <Card className="v2-detail-peek" bodyStyle={{ padding: 0 }}>
+            <Button theme="borderless" type="tertiary" aria-label="展开车辆详情" title={`展开 ${selected.plate || selected.vin} 的车辆详情`} onClick={expandDetail}>
               <IconChevronLeft />
               <i className={`v2-status-dot is-${vehicleStatus(selected)}`} />
               <span>{selected.plate || '未绑定车牌'}</span>
-            </button>
-          </aside>
+            </Button>
+          </Card>
         ) : null}
       </section> : <MonitorVehicleTable rows={visibleListRows} total={visibleListTotal} page={Math.floor(listOffset / listLimit) + 1} totalPages={Math.max(1, Math.ceil(visibleListTotal / listLimit))} limit={listLimit} loading={filterTransitionPending || realtimeListQuery.isFetching} onSelect={selectVehicle} onPage={(page) => setListOffset((page - 1) * listLimit)} onLimit={(next) => { setListLimit(next); setListOffset(0); }} />}
 
-      <section className="v2-event-strip">
+      <Card className="v2-event-strip" bodyStyle={{ padding: 0 }}>
         <strong>实时数据状态</strong>
-        <span><i className="is-online" />{vehicles.isFetching ? '正在刷新' : '实时车辆已同步'}</span>
+        <Tag className="v2-monitor-live-tag" color="green" type="light" size="small"><i className="is-online" />{vehicles.isFetching ? '正在刷新' : '实时车辆已同步'}</Tag>
         <span>{mode === 'map' ? `列表 ${visibleRows.length} 条 · 地图 ${map.data?.clusters.length ? `${map.data.clusters.length} 个聚合 + ${map.data.points.length} 个车辆点` : `${map.data?.points.length ?? 0} 个点`}` : `实时列表 ${realtimeListQuery.data?.items.length ?? 0} / ${realtimeListQuery.data?.total ?? 0} 辆`}</span>
-        <span className="v2-refresh-cadence"><b>智能刷新</b> 重点车辆 {MONITOR_REFRESH.selected / 1000} 秒 · 车队 {MONITOR_REFRESH.fleet / 1000} 秒 · 统计 {MONITOR_REFRESH.summary / 1000} 秒</span>
+        <span className="v2-refresh-cadence"><Tag color="blue" type="light" size="small">智能刷新</Tag>重点车辆 {MONITOR_REFRESH.selected / 1000} 秒 · 车队 {MONITOR_REFRESH.fleet / 1000} 秒 · 统计 {MONITOR_REFRESH.summary / 1000} 秒</span>
         <time>{new Date().toLocaleString('zh-CN', { hour12: false })}</time>
-      </section>
+      </Card>
       {mobileEntryOpen ? <MobileEntry onClose={() => setMobileEntryOpen(false)} /> : null}
     </div>
   );