From 1adcff5ecbeaae3b45f2795a65e68e55508a2250 Mon Sep 17 00:00:00 2001 From: lingniu Date: Sat, 18 Jul 2026 08:06:08 +0800 Subject: [PATCH] refine Semi UI mobile history workspace --- .../web/src/v2/pages/HistoryPage.test.tsx | 3 + .../apps/web/src/v2/pages/HistoryPage.tsx | 8 ++- .../apps/web/src/v2/styles/workspace.css | 70 +++++++++++++++---- 3 files changed, 66 insertions(+), 15 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 53c8c647..5eb504c9 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 @@ -180,6 +180,9 @@ test('renders only selectable Semi history cards on mobile', async () => { expect(action).toHaveAttribute('aria-expanded', 'false'); expect(view.container.querySelector('.v2-history-table-scroll.is-mobile-scroll')).toHaveAttribute('aria-label', '历史明细列表，可上下滚动'); expect(view.container.querySelector('.v2-history-table-scroll.is-mobile-scroll')).toHaveAttribute('tabindex', '0'); + expect(view.container.querySelector('.v2-history-metric-scroll')).toHaveAttribute('aria-label', '当前显示字段，可左右滑动'); + expect(view.container.querySelector('.v2-history-metric-scroll')).toHaveAttribute('tabindex', '0'); + expect(view.container.querySelector('.v2-history-result-actions')).toHaveClass('is-mobile-actions'); expect(screen.queryByText('MOBILEVIN-evidence')).not.toBeInTheDocument(); expect((mocks.historyData.mock.calls[0]?.[0] as URLSearchParams).get('limit')).toBe('20'); expect(screen.queryByLabelText('每页数量')).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 c5a24888..3c6dd673 100644 --- a/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx +++ b/vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx @@ -355,7 +355,11 @@ export default function HistoryPage() { 显示字段 {visibleMetrics.length} / {allMetrics.length} -
+
{visibleMetrics.map((metric) => 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})` : ''})} {allMetrics.length > visibleMetrics.length ? 另有 {allMetrics.length - visibleMetrics.length} 项可选 : !allMetrics.length ? 查询后加载可用指标 : null}
@@ -378,7 +382,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" + actionsClassName={`v2-history-result-actions${mobileLayout ? ' is-mobile-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 5af2f631..d0dd1d5b 100644 --- a/vehicle-data-platform/apps/web/src/v2/styles/workspace.css +++ b/vehicle-data-platform/apps/web/src/v2/styles/workspace.css @@ -6371,23 +6371,46 @@ } .v2-history-context-card.semi-card { - min-height: 110px; + min-height: 126px; border-radius: 11px; } .v2-history-context { display: flex; - min-height: 110px; + min-height: 126px; flex-direction: column; } .v2-history-context .v2-history-metrics { - min-height: 52px; - grid-template-columns: auto minmax(0, 1fr) auto; - gap: 7px; + min-height: 68px; + grid-template-columns: minmax(0, 1fr) auto; + grid-template-rows: auto auto; + gap: 6px 8px; border-right: 0; border-bottom: 1px solid #e5ebf2; - padding: 8px 9px; + padding: 7px 9px 8px; + } + + .v2-history-metrics-heading { + grid-column: 1; + grid-row: 1; + align-items: baseline; + flex-direction: row; + gap: 6px; + } + + .v2-history-metric-scroll { + width: 100%; + grid-column: 1 / -1; + grid-row: 2; + padding: 1px 12px 1px 0; + scroll-padding-inline: 0 12px; + scroll-snap-type: inline proximity; + scrollbar-width: none; + } + + .v2-history-metric-scroll::-webkit-scrollbar { + display: none; } .v2-history-metrics-heading > strong { @@ -6400,18 +6423,21 @@ .v2-history-context .v2-history-metric-tag.semi-tag { height: 28px; + scroll-snap-align: start; font-size: 10px; } .v2-history-context .v2-history-metrics-manage.semi-button { - width: 34px; - min-width: 34px; - min-height: 34px; - padding: 0; + width: auto; + min-width: 76px; + min-height: 30px; + grid-column: 2; + grid-row: 1; + padding: 0 8px; } .v2-history-context .v2-history-metrics-manage .semi-button-content-right { - display: none; + display: inline; } .v2-history-context .v2-history-summary { @@ -6475,8 +6501,7 @@ font-size: 9px; } - .v2-history-table-card .v2-workspace-panel-meta, - .v2-history-table-card .v2-workspace-panel-actions > .semi-button .semi-button-content { + .v2-history-table-card .v2-workspace-panel-meta { display: none; } @@ -6491,6 +6516,25 @@ padding: 0; } + .v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-button-content { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-button-content-right { + display: none; + } + + .v2-history-table-card .v2-history-result-actions.is-mobile-actions > .semi-button .semi-icon { + color: #5f7188; + font-size: 16px; + } + + .v2-history-table-card .v2-history-result-actions.is-mobile-actions > .v2-history-table-trend.is-expanded .semi-icon { + color: var(--v2-blue); + } + .v2-history-workspace { min-height: 0; flex: 1 1 0;