309 lines
10 KiB
TypeScript
309 lines
10 KiB
TypeScript
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,
|
|
Menu,
|
|
X,
|
|
Network,
|
|
CloudCog,
|
|
Globe,
|
|
MapPin,
|
|
Key,
|
|
Brain,
|
|
FileTerminal,
|
|
Activity,
|
|
BarChart3,
|
|
GitBranch,
|
|
Monitor,
|
|
Bot,
|
|
AlertTriangle,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
import { ScrollArea } from '@/components/ui/scroll-area';
|
|
|
|
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: 'cloud-billing', name: '云账单', icon: BarChart3, path: '/cloud-billing' },
|
|
{ id: 'agent-monitor', name: 'Agent监控', icon: Activity, path: '/agent-monitor' },
|
|
],
|
|
},
|
|
{
|
|
id: 'k8s',
|
|
name: 'Kubernetes管理',
|
|
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: 'trace', name: '链路追踪', icon: GitBranch, path: '/trace' },
|
|
{ id: 'grafana', name: '监控大屏', icon: Monitor, path: '/grafana' },
|
|
{ id: 'agent-alerts', name: 'Agent告警', icon: AlertTriangle, path: '/agent-alerts' },
|
|
],
|
|
},
|
|
{
|
|
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-assistant', name: '智能助手', icon: Bot, path: '/ai-assistant' },
|
|
{ id: 'ai-alert-analyzer', name: '告警分析', icon: AlertTriangle, path: '/ai-alert-analyzer' },
|
|
{ id: 'ai-predictive', name: '容量预测', icon: BarChart3, path: '/ai-predictive' },
|
|
],
|
|
},
|
|
{ id: 'approval', name: '资源申请', icon: CheckSquare, path: '/approval' },
|
|
{
|
|
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)]">
|
|
<div className={cn('p-2', sidebarCollapsed && 'px-1')}>
|
|
{menuItems.map((item) => (
|
|
<MenuItemComponent key={item.id} item={item} />
|
|
))}
|
|
</div>
|
|
</ScrollArea>
|
|
</aside>
|
|
);
|
|
}
|