refine Semi UI mobile history workspace

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();

vehicle-data-platform/apps/web/src/v2/pages/HistoryPage.tsx

@@ -355,7 +355,11 @@ export default function HistoryPage() {
             <strong>显示字段</strong>
             <small>{visibleMetrics.length} / {allMetrics.length}</small>
           </div>
-          <div className="v2-history-metric-scroll" aria-label="当前显示字段">
+          <div
+            className="v2-history-metric-scroll"
+            tabIndex={mobileLayout ? 0 : undefined}
+            aria-label={mobileLayout ? '当前显示字段，可左右滑动' : '当前显示字段'}
+          >
             {visibleMetrics.map((metric) => <Tag className="v2-history-metric-tag" color="blue" type="light" size="large" closable tabIndex={0} aria-label={`已选字段 ${metric.label}${metric.unit ? ` ${metric.unit}` : ''}，点击取消显示`} onClick={() => 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})` : ''}</Tag>)}
             {allMetrics.length > visibleMetrics.length ? <span>另有 {allMetrics.length - visibleMetrics.length} 项可选</span> : !allMetrics.length ? <span>查询后加载可用指标</span> : null}
           </div>
@@ -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={<>
               <Button className={`v2-history-table-trend${trendExpanded ? ' is-expanded' : ''}`} theme="borderless" aria-label={trendExpanded ? '收起趋势' : '展开趋势'} aria-expanded={trendExpanded} icon={<IconChevronRight />} onClick={() => setTrendExpanded((value) => !value)}>{trendExpanded ? '收起趋势' : '聚合趋势'}</Button>
               <Button theme="borderless" aria-label="列设置" aria-haspopup="dialog" aria-expanded={columnSettingsOpen} aria-controls="v2-history-column-settings" icon={<IconSetting />} onClick={() => setColumnSettingsOpen((value) => !value)}>列设置</Button>

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;
+    min-height: 68px;
-    grid-template-columns: auto minmax(0, 1fr) auto;
+    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 7px;
+    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;
+    width: auto;
-    min-width: 34px;
+    min-width: 76px;
-    min-height: 34px;
+    min-height: 30px;
-    padding: 0;
+    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-meta {
-  .v2-history-table-card .v2-workspace-panel-actions > .semi-button .semi-button-content {
     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;