ybt | 02e716d | 2025-04-15 17:19:32 +0800 | [diff] [blame^] | 1 | import React from 'react'; |
| 2 | import { Card, Table, Button, Space, Typography } from 'antd'; |
| 3 | import { UserOutlined, UploadOutlined, SettingOutlined } from '@ant-design/icons'; |
| 4 | |
| 5 | const { Title } = Typography; |
| 6 | |
| 7 | const AdminPanel = () => { |
| 8 | // 模拟用户数据 |
| 9 | const users = [ |
| 10 | { key: '1', username: 'admin', role: '管理员', status: '正常', registrationDate: '2023-01-01' }, |
| 11 | { key: '2', username: 'user1', role: '新人', status: '正常', registrationDate: '2023-02-15' }, |
| 12 | { key: '3', username: 'user2', role: '老手', status: '禁用', registrationDate: '2023-03-20' }, |
| 13 | { key: '4', username: 'user3', role: '黑户', status: '封禁', registrationDate: '2023-04-10' }, |
| 14 | { key: '5', username: 'mod1', role: '版主', status: '正常', registrationDate: '2023-05-05' }, |
| 15 | ]; |
| 16 | |
| 17 | const columns = [ |
| 18 | { title: '用户名', dataIndex: 'username', key: 'username' }, |
| 19 | { title: '角色', dataIndex: 'role', key: 'role' }, |
| 20 | { title: '状态', dataIndex: 'status', key: 'status' }, |
| 21 | { title: '注册日期', dataIndex: 'registrationDate', key: 'registrationDate' }, |
| 22 | { |
| 23 | title: '操作', |
| 24 | key: 'action', |
| 25 | render: (_, record) => ( |
| 26 | <Space size="middle"> |
| 27 | <Button type="link">编辑</Button> |
| 28 | <Button type="link" danger>禁用</Button> |
| 29 | </Space> |
| 30 | ), |
| 31 | }, |
| 32 | ]; |
| 33 | |
| 34 | return ( |
| 35 | <div className="p-6"> |
| 36 | <Title level={2}>管理员控制面板</Title> |
| 37 | <div className="flex gap-4 mb-6"> |
| 38 | <Card title="用户统计" className="w-1/3"> |
| 39 | <div className="flex items-center"> |
| 40 | <UserOutlined className="text-2xl mr-2" /> |
| 41 | <span className="text-xl">5 名用户</span> |
| 42 | </div> |
| 43 | </Card> |
| 44 | <Card title="资源统计" className="w-1/3"> |
| 45 | <div className="flex items-center"> |
| 46 | <UploadOutlined className="text-2xl mr-2" /> |
| 47 | <span className="text-xl">25 个资源</span> |
| 48 | </div> |
| 49 | </Card> |
| 50 | <Card title="系统状态" className="w-1/3"> |
| 51 | <div className="flex items-center"> |
| 52 | <SettingOutlined className="text-2xl mr-2" /> |
| 53 | <span className="text-xl">运行正常</span> |
| 54 | </div> |
| 55 | </Card> |
| 56 | </div> |
| 57 | <Card title="用户管理"> |
| 58 | <Table columns={columns} dataSource={users} /> |
| 59 | </Card> |
| 60 | </div> |
| 61 | ); |
| 62 | }; |
| 63 | |
| 64 | export default AdminPanel; |