unify Semi UI query metric rails
This commit is contained in:
lingniu
@@ -645,31 +645,6 @@
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.v2-history-metrics-card.semi-card {
|
||||
min-height: 50px;
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.v2-history-metrics {
|
||||
min-height: 50px;
|
||||
gap: 9px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
|
||||
.v2-history-metrics > strong {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.v2-history-metric-tag.semi-tag {
|
||||
height: 30px;
|
||||
border-radius: 7px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-history-metric-scroll > span {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.v2-history-workspace {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
@@ -6016,129 +5991,6 @@
|
||||
* 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;
|
||||
@@ -6361,31 +6213,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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-right {
|
||||
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%;
|
||||
@@ -6400,25 +6227,6 @@
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
@@ -6433,104 +6241,6 @@
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.v2-history-context-card.semi-card {
|
||||
min-height: 126px;
|
||||
border-radius: 11px;
|
||||
}
|
||||
|
||||
.v2-history-context {
|
||||
display: flex;
|
||||
min-height: 126px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics {
|
||||
min-height: 68px;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
grid-template-rows: auto auto;
|
||||
gap: 6px 8px;
|
||||
border-right: 0;
|
||||
border-bottom: 1px solid #e5ebf2;
|
||||
padding: 7px 9px 8px;
|
||||
}
|
||||
|
||||
.v2-history-metrics-heading {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
align-items: baseline;
|
||||
flex-direction: row;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.v2-history-metric-scroll {
|
||||
width: 100%;
|
||||
grid-column: 1 / -1;
|
||||
grid-row: 2;
|
||||
padding: 1px 12px 1px 0;
|
||||
scroll-padding-inline: 0 12px;
|
||||
scroll-snap-type: inline proximity;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.v2-history-metric-scroll::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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;
|
||||
scroll-snap-align: start;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage.semi-button {
|
||||
width: auto;
|
||||
min-width: 76px;
|
||||
min-height: 30px;
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-metrics-manage .semi-button-content-right {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.v2-history-context .v2-history-summary {
|
||||
min-height: 58px;
|
||||
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: 100%;
|
||||
@@ -10858,3 +10568,200 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* 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;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
color: #8090a3;
|
||||
font-size: 10px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
@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-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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user