refine Semi UI track and history workspaces

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

@@ -177,6 +177,8 @@ test('renders only selectable Semi history cards on mobile', async () => {
   expect(view.container.querySelector('.v2-history-data-table')).not.toBeInTheDocument();
   expect(action).toHaveAttribute('aria-pressed', 'false');
   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(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

@@ -387,7 +387,11 @@ export default function HistoryPage() {
             </>}
           />
           <ColumnVisibilityPanel visible={columnSettingsOpen} metrics={allMetrics} visibleKeys={visibleKeys} onToggle={toggleMetric} onShowAll={() => setVisibleMetrics(allMetrics.map((metric) => metric.key))} onReset={() => setVisibleMetrics(allMetrics.filter((metric) => metric.defaultVisible).map((metric) => metric.key))} onClose={() => setColumnSettingsOpen(false)} />
-          <div className="v2-history-table-scroll">
+          <div
+            className={`v2-history-table-scroll${mobileLayout ? ' is-mobile-scroll' : ''}`}
+            tabIndex={mobileLayout ? 0 : undefined}
+            aria-label={mobileLayout ? '历史明细列表，可上下滚动' : undefined}
+          >
             {mobileLayout
               ? <div className="v2-history-mobile-list">{resultRows.map((row) => <Card key={row.id} className={`v2-history-mobile-card${selectedRow?.id === row.id ? ' is-selected' : ''}`} bodyStyle={{ padding: 0 }}><Button theme="borderless" type="tertiary" className="v2-history-mobile-action" aria-pressed={selectedRow?.id === row.id} aria-expanded={selectedRow?.id === row.id} aria-label={`查看 ${row.plate || row.vin} ${row.deviceTime} 数据详情`} onClick={() => selectRow(row)}><span className="v2-history-mobile-card-content"><header><span><strong>{row.plate || '未绑定车牌'}</strong><small>{row.vin}</small></span><span className={`v2-quality is-${row.quality}`}><i />{historyQualityLabel(row.quality)}</span></header><p><time>{row.deviceTime}</time><b>{row.protocol}</b></p><small className="v2-history-mobile-quality">{row.qualityReason || '平台未返回质量说明'}</small><dl>{visibleMetrics.slice(0, 4).map((metric) => <div key={metric.key}><dt>{metric.label}</dt><dd>{formatHistoryValue(row.values[metric.key], metric)}</dd></div>)}</dl><footer>查看完整详情<IconChevronRight /></footer></span></Button></Card>)}</div>
               : <HistoryDataTable rows={resultRows} metrics={visibleMetrics} selectedRowID={selectedRow?.id} onSelect={selectRow} />}

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

@@ -179,6 +179,8 @@ test('renders a map-first replay workspace and connects stop, event, and panel i
   expect(screen.queryByRole('textbox', { name: '搜索轨迹车辆' })).not.toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-current-card.semi-card')).toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-current-coverage')).toBeInTheDocument();
+  expect(view.container.querySelectorAll('.v2-track-current-metrics > span')).toHaveLength(4);
+  expect(view.container.querySelector('.v2-track-current-evidence')).toHaveTextContent('JT808时间窗完整3 → 3 点报警 —');
   expect(view.container.querySelector('.v2-track-coverage-float')).not.toBeInTheDocument();
   expect(screen.getByRole('toolbar', { name: '地图轨迹工具' })).toBeInTheDocument();
   expect(view.container.querySelector('.v2-track-playback-dock.semi-card')).toBeInTheDocument();

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

@@ -393,11 +393,17 @@ export default function TrackPage() {
       {track?.points.length ? <>
         <Card className="v2-track-current-card" bodyStyle={{ padding: 0 }}>
           <WorkspacePanelHeader variant="compact" title={track.plate || track.vin} description={dateTime(current?.deviceTime)} meta={<Tag color="blue" type="light" size="small">{number(progress, 0)}%</Tag>} />
-          <div className="v2-track-current-metrics"><span><small>速度</small><strong>{number(current?.speedKmh ?? 0)}<em> km/h</em></strong></span><span><small>方向</small><strong>{direction(current?.directionDeg)}</strong></span><span><small>SOC</small><strong>{current?.socAvailable ? `${number(current.socPercent)}%` : '—'}</strong></span></div>
+          <div className="v2-track-current-metrics">
-          <div className="v2-track-current-source"><Tag color="blue" type="light" size="small">{current?.protocol || '未知来源'}</Tag><span>总里程 {number(current?.totalMileageKm ?? 0)} km</span><span>{alarm(current?.alarmFlag)}</span></div>
+            <span><small>速度</small><strong>{number(current?.speedKmh ?? 0)}<em> km/h</em></strong></span>
-          <div className={`v2-track-current-coverage${track.coverage.complete ? '' : ' is-warning'}`}><i />
+            <span><small>方向</small><strong>{direction(current?.directionDeg)}</strong></span>
-            <span><strong>{track.coverage.complete ? '时间窗完整' : '仅展示最新切片'}</strong><small title={track.coverage.evidence}>{track.coverage.evidence}</small></span>
+            <span><small>SOC</small><strong>{current?.socAvailable ? `${number(current.socPercent)}%` : '—'}</strong></span>
+            <span><small>总里程</small><strong>{number(current?.totalMileageKm ?? 0)}<em> km</em></strong></span>
+          </div>
+          <div className={`v2-track-current-evidence v2-track-current-coverage${track.coverage.complete ? '' : ' is-warning'}`}>
+            <Tag color="blue" type="light" size="small">{current?.protocol || '未知来源'}</Tag>
+            <span title={track.coverage.evidence}><i /><strong>{track.coverage.complete ? '时间窗完整' : '最新切片'}</strong></span>
             <em>{track.coverage.processedPoints.toLocaleString('zh-CN')} → {track.coverage.returnedPoints.toLocaleString('zh-CN')} 点</em>
+            <small>{alarm(current?.alarmFlag)}</small>
           </div>
           <p title={addressSettling ? undefined : addressQuery.data?.formattedAddress}>{playing ? '播放中，暂停地址解析' : addressSettling ? '位置已变化，等待地址解析…' : addressQuery.isFetching ? '地址解析中…' : addressQuery.data?.formattedAddress || `${current?.longitude.toFixed(6)}, ${current?.latitude.toFixed(6)}`}</p>
         </Card>

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

@@ -286,13 +286,13 @@
 
 .v2-track-current-card > .semi-card-body > .v2-track-current-metrics {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
   border-block: 1px solid #e5ebf2;
 }
 
 .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
   min-width: 0;
-  padding: 7px 11px;
+  padding: 7px 9px;
 }
 
 .v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span + span {
@@ -311,92 +311,73 @@
   text-shadow: none;
 }
 
-.v2-track-current-card > .semi-card-body > .v2-track-current-source {
+.v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
   display: flex;
-  min-height: 34px;
+  min-height: 38px;
-  grid-template-columns: none;
   align-items: center;
-  gap: 8px;
+  gap: 7px;
   border: 0;
   border-bottom: 1px solid #e8edf3;
-  padding: 5px 10px;
+  padding: 6px 10px;
   color: #66778c;
   font-size: 9px;
 }
 
-.v2-track-current-source .semi-tag {
+.v2-track-current-evidence .semi-tag {
   flex: 0 0 auto;
   border-radius: 6px;
   font-size: 8px;
 }
 
-.v2-track-current-card > .semi-card-body > .v2-track-current-source > span {
+.v2-track-current-evidence > span {
+  display: inline-flex;
   min-width: 0;
+  align-items: center;
+  gap: 6px;
   overflow: hidden;
-  padding: 0;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.v2-track-current-source > span:last-child {
+.v2-track-current-evidence > span > i {
-  margin-left: auto;
-}
-
-.v2-track-current-card > .semi-card-body > .v2-track-current-coverage {
-  display: grid;
-  min-height: 42px;
-  grid-template-columns: 7px minmax(0, 1fr) auto;
-  align-items: center;
-  gap: 8px;
-  border: 0;
-  border-bottom: 1px solid #e8edf3;
-  padding: 7px 10px;
-}
-
-.v2-track-current-coverage > i {
   width: 7px;
   height: 7px;
+  flex: 0 0 auto;
   border-radius: 50%;
   background: #18a86b;
   box-shadow: 0 0 0 4px rgba(24, 168, 107, .1);
 }
 
-.v2-track-current-coverage.is-warning > i {
+.v2-track-current-evidence.is-warning > span > i {
   background: #eea33a;
   box-shadow: 0 0 0 4px rgba(238, 163, 58, .11);
 }
 
-.v2-track-current-card > .semi-card-body > .v2-track-current-coverage > span {
+.v2-track-current-evidence strong {
-  display: grid;
-  min-width: 0;
-  gap: 2px;
-  padding: 0;
-}
-
-.v2-track-current-coverage strong,
-.v2-track-current-coverage small {
   overflow: hidden;
+  color: #34475e;
+  font-size: 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.v2-track-current-coverage strong {
+.v2-track-current-evidence em {
-  color: #34475e;
+  flex: 0 0 auto;
-  font-size: 10px;
-}
-
-.v2-track-current-coverage small {
-  color: #8795a8;
-  font-size: 8px;
-}
-
-.v2-track-current-coverage em {
   color: #6d7e92;
   font-size: 8px;
   font-style: normal;
   white-space: nowrap;
 }
 
+.v2-track-current-evidence > small {
+  margin-left: auto;
+  overflow: hidden;
+  color: #7c8a9d;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .v2-track-current-card > .semi-card-body > p {
   min-height: 34px;
   padding: 8px 10px;
@@ -544,18 +525,12 @@
     padding: 6px 9px;
   }
 
-  .v2-track-current-card > .semi-card-body > .v2-track-current-source {
+  .v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
-    min-height: 31px;
+    min-height: 36px;
     padding: 4px 9px;
   }
 
-  .v2-track-current-card > .semi-card-body > .v2-track-current-coverage {
+  .v2-track-current-evidence > small {
-    min-height: 34px;
-    grid-template-columns: 7px minmax(0, 1fr) auto;
-    padding: 5px 9px;
-  }
-
-  .v2-track-current-coverage small {
     display: none;
   }
 
@@ -5710,23 +5685,23 @@
     height: 100%;
     min-height: 0;
     gap: 8px;
-    overflow: auto;
+    overflow: hidden;
     padding: 8px;
   }
 
   .v2-history-context-card.semi-card {
-    min-height: 118px;
+    min-height: 110px;
     border-radius: 11px;
   }
 
   .v2-history-context {
     display: flex;
-    min-height: 118px;
+    min-height: 110px;
     flex-direction: column;
   }
 
   .v2-history-context .v2-history-metrics {
-    min-height: 54px;
+    min-height: 52px;
     grid-template-columns: auto minmax(0, 1fr) auto;
     gap: 7px;
     border-right: 0;
@@ -5759,7 +5734,7 @@
   }
 
   .v2-history-context .v2-history-summary {
-    min-height: 64px;
+    min-height: 58px;
     flex: 1;
     grid-template-columns: 1.1fr .72fr 1.18fr .78fr;
   }
@@ -5788,13 +5763,15 @@
 
   .v2-history-main {
     display: flex;
-    height: auto;
+    height: 100%;
     min-height: 0;
+    flex: 1 1 0;
     flex-direction: column;
   }
 
   .v2-history-main > .v2-history-table-card.semi-card {
-    min-height: 430px;
+    min-height: 0;
+    flex: 1 1 0;
     order: 1;
   }
 
@@ -5806,9 +5783,9 @@
   }
 
   .v2-history-table-card .v2-workspace-panel-header {
-    min-height: 68px;
+    min-height: 58px;
-    align-items: flex-start;
+    align-items: center;
-    padding: 9px 8px;
+    padding: 7px 8px;
   }
 
   .v2-history-table-card .v2-workspace-panel-copy > .semi-typography:last-child {
@@ -5827,24 +5804,125 @@
   }
 
   .v2-history-table-card .v2-workspace-panel-actions > .semi-button {
-    width: 34px;
+    width: 32px;
-    min-width: 34px;
+    min-width: 32px;
-    min-height: 34px;
+    min-height: 32px;
     padding: 0;
   }
 
+  .v2-history-workspace {
+    min-height: 0;
+    flex: 1 1 0;
+    overflow: hidden;
+  }
+
+  .v2-history-table-card > .semi-card-body {
+    min-height: 0;
+  }
+
+  .v2-history-table-scroll.is-mobile-scroll {
+    min-height: 0;
+    flex: 1 1 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    scrollbar-gutter: stable;
+    scrollbar-width: auto;
+    touch-action: pan-y;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .v2-history-table-scroll.is-mobile-scroll:focus-visible {
+    outline: 2px solid rgba(18, 104, 223, .38);
+    outline-offset: -2px;
+  }
+
   .v2-history-mobile-list {
-    gap: 7px;
+    gap: 6px;
-    padding: 7px;
+    padding: 6px;
   }
 
   .v2-history-mobile-list > .v2-history-mobile-card.semi-card {
-    border-radius: 9px;
+    border-radius: 8px;
     box-shadow: none;
+    contain-intrinsic-size: auto 124px;
   }
 
   .v2-history-mobile-card-content {
-    padding: 11px;
+    padding: 8px 9px;
+  }
+
+  .v2-history-mobile-card-content header strong {
+    font-size: 13px;
+  }
+
+  .v2-history-mobile-card-content header small {
+    margin-top: 1px;
+    font-size: 9px;
+  }
+
+  .v2-history-mobile-card-content p {
+    margin: 5px 0;
+    font-size: 9px;
+  }
+
+  .v2-history-mobile-quality {
+    margin: 0 0 6px;
+    overflow: hidden;
+    font-size: 9px;
+    line-height: 12px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-history-mobile-card-content dl {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 0;
+    padding-top: 6px;
+  }
+
+  .v2-history-mobile-card-content dl > div {
+    min-width: 0;
+    padding: 0 5px;
+  }
+
+  .v2-history-mobile-card-content dl > div:first-child {
+    padding-left: 0;
+  }
+
+  .v2-history-mobile-card-content dl > div + div {
+    border-left: 1px solid #edf1f5;
+  }
+
+  .v2-history-mobile-card-content dt {
+    overflow: hidden;
+    font-size: 8px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-history-mobile-card-content dd {
+    margin-top: 2px;
+    overflow: hidden;
+    font-size: 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .v2-history-mobile-card-content footer {
+    display: none;
+  }
+}
+
+@media (max-width: 360px) {
+  .v2-history-mobile-card-content dl {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    row-gap: 6px;
+  }
+
+  .v2-history-mobile-card-content dl > div:nth-child(3) {
+    border-left: 0;
+    padding-left: 0;
   }
 }