mirror of
https://github.com/hansjone/oclaw.git
synced 2026-10-09 03:30:48 +08:00
重构 Admin 控制台信息架构与页面骨架,按业务域重排导航并统一配置页分节布局。
本次在保持现有主题配色不变的前提下,提升了可读性与操作效率,补充了页内分节导航与长页滚动定位体验。 Made-with: Cursor
This commit is contained in:
parent
37a2ef35f4
commit
85ce1194c9
3 changed files with 273 additions and 92 deletions
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue