From fe056019eb1e5a41a798abba0465095c2ceb817d Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 18 Jul 2026 14:44:57 +0800 Subject: [PATCH] refine Semi UI mileage workspace --- .../web/src/v2/pages/StatisticsPage.test.tsx | 6 +- .../apps/web/src/v2/pages/StatisticsPage.tsx | 56 +++++++++++-------- .../apps/web/src/v2/productionEntry.test.ts | 2 +- .../apps/web/src/v2/styles/workspace.css | 52 +++++++++++++++-- 4 files changed, 88 insertions(+), 28 deletions(-) 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 a078a0be..bccac7a7 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 @@ -48,9 +48,12 @@ test('renders only the desktop matrix with dates as columns and a period total', expect(screen.getAllByText('7/13').length).toBeGreaterThan(0); expect(screen.getAllByText('7/14').length).toBeGreaterThan(0); expect(screen.getAllByText('粤A12345').length).toBeGreaterThan(0); + expect(screen.getByLabelText('里程查询工作区')).toHaveClass('v2-workspace-command-bar', 'v2-mileage-command-bar'); + expect(screen.getByRole('heading', { name: '车辆里程分析', level: 5 })).toBeInTheDocument(); + expect(screen.getByLabelText('里程查询工作区')).toHaveTextContent('GB32960 优先'); expect(screen.getByRole('heading', { name: '里程范围', level: 5 })).toBeInTheDocument(); expect(screen.getByText('车牌、自然日与里程数据源策略')).toBeInTheDocument(); - expect(screen.getByText('1 辆 · 2 天').closest('.semi-tag')).toBeInTheDocument(); + expect(screen.getAllByText('1 辆 · 2 天').some((element) => element.closest('.semi-tag'))).toBe(true); expect(screen.queryByText('当日起始里程')).not.toBeInTheDocument(); expect(screen.queryByText('数据来源')).not.toBeInTheDocument(); expect(screen.queryByRole('img', { name: '每日行驶里程趋势图' })).not.toBeInTheDocument(); @@ -60,6 +63,7 @@ test('renders only the desktop matrix with dates as columns and a period total', expect(screen.getByText('已绑定主车辆').closest('.semi-card')).toHaveClass('v2-mileage-summary-card'); expect(screen.getByText('车辆每日里程').closest('.semi-card')).toHaveClass('v2-mileage-results'); expect(view.container.querySelector('.v2-mileage-query-panel.semi-card')).toBeInTheDocument(); + expect(view.container.querySelector('.v2-mileage-discovery-shell > .v2-mileage-command-bar')).toBeInTheDocument(); expect(view.container.querySelector('.v2-mileage-page > .v2-page-heading')).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-mileage-summary.semi-card')).toHaveAttribute('aria-label', '里程查询统计信息'); expect(view.container.querySelector('.v2-mileage-summary-secondary.semi-card-group')).toBeInTheDocument(); 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 4e451d30..225b3465 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/StatisticsPage.tsx @@ -13,6 +13,7 @@ import { TablePagination } from '../shared/TablePagination'; import { VehicleCandidateList } from '../shared/VehicleCandidateList'; import { mergeVehicleCandidates } from '../shared/vehicleCandidates'; import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel'; +import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar'; import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail'; import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader'; import { QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy'; @@ -534,28 +535,39 @@ export default function StatisticsPage() { return
- setFiltersCollapsed((value) => !value)} - > -
- setDraft((current) => ({ ...current, vehicles }))} /> - - - - setDraft((current) => ({ ...current, sources }))} /> -
快捷范围
- - {validationError || criteriaError ?

{validationError || criteriaError}

: null} - -
+
+ {criteria.sources.find((source) => source.enabled)?.protocol ?? '未配置'} 优先} + /> + setFiltersCollapsed((value) => !value)} + > +
+ setDraft((current) => ({ ...current, vehicles }))} /> + + + + setDraft((current) => ({ ...current, sources }))} /> +
快捷范围
+ + {validationError || criteriaError ?

{validationError || criteriaError}

: null} + +
+
{statistics.isError || mileage.isError || fleetVehicles.isError ? { statistics.refetch(); mileage.refetch(); if (!hasVehicles) fleetVehicles.refetch(); }} /> : null} { expect(corePageSources[name]).not.toContain("from '../shared/PageHeader'"); expect(corePageSources[name]).not.toContain(' .v2-mileage-command-bar { + width: 100%; + max-width: none; + height: 46px; + min-height: 46px; + border: 0; + border-bottom: 1px solid #e3eaf2; + border-radius: 14px 14px 0 0; + padding-inline: 13px 10px; + box-shadow: none; +} + +.v2-mileage-command-bar .v2-workspace-command-meta { + color: #748499; + font-size: 10px; + font-variant-numeric: tabular-nums; +} + +.v2-mileage-query-panel.v2-workspace-filter-panel.semi-card { + width: 100%; + overflow: visible; + border: 0; + border-radius: 0 0 14px 14px; + box-shadow: none; +} + +.v2-mileage-discovery-shell > .v2-mileage-query-panel > .semi-card-body > .v2-workspace-filter-heading { + display: none; } .v2-mileage-query-panel .v2-workspace-filter-heading { @@ -12560,7 +12595,16 @@ padding: 8px; } + .v2-mileage-discovery-shell { + display: contents; + } + + .v2-mileage-discovery-shell > .v2-mileage-command-bar { + display: none; + } + .v2-mileage-query-panel.v2-workspace-filter-panel.semi-card { + border: 1px solid #d8e3ef; border-radius: 11px; box-shadow: 0 5px 18px rgba(31, 53, 80, .05); }