feat: unify history metrics with semi ui

This commit is contained in:
lingniu
2026-07-19 11:52:24 +08:00
parent 343e7c9b89
commit 2e87378c92
3 changed files with 41 additions and 207 deletions

View File

@@ -122,10 +122,13 @@ test('clears stale rows, charts, and evidence as soon as the history scope chang
expect(view.container.querySelector('.v2-history-discovery-shell')).toContainElement(screen.getByLabelText('历史数据查询操作'));
expect(screen.getByLabelText('历史数据查询操作')).toHaveTextContent('遥测证据检索');
expect(screen.getByLabelText('历史数据查询操作')).toHaveTextContent('上海时区');
expect(view.container.querySelector('.v2-history-summary-rail')).toHaveAttribute('aria-label', '历史数据查询统计信息');
expect(view.container.querySelector('.v2-history-summary-secondary.semi-card-group')).toBeInTheDocument();
expect(view.container.querySelectorAll('.v2-history-summary-card.semi-card')).toHaveLength(4);
expect(view.container.querySelector('.v2-history-summary-card.is-primary .v2-history-summary-value')).toHaveTextContent('1');
expect(view.container.querySelector('.v2-history-summary-rail')).toHaveClass('v2-workspace-metric-rail', 'is-queue');
expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveAttribute('aria-label', '历史数据查询统计信息');
expect(view.container.querySelectorAll('.v2-history-summary-rail .v2-workspace-metric-list > span')).toHaveLength(4);
expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary')).toHaveTextContent('结果行数1当前范围');
expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('车辆数1辆1 个车辆标识');
expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('数据来源1路JT808');
expect(view.container.querySelector('.v2-history-summary-rail .v2-workspace-metric-list')).toHaveTextContent('查询耗时12ms1 / 1 个业务字段');
expect(screen.getByText('1 / 1 字段').closest('.semi-tag')).toBeInTheDocument();
expect(view.container.querySelector('.v2-history-result-actions.v2-workspace-panel-actions')).toBeInTheDocument();
expect(view.container.querySelector('.v2-history-evidence')).not.toBeInTheDocument();

View File

@@ -18,7 +18,7 @@ import { TablePagination } from '../shared/TablePagination';
import { WorkspaceCommandBar } from '../shared/WorkspaceCommandBar';
import { WorkspaceDetailSideSheet } from '../shared/WorkspaceDetailSideSheet';
import { WorkspaceFilterPanel } from '../shared/WorkspaceFilterPanel';
import { WorkspaceMetricRail } from '../shared/WorkspaceMetricRail';
import { WorkspaceMetricRail, type WorkspaceQueueMetricRailItem } from '../shared/WorkspaceMetricRail';
import { WorkspacePanelHeader } from '../shared/WorkspacePanelHeader';
import { WorkspaceSideSheet } from '../shared/WorkspaceSideSheet';
import { detailTriggerRow } from '../shared/detailTriggerRow';
@@ -444,29 +444,34 @@ export default function HistoryPage() {
const page = Math.floor(offset / limit) + 1;
const summarySources = resultSummary?.sources?.join('、') || '—';
const summaryLoading = keywords.length > 0 && dataQuery.isFetching && !result;
const summaryPrimary = {
label: '结果行数',
value: summaryLoading ? '—' : (result?.total ?? 0).toLocaleString('zh-CN'),
note: summaryLoading ? '正在读取当前筛选范围' : `${resultSummary?.vehicleCount ?? 0} 辆车辆`
};
const summarySecondary = [
const historyMetrics: WorkspaceQueueMetricRailItem[] = [
{
label: '结果行数',
value: summaryLoading ? '' : (result?.total ?? 0).toLocaleString('zh-CN'),
note: summaryLoading ? '正在读取' : '当前范围',
tone: 'primary',
emphasis: 'primary'
},
{
label: '车辆数',
value: summaryLoading ? '—' : String(resultSummary?.vehicleCount ?? 0),
note: `当前筛选 ${keywords.length} 个车辆标识`,
className: 'is-vehicles'
value: summaryLoading ? '—' : <>{resultSummary?.vehicleCount ?? 0}<i className="v2-history-summary-unit"></i></>,
note: `${keywords.length} 个车辆标识`,
tone: 'success',
emphasis: 'primary'
},
{
label: '数据来源',
value: summaryLoading ? '—' : `${resultSummary?.sources?.length ?? 0} 个来源`,
value: summaryLoading ? '—' : <>{resultSummary?.sources?.length ?? 0}<i className="v2-history-summary-unit"></i></>,
note: summarySources,
className: 'is-sources'
tone: 'primary',
emphasis: 'secondary'
},
{
label: '查询耗时',
value: summaryLoading ? '—' : resultSummary ? `${resultSummary.queryDurationMs} ms` : '—',
value: summaryLoading ? '—' : resultSummary ? <>{resultSummary.queryDurationMs}<i className="v2-history-summary-unit">ms</i></> : '—',
note: `${visibleMetrics.length} / ${allMetrics.length} 个业务字段`,
className: 'is-duration'
tone: 'neutral',
emphasis: 'secondary'
}
];
const historyFilterFields = <>
@@ -536,13 +541,10 @@ export default function HistoryPage() {
</WorkspaceFilterPanel>}
</div>
{keywords.length ? <WorkspaceMetricRail
variant="queue"
className="v2-history-summary-rail"
cardClassName="v2-history-summary-card"
secondaryClassName="v2-history-summary-secondary"
primaryValueClassName="v2-history-summary-value"
ariaLabel="历史数据查询统计信息"
primary={summaryPrimary}
secondary={summarySecondary}
items={historyMetrics}
/> : null}
{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' : ''}`}>