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

refactor: polish semi mileage workspace

Browse Source
This commit is contained in:
lingniu
2026-07-19 14:19:43 +08:00
parent 4da26ad3ba
commit 2d987fd185
3 changed files with 245 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -14,7 +14,7 @@
justify-content: space-between;
gap: 16px;
border-bottom: 1px solid var(--v2-border);
background: linear-gradient(180deg, #fff 0%, #fbfcfe 100%);
background: #fff;
padding: 8px 14px;
}
@@ -6978,7 +6978,7 @@
gap: 9px;
border-bottom: 1px solid #e6ebf2;
border-radius: 12px 12px 0 0;
background: linear-gradient(100deg, #f8fbff 0%, #f5f8fc 58%, #fbfcfe 100%);
background: #f8fafc;
padding: 7px 12px;
}
@@ -9982,7 +9982,7 @@
display: flex;
width: 100%;
max-width: 1480px;
min-height: 52px;
min-height: 48px;
flex: 0 0 auto;
align-items: center;
justify-content: space-between;
@@ -9992,7 +9992,7 @@
border-radius: 10px;
background: #fff;
padding: 7px 9px 7px 14px;
box-shadow: 0 6px 20px rgba(31, 50, 76, .035);
box-shadow: 0 4px 14px rgba(31, 50, 76, .03);
}
.v2-workspace-command-copy {
@@ -10642,8 +10642,8 @@
/* Final cascade layer for the shared command hierarchy. */
.v2-workspace-command-bar {
box-sizing: border-box;
height: 52px;
min-height: 52px;
height: 48px;
min-height: 48px;
padding-block: 5px;
}
@@ -14541,8 +14541,8 @@
* operations workspaces.
*/
.v2-mileage-page {
gap: 10px;
padding: 14px 18px 16px;
gap: 8px;
padding: 12px 16px 14px;
}
.v2-mileage-discovery-shell {
@@ -14552,9 +14552,9 @@
gap: 0;
overflow: visible;
border: 1px solid #d8e3ef;
border-radius: 14px;
border-radius: 12px;
background: #fff;
box-shadow: 0 9px 28px rgba(31, 53, 80, .055);
box-shadow: 0 7px 22px rgba(31, 53, 80, .045);
}
.v2-mileage-discovery-shell > .v2-mileage-command-bar {
@@ -14564,7 +14564,7 @@
min-height: 46px;
border: 0;
border-bottom: 1px solid #e3eaf2;
border-radius: 14px 14px 0 0;
border-radius: 12px 12px 0 0;
padding-inline: 13px 10px;
box-shadow: none;
}
@@ -14579,7 +14579,7 @@
width: 100%;
overflow: visible;
border: 0;
border-radius: 0 0 14px 14px;
border-radius: 0 0 12px 12px;
box-shadow: none;
}
@@ -14590,23 +14590,67 @@
.v2-mileage-query-panel .v2-workspace-filter-heading {
min-height: 44px;
border-bottom-color: #e3eaf2;
background: linear-gradient(100deg, #f7faff 0%, #f9fbfd 58%, #fff 100%);
background: #f8fafc;
padding-inline: 13px;
}
.v2-mileage-query-panel .v2-mileage-filter {
gap: 10px;
grid-template-columns: minmax(220px, 1.15fr) minmax(224px, .95fr) auto auto minmax(228px, auto);
align-items: end;
gap: 8px;
background: #fff;
padding: 11px 12px 12px;
padding: 8px 10px;
}
.v2-mileage-filter > label {
gap: 5px;
gap: 4px;
color: #607187;
font-size: 12px;
font-size: 11px;
font-weight: 650;
}
.v2-mileage-filter > label > span:first-child {
min-height: 14px;
font-size: 10px;
line-height: 14px;
}
.v2-mileage-query-panel .v2-mileage-vehicle-field > small {
display: none;
}
.v2-mileage-date-range.semi-datepicker {
width: 100%;
min-height: 38px;
}
.v2-mileage-date-range .semi-datepicker-input {
width: 100%;
}
.v2-mileage-date-range .semi-input-wrapper {
min-height: 38px;
border-color: #d8e2ed;
border-radius: 8px;
background: #fbfcfe;
}
.v2-mileage-date-range .semi-input-wrapper:hover {
border-color: #b9c9dc;
background: #fff;
}
.v2-mileage-date-range .semi-input-wrapper-focus {
border-color: #75a5ed;
background: #fff;
box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}
.v2-mileage-date-range .semi-input {
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.v2-mileage-multiselect,
.v2-mileage-filter > label > .semi-input-wrapper {
min-height: 38px;
@@ -14644,6 +14688,11 @@
box-shadow: 0 4px 12px rgba(18, 104, 223, .16);
}
.v2-mileage-inline-submit.semi-button,
.v2-mileage-source-strategy {
margin-top: 0;
}
.v2-mileage-source-trigger.semi-button {
min-height: 38px;
border-color: #d8e3ef;
@@ -14674,6 +14723,12 @@
padding: 3px;
}
.v2-mileage-ranges > .semi-button-group {
display: flex;
min-width: 0;
gap: 2px;
}
.v2-mileage-ranges .semi-button {
min-height: 30px;
border-radius: 6px;
@@ -14741,9 +14796,9 @@
}
.v2-mileage-results > .semi-card-body > .v2-workspace-panel-header {
min-height: 50px;
min-height: 46px;
border-bottom-color: #e2e9f1;
background: linear-gradient(90deg, #fff 0%, #fbfcfe 100%);
background: #fff;
padding-inline: 14px;
}
@@ -14772,7 +14827,7 @@
align-items: center;
gap: 14px;
border-bottom: 1px solid #e2e9f1;
background: linear-gradient(90deg, #f9fbfe 0%, #fff 100%);
background: #f8fafc;
padding: 5px 14px;
color: #6c7d92;
font-size: 11px;
@@ -14897,11 +14952,25 @@
}
.v2-mileage-results > .semi-card-body > footer {
min-height: 40px;
min-height: 36px;
border-top-color: #e3eaf2;
background: #fbfcfe;
}
.v2-mileage-export-progress {
min-height: 40px;
padding: 7px 14px;
}
.v2-mileage-export-progress > .v2-mileage-export-bar {
min-width: 160px;
flex: 1 1 auto;
}
.v2-mileage-export-progress > .v2-mileage-export-spinner {
margin-left: auto;
}
.v2-mileage-evidence {
min-height: 20px;
align-items: center;
@@ -14936,11 +15005,31 @@
@media (min-width: 681px) and (max-width: 1050px) {
.v2-mileage-query-panel .v2-mileage-filter {
grid-template-columns: minmax(200px, 1.25fr) minmax(220px, 1fr) auto;
grid-template-areas:
"vehicle date submit"
"source ranges ranges";
row-gap: 10px;
}
.v2-mileage-summary > .semi-card-body {
grid-template-columns: minmax(285px, 1fr) minmax(0, 2fr);
.v2-mileage-query-panel .v2-mileage-vehicle-field {
grid-area: vehicle;
}
.v2-mileage-query-panel .v2-mileage-date-field {
grid-area: date;
}
.v2-mileage-query-panel .v2-mileage-filter > .v2-primary-button {
grid-area: submit;
}
.v2-mileage-query-panel .v2-mileage-source-strategy {
grid-area: source;
}
.v2-mileage-query-panel .v2-mileage-ranges {
grid-area: ranges;
}
}
@@ -14970,6 +15059,7 @@
}
.v2-mileage-filter > label > .semi-input-wrapper,
.v2-mileage-date-range .semi-input-wrapper,
.v2-mileage-multiselect,
.v2-mileage-source-trigger.semi-button,
.v2-mileage-filter > .v2-primary-button.semi-button {
@@ -14981,6 +15071,30 @@
border-radius: 10px;
}
.v2-mileage-query-panel .v2-mileage-vehicle-field > small {
display: block;
}
.v2-mileage-date-range.semi-datepicker,
.v2-mileage-date-range .semi-datepicker-input,
.v2-mileage-date-range .semi-input-wrapper {
width: 100%;
}
.v2-mileage-ranges > .semi-button-group {
width: 100%;
overflow-x: auto;
scrollbar-width: none;
}
.v2-mileage-ranges > .semi-button-group::-webkit-scrollbar {
display: none;
}
.v2-mileage-ranges > .semi-button-group > .semi-button {
flex: 1 0 auto;
}
.v2-mileage-summary-secondary .v2-mileage-summary-card strong {
font-size: 16px;
}
@@ -15645,7 +15759,7 @@
.v2-workspace-metric-rail.is-queue > .semi-card-body {
display: grid;
min-height: 58px;
min-height: 54px;
grid-template-columns: minmax(0, 1fr);
}
@@ -15662,9 +15776,9 @@
.v2-workspace-metric-list > span {
display: grid;
min-width: 0;
min-height: 58px;
min-height: 54px;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-rows: 14px 24px;
align-content: center;
column-gap: 10px;
padding: 7px 13px;
@@ -15681,7 +15795,7 @@
.v2-workspace-metric-action.semi-button {
width: 100%;
height: 100%;
min-height: 58px;
min-height: 54px;
border-radius: 0;
padding: 0;
color: inherit;
@@ -15700,9 +15814,9 @@
display: grid;
width: 100%;
min-width: 0;
min-height: 58px;
min-height: 54px;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-rows: 14px 24px;
align-content: center;
column-gap: 10px;
padding: 7px 13px;
@@ -15717,6 +15831,7 @@
font-weight: 650;
line-height: 14px;
white-space: nowrap;
margin: 0;
}
.v2-workspace-metric-list > span > strong,
@@ -15727,6 +15842,7 @@
font-variant-numeric: tabular-nums;
line-height: 24px;
white-space: nowrap;
margin: 0;
}
.v2-workspace-metric-list > span > em,
@@ -15741,6 +15857,7 @@
line-height: 14px;
text-overflow: ellipsis;
white-space: nowrap;
margin: 0;
}
.v2-workspace-metric-list > span.is-secondary > strong,
@@ -15749,8 +15866,8 @@
}
.v2-workspace-metric-list > span.is-primary {
background: linear-gradient(145deg, #edf5ff 0%, #f8fbff 100%);
box-shadow: inset 0 -3px #1f6feb;
background: #f5f9ff;
box-shadow: inset 3px 0 #3b82f6;
}
.v2-workspace-metric-list > span.is-primary > :is(small, strong),
@@ -15759,8 +15876,8 @@
}
.v2-workspace-metric-list > span.is-danger {
background: linear-gradient(145deg, #fff 0%, #fff8f7 100%);
box-shadow: inset 0 -3px #e2554f;
background: #fff8f7;
box-shadow: inset 3px 0 #e2554f;
}
.v2-workspace-metric-list > span.is-danger > :is(small, strong),
@@ -15784,21 +15901,21 @@
}
.v2-workspace-metric-list > span.is-action.is-danger {
background: linear-gradient(145deg, #fff 0%, #fff8f7 100%);
background: #fff8f7;
}
.v2-workspace-metric-list > span.is-action.is-warning {
background: linear-gradient(145deg, #fff 0%, #fffcf5 100%);
background: #fffcf5;
}
.v2-workspace-metric-list > span.is-action.is-active {
background: linear-gradient(145deg, #edf5ff 0%, #f8fbff 100%);
box-shadow: inset 0 -3px #1f6feb;
background: #f5f9ff;
box-shadow: inset 3px 0 #3b82f6;
}
.v2-workspace-metric-list > span.is-action.is-active.is-danger {
background: linear-gradient(145deg, #fff1ef 0%, #fff8f7 100%);
box-shadow: inset 0 -3px #e2554f;
background: #fff4f2;
box-shadow: inset 3px 0 #e2554f;
}
.v2-workspace-metric-context {
@@ -23245,7 +23362,7 @@
.v2-mileage-summary.v2-workspace-metric-rail.is-queue > .semi-card-body {
display: grid;
height: auto;
min-height: 58px;
min-height: 54px;
grid-template-columns: minmax(0, 1fr);
gap: 0;
}
@@ -23256,7 +23373,12 @@
.v2-mileage-summary .v2-workspace-metric-list > span {
display: grid;
min-height: 58px;
min-height: 54px;
}
.v2-mileage-summary .v2-workspace-metric-list > span > :is(small, strong, em),
.v2-mileage-summary .v2-workspace-metric-action .semi-button-content > :is(small, strong, em) {
margin: 0;
}
.v2-mileage-summary-unit {
@@ -23290,6 +23412,10 @@
.v2-mileage-summary .v2-workspace-metric-list > span {
min-height: 56px;
}
.v2-mileage-summary .v2-workspace-metric-list > span.is-secondary {
display: none;
}
}
/*