feat: unify history metrics with semi ui

This commit is contained in:
lingniu
2026-07-19 11:52:24 +08:00
parent 343e7c9b89
commit 2e87378c92
3 changed files with 41 additions and 207 deletions

View File

@@ -15192,121 +15192,6 @@
}
}
/*
* Shared Semi UI metric rail applied to history data.
* The rail mirrors the mileage workspace: one primary outcome, then three
* supporting facts. Empty history screens omit the rail entirely.
*/
.v2-history-summary-rail.semi-card {
min-width: 0;
min-height: 88px;
flex: 0 0 auto;
overflow: hidden;
border: 1px solid #d8e3ef;
border-radius: 12px;
background: #fff;
box-shadow: 0 8px 26px rgba(31, 53, 80, .05);
}
.v2-history-summary-rail > .semi-card-body {
display: grid;
min-height: 88px;
grid-template-columns: minmax(280px, .78fr) minmax(0, 1.72fr);
}
.v2-history-summary-card.semi-card {
min-width: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.v2-history-summary-card > .semi-card-body {
position: relative;
display: flex;
min-width: 0;
height: 100%;
justify-content: center;
flex-direction: column;
padding: 11px 16px !important;
}
.v2-history-summary-card.is-primary > .semi-card-body {
overflow: hidden;
background: linear-gradient(128deg, #0c61e7 0%, #1c73ee 68%, #2c82ef 100%);
}
.v2-history-summary-card.is-primary > .semi-card-body::after {
position: absolute;
top: -80px;
right: -44px;
width: 180px;
height: 180px;
border: 26px solid rgba(255, 255, 255, .08);
border-radius: 50%;
content: "";
pointer-events: none;
}
.v2-history-summary-card small,
.v2-history-summary-card span {
position: relative;
z-index: 1;
overflow: hidden;
color: #7c8a9d;
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-summary-card strong {
position: relative;
z-index: 1;
margin: 5px 0 4px;
overflow: hidden;
color: #22354d;
font-size: clamp(18px, 1.45vw, 24px);
font-variant-numeric: tabular-nums;
font-weight: 760;
line-height: 1.08;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-summary-card.is-primary :is(small,strong,span) {
color: #fff;
}
.v2-history-summary-card.is-primary small,
.v2-history-summary-card.is-primary span {
color: rgba(255, 255, 255, .72);
}
.v2-history-summary-card.is-primary .v2-history-summary-value {
font-size: clamp(25px, 2.1vw, 34px);
letter-spacing: -.035em;
}
.v2-history-summary-secondary.semi-card-group {
display: grid;
min-width: 0;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
position: absolute;
inset: 18px auto 18px 0;
width: 1px;
background: #e3eaf2;
content: "";
}
.v2-history-summary-card.is-sources strong {
font-size: clamp(13px, 1.05vw, 17px);
}
.v2-history-result-meta {
display: inline-flex;
min-width: 0;
@@ -15317,6 +15202,19 @@
font-variant-numeric: tabular-nums;
}
.v2-history-summary-unit {
margin-left: 3px;
color: #8493a5;
font-size: 8px;
font-style: normal;
font-weight: 600;
letter-spacing: 0;
}
.v2-history-summary-rail .v2-workspace-metric-list > span.is-primary .v2-history-summary-unit {
color: #6f90bb;
}
.v2-history-discovery-shell {
display: grid;
min-width: 0;
@@ -15577,16 +15475,6 @@
font-size: 9px;
}
@media (max-width: 900px) and (min-width: 681px) {
.v2-history-summary-rail > .semi-card-body {
grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr);
}
.v2-history-summary-card > .semi-card-body {
padding-inline: 12px !important;
}
}
@media (max-width: 680px) {
.v2-history-discovery-shell {
display: contents;
@@ -15682,65 +15570,6 @@
max-width: 205px;
}
.v2-history-summary-rail.semi-card {
min-height: 132px;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.v2-history-summary-rail > .semi-card-body {
min-height: 132px;
grid-template-columns: 1fr;
grid-template-rows: 70px 58px;
gap: 4px;
}
.v2-history-summary-card.is-primary.semi-card,
.v2-history-summary-card.is-primary > .semi-card-body {
min-height: 70px;
border-radius: 10px;
}
.v2-history-summary-card.is-primary > .semi-card-body {
padding: 7px 13px 8px !important;
}
.v2-history-summary-card.is-primary .v2-history-summary-value {
margin-block: 2px 1px;
font-size: 24px;
line-height: 27px;
}
.v2-history-summary-secondary.semi-card-group {
min-height: 58px;
overflow: hidden;
border: 1px solid #dfe7f0;
border-radius: 10px;
background: #fff;
}
.v2-history-summary-secondary .v2-history-summary-card > .semi-card-body {
min-height: 58px;
padding: 7px 8px !important;
}
.v2-history-summary-secondary > .v2-history-summary-card + .v2-history-summary-card > .semi-card-body::before {
inset-block: 8px;
}
.v2-history-summary-secondary .v2-history-summary-card small,
.v2-history-summary-secondary .v2-history-summary-card span {
font-size: 8px;
}
.v2-history-summary-secondary .v2-history-summary-card strong,
.v2-history-summary-secondary .v2-history-summary-card.is-sources strong {
margin-block: 2px 1px;
font-size: 14px;
}
}
/*