feat: 添加绿色主题品牌图标与管理后台侧边栏UI样式

src/app.html

@@ -14,6 +14,24 @@
 			rel="stylesheet"
 		/>
 		<link href="https://fonts.googleapis.com/css?family=Fira+Code&display=swap" rel="stylesheet" />
+		<link rel="icon" href="%sveltekit.assets%/brand/green-echo/favicon.svg" type="image/svg+xml" />
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="32x32"
+			href="%sveltekit.assets%/brand/green-echo/favicon-32.png"
+		/>
+		<link
+			rel="icon"
+			type="image/png"
+			sizes="16x16"
+			href="%sveltekit.assets%/brand/green-echo/favicon-16.png"
+		/>
+		<link
+			rel="apple-touch-icon"
+			sizes="48x48"
+			href="%sveltekit.assets%/brand/green-echo/favicon-48.png"
+		/>
 		%sveltekit.head%
 	</head>
 	<body data-sveltekit-preload-data="hover">

src/routes/+layout.svelte

@@ -66,9 +66,13 @@
 			class="header {scrolled ? 'scrolled' : ''} {isMobileMenuOpen ? 'mobile-menu-open' : ''}"
 		>
 			<div class="container wide">
-				<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}
+				<a href={resolve('/')} class="brand" onclick={() => (isMobileMenuOpen = false)}>
-					>{$page.data.site?.title || 'BlogFlare'}</a
+					<img
-				>
+						src={resolve('/brand/green-echo/icon-green.svg')}
+						alt="Logo"
+						style="height: 1.6rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
+					/>{$page.data.site?.title || 'BlogFlare'}
+				</a>
 				<button
 					class="mobile-menu-btn"
 					onclick={() => (isMobileMenuOpen = !isMobileMenuOpen)}
@@ -149,7 +153,13 @@
 						/>
 					</div>
 				{/if}
-				<h1 class="home-title">{$page.data.site?.title || 'BlogFlare'}</h1>
+				<h1 class="home-title">
+					<img
+						src={resolve('/brand/green-echo/icon-green.svg')}
+						alt="Logo"
+						style="height: 2.2rem; margin-right: 0.8rem; vertical-align: text-bottom; margin-bottom: 0.2rem;"
+					/>{$page.data.site?.title || 'BlogFlare'}
+				</h1>
 				<p class="home-subtitle">
 					{$page.data.site?.description ||
 						'A high-performance blog powered by Cloudflare D1, R2, and KV.'}
@@ -168,7 +178,13 @@
 				<section>
 					<p>
 						© {new Date().getFullYear()}
