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

refine Semi UI history workspace

Browse Source
This commit is contained in:
lingniu
2026-07-18 02:57:45 +08:00
parent 1a3a7d49ec
commit bb3820bfaa
5 changed files with 489 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5396,3 +5396,442 @@
min-height: 330px;
}
}
/*
* Semi UI history workspace refinement.
* Keep one query surface and one evidence surface; the table owns the viewport.
*/
.v2-history-context-card.semi-card {
min-width: 0;
min-height: 78px;
flex: 0 0 auto;
overflow: hidden;
border: 1px solid #dce5ef;
border-radius: 10px;
background: #fff;
box-shadow: 0 6px 20px rgba(31, 47, 70, .045);
}
.v2-history-context-card > .semi-card-body {
height: 100%;
}
.v2-history-context {
display: grid;
min-width: 0;
min-height: 78px;
grid-template-columns: minmax(360px, 1.2fr) minmax(440px, .8fr);
}
.v2-history-context .v2-history-metrics {
display: grid;
min-width: 0;
min-height: 78px;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border-right: 1px solid #e5ebf2;
background: linear-gradient(90deg, #f8fbff 0%, #fff 30%);
padding: 12px 14px;
}
.v2-history-metrics-heading {
display: flex;
flex-direction: column;
gap: 4px;
white-space: nowrap;
}
.v2-history-metrics-heading > strong {
color: #30445d;
font-size: 12px;
font-weight: 720;
}
.v2-history-metrics-heading > small {
color: #8795a8;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.v2-history-context .v2-history-metric-tag.semi-tag {
height: 30px;
border-color: #c2d8f8;
border-radius: 7px;
background: #edf5ff;
font-size: 11px;
}
.v2-history-context .v2-history-metrics-manage.semi-button {
min-width: 88px;
min-height: 34px;
flex: 0 0 auto;
border: 1px solid #d9e4f1;
border-radius: 8px;
background: #fff;
color: #526983;
font-size: 11px;
}
.v2-history-context .v2-history-summary {
display: grid;
min-width: 0;
min-height: 78px;
grid-template-columns: 1.05fr .75fr 1.45fr .8fr;
}
.v2-history-context .v2-history-summary > div {
position: relative;
display: flex;
min-width: 0;
justify-content: center;
flex-direction: column;
padding: 10px 13px;
}
.v2-history-context .v2-history-summary > div + div::before {
position: absolute;
inset: 17px auto 17px 0;
width: 1px;
background: #e5ebf2;
content: '';
}
.v2-history-context .v2-history-summary small {
color: #7c8a9d;
font-size: 10px;
white-space: nowrap;
}
.v2-history-context .v2-history-summary strong {
margin-top: 6px;
overflow: hidden;
color: #27384f;
font-size: 17px;
font-variant-numeric: tabular-nums;
font-weight: 760;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-context .v2-history-summary .is-primary strong {
color: #1268df;
font-size: 21px;
}
.v2-history-context .v2-history-summary strong.is-source {
font-size: 12px;
}
.v2-history-main {
display: flex;
min-width: 0;
min-height: 0;
flex-direction: column;
gap: 10px;
}
.v2-history-main > .v2-history-trend.semi-card {
height: 190px;
min-height: 190px;
flex: 0 0 190px;
}
.v2-history-main > .v2-history-table-card.semi-card {
min-height: 180px;
flex: 1 1 0;
}
.v2-history-workspace.is-inspector-open {
grid-template-columns: minmax(0, 1fr) minmax(320px, 360px);
}
.v2-history-table-card .v2-workspace-panel-header {
min-height: 54px;
}
.v2-history-table-card .v2-workspace-panel-copy > h5.semi-typography {
color: #263950;
font-size: 15px;
}
.v2-history-table-card .v2-workspace-panel-copy > .semi-typography:last-child {
max-width: min(46vw, 580px);
overflow: hidden;
color: #718096;
font-size: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-table-card .v2-workspace-panel-meta {
color: #8a97a8;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.v2-history-table-trend .semi-icon,
.v2-history-trend-toggle .semi-icon {
transition: transform .18s ease;
}
.v2-history-table-trend.is-expanded .semi-icon,
.v2-history-trend-toggle.is-expanded .semi-icon {
transform: rotate(90deg);
}
.v2-history-table-scroll {
scrollbar-color: #b7c4d4 #f4f7fa;
scrollbar-width: thin;
}
.v2-history-table-scroll::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.v2-history-table-scroll::-webkit-scrollbar-track {
background: #f4f7fa;
}
.v2-history-table-scroll::-webkit-scrollbar-thumb {
border: 2px solid #f4f7fa;
border-radius: 999px;
background: #b7c4d4;
}
.v2-history-table-scroll::-webkit-scrollbar-thumb:hover {
background: #91a4ba;
}
@media (min-width: 681px) {
.v2-history-page {
height: 100%;
min-height: 0;
gap: 10px;
overflow: hidden;
padding: 16px 18px 18px;
}
.v2-history-filter-card .v2-workspace-filter-heading {
min-height: 42px;
padding-block: 6px;
}
.v2-history-toolbar {
min-height: 64px;
padding: 9px 12px 10px;
}
.v2-history-workspace {
min-height: 0;
flex: 1 1 0;
}
}
@media (max-width: 1260px) and (min-width: 681px) {
.v2-history-context {
grid-template-columns: minmax(300px, 1fr) minmax(390px, .95fr);
}
.v2-history-context .v2-history-metrics {
gap: 8px;
padding-inline: 11px;
}
.v2-history-context .v2-history-metrics-manage.semi-button {
min-width: 34px;
width: 34px;
padding: 0;
}
.v2-history-context .v2-history-metrics-manage .semi-button-content {
display: none;
}
.v2-history-context .v2-history-summary > div {
padding-inline: 9px;
}
}
@media (max-height: 800px) and (min-width: 901px) {
.v2-history-page {
height: 100%;
min-height: 0;
overflow: hidden;
}
.v2-history-workspace {
min-height: 0;
flex: 1 1 0;
}
}
@media (max-width: 900px) and (min-width: 681px) {
.v2-history-context {
grid-template-columns: 1fr;
}
.v2-history-context .v2-history-metrics {
min-height: 58px;
border-right: 0;
border-bottom: 1px solid #e5ebf2;
}
.v2-history-context .v2-history-summary {
min-height: 66px;
}
.v2-history-context-card.semi-card,
.v2-history-context {
min-height: 124px;
}
.v2-history-workspace.is-inspector-open {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
@media (max-width: 680px) {
.v2-history-page {
height: 100%;
min-height: 0;
gap: 8px;
overflow: auto;
padding: 8px;
}
.v2-history-context-card.semi-card {
min-height: 118px;
border-radius: 11px;
}
.v2-history-context {
display: flex;
min-height: 118px;
flex-direction: column;
}
.v2-history-context .v2-history-metrics {
min-height: 54px;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 7px;
border-right: 0;
border-bottom: 1px solid #e5ebf2;
padding: 8px 9px;
}
.v2-history-metrics-heading > strong {
font-size: 11px;
}
.v2-history-metrics-heading > small {
font-size: 9px;
}
.v2-history-context .v2-history-metric-tag.semi-tag {
height: 28px;
font-size: 10px;
}
.v2-history-context .v2-history-metrics-manage.semi-button {
width: 34px;
min-width: 34px;
min-height: 34px;
padding: 0;
}
.v2-history-context .v2-history-metrics-manage .semi-button-content {
display: none;
}
.v2-history-context .v2-history-summary {
min-height: 64px;
flex: 1;
grid-template-columns: 1.1fr .72fr 1.18fr .78fr;
}
.v2-history-context .v2-history-summary > div {
padding: 8px 7px;
}
.v2-history-context .v2-history-summary > div + div::before {
inset-block: 13px;
}
.v2-history-context .v2-history-summary small {
font-size: 9px;
}
.v2-history-context .v2-history-summary strong,
.v2-history-context .v2-history-summary .is-primary strong {
margin-top: 4px;
font-size: 15px;
}
.v2-history-context .v2-history-summary strong.is-source {
font-size: 9px;
}
.v2-history-main {
display: flex;
height: auto;
min-height: 0;
flex-direction: column;
}
.v2-history-main > .v2-history-table-card.semi-card {
min-height: 430px;
order: 1;
}
.v2-history-main > .v2-history-trend.semi-card {
height: 230px;
min-height: 230px;
flex-basis: 230px;
order: 2;
}
.v2-history-table-card .v2-workspace-panel-header {
min-height: 68px;
align-items: flex-start;
padding: 9px 8px;
}
.v2-history-table-card .v2-workspace-panel-copy > .semi-typography:last-child {
display: block;
max-width: 72vw;
font-size: 9px;
}
.v2-history-table-card .v2-workspace-panel-meta,
.v2-history-table-card .v2-workspace-panel-actions > .semi-button .semi-button-content {
display: none;
}
.v2-history-table-card .v2-workspace-panel-actions {
gap: 2px;
}
.v2-history-table-card .v2-workspace-panel-actions > .semi-button {
width: 34px;
min-width: 34px;
min-height: 34px;
padding: 0;
}
.v2-history-mobile-list {
gap: 7px;
padding: 7px;
}
.v2-history-mobile-list > .v2-history-mobile-card.semi-card {
border-radius: 9px;
box-shadow: none;
}
.v2-history-mobile-card-content {
padding: 11px;
}
}