69 lines
2.7 KiB
TypeScript
69 lines
2.7 KiB
TypeScript
import { useLocation, useNavigate } from 'react-router-dom'
|
|
import { Layout, Menu, Dropdown, Avatar } from 'antd'
|
|
import {
|
|
AppstoreOutlined, MessageOutlined, HistoryOutlined, TeamOutlined,
|
|
FileTextOutlined, BarChartOutlined, SettingOutlined, LogoutOutlined, UserOutlined,
|
|
} from '@ant-design/icons'
|
|
import { useAuth } from '@/stores/auth'
|
|
|
|
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 { user, logout } = useAuth()
|
|
const visibleMenuItems = menuItems.filter(item => {
|
|
if (item.key === '/agent/statistics') return user?.role === 'admin' || user?.role === 'supervisor'
|
|
if (item.key === '/agent/settings') return user?.role === 'admin'
|
|
return true
|
|
})
|
|
|
|
const selectedKey = visibleMenuItems.find(item => location.pathname.startsWith(item.key))?.key || '/agent/dashboard'
|
|
|
|
const handleLogout = () => {
|
|
logout()
|
|
navigate('/login', { replace: true })
|
|
}
|
|
|
|
return (
|
|
<Sider width={220} className="!bg-white border-r border-neutral-200 flex flex-col">
|
|
<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={visibleMenuItems}
|
|
onClick={({ key }) => navigate(key)}
|
|
className="border-e-0 mt-2 flex-1"
|
|
/>
|
|
<div className="border-t border-neutral-100 p-3">
|
|
<Dropdown
|
|
menu={{ items: [{ key: 'logout', icon: <LogoutOutlined />, label: '退出登录', onClick: handleLogout }] }}
|
|
trigger={['click']}
|
|
>
|
|
<div className="flex items-center gap-2 cursor-pointer hover:bg-neutral-50 rounded p-1.5">
|
|
<Avatar size={28} icon={<UserOutlined />} className="!bg-blue-100 !text-blue-500" />
|
|
<div className="min-w-0">
|
|
<div className="text-xs font-medium text-neutral-700 truncate">{user?.nickname || '客服'}</div>
|
|
<div className="text-xs text-neutral-400">在线</div>
|
|
</div>
|
|
</div>
|
|
</Dropdown>
|
|
</div>
|
|
</Sider>
|
|
)
|
|
}
|
|
|
|
export default AgentSidebar
|