shishengliang/lingniu-vehicle-ingest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine Semi UI track and history workspaces

Browse Source
This commit is contained in:
lingniu
2026-07-18 04:02:49 +08:00
parent 8291f5ea69
commit cff2e07a57
5 changed files with 170 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -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} />}

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

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

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

@@ -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>

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

@@ -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;
grid-template-columns: none;
min-height: 38px;
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 {
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 {
.v2-track-current-evidence > span > 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 {
display: grid;
min-width: 0;
gap: 2px;
padding: 0;
}
.v2-track-current-coverage strong,
.v2-track-current-coverage small {
.v2-track-current-evidence strong {
overflow: hidden;
color: #34475e;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-track-current-coverage strong {
color: #34475e;
font-size: 10px;
}
.v2-track-current-coverage small {
color: #8795a8;
font-size: 8px;
}
.v2-track-current-coverage em {
.v2-track-current-evidence em {
flex: 0 0 auto;
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 {
min-height: 31px;
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
min-height: 36px;
padding: 4px 9px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-coverage {
min-height: 34px;
grid-template-columns: 7px minmax(0, 1fr) auto;
padding: 5px 9px;
}
.v2-track-current-coverage small {
.v2-track-current-evidence > 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;
align-items: flex-start;
padding: 9px 8px;
min-height: 58px;
align-items: center;
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;
min-width: 34px;
min-height: 34px;
width: 32px;
min-width: 32px;
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;
padding: 7px;
gap: 6px;
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;
}
}