unify Semi UI protocol evidence

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

@@ -11,6 +11,7 @@ import { formatShanghaiDateTime } from '../domain/formatters';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
 import { PlatformTime } from '../shared/PlatformTime';
+import { ProtocolTag } from '../shared/ProtocolTag';
 import { TablePagination } from '../shared/TablePagination';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
@@ -44,11 +45,6 @@ function HistoryQualityTag({ quality }: { quality: string }) {
   return <Tag className="v2-history-quality-tag" color={color} type="light" size="small">{historyQualityLabel(quality)}</Tag>;
 }
 
-function HistoryProtocolTag({ protocol }: { protocol: string }) {
-  const color = protocol === 'GB32960' ? 'blue' : protocol === 'JT808' ? 'cyan' : protocol === 'YUTONG_MQTT' ? 'violet' : 'grey';
-  return <Tag className="v2-history-protocol-tag" color={color} type="light" size="small">{protocol || '未知来源'}</Tag>;
-}
-
 function HistoryTrend({ response, category, loading, error, hasMetrics, expanded, onToggle }: {
   response?: HistorySeriesResponse;
   category: string;
@@ -162,7 +158,7 @@ function EvidencePanel({ row, metrics, onClose, showHeader = true }: { row?: His
         <small>{row.qualityReason || '平台未返回质量说明'}</small>
       </div>
       <div>
-        <HistoryProtocolTag protocol={row.protocol} />
+        <ProtocolTag className="v2-history-protocol-tag" protocol={row.protocol} />
         <PlatformTime className="v2-history-time" value={row.deviceTime} />
       </div>
     </div><Descriptions className="v2-history-evidence-descriptions" align="left" size="small" data={[
@@ -170,7 +166,7 @@ function EvidencePanel({ row, metrics, onClose, showHeader = true }: { row?: His
       { key: 'VIN', value: row.vin },
       { key: '设备时间', value: <PlatformTime className="v2-history-time" value={row.deviceTime} /> },
       { key: '服务时间', value: <PlatformTime className="v2-history-time" value={row.serverTime} /> },
-      { key: '数据来源', value: <HistoryProtocolTag protocol={row.protocol} /> },
+      { key: '数据来源', value: <ProtocolTag className="v2-history-protocol-tag" protocol={row.protocol} /> },
       { key: '数据质量', value: <HistoryQualityTag quality={row.quality} /> },
       { key: '质量原因', value: row.qualityReason || '平台未返回质量说明' }
     ]} />
@@ -226,7 +222,7 @@ function HistoryDataTable({ rows, metrics, selectedRowID, onSelect }: { rows: Hi
     { title: '车牌', dataIndex: 'plate', width: 110, fixed: 'left' as const, className: 'v2-history-plate-column', render: (value: string) => value || '—' },
     { title: '服务时间', dataIndex: 'serverTime', width: 150, render: (value: string) => <PlatformTime className="v2-history-time" value={value} /> },
     { title: 'VIN', dataIndex: 'vin', width: 160, render: (value: string) => <span className="v2-history-vin" title={value}>{value}</span> },
-    { title: '协议', dataIndex: 'protocol', width: 110, render: (value: string) => <HistoryProtocolTag protocol={value} /> },
+    { title: '协议', dataIndex: 'protocol', width: 118, render: (value: string) => <ProtocolTag className="v2-history-protocol-tag" protocol={value} compact /> },
     ...metrics.map((metric) => ({
       title: `${metric.label}${metric.unit ? ` (${metric.unit})` : ''}`,
       dataIndex: metric.key,
@@ -485,7 +481,7 @@ export default function HistoryPage() {
             onKeyDown={scrollHistoryTable}
           >
             {mobileLayout
-              ? <div className="v2-history-mobile-list">{resultRows.map((row) => <Card key={row.id} className={`v2-history-mobile-card${selectedRow?.id === row.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}><Button theme="borderless" type="tertiary" className="v2-history-mobile-action" aria-pressed={selectedRow?.id === row.id} aria-expanded={selectedRow?.id === row.id} aria-label={`查看 ${row.plate || row.vin} ${row.deviceTime} 数据详情`} onClick={() => selectRow(row)}><span className="v2-history-mobile-card-content"><header><span><strong>{row.plate || '未绑定车牌'}</strong><small>{row.vin}</small></span><span className={`v2-quality is-${row.quality}`}><i />{historyQualityLabel(row.quality)}</span></header><span className="v2-history-mobile-meta"><PlatformTime className="v2-history-time" value={row.deviceTime} /><HistoryProtocolTag protocol={row.protocol} /></span>{isHealthyHistoryQuality(row.quality) ? null : <small className="v2-history-mobile-quality">{row.qualityReason || '平台未返回质量说明'}</small>}<dl>{visibleMetrics.slice(0, 4).map((metric) => <div key={metric.key}><dt>{metric.label}</dt><dd>{formatHistoryValue(row.values[metric.key], metric)}</dd></div>)}</dl><footer>查看完整详情<IconChevronRight /></footer></span></Button></Card>)}</div>
+              ? <div className="v2-history-mobile-list">{resultRows.map((row) => <Card key={row.id} className={`v2-history-mobile-card${selectedRow?.id === row.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}><Button theme="borderless" type="tertiary" className="v2-history-mobile-action" aria-pressed={selectedRow?.id === row.id} aria-expanded={selectedRow?.id === row.id} aria-label={`查看 ${row.plate || row.vin} ${row.deviceTime} 数据详情`} onClick={() => selectRow(row)}><span className="v2-history-mobile-card-content"><header><span><strong>{row.plate || '未绑定车牌'}</strong><small>{row.vin}</small></span><span className={`v2-quality is-${row.quality}`}><i />{historyQualityLabel(row.quality)}</span></header><span className="v2-history-mobile-meta"><PlatformTime className="v2-history-time" value={row.deviceTime} /><ProtocolTag className="v2-history-protocol-tag" protocol={row.protocol} compact /></span>{isHealthyHistoryQuality(row.quality) ? null : <small className="v2-history-mobile-quality">{row.qualityReason || '平台未返回质量说明'}</small>}<dl>{visibleMetrics.slice(0, 4).map((metric) => <div key={metric.key}><dt>{metric.label}</dt><dd>{formatHistoryValue(row.values[metric.key], metric)}</dd></div>)}</dl><footer>查看完整详情<IconChevronRight /></footer></span></Button></Card>)}</div>
               : <HistoryDataTable rows={resultRows} metrics={visibleMetrics} selectedRowID={selectedRow?.id} onSelect={selectRow} />}
             {dataQuery.isPending && keywords.length
               ? <PanelLoading className="v2-history-loading" title="正在加载当前筛选范围的历史数据" description="按车辆、时间和协议整理可追溯证据。" />