feat: unify history metrics with semi ui

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

@@ -122,10 +122,13 @@ test('clears stale rows, charts, and evidence as soon as the history scope chang
   expect(view.container.querySelector('.v2-history-discovery-shell')).toContainElement(screen.getByLabelText('历史数据查询操作'));
   expect(screen.getByLabelText('历史数据查询操作')).toHaveTextContent('遥测证据检索');
   expect(screen.getByLabelText('历史数据查询操作')).toHaveTextContent('上海时区');
-  expect(view.container.querySelector('.v2-history-summary-rail')).toHaveAttribute('aria-label', '历史数据查询统计信息');
+  expect(view.container.querySelector('.v2-history-summary-rail')).toHaveClass('v2-workspace-metric-rail', 'is-queue');
-  expect(view.container.querySelector('.v2-history-summary-secondary.semi-card-group')).toBeInTheDocument();
+  expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveAttribute('aria-label', '历史数据查询统计信息');
-  expect(view.container.querySelectorAll('.v2-history-summary-card.semi-card')).toHaveLength(4);
+  expect(view.container.querySelectorAll('.v2-history-summary-rail .v2-workspace-metric-list > span')).toHaveLength(4);
-  expect(view.container.querySelector('.v2-history-summary-card.is-primary .v2-history-summary-value')).toHaveTextContent('1');
+  expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary')).toHaveTextContent('结果行数1当前范围');
+  expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('车辆数1辆1 个车辆标识');
+  expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('数据来源1路JT808');
+  expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('查询耗时12ms1 / 1 个业务字段');
   expect(screen.getByText('1 / 1 字段').closest('.semi-tag')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-history-result-actions.v2-workspace-panel-actions')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-history-evidence')).not.toBeInTheDocument();

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

@@ -18,7 +18,7 @@ import { TablePagination } from '../shared/TablePagination';
 import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
 import { WorkspaceDetailSideSheet } from '../shared/WorkspaceDetailSideSheet';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
-import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail';
+import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
 import { detailTriggerRow } from '../shared/detailTriggerRow';
@@ -444,29 +444,34 @@ export default function HistoryPage() {
   const page = Math.floor(offset / limit) + 1;
   const summarySources = resultSummary?.sources?.join('、') || '—';
   const summaryLoading = keywords.length > 0 && dataQuery.isFetching && !result;
-  const summaryPrimary = {
+  const historyMetrics: WorkspaceQueueMetricRailItem[] = [
+    {
       label: '结果行数',
       value: summaryLoading ? '—' : (result?.total ?? 0).toLocaleString('zh-CN'),
-    note: summaryLoading ? '正在读取当前筛选范围' : `${resultSummary?.vehicleCount ?? 0} 辆车辆`
+      note: summaryLoading ? '正在读取' : '当前范围',
-  };
+      tone: 'primary',
-  const summarySecondary = [
+      emphasis: 'primary'
+    },
     {
       label: '车辆数',
-      value: summaryLoading ? '—' : String(resultSummary?.vehicleCount ?? 0),
+      value: summaryLoading ? '—' : <>{resultSummary?.vehicleCount ?? 0}<i className="v2-history-summary-unit">辆</i></>,
-      note: `当前筛选 ${keywords.length} 个车辆标识`,
+      note: `${keywords.length} 个车辆标识`,
-      className: 'is-vehicles'
+      tone: 'success',
+      emphasis: 'primary'
     },
     {
       label: '数据来源',
-      value: summaryLoading ? '—' : `${resultSummary?.sources?.length ?? 0} 个来源`,
+      value: summaryLoading ? '—' : <>{resultSummary?.sources?.length ?? 0}<i className="v2-history-summary-unit">路</i></>,
       note: summarySources,
-      className: 'is-sources'
+      tone: 'primary',
+      emphasis: 'secondary'
     },
     {
       label: '查询耗时',
-      value: summaryLoading ? '—' : resultSummary ? `${resultSummary.queryDurationMs} ms` : '—',
+      value: summaryLoading ? '—' : resultSummary ? <>{resultSummary.queryDurationMs}<i className="v2-history-summary-unit">ms</i></> : '—',
       note: `${visibleMetrics.length} / ${allMetrics.length} 个业务字段`,
-      className: 'is-duration'
+      tone: 'neutral',
+      emphasis: 'secondary'
     }
   ];
   const historyFilterFields = <>
@@ -536,13 +541,10 @@ export default function HistoryPage() {
       </WorkspaceFilterPanel>}
     </div>
     {keywords.length ? <WorkspaceMetricRail
+      variant="queue"
       className="v2-history-summary-rail"
-      cardClassName="v2-history-summary-card"
-      secondaryClassName="v2-history-summary-secondary"
-      primaryValueClassName="v2-history-summary-value"
       ariaLabel="历史数据查询统计信息"
-      primary={summaryPrimary}
+      items={historyMetrics}
-      secondary={summarySecondary}
     /> : null}
     {dataQuery.isError ? <InlineError message={dataQuery.error instanceof Error ? dataQuery.error.message : '历史查询失败'} onRetry={() => dataQuery.refetch()} /> : null}
     <div className={`v2-history-workspace${selectedRow && !mobileLayout ? ' is-inspector-open' : ''}`}>

vehicle-data-platform/apps/web/src/v2/styles/workspace.css

@@ -15192,121 +15192,6 @@
   }
 }
 
