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-source"><Tag color="blue" type="light" size="small">{current?.protocol || '未知来源'}</Tag><span>总里程 {number(current?.totalMileageKm ?? 0)} km</span><span>{alarm(current?.alarmFlag)}</span></div>
-          <div className={`v2-track-current-coverage${track.coverage.complete ? '' : ' is-warning'}`}><i />
-            <span><strong>{track.coverage.complete ? '时间窗完整' : '仅展示最新切片'}</strong><small title={track.coverage.evidence}>{track.coverage.evidence}</small></span>
+          <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>
+            <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>