122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'motion/react';
|
|
import {
|
|
BarChart3,
|
|
FolderRoot,
|
|
Workflow,
|
|
Crosshair,
|
|
Settings,
|
|
LogOut,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
UserCircle
|
|
} from 'lucide-react';
|
|
import { ViewType } from '../types';
|
|
import { cn } from '../lib/utils';
|
|
|
|
interface SidebarProps {
|
|
activeView: ViewType;
|
|
setActiveView: (view: ViewType) => void;
|
|
onLogout: () => void;
|
|
collapsed: boolean;
|
|
setCollapsed: (collapsed: boolean) => void;
|
|
}
|
|
|
|
export default function Sidebar({
|
|
activeView,
|
|
setActiveView,
|
|
onLogout,
|
|
collapsed,
|
|
setCollapsed
|
|
}: SidebarProps) {
|
|
const menuItems = [
|
|
{ id: ViewType.OVERVIEW, icon: BarChart3, label: '总体概况' },
|
|
{ id: ViewType.PROJECTS, icon: FolderRoot, label: '项目库' },
|
|
{ id: ViewType.WORKSPACE, icon: Workflow, label: '逆向工作区' },
|
|
{ id: ViewType.AUTO_MATCH, icon: Crosshair, label: '自动微调匹配工作区' },
|
|
{ id: ViewType.SYSTEM, icon: Settings, label: '系统管理工作区' },
|
|
];
|
|
|
|
return (
|
|
<motion.aside
|
|
animate={{ width: collapsed ? 80 : 260 }}
|
|
className="h-screen bg-slate-900 text-slate-300 flex flex-col relative z-20 transition-all duration-300 shadow-2xl"
|
|
>
|
|
<div className="p-6 flex items-center gap-3 overflow-hidden">
|
|
<div className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0 overflow-hidden">
|
|
<img
|
|
src="/logo.png"
|
|
alt="模型逆向系统"
|
|
className="h-full w-full object-contain"
|
|
/>
|
|
</div>
|
|
{!collapsed && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex flex-col"
|
|
>
|
|
<h1 className="text-white font-bold text-sm tracking-wide">模型逆向系统</h1>
|
|
</motion.div>
|
|
)}
|
|
</div>
|
|
|
|
<nav className="flex-1 px-4 py-4 space-y-2">
|
|
{menuItems.map((item) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setActiveView(item.id)}
|
|
className={cn(
|
|
"w-full flex items-center gap-3 px-3 py-3 rounded-xl transition-all group",
|
|
activeView === item.id
|
|
? "bg-blue-600 text-white shadow-lg shadow-blue-900/20"
|
|
: "hover:bg-slate-800 text-slate-400 hover:text-white"
|
|
)}
|
|
>
|
|
<item.icon size={22} className={cn(
|
|
"shrink-0",
|
|
activeView === item.id ? "text-white" : "group-hover:scale-110 transition-transform"
|
|
)} />
|
|
{!collapsed && (
|
|
<span className="font-medium whitespace-nowrap">{item.label}</span>
|
|
)}
|
|
</button>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-slate-800">
|
|
<div className={cn(
|
|
"flex items-center gap-3 p-2 rounded-xl bg-slate-800/50 mb-4",
|
|
collapsed ? "justify-center" : "px-3"
|
|
)}>
|
|
<UserCircle size={24} className="text-blue-400 shrink-0" />
|
|
{!collapsed && (
|
|
<div className="overflow-hidden">
|
|
<p className="text-sm font-semibold text-white truncate">Admin</p>
|
|
<p className="text-xs text-slate-500 truncate">管理员</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={onLogout}
|
|
className={cn(
|
|
"w-full flex items-center gap-3 px-3 py-3 rounded-xl hover:bg-red-500/10 text-slate-400 hover:text-red-400 transition-all",
|
|
collapsed ? "justify-center" : ""
|
|
)}
|
|
>
|
|
<LogOut size={22} className="shrink-0" />
|
|
{!collapsed && <span className="font-medium">退出登录</span>}
|
|
</button>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
className="absolute -right-3 top-20 w-6 h-6 bg-blue-600 rounded-full flex items-center justify-center text-white shadow-lg hover:scale-110 transition-transform"
|
|
>
|
|
{collapsed ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
|
|
</button>
|
|
</motion.aside>
|
|
);
|
|
}
|