init: EZOps AIOps 智能运维平台

- 前端: React 18 + TypeScript + Vite + Tailwind CSS + shadcn/ui - 后端: Go + Gin + GORM + JWT (golang-jwt/jwt/v5) - 功能: 服务器管理、K8s集群、监控告警、CI/CD、自动化运维、审批流程、审计日志 - 文档: 设计文档(ROADMAP/PDD/架构/模块)
2026-06-13 23:09:47 +08:00
commit 7d6674bddd
@@ -0,0 +1,262 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import { useThemeStore, useTabStore, useNotificationStore } from '@/store';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Separator } from '@/components/ui/separator';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  Search,
+  Bell,
+  Menu,
+  X,
+  Plus,
+  Settings,
+  User,
+  LogOut,
+  CheckCheck,
+  AlertTriangle,
+  Info,
+  CheckCircle,
+  Terminal,
+  Rocket,
+  Server,
+  Cloud,
+} from 'lucide-react';
+import { formatDistanceToNow } from '@/lib/utils';
+
+export function Header() {
+  const { sidebarCollapsed, toggleSidebar } = useThemeStore();
+  const { tabs, activeTab, removeTab, setActiveTab } = useTabStore();
+  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotificationStore();
+  const [searchValue, setSearchValue] = useState('');
+
+  const getNotificationIcon = (type: string) => {
+    switch (type) {
+      case 'error':
+        return <AlertTriangle className="h-4 w-4 text-red-500" />;
+      case 'warning':
+        return <AlertTriangle className="h-4 w-4 text-amber-500" />;
+      case 'success':
+        return <CheckCircle className="h-4 w-4 text-emerald-500" />;
+      default:
+        return <Info className="h-4 w-4 text-blue-500" />;
+    }
+  };
+
+  return (
+    <header className="fixed top-0 right-0 left-0 z-30 h-14 bg-slate-900/95 backdrop-blur supports-[backdrop-filter]:bg-slate-900/60 border-b border-slate-800 transition-all duration-300"
+      style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
+    >
+      <div className="flex items-center justify-between h-full px-4">
+        {/* Left: Toggle & Search */}
+        <div className="flex items-center gap-3 flex-1">
+          {sidebarCollapsed && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8 text-slate-400 hover:text-slate-100"
+              onClick={toggleSidebar}
+            >
+              <Menu className="h-4 w-4" />
+            </Button>
+          )}
+          
+          {/* Global Search */}
+          <div className="relative w-96 max-w-full">
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-500" />
+            <Input
+              type="text"
+              placeholder="搜索服务器、应用、工单、文档..."
+              value={searchValue}
+              onChange={(e) => setSearchValue(e.target.value)}
+              className="pl-9 h-9 bg-slate-800/50 border-slate-700 text-slate-200 placeholder:text-slate-500 focus-visible:ring-blue-500/30"
+            />
+            <kbd className="absolute right-3 top-1/2 -translate-y-1/2 px-1.5 py-0.5 text-xs font-mono text-slate-500 bg-slate-800 rounded">
+              ⌘K
+            </kbd>
+          </div>
+
+          {/* Quick Actions */}
+          <div className="flex items-center gap-1">
+            <Button variant="ghost" size="sm" className="h-8 gap-1.5 text-slate-400 hover:text-slate-100">
+              <Terminal className="h-4 w-4" />
+              <span className="hidden lg:inline">WebShell</span>
+            </Button>
+            <Button variant="ghost" size="sm" className="h-8 gap-1.5 text-slate-400 hover:text-slate-100">
+              <Rocket className="h-4 w-4" />
+              <span className="hidden lg:inline">发布</span>
+            </Button>
+          </div>
+        </div>
+
+        {/* Right: Actions */}
+        <div className="flex items-center gap-2">
+          {/* Create New */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
+                <Plus className="h-4 w-4" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
+              <DropdownMenuLabel className="text-slate-300">快速创建</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-slate-700" />
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <Server className="h-4 w-4 mr-2" />
+                添加服务器
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <Cloud className="h-4 w-4 mr-2" />
+                添加K8s集群
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <Rocket className="h-4 w-4 mr-2" />
+                创建发布
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <Terminal className="h-4 w-4 mr-2" />
+                创建工单
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          {/* Notifications */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100 relative">
+                <Bell className="h-4 w-4" />
+                {unreadCount > 0 && (
+                  <span className="absolute -top-0.5 -right-0.5 h-4 w-4 rounded-full bg-red-500 text-[10px] font-medium text-white flex items-center justify-center">
+                    {unreadCount > 99 ? '99+' : unreadCount}
+                  </span>
+                )}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-80 bg-slate-800 border-slate-700">
+              <DropdownMenuLabel className="flex items-center justify-between text-slate-300">
+                <span>通知</span>
+                {unreadCount > 0 && (
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="h-6 text-xs text-slate-400 hover:text-slate-100"
+                    onClick={markAllAsRead}
+                  >
+                    <CheckCheck className="h-3 w-3 mr-1" />
+                    全部已读
+                  </Button>
+                )}
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-slate-700" />
+              <div className="max-h-80 overflow-y-auto">
+                {notifications.length === 0 ? (
+                  <div className="py-8 text-center text-slate-500">
+                    <Bell className="h-8 w-8 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">暂无通知</p>
+                  </div>
+                ) : (
+                  notifications.slice(0, 10).map((notification) => (
+                    <DropdownMenuItem
+                      key={notification.id}
+                      className={cn(
+                        'flex items-start gap-3 p-3 cursor-pointer focus:bg-slate-700',
+                        !notification.read && 'bg-slate-700/30'
+                      )}
+                      onClick={() => markAsRead(notification.id)}
+                    >
+                      {getNotificationIcon(notification.type)}
+                      <div className="flex-1 min-w-0">
+                        <p className={cn('text-sm font-medium', !notification.read ? 'text-slate-200' : 'text-slate-400')}>
+                          {notification.title}
+                        </p>
+                        <p className="text-xs text-slate-500 mt-0.5 line-clamp-2">{notification.message}</p>
+                        <p className="text-xs text-slate-600 mt-1">
+                          {formatDistanceToNow(notification.timestamp)}
+                        </p>
+                      </div>
+                      {!notification.read && (
+                        <span className="w-2 h-2 rounded-full bg-blue-500 mt-1" />
+                      )}
+                    </DropdownMenuItem>
+                  ))
+                )}
+              </div>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Separator orientation="vertical" className="h-6 bg-slate-800" />
+
+          {/* User Menu */}
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="h-8 gap-2 px-2 text-slate-300 hover:text-slate-100">
+                <div className="w-6 h-6 rounded-full bg-blue-600 flex items-center justify-center text-white text-xs font-medium">
+                  管
+                </div>
+                <span className="hidden md:inline text-sm">管理员</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48 bg-slate-800 border-slate-700">
+              <DropdownMenuLabel className="text-slate-300">我的账号</DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-slate-700" />
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <User className="h-4 w-4 mr-2" />
+                个人中心
+              </DropdownMenuItem>
+              <DropdownMenuItem className="text-slate-300 focus:bg-slate-700 focus:text-slate-100">
+                <Settings className="h-4 w-4 mr-2" />
+                账号设置
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-slate-700" />
+              <DropdownMenuItem className="text-red-400 focus:bg-slate-700 focus:text-red-400">
+                <LogOut className="h-4 w-4 mr-2" />
+                退出登录
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      {tabs.length > 0 && (
+        <div className="flex items-center h-9 px-2 bg-slate-950 border-b border-slate-800 overflow-x-auto">
+          {tabs.map((tab) => (
+            <div
+              key={tab.id}
+              className={cn(
+                'group flex items-center gap-2 px-3 py-1.5 text-sm border-r border-slate-800 cursor-pointer transition-colors whitespace-nowrap',
+                activeTab === tab.id
+                  ? 'bg-slate-900 text-slate-100'
+                  : 'text-slate-500 hover:text-slate-300 hover:bg-slate-900/50'
+              )}
+              onClick={() => setActiveTab(tab.id)}
+            >
+              <span>{tab.title}</span>
+              {tab.closable && (
+                <button
+                  className="opacity-0 group-hover:opacity-100 p-0.5 rounded hover:bg-slate-700 transition-all"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    removeTab(tab.id);
+                  }}
+                >
+                  <X className="h-3 w-3" />
+                </button>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </header>
+  );
+}
@@ -0,0 +1,31 @@
+import { Outlet } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import { useThemeStore } from '@/store';
+import { Sidebar } from './Sidebar';
+import { Header } from './Header';
+
+export function MainLayout() {
+  const { sidebarCollapsed } = useThemeStore();
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <Sidebar />
+      <div
+        className="transition-all duration-300"
+        style={{ marginLeft: sidebarCollapsed ? '4rem' : '16rem' }}
+      >
+        <Header />
+        <main
+          className={cn(
+            'pt-14 transition-all duration-300',
+            'min-h-[calc(100vh-3.5rem)]'
+          )}
+        >
+          <div className="p-6">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,344 @@
+import { useState } from 'react';
+import { NavLink, useLocation } from 'react-router-dom';
+import { cn } from '@/lib/utils';
+import { useThemeStore, useMenuStore } from '@/store';
+import {
+  LayoutDashboard,
+  Server,
+  Cloud,
+  Rocket,
+  Bell,
+  CheckSquare,
+  PlayCircle,
+  Settings,
+  ChevronDown,
+  ChevronRight,
+  Terminal,
+  Cpu,
+  Database,
+  FileCode,
+  Shield,
+  Users,
+  LogOut,
+  Menu,
+  X,
+  Box,
+  Network,
+  CloudCog,
+  Globe,
+  MapPin,
+  Key,
+  Compass,
+  Brain,
+  ScrollText,
+  FileTerminal,
+  Activity,
+  BarChart3,
+  GitBranch,
+  Monitor,
+  Bot,
+  AlertTriangle,
+} from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+
+interface MenuItem {
+  id: string;
+  name: string;
+  icon: React.ElementType;
+  path?: string;
+  children?: MenuItem[];
+}
+
+const menuItems: MenuItem[] = [
+  { id: 'dashboard', name: '仪表盘', icon: LayoutDashboard, path: '/' },
+  {
+    id: 'assets',
+    name: '资产管理',
+    icon: Server,
+    children: [
+      { id: 'servers', name: '服务器管理', icon: Database, path: '/servers' },
+      { id: 'cloud-accounts', name: '云账号管理', icon: Key, path: '/cloud-accounts' },
+      { id: 'domains', name: '域名管理', icon: Globe, path: '/domains' },
+      { id: 'regions', name: '区域管理', icon: MapPin, path: '/regions' },
+      { id: 'platforms', name: '云平台', icon: CloudCog, path: '/platforms' },
+      { id: 'resource-models', name: '资源模型', icon: Box, path: '/resource-models' },
+      { id: 'webshell', name: 'WebShell', icon: Terminal, path: '/webshell' },
+      { id: 'batch-import', name: '批量导入', icon: FileCode, path: '/batch-import' },
+    ],
+  },
+  {
+    id: 'k8s',
+    name: 'K8s集群管理',
+    icon: Cloud,
+    children: [
+      { id: 'clusters', name: '集群列表', icon: Cloud, path: '/clusters' },
+      { id: 'nodes', name: '节点管理', icon: Cpu, path: '/nodes' },
+      { id: 'workloads', name: '工作负载', icon: Database, path: '/workloads' },
+      { id: 'topology', name: '架构拓扑', icon: Network, path: '/topology' },
+    ],
+  },
+  {
+    id: 'deploy',
+    name: '应用发布',
+    icon: Rocket,
+    children: [
+      { id: 'pipelines', name: '流水线管理', icon: GitBranch, path: '/pipelines' },
+      { id: 'releases', name: '发布管理', icon: Rocket, path: '/releases' },
+    ],
+  },
+  {
+    id: 'monitor',
+    name: '监控告警',
+    icon: Bell,
+    children: [
+      { id: 'metrics', name: '指标监控', icon: Cpu, path: '/metrics' },
+      { id: 'alert-center', name: '告警中心', icon: Bell, path: '/alert-center' },
+      { id: 'logs-monitor', name: '日志能力', icon: FileCode, path: '/logs-monitor' },
+      { id: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
+      { id: 'grafana', name: '监控大屏', icon: Monitor, path: '/grafana' },
+    ],
+  },
+  { id: 'approval', name: '审批流程', icon: CheckSquare, path: '/approval' },
+  { id: 'navigation', name: '站内导航', icon: Compass, path: '/navigation' },
+  {
+    id: 'automation',
+    name: '自动化运维',
+    icon: PlayCircle,
+    children: [
+      { id: 'cronjobs', name: '定时任务', icon: PlayCircle, path: '/cronjobs' },
+      { id: 'scripts', name: '脚本库', icon: FileCode, path: '/scripts' },
+      { id: 'ansible', name: 'Ansible', icon: FileTerminal, path: '/ansible' },
+    ],
+  },
+  {
+    id: 'aiops',
+    name: 'AIOps智能',
+    icon: Brain,
+    children: [
+      { id: 'ai-hub', name: '智能运维中心', icon: Brain, path: '/ai-hub' },
+      { id: 'ai-assistant', name: 'AI智能助手', icon: Bot, path: '/ai-assistant' },
+      { id: 'ai-alert-analyzer', name: '告警智能分析', icon: AlertTriangle, path: '/ai-alert-analyzer' },
+      { id: 'ai-script-generator', name: 'AI脚本生成', icon: FileCode, path: '/ai-script-generator' },
+      { id: 'ai-fault-diagnosis', name: '故障智能诊断', icon: Activity, path: '/ai-fault-diagnosis' },
+      { id: 'ai-predictive', name: 'AI预测分析', icon: BarChart3, path: '/ai-predictive' },
+      { id: 'sql-audit', name: 'SQL审计', icon: ScrollText, path: '/sql-audit' },
+    ],
+  },
+  {
+    id: 'system',
+    name: '系统管理',
+    icon: Settings,
+    children: [
+      { id: 'users', name: '用户管理', icon: Users, path: '/users' },
+      { id: 'roles', name: '角色权限', icon: Shield, path: '/roles' },
+      { id: 'logs-audit', name: '操作审计', icon: FileCode, path: '/logs-audit' },
+      { id: 'settings', name: '系统设置', icon: Settings, path: '/settings' },
+    ],
+  },
+];
+
+function MenuItemComponent({ item, depth = 0 }: { item: MenuItem; depth?: number }) {
+  const location = useLocation();
+  const { openMenus, toggleMenu, activeMenu, setActiveMenu } = useMenuStore();
+  const { sidebarCollapsed } = useThemeStore();
+  const hasChildren = item.children && item.children.length > 0;
+  const isOpen = openMenus.includes(item.id);
+  const isActive = item.path === location.pathname || activeMenu === item.id;
+
+  const handleClick = () => {
+    if (hasChildren) {
+      toggleMenu(item.id);
+    } else if (item.path) {
+      setActiveMenu(item.id);
+    }
+  };
+
+  if (sidebarCollapsed && depth === 0) {
+    return (
+      <div className="relative group">
+        <Button
+          variant={isActive ? 'secondary' : 'ghost'}
+          size="icon"
+          className={cn(
+            'w-10 h-10 mx-auto mb-1',
+            isActive && 'bg-blue-600/20 text-blue-400'
+          )}
+          asChild={!hasChildren}
+        >
+          {hasChildren ? (
+            <span onClick={handleClick}>
+              <item.icon className="h-5 w-5" />
+            </span>
+          ) : (
+            <NavLink to={item.path || '#'} onClick={handleClick}>
+              <item.icon className="h-5 w-5" />
+            </NavLink>
+          )}
+        </Button>
+        {/* Tooltip */}
+        <div className="absolute left-full top-1/2 -translate-y-1/2 ml-2 px-3 py-1.5 bg-slate-800 text-slate-100 text-sm rounded-md opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 border border-slate-700">
+          {item.name}
+          {hasChildren && (
+            <div className="absolute left-0 top-0 mt-2 ml-2 w-48 bg-slate-800 rounded-md border border-slate-700 shadow-lg py-1">
+              {item.children?.map((child) => (
+                <NavLink
+                  key={child.id}
+                  to={child.path || '#'}
+                  className={({ isActive }) =>
+                    cn(
+                      'block px-4 py-2 text-sm hover:bg-slate-700 transition-colors',
+                      isActive ? 'text-blue-400 bg-blue-600/10' : 'text-slate-300'
+                    )
+                  }
+                >
+                  {child.name}
+                </NavLink>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('mb-0.5', depth > 0 && 'ml-4')}> 
+      {hasChildren ? (
+        <>
+          <Button
+            variant={isActive ? 'secondary' : 'ghost'}
+            className={cn(
+              'w-full justify-between h-9 px-3 text-sm font-normal',
+              isActive ? 'bg-blue-600/20 text-blue-400 hover:bg-blue-600/30' : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800'
+            )}
+            onClick={handleClick}
+          >
+            <span className="flex items-center gap-2">
+              <item.icon className="h-4 w-4" />
+              <span>{item.name}</span>
+            </span>
+            {isOpen ? (
+              <ChevronDown className="h-4 w-4 text-slate-500" />
+            ) : (
+              <ChevronRight className="h-4 w-4 text-slate-500" />
+            )}
+          </Button>
+          {isOpen && (
+            <div className="mt-0.5 space-y-0.5">
+              {item.children?.map((child) => (
+                <NavLink
+                  key={child.id}
+                  to={child.path || '#'}
+                  onClick={() => setActiveMenu(child.id)}
+                  className={({ isActive }) =>
+                    cn(
+                      'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
+                      isActive
+                        ? 'bg-blue-600/20 text-blue-400'
+                        : 'text-slate-400 hover:text-slate-100 hover:bg-slate-800'
+                    )
+                  }
+                >
+                  <child.icon className="h-3.5 w-3.5" />
+                  <span>{child.name}</span>
+                </NavLink>
+              ))}
+            </div>
+          )}
+        </>
+      ) : (
+        <NavLink
+          to={item.path || '#'}
+          onClick={handleClick}
+          className={({ isActive }) =>
+            cn(
+              'flex items-center gap-2 px-3 py-2 text-sm rounded-md transition-colors',
+              isActive
+                ? 'bg-blue-600/20 text-blue-400'
+                : 'text-slate-300 hover:text-slate-100 hover:bg-slate-800'
+            )
+          }
+        >
+          <item.icon className="h-4 w-4" />
+          <span>{item.name}</span>
+        </NavLink>
+      )}
+    </div>
+  );
+}
+
+export function Sidebar() {
+  const { sidebarCollapsed, toggleSidebar } = useThemeStore();
+
+  return (
+    <aside
+      className={cn(
+        'fixed left-0 top-0 z-40 h-screen bg-slate-900 border-r border-slate-800 transition-all duration-300',
+        sidebarCollapsed ? 'w-16' : 'w-64'
+      )}
+    >
+      {/* Logo */}
+      <div className="flex items-center justify-between h-14 px-4 border-b border-slate-800">
+        {!sidebarCollapsed && (
+          <div className="flex items-center gap-2">
+            <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center">
+              <Cloud className="h-5 w-5 text-white" />
+            </div>
+            <span className="font-semibold text-slate-100">AIOps平台</span>
+          </div>
+        )}
+        {sidebarCollapsed && (
+          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 flex items-center justify-center mx-auto">
+            <Cloud className="h-5 w-5 text-white" />
+          </div>
+        )}
+        {!sidebarCollapsed && (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 text-slate-400 hover:text-slate-100"
+            onClick={toggleSidebar}
+          >
+            <Menu className="h-4 w-4" />
+          </Button>
+        )}
+      </div>
+
+      {/* Menu */}
+      <ScrollArea className="h-[calc(100vh-3.5rem-4rem)]">
+        <div className={cn('p-2', sidebarCollapsed && 'px-1')}>
+          {menuItems.map((item) => (
+            <MenuItemComponent key={item.id} item={item} />
+          ))}
+        </div>
+      </ScrollArea>
+
+      {/* User */}
+      {!sidebarCollapsed && (
+        <div className="absolute bottom-0 left-0 right-0 p-3 border-t border-slate-800 bg-slate-900">
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center text-white text-sm font-medium">
+              管
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-slate-200 truncate">管理员</p>
+              <p className="text-xs text-slate-500 truncate">admin@company.com</p>
+            </div>
+            <Button variant="ghost" size="icon" className="h-8 w-8 text-slate-400 hover:text-slate-100">
+              <LogOut className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+      )}
+      {sidebarCollapsed && (
+        <div className="absolute bottom-0 left-0 right-0 p-2 border-t border-slate-800 bg-slate-900">
+          <Button variant="ghost" size="icon" className="w-10 h-10 mx-auto text-slate-400 hover:text-slate-100">
+            <LogOut className="h-5 w-5" />
+          </Button>
+        </div>
+      )}
+    </aside>
+  );
+}