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={<>
} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起趋势' : '聚合趋势'}
} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置
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;