first commit

2026-08-07 14:14:44 +08:00 · 2026-06-05 19:23:28 +08:00
commit e306d2d06b
66 changed files with 18825 additions and 0 deletions
@@ -0,0 +1,189 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+import {
+  ChevronLeft,
+  ChevronRight,
+  Code2,
+  LayoutDashboard,
+  LogOut,
+  Package,
+  ScrollText,
+  Server,
+  Settings2,
+  ShieldAlert,
+  UserCog,
+} from 'lucide-react'
+import { useAuth } from '../contexts/AuthContext'
+import AppIcon from './AppIcon'
+
+interface SidebarProps {
+  collapsed: boolean
+  onToggle: () => void
+}
+
+export default function Sidebar({ collapsed, onToggle }: SidebarProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+  const { logout, isSubUser } = useAuth()
+
+  const isContainerPage =
+    location.pathname.startsWith('/containers') ||
+    location.pathname.startsWith('/container')
+
+  const isImagesPage = location.pathname.startsWith('/images')
+  const isOversellPage = location.pathname.startsWith('/oversell')
+  const isAuditLogsPage = location.pathname.startsWith('/audit-logs')
+  const isApiIntegrationPage = location.pathname.startsWith('/api-integration')
+  const isSecurityPage = location.pathname.startsWith('/security')
+  const isSettingsPage = location.pathname.startsWith('/settings')
+
+  return (
+    <aside
+      className={`fixed left-0 top-0 h-full bg-white border-r border-gray-200 flex flex-col transition-all duration-300 z-30 ${
+        collapsed ? 'w-16' : 'w-60'
+      }`}
+    >
+      <div className="flex items-center justify-between h-14 px-4 border-b border-gray-200">
+        {!collapsed && (
+          <div className="flex items-center gap-2">
+            <div className="w-7 h-7 bg-gray-100 rounded flex items-center justify-center">
+              <AppIcon className="w-5 h-5" />
+            </div>
+            <span className="font-bold text-black text-sm">CLICD</span>
+          </div>
+        )}
+        {collapsed && (
+          <div className="w-7 h-7 bg-gray-100 rounded flex items-center justify-center mx-auto">
+            <AppIcon className="w-5 h-5" />
+          </div>
+        )}
+        <button
+          onClick={onToggle}
+          className="p-1 rounded hover:bg-gray-100 text-gray-500"
+          title="切换侧边栏"
+        >
+          {collapsed ? (
+            <ChevronRight className="w-4 h-4" />
+          ) : (
+            <ChevronLeft className="w-4 h-4" />
+          )}
+        </button>
+      </div>
+
+      <nav className="flex-1 py-4 px-2 space-y-1">
+        {!isSubUser && (
+          <button
+            onClick={() => navigate('/')}
+            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+              location.pathname === '/'
+                ? 'bg-black text-white'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <LayoutDashboard className="w-4 h-4" />
+            {!collapsed && <span>控制面板</span>}
+          </button>
+        )}
+
+        <button
+          onClick={() => navigate('/containers')}
+          className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+            isContainerPage
+              ? 'bg-black text-white'
+              : 'text-gray-700 hover:bg-gray-100'
+          }`}
+        >
+          <Server className="w-4 h-4" />
+          {!collapsed && <span>容器管理</span>}
+        </button>
+
+        {!isSubUser && (
+          <button
+            onClick={() => navigate('/images')}
+            className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+              isImagesPage
+                ? 'bg-black text-white'
+                : 'text-gray-700 hover:bg-gray-100'
+            }`}
+          >
+            <Package className="w-4 h-4" />
+            {!collapsed && <span>镜像管理</span>}
+          </button>
+        )}
+
+        {!isSubUser && (
+          <>
+            <button
+              onClick={() => navigate('/oversell')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                isOversellPage
+                  ? 'bg-black text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <Settings2 className="w-4 h-4" />
+              {!collapsed && <span>宿主机控制</span>}
+            </button>
+
+            <button
+              onClick={() => navigate('/security')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                isSecurityPage
+                  ? 'bg-black text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <ShieldAlert className="w-4 h-4" />
+              {!collapsed && <span>安全告警</span>}
+            </button>
+
+            <button
+              onClick={() => navigate('/audit-logs')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                isAuditLogsPage
+                  ? 'bg-black text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <ScrollText className="w-4 h-4" />
+              {!collapsed && <span>操作日志</span>}
+            </button>
+
+            <button
+              onClick={() => navigate('/api-integration')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                isApiIntegrationPage
+                  ? 'bg-black text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <Code2 className="w-4 h-4" />
+              {!collapsed && <span>API 集成</span>}
+            </button>
+
+            <button
+              onClick={() => navigate('/settings')}
+              className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm transition-colors ${
+                isSettingsPage
+                  ? 'bg-black text-white'
+                  : 'text-gray-700 hover:bg-gray-100'
+              }`}
+            >
+              <UserCog className="w-4 h-4" />
+              {!collapsed && <span>面板设置</span>}
+            </button>
+          </>
+        )}
+      </nav>
+
+      <div className="border-t border-gray-200 p-2">
+        <button
+          onClick={logout}
+          className="w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm text-gray-600 hover:bg-gray-100 transition-colors"
+        >
+          <LogOut className="w-4 h-4" />
+          {!collapsed && <span>退出登录</span>}
+        </button>
+      </div>
+    </aside>
+  )
+}