refine Semi UI mileage workspace

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();

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,6 +535,16 @@ export default function StatisticsPage() {
 
   return <div className="v2-mileage-page" ref={pageRef}>
     <MonitorReturnBar />
+    <div className="v2-mileage-discovery-shell">
+      <WorkspaceCommandBar
+        className="v2-mileage-command-bar"
+        ariaLabel="里程查询工作区"
+        title="车辆里程分析"
+        description="按自然日对比车辆行驶里程与协议来源"
+        status={`${criteria.vehicles.length ? `${criteria.vehicles.length} 辆` : '全部授权车辆'} · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`}
+        statusColor={criteria.vehicles.length ? 'blue' : 'grey'}
+        meta={<span>{criteria.sources.find((source) => source.enabled)?.protocol ?? '未配置'} 优先</span>}
+      />
       <WorkspaceFilterPanel
         className="v2-mileage-query-panel"
         title="里程范围"
@@ -556,6 +567,7 @@ export default function StatisticsPage() {
         {validationError || criteriaError ? <p className="v2-mileage-validation" role="alert">{validationError || criteriaError}</p> : null}
         <SummaryRail data={statistics.data} criteria={criteria} fleetTotal={fleetVehicles.data?.total} loading={statistics.isLoading} />
       </WorkspaceFilterPanel>
+    </div>
     {statistics.isError || mileage.isError || fleetVehicles.isError ? <InlineError message={(statistics.error ?? mileage.error ?? fleetVehicles.error) instanceof Error ? (statistics.error ?? mileage.error ?? fleetVehicles.error as Error).message : '里程数据加载失败'} onRetry={() => { statistics.refetch(); mileage.refetch(); if (!hasVehicles) fleetVehicles.refetch(); }} /> : null}
     <Card className="v2-mileage-results" bodyStyle={{ padding: 0 }}>
       <WorkspacePanelHeader

vehicle-data-platform/apps/web/src/v2/productionEntry.test.ts

@@ -63,7 +63,7 @@ describe('V2 production entry', () => {
       expect(corePageSources[name]).not.toContain("from '../shared/PageHeader'");
       expect(corePageSources[name]).not.toContain('<PageHeader');
     }
-    for (const name of ['VehiclePage', 'TrackPage', 'AccessPage', 'OperationsPage', 'UsersPage']) {
+    for (const name of ['VehiclePage', 'TrackPage', 'AccessPage', 'OperationsPage', 'StatisticsPage', 'UsersPage']) {
       expect(corePageSources[name]).toContain("from '../shared/WorkspaceCommandBar'");
       expect(corePageSources[name]).toContain('<WorkspaceCommandBar');
     }

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

@@ -12194,11 +12194,46 @@
   padding: 14px 18px 16px;
 }
 
-.v2-mileage-query-panel.v2-workspace-filter-panel.semi-card {
+.v2-mileage-discovery-shell {
+  display: grid;
+  min-width: 0;
+  flex: 0 0 auto;
+  gap: 0;
   overflow: visible;
-  border-color: #d8e3ef;
-  border-radius: 12px;
-  box-shadow: 0 8px 26px rgba(31, 53, 80, .055);
+  border: 1px solid #d8e3ef;
+  border-radius: 14px;
+  background: #fff;
+  box-shadow: 0 9px 28px rgba(31, 53, 80, .055);
+}
+
+.v2-mileage-discovery-shell > .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);
   }