2026-05-04-02-38-48 记录前端项目代码基线

WebSite/src/components/Sidebar.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { 
+  BarChart3, 
+  FolderRoot, 
+  Box, 
+  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: Box, 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 bg-blue-600 rounded-xl flex items-center justify-center text-white shrink-0">
+          <Box size={24} />
+        </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>
+  );
+}