style: 优化管理后台侧边栏和顶栏的UI样式

src/routes/admin/+layout.svelte

@@ -143,7 +143,6 @@
 				<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>
@@ -191,7 +190,7 @@
 		width: 260px;
 		flex-shrink: 0;
 		background: var(--bg-color, #ffffff);
-		border-right: 1px solid rgba(0, 0, 0, 0.08);
+		border-right: 2px solid var(--text-color);
 		display: flex;
 		flex-direction: column;
 		height: 100vh;
@@ -200,60 +199,62 @@
 		z-index: 40;
 	}
 
-	@media (prefers-color-scheme: dark) {
-		.sidebar {
-			border-right: 1px solid rgba(255, 255, 255, 0.1);
-		}
-	}
-
 	.sidebar-header {
 		height: 60px;
 		display: flex;
 		align-items: center;
 		padding: 0 24px;
+		border-bottom: 2px solid var(--text-color);
 	}
 
 	.brand {
-		font-size: 1.1rem;
+		font-size: 1.2rem;
 		font-weight: 700;
 		color: var(--text-color);
 		text-decoration: none;
-		letter-spacing: -0.01em;
+		letter-spacing: 1px;
+		text-transform: uppercase;
 	}
 
 	.sidebar-action {
-		padding: 12px 16px;
+		padding: 24px;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+	@media (prefers-color-scheme: dark) {
+		.sidebar-action {
+			border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+		}
 	}
 
 	.btn-new {
 		display: flex;
 		align-items: center;
+		justify-content: center;
 		gap: 8px;
 		width: 100%;
-		padding: 10px 14px;
+		padding: 12px 14px;
 		background: var(--text-color);
 		color: var(--bg-color, #fff);
-		border-radius: 6px;
 		font-weight: 600;
 		font-size: 0.95rem;
 		text-decoration: none;
-		transition:
+		text-transform: uppercase;
-			transform 0.1s,
+		letter-spacing: 1px;
-			opacity 0.2s;
+		border: 2px solid var(--text-color);
+		transition: all 0.2s ease;
 	}
 
 	.btn-new:hover {
-		opacity: 0.9;
+		background-color: var(--accent-color, #419b38);
-	}
+		border-color: var(--accent-color, #419b38);
-
+		color: white;
-	.btn-new:active {
-		transform: scale(0.98);
 	}
 
 	.sidebar-scrollable {
 		flex: 1;
 		overflow-y: auto;
-		padding: 8px 12px 24px 12px;
+		padding: 24px 0;
 	}
 
 	/* Scrollbar styling for sidebar */
@@ -261,92 +262,84 @@
 		width: 4px;
 	}
 	.sidebar-scrollable::-webkit-scrollbar-thumb {
-		background: rgba(0, 0, 0, 0.1);
+		background: var(--text-color);
-		border-radius: 4px;
 	}
 
 	.nav-group {
-		margin-bottom: 24px;
+		margin-bottom: 30px;
 	}
 
 	.nav-group-title {
-		font-size: 0.75rem;
+		font-size: 0.8rem;
-		font-weight: 600;
+		font-weight: 700;
-		color: var(--text-muted, rgba(0, 0, 0, 0.4));
+		color: var(--text-color);
 		text-transform: uppercase;
-		letter-spacing: 0.05em;
+		letter-spacing: 1px;
-		padding: 0 12px;
+		padding: 0 24px;
-		margin-bottom: 8px;
+		margin-bottom: 12px;
+		opacity: 0.6;
 	}
 
 	.nav-item {
 		display: flex;
 		align-items: center;
 		gap: 12px;
-		padding: 8px 12px;
+		padding: 10px 24px;
 		color: var(--text-color);
 		text-decoration: none;
-		border-radius: 6px;
 		font-size: 0.95rem;
 		font-weight: 500;
-		margin-bottom: 2px;
+		transition: all 0.2s;
-		transition:
+		border-left: 3px solid transparent;
-			background-color 0.2s,
-			color 0.2s;
 	}
 
 	.nav-item:hover {
-		background-color: rgba(0, 0, 0, 0.04);
+		color: var(--accent-color, #419b38);
+		padding-left: 28px;
 	}
 
 	.nav-item.active {
-		background-color: rgba(0, 0, 0, 0.06);
+		border-left: 3px solid var(--accent-color, #419b38);
-		font-weight: 600;
+		font-weight: 700;
+		background: rgba(0, 0, 0, 0.03);
 	}
 
 	@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);
+			background: rgba(255, 255, 255, 0.05);
 		}
 	}
 
 	.sidebar-footer {
-		padding: 16px 20px;
+		padding: 20px 24px;
-		border-top: 1px solid rgba(0, 0, 0, 0.08);
+		border-top: 2px solid var(--text-color);
 		display: flex;
 		flex-direction: column;
-		gap: 8px;
+		gap: 12px;
-		font-size: 0.85rem;
+		font-size: 0.9rem;
-		color: var(--text-muted, rgba(0, 0, 0, 0.6));
-	}
-
-	@media (prefers-color-scheme: dark) {
-		.sidebar-footer {
-			border-top: 1px solid rgba(255, 255, 255, 0.1);
-		}
 	}
 
 	.site-link {
 		display: inline-flex;
 		align-items: center;
 		gap: 8px;
-		color: var(--text-muted, rgba(0, 0, 0, 0.6));
+		color: var(--text-color);
 		text-decoration: none;
-		font-weight: 500;
+		font-weight: 600;
 		transition: color 0.2s;
+		text-transform: uppercase;
+		letter-spacing: 0.5px;
 	}
 
 	.site-link:hover {
-		color: var(--text-color);
+		color: var(--accent-color, #419b38);
 	}
 
 	.user-email {
 		font-weight: 500;
-		opacity: 0.7;
 		word-break: break-all;
+		color: var(--text-color);
+		opacity: 0.8;
 	}
 
 	/* Main Wrapper */
@@ -363,7 +356,7 @@
 		align-items: center;
 		padding: 0 16px;
 		background: var(--bg-color, #ffffff);
-		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+		border-bottom: 2px solid var(--text-color);
 		position: sticky;
 		top: 0;
 		z-index: 30;