413 lines
8.7 KiB
Svelte
413 lines
8.7 KiB
Svelte
<script lang="ts">
|
|
import { resolve } from '$app/paths';
|
|
import { page } from '$app/stores';
|
|
|
|
import {
|
|
ExternalLink,
|
|
Menu,
|
|
LayoutDashboard,
|
|
FileText,
|
|
AppWindow,
|
|
FolderTree,
|
|
Library,
|
|
Tags,
|
|
Image as ImageIcon,
|
|
Settings
|
|
} from '@lucide/svelte';
|
|
import Toast from '$lib/components/Toast.svelte';
|
|
import ConfirmDialog from '$lib/components/ConfirmDialog.svelte';
|
|
|
|
let { children } = $props();
|
|
|
|
let isMobileSidebarOpen = $state(false);
|
|
|
|
$effect(() => {
|
|
// Close sidebar on route change on mobile
|
|
const unsubscribe = page.subscribe(() => {
|
|
isMobileSidebarOpen = false;
|
|
});
|
|
return () => unsubscribe();
|
|
});
|
|
|
|
function handleOverlayClick() {
|
|
isMobileSidebarOpen = false;
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>后台管理 - {$page.data.site?.title || 'BlogFlare'}</title>
|
|
</svelte:head>
|
|
|
|
<div class="admin-layout {isMobileSidebarOpen ? 'sidebar-open' : ''}">
|
|
{#if isMobileSidebarOpen}
|
|
<!-- svelte-ignore a11y_click_events_have_key_events -->
|
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
<div class="sidebar-overlay" onclick={handleOverlayClick}></div>
|
|
{/if}
|
|
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<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-scrollable">
|
|
<nav class="sidebar-nav">
|
|
<div class="nav-group">
|
|
<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/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>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
|
|
<div class="sidebar-footer">
|
|
<a
|
|
href={resolve('/admin/settings')}
|
|
class="site-link {$page.url.pathname.startsWith('/admin/settings') ? 'active' : ''}"
|
|
title="站点设置"
|
|
>
|
|
<Settings size={15} aria-hidden="true" />
|
|
<span>站点设置</span>
|
|
</a>
|
|
<a href={resolve('/')} target="_blank" class="site-link" title="访问前台">
|
|
<ExternalLink size={15} aria-hidden="true" />
|
|
<span>访问前台</span>
|
|
</a>
|
|
<span class="user-email">{$page.data.user?.email || 'Admin'}</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<div class="main-wrapper">
|
|
<header class="mobile-header">
|
|
<button
|
|
class="mobile-menu-btn"
|
|
onclick={() => (isMobileSidebarOpen = true)}
|
|
aria-label="打开菜单"
|
|
>
|
|
<Menu size={24} />
|
|
</button>
|
|
<div class="header-spacer"></div>
|
|
<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">
|
|
<div class="admin-container">
|
|
{@render children()}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
|
|
<Toast />
|
|
<ConfirmDialog />
|
|
|
|
<style>
|
|
:global(body) {
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: var(--bg-color, #ffffff);
|
|
}
|
|
|
|
.admin-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
width: 100%;
|
|
background-color: var(--bg-color, #ffffff);
|
|
}
|
|
|
|
/* Sidebar Styles */
|
|
.sidebar {
|
|
width: 260px;
|
|
flex-shrink: 0;
|
|
background: #111; /* Matching TOC background */
|
|
border-right: none;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 40;
|
|
}
|
|
|
|
.sidebar-header {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 24px;
|
|
background: #0a0a0a; /* Slightly darker header */
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.1rem;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
letter-spacing: 1px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.sidebar-scrollable {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px 0;
|
|
}
|
|
|
|
/* Scrollbar styling for sidebar */
|
|
.sidebar-scrollable::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.sidebar-scrollable::-webkit-scrollbar-thumb {
|
|
background: #333;
|
|
}
|
|
|
|
.nav-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.nav-group-title {
|
|
font-size: 0.75rem;
|
|
font-weight: 600;
|
|
color: #666;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
padding: 0 24px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 8px 24px;
|
|
color: #b0b0b0; /* TOC text color */
|
|
text-decoration: none;
|
|
font-size: 0.95rem;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
position: relative;
|
|
border-left: 2px solid transparent;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: var(--accent-color, #419b38);
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-left: 2px solid var(--accent-color, #419b38);
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: var(--accent-color, #419b38);
|
|
font-weight: 700;
|
|
border-left: 2px solid var(--accent-color, #419b38);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.sidebar-footer {
|
|
padding: 20px 24px;
|
|
border-top: 1px solid #222;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.site-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #b0b0b0;
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
transition: color 0.2s;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
|
|
.site-link:hover,
|
|
.site-link.active {
|
|
color: var(--accent-color, #419b38);
|
|
}
|
|
|
|
.user-email {
|
|
font-weight: 500;
|
|
word-break: break-all;
|
|
color: #777;
|
|
}
|
|
|
|
/* 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: 2px solid var(--text-color);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 30;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.mobile-header {
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
|
|
.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: 32px 40px;
|
|
/* overflow-x: hidden is removed because it breaks position: sticky for descendants (toolbar/sidebar) */
|
|
}
|
|
|
|
.admin-container {
|
|
max-width: 1440px;
|
|
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-header {
|
|
display: flex; /* Show only on mobile */
|
|
}
|
|
|
|
.content-area {
|
|
padding: 20px;
|
|
}
|
|
}
|
|
|
|
.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>
|