初步增加 web 界面

2026-06-22 13:11:15 +08:00
parent 4c924375aa
commit 347edb8103
66 changed files with 6816 additions and 21 deletions
@@ -0,0 +1,114 @@
+import { useEffect, useState } from 'react';
+import { Layout, Menu, Dropdown, Avatar, Space, Typography } from 'antd';
+import {
+  DashboardOutlined, UserOutlined, LogoutOutlined,
+  CloudServerOutlined, TeamOutlined, ApiOutlined,
+} from '@ant-design/icons';
+import { useNavigate, useLocation, Outlet } from 'react-router-dom';
+import { getUser, clearAuth, hasPerm, type AuthUser } from '../store/auth';
+import { authApi } from '../api/modules';
+
+const { Header, Sider, Content } = Layout;
+const { Text } = Typography;
+
+const ROLE_LABELS: Record<string, string> = {
+  super_admin: '超级管理员',
+  operation: '运营',
+  support: '客服',
+};
+
+export default function MainLayout({ onLogout }: { onLogout?: () => void }) {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [user] = useState<AuthUser | null>(getUser());
+  const [collapsed, setCollapsed] = useState(false);
+
+  useEffect(() => {
+    if (!user) navigate('/login');
+  }, [user]);
+
+  if (!user) return null;
+
+  const menuItems: any[] = [];
+
+  // Dashboard - 所有人可见
+  menuItems.push({ key: '/', label: '概览', icon: <DashboardOutlined /> });
+
+  // 账号管理
+  if (hasPerm(user, 'account:view_all') || hasPerm(user, 'account:view_assigned')) {
+    menuItems.push({ key: '/accounts', label: '账号管理', icon: <UserOutlined /> });
+  }
+
+  // 登录任务
+  if (hasPerm(user, 'login:batch') || hasPerm(user, 'login:view_assigned')) {
+    menuItems.push({ key: '/login-tasks', label: '登录任务', icon: <ApiOutlined /> });
+  }
+
+  // 代理配置
+  if (hasPerm(user, 'proxy:manage')) {
+    menuItems.push({ key: '/proxy', label: '代理配置', icon: <CloudServerOutlined /> });
+  }
+
+  // 用户管理
+  if (hasPerm(user, 'user:view')) {
+    menuItems.push({ key: '/users', label: '用户管理', icon: <TeamOutlined /> });
+  }
+
+  const handleLogout = async () => {
+    try {
+      await authApi.logout();
+    } catch {}
+    clearAuth();
+    onLogout?.();       // 触发 App 重渲染
+    navigate('/login', { replace: true });
+  };
+
+  const userMenu = {
+    items: [
+      {
+        key: 'logout',
+        label: '退出登录',
+        icon: <LogoutOutlined />,
+        onClick: handleLogout,
+      },
+    ],
+  };
+
+  return (
+    <Layout style={{ minHeight: '100vh' }}>
+      <Sider collapsible collapsed={collapsed} onCollapse={setCollapsed}>
+        <div style={{
+          height: 48, margin: 12, color: '#fff', fontSize: 16,
+          textAlign: 'center', lineHeight: '48px', fontWeight: 'bold',
+          whiteSpace: 'nowrap', overflow: 'hidden',
+        }}>
+          {collapsed ? '鱼' : '斗鱼登录后台'}
+        </div>
+        <Menu
+          theme="dark"
+          mode="inline"
+          selectedKeys={[location.pathname]}
+          items={menuItems}
+          onClick={({ key }) => navigate(key)}
+        />
+      </Sider>
+      <Layout>
+        <Header style={{
+          background: '#fff', padding: '0 24px',
+          display: 'flex', justifyContent: 'flex-end', alignItems: 'center',
+        }}>
+          <Dropdown menu={userMenu} placement="bottomRight">
+            <Space style={{ cursor: 'pointer' }}>
+              <Avatar icon={<UserOutlined />} />
+              <Text>{user.username}</Text>
+              <Text type="secondary">({ROLE_LABELS[user.role] || user.role})</Text>
+            </Space>
+          </Dropdown>
+        </Header>
+        <Content style={{ margin: 16, padding: 24, background: '#fff', borderRadius: 8 }}>
+          <Outlet />
+        </Content>
+      </Layout>
+    </Layout>
+  );
+}