-/*
- * Shared Semi UI metric rail applied to history data.
- * The rail mirrors the mileage workspace: one primary outcome, then three
- * supporting facts. Empty history screens omit the rail entirely.
- */
-.v2-history-summary-rail.semi-card {
-  min-width: 0;
-  min-height: 88px;
-  flex: 0 0 auto;
-  overflow: hidden;
-  border: 1px solid #d8e3ef;
-  border-radius: 12px;
-  background: #fff;
-  box-shadow: 0 8px 26px rgba(31, 53, 80, .05);
-}
-
-.v2-history-summary-rail > .semi-card-body {
-  display: grid;
-  min-height: 88px;
-  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.72fr);
-}
-
-.v2-history-summary-card.semi-card {
-  min-width: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  box-shadow: none;
-}
-
-.v2-history-summary-card > .semi-card-body {
-  position: relative;
-  display: flex;
-  min-width: 0;
-  height: 100%;
-  justify-content: center;
-  flex-direction: column;
-  padding: 11px 16px !important;
-}
-
-.v2-history-summary-card.is-primary > .semi-card-body {
-  overflow: hidden;
-  background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
-}
-
-.v2-history-summary-card.is-primary > .semi-card-body::after {
-  position: absolute;
-  top: -80px;
-  right: -44px;
-  width: 180px;
-  height: 180px;
-  border: 26px solid rgba(255, 255, 255, .08);
-  border-radius: 50%;
-  content: "";
-  pointer-events: none;
-}
-
-.v2-history-summary-card small,
-.v2-history-summary-card span {
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-  color: #7c8a9d;
-  font-size: 10px;
-  line-height: 1.35;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.v2-history-summary-card strong {
-  position: relative;
-  z-index: 1;
-  margin: 5px 0 4px;
-  overflow: hidden;
-  color: #22354d;
-  font-size: clamp(18px, 1.45vw, 24px);
-  font-variant-numeric: tabular-nums;
-  font-weight: 760;
-  line-height: 1.08;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.v2-history-summary-card.is-primary :is(small,strong,span) {
-  color: #fff;
-}
-
-.v2-history-summary-card.is-primary small,
-.v2-history-summary-card.is-primary span {
-  color: rgba(255, 255, 255, .72);
-}
-
-.v2-history-summary-card.is-primary .v2-history-summary-value {
-  font-size: clamp(25px, 2.1vw, 34px);
-  letter-spacing: -.035em;
-}
-
-.v2-history-summary-secondary.semi-card-group {
-  display: grid;
-  min-width: 0;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
-.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
-  position: absolute;
-  inset: 18px auto 18px 0;
-  width: 1px;
-  background: #e3eaf2;
-  content: "";
-}
-
-.v2-history-summary-card.is-sources strong {
-  font-size: clamp(13px, 1.05vw, 17px);
-}
-
 .v2-history-result-meta {
   display: inline-flex;
   min-width: 0;
@@ -15317,6 +15202,19 @@
   font-variant-numeric: tabular-nums;
 }
 
+.v2-history-summary-unit {
+  margin-left: 3px;
+  color: #8493a5;
+  font-size: 8px;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0;
+}
+
+.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary .v2-history-summary-unit {
+  color: #6f90bb;
+}
+
 .v2-history-discovery-shell {
   display: grid;
   min-width: 0;
@@ -15577,16 +15475,6 @@
   font-size: 9px;
 }
 
-@media (max-width: 900px) and (min-width: 681px) {
-  .v2-history-summary-rail > .semi-card-body {
-    grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr);
-  }
-
-  .v2-history-summary-card > .semi-card-body {
-    padding-inline: 12px !important;
-  }
-}
-
 @media (max-width: 680px) {
   .v2-history-discovery-shell {
     display: contents;
@@ -15682,65 +15570,6 @@
     max-width: 205px;
   }
 
-  .v2-history-summary-rail.semi-card {
-    min-height: 132px;
-    overflow: visible;
-    border: 0;
-    border-radius: 0;
-    background: transparent;
-    box-shadow: none;
-  }
-
-  .v2-history-summary-rail > .semi-card-body {
-    min-height: 132px;
-    grid-template-columns: 1fr;
-    grid-template-rows: 70px 58px;
-    gap: 4px;
-  }
-
-  .v2-history-summary-card.is-primary.semi-card,
-  .v2-history-summary-card.is-primary > .semi-card-body {
-    min-height: 70px;
-    border-radius: 10px;
-  }
-
-  .v2-history-summary-card.is-primary > .semi-card-body {
-    padding: 7px 13px 8px !important;
-  }
-
-  .v2-history-summary-card.is-primary .v2-history-summary-value {
-    margin-block: 2px 1px;
-    font-size: 24px;
-    line-height: 27px;
-  }
-
-  .v2-history-summary-secondary.semi-card-group {
-    min-height: 58px;
-    overflow: hidden;
-    border: 1px solid #dfe7f0;
-    border-radius: 10px;
-    background: #fff;
-  }
-
-  .v2-history-summary-secondary .v2-history-summary-card > .semi-card-body {
-    min-height: 58px;
-    padding: 7px 8px !important;
-  }
-
-  .v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
-    inset-block: 8px;
-  }
-
-  .v2-history-summary-secondary .v2-history-summary-card small,
-  .v2-history-summary-secondary .v2-history-summary-card span {
-    font-size: 8px;
-  }
-
-  .v2-history-summary-secondary .v2-history-summary-card strong,
-  .v2-history-summary-secondary .v2-history-summary-card.is-sources strong {
-    margin-block: 2px 1px;
-    font-size: 14px;
-  }
 }
 
 /*