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

refactor(ui): converge semi track workspace

Browse Source
This commit is contained in:
lingniu
2026-07-19 17:44:21 +08:00
parent 263107d47a
commit 53767c707c
2 changed files with 177 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -55,7 +55,7 @@ function number(value: number, digits = 1) {
}
function direction(value?: number) {
if (value === undefined || !Number.isFinite(value)) return '方向 —';
if (value === undefined || !Number.isFinite(value)) return '—';
const normalized = ((value % 360) + 360) % 360;
const names = ['北', '东北', '东', '东南', '南', '西南', '西', '西北'];
return `${number(normalized, 0)}° ${names[Math.round(normalized / 45) % names.length]}`;
@@ -512,7 +512,7 @@ export default function TrackPage() {
<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>{trackPointMileageAvailable(current) ? number(current?.totalMileageKm ?? 0) : '—'}{trackPointMileageAvailable(current) ? <em> km</em> : null}</strong></span>
<span><small>累计里程</small><strong>{trackPointMileageAvailable(current) ? number(current?.totalMileageKm ?? 0) : '—'}{trackPointMileageAvailable(current) ? <em> km</em> : null}</strong></span>
</div>
<div className={`v2-track-current-evidence v2-track-current-coverage${track.coverage.complete ? '' : ' is-warning'}`}>
<ProtocolTag className="v2-track-protocol-tag" protocol={current?.protocol} compact />

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

@@ -23465,6 +23465,181 @@
}
}
/*
* Semi UI replay workspace convergence.
* Keep the map dominant while giving the evidence rail, live point card and
* transport controls the same calm surface hierarchy as the migrated
* directory and history workspaces.
*/
@media (min-width: 701px) {
.v2-track-page {
grid-template-columns: 344px minmax(0, 1fr);
gap: 10px;
padding: 10px;
background: #f4f7fa;
}
.v2-track-page.is-rail-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
.v2-track-page > .v2-monitor-return {
margin: -10px -10px 0;
}
.v2-track-rail {
padding: 0;
background: transparent;
box-shadow: none;
}
.v2-track-rail-shell.semi-card,
.v2-track-stage {
border: 1px solid #dce5ef;
border-radius: 14px;
box-shadow: 0 8px 26px rgba(31, 52, 78, .07);
}
.v2-track-stage {
overflow: hidden;
}
.v2-track-query-panel .v2-track-query-header.v2-workspace-command-bar {
min-height: 62px;
padding: 9px 8px 9px 13px;
}
.v2-track-query-header .v2-workspace-command-copy > .semi-typography:first-child {
font-size: 15px;
letter-spacing: -.01em;
}
.v2-track-query-panel .v2-track-query-toggle.semi-button {
min-width: 78px;
height: 32px;
}
.v2-track-result-metric-rail.is-queue > .semi-card-body,
.v2-track-result-metric-rail .v2-workspace-metric-list > span {
min-height: 68px;
}
.v2-track-result-metric-rail .v2-workspace-metric-list > span.is-primary {
background: #f4f8ff;
box-shadow: inset 0 2px #6d9ee9;
}
.v2-track-result-metric-rail .v2-workspace-metric-list > span > strong,
.v2-track-result-metric-rail .v2-workspace-metric-list > span.is-secondary > strong {
font-size: clamp(14px, 1.2vw, 18px);
font-weight: 740;
}
.v2-track-rail-tabs {
height: 44px;
flex-basis: 44px;
}
.v2-track-rail-tabs > .semi-button {
height: 42px;
}
.v2-track-current-card.semi-card {
top: 12px;
left: 12px;
width: min(404px, calc(100% - 350px));
border-radius: 13px;
box-shadow: 0 14px 38px rgba(26, 47, 73, .14);
}
.v2-track-current-card .v2-workspace-panel-header {
min-height: 54px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
padding: 10px 11px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong {
font-size: 15px;
line-height: 20px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
min-height: 40px;
}
.v2-track-current-card > .semi-card-body > p {
min-height: 40px;
font-size: 11px;
line-height: 20px;
}
.v2-track-stage-tools {
top: 12px;
right: 12px;
}
.v2-track-playback-dock.semi-card,
.v2-track-playback-dock > .semi-card-body {
min-height: 96px;
}
.v2-track-playback-dock.semi-card {
border-top-color: #dce5ef;
box-shadow: 0 -8px 24px rgba(25, 43, 66, .1);
}
.v2-track-playback-dock > .semi-card-body {
gap: 14px;
padding: 9px 14px !important;
}
.v2-track-segment-rail,
.v2-track-segment-placeholder {
height: 6px;
}
.v2-track-progress-slider.semi-slider-wrapper {
margin: 7px 0 3px;
}
}
@media (max-width: 1180px) and (min-width: 701px) {
.v2-track-page {
grid-template-columns: 310px minmax(0, 1fr);
}
.v2-track-page.is-rail-collapsed {
grid-template-columns: 0 minmax(0, 1fr);
}
}
@media (max-width: 700px) {
.v2-track-page.is-mobile-layout {
background: #edf2f7;
}
.v2-track-current-card.semi-card,
.v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card {
border-color: #d7e1ed;
box-shadow: 0 12px 30px rgba(25, 45, 70, .15);
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong {
font-size: 13px;
}
.v2-track-playback-dock.semi-card {
border-top-color: #d9e3ee;
box-shadow: 0 -8px 24px rgba(24, 42, 64, .11);
}
.v2-track-dock-controls > .semi-button.is-primary {
box-shadow: 0 7px 18px rgba(0, 100, 250, .22);
}
}
/*
* Monitor fleet summary.
* Operational state remains prominent; high-volume ingest evidence is kept