diff --git a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx index 32489bf5..49fa9182 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.test.tsx @@ -77,11 +77,11 @@ test('renders only the desktop matrix with dates as columns and a period total', expect(view.container.querySelector('.v2-mileage-page > .v2-page-heading')).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-mileage-summary')).toHaveClass('v2-workspace-metric-rail', 'is-queue'); expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveAttribute('aria-label', '里程查询统计信息'); - expect(view.container.querySelectorAll('.v2-mileage-summary .v2-workspace-metric-list > span')).toHaveLength(4); + expect(view.container.querySelectorAll('.v2-mileage-summary .v2-workspace-metric-list > span')).toHaveLength(3); expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list > span.is-primary')).toHaveTextContent('区间总里程193.3 km2 条车辆日记录'); expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('已绑定主车辆1 辆已选择 1 辆'); - expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('统计天数2 天2026/07/13 — 07/14'); expect(view.container.querySelector('.v2-mileage-summary .v2-workspace-metric-list')).toHaveTextContent('日均里程96.7 km按有效车辆日平均'); + expect(view.container.querySelector('.v2-mileage-summary-window')).toHaveTextContent('统计窗口2 天2026/07/13 — 07/14'); expect(view.container.querySelector('.v2-mileage-table-wrap')).toBeInTheDocument(); expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('0 km已上报、无里程增量'); expect(screen.getByRole('note', { name: '里程矩阵读表说明' })).toHaveTextContent('—无可用里程'); diff --git a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx index 6c9ecea7..a6f7d10f 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx @@ -328,13 +328,6 @@ function SummaryRail({ data, criteria, fleetTotal, loading }: { data?: MileageSt tone: 'success', emphasis: 'primary' }, - { - label: '统计天数', - value: withUnit(days, '天'), - note: summaryRange, - tone: 'neutral', - emphasis: 'secondary' - }, { label: '日均里程', value: loading ? '—' : withUnit(formatKm(data?.averageDailyMileageKm), 'km'), @@ -348,6 +341,11 @@ function SummaryRail({ data, criteria, fleetTotal, loading }: { data?: MileageSt className="v2-mileage-summary" ariaLabel="里程查询统计信息" items={items} + context={ + 统计窗口 + {days} 天 + {summaryRange} + } />; } 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 da3ea0da..23ebb439 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -15384,6 +15384,43 @@ box-shadow: none; } +.v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body { + grid-template-columns: minmax(0, 1fr) 218px; +} + +.v2-mileage-summary .v2-workspace-metric-list { + grid-template-columns: minmax(240px, 1.3fr) minmax(210px, 1fr) minmax(190px, .86fr); +} + +.v2-mileage-summary .v2-workspace-metric-list > span:first-child { + background: linear-gradient(145deg, #f3f8ff 0%, #f8fbff 100%); + box-shadow: inset 3px 0 #2563eb; +} + +.v2-mileage-summary .v2-workspace-metric-list > span:first-child > strong { + color: #0f5fc7; + font-size: clamp(22px, 2vw, 28px); + letter-spacing: -.035em; +} + +.v2-mileage-summary .v2-workspace-metric-context { + background: #f8fafc; + padding-inline: 14px; +} + +.v2-mileage-summary-window { + width: 100%; +} + +.v2-mileage-summary-window strong { + color: #334b66; +} + +.v2-mileage-summary-window em { + color: #7f8ea1; + font-variant-numeric: tabular-nums; +} + .v2-mileage-summary > .semi-card-body > .v2-mileage-summary-card.is-primary > .semi-card-body { background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%); } @@ -15693,6 +15730,14 @@ min-width: 52px; flex: 1 1 0; } + + .v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body { + grid-template-columns: minmax(0, 1fr) 190px; + } + + .v2-mileage-summary .v2-workspace-metric-list { + grid-template-columns: minmax(210px, 1.2fr) minmax(180px, 1fr) minmax(155px, .82fr); + } } @media (max-width: 680px) { @@ -15733,6 +15778,18 @@ border-radius: 10px; } + .v2-mileage-summary.v2-workspace-metric-rail.is-queue.has-context > .semi-card-body { + grid-template-columns: minmax(0, 1fr); + } + + .v2-mileage-summary .v2-workspace-metric-list { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .v2-mileage-summary .v2-workspace-metric-list > span:first-child > strong { + font-size: 19px; + } + .v2-mileage-query-panel .v2-mileage-vehicle-field > small { display: block; } @@ -24817,7 +24874,7 @@ } .v2-mileage-summary .v2-workspace-metric-list { - grid-template-columns: 1.3fr 1.1fr .9fr .9fr; + grid-template-columns: minmax(240px, 1.3fr) minmax(210px, 1fr) minmax(190px, .86fr); } .v2-mileage-summary .v2-workspace-metric-list > span {