refine Semi UI history workspace

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

@@ -9,7 +9,6 @@ import { buildHistorySeriesPanels, formatExportFileSize, formatHistoryValue, for
 import { downloadBlob } from '../domain/download';
 import { InlineError, PanelEmpty, PanelLoading } from '../shared/AsyncState';
 import { MonitorReturnBar } from '../shared/MonitorReturnBar';
-import { PageHeader } from '../shared/PageHeader';
 import { TablePagination } from '../shared/TablePagination';
 import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
 import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
@@ -57,18 +56,18 @@ function HistoryTrend({ response, category, loading, error, hasMetrics, expanded
   const header = <WorkspacePanelHeader
     title="聚合趋势"
     description={description}
-    meta={expanded && summary ? `${formatSeriesGrain(summary.grainSeconds)}粒度 · 覆盖 ${coverage.toFixed(1)}% · ${summary.rawPointCount.toLocaleString('zh-CN')} 原始点` : undefined}
+    meta={summary ? `${formatSeriesGrain(summary.grainSeconds)}粒度 · 覆盖 ${coverage.toFixed(1)}% · ${summary.rawPointCount.toLocaleString('zh-CN')} 原始点` : undefined}
     actions={<Button
-      className={`v2-history-trend-toggle${expanded ? ' is-expanded' : ''}`}
+      className="v2-history-trend-toggle is-expanded"
       theme="borderless"
       type="tertiary"
       size="small"
       icon={<IconChevronRight />}
-      aria-expanded={expanded}
+      aria-expanded="true"
       onClick={onToggle}
-    >{expanded ? '收起趋势' : '展开趋势'}</Button>}
+    >收起趋势</Button>}
   />;
-  if (!expanded) return <Card className="v2-history-trend is-collapsed" bodyStyle={{ padding: 0 }}>{header}</Card>;
+  if (!expanded) return null;
   if (category !== 'location') return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}<Empty className="v2-history-chart-empty" title={category === 'raw' ? '原始报文不生成趋势' : '日里程按自然日展示'} description={category === 'raw' ? '离散报文请通过明细与导出核验证据。' : '请通过明细表核对每日起止里程。'} /></Card>;
   if (!hasMetrics) return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}<Empty className="v2-history-chart-empty" title="尚未选择趋势指标" description="选择“速度”或“总里程”后展示聚合趋势。" /></Card>;
   return <Card className="v2-history-trend is-expanded" bodyStyle={{ padding: 0 }}>{header}
