polish Semi UI query workspaces

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

@@ -46,6 +46,9 @@ 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.getByRole('heading', { name: '里程范围', level: 5 })).toBeInTheDocument();
+  expect(screen.getByText('车牌、自然日与里程数据源策略')).toBeInTheDocument();
+  expect(screen.getByText('1 辆 · 2 天').closest('.semi-tag')).toBeInTheDocument();
   expect(screen.queryByText('当日起始里程')).not.toBeInTheDocument();
   expect(screen.queryByText('数据来源')).not.toBeInTheDocument();
   expect(screen.queryByRole('img', { name: '每日行驶里程趋势图' })).not.toBeInTheDocument();

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

@@ -9,10 +9,10 @@ import { createMileageExportStream, type MileageExportStream } from '../domain/m
 import { formatZhNumber } from '../domain/formatters';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
-import { MobileFilterToggle } from '../shared/MobileFilterToggle';
 import { TablePagination } from '../shared/TablePagination';
 import { VehicleCandidateList } from '../shared/VehicleCandidateList';
 import { mergeVehicleCandidates } from '../shared/vehicleCandidates';
+import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
 import { QUERY_MEMORY, retainPreviousPageWithinScope } from '../queryPolicy';
 import { monitorReturnFromParams, preserveMonitorReturn } from '../routing/monitorContext';
@@ -486,8 +486,17 @@ export default function StatisticsPage() {
 
   return <div className="v2-mileage-page" ref={pageRef}>
     <MonitorReturnBar />
-    <Card className="v2-mileage-query-panel" bodyStyle={{ padding: 0 }}>
-      <MobileFilterToggle title="查询条件" summary={criteria.vehicles.length ? `已选 ${criteria.vehicles.length} 辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天` : `全部车辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`} expanded={!filtersCollapsed} collapsedLabel="修改" onToggle={() => setFiltersCollapsed((value) => !value)} />
+    <WorkspaceFilterPanel
+      className="v2-mileage-query-panel"
+      title="里程范围"
+      description="车牌、自然日与里程数据源策略"
+      mobileSummary={criteria.vehicles.length ? `已选 ${criteria.vehicles.length} 辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天` : `全部车辆 · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`}
+      expanded={!filtersCollapsed}
+      status={`${criteria.vehicles.length ? `${criteria.vehicles.length} 辆` : '全部授权车辆'} · ${inclusiveDays(criteria.dateFrom, criteria.dateTo)} 天`}
+      statusColor={criteria.vehicles.length ? 'blue' : 'grey'}
+      collapsedLabel="修改"
+      onToggle={() => setFiltersCollapsed((value) => !value)}
+    >
       <form className={`v2-mileage-filter${filtersCollapsed ? ' is-mobile-collapsed' : ''}`} onSubmit={submit}>
         <VehicleMultiSelect value={draft.vehicles} onChange={(vehicles) => setDraft((current) => ({ ...current, vehicles }))} />
         <label><span>开始日期</span><Input aria-label="开始日期" type="date" value={draft.dateFrom} max={draft.dateTo} onChange={(value) => setDraft((current) => ({ ...current, dateFrom: value }))} /></label>
@@ -498,13 +507,13 @@ export default function StatisticsPage() {
       </form>
       {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} />
-    </Card>
+    </WorkspaceFilterPanel>
     {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
         title="车辆每日里程"
         description={`${criteria.dateFrom} 至 ${criteria.dateTo}`}
-        meta={`${hasVehicles ? `${totalVehicles} 辆车` : `当前 ${displayVehicles.length} 辆 / 共 ${totalVehicles} 辆`} · ${dates.length} 个自然日`}
+        meta={<span className="v2-workspace-result-meta"><Tag color="blue" type="light" size="small">{hasVehicles ? `${totalVehicles} 辆` : `${displayVehicles.length} / ${totalVehicles} 辆`}</Tag><span>{dates.length} 个自然日</span></span>}
         actionsClassName="v2-mileage-result-actions"
         actions={<><Button className="is-refresh" theme="borderless" aria-label="刷新里程数据" icon={<IconRefresh />} onClick={() => { statistics.refetch(); mileage.refetch(); if (!hasVehicles) fleetVehicles.refetch(); }} disabled={refreshing}>{refreshing ? '更新中' : '刷新'}</Button><Button theme="light" aria-label={isExporting ? '取消导出' : '导出 Excel'} icon={isExporting ? <IconClose /> : <IconDownload />} onClick={isExporting ? cancelExport : exportExcel} disabled={!totalVehicles || Boolean(criteriaError)}>{isExporting ? '取消导出' : '导出 Excel'}</Button></>}
       />

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

@@ -234,7 +234,7 @@ const TrackRail = memo(function TrackRail({ draft, track, loading, activeStopInd
         className="v2-track-result-header"
         title={track ? track.plate || track.vin : '轨迹明细'}
         description={track ? track.vin : '停留、事件与行程证据'}
-        meta={track ? `${number(track.summary.distanceKm)} km` : undefined}
+        meta={<Tag color={track ? 'blue' : 'grey'} type="light" size="small">{track ? `${number(track.summary.distanceKm)} km` : '等待查询'}</Tag>}
       />
       <SegmentedTabs className="v2-track-rail-tabs" ariaLabel="轨迹明细分类" value={tab} onChange={onTab} items={[{ key: 'stops', label: '停留点', count: track?.stops.length ?? 0 }, { key: 'events', label: '事件点', count: track?.events.length ?? 0 }, { key: 'overview', label: '概览' }]} />
       <div className="v2-track-rail-scroll">

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

@@ -146,7 +146,7 @@ function VehicleSearch() {
       <WorkspacePanelHeader
         title={deferredKeyword ? '匹配车辆快捷入口' : '最近上报车辆'}
         description={deferredKeyword ? '按当前搜索条件展示，可直接进入车辆数字档案' : '按照最新上报时间排列，无需搜索即可继续查看'}
-        meta={candidates.data ? `当前显示 ${formatZhNumber(quickVehicles.length)} 辆` : '授权范围'}
+        meta={<Tag color={deferredKeyword ? 'blue' : 'grey'} type="light" size="small">{candidates.data ? `当前显示 ${formatZhNumber(quickVehicles.length)} 辆` : '授权范围'}</Tag>}
       />
       {candidates.isFetching && !candidates.data
         ? <div className="v2-vehicle-recent-state" role="status"><span className="v2-spinner" /><span>正在读取授权车辆…</span></div>