refactor: 优化后台管理布局样式及导航栏结构

src/routes/admin/+layout.svelte

@@ -13,8 +13,7 @@
 		Library,
 		Tags,
 		Image as ImageIcon,
-		Settings,
+		Settings
-		Circle
 	} 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>
-
+			<span class="brand-mobile">{$page.data.site?.title || 'BlogFlare'} 控制台</span>
-			<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>
 		</header>
 
 		<main id="pjax-container" class="content-area">
@@ -321,71 +313,26 @@
 		}
 	}
 
-	.nav-item.sub-item {
+	.sidebar-footer {
-		padding-left: 36px;
+		padding: 16px 20px;
-		font-size: 0.9rem;
+		border-top: 1px solid rgba(0, 0, 0, 0.08);
-		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;
 		display: flex;
 		flex-direction: column;
-		min-width: 0; /* Important for flex children to not overflow */
+		gap: 8px;
-	}
+		font-size: 0.85rem;
-
+		color: var(--text-muted, rgba(0, 0, 0, 0.6));
-	.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;
 	}
 
 	@media (prefers-color-scheme: dark) {
-		.top-header {
+		.sidebar-footer {
-			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+			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 {
+	.user-email {
-		width: 1px;
+		font-weight: 500;
-		height: 14px;
+		opacity: 0.7;
-		background-color: rgba(0, 0, 0, 0.15);
+		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 {
+		.mobile-header {
-			background-color: rgba(255, 255, 255, 0.2);
+			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
 		}
 	}
 
-	.user-email {
+	.mobile-menu-btn {
-		font-weight: 500;
+		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 {
+		.mobile-header {
-			display: flex;
+			display: flex; /* Show only on mobile */
-		}
-
-		.top-header {
-			padding: 0 16px;
 		}
 
 		.content-area {
-			padding: 16px;
+			padding: 20px;
 		}
 	}