CI Test
294dea39f3
- Create unified Admin.css with V21 design tokens - Update Dashboard with stat cards and V21 color scheme - Update Analytics with V21 chart colors and metrics - Update UserManagement with V21 table and search styles - Update LogViewer with V21 filter bar and log level tags - Update SystemMonitor with V21 progress and resource cards - Update AdminComingSoon with V21 result styling - Replace all inline styles with V21 CSS classes - Apply Indigo/Green/Amber/Purple V21 color palette
118 lines
2.9 KiB
TypeScript
118 lines
2.9 KiB
TypeScript
/**
|
|
* Admin 用户管理页面
|
|
*/
|
|
import React from 'react';
|
|
import { Table, Button, Space, Tag, Input, Card } from 'antd';
|
|
import { SearchOutlined, LockOutlined, UnlockOutlined } from '@ant-design/icons';
|
|
import './Admin.css';
|
|
|
|
const { Search } = Input;
|
|
|
|
const UserManagement: React.FC = () => {
|
|
// 模拟数据
|
|
const users = [
|
|
{
|
|
id: '1',
|
|
username: 'user1',
|
|
email: 'user1@example.com',
|
|
is_email_verified: true,
|
|
status: 'active',
|
|
created_at: '2024-01-15',
|
|
},
|
|
{
|
|
id: '2',
|
|
username: 'user2',
|
|
email: 'user2@example.com',
|
|
is_email_verified: false,
|
|
status: 'active',
|
|
created_at: '2024-02-20',
|
|
},
|
|
];
|
|
|
|
const columns = [
|
|
{
|
|
title: '用户名',
|
|
dataIndex: 'username',
|
|
key: 'username',
|
|
},
|
|
{
|
|
title: '邮箱',
|
|
dataIndex: 'email',
|
|
key: 'email',
|
|
},
|
|
{
|
|
title: '邮箱验证',
|
|
dataIndex: 'is_email_verified',
|
|
key: 'is_email_verified',
|
|
render: (verified: boolean) => (
|
|
<Tag className={verified ? 'xx-tag success' : 'xx-tag debug'}>
|
|
{verified ? '已验证' : '未验证'}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '状态',
|
|
dataIndex: 'status',
|
|
key: 'status',
|
|
render: (status: string) => (
|
|
<Tag className={status === 'active' ? 'xx-tag success' : 'xx-tag error'}>
|
|
{status === 'active' ? '正常' : '已封禁'}
|
|
</Tag>
|
|
),
|
|
},
|
|
{
|
|
title: '注册时间',
|
|
dataIndex: 'created_at',
|
|
key: 'created_at',
|
|
},
|
|
{
|
|
title: '操作',
|
|
key: 'action',
|
|
render: (_: any, record: any) => (
|
|
<Space>
|
|
<Button type="link" size="small" disabled>
|
|
详情暂未开放
|
|
</Button>
|
|
<Button
|
|
type="link"
|
|
size="small"
|
|
danger={record.status === 'active'}
|
|
icon={record.status === 'active' ? <LockOutlined /> : <UnlockOutlined />}
|
|
disabled
|
|
>
|
|
{record.status === 'active' ? '封禁暂未开放' : '解封暂未开放'}
|
|
</Button>
|
|
</Space>
|
|
),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="user-management-page">
|
|
<div className="xx-page-head-simple">
|
|
<h2>用户管理</h2>
|
|
<p>管理系统用户与账户状态</p>
|
|
</div>
|
|
|
|
<div className="xx-table-wrapper">
|
|
<Card title="用户列表" className="xx-card">
|
|
<div style={{ marginBottom: 16 }}>
|
|
<Search
|
|
placeholder="搜索用户名或邮箱"
|
|
allowClear
|
|
enterButton={<SearchOutlined />}
|
|
className="xx-search-input"
|
|
style={{ width: 320 }}
|
|
/>
|
|
</div>
|
|
<Table columns={columns} dataSource={users} rowKey="id" />
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default UserManagement;
|
|
|
|
export const Component = UserManagement;
|