新增访客聊天Widget组件、Admin端布局框架及路由

2026-07-14 11:05:22 +08:00
parent 7f72e4b46d
commit 2492daae3b
9 changed files with 272 additions and 1 deletions
@@ -0,0 +1,20 @@
+import { Outlet } from 'react-router-dom'
+import { Layout } from 'antd'
+import AdminSidebar from './AdminSidebar'
+
+const { Content } = Layout
+
+const AdminLayout = () => {
+  return (
+    <Layout className="h-screen">
+      <AdminSidebar />
+      <Layout>
+        <Content className="overflow-auto bg-neutral-50 p-6">
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  )
+}
+
+export default AdminLayout
@@ -0,0 +1,42 @@
+import { useLocation, useNavigate } from 'react-router-dom'
+import { Layout, Menu } from 'antd'
+import {
+  DashboardOutlined,
+  TeamOutlined,
+  GiftOutlined,
+  ToolOutlined,
+} from '@ant-design/icons'
+
+const { Sider } = Layout
+
+const menuItems = [
+  { key: '/admin/dashboard', icon: <DashboardOutlined />, label: '运营概览' },
+  { key: '/admin/tenants', icon: <TeamOutlined />, label: '租户管理' },
+  { key: '/admin/plans', icon: <GiftOutlined />, label: '套餐管理' },
+  { key: '/admin/ops', icon: <ToolOutlined />, label: '系统运维' },
+]
+
+const AdminSidebar = () => {
+  const location = useLocation()
+  const navigate = useNavigate()
+
+  const selectedKey = menuItems.find(item => location.pathname.startsWith(item.key))?.key || '/admin/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">
+        <DashboardOutlined 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 AdminSidebar