Spaces:
Paused
Paused
| import { useState } from 'react' | |
| import { NavLink, useNavigate } from 'react-router-dom' | |
| import { LayoutDashboard, KeyRound, KeySquare, ScrollText, SlidersHorizontal, Receipt, LogOut, Zap, Menu, X } from 'lucide-react' | |
| import { clearToken } from '../api' | |
| import { ThemeToggle } from './Theme' | |
| const nav = [ | |
| { to: '/', label: '仪表盘', icon: LayoutDashboard, end: true }, | |
| { to: '/keys', label: 'API Keys', icon: KeyRound, end: false }, | |
| { to: '/upstream', label: '上游 Key', icon: KeySquare, end: false }, | |
| { to: '/logs', label: '请求日志', icon: ScrollText, end: false }, | |
| { to: '/settings', label: '设置', icon: SlidersHorizontal, end: false }, | |
| { to: '/billing', label: '计费', icon: Receipt, end: false }, | |
| ] | |
| function Brand() { | |
| return ( | |
| <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 shadow-sm shadow-indigo-500/40"> | |
| <Zap size={15} className="text-white" fill="currentColor" /> | |
| </div> | |
| ) | |
| } | |
| export default function Layout({ children }: { children: JSX.Element }) { | |
| const navigate = useNavigate() | |
| const [open, setOpen] = useState(false) | |
| const logout = () => { | |
| clearToken() | |
| navigate('/login', { replace: true }) | |
| } | |
| return ( | |
| <div className="flex min-h-screen flex-col md:flex-row"> | |
| {/* 移动端顶栏 */} | |
| <header className="sticky top-0 z-30 flex h-14 shrink-0 items-center justify-between border-b border-slate-800 bg-slate-900 px-4 text-white md:hidden"> | |
| <div className="flex items-center gap-2.5 font-semibold"> | |
| <Brand /> | |
| <span>Pasl Relay</span> | |
| </div> | |
| <button onClick={() => setOpen(true)} className="-mr-2 p-2 text-slate-400 hover:text-white" aria-label="打开菜单"> | |
| <Menu size={20} /> | |
| </button> | |
| </header> | |
| {/* 移动端遮罩 */} | |
| {open && <div className="fixed inset-0 z-40 animate-fade-in bg-black/50 md:hidden" onClick={() => setOpen(false)} />} | |
| {/* 侧边栏：桌面常驻，移动端抽屉 */} | |
| <aside | |
| className={`fixed md:static inset-y-0 left-0 z-50 flex w-64 shrink-0 flex-col bg-slate-900 transition-transform duration-200 ${ | |
| open ? 'translate-x-0' : '-translate-x-full md:translate-x-0' | |
| }`} | |
| > | |
| <div className="flex h-14 shrink-0 items-center gap-2.5 border-b border-slate-800/80 px-4 text-white"> | |
| <Brand /> | |
| <div className="min-w-0 flex-1"> | |
| <div className="text-sm font-semibold leading-tight">Pasl Relay</div> | |
| <div className="text-[10px] leading-tight text-slate-500">中转管理后台</div> | |
| </div> | |
| <ThemeToggle /> | |
| <button onClick={() => setOpen(false)} className="p-1 text-slate-400 hover:text-white md:hidden" aria-label="关闭菜单"> | |
| <X size={18} /> | |
| </button> | |
| </div> | |
| <nav className="flex-1 space-y-1 overflow-y-auto px-3 py-4"> | |
| {nav.map((n) => ( | |
| <NavLink key={n.to} to={n.to} end={n.end} onClick={() => setOpen(false)} className="block"> | |
| {({ isActive }) => ( | |
| <span | |
| className={`flex items-center gap-3 rounded-lg px-3 py-2 text-sm font-medium transition-colors ${ | |
| isActive ? 'bg-indigo-500/15 text-white' : 'text-slate-400 hover:bg-white/5 hover:text-slate-100' | |
| }`} | |
| > | |
| <n.icon size={16} className={isActive ? 'text-indigo-400' : ''} /> | |
| {n.label} | |
| </span> | |
| )} | |
| </NavLink> | |
| ))} | |
| </nav> | |
| <div className="shrink-0 border-t border-slate-800/80 p-3"> | |
| <button | |
| onClick={logout} | |
| className="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-sm text-slate-400 transition-colors hover:bg-white/5 hover:text-white" | |
| > | |
| <LogOut size={16} /> | |
| 退出登录 | |
| </button> | |
| </div> | |
| </aside> | |
| <main className="min-w-0 flex-1 overflow-x-hidden">{children}</main> | |
| </div> | |
| ) | |
| } | |