@@ -331,12 +330,6 @@ export default function HistoryPage() {
 
   return <div className="v2-history-page">
     <MonitorReturnBar />
-    <PageHeader
-      title="历史数据"
-      description="按车辆、时间与协议查询可追溯数据，统一核对设备时间、服务时间、字段质量和原始证据。"
-      status="证据可追溯"
-      meta={<Typography.Text type="tertiary">{keywords.length ? `${keywords.length} 辆车辆` : '等待选择车辆'}</Typography.Text>}
-    />
     <WorkspaceFilterPanel
       className="v2-history-filter-card"
       title="查询范围"
@@ -355,23 +348,44 @@ export default function HistoryPage() {
         <div className="v2-history-toolbar-actions"><Button className="v2-primary-button" theme="solid" htmlType="submit" disabled={!parseHistoryKeywords(draft.keywords).length}>查询</Button><Button className="v2-secondary-button" theme="light" onClick={reset}>重置</Button>{exportAllowed ? <CreateExportButton disabled={!resultRows.length} request={{ keywords, category: criteria.category, protocol: criteria.protocol || undefined, dateFrom: criteria.dateFrom, dateTo: criteria.dateTo, metrics: visibleKeys, format: 'csv' }} /> : <Tag className="v2-history-permission-tag" color="grey" type="light" size="large">只读</Tag>}</div>
       </form>
     </WorkspaceFilterPanel>
-    <Card className="v2-history-metrics-card" bodyStyle={{ padding: 0 }}>
-      <div className="v2-history-metrics">
-        <strong>已选字段</strong>
-        <div className="v2-history-metric-scroll" aria-label="当前显示字段">
-          {visibleMetrics.map((metric) => <Tag className="v2-history-metric-tag" color="blue" type="light" size="large" closable tabIndex={0} aria-label={`已选字段 ${metric.label}${metric.unit ? ` ${metric.unit}` : ''}，点击取消显示`} onClick={() => toggleMetric(metric.key)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMetric(metric.key); } }} onClose={(_, event) => { event.stopPropagation(); toggleMetric(metric.key); }} key={metric.key}>{metric.label}{metric.unit ? ` (${metric.unit})` : ''}</Tag>)}
-          {allMetrics.length > visibleMetrics.length ? <span>另有 {allMetrics.length - visibleMetrics.length} 项可选</span> : !allMetrics.length ? <span>查询后加载可用指标</span> : null}
+    <Card className="v2-history-context-card" bodyStyle={{ padding: 0 }}>
+      <div className="v2-history-context">
+        <div className="v2-history-metrics">
+          <div className="v2-history-metrics-heading">
+            <strong>显示字段</strong>
+            <small>{visibleMetrics.length} / {allMetrics.length}</small>
+          </div>
+          <div className="v2-history-metric-scroll" aria-label="当前显示字段">
+            {visibleMetrics.map((metric) => <Tag className="v2-history-metric-tag" color="blue" type="light" size="large" closable tabIndex={0} aria-label={`已选字段 ${metric.label}${metric.unit ? ` ${metric.unit}` : ''}，点击取消显示`} onClick={() => toggleMetric(metric.key)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggleMetric(metric.key); } }} onClose={(_, event) => { event.stopPropagation(); toggleMetric(metric.key); }} key={metric.key}>{metric.label}{metric.unit ? ` (${metric.unit})` : ''}</Tag>)}
+            {allMetrics.length > visibleMetrics.length ? <span>另有 {allMetrics.length - visibleMetrics.length} 项可选</span> : !allMetrics.length ? <span>查询后加载可用指标</span> : null}
+          </div>
+          <Button className="v2-history-metrics-manage" theme="borderless" icon={<IconSetting />} aria-label="管理字段" onClick={() => setColumnSettingsOpen(true)} disabled={!allMetrics.length}>管理字段</Button>
+        </div>
+        <div className="v2-history-summary" aria-label="当前查询摘要">
+          <div className="is-primary"><small>结果行数</small><strong>{result?.total?.toLocaleString('zh-CN') ?? '—'}</strong></div>
+          <div><small>车辆数</small><strong>{resultSummary?.vehicleCount ?? '—'}</strong></div>
+          <div><small>数据源</small><strong className="is-source" title={summarySources}>{summarySources}</strong></div>
+          <div><small>查询耗时</small><strong>{resultSummary ? `${resultSummary.queryDurationMs} ms` : '—'}</strong></div>
         </div>
-        <Button className="v2-history-metrics-manage" theme="borderless" icon={<IconSetting />} aria-label="管理字段" onClick={() => setColumnSettingsOpen(true)} disabled={!allMetrics.length}>管理字段</Button>
       </div>
     </Card>
     {dataQuery.isError ? <InlineError message={dataQuery.error instanceof Error ? dataQuery.error.message : '历史查询失败'} onRetry={() => dataQuery.refetch()} /> : null}
     <div className={`v2-history-workspace${selectedRow && !mobileLayout ? ' is-inspector-open' : ''}`}>
       <div className={`v2-history-main${trendExpanded ? ' has-expanded-trend' : ''}`}>
