This commit is contained in:
seahi committed
1 parent
fc241f2402
commit
9153e559ee
1 file changed
+70
-91
@@ -13,8 +13,7 @@
|
||||
Library,
|
||||
Tags,
|
||||
Image as ImageIcon,
|
||||
Settings,
|
||||
Circle
|
||||
Settings
|
||||
} from '@lucide/svelte';
|
||||
import Toast from '$lib/components/Toast.svelte';
|
||||
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
||||
@@ -81,14 +80,7 @@
|
||||
<FileText size={18} />
|
||||
<span>全部{$page.data.aliases?.post || '文章'}</span>
|
||||
</a>
|
||||
<a href="{resolve('/admin/posts')}?status=published" class="nav-item sub-item">
|
||||
<Circle size={8} color="var(--accent-color, #419b38)" strokeWidth={3} />
|
||||
<span>已发布</span>
|
||||
</a>
|
||||
<a href="{resolve('/admin/posts')}?status=draft" class="nav-item sub-item">
|
||||
<Circle size={8} color="#eab308" strokeWidth={3} />
|
||||
<span>草稿箱</span>
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={resolve('/admin/pages')}
|
||||
class="nav-item {$page.url.pathname.startsWith('/admin/pages') &&
|
||||
@@ -145,10 +137,19 @@
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
|
||||
<ExternalLink size={15} aria-hidden="true" />
|
||||
<span>访问前台</span>
|
||||
</a>
|
||||
<div class="divider"></div>
|
||||
<span class="user-email">{$page.data.user?.email || 'Admin'}</span>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="main-wrapper">
|
||||
<header class="top-header">
|
||||
<header class="mobile-header">
|
||||
<button
|
||||
class="mobile-menu-btn"
|
||||
onclick={() => (isMobileSidebarOpen = true)}
|
||||
@@ -156,17 +157,8 @@
|
||||
>
|
||||
<Menu size={24} />
|
||||
</button>
|
||||
|
||||
<div class="header-spacer"></div>
|
||||
|
||||
<div class="user-info">
|
||||
<a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
|
||||
<ExternalLink size={15} aria-hidden="true" />
|
||||
<span>访问前台</span>
|
||||
</a>
|
||||
<div class="divider"></div>
|
||||
<span class="user-email">{$page.data.user?.email || 'Admin'}</span>
|
||||
</div>
|
||||
<span class="brand-mobile">{$page.data.site?.title || 'BlogFlare'} 控制台</span>
|
||||
</header>
|
||||
|
||||
<main id="pjax-container" class="content-area">
|
||||
@@ -321,71 +313,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item.sub-item {
|
||||
padding-left: 36px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted, rgba(0, 0, 0, 0.6));
|
||||
font-weight: 400;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
}
|
||||
|
||||
.nav-item.sub-item:hover {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Main Wrapper */
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
.sidebar-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* Important for flex children to not overflow */
|
||||
}
|
||||
|
||||
.top-header {
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24px;
|
||||
background: var(--bg-color, #ffffff);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
gap: 8px;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted, rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.top-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
.sidebar-footer {
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: none;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
margin-left: -8px;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted, rgba(0, 0, 0, 0.6));
|
||||
}
|
||||
|
||||
.site-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
color: var(--text-muted, rgba(0, 0, 0, 0.6));
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
@@ -396,26 +343,62 @@
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: rgba(0, 0, 0, 0.15);
|
||||
.user-email {
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Main Wrapper */
|
||||
.main-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; /* Important for flex children to not overflow */
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
display: none; /* Hidden on desktop */
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
background: var(--bg-color, #ffffff);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.divider {
|
||||
background-color: rgba(255, 255, 255, 0.2);
|
||||
.mobile-header {
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.user-email {
|
||||
font-weight: 500;
|
||||
.mobile-menu-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
margin-left: -8px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.header-spacer {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.brand-mobile {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* Content Area */
|
||||
.content-area {
|
||||
flex: 1;
|
||||
padding: 24px;
|
||||
padding: 32px 40px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -437,16 +420,12 @@
|
||||
box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mobile-menu-btn {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.top-header {
|
||||
padding: 0 16px;
|
||||
.mobile-header {
|
||||
display: flex; /* Show only on mobile */
|
||||
}
|
||||
|
||||
.content-area {
|
||||
padding: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user