搭建客服端基础框架：路由、侧边栏布局、客服工作台三栏页面

2026-07-14 11:03:46 +08:00
parent cbe81f7dfb
commit 7f72e4b46d
13 changed files with 401 additions and 11 deletions
@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router-dom'
+import { Layout } from 'antd'
+import AgentSidebar from './AgentSidebar'
+
+const { Content } = Layout
+
+const AgentLayout = () => {
+  return (
+    <Layout className="h-screen">
+      <AgentSidebar />
+      <Layout>
+        <Content className="overflow-auto bg-neutral-50">
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  )
+}
+
+export default AgentLayout
@@ -0,0 +1,47 @@
+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