refine Semi UI access evidence inspector

This commit is contained in:
lingniu
2026-07-18 16:50:20 +08:00
parent 8827a05e7e
commit f7b523453c
3 changed files with 254 additions and 37 deletions

View File

@@ -6953,6 +6953,67 @@ button, a { -webkit-tap-highlight-color: transparent; }
.v2-access-inspector-summary .v2-access-connection span { display: none; }
.v2-access-inspector-summary .v2-access-connection-tag.semi-tag { flex: 0 0 auto; }
.v2-access-inspector-summary-grid {
display: grid;
grid-template-columns: 1.25fr 1fr 1fr;
border-bottom: 1px solid var(--v2-border);
background: #fff;
padding: 8px 12px;
}
.v2-access-inspector-summary-grid > span {
display: grid;
min-width: 0;
align-content: center;
gap: 4px;
padding: 3px 9px;
}
.v2-access-inspector-summary-grid > span:first-child { padding-left: 0; }
.v2-access-inspector-summary-grid > span + span { border-left: 1px solid #e8edf3; }
.v2-access-inspector-summary-grid small {
color: #8592a3;
font-size: 9px;
line-height: 1.2;
}
.v2-access-inspector-summary-grid strong {
overflow: hidden;
color: #3c4e65;
font-size: 10px;
line-height: 1.35;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-access-protocol-heading {
display: flex;
min-height: 45px;
align-items: center;
justify-content: space-between;
gap: 12px;
border-bottom: 1px solid #e6ebf2;
background: #f7f9fc;
padding: 8px 13px 7px;
}
.v2-access-protocol-heading > span {
display: grid;
min-width: 0;
gap: 2px;
}
.v2-access-protocol-heading strong {
color: #34475e;
font-size: 12px;
}
.v2-access-protocol-heading small {
overflow: hidden;
color: #8794a5;
font-size: 9px;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-access-protocol-heading .semi-tag {
min-height: 22px;
flex: 0 0 auto;
border-radius: 999px;
font-size: 9px;
}
.v2-access-protocol-details.semi-card-group {
display: grid;
grid-template-columns: 1fr;
@@ -6995,6 +7056,56 @@ button, a { -webkit-tap-highlight-color: transparent; }
border: 1px solid currentColor;
background: transparent;
}
.v2-access-protocol-glance {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1px;
background: #edf1f5;
}
.v2-access-protocol-glance > span {
display: grid;
min-width: 0;
min-height: 45px;
align-content: center;
gap: 3px;
background: #fff;
padding: 6px 11px;
}
.v2-access-protocol-glance small {
color: #8793a4;
font-size: 9px;
line-height: 1.2;
}
.v2-access-protocol-glance strong,
.v2-access-protocol-glance .v2-access-time {
overflow: hidden;
color: #405269;
font-size: 10px;
font-weight: 650;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.v2-access-protocol-glance .is-danger strong { color: var(--v2-red); }
.v2-access-protocol-toggle.semi-button {
width: 100%;
min-height: 38px;
justify-content: space-between;
border-top: 1px solid #e9eef4;
border-radius: 0;
color: #54708e;
padding: 0 11px;
font-size: 10px;
font-weight: 650;
}
.v2-access-protocol-toggle .semi-icon {
transition: transform .18s ease;
}
.v2-access-protocol-toggle.is-expanded .semi-icon { transform: rotate(180deg); }
.v2-access-protocol-expanded {
border-top: 1px solid #e9eef4;
background: #fbfcfe;
}
.v2-access-protocol-descriptions.semi-descriptions { padding: 7px 11px 3px; }
.v2-access-protocol-descriptions .semi-descriptions-item {
min-height: 31px;
@@ -7032,6 +7143,24 @@ button, a { -webkit-tap-highlight-color: transparent; }
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.v2-access-protocol-missing {
display: grid;
min-height: 62px;
align-content: center;
gap: 4px;
background: #fbfcfd;
padding: 9px 11px;
}
.v2-access-protocol-missing span {
color: #627188;
font-size: 10px;
font-weight: 650;
}
.v2-access-protocol-missing small {
color: #909bab;
font-size: 9px;
line-height: 1.4;
}
.v2-access-loading {
position: absolute;
z-index: 4;
@@ -7066,11 +7195,14 @@ button, a { -webkit-tap-highlight-color: transparent; }
}
@media (max-width: 680px) {
.v2-access-inspector-summary.semi-descriptions { padding: 8px 12px 6px; }
.v2-access-inspector-summary .semi-descriptions-item { min-height: 44px; }
.v2-access-inspector-summary .semi-descriptions-item-th { width: 80px; }
.v2-access-inspector-summary .semi-descriptions-key,
.v2-access-inspector-summary .semi-descriptions-value { font-size: 11px; }
.v2-access-inspector-summary-grid { min-height: 68px; }
.v2-access-inspector-summary-grid > span { padding-inline: 8px; }
.v2-access-inspector-summary-grid small { font-size: 10px; }
.v2-access-inspector-summary-grid strong { font-size: 11px; }
.v2-access-protocol-heading { min-height: 44px; padding-inline: 12px; }
.v2-access-protocol-heading strong { font-size: 13px; }
.v2-access-protocol-heading small,
.v2-access-protocol-heading .semi-tag { font-size: 10px; }
.v2-access-protocol-details.semi-card-group {
display: flex;
overflow-x: auto;
@@ -7086,6 +7218,14 @@ button, a { -webkit-tap-highlight-color: transparent; }
}
.v2-access-protocol-detail > .semi-card-header { min-height: 44px; }
.v2-access-protocol-detail > .semi-card-header .semi-card-header-wrapper-title strong { font-size: 13px; }
.v2-access-protocol-glance > span { min-height: 43px; padding-inline: 10px; }
.v2-access-protocol-glance small,
.v2-access-protocol-glance strong,
.v2-access-protocol-glance .v2-access-time,
.v2-access-protocol-missing span { font-size: 11px; }
.v2-access-protocol-toggle.semi-button { min-height: 42px; font-size: 11px; }
.v2-access-protocol-missing { min-height: 66px; }
.v2-access-protocol-missing small { font-size: 10px; }
.v2-access-protocol-descriptions .semi-descriptions-item { min-height: 34px; }
.v2-access-protocol-descriptions .semi-descriptions-key,
.v2-access-protocol-descriptions .semi-descriptions-value,