diff --git a/src/routes/admin/+layout.svelte b/src/routes/admin/+layout.svelte index 18fe090..8a0774a 100644 --- a/src/routes/admin/+layout.svelte +++ b/src/routes/admin/+layout.svelte @@ -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 @@ 全部{$page.data.aliases?.post || '文章'} - - - 已发布 - - - - 草稿箱 - + + + +
+ {$page.data.user?.email || 'Admin'} +
-
+
-
- - + {$page.data.site?.title || 'BlogFlare'} 控制台
@@ -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; } }