feat(web): refine track and mileage workspaces

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

@@ -55,9 +55,8 @@ 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.queryByLabelText('里程查询工作区')).not.toBeInTheDocument();
-  expect(screen.getByRole('heading', { name: '车辆里程分析', level: 5 })).toBeInTheDocument();
+  expect(screen.queryByRole('heading', { name: '车辆里程分析' })).not.toBeInTheDocument();
-  expect(screen.getByLabelText('里程查询工作区')).toHaveTextContent('GB32960 优先');
   expect(screen.getByRole('heading', { name: '里程范围', level: 5 })).toBeInTheDocument();
   expect(screen.getByText('车牌、自然日与里程数据源策略')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-mileage-date-range.semi-datepicker')).toBeInTheDocument();
@@ -74,7 +73,7 @@ test('renders only the desktop matrix with dates as columns and a period total',
   expect(screen.getByText('已绑定主车辆').closest('[role="listitem"]')).toHaveClass('is-primary', 'is-success');
   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-discovery-shell > .v2-mileage-command-bar')).not.toBeInTheDocument();
   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', '里程查询统计信息');

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

@@ -15,7 +15,6 @@ 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, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
@@ -705,15 +704,6 @@ 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>}
-      />
       {mobileLayout ? <div className="v2-mileage-mobile-discovery">
         <MobileFilterToggle
           title="里程范围"

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

@@ -225,7 +225,7 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
 
   fireEvent.click(screen.getByRole('tab', { name: '概览' }));
   expect(view.container.querySelectorAll('.v2-track-overview-section')).toHaveLength(3);
-  expect(view.container.querySelectorAll('.v2-track-overview-section.semi-card')).toHaveLength(0);
+  expect(view.container.querySelectorAll('.v2-track-overview-section.semi-card')).toHaveLength(3);
   expect(view.container.querySelector('.v2-track-overview-descriptions.semi-descriptions')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-source-list.semi-list')).toBeInTheDocument();
   expect(view.container.querySelectorAll('.v2-track-source-item.semi-list-item')).toHaveLength(1);

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

@@ -11,7 +11,7 @@ import type { TrackPlaybackEvent, TrackPlaybackResponse, VehicleRow } from '../.
 import { protocolDisplayLabel } from '../domain/protocols';
 import { buildTrackRailSelection, compactTrackWindowLabel, downloadTrackCsv, formatDuration, sampledEventIndex, TRACK_ADDRESS_SETTLE_MS, trackAddressCoordinate, trackPlaybackInterval, trackPointMileageAvailable, type TrackAddressCoordinate } from '../domain/track';
 import { TrackMap } from '../map/TrackMap';
-import { InlineError, PanelEmpty, WorkspaceEmptyGuide } from '../shared/AsyncState';
+import { InlineError, PanelEmpty, PanelLoading, WorkspaceEmptyGuide } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
 import { ProtocolTag } from '../shared/ProtocolTag';
 import { SegmentedTabs } from '../shared/SegmentedTabs';
@@ -210,7 +210,7 @@ function VehiclePicker({ value, onChange, onSelect }: { value: string; onChange:
 function OverviewPanel({ track }: { track: TrackPlaybackResponse }) {
   const distanceLabel = track.summary.distanceMethod === 'coordinates' ? 'GPS 轨迹累计' : track.summary.distanceMethod === 'odometer' ? '协议总里程差' : '行驶里程';
   return <div className="v2-track-overview-panel">
-    <section className="v2-track-overview-section">
+    <Card className="v2-track-overview-section v2-track-overview-card" bodyStyle={{ padding: 0 }}>
       <WorkspacePanelHeader variant="compact" title="行程概览" meta={<Tag color={track.sampled ? 'orange' : 'green'} type="light" size="small">{track.sampled ? '地图已抽稀' : '完整点集'}</Tag>} />
       <div className="v2-track-overview-card-body"><Descriptions className="v2-track-overview-descriptions" align="left" size="small" data={[
         { key: '开始时间', value: dateTime(track.summary.startTime) },
@@ -220,15 +220,15 @@ function OverviewPanel({ track }: { track: TrackPlaybackResponse }) {
         { key: '平均 / 最高速度', value: `${number(track.summary.averageSpeedKmh)} / ${number(track.summary.maximumSpeedKmh)} km/h` },
         { key: '停车 / 分段', value: `${track.summary.stopCount} / ${track.summary.segmentCount}` }
       ]} /></div>
-    </section>
+    </Card>
-    <section className="v2-track-overview-section v2-track-source-card">
+    <Card className="v2-track-overview-section v2-track-overview-card v2-track-source-card" bodyStyle={{ padding: 0 }}>
       <WorkspacePanelHeader variant="compact" title="数据来源" meta={<Tag color="blue" type="light" size="small">{track.coverage.totalPoints.toLocaleString('zh-CN')} 个源点</Tag>} />
       <div className="v2-track-overview-card-body"><List className="v2-track-source-list">{track.sources.map((source) => <List.Item className="v2-track-source-item" key={source.protocol}><ProtocolTag className="v2-track-protocol-tag" protocol={source.protocol} compact /><strong>{source.pointCount.toLocaleString('zh-CN')} 点</strong><small>{time(source.startTime)}–{time(source.endTime)}</small></List.Item>)}</List></div>
-    </section>
+    </Card>
-    <section className={`v2-track-overview-section v2-track-quality-card is-${track.quality.status}`}>
+    <Card className={`v2-track-overview-section v2-track-overview-card v2-track-quality-card is-${track.quality.status}`} bodyStyle={{ padding: 0 }}>
       <WorkspacePanelHeader variant="compact" title="轨迹质量" meta={<Tag color={track.quality.status === 'good' ? 'green' : 'orange'} type="light" size="small">{track.quality.status === 'good' ? '通过' : '需关注'}</Tag>} />
       <div className="v2-track-overview-card-body"><p>{track.quality.evidence}</p><small>无效 {track.quality.invalidCoordinatePoints} · 重复 {track.quality.duplicatePoints} · 漂移 {track.quality.driftPoints} · 大间隔 {track.quality.largeGapCount}</small></div>
-    </section>
+    </Card>
   </div>;
 }
 
@@ -538,7 +538,7 @@ export default function TrackPage() {
         action={<Button theme="solid" icon={<IconSearch />} onClick={() => setRailCollapsed(false)}>选择车辆</Button>}
       /></Card>}
 
-      {query.isFetching ? <div className="v2-track-loading"><span className="v2-spinner" />正在读取并加工历史轨迹</div> : null}
+      {query.isFetching ? <PanelLoading className="v2-track-loading" compact title="正在生成轨迹" description="正在校验来源覆盖并整理停留与事件证据。" /> : null}
       {query.isError ? <div className="v2-track-error"><InlineError message={query.error instanceof Error ? query.error.message : '轨迹查询失败'} onRetry={() => query.refetch()} /></div> : null}
 
       <Card className="v2-track-playback-dock" bodyStyle={{ padding: 0 }}>

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

@@ -69,7 +69,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', 'StatisticsPage', 'UsersPage']) {
+    for (const name of ['VehiclePage', 'TrackPage', 'AccessPage', 'OperationsPage', 'UsersPage']) {
       expect(corePageSources[name]).toContain("from '../shared/WorkspaceCommandBar'");
       expect(corePageSources[name]).toContain('<WorkspaceCommandBar');
     }
@@ -446,7 +446,7 @@ describe('V2 production entry', () => {
     expect(corePageSources.TrackPage).toContain('<Card className="v2-track-current-card"');
     expect(corePageSources.TrackPage).toContain('<Card className="v2-track-empty-state"');
     expect(corePageSources.TrackPage).toContain('<Card className="v2-track-playback-dock"');
-    expect(corePageSources.TrackPage).toContain('<section className="v2-track-overview-section">');
+    expect(corePageSources.TrackPage).toContain('<Card className="v2-track-overview-section v2-track-overview-card"');
     expect(corePageSources.TrackPage).toContain('<Descriptions className="v2-track-overview-descriptions"');
     expect(corePageSources.TrackPage).toContain('<PanelEmpty className="v2-track-rail-empty"');
     expect(corePageSources.TrackPage).toContain('<List className="v2-track-evidence-list v2-track-stop-list"');
@@ -462,12 +462,14 @@ describe('V2 production entry', () => {
     expect(corePageSources.TrackPage).toContain("primaryAction={{ label: '查看地图'");
     expect(corePageSources.TrackPage).not.toContain('useSideSheetA11y(mobileLayout');
     expect(corePageSources.TrackPage).not.toContain('<Card className="v2-track-overview-card"><header><strong>行程概览</strong><Tag color={track.sampled ? \'orange\' : \'green\'} type="light" size="small">{track.sampled ? \'地图已抽稀\' : \'完整点集\'}</Tag></header><dl>');
-    expect(corePageSources.TrackPage).toContain('<section className="v2-track-overview-section v2-track-source-card">');
+    expect(corePageSources.TrackPage).toContain('<Card className="v2-track-overview-section v2-track-overview-card v2-track-source-card"');
     expect(corePageSources.TrackPage).toContain('<List className="v2-track-source-list"');
     expect(corePageSources.TrackPage).toContain('<List.Item className="v2-track-source-item"');
     expect(corePageSources.TrackPage).not.toContain('<Card className="v2-track-source-item"');
-    expect(corePageSources.TrackPage).toContain('<section className={`v2-track-overview-section v2-track-quality-card');
+    expect(corePageSources.TrackPage).toContain('<Card className="v2-track-overview-section v2-track-overview-card"');
-    expect(corePageSources.TrackPage).not.toContain('<section className={`v2-track-quality-card');
+    expect(corePageSources.TrackPage).toContain('<Card className={`v2-track-overview-section v2-track-overview-card v2-track-quality-card');
+    expect(corePageSources.TrackPage).toContain('<PanelLoading className="v2-track-loading"');
+    expect(corePageSources.TrackPage).not.toContain('<span className="v2-spinner"');
     expect(corePageSources.TrackPage).not.toContain('<article key={source.protocol}');
     expect(corePageSources.TrackPage).not.toContain('<article className="v2-track-current-card"');
     expect(corePageSources.TrackPage).not.toContain('<footer className="v2-track-playback-dock"');
@@ -476,6 +478,9 @@ describe('V2 production entry', () => {
     expect(corePageSources.TrackPage).not.toContain('<input');
     expect(corePageSources.TrackPage).not.toContain('<button');
     expect(corePageSources.StatisticsPage).toContain('<Input');
+    expect(corePageSources.StatisticsPage).not.toContain("from '../shared/WorkspaceCommandBar'");
+    expect(corePageSources.StatisticsPage).not.toContain('<WorkspaceCommandBar');
+    expect(corePageSources.StatisticsPage).not.toContain('title="车辆里程分析"');
     expect(corePageSources.StatisticsPage).toContain('className="v2-mileage-query-panel"');
     expect(corePageSources.StatisticsPage).toContain('<WorkspaceMetricRail');
     expect(corePageSources.StatisticsPage).toContain('variant="queue"');

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

@@ -15033,7 +15033,7 @@
   width: 100%;
   overflow: visible;
   border: 0;
-  border-radius: 0 0 12px 12px;
+  border-radius: 12px;
   box-shadow: none;
 }
 
@@ -24142,6 +24142,23 @@
   display: none;
 }
 
+.v2-track-loading.v2-state-surface {
+  width: min(330px, calc(100% - 32px));
+  min-height: 82px;
+  height: auto;
+  align-items: stretch;
+  border-radius: 12px;
+  padding: 10px 12px;
+}
+
+.v2-track-loading .v2-state-message {
+  min-height: 40px;
+}
+
+.v2-track-loading .v2-state-skeleton {
+  display: none;
+}
+
 @media (max-width: 680px) {
   .v2-track-detail-sidesheet .v2-workspace-config-summary {
     grid-template-columns: repeat(4, minmax(0, 1fr));
@@ -24234,7 +24251,7 @@
   .v2-track-current-card.semi-card {
     top: 12px;
     left: 12px;
-    width: min(404px, calc(100% - 350px));
+    width: min(440px, calc(100% - 280px));
     border-radius: 13px;
     box-shadow: 0 14px 38px rgba(26, 47, 73, .14);
   }
@@ -24252,6 +24269,12 @@
     line-height: 20px;
   }
 
+  .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span:last-child strong {
+    overflow: visible;
+    font-size: clamp(13px, 1.1vw, 15px);
+    text-overflow: clip;
+  }
+
   .v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
     min-height: 40px;
   }