This commit is contained in:
seahi committed
1 parent
ca55504f60
commit
fc241f2402
1 file changed
+426
-89
+426
-89
@@ -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 = () => {
|
||||
scrolled = window.scrollY > 50;
|
||||
};
|
||||
window.addEventListener('scroll', handleScroll);
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll);
|
||||
};
|
||||
// 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>
|
||||
|
||||
<header class="header {scrolled ? 'scrolled' : ''}">
|
||||
<div class="container wide">
|
||||
<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
|
||||
<nav>
|
||||
<a href={resolve('/admin')} class={$page.url.pathname === '/admin' ? 'active' : ''}>仪表盘</a>
|
||||
<div class="nav-dropdown">
|
||||
<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="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}
|
||||
|
||||
<div class="nav-dropdown">
|
||||
<span
|
||||
class="nav-dropdown-trigger {($page.url.pathname.startsWith('/admin/posts') &&
|
||||
$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>
|
||||
<aside class="sidebar">
|
||||
<div class="sidebar-header">
|
||||
<a href={resolve('/admin')} class="brand">{$page.data.site?.title || 'BlogFlare'} 控制台</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="pjax-container" style="padding-top: 58px; min-height: calc(100vh - 120px);">
|
||||
<div class="wrapper container admin-container">
|
||||
{@render children()}
|
||||
<div class="sidebar-action">
|
||||
<a href={resolve('/admin/posts/new')} class="btn-new">
|
||||
<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),
|
||||
.admin-container {
|
||||
max-width: 1400px;
|
||||
padding-top: 2rem;
|
||||
padding-bottom: 4rem;
|
||||
:global(body) {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color, #ffffff);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1600px) {
|
||||
:global(.wrapper.container.admin-container),
|
||||
.admin-container {
|
||||
max-width: 1440px;
|
||||
.admin-layout {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
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 {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
.sidebar-header {
|
||||
height: 60px;
|
||||
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;
|
||||
opacity: 0.85;
|
||||
transition: opacity 0.2s;
|
||||
font-weight: 500;
|
||||
transition: color 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>
|
||||
Reference in new issue
Block a user