feat: refine vehicle console and self-repair workflow

This commit is contained in:
vee
2026-08-13 17:38:04 +08:00
parent fd3c219c39
commit 0ec43052f3
20 changed files with 3925 additions and 552 deletions
+75 -43
View File
@@ -29,24 +29,6 @@
linear-gradient(158deg, var(--v2-sidebar) 0%, #eef2fa 61%, var(--v2-sidebar-deep) 132%);
}
.console-v2[data-module="self-calibration"] .v2-avatar {
width: 46px;
height: 46px;
background:
radial-gradient(circle at 28% 25%, rgba(255, 255, 255, 0.96), transparent 18%),
linear-gradient(135deg, #183c7a 3%, #6688d4 48%, #e5b0c8 55%, #315eaa 100%);
}
.console-v2[data-module="self-calibration"] .v2-profile {
grid-template-columns: 46px minmax(0, 1fr) 28px;
gap: 8px;
}
.console-v2[data-module="self-calibration"] .v2-role-select > span,
.console-v2[data-module="self-calibration"] .v2-role-select .v2-dropdown-trigger {
font-size: 18px;
}
.console-v2[data-module="self-calibration"] .v2-role-select > .v2-dropdown-trigger {
max-width: none;
gap: 5px;
@@ -80,7 +62,7 @@
grid-row: 2;
grid-template-rows: auto minmax(0, 1fr);
gap: 15px;
padding: clamp(14px, 1.55vw, 24px) 0 0;
padding: var(--v2-module-title-block) 0 0;
overflow: hidden;
}
@@ -98,7 +80,7 @@
}
.v2-calibration-mode-switch button {
min-height: 52px;
min-height: var(--v2-sidebar-item-height);
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
align-items: center;
@@ -123,14 +105,15 @@
.v2-calibration-mode-switch button:hover {
color: var(--v2-accent-strong);
background: rgba(255, 255, 255, 0.52);
background: color-mix(in srgb, var(--v2-accent-soft) 34%, white);
border-color: color-mix(in srgb, var(--v2-accent) 10%, white);
}
.v2-calibration-mode-switch button.active {
color: #111f20;
background: rgba(255, 255, 255, 0.94);
border-color: rgba(255, 255, 255, 0.86);
box-shadow: 0 10px 28px rgba(30, 56, 107, 0.08);
border-color: color-mix(in srgb, var(--v2-accent) 18%, white);
box-shadow: 0 10px 28px color-mix(in srgb, var(--v2-accent) 10%, transparent);
}
.v2-calibration-mode-switch button.active svg {
@@ -139,28 +122,30 @@
.v2-calibration-config-stack {
display: grid;
gap: 7px;
gap: 8px;
padding-left: 9px;
border-left: 1px solid color-mix(in srgb, var(--v2-accent) 14%, transparent);
}
.v2-calibration-config-card {
min-width: 0;
min-height: 52px;
min-height: var(--v2-sidebar-card-height);
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
padding: 9px 11px;
gap: 8px;
padding: 6px 8px;
color: #314565;
background: rgba(255, 255, 255, 0.52);
border: 1px solid rgba(49, 94, 170, 0.11);
border-radius: 13px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(255, 255, 255, 0.78);
border-radius: var(--v2-sidebar-card-radius);
}
.v2-calibration-config-card > svg {
width: 18px;
height: 18px;
width: 17px;
height: 17px;
justify-self: center;
color: #5f7fb7;
color: var(--v2-accent);
}
.v2-calibration-config-card > div {
@@ -170,14 +155,15 @@
.v2-calibration-config-card small {
color: #7786a2;
font-size: 9px;
font-size: 8px;
font-weight: 700;
}
.v2-calibration-config-card strong {
overflow: hidden;
color: #1e386b;
font-size: 12px;
margin-top: 2px;
font-size: 11px;
font-weight: 850;
text-overflow: ellipsis;
white-space: nowrap;
@@ -207,7 +193,7 @@
width: 100%;
height: 18px;
color: #1e386b;
font-size: 12px;
font-size: 11px;
font-weight: 850;
text-align: left;
}
@@ -274,6 +260,7 @@
align-items: center;
justify-content: space-between;
gap: 18px;
margin-inline: var(--v2-module-title-inline);
}
.v2-calibration-heading > div:first-child {
@@ -466,17 +453,32 @@
overflow: hidden;
}
.v2-calibration-seat-scene .calibration-cartoon-viewer {
cursor: grab;
touch-action: none;
user-select: none;
}
.v2-calibration-seat-scene .calibration-cartoon-viewer.dragging {
cursor: grabbing;
}
.v2-calibration-seat-scene .seat-model-host canvas {
width: 100%;
height: 100%;
display: block;
outline: 0;
cursor: grab;
pointer-events: none;
touch-action: none;
}
.v2-calibration-seat-scene .seat-model-host canvas:active {
cursor: grabbing;
.v2-calibration-seat-scene .v2-repair-seat-fallback {
inset: 4px 18px 18px;
transform: scale(0.82);
}
.v2-calibration-seat-scene .repair-css-halo {
bottom: 10px;
}
.v2-calibration-seat-scene .model-loading {
@@ -1090,7 +1092,7 @@
min-width: 0;
min-height: 0;
display: grid;
grid-template-columns: minmax(300px, 1.15fr) minmax(250px, 0.94fr) minmax(270px, 0.91fr);
grid-template-columns: minmax(420px, 1.06fr) minmax(380px, 0.94fr);
gap: 10px;
}
@@ -1108,8 +1110,7 @@
}
.v2-calibration-live-grid .v2-calibration-stage > header,
.v2-calibration-live-grid .v2-calibration-video-panel > header,
.v2-calibration-live-grid .v2-calibration-mqtt-panel > header {
.v2-calibration-live-grid .v2-calibration-video-panel > header {
align-items: center;
}
@@ -1460,6 +1461,37 @@
margin-top: auto;
}
@media (max-height: 820px) {
.console-v2[data-module="self-calibration"] .v2-calibration-sidebar {
margin-top: 14px;
}
.v2-calibration-sidebar .v2-section-heading h2 {
margin-bottom: 10px;
}
.v2-calibration-sidebar > .v2-field-caption {
margin-bottom: 5px;
font-size: 11px;
}
.v2-calibration-mode-switch button {
min-height: 41px;
grid-template-columns: 21px minmax(0, 1fr);
padding: 0 9px;
font-size: 10px;
}
.v2-calibration-mode-switch button svg {
width: 17px;
height: 17px;
}
.v2-calibration-config-card {
min-height: 38px;
}
}
@media (max-width: 1180px) {
.v2-calibration-hero-grid {
grid-template-columns: minmax(0, 1.5fr) minmax(245px, 0.75fr);
@@ -1474,7 +1506,7 @@
}
.v2-calibration-live-grid {
grid-template-columns: minmax(220px, 1.1fr) minmax(210px, 0.94fr) minmax(225px, 0.96fr);
grid-template-columns: minmax(390px, 1.06fr) minmax(340px, 0.94fr);
}
.v2-calibration-live-axes .v2-calibration-axis-grid {