94 lines
3.9 KiB
TypeScript
94 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, Outlet, useNavigate } from 'react-router-dom';
|
|
import { LayoutDashboard, FolderOpen, GraduationCap, Gamepad2, LogOut } from 'lucide-react';
|
|
|
|
import { clearStoredSession } from '@/src/lib/session';
|
|
import { cn } from '@/src/lib/utils';
|
|
|
|
const NAV_ITEMS = [
|
|
{ name: '总览', path: '/overview', icon: LayoutDashboard },
|
|
{ name: '网盘', path: '/files', icon: FolderOpen },
|
|
{ name: '教务', path: '/school', icon: GraduationCap },
|
|
{ name: '游戏', path: '/games', icon: Gamepad2 },
|
|
];
|
|
|
|
export function Layout() {
|
|
const navigate = useNavigate();
|
|
|
|
const handleLogout = () => {
|
|
clearStoredSession();
|
|
navigate('/login');
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col bg-[#07101D] text-white relative overflow-hidden">
|
|
{/* Animated Gradient Background */}
|
|
<div className="fixed inset-0 z-0 pointer-events-none">
|
|
<div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] rounded-full bg-[#336EFF] opacity-20 mix-blend-screen filter blur-[120px] animate-blob" />
|
|
<div className="absolute top-[20%] right-[-10%] w-[50%] h-[50%] rounded-full bg-purple-600 opacity-20 mix-blend-screen filter blur-[120px] animate-blob animation-delay-2000" />
|
|
<div className="absolute bottom-[-20%] left-[20%] w-[60%] h-[60%] rounded-full bg-indigo-600 opacity-20 mix-blend-screen filter blur-[120px] animate-blob animation-delay-4000" />
|
|
</div>
|
|
|
|
{/* Top Navigation */}
|
|
<header className="fixed inset-x-0 top-0 z-50 w-full glass-panel border-b border-white/10 bg-[#07101D]/60 backdrop-blur-xl">
|
|
<div className="container mx-auto px-4 h-16 flex items-center justify-between">
|
|
{/* Brand */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#336EFF] to-blue-400 flex items-center justify-center shadow-lg shadow-[#336EFF]/20">
|
|
<span className="text-white font-bold text-lg leading-none">Y</span>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<span className="text-white font-bold text-sm tracking-wider">YOYUZH.XYZ</span>
|
|
<span className="text-slate-400 text-[10px] uppercase tracking-widest">Personal Portal</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Nav Links */}
|
|
<nav className="hidden md:flex items-center gap-2">
|
|
{NAV_ITEMS.map((item) => (
|
|
<NavLink
|
|
key={item.path}
|
|
to={item.path}
|
|
className={({ isActive }) =>
|
|
cn(
|
|
'flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200 relative overflow-hidden group',
|
|
isActive
|
|
? 'text-white shadow-md shadow-[#336EFF]/20'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
|
)
|
|
}
|
|
>
|
|
{({ isActive }) => (
|
|
<>
|
|
{isActive && (
|
|
<div className="absolute inset-0 bg-[#336EFF] opacity-100 z-0" />
|
|
)}
|
|
<item.icon className="w-4 h-4 relative z-10" />
|
|
<span className="relative z-10">{item.name}</span>
|
|
</>
|
|
)}
|
|
</NavLink>
|
|
))}
|
|
</nav>
|
|
|
|
{/* User / Actions */}
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={handleLogout}
|
|
className="text-slate-400 hover:text-white transition-colors p-2 rounded-xl hover:bg-white/5 relative z-10"
|
|
aria-label="Logout"
|
|
>
|
|
<LogOut className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* Main Content */}
|
|
<main className="relative z-10 flex-1 container mx-auto px-4 pb-8 pt-24">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|