-        <Card className="v2-history-summary" bodyStyle={{ padding: 0 }}><div><small>结果行数</small><strong>{result?.total?.toLocaleString('zh-CN') ?? '—'}</strong></div><div><small>车辆数</small><strong>{resultSummary?.vehicleCount ?? '—'}</strong></div><div><small>数据源</small><strong className="is-source" title={summarySources}>{summarySources}</strong></div><div><small>查询耗时</small><strong>{resultSummary ? `${resultSummary.queryDurationMs} ms` : '—'}</strong></div></Card>
         <HistoryTrend response={seriesQuery.data} category={criteria.category} loading={seriesQuery.isFetching} error={seriesQuery.isError ? (seriesQuery.error instanceof Error ? seriesQuery.error.message : '未知错误') : undefined} hasMetrics={Boolean(seriesMetricKey)} expanded={trendExpanded} onToggle={() => setTrendExpanded((value) => !value)} />
         <Card className={`v2-history-table-card is-${density}`} bodyStyle={{ padding: 0 }}>
-          <WorkspacePanelHeader title="数据明细" actions={<><Button theme="borderless" aria-label="列设置" aria-haspopup="dialog" aria-expanded={columnSettingsOpen} aria-controls="v2-history-column-settings" icon={<IconSetting />} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置</Button>{exportAllowed ? <Button theme="borderless" aria-label="查看导出任务" aria-haspopup="dialog" aria-expanded={exportJobsOpen} aria-controls="v2-history-export-jobs" icon={<IconDownload />} onClick={() => setExportJobsOpen(true)}>导出任务</Button> : null}{!mobileLayout ? <Select aria-label="表格密度" value={density} onChange={(value) => setDensity(String(value) as typeof density)} optionList={[{ value: 'compact', label: '紧凑' }, { value: 'comfortable', label: '舒适' }]} /> : null}<Button theme="borderless" onClick={() => dataQuery.refetch()} aria-label="刷新历史数据" icon={<IconRefresh />} /></>} />
+          <WorkspacePanelHeader
+            title="历史明细"
+            description={keywords.length ? `${(result?.total ?? 0).toLocaleString('zh-CN')} 条记录 · ${resultSummary?.vehicleCount ?? 0} 辆车辆 · ${summarySources}` : '选择车辆和时间范围后查询'}
+            meta={resultSummary ? `${resultSummary.queryDurationMs} ms` : undefined}
+            actions={<>
+              <Button className={`v2-history-table-trend${trendExpanded ? ' is-expanded' : ''}`} theme="borderless" aria-label={trendExpanded ? '收起趋势' : '展开趋势'} aria-expanded={trendExpanded} icon={<IconChevronRight />} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起趋势' : '聚合趋势'}</Button>
+              <Button theme="borderless" aria-label="列设置" aria-haspopup="dialog" aria-expanded={columnSettingsOpen} aria-controls="v2-history-column-settings" icon={<IconSetting />} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置</Button>
+              {exportAllowed ? <Button theme="borderless" aria-label="查看导出任务" aria-haspopup="dialog" aria-expanded={exportJobsOpen} aria-controls="v2-history-export-jobs" icon={<IconDownload />} onClick={() => setExportJobsOpen(true)}>导出任务</Button> : null}
+              {!mobileLayout ? <Select aria-label="表格密度" value={density} onChange={(value) => setDensity(String(value) as typeof density)} optionList={[{ value: 'compact', label: '紧凑' }, { value: 'comfortable', label: '舒适' }]} /> : null}
+              <Button theme="borderless" onClick={() => dataQuery.refetch()} aria-label="刷新历史数据" icon={<IconRefresh />} />
+            </>}
+          />
           <ColumnVisibilityPanel visible={columnSettingsOpen} metrics={allMetrics} visibleKeys={visibleKeys} onToggle={toggleMetric} onShowAll={() => setVisibleMetrics(allMetrics.map((metric) => metric.key))} onReset={() => setVisibleMetrics(allMetrics.filter((metric) => metric.defaultVisible).map((metric) => metric.key))} onClose={() => setColumnSettingsOpen(false)} />
           <div className="v2-history-table-scroll">
             {mobileLayout