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

refine Semi UI track replay workspace

Browse Source
This commit is contained in:
lingniu
2026-07-18 12:21:42 +08:00
parent a00276816b
commit e5bf76ea15
4 changed files with 87 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -45,7 +45,7 @@
/* Semi UI trajectory replay workspace: one evidence rail, one map overlay and
* one compact playback surface. */
.v2-track-page {
grid-template-columns: 326px minmax(0, 1fr);
grid-template-columns: 352px minmax(0, 1fr);
background: #edf2f7;
}
@@ -90,13 +90,13 @@
.v2-track-query-panel .v2-workspace-panel-copy > h5.semi-typography {
color: #26384f;
font-size: 15px;
font-size: 16px;
font-weight: 750;
}
.v2-track-query-panel .v2-workspace-panel-copy > .semi-typography {
color: #8491a2;
font-size: 10px;
font-size: 11px;
}
.v2-track-query-panel .v2-workspace-panel-actions {
@@ -105,13 +105,13 @@
.v2-track-query-panel .v2-track-query-toggle.semi-button {
width: auto;
min-width: 78px;
height: 32px;
min-width: 84px;
height: 34px;
justify-content: center;
border-radius: 7px;
padding: 0 8px;
padding: 0 10px;
color: #526780;
font-size: 10px;
font-size: 11px;
font-weight: 700;
}
@@ -128,24 +128,24 @@
}
.v2-track-query-panel .v2-track-query-summary {
min-height: 56px;
padding: 7px 12px 11px;
min-height: 58px;
padding: 8px 14px 11px;
background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
}
.v2-track-query-panel .v2-track-query-summary strong {
color: #30445d;
font-size: 12px;
font-size: 13px;
}
.v2-track-query-panel .v2-track-query-summary small,
.v2-track-query-panel .v2-track-query-summary .semi-tag {
font-size: 9px;
font-size: 10px;
}
.v2-track-query-panel .v2-track-query {
border-bottom: 0;
padding: 10px 12px 13px;
padding: 12px 14px 15px;
}
.v2-track-rail-result {
@@ -158,31 +158,31 @@
}
.v2-track-result-header {
min-height: 62px;
min-height: 64px;
background: #fbfcfe;
padding: 9px 12px;
padding: 10px 14px;
}
.v2-track-result-header .v2-workspace-panel-copy > h5.semi-typography {
color: #25384f;
font-size: 14px;
font-size: 15px;
}
.v2-track-result-header .v2-workspace-panel-copy > .semi-typography {
color: #8592a3;
font-size: 9px;
font-size: 11px;
}
.v2-track-result-header .v2-workspace-panel-meta .semi-tag {
border-radius: 999px;
padding-inline: 8px;
font-size: 10px;
padding-inline: 10px;
font-size: 11px;
font-weight: 700;
}
.v2-track-rail-tabs {
height: 42px;
flex-basis: 42px;
height: 46px;
flex-basis: 46px;
border-block: 1px solid #e3e9f1;
border-bottom-color: #dfe6ef;
background: #fff;
@@ -190,8 +190,8 @@
}
.v2-track-rail-tabs > .semi-button {
height: 40px;
font-size: 11px;
height: 44px;
font-size: 12px;
}
.v2-track-rail-scroll {
@@ -224,7 +224,7 @@
.v2-track-overview-section .v2-workspace-panel-header .semi-tag {
flex: 0 0 auto;
border-radius: 999px;
font-size: 9px;
font-size: 10px;
}
.v2-track-quality-card.is-good {
@@ -285,8 +285,8 @@
.v2-track-current-card.semi-card {
top: 14px;
left: 14px;
width: min(360px, calc(100% - 330px));
min-width: 310px;
width: min(392px, calc(100% - 350px));
min-width: 340px;
border: 1px solid rgba(210, 221, 234, .97);
border-radius: 12px;
background: rgba(255, 255, 255, .97);
@@ -295,8 +295,8 @@
}
.v2-track-current-card .v2-workspace-panel-header {
min-height: 52px;
padding: 8px 11px;
min-height: 56px;
padding: 9px 12px;
}
.v2-track-current-card .v2-workspace-panel-meta .semi-tag {
@@ -304,7 +304,7 @@
justify-content: center;
border-radius: 999px;
padding-inline: 8px;
font-size: 10px;
font-size: 11px;
font-weight: 750;
}
@@ -316,7 +316,7 @@
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
min-width: 0;
padding: 7px 9px;
padding: 9px 10px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span + span {
@@ -325,32 +325,32 @@
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics small {
color: #8491a2;
font-size: 9px;
font-size: 10px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics strong {
margin-top: 4px;
color: #25384f;
font-size: 12px;
font-size: 14px;
text-shadow: none;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
display: flex;
min-height: 38px;
min-height: 42px;
align-items: center;
gap: 7px;
border: 0;
border-bottom: 1px solid #e8edf3;
padding: 6px 10px;
padding: 7px 11px;
color: #66778c;
font-size: 9px;
font-size: 10px;
}
.v2-track-current-evidence .semi-tag {
flex: 0 0 auto;
border-radius: 6px;
font-size: 8px;
font-size: 10px;
}
.v2-track-current-evidence > span {
@@ -380,7 +380,7 @@
.v2-track-current-evidence strong {
overflow: hidden;
color: #34475e;
font-size: 10px;
font-size: 11px;
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -388,7 +388,7 @@
.v2-track-current-evidence em {
flex: 0 0 auto;
color: #6d7e92;
font-size: 8px;
font-size: 9px;
font-style: normal;
white-space: nowrap;
}
@@ -397,20 +397,20 @@
margin-left: auto;
overflow: hidden;
color: #7c8a9d;
font-size: 8px;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-track-current-card > .semi-card-body > p {
min-height: 34px;
padding: 8px 10px;
min-height: 38px;
padding: 9px 11px;
color: #52657b;
font-size: 9px;
font-size: 10px;
}
.v2-track-playback-dock.semi-card {
min-height: 96px;
min-height: 104px;
border-top-color: rgba(205, 216, 229, .98);
background: rgba(255, 255, 255, .97);
box-shadow: 0 -10px 30px rgba(24, 41, 63, .12);
@@ -423,18 +423,18 @@
}
.v2-track-playback-dock > .semi-card-body {
min-height: 96px;
grid-template-columns: 136px minmax(220px, 1fr) auto;
gap: 14px;
padding: 10px 14px !important;
min-height: 104px;
grid-template-columns: 150px minmax(240px, 1fr) auto;
gap: 16px;
padding: 11px 16px !important;
}
.v2-track-dock-summary strong {
font-size: 17px;
font-size: 20px;
}
.v2-track-dock-summary span {
font-size: 9px;
font-size: 11px;
}
.v2-track-segment-rail,
@@ -448,7 +448,7 @@
}
.v2-track-progress-meta {
font-size: 9px;
font-size: 10px;
}
.v2-track-dock-controls {
@@ -456,21 +456,21 @@
}
.v2-track-dock-controls > .semi-button {
width: 32px;
min-width: 32px;
height: 32px;
width: 36px;
min-width: 36px;
height: 36px;
border-radius: 8px;
}
.v2-track-dock-controls > .semi-button.is-primary {
width: 40px;
min-width: 40px;
height: 40px;
width: 44px;
min-width: 44px;
height: 44px;
}
@media (max-width: 1180px) {
.v2-track-page {
grid-template-columns: 304px minmax(0, 1fr);
grid-template-columns: 320px minmax(0, 1fr);
}
.v2-track-page.is-rail-collapsed {
@@ -479,14 +479,14 @@
.v2-track-current-card.semi-card {
top: 62px;
width: min(360px, calc(100% - 28px));
width: min(382px, calc(100% - 28px));
min-width: 0;
}
.v2-track-page.is-rail-collapsed .v2-track-current-card.semi-card {
top: 14px;
width: min(360px, calc(100% - 330px));
min-width: 310px;
width: min(382px, calc(100% - 350px));
min-width: 340px;
}
.v2-track-playback-dock > .semi-card-body {
@@ -512,12 +512,12 @@
}
.v2-track-query-panel .v2-track-query-header {
min-height: 52px;
padding: 8px 12px;
min-height: 54px;
padding: 8px 13px;
}
.v2-track-result-header {
min-height: 58px;
min-height: 60px;
}
.v2-track-stage-tools {
@@ -546,17 +546,17 @@
}
.v2-track-current-card .v2-workspace-panel-header {
min-height: 46px;
padding: 7px 9px;
min-height: 48px;
padding: 7px 10px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-metrics > span {
padding: 6px 9px;
padding: 7px 8px;
}
.v2-track-current-card > .semi-card-body > .v2-track-current-evidence {
min-height: 36px;
padding: 4px 9px;
min-height: 38px;
padding: 5px 9px;
}
.v2-track-current-evidence > small {
@@ -569,7 +569,7 @@
.v2-track-playback-dock.semi-card,
.v2-track-playback-dock > .semi-card-body {
min-height: 102px;
min-height: 106px;
}
.v2-track-playback-dock > .semi-card-body {
@@ -579,11 +579,11 @@
}
.v2-track-rail-expand {
bottom: calc(112px + env(safe-area-inset-bottom));
bottom: calc(116px + env(safe-area-inset-bottom));
}
.v2-track-stage:has(.v2-track-current-card) .v2-track-rail-expand {
bottom: calc(252px + env(safe-area-inset-bottom));
bottom: calc(264px + env(safe-area-inset-bottom));
}
}