refine Semi UI history evidence workspace

This commit is contained in:
lingniu
2026-07-18 20:51:50 +08:00
parent 9101d26005
commit 14e87f143d
4 changed files with 304 additions and 8 deletions

View File

@@ -7358,7 +7358,8 @@
font-size: 9px;
}
.v2-history-mobile-card-content p {
.v2-history-mobile-card-content p,
.v2-history-mobile-meta {
margin: 5px 0;
font-size: 9px;
}
@@ -14311,6 +14312,199 @@
font-weight: 650;
}
/*
* Semi UI history evidence refinement.
* Protocol, coverage and quality are decision signals, so they use one shared
* tag language instead of competing with dense identifiers and raw numbers.
*/
.v2-history-protocol-tag.semi-tag {
min-height: 22px;
flex: 0 0 auto;
border-radius: 999px;
padding-inline: 8px;
font-size: 10px;
font-weight: 700;
letter-spacing: .01em;
white-space: nowrap;
}
.v2-history-trend-meta {
display: inline-flex;
min-width: 0;
align-items: center;
gap: 8px;
}
.v2-history-trend-meta > .semi-tag {
min-height: 22px;
flex: 0 0 auto;
border-radius: 999px;
padding-inline: 8px;
font-size: 10px;
font-weight: 720;
}
.v2-history-trend-meta > span {
overflow: hidden;
color: #75859a;
font-size: 10px;
font-variant-numeric: tabular-nums;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-trend-panels article {
display: grid;
grid-template-rows: 28px minmax(0, 1fr) 23px;
border-color: #dfe7f0;
border-radius: 9px;
background: #fff;
}
.v2-history-trend-panels article > header {
height: auto;
padding-inline: 9px;
border-bottom: 1px solid #edf1f5;
background: #fbfcfe;
}
.v2-history-trend-panels article > header strong {
color: #33475f;
font-size: 11px;
}
.v2-history-trend-panels article > header span {
color: #8290a2;
font-size: 9px;
font-variant-numeric: tabular-nums;
}
.v2-history-trend-panels svg {
height: 100%;
min-height: 0;
}
.v2-history-trend-panels article > footer {
min-height: 23px;
border-top: 1px solid #f0f3f7;
padding-inline: 9px;
color: #65768b;
font-size: 9px;
}
.v2-history-trend-panels article > footer i {
width: 12px;
height: 3px;
border-radius: 999px;
}
.v2-chart-axis text {
fill: #6f7f93;
font-size: 9px;
}
.v2-history-trend-evidence {
display: flex;
min-height: 31px;
flex: 0 0 auto;
align-items: center;
gap: 8px;
overflow: hidden;
border-top: 1px solid #e8edf3;
padding: 4px 10px;
color: #748397;
font-size: 9px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.v2-history-trend-evidence > .semi-tag {
min-height: 21px;
flex: 0 0 auto;
border-radius: 999px;
padding-inline: 7px;
font-size: 9px;
font-weight: 700;
}
.v2-history-trend-evidence > span:first-of-type {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
}
.v2-history-trend-evidence > strong {
flex: 0 0 auto;
color: #596b80;
font-size: inherit;
font-weight: 700;
}
.v2-history-evidence-status {
display: grid;
min-height: 80px;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 12px;
border-bottom: 1px solid #dfe7f0;
padding: 11px 13px;
background: linear-gradient(135deg, #f7fafc 0%, #fff 100%);
}
.v2-history-evidence-status.is-healthy {
box-shadow: inset 3px 0 #18a86b;
}
.v2-history-evidence-status.is-attention {
box-shadow: inset 3px 0 #eda43a;
}
.v2-history-evidence-status > div {
display: flex;
min-width: 0;
flex-direction: column;
gap: 3px;
}
.v2-history-evidence-status > div:last-child {
align-items: flex-end;
gap: 7px;
}
.v2-history-evidence-status span {
color: #8290a2;
font-size: 10px;
font-weight: 650;
}
.v2-history-evidence-status strong {
color: #263b53;
font-size: 17px;
line-height: 1.2;
}
.v2-history-evidence-status small {
overflow: hidden;
color: #68798e;
font-size: 10px;
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-history-evidence-status .v2-history-time {
color: #66788e;
font-size: 10px;
font-weight: 650;
}
.v2-history-data-table .v2-history-protocol-tag.semi-tag {
min-height: 21px;
padding-inline: 7px;
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);
@@ -14351,6 +14545,71 @@
font-weight: 650;
}
.v2-history-mobile-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-block: 6px;
}
.v2-history-mobile-meta .v2-history-protocol-tag.semi-tag {
min-height: 20px;
padding-inline: 7px;
font-size: 9px;
}
.v2-history-mobile-card-content dt {
font-size: 9px;
}
.v2-history-mobile-card-content dd {
font-size: 11px;
font-weight: 700;
}
.v2-history-trend .v2-workspace-panel-meta {
display: flex;
}
.v2-history-trend-meta > span {
display: none;
}
.v2-history-trend-meta > .semi-tag {
min-height: 20px;
padding-inline: 7px;
font-size: 9px;
}
.v2-history-trend-panels {
padding: 7px;
}
.v2-history-trend-evidence {
min-height: 29px;
gap: 6px;
padding-inline: 8px;
}
.v2-history-trend-evidence > span:first-of-type,
.v2-history-trend-evidence > span:last-child {
display: none;
}
.v2-history-evidence-status {
min-height: 74px;
gap: 8px;
padding: 9px 11px;
}
.v2-history-evidence-status strong {
font-size: 16px;
}
.v2-history-evidence-status small {
max-width: 205px;
}
.v2-history-summary-rail.semi-card {
min-height: 132px;
overflow: visible;