From 6bb2107f5ebbe1cc14e66adce287991ee4d1d388 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 18 Jul 2026 06:05:58 +0800 Subject: [PATCH] refine Semi UI history data workflow --- .../web/src/v2/pages/HistoryPage.test.tsx | 1 + .../apps/web/src/v2/pages/HistoryPage.tsx | 1 + .../apps/web/src/v2/styles/workspace.css | 120 +++++++++++++++++- 3 files changed, 120 insertions(+), 2 deletions(-) diff --git a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx index 165c2a2c..53c8c647 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.test.tsx @@ -115,6 +115,7 @@ test('clears stale rows, charts, and evidence as soon as the history scope chang } expect(view.container.querySelector('.v2-history-context .v2-history-metrics')).toBeInTheDocument(); expect(view.container.querySelector('.v2-history-context .v2-history-summary')).toBeInTheDocument(); + expect(view.container.querySelector('.v2-history-result-actions.v2-workspace-panel-actions')).toBeInTheDocument(); expect(view.container.querySelector('.v2-history-evidence')).not.toBeInTheDocument(); expect(view.container.querySelector('.v2-history-workspace')).not.toHaveClass('is-inspector-open'); expect(screen.queryByRole('heading', { level: 5, name: '聚合趋势' })).not.toBeInTheDocument(); diff --git a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx index 9dea81c4..c5a24888 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx @@ -378,6 +378,7 @@ export default function HistoryPage() { title="历史明细" description={keywords.length ? `${(result?.total ?? 0).toLocaleString('zh-CN')} 条记录 · ${resultSummary?.vehicleCount ?? 0} 辆车辆 · ${summarySources}` : '选择车辆和时间范围后查询'} meta={resultSummary ? `${resultSummary.queryDurationMs} ms` : undefined} + actionsClassName="v2-history-result-actions" actions={<> diff --git a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css index f589a091..e5f6e6d1 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -5970,6 +5970,11 @@ font-variant-numeric: tabular-nums; } +.v2-history-result-actions { + min-width: 0; + flex-wrap: nowrap; +} + .v2-history-table-trend .semi-icon, .v2-history-trend-toggle .semi-icon { transition: transform .18s ease; @@ -6029,6 +6034,117 @@ } } +@media (min-width: 901px) and (max-width: 1100px) { + .v2-history-toolbar { + grid-template-columns: minmax(260px, 1.35fr) repeat(2, minmax(180px, .8fr)); + grid-template-areas: + "vehicle category protocol" + "range range actions"; + } + + .v2-history-toolbar > .v2-history-vehicles { + grid-area: vehicle; + } + + .v2-history-toolbar > .v2-history-range { + grid-area: range; + } + + .v2-history-toolbar > label:nth-of-type(2) { + grid-area: category; + } + + .v2-history-toolbar > label:nth-of-type(3) { + grid-area: protocol; + } + + .v2-history-toolbar > .v2-history-toolbar-actions { + min-width: 0; + grid-area: actions; + justify-content: stretch; + } + + .v2-history-toolbar-actions > .semi-button { + min-width: 0; + flex: 1 1 0; + padding-inline: 9px; + } +} + +@media (min-width: 761px) and (max-width: 900px) { + .v2-history-toolbar { + grid-template-columns: repeat(2, minmax(125px, 1fr)) minmax(104px, .8fr) minmax(218px, max-content); + grid-template-areas: + "vehicle vehicle category protocol" + "range range range actions"; + } + + .v2-history-toolbar > .v2-history-vehicles { + grid-area: vehicle; + } + + .v2-history-toolbar > .v2-history-range { + grid-area: range; + } + + .v2-history-toolbar > label:nth-of-type(2) { + grid-area: category; + } + + .v2-history-toolbar > label:nth-of-type(3) { + grid-area: protocol; + } + + .v2-history-toolbar > .v2-history-toolbar-actions { + min-width: 0; + grid-area: actions; + justify-content: stretch; + } + + .v2-history-toolbar-actions > .semi-button { + min-width: 0; + padding-inline: 10px; + } + + .v2-history-result-actions { + gap: 4px; + } + + .v2-history-result-actions > .semi-button { + min-width: 32px; + padding-inline: 8px; + font-size: 11px; + } + + .v2-history-result-actions > .semi-select { + width: 76px; + min-width: 76px; + } +} + +@media (min-width: 681px) and (max-width: 760px) { + .v2-history-toolbar { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .v2-history-toolbar > .v2-history-vehicles, + .v2-history-toolbar > .v2-history-range, + .v2-history-toolbar > .v2-history-toolbar-actions { + min-width: 0; + grid-column: 1 / -1; + } + + .v2-history-toolbar > .v2-history-toolbar-actions { + justify-content: stretch; + } + + .v2-history-toolbar-actions > .semi-button { + min-width: 0; + flex: 1 1 0; + padding-inline: 9px; + } +} + @media (max-width: 1260px) and (min-width: 681px) { .v2-history-context { grid-template-columns: minmax(300px, 1fr) minmax(390px, .95fr); @@ -6045,7 +6161,7 @@ padding: 0; } - .v2-history-context .v2-history-metrics-manage .semi-button-content { + .v2-history-context .v2-history-metrics-manage .semi-button-content-right { display: none; } @@ -6141,7 +6257,7 @@ padding: 0; } - .v2-history-context .v2-history-metrics-manage .semi-button-content { + .v2-history-context .v2-history-metrics-manage .semi-button-content-right { display: none; }