refine Semi UI monitor inspector

This commit is contained in:
lingniu
2026-07-18 21:53:35 +08:00
parent 911addd891
commit e40eabac92
5 changed files with 231 additions and 148 deletions

View File

@@ -9013,6 +9013,19 @@ button, a { -webkit-tap-highlight-color: transparent; }
min-width: 0;
min-height: 100%;
}
.v2-detail-loading-card > .semi-card-body {
display: grid;
height: 100%;
min-height: 220px;
place-items: center;
}
.v2-detail-loading-card [role="status"] {
display: flex;
align-items: center;
gap: 8px;
color: #718197;
font-size: 11px;
}
.v2-detail-shell-header {
position: sticky;
z-index: 5;
@@ -9054,19 +9067,27 @@ button, a { -webkit-tap-highlight-color: transparent; }
font-size: 10px;
}
.v2-detail-actions {
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 4px;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 6px;
padding: 0;
}
.v2-detail-actions a {
height: 38px;
height: 40px;
min-width: 0;
gap: 5px;
justify-content: space-between;
gap: 8px;
border-color: #e1e8f1;
border-radius: 8px;
background: #fff;
padding-inline: 11px;
color: #55667c;
font-size: 10px;
font-size: 11px;
}
.v2-detail-actions a > span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-detail-actions a > svg {
flex: 0 0 auto;
@@ -9127,7 +9148,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
}
.v2-report-summary {
display: grid;
grid-template-columns: minmax(0,1.45fr) minmax(0,.8fr) minmax(0,1fr);
grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
gap: 0;
overflow: hidden;
margin: 9px 10px 0;
@@ -9139,7 +9160,11 @@ button, a { -webkit-tap-highlight-color: transparent; }
min-width: 0;
padding: 8px 9px;
}
.v2-report-summary > span + span { border-left: 1px solid #e3eaf3; }
.v2-report-summary > .is-time {
grid-column: 1 / -1;
border-bottom: 1px solid #e3eaf3;
}
.v2-report-summary > .is-source { border-left: 1px solid #e3eaf3; }
.v2-report-summary small,
.v2-report-summary strong,
.v2-report-summary b {
@@ -9152,10 +9177,11 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-report-summary strong {
margin-top: 4px;
color: #153f73;
font-size: 12px;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.v2-report-summary b { margin-top: 4px; color: #345679; font-size: 10px; }
.v2-report-summary .v2-protocol-tag { max-width: 100%; margin-top: 4px; }
.v2-detail-report .v2-detail-list { margin: 5px 10px 8px; }
.v2-detail-report .v2-detail-list > div { min-height: 24px; grid-template-columns: 44px minmax(0,1fr); align-items: center; padding-block: 3px; }
.v2-detail-report .v2-detail-list dd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -9205,6 +9231,13 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-detail-section > .v2-detail-list > div:last-child {
border-bottom: 0;
}
.v2-detail-protocols {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
}
.v2-detail-protocols .v2-protocol-tag { max-width: 100%; }
@media (max-width: 760px) {
.v2-detail-shell-header {
@@ -9217,12 +9250,8 @@ button, a { -webkit-tap-highlight-color: transparent; }
right: 15px;
}
.v2-detail-actions {
overflow-x: auto;
grid-template-columns: repeat(4,minmax(92px,1fr));
overscroll-behavior-x: contain;
scrollbar-width: none;
grid-template-columns: repeat(2,minmax(0,1fr));
}
.v2-detail-actions::-webkit-scrollbar { display: none; }
.v2-detail-actions a {
height: 42px;
font-size: 11px;
@@ -9238,7 +9267,7 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-detail-section > .v2-workspace-panel-header .v2-workspace-panel-meta {
font-size: 10px;
}
.v2-report-summary { grid-template-columns: minmax(0,1.35fr) minmax(0,.8fr) minmax(0,1fr); }
.v2-report-summary { grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); }
.v2-report-summary strong { font-size: 13px; }
.v2-detail-list > div { font-size: 10px; }
.v2-metric-grid small { font-size: 9px; }
@@ -9361,9 +9390,17 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-monitor-mobile-cards dd code { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-monitor-mobile-cards dd.is-today,
.v2-monitor-mobile-protocol { color: #1268df; font-weight: 750; }
.v2-monitor-mobile-protocol {
display: inline-flex;
max-width: 100%;
align-items: center;
justify-content: flex-end;
gap: 5px;
}
.v2-monitor-mobile-protocol > small { color: #77869a; font-size: 9px; white-space: nowrap; }
.v2-monitor-mobile-cards > .v2-monitor-mobile-card.semi-card { contain-intrinsic-size: auto 190px; }
.v2-report-summary {
grid-template-columns: minmax(0,1.3fr) minmax(0,.85fr) minmax(0,1fr);
grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
}
.v2-report-summary strong { font-size: 13px; }
.v2-report-summary b { font-size: 11px; }