refactor: 重构后台管理布局并引入侧边栏导航

src/routes/admin/+layout.svelte

@@ -2,135 +2,472 @@
 	import { resolve } from '$app/paths';
 	import { page } from '$app/stores';
 
-	import { ExternalLink } from '@lucide/svelte';
+	import {
+		ExternalLink,
+		Menu,
+		Plus,
+		LayoutDashboard,
+		FileText,
+		AppWindow,
+		FolderTree,
+		Library,
+		Tags,
+		Image as ImageIcon,
+		Settings,
+		Circle
+	} from '@lucide/svelte';
 	import Toast from '$lib/components/Toast.svelte';
 	import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
 
 	let { children } = $props();
 
-	let scrolled = $state(false);
+	let isMobileSidebarOpen = $state(false);
 
 	$effect(() => {
-		const handleScroll = () => {
+		// Close sidebar on route change on mobile
-			scrolled = window.scrollY > 50;
+		const unsubscribe = page.subscribe(() => {
-		};
+			isMobileSidebarOpen = false;
-		window.addEventListener('scroll', handleScroll);
+		});
-		return () => {
+		return () => unsubscribe();
-			window.removeEventListener('scroll', handleScroll);
-		};
 	});
+
+	function handleOverlayClick() {
+		isMobileSidebarOpen = false;
+	}
 </script>
 
 <svelte:head>
 	<title>后台管理 - {$page.data.site?.title || 'BlogFlare'}</title>
 </svelte:head>
 
-<header class="header {scrolled ? 'scrolled' : ''}">
+<div class="admin-layout {isMobileSidebarOpen ? 'sidebar-open' : ''}">
-	<div class="container wide">
+	{#if isMobileSidebarOpen}
-		<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<nav>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<a href={resolve('/admin')} class={$page.url.pathname === '/admin' ? 'active' : ''}>仪表盘</a>
+		<div class="sidebar-overlay" onclick={handleOverlayClick}></div>
-			<div class="nav-dropdown">
+	{/if}
-				<span
-					class="nav-dropdown-trigger {$page.url.pathname === '/admin/posts/new' ||
-					$page.url.pathname === '/admin/pages/new'
-						? 'active'
-						: ''}"
-				>
-					撰写
-				</span>
-				<div class="dropdown-menu">
-					<a href={resolve('/admin/posts/new')}>撰写{$page.data.aliases?.post || '文章'}</a>
-					<a href={resolve('/admin/pages/new')}>创建{$page.data.aliases?.page || '页面'}</a>
-				</div>
-			</div>
 
-			<div class="nav-dropdown">
+	<aside class="sidebar">
-				<span
+		<div class="sidebar-header">
-					class="nav-dropdown-trigger {($page.url.pathname.startsWith('/admin/posts') &&
+			<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
-						$page.url.pathname !== '/admin/posts/new') ||
-					($page.url.pathname.startsWith('/admin/pages') &&
-						$page.url.pathname !== '/admin/pages/new') ||
-					$page.url.pathname.startsWith('/admin/categories') ||
-					$page.url.pathname.startsWith('/admin/tags') ||
-					$page.url.pathname.startsWith('/admin/series') ||
-					$page.url.pathname.startsWith('/admin/files')
-						? 'active'
-						: ''}"
-				>
-					管理
-				</span>
-				<div class="dropdown-menu">
-					<a href={resolve('/admin/posts')}>{$page.data.aliases?.post || '文章'}</a>
-					<a href={resolve('/admin/pages')}>{$page.data.aliases?.page || '页面'}</a>
-					<a href={resolve('/admin/categories')}>{$page.data.aliases?.category || '分类'}</a>
-					<a href={resolve('/admin/tags')}>{$page.data.aliases?.tag || '标签'}</a>
-					<a href={resolve('/admin/series')}>{$page.data.aliases?.series || '系列'}</a>
-					<a href={resolve('/admin/files')}>文件</a>
-				</div>
-			</div>
-
-			<a
-				href={resolve('/admin/settings')}
-				class={$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}>设置</a
-			>
-		</nav>
-		<div class="user-info">
-			<a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
-				<ExternalLink size={14} aria-hidden="true" />
-				<span>站点首页</span>
-			</a>
-			<span class="user-email">{$page.data.user?.email || 'Admin'}</span>
 		</div>
-	</div>
-</header>
 
