diff --git a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx index c6faffa6..5778acc3 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx +++ b/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-secondary.semi-card-group')).toBeInTheDocument(); - expect(view.container.querySelectorAll('.v2-history-summary-card.semi-card')).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')).toHaveClass('v2-workspace-metric-rail', 'is-queue'); + expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveAttribute('aria-label', '历史数据查询统计信息'); + expect(view.container.querySelectorAll('.v2-history-summary-rail .v2-workspace-metric-list > span')).toHaveLength(4); + 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(); diff --git a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx index d65f0c94..450193fa 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx +++ b/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 = { - label: '结果行数', - value: summaryLoading ? '—' : (result?.total ?? 0).toLocaleString('zh-CN'), - note: summaryLoading ? '正在读取当前筛选范围' : `${resultSummary?.vehicleCount ?? 0} 辆车辆` - }; - const summarySecondary = [ + const historyMetrics: WorkspaceQueueMetricRailItem[] = [ + { + label: '结果行数', + value: summaryLoading ? '—' : (result?.total ?? 0).toLocaleString('zh-CN'), + note: summaryLoading ? '正在读取' : '当前范围', + tone: 'primary', + emphasis: 'primary' + }, { label: '车辆数', - value: summaryLoading ? '—' : String(resultSummary?.vehicleCount ?? 0), - note: `当前筛选 ${keywords.length} 个车辆标识`, - className: 'is-vehicles' + value: summaryLoading ? '—' : <>{resultSummary?.vehicleCount ?? 0}, + note: `${keywords.length} 个车辆标识`, + tone: 'success', + emphasis: 'primary' }, { label: '数据来源', - value: summaryLoading ? '—' : `${resultSummary?.sources?.length ?? 0} 个来源`, + value: summaryLoading ? '—' : <>{resultSummary?.sources?.length ?? 0}, note: summarySources, - className: 'is-sources' + tone: 'primary', + emphasis: 'secondary' }, { label: '查询耗时', - value: summaryLoading ? '—' : resultSummary ? `${resultSummary.queryDurationMs} ms` : '—', + value: summaryLoading ? '—' : resultSummary ? <>{resultSummary.queryDurationMs}ms : '—', note: `${visibleMetrics.length} / ${allMetrics.length} 个业务字段`, - className: 'is-duration' + tone: 'neutral', + emphasis: 'secondary' } ]; const historyFilterFields = <> @@ -536,13 +541,10 @@ export default function HistoryPage() { } {keywords.length ? : null} {dataQuery.isError ? dataQuery.refetch()} /> : null}
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 15205d47..b54a8a73 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/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; - } } /*