ui优化-3

This commit is contained in:
yml2213
2026-05-14 20:25:58 +08:00
parent 0288e8f578
commit a029da8c6d
3 changed files with 76 additions and 76 deletions
@@ -954,11 +954,11 @@ onMounted(loadConfigs)
align-items: center;
min-height: 28px;
padding: 0 10px;
border-radius: 999px;
border-radius: var(--radius-full);
background: rgba(37, 89, 167, 0.08);
border: 1px solid rgba(37, 89, 167, 0.12);
color: var(--color-primary-dark);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: 0.04em;
}
@@ -973,7 +973,7 @@ onMounted(loadConfigs)
.empty-block,
.error-copy {
padding: 16px;
border-radius: 20px;
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(86, 108, 138, 0.1);
}
@@ -1013,14 +1013,14 @@ onMounted(loadConfigs)
display: grid;
gap: 4px;
padding: 12px 14px;
border-radius: 16px;
border-radius: var(--radius-lg);
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.14);
}
.overview-stat span {
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -1041,10 +1041,10 @@ onMounted(loadConfigs)
align-items: center;
min-height: 32px;
padding: 0 12px;
border-radius: 999px;
border-radius: var(--radius-full);
background: rgba(15, 23, 42, 0.04);
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 600;
}
@@ -1085,7 +1085,7 @@ onMounted(loadConfigs)
.toolbar-hint {
margin: 10px 0 0;
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
}
.lookup-summary {
@@ -1097,7 +1097,7 @@ onMounted(loadConfigs)
display: grid;
gap: 6px;
padding: 12px 14px;
border-radius: 16px;
border-radius: var(--radius-lg);
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.14);
}
@@ -1109,7 +1109,7 @@ onMounted(loadConfigs)
.binding-card {
margin-top: 12px;
padding: 14px;
border-radius: 16px;
border-radius: var(--radius-lg);
background: #f8fafc;
border: 1px solid rgba(148, 163, 184, 0.18);
}
@@ -1142,17 +1142,17 @@ onMounted(loadConfigs)
.binding-subtle {
color: var(--text-secondary);
font-size: 13px;
font-size: var(--text-sm);
}
.binding-status-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
border-radius: var(--radius-full);
padding: 2px 10px;
background: #fff1f2;
color: #be123c;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -1165,7 +1165,7 @@ onMounted(loadConfigs)
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.96);
color: var(--text-primary);
border-radius: 999px;
border-radius: var(--radius-full);
padding: 7px 12px;
font: inherit;
cursor: pointer;
@@ -1175,7 +1175,7 @@ onMounted(loadConfigs)
display: grid;
gap: 6px;
color: var(--text-secondary);
font-size: 13px;
font-size: var(--text-sm);
}
.binding-grid {
@@ -1201,13 +1201,13 @@ onMounted(loadConfigs)
.field-block span {
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
.field-help {
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
line-height: 1.5;
}
@@ -1243,7 +1243,7 @@ onMounted(loadConfigs)
.binding-inline-error {
margin: 10px 0 0;
color: var(--color-danger);
font-size: 13px;
font-size: var(--text-sm);
font-weight: 600;
}
@@ -1279,7 +1279,7 @@ onMounted(loadConfigs)
.data-table th {
color: var(--text-secondary);
font-size: 13px;
font-size: var(--text-sm);
}
.cell-stack {
@@ -1289,7 +1289,7 @@ onMounted(loadConfigs)
.cell-subtle {
color: var(--text-secondary);
font-size: 12px;
font-size: var(--text-xs);
}
.empty-block,
@@ -1301,7 +1301,7 @@ onMounted(loadConfigs)
color: var(--color-danger);
}
@media (max-width: 980px) {
@media (max-width: 900px) {
.panel-header,
.section-title-row,
.section-header-tools,
@@ -1153,7 +1153,7 @@ onMounted(loadConfigs)
}
.hero-copy h1 {
font-size: 24px;
font-size: var(--text-2xl);
line-height: 1.2;
}
@@ -1162,7 +1162,7 @@ onMounted(loadConfigs)
}
.pane-heading h3 {
font-size: 14px;
font-size: var(--text-base);
}
.hero-copy p {
@@ -1190,10 +1190,10 @@ onMounted(loadConfigs)
min-height: 34px;
padding: 0 10px;
border: 1px solid var(--panel-border);
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fff;
color: var(--panel-ink);
font-size: 13px;
font-size: var(--text-sm);
font-weight: 700;
}
@@ -1207,7 +1207,7 @@ onMounted(loadConfigs)
min-width: 0;
padding: 12px;
border: 1px solid rgba(31, 42, 55, 0.08);
border-radius: 8px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.82);
}
@@ -1218,14 +1218,14 @@ onMounted(loadConfigs)
.rule-footer,
.field-help {
color: var(--panel-muted);
font-size: 12px;
font-size: var(--text-xs);
}
.status-strip strong {
display: block;
margin-top: 5px;
color: var(--panel-ink);
font-size: 24px;
font-size: var(--text-2xl);
line-height: 1;
}
@@ -1235,7 +1235,7 @@ onMounted(loadConfigs)
overflow: hidden;
color: var(--panel-ink);
font-family: var(--font-mono);
font-size: 12px;
font-size: var(--text-xs);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -1253,10 +1253,10 @@ onMounted(loadConfigs)
.sample-metrics span {
padding: 6px 10px;
border-radius: 999px;
border-radius: var(--radius-full);
background: #eef7f5;
color: var(--accent-strong);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 800;
}
@@ -1265,7 +1265,7 @@ onMounted(loadConfigs)
gap: 12px;
padding: 14px;
border: 1px solid var(--panel-line);
border-radius: 8px;
border-radius: var(--radius-sm);
background: linear-gradient(180deg, #f8fafc, #ffffff);
}
@@ -1325,7 +1325,7 @@ onMounted(loadConfigs)
gap: 14px;
padding: 14px;
border: 1px solid var(--panel-line);
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fff;
}
@@ -1359,7 +1359,7 @@ onMounted(loadConfigs)
display: block;
overflow: hidden;
color: var(--panel-ink);
font-size: 14px;
font-size: var(--text-base);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -1371,7 +1371,7 @@ onMounted(loadConfigs)
margin-top: 4px;
overflow: hidden;
color: var(--panel-muted);
font-size: 12px;
font-size: var(--text-xs);
line-height: 1.45;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1381,10 +1381,10 @@ onMounted(loadConfigs)
display: inline-flex;
justify-content: center;
padding: 8px 10px;
border-radius: 8px;
border-radius: var(--radius-sm);
background: #eaf7f0;
color: #067647;
font-size: 13px;
font-size: var(--text-sm);
font-weight: 800;
}
@@ -1401,7 +1401,7 @@ onMounted(loadConfigs)
.filter-chip,
.collapse-button {
border: 1px solid var(--panel-border);
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fff;
color: var(--panel-ink);
cursor: pointer;
@@ -1414,13 +1414,13 @@ onMounted(loadConfigs)
gap: 8px;
min-height: 34px;
padding: 0 11px;
font-size: 13px;
font-size: var(--text-sm);
font-weight: 800;
}
.filter-chip strong {
color: var(--panel-muted);
font-size: 12px;
font-size: var(--text-xs);
}
.filter-chip--active {
@@ -1435,7 +1435,7 @@ onMounted(loadConfigs)
.rule-card {
overflow: hidden;
border-radius: 8px;
border-radius: var(--radius-sm);
}
.rule-card[data-invalid='true'] {
@@ -1468,10 +1468,10 @@ onMounted(loadConfigs)
width: 34px;
height: 34px;
place-items: center;
border-radius: 8px;
border-radius: var(--radius-sm);
background: #182230;
color: #fff;
font-size: 13px;
font-size: var(--text-sm);
font-weight: 900;
}
@@ -1492,8 +1492,8 @@ onMounted(loadConfigs)
min-height: 28px;
padding: 0 9px;
overflow: hidden;
border-radius: 999px;
font-size: 12px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: 800;
text-overflow: ellipsis;
white-space: nowrap;
@@ -1524,7 +1524,7 @@ onMounted(loadConfigs)
min-height: 28px;
padding: 0 9px;
color: var(--accent-strong);
font-size: 12px;
font-size: var(--text-xs);
font-weight: 800;
}
@@ -1540,7 +1540,7 @@ onMounted(loadConfigs)
gap: 12px;
padding: 14px;
border: 1px solid var(--panel-line);
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fbfcfe;
}
@@ -1563,13 +1563,13 @@ onMounted(loadConfigs)
min-height: 72px;
padding: 11px;
border: 1px solid var(--panel-line);
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fff;
}
.switch-tile > span {
color: #344054;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 800;
}
@@ -1582,7 +1582,7 @@ onMounted(loadConfigs)
.message-box,
.loading-band {
padding: 14px 16px;
border-radius: 8px;
border-radius: var(--radius-sm);
color: var(--panel-muted);
}
@@ -1617,7 +1617,7 @@ onMounted(loadConfigs)
.admin-panel :deep(.el-button) {
min-height: 34px;
border-radius: 8px;
border-radius: var(--radius-sm);
font-weight: 800;
}
@@ -1632,7 +1632,7 @@ onMounted(loadConfigs)
.admin-panel :deep(.el-textarea__inner),
.admin-panel :deep(.el-select__wrapper) {
min-height: 36px;
border-radius: 8px;
border-radius: var(--radius-sm);
background: #fff;
box-shadow: 0 0 0 1px var(--panel-line) inset;
}
@@ -1666,7 +1666,7 @@ onMounted(loadConfigs)
background-color: var(--accent);
}
@media (max-width: 1280px) {
@media (max-width: 1200px) {
.lookup-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
@@ -1680,7 +1680,7 @@ onMounted(loadConfigs)
}
}
@media (max-width: 980px) {
@media (max-width: 900px) {
.hero-main,
.section-heading,
.rules-heading,
@@ -1787,10 +1787,10 @@ onMounted(loadConfigs)
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
border-radius: var(--radius-full);
background: rgba(15, 93, 216, 0.08);
color: #175cd3;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -1832,7 +1832,7 @@ onMounted(loadConfigs)
.overview-label {
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
}
.overview-file code {
@@ -1863,12 +1863,12 @@ onMounted(loadConfigs)
.overview-stat span {
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
}
.overview-stat strong {
color: #1d3555;
font-size: 24px;
font-size: var(--text-2xl);
line-height: 1;
}
@@ -1901,7 +1901,7 @@ onMounted(loadConfigs)
.field-block span {
color: #1d3555;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -1945,7 +1945,7 @@ onMounted(loadConfigs)
.toolbar-hint,
.cell-subtle {
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
line-height: 1.45;
}
@@ -1966,7 +1966,7 @@ onMounted(loadConfigs)
border-radius: 14px;
background: #fff5f4;
border: 1px solid rgba(180, 35, 24, 0.14);
font-size: 13px;
font-size: var(--text-sm);
}
.data-table {
@@ -1985,7 +1985,7 @@ onMounted(loadConfigs)
.data-table th {
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -2041,17 +2041,17 @@ onMounted(loadConfigs)
.binding-subtle {
color: #64748b;
font-size: 13px;
font-size: var(--text-sm);
}
.binding-status-chip {
display: inline-flex;
align-items: center;
border-radius: 999px;
border-radius: var(--radius-full);
padding: 2px 10px;
background: #fff1f2;
color: #be123c;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -2064,7 +2064,7 @@ onMounted(loadConfigs)
border: 1px solid rgba(86, 108, 138, 0.18);
background: rgba(255, 255, 255, 0.96);
color: #1d3555;
border-radius: 999px;
border-radius: var(--radius-full);
padding: 7px 12px;
cursor: pointer;
}
@@ -2076,7 +2076,7 @@ onMounted(loadConfigs)
border-radius: 14px;
background: rgba(255, 255, 255, 0.78);
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
}
.binding-grid {
@@ -2124,7 +2124,7 @@ onMounted(loadConfigs)
.mapping-panel-head span {
color: #64748b;
font-size: 12px;
font-size: var(--text-xs);
}
.mapping-grid,
@@ -2138,7 +2138,7 @@ onMounted(loadConfigs)
display: grid;
place-items: center;
color: #175cd3;
font-size: 12px;
font-size: var(--text-xs);
font-weight: 700;
}
@@ -2149,7 +2149,7 @@ onMounted(loadConfigs)
min-height: 30px;
min-width: 54px;
padding: 0 10px;
border-radius: 999px;
border-radius: var(--radius-full);
background: rgba(15, 93, 216, 0.08);
border: 1px solid rgba(15, 93, 216, 0.14);
}
@@ -2165,7 +2165,7 @@ onMounted(loadConfigs)
align-items: center;
gap: 8px;
color: #1d3555;
font-size: 13px;
font-size: var(--text-sm);
}
.binding-actions {
@@ -2175,7 +2175,7 @@ onMounted(loadConfigs)
.admin-panel :deep(.el-button) {
min-height: 34px;
border-radius: 999px;
border-radius: var(--radius-full);
}
.admin-panel :deep(.el-button--primary) {
@@ -2185,7 +2185,7 @@ onMounted(loadConfigs)
--el-button-hover-border-color: #0f5dd8;
}
@media (max-width: 1100px) {
@media (max-width: 900px) {
.overview-stats,
.lookup-toolbar,
.binding-grid,
@@ -2202,7 +2202,7 @@ onMounted(loadConfigs)
}
}
@media (max-width: 720px) {
@media (max-width: 640px) {
.panel-header,
.section-title-row,
.section-header-tools,
@@ -409,7 +409,7 @@ onMounted(loadEvents)
gap: 6px;
min-width: 0;
padding: 10px 11px;
border-radius: 12px;
border-radius: var(--radius-md);
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--border-default);
}