Blizzard
7e21036faf
- logo 矢量化：青→蓝→紫渐变 S 数据流（logo.tsx + favicon.svg，web/admin 共用） - 全站配色跟随 logo：强调色青瓷绿 → 青蓝（浅 #0284C7 / 暗 #38BDF8），中性色转冷蓝，终端窗深岩蓝底 - 紫色克制使用：仅 logo 与 .text-brand-gradient（Hero 标题"AI Agent 工作台"渐变字） - 导航/页脚/admin 顶栏/登录页挂载 logo 标记 - 终端窗与代码块的提示符、光标、事件标签同步换色 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
53 lines
2.1 KiB
TypeScript
53 lines
2.1 KiB
TypeScript
import { Link, Outlet, useNavigate } from 'react-router-dom'
|
|
import { LogOut, Moon, Sun } from 'lucide-react'
|
|
import { logout } from '@/api/auth'
|
|
import { useTheme } from '@/components/theme-provider'
|
|
import { LogoMark } from '@/components/logo'
|
|
|
|
export function AdminLayout() {
|
|
const navigate = useNavigate()
|
|
const { resolved, setTheme } = useTheme()
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col">
|
|
<header className="sticky top-0 z-40 border-b border-hairline bg-ground/85 backdrop-blur">
|
|
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-6">
|
|
<Link to="/" className="flex items-center gap-2.5 font-mono text-[14px] font-semibold">
|
|
<LogoMark size={24} />
|
|
sundynix <em className="not-italic text-accent">admin</em>
|
|
</Link>
|
|
<div className="flex items-center gap-3">
|
|
<button
|
|
type="button"
|
|
aria-label={
|
|
resolved === 'dark' ? '切换到浅色主题' : '切换到深色主题'
|
|
}
|
|
onClick={() => setTheme(resolved === 'dark' ? 'light' : 'dark')}
|
|
className="flex size-8 items-center justify-center rounded-full border border-hairline-strong text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
|
|
>
|
|
{resolved === 'dark' ? (
|
|
<Sun className="size-4" />
|
|
) : (
|
|
<Moon className="size-4" />
|
|
)}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
logout()
|
|
navigate('/login')
|
|
}}
|
|
className="flex items-center gap-1.5 rounded-[7px] border border-hairline-strong px-3 py-1.5 text-[13px] text-ink-2 transition-colors hover:border-accent hover:text-accent-ink"
|
|
>
|
|
<LogOut className="size-3.5" /> 退出
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="mx-auto w-full max-w-5xl flex-1 px-6 py-8">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|