-						<span class="brand">{$page.data.site?.title || 'BlogFlare'}</span>
+						<span class="brand">
+							<img
+								src={resolve('/brand/green-echo/icon-green.svg')}
+								alt="Logo"
+								style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.1rem;"
+							/>{$page.data.site?.title || 'BlogFlare'}
+						</span>
 					</p>
 					{#if uptimeText}
 						<p>感谢陪伴：{uptimeText}</p>

src/routes/admin/+layout.svelte

@@ -48,7 +48,14 @@
 
 	<aside class="sidebar">
 		<div class="sidebar-header">
-			<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
+			<a href={resolve('/admin')} class="brand">
+				<img
+					src={resolve('/brand/green-echo/icon-green.svg')}
+					alt="Logo"
+					style="height: 1.4rem; margin-right: 0.5rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
+				/>
+				{$page.data.site?.title || 'BlogFlare'} 控制台
+			</a>
 		</div>
 
 		<div class="sidebar-action">
@@ -157,7 +164,14 @@
 				<Menu size={24} />
 			</button>
 			<div class="header-spacer"></div>
-			<span class="brand-mobile">{$page.data.site?.title || 'BlogFlare'} 控制台</span>
+			<span class="brand-mobile">
+				<img
+					src={resolve('/brand/green-echo/icon-green.svg')}
+					alt="Logo"
+					style="height: 1.2rem; margin-right: 0.4rem; vertical-align: text-bottom; margin-bottom: 0.15rem;"
+				/>
+				{$page.data.site?.title || 'BlogFlare'} 控制台
+			</span>
 		</header>
 
 		<main id="pjax-container" class="content-area">
@@ -189,8 +203,8 @@
 	.sidebar {
 		width: 260px;
 		flex-shrink: 0;
-		background: var(--bg-color, #ffffff);
+		background: #111; /* Matching TOC background */
-		border-right: 2px solid var(--text-color);
+		border-right: none;
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
@@ -204,13 +218,13 @@
 		display: flex;
 		align-items: center;
 		padding: 0 24px;
-		border-bottom: 2px solid var(--text-color);
+		background: #0a0a0a; /* Slightly darker header */
 	}
 
 	.brand {
-		font-size: 1.2rem;
+		font-size: 1.1rem;
-		font-weight: 700;
+		font-weight: 600;
-		color: var(--text-color);
+		color: #fff;
 		text-decoration: none;
 		letter-spacing: 1px;
 		text-transform: uppercase;
@@ -218,13 +232,7 @@
 
 	.sidebar-action {
 		padding: 24px;
-		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+		border-bottom: 1px solid #222;
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.sidebar-action {
-			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-		}
 	}
 
 	.btn-new {
@@ -234,14 +242,14 @@
 		gap: 8px;
 		width: 100%;
 		padding: 12px 14px;
-		background: var(--text-color);
+		background: #222;
-		color: var(--bg-color, #fff);
+		color: #fff;
 		font-weight: 600;
 		font-size: 0.95rem;
 		text-decoration: none;
 		text-transform: uppercase;
 		letter-spacing: 1px;
-		border: 2px solid var(--text-color);
+		border: 1px solid #333;
 		transition: all 0.2s ease;
 	}
 
@@ -262,7 +270,7 @@
 		width: 4px;
 	}
 	.sidebar-scrollable::-webkit-scrollbar-thumb {
-		background: var(--text-color);
+		background: #333;
 	}
 
 	.nav-group {
@@ -270,14 +278,13 @@
 	}
 
 	.nav-group-title {
-		font-size: 0.8rem;
+		font-size: 0.75rem;
-		font-weight: 700;
+		font-weight: 600;
-		color: var(--text-color);
+		color: #666;
 		text-transform: uppercase;
 		letter-spacing: 1px;
 		padding: 0 24px;
 		margin-bottom: 12px;
-		opacity: 0.6;
 	}
 
 	.nav-item {
@@ -285,34 +292,29 @@
 		align-items: center;
 		gap: 12px;
 		padding: 10px 24px;
-		color: var(--text-color);
+		color: #b0b0b0; /* TOC text color */
 		text-decoration: none;
 		font-size: 0.95rem;
 		font-weight: 500;
 		transition: all 0.2s;
-		border-left: 3px solid transparent;
+		position: relative;
+		border-left: 2px solid transparent;
 	}
 
 	.nav-item:hover {
 		color: var(--accent-color, #419b38);
-		padding-left: 28px;
 	}
 
 	.nav-item.active {
-		border-left: 3px solid var(--accent-color, #419b38);
+		color: var(--accent-color, #419b38);
 		font-weight: 700;
-		background: rgba(0, 0, 0, 0.03);
+		border-left: 2px solid var(--accent-color, #419b38);
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.nav-item.active {
 		background: rgba(255, 255, 255, 0.05);
 	}
-	}
 
 	.sidebar-footer {
 		padding: 20px 24px;
-		border-top: 2px solid var(--text-color);
+		border-top: 1px solid #222;
 		display: flex;
 		flex-direction: column;
 		gap: 12px;
@@ -323,7 +325,7 @@
 		display: inline-flex;
 		align-items: center;
 		gap: 8px;
-		color: var(--text-color);
+		color: #b0b0b0;
 		text-decoration: none;
 		font-weight: 600;
 		transition: color 0.2s;
@@ -338,8 +340,7 @@
 	.user-email {
 		font-weight: 500;
 		word-break: break-all;
-		color: var(--text-color);
+		color: #777;
-		opacity: 0.8;
 	}
 
 	/* Main Wrapper */