feat(web): refine Semi UI alert center

This commit is contained in:
lingniu
2026-07-20 00:01:47 +08:00
parent e20f320f6c
commit cd13a2952d
5 changed files with 149 additions and 76 deletions

View File

@@ -8402,7 +8402,7 @@
* command rail and reserves the remaining height for the operational list.
*/
.v2-alert-page {
gap: 12px;
gap: 10px;
padding: 14px 18px 18px;
background: #f6f8fb;
}
@@ -8503,6 +8503,7 @@
.v2-alert-filter-card.semi-card {
overflow: visible;
border-color: #d8e1ec;
}
.v2-alert-filter-card > .semi-card-body > .v2-workspace-filter-heading {
@@ -8510,24 +8511,36 @@
}
.v2-alert-filter.v2-alert-filter-primary {
min-height: 70px;
min-height: 54px;
grid-template-columns: minmax(250px, 1.45fr) minmax(122px, .62fr) minmax(136px, .68fr) auto auto auto;
gap: 10px;
padding: 11px 13px;
align-items: center;
padding: 8px 10px;
}
.v2-alert-filter.v2-alert-filter-primary label {
position: relative;
gap: 5px;
color: #66778e;
font-size: 11px;
font-weight: 600;
}
.v2-alert-filter.v2-alert-filter-primary label > span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.v2-alert-filter.v2-alert-filter-primary label > div,
.v2-alert-filter.v2-alert-filter-primary .semi-select,
.v2-alert-filter.v2-alert-filter-primary .semi-input-wrapper,
.v2-alert-filter.v2-alert-filter-primary > .semi-button {
min-height: 38px;
min-height: 36px;
border-radius: 8px;
}
@@ -8588,7 +8601,7 @@
}
.v2-alert-workspace.is-inspector-open {
grid-template-columns: minmax(680px, 1fr) 390px;
grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
}
.v2-alert-table-card > .semi-card-body > .v2-workspace-panel-header {
@@ -8646,12 +8659,51 @@
font-size: 12px;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row {
position: relative;
transition: background-color .16s ease, box-shadow .16s ease;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row::before {
position: absolute;
z-index: 2;
top: 7px;
bottom: 7px;
left: 0;
width: 3px;
border-radius: 0 4px 4px 0;
background: #c2cad5;
content: "";
pointer-events: none;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-critical::before {
background: #e5484d;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-major::before {
background: #ed8d32;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-severity-minor::before {
background: #d9a31d;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row:hover {
background: #f7faff;
}
.v2-alert-table-scroll .v2-alert-event-table .semi-table-tbody > .semi-table-row.is-selected {
background: #eef5ff;
box-shadow: inset 0 0 0 1px rgba(18, 104, 243, .16);
}
.v2-alert-event-table.semi-table-wrapper {
min-width: 1102px;
min-width: 970px;
}
.v2-alert-event-table.is-compact.semi-table-wrapper {
min-width: 758px;
min-width: 660px;
}
.v2-alert-event-evidence {
@@ -9529,10 +9581,15 @@
padding: 5px 8px;
}
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography {
.v2-alert-table-card .v2-workspace-panel-copy > .semi-typography:not(h5) {
display: none;
}
.v2-alert-table-card .v2-workspace-panel-copy > h5.semi-typography {
display: block;
font-size: 13px;
}
.v2-alert-table-scroll.is-mobile-scroll {
min-height: 0;
flex: 1 1 0;
@@ -25382,8 +25439,8 @@
}
.v2-alert-filter.v2-alert-filter-primary {
min-height: 66px;
padding: 9px 13px;
min-height: 52px;
padding: 7px 10px;
}
.v2-alert-filter.v2-alert-filter-primary label > div,
@@ -25417,13 +25474,18 @@
}
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
height: 56px;
padding: 8px 10px;
height: 52px;
padding: 7px 10px;
color: #405269;
font-size: 12.5px;
transition: background-color .16s ease;
}
.v2-alert-event-table .semi-table {
width: 100%;
table-layout: fixed;
}
.v2-alert-table-scroll .v2-alert-event-table.semi-table-wrapper .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
background: #f6f9fe;
}
@@ -25445,7 +25507,7 @@
}
.v2-alert-workspace.is-inspector-open {
grid-template-columns: minmax(650px, 1fr) 420px;
grid-template-columns: minmax(0, 1fr) minmax(360px, 390px);
}
.v2-alert-workspace.is-inspector-open .v2-alert-event-table.is-compact.semi-table-wrapper {