shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: unify history metrics with semi ui

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

11
vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx
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();

40
vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx
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' : ''}`}>

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

@@ -15192,121 +15192,6 @@
}
}
/*
* Shared Semi UI metric rail applied to history data.
* The rail mirrors the mileage workspace: one primary outcome, then three
* supporting facts. Empty history screens omit the rail entirely.
*/
.v2-history-summary-rail.semi-card {
min-width: 0;
min-height: 88px;
flex: 0 0 auto;
overflow: hidden;
border: 1px solid #d8e3ef;
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 26px rgba(31, 53, 80, .05);
}
.v2-history-summary-rail > .semi-card-body {
display: grid;
min-height: 88px;
grid-template-columns: minmax(280px, .78fr) minmax(0, 1.72fr);
}
.v2-history-summary-card.semi-card {
min-width: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.v2-history-summary-card > .semi-card-body {
position: relative;
display: flex;
min-width: 0;
height: 100%;
justify-content: center;
flex-direction: column;
padding: 11px 16px !important;
}
.v2-history-summary-card.is-primary > .semi-card-body {
overflow: hidden;
background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
}
.v2-history-summary-card.is-primary > .semi-card-body::after {
position: absolute;
top: -80px;
right: -44px;
width: 180px;
height: 180px;
border: 26px solid rgba(255, 255, 255, .08);
border-radius: 50%;
content: "";
pointer-events: none;
}
.v2-history-summary-card small,
.v2-history-summary-card span {
position: relative;
z-index: 1;
overflow: hidden;
color: #7c8a9d;
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-summary-card strong {
position: relative;
z-index: 1;
margin: 5px 0 4px;
overflow: hidden;
color: #22354d;
font-size: clamp(18px, 1.45vw, 24px);
font-variant-numeric: tabular-nums;
font-weight: 760;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-summary-card.is-primary :is(small,strong,span) {
color: #fff;
}
.v2-history-summary-card.is-primary small,
.v2-history-summary-card.is-primary span {
color: rgba(255, 255, 255, .72);
}
.v2-history-summary-card.is-primary .v2-history-summary-value {
font-size: clamp(25px, 2.1vw, 34px);
letter-spacing: -.035em;
}
.v2-history-summary-secondary.semi-card-group {
display: grid;
min-width: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
position: absolute;
inset: 18px auto 18px 0;
width: 1px;
background: #e3eaf2;
content: "";
}
.v2-history-summary-card.is-sources strong {
font-size: clamp(13px, 1.05vw, 17px);
}
.v2-history-result-meta {
display: inline-flex;
min-width: 0;
@@ -15317,6 +15202,19 @@
font-variant-numeric: tabular-nums;
}
.v2-history-summary-unit {
margin-left: 3px;
color: #8493a5;
font-size: 8px;
font-style: normal;
font-weight: 600;
letter-spacing: 0;
}
.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary .v2-history-summary-unit {
color: #6f90bb;
}
.v2-history-discovery-shell {
display: grid;
min-width: 0;
@@ -15577,16 +15475,6 @@
font-size: 9px;
}
@media (max-width: 900px) and (min-width: 681px) {
.v2-history-summary-rail > .semi-card-body {
grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr);
}
.v2-history-summary-card > .semi-card-body {
padding-inline: 12px !important;
}
}
@media (max-width: 680px) {
.v2-history-discovery-shell {
display: contents;
@@ -15682,65 +15570,6 @@
max-width: 205px;
}
.v2-history-summary-rail.semi-card {
min-height: 132px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.v2-history-summary-rail > .semi-card-body {
min-height: 132px;
grid-template-columns: 1fr;
grid-template-rows: 70px 58px;
gap: 4px;
}
.v2-history-summary-card.is-primary.semi-card,
.v2-history-summary-card.is-primary > .semi-card-body {
min-height: 70px;
border-radius: 10px;
}
.v2-history-summary-card.is-primary > .semi-card-body {
padding: 7px 13px 8px !important;
}
.v2-history-summary-card.is-primary .v2-history-summary-value {
margin-block: 2px 1px;
font-size: 24px;
line-height: 27px;
}
.v2-history-summary-secondary.semi-card-group {
min-height: 58px;
overflow: hidden;
border: 1px solid #dfe7f0;
border-radius: 10px;
background: #fff;
}
.v2-history-summary-secondary .v2-history-summary-card > .semi-card-body {
min-height: 58px;
padding: 7px 8px !important;
}
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
inset-block: 8px;
}
.v2-history-summary-secondary .v2-history-summary-card small,
.v2-history-summary-secondary .v2-history-summary-card span {
font-size: 8px;
}
.v2-history-summary-secondary .v2-history-summary-card strong,
.v2-history-summary-secondary .v2-history-summary-card.is-sources strong {
margin-block: 2px 1px;
font-size: 14px;
}
}
/*