-<main id="pjax-container" style="padding-top: 58px; min-height: calc(100vh - 120px);">
+		<div class="sidebar-action">
-	<div class="wrapper container admin-container">
+			<a href={resolve('/admin/posts/new')} class="btn-new">
-		{@render children()}
+				<Plus size={18} />
+				<span>撰写新内容...</span>
+			</a>
+		</div>
+
+		<div class="sidebar-scrollable">
+			<nav class="sidebar-nav">
+				<div class="nav-group">
+					<div class="nav-group-title">主控制台</div>
+					<a
+						href={resolve('/admin')}
+						class="nav-item {$page.url.pathname === '/admin' ? 'active' : ''}"
+					>
+						<LayoutDashboard size={18} />
+						<span>仪表盘</span>
+					</a>
+				</div>
+
+				<div class="nav-group">
+					<div class="nav-group-title">创作库</div>
+					<a
+						href={resolve('/admin/posts')}
+						class="nav-item {$page.url.pathname === '/admin/posts' ? 'active' : ''}"
+					>
+						<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') &&
+						$page.url.pathname !== '/admin/pages/new'
+							? 'active'
+							: ''}"
+					>
+						<AppWindow size={18} />
+						<span>独立{$page.data.aliases?.page || '页面'}</span>
+					</a>
+				</div>
+
+				<div class="nav-group">
+					<div class="nav-group-title">集合与归类</div>
+					<a
+						href={resolve('/admin/categories')}
+						class="nav-item {$page.url.pathname.startsWith('/admin/categories') ? 'active' : ''}"
+					>
+						<FolderTree size={18} />
+						<span>{$page.data.aliases?.category || '分类'}目录</span>
+					</a>
+					<a
+						href={resolve('/admin/series')}
+						class="nav-item {$page.url.pathname.startsWith('/admin/series') ? 'active' : ''}"
+					>
+						<Library size={18} />
+						<span>专题{$page.data.aliases?.series || '系列'}</span>
+					</a>
+					<a
+						href={resolve('/admin/tags')}
+						class="nav-item {$page.url.pathname.startsWith('/admin/tags') ? 'active' : ''}"
+					>
+						<Tags size={18} />
+						<span>{$page.data.aliases?.tag || '标签'}库</span>
+					</a>
+				</div>
+
+				<div class="nav-group">
+					<div class="nav-group-title">资源与系统</div>
+					<a
+						href={resolve('/admin/files')}
+						class="nav-item {$page.url.pathname.startsWith('/admin/files') ? 'active' : ''}"
+					>
+						<ImageIcon size={18} />
+						<span>媒体与文件</span>
+					</a>
+					<a
+						href={resolve('/admin/settings')}
+						class="nav-item {$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}"
+					>
+						<Settings size={18} />
+						<span>站点设置</span>
+					</a>
+				</div>
+			</nav>
+		</div>
+	</aside>
+
+	<div class="main-wrapper">
+		<header class="top-header">
+			<button
+				class="mobile-menu-btn"
+				onclick={() => (isMobileSidebarOpen = true)}
+				aria-label="打开菜单"
+			>
+				<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>
+		</header>
+
+		<main id="pjax-container" class="content-area">
+			<div class="admin-container">
+				{@render children()}
+			</div>
+		</main>
 	</div>
-</main>
+</div>
 
 <Toast />
 <ConfirmDialog />
 
 <style>
