feat: unify history metrics with semi ui
This commit is contained in:
@@ -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();
|
||||
|
||||
@@ -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' : ''}`}>
|
||||
|
||||
Reference in New Issue
Block a user