refine Semi UI alert workspace

This commit is contained in:
lingniu
2026-07-18 09:19:23 +08:00
parent 1688ba1b50
commit 71f334d259
4 changed files with 239 additions and 50 deletions

View File

@@ -6645,6 +6645,30 @@
font-size: 12px;
}
.v2-alert-event-evidence {
display: grid;
min-width: 0;
gap: 2px;
}
.v2-alert-event-evidence strong,
.v2-alert-event-evidence small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-event-evidence strong {
color: #b83f39;
font-size: 12px;
font-variant-numeric: tabular-nums;
}
.v2-alert-event-evidence small {
color: #7d8b9e;
font-size: 10px;
}
.v2-alert-table-card > .semi-card-body > footer {
min-height: 46px;
padding: 6px 12px;
@@ -6703,6 +6727,134 @@
background: #fff;
}
.v2-alert-focus-card > .semi-card-body {
background: linear-gradient(145deg, #fff 0%, #f7faff 100%);
}
.v2-alert-focus-identity {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e6ebf2;
padding: 13px 14px 12px;
}
.v2-alert-focus-identity > span {
display: grid;
min-width: 0;
gap: 3px;
}
.v2-alert-focus-identity small,
.v2-alert-focus-facts small {
color: #7e8c9f;
font-size: 10px;
}
.v2-alert-focus-identity strong {
overflow: hidden;
color: #233b56;
font-size: 18px;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-focus-identity code {
overflow: hidden;
color: #7b899c;
font: 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-focus-identity > .semi-tag {
flex: 0 0 auto;
border-radius: 999px;
font-size: 9px;
}
.v2-alert-focus-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
border-bottom: 1px solid #e6ebf2;
}
.v2-alert-focus-facts > span {
display: grid;
min-width: 0;
gap: 4px;
padding: 9px 14px;
}
.v2-alert-focus-facts > span + span {
border-left: 1px solid #e6ebf2;
}
.v2-alert-focus-facts strong {
overflow: hidden;
color: #3d5068;
font-size: 12px;
font-variant-numeric: tabular-nums;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-alert-focus-card .v2-alert-evidence {
padding: 11px 12px 12px;
}
.v2-alert-technical-collapse.semi-collapse {
flex: 0 0 auto;
overflow: hidden;
border: 1px solid #dfe6ef;
border-radius: 10px;
background: #fff;
box-shadow: 0 3px 12px rgba(31, 53, 80, .035);
}
.v2-alert-technical-collapse > .semi-collapse-item {
margin: 0;
border: 0;
}
.v2-alert-technical-collapse .semi-collapse-header {
min-height: 48px;
align-items: center;
padding: 8px 12px;
}
.v2-alert-technical-collapse .semi-collapse-header:hover {
background: #f7faff;
}
.v2-alert-technical-heading {
display: grid;
gap: 2px;
}
.v2-alert-technical-heading strong {
color: #33475f;
font-size: 12px;
}
.v2-alert-technical-heading small {
color: #8491a3;
font-size: 9px;
font-weight: 400;
}
.v2-alert-technical-collapse .semi-collapse-content {
border-top: 1px solid #e7ecf2;
background: #fff;
}
.v2-alert-technical-collapse .semi-collapse-content-wrapper {
padding: 0;
}
.v2-alert-detail-card.v2-alert-progress-card > .semi-card-body,
.v2-alert-detail-card.v2-alert-disposition-card > .semi-card-body {
padding: 10px !important;
@@ -7032,7 +7184,7 @@
}
.v2-alert-context-card.semi-card {
min-height: 104px;
min-height: 88px;
}
.v2-alert-context-card > .semi-card-body {
@@ -7040,18 +7192,18 @@
}
.v2-alert-context-card .v2-alert-kpis {
height: 64px;
min-height: 64px;
height: 54px;
min-height: 54px;
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.v2-alert-context-card .v2-alert-kpis .v2-metric-action,
.v2-alert-context-card .v2-alert-kpis .v2-metric-action-content {
min-height: 64px;
min-height: 54px;
}
.v2-alert-context-card .v2-alert-kpis .v2-metric-action {
padding: 7px 5px;
padding: 5px 4px;
}
.v2-alert-context-card .v2-alert-kpis .v2-metric-action.is-notice {
@@ -7070,18 +7222,18 @@
.v2-alert-context-card .v2-alert-kpis strong {
margin-top: 0;
font-size: 18px;
font-size: 16px;
}
.v2-alert-context-card .v2-alert-secondary-states {
min-height: 40px;
min-height: 34px;
border-top: 1px solid #e4e9f0;
border-left: 0;
padding: 3px 4px;
}
.v2-alert-context-card .v2-alert-secondary-states > .semi-button {
min-height: 34px;
min-height: 28px;
padding: 2px 5px;
}
@@ -7090,7 +7242,7 @@
}
.v2-alert-context-card .v2-alert-secondary-states b {
font-size: 13px;
font-size: 12px;
}
.v2-alert-page.is-events .v2-alert-workspace {
@@ -7106,9 +7258,9 @@
}
.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
min-height: 50px;
min-height: 44px;
align-items: center;
padding: 6px 8px;
padding: 5px 8px;
}
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
@@ -7144,17 +7296,17 @@
}
.v2-alert-mobile-list {
gap: 8px;
padding: 8px;
gap: 6px;
padding: 6px;
}
.v2-alert-mobile-list > .v2-alert-mobile-card.semi-card {
border-radius: 9px;
contain-intrinsic-size: auto 110px;
contain-intrinsic-size: auto 96px;
}
.v2-alert-mobile-card-content {
padding: 10px 11px;
padding: 8px 10px;
}
.v2-alert-mobile-card-content header > strong {
@@ -7175,7 +7327,7 @@
}
.v2-alert-mobile-card-content p {
margin: 6px 0 7px;
margin: 4px 0 5px;
overflow: hidden;
color: #405168;
font-size: 12px;
@@ -7185,15 +7337,15 @@
}
.v2-alert-mobile-card-content dl {
grid-template-columns: repeat(4, minmax(0, 1fr));
grid-template-columns: .92fr .7fr 1.38fr;
gap: 0;
padding-top: 7px;
padding-top: 5px;
}
.v2-alert-mobile-card-content dl > div {
display: block;
min-width: 0;
min-height: 32px;
min-height: 28px;
padding: 0 5px;
}
@@ -7214,7 +7366,7 @@
.v2-alert-mobile-card-content dd {
min-width: 0;
margin: 3px 0 0;
margin: 2px 0 0;
overflow: hidden;
font-size: 10px;
line-height: 13px;
@@ -7228,7 +7380,7 @@
}
.v2-alert-table-card > .semi-card-body > footer:has(.v2-table-pagination-controls) {
min-height: 50px;
min-height: 44px;
flex-direction: row;
align-items: center;
padding: 5px 6px;
@@ -7241,7 +7393,7 @@
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-button.semi-button,
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-current,
.v2-alert-table-card > .semi-card-body > footer .v2-table-pagination-size.semi-select {
height: 34px;
height: 32px;
}
.v2-alert-rules {