-	:global(.wrapper.container.admin-container),
+	:global(body) {
-	.admin-container {
+		margin: 0;
-		max-width: 1400px;
+		padding: 0;
-		padding-top: 2rem;
+		background-color: var(--bg-color, #ffffff);
-		padding-bottom: 4rem;
 	}
 
-	@media screen and (min-width: 1600px) {
+	.admin-layout {
-		:global(.wrapper.container.admin-container),
+		display: flex;
-		.admin-container {
+		min-height: 100vh;
-			max-width: 1440px;
+		width: 100%;
+		background-color: var(--bg-color, #ffffff);
+	}
+
+	/* Sidebar Styles */
+	.sidebar {
+		width: 260px;
+		flex-shrink: 0;
+		background: var(--bg-color, #ffffff);
+		border-right: 1px solid rgba(0, 0, 0, 0.08);
+		display: flex;
+		flex-direction: column;
+		height: 100vh;
+		position: sticky;
+		top: 0;
+		z-index: 40;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.sidebar {
+			border-right: 1px solid rgba(255, 255, 255, 0.1);
 		}
 	}
 
-	.user-info {
+	.sidebar-header {
-		position: absolute;
+		height: 60px;
-		right: 20px;
 		display: flex;
 		align-items: center;
-		gap: 15px;
+		padding: 0 24px;
+	}
+
+	.brand {
+		font-size: 1.1rem;
+		font-weight: 700;
+		color: var(--text-color);
+		text-decoration: none;
+		letter-spacing: -0.01em;
+	}
+
+	.sidebar-action {
+		padding: 12px 16px;
+	}
+
+	.btn-new {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		width: 100%;
+		padding: 10px 14px;
+		background: var(--text-color);
+		color: var(--bg-color, #fff);
+		border-radius: 6px;
+		font-weight: 600;
+		font-size: 0.95rem;
+		text-decoration: none;
+		transition:
+			transform 0.1s,
+			opacity 0.2s;
+	}
+
+	.btn-new:hover {
+		opacity: 0.9;
+	}
+
+	.btn-new:active {
+		transform: scale(0.98);
+	}
+
+	.sidebar-scrollable {
+		flex: 1;
+		overflow-y: auto;
+		padding: 8px 12px 24px 12px;
+	}
+
+	/* Scrollbar styling for sidebar */
+	.sidebar-scrollable::-webkit-scrollbar {
+		width: 4px;
+	}
+	.sidebar-scrollable::-webkit-scrollbar-thumb {
+		background: rgba(0, 0, 0, 0.1);
+		border-radius: 4px;
+	}
+
+	.nav-group {
+		margin-bottom: 24px;
+	}
+
+	.nav-group-title {
+		font-size: 0.75rem;
+		font-weight: 600;
+		color: var(--text-muted, rgba(0, 0, 0, 0.4));
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		padding: 0 12px;
+		margin-bottom: 8px;
+	}
+
+	.nav-item {
+		display: flex;
+		align-items: center;
+		gap: 12px;
+		padding: 8px 12px;
+		color: var(--text-color);
+		text-decoration: none;
+		border-radius: 6px;
+		font-size: 0.95rem;
+		font-weight: 500;
+		margin-bottom: 2px;
+		transition:
+			background-color 0.2s,
+			color 0.2s;
+	}
+
+	.nav-item:hover {
+		background-color: rgba(0, 0, 0, 0.04);
+	}
+
+	.nav-item.active {
+		background-color: rgba(0, 0, 0, 0.06);
+		font-weight: 600;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.nav-item:hover {
+			background-color: rgba(255, 255, 255, 0.06);
+		}
+		.nav-item.active {
+			background-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+
+	.nav-item.sub-item {
+		padding-left: 36px;
 		font-size: 0.9rem;
-		color: var(--header-text);
+		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 */
+	}
+
+	.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 {
+			border-bottom: 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;
-		color: var(--header-text);
+		color: var(--text-muted, rgba(0, 0, 0, 0.6));
 		text-decoration: none;
-		font-size: 0.85rem;
+		font-weight: 500;
-		opacity: 0.85;
+		transition: color 0.2s;
-		transition: opacity 0.2s;
 	}
 
 	.site-link:hover {
-		opacity: 1;
+		color: var(--text-color);
+	}
+
+	.divider {
+		width: 1px;
+		height: 14px;
+		background-color: rgba(0, 0, 0, 0.15);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.divider {
+			background-color: rgba(255, 255, 255, 0.2);
+		}
+	}
+
+	.user-email {
+		font-weight: 500;
+	}
+
+	/* Content Area */
+	.content-area {
+		flex: 1;
+		padding: 24px;
+		overflow-x: hidden;
+	}
+
+	.admin-container {
+		max-width: 1200px;
+		margin: 0 auto;
+	}
+
+	/* Mobile & Tablet Responsiveness */
+	@media (max-width: 860px) {
+		.sidebar {
+			position: fixed;
+			left: -260px;
+			transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+		}
+
+		.admin-layout.sidebar-open .sidebar {
+			left: 0;
+			box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1);
+		}
+
+		.mobile-menu-btn {
+			display: flex;
+		}
+
+		.top-header {
+			padding: 0 16px;
+		}
+
+		.content-area {
+			padding: 16px;
+		}
+	}
+
+	.sidebar-overlay {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 0.4);
+		z-index: 35;
+		backdrop-filter: blur(2px);
+		animation: fadeIn 0.3s ease;
+	}
+
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
 	}
 </style>