File size: 1,808 Bytes
9eb1c55 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
'use client';
import { useState } from 'react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
export default function Sidebar() {
const pathname = usePathname();
const [isCollapsed, setIsCollapsed] = useState(false);
const menuItems = [
{ name: '工作台', href: '/dashboard', icon: 'ri-dashboard-line' },
{ name: 'Agent管理', href: '/agents', icon: 'ri-robot-line' },
{ name: '工作流', href: '/workflows', icon: 'ri-flow-chart' },
{ name: '知识库', href: '/knowledge', icon: 'ri-book-line' },
{ name: '模板市场', href: '/templates', icon: 'ri-store-line' },
{ name: '数据分析', href: '/analytics', icon: 'ri-bar-chart-line' },
{ name: '设置', href: '/settings', icon: 'ri-settings-line' }
];
return (
<div className={`bg-white border-r border-gray-200 flex-shrink-0 transition-all duration-300 ${
isCollapsed ? 'w-16' : 'w-64'
}`}>
<div className="p-6">
<h2 className="text-lg font-semibold text-gray-900 mb-6">导航菜单</h2>
<nav className="space-y-2">
{menuItems.map((item) => (
<Link
key={item.href}
href={item.href}
className={`flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors cursor-pointer ${
pathname === item.href
? 'bg-blue-50 text-blue-600 border-l-4 border-blue-600'
: 'text-gray-700 hover:bg-gray-50'
}`}
>
<div className="w-5 h-5 flex items-center justify-center">
<i className={`${item.icon} text-lg`}></i>
</div>
<span className="font-medium">{item.name}</span>
</Link>
))}
</nav>
</div>
</div>
);
}
|