refactor: 优化后台管理界面布局与侧边栏样式
continuous-integration/drone/push Build is passing

This commit is contained in:
seahi committed 2026-09-27 20:51:14 +08:00
1 parent 8534b10872
commit 7c98f4c12b
4 files changed
+18 -51

No files matched your search

@@ -441,7 +441,8 @@
.md-toolbar { .md-toolbar {
/* 吸顶:紧贴后台固定顶栏(高度 58px)下方,滚动时保持可见 */ /* 吸顶:紧贴后台固定顶栏(高度 58px)下方,滚动时保持可见 */
position: sticky; position: sticky;
top: 58px; top: 0px;
/* 移动端需要额外 offset 请在 media query 中处理 */
/* 编辑器 .cm-scroller 是 position: relative + z-index: 0,且 DOM 更靠后, /* 编辑器 .cm-scroller 是 position: relative + z-index: 0,且 DOM 更靠后,
必须抬高层级,否则正文会盖在工具条上(看起来像半透明) */ 必须抬高层级,否则正文会盖在工具条上(看起来像半透明) */
z-index: 20; z-index: 20;
+14 -48
View File
@@ -5,7 +5,6 @@
import { import {
ExternalLink, ExternalLink,
Menu, Menu,
Plus,
LayoutDashboard, LayoutDashboard,
FileText, FileText,
AppWindow, AppWindow,
@@ -58,17 +57,9 @@
</a> </a>
</div> </div>
<div class="sidebar-action">
<a href={resolve('/admin/posts/new')} class="btn-new">
<Plus size={18} />
<span>撰写新内容...</span>
</a>
</div>
<div class="sidebar-scrollable"> <div class="sidebar-scrollable">
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<div class="nav-group"> <div class="nav-group">
<div class="nav-group-title">主控制台</div>
<a <a
href={resolve('/admin')} href={resolve('/admin')}
class="nav-item {$page.url.pathname === '/admin' ? 'active' : ''}" class="nav-item {$page.url.pathname === '/admin' ? 'active' : ''}"
@@ -126,7 +117,7 @@
</div> </div>
<div class="nav-group"> <div class="nav-group">
<div class="nav-group-title">资源与系统</div> <div class="nav-group-title">资源库</div>
<a <a
href={resolve('/admin/files')} href={resolve('/admin/files')}
class="nav-item {$page.url.pathname.startsWith('/admin/files') ? 'active' : ''}" class="nav-item {$page.url.pathname.startsWith('/admin/files') ? 'active' : ''}"
@@ -134,18 +125,19 @@
<ImageIcon size={18} /> <ImageIcon size={18} />
<span>媒体与文件</span> <span>媒体与文件</span>
</a> </a>
<a
href={resolve('/admin/settings')}
class="nav-item {$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}"
>
<Settings size={18} />
<span>站点设置</span>
</a>
</div> </div>
</nav> </nav>
</div> </div>
<div class="sidebar-footer"> <div class="sidebar-footer">
<a
href={resolve('/admin/settings')}
class="site-link {$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}"
title="站点设置"
>
<Settings size={15} aria-hidden="true" />
<span>站点设置</span>
</a>
<a href={resolve('/')} target="_blank" class="site-link" title="访问前台"> <a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
<ExternalLink size={15} aria-hidden="true" /> <ExternalLink size={15} aria-hidden="true" />
<span>访问前台</span> <span>访问前台</span>
@@ -230,35 +222,6 @@
text-transform: uppercase; text-transform: uppercase;
} }
.sidebar-action {
padding: 24px;
border-bottom: 1px solid #222;
}
.btn-new {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 100%;
padding: 12px 14px;
background: #222;
color: #fff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
border: 1px solid #333;
transition: all 0.2s ease;
}
.btn-new:hover {
background-color: var(--accent-color, #419b38);
border-color: var(--accent-color, #419b38);
color: white;
}
.sidebar-scrollable { .sidebar-scrollable {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
@@ -303,6 +266,8 @@
.nav-item:hover { .nav-item:hover {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
background: rgba(255, 255, 255, 0.03);
border-left: 2px solid var(--accent-color, #419b38);
} }
.nav-item.active { .nav-item.active {
@@ -333,7 +298,8 @@
letter-spacing: 0.5px; letter-spacing: 0.5px;
} }
.site-link:hover { .site-link:hover,
.site-link.active {
color: var(--accent-color, #419b38); color: var(--accent-color, #419b38);
} }
@@ -393,7 +359,7 @@
.content-area { .content-area {
flex: 1; flex: 1;
padding: 32px 40px; padding: 32px 40px;
overflow-x: hidden; /* overflow-x: hidden is removed because it breaks position: sticky for descendants (toolbar/sidebar) */
} }
.admin-container { .admin-container {
+1 -1
View File
@@ -364,7 +364,7 @@
.form-sidebar { .form-sidebar {
position: sticky; position: sticky;
top: 80px; top: 20px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
+1 -1
View File
@@ -394,7 +394,7 @@
.form-sidebar { .form-sidebar {
position: sticky; position: sticky;
top: 80px; top: 20px;
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;