feat: ✨ 前端：玩家服务平台和运营管理系统后台初始化及框架搭建，后端：完成基础功能搭建。

2025-12-27 20:17:20 +08:00
parent 99740da922
commit 2d8566132e
60 changed files with 2330 additions and 5 deletions
--- a/frontend/src/components/AdminLayout.tsx
+++ b/frontend/src/components/AdminLayout.tsx
@@ -0,0 +1,135 @@
+import { useState } from 'react';
+import { Layout, Menu, Button, theme } from 'antd';
+import {
+  MenuFoldOutlined,
+  MenuUnfoldOutlined,
+  DashboardOutlined,
+  UserOutlined,
+  LogoutOutlined,
+} from '@ant-design/icons';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
+import { useAuthStore } from '../stores/authStore';
+import { adminAuthService } from '../services/adminAuthService';
+import { message } from 'antd';
+
+const { Header, Sider, Content, Footer } = Layout;
+
+const AdminLayout = () => {
+  const [collapsed, setCollapsed] = useState(false);
+  const {
+    token: { colorBgContainer, borderRadiusLG },
+  } = theme.useToken();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const adminUser = useAuthStore((state) => state.adminUser);
+  const logout = useAuthStore((state) => state.logout);
+
+  const handleLogout = async () => {
+    try {
+      await adminAuthService.logout();
+      localStorage.removeItem('adminToken');
+      logout();
+      message.success('登出成功');
+      navigate('/admin/login');
+    } catch (error) {
+      message.error('登出失败');
+    }
+  };
+
+  const menuItems = [
+    {
+      key: '/admin/dashboard',
+      icon: <DashboardOutlined />,
+      label: '工作台',
+    },
+    {
+      key: 'user',
+      icon: <UserOutlined />,
+      label: '用户管理',
+      children: [
+        {
+          key: '/admin/users',
+          label: '用户列表',
+        },
+      ],
+    },
+  ];
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider trigger={null} collapsible collapsed={collapsed}>
+        <div
+          style={{
+            height: 32,
+            margin: 16,
+            background: 'rgba(255, 255, 255, 0.2)',
+            borderRadius: 6,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            color: 'white',
+            fontWeight: 'bold',
+          }}
+        >
+          {collapsed ? '运营' : '运营管理系统'}
+        </div>
+        <Menu
+          theme="dark"
+          mode="inline"
+          selectedKeys={[location.pathname]}
+          items={menuItems}
+          onClick={({ key }) => navigate(key)}
+        />
+      </Sider>
+      <Layout>
+        <Header
+          style={{
+            padding: 0,
+            background: colorBgContainer,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            paddingRight: 24,
+          }}
+        >
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            style={{
+              fontSize: '16px',
+              width: 64,
+              height: 64,
+            }}
+          />
+          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
+            <span>欢迎, {adminUser?.username}</span>
+            <Button
+              type="text"
+              icon={<LogoutOutlined />}
+              onClick={handleLogout}
+            >
+              退出
+            </Button>
+          </div>
+        </Header>
+        <Content
+          style={{
+            margin: '24px 16px',
+            padding: 24,
+            minHeight: 280,
+            background: colorBgContainer,
+            borderRadius: borderRadiusLG,
+          }}
+        >
+          <Outlet />
+        </Content>
+        <Footer style={{ textAlign: 'center' }}>
+          梦幻西游一站式运营管理平台 ©2025 Created by JGE
+        </Footer>
+      </Layout>
+    </Layout>
+  );
+};
+
+export default AdminLayout;