48 lines
1.5 KiB
TypeScript
48 lines
1.5 KiB
TypeScript
import { useLocation, useNavigate } from 'react-router-dom'
|
|
import { Layout, Menu } from 'antd'
|
|
import {
|
|
AppstoreOutlined,
|
|
MessageOutlined,
|
|
HistoryOutlined,
|
|
TeamOutlined,
|
|
FileTextOutlined,
|
|
BarChartOutlined,
|
|
SettingOutlined,
|
|
} from '@ant-design/icons'
|
|
|
|
const { Sider } = Layout
|
|
|
|
const menuItems = [
|
|
{ key: '/agent/dashboard', icon: <AppstoreOutlined />, label: '工作台' },
|
|
{ key: '/agent/chat-history', icon: <HistoryOutlined />, label: '对话记录' },
|
|
{ key: '/agent/customers', icon: <TeamOutlined />, label: '客户管理' },
|
|
{ key: '/agent/knowledge', icon: <FileTextOutlined />, label: '知识库' },
|
|
{ key: '/agent/statistics', icon: <BarChartOutlined />, label: '数据统计' },
|
|
{ key: '/agent/settings', icon: <SettingOutlined />, label: '系统设置' },
|
|
]
|
|
|
|
const AgentSidebar = () => {
|
|
const location = useLocation()
|
|
const navigate = useNavigate()
|
|
|
|
const selectedKey = menuItems.find(item => location.pathname.startsWith(item.key))?.key || '/agent/dashboard'
|
|
|
|
return (
|
|
<Sider width={220} className="!bg-white border-r border-neutral-200">
|
|
<div className="h-14 flex items-center px-5 border-b border-neutral-100">
|
|
<MessageOutlined className="text-lg text-[#2563eb] mr-2.5" />
|
|
<span className="text-base font-semibold text-neutral-900">客服云</span>
|
|
</div>
|
|
<Menu
|
|
mode="inline"
|
|
selectedKeys={[selectedKey]}
|
|
items={menuItems}
|
|
onClick={({ key }) => navigate(key)}
|
|
className="border-e-0 mt-2"
|
|
/>
|
|
</Sider>
|
|
)
|
|
}
|
|
|
|
export default AgentSidebar
|