重构 Admin 控制台信息架构与页面骨架,按业务域重排导航并统一配置页分节布局。

本次在保持现有主题配色不变的前提下,提升了可读性与操作效率,补充了页内分节导航与长页滚动定位体验。

Made-with: Cursor
This commit is contained in:
oliver 2026-04-26 15:48:49 +08:00
parent 37a2ef35f4
commit 85ce1194c9
3 changed files with 273 additions and 92 deletions

View file

@ -67,7 +67,19 @@ body {
letter-spacing: 0.02em;
}
.brand__sub { font-size: 12px; color: rgba(226,232,240,0.7); margin-top: 4px; }
.nav { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.nav { padding: 8px; display: flex; flex-direction: column; gap: 12px; overflow: auto; }
.nav__group {
display: flex;
flex-direction: column;
gap: 4px;
}
.nav__groupTitle {
font-size: 11px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(226,232,240,0.55);
padding: 6px 12px 2px;
}
.nav__item { text-decoration: none; color: rgba(226,232,240,0.85); padding: 10px 12px; border-radius: 10px; }
.nav__item:hover { background: rgba(148,163,184,0.12); }
.nav__item--active { background: rgba(59,130,246,0.22); color: #e2e8f0; }
@ -83,6 +95,82 @@ body {
.btn--danger { background: rgba(239,68,68,0.18); border-color: rgba(239,68,68,0.35); }
.content { padding: 18px; overflow: auto; color: #e2e8f0; }
.page-shell {
display: flex;
flex-direction: column;
gap: 12px;
}
.page-shell__header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
padding: 2px 2px 4px;
}
.page-shell__headline {
display: flex;
flex-direction: column;
gap: 4px;
}
.page-shell__title {
margin: 0;
font-size: 20px;
line-height: 1.2;
font-weight: 650;
}
.page-shell__subtitle {
max-width: 920px;
line-height: 1.45;
}
.page-shell__actions {
justify-content: flex-end;
}
.page-shell__toc {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.page-shell__tocItem {
text-decoration: none;
color: rgba(226,232,240,0.82);
border: 1px solid rgba(148,163,184,0.22);
border-radius: 999px;
padding: 4px 10px;
font-size: 12px;
background: transparent;
cursor: pointer;
}
.page-shell__tocItem:hover {
background: rgba(148,163,184,0.16);
}
.page-grid {
display: grid;
gap: 12px;
}
.page-grid--single {
grid-template-columns: minmax(0, 1fr);
}
.page-grid--two {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.section-card {
margin-bottom: 0;
scroll-margin-top: 76px;
}
.section-card__actions {
justify-content: flex-end;
}
.page-grid > [id] {
scroll-margin-top: 76px;
}
.page-shell__header .page-shell__actions {
position: sticky;
top: 0;
z-index: 3;
padding: 2px 0;
}
.card { background: rgba(15,23,42,0.9); border: 1px solid rgba(148,163,184,0.18); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.card__title { font-weight: 650; margin-bottom: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
@ -157,6 +245,12 @@ body {
align-items: center;
justify-content: flex-end;
}
@media (max-width: 1200px) {
.page-grid--two {
grid-template-columns: minmax(0, 1fr);
}
}
.session-monitor-row--active {
background: rgba(94, 179, 255, 0.12);
}