import { useState } from 'react';
|
import { PlusOutlined, SafetyCertificateOutlined } from '@ant-design/icons';
|
import {
|
App as AntdApp,
|
Card,
|
Form,
|
Input,
|
Modal,
|
Table,
|
Tag,
|
} from 'antd';
|
import type { TableProps } from 'antd';
|
import dayjs from 'dayjs';
|
import AuthButton from '@/components/AuthButton';
|
import { PERMISSION } from '@/constants/permissions';
|
import { usePermission } from '@/hooks/usePermission';
|
import './Roles.scss';
|
|
type RoleStatus = 'active' | 'disabled';
|
|
interface RoleRecord {
|
key: number;
|
name: string;
|
code: string;
|
description: string;
|
members: number;
|
permissions: number;
|
isSuper: boolean;
|
status: RoleStatus;
|
createdAt: string;
|
}
|
|
interface RoleFormValues {
|
name: string;
|
code: string;
|
description?: string;
|
}
|
|
const initialRoles: RoleRecord[] = [
|
{
|
key: 1,
|
name: '超级管理员',
|
code: 'super_admin',
|
description: '拥有平台全部功能与数据权限',
|
members: 2,
|
permissions: 18,
|
isSuper: true,
|
status: 'active',
|
createdAt: '2026-01-08 09:30',
|
},
|
{
|
key: 2,
|
name: '运营管理员',
|
code: 'operator',
|
description: '负责客户、订单及日常运营管理',
|
members: 6,
|
permissions: 12,
|
isSuper: false,
|
status: 'active',
|
createdAt: '2026-02-14 10:12',
|
},
|
{
|
key: 3,
|
name: '销售专员',
|
code: 'sales',
|
description: '维护客户资料并跟进销售订单',
|
members: 24,
|
permissions: 8,
|
isSuper: false,
|
status: 'active',
|
createdAt: '2026-02-20 16:45',
|
},
|
{
|
key: 4,
|
name: '访客',
|
code: 'guest',
|
description: '仅可查看工作台与公开数据',
|
members: 11,
|
permissions: 3,
|
isSuper: false,
|
status: 'disabled',
|
createdAt: '2026-04-06 11:08',
|
},
|
];
|
|
const statusMeta: Record<RoleStatus, { label: string; color: string }> = {
|
active: { label: '启用', color: 'green' },
|
disabled: { label: '停用', color: 'default' },
|
};
|
|
export default function Roles() {
|
const [roles, setRoles] = useState<RoleRecord[]>(initialRoles);
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
const [editingRole, setEditingRole] = useState<RoleRecord | null>(null);
|
const [form] = Form.useForm<RoleFormValues>();
|
const { message } = AntdApp.useApp();
|
const { hasPermission } = usePermission();
|
|
const canEdit = hasPermission(PERMISSION.ROLE_EDIT);
|
|
const openCreateModal = () => {
|
setEditingRole(null);
|
form.resetFields();
|
setIsModalOpen(true);
|
};
|
|
const openEditModal = (record: RoleRecord) => {
|
setEditingRole(record);
|
form.setFieldsValue({
|
name: record.name,
|
code: record.code,
|
description: record.description,
|
});
|
setIsModalOpen(true);
|
};
|
|
const closeModal = () => {
|
setIsModalOpen(false);
|
form.resetFields();
|
};
|
|
const handleSubmit = async () => {
|
try {
|
const values = await form.validateFields();
|
const duplicate = roles.some(
|
(role) => role.code === values.code && role.key !== editingRole?.key,
|
);
|
if (duplicate) {
|
message.error('角色标识已存在，请更换一个');
|
return;
|
}
|
|
if (editingRole) {
|
setRoles((prev) =>
|
prev.map((role) =>
|
role.key === editingRole.key
|
? { ...role, ...values, description: values.description ?? '' }
|
: role,
|
),
|
);
|
message.success('角色已更新');
|
} else {
|
setRoles((prev) => [
|
{
|
key: Date.now(),
|
name: values.name,
|
code: values.code,
|
description: values.description ?? '',
|
members: 0,
|
permissions: 0,
|
isSuper: false,
|
status: 'active',
|
createdAt: dayjs().format('YYYY-MM-DD HH:mm'),
|
},
|
...prev,
|
]);
|
message.success('角色创建成功');
|
}
|
closeModal();
|
} catch {
|
// 表单校验失败时由 antd 自动展示错误信息
|
}
|
};
|
|
const columns: TableProps<RoleRecord>['columns'] = [
|
{
|
title: '角色',
|
dataIndex: 'name',
|
width: 250,
|
render: (_value, record) => (
|
<div className="role-cell">
|
<span className="role-cell__icon">
|
<SafetyCertificateOutlined />
|
</span>
|
<div className="role-cell__meta">
|
<span className="role-cell__name">
|
{record.name}
|
{record.isSuper && (
|
<Tag color="purple" bordered={false} className="role-cell__tag">
|
内置
|
</Tag>
|
)}
|
</span>
|
<span className="role-cell__desc">{record.description}</span>
|
</div>
|
</div>
|
),
|
},
|
{
|
title: '角色标识',
|
dataIndex: 'code',
|
width: 150,
|
render: (value: string) => <code className="role-code">{value}</code>,
|
},
|
{
|
title: '成员',
|
dataIndex: 'members',
|
width: 80,
|
align: 'center',
|
render: (value: number) => <span>{value} 人</span>,
|
},
|
{
|
title: '权限范围',
|
dataIndex: 'permissions',
|
width: 120,
|
render: (value: number, record) => (
|
<Tag color={record.isSuper ? 'purple' : 'blue'} bordered={false}>
|
{record.isSuper ? '全部权限' : `${value} 项`}
|
</Tag>
|
),
|
},
|
{
|
title: '状态',
|
dataIndex: 'status',
|
width: 90,
|
render: (value: RoleStatus) => (
|
<Tag color={statusMeta[value].color} bordered={false}>
|
{statusMeta[value].label}
|
</Tag>
|
),
|
},
|
{ title: '创建时间', dataIndex: 'createdAt', width: 170 },
|
{
|
title: '操作',
|
key: 'action',
|
width: 100,
|
render: (_value, record) =>
|
canEdit ? (
|
<AuthButton
|
type="link"
|
size="small"
|
permission={PERMISSION.ROLE_EDIT}
|
onClick={() => openEditModal(record)}
|
>
|
编辑
|
</AuthButton>
|
) : (
|
<span className="text-muted">-</span>
|
),
|
},
|
];
|
|
return (
|
<div className="roles-page">
|
<div className="page-header">
|
<div>
|
<h1 className="page-header__title">角色管理</h1>
|
<p className="page-header__desc">
|
为不同岗位配置角色与权限范围，成员将继承角色对应的菜单与按钮权限。
|
</p>
|
</div>
|
<div className="page-header__actions">
|
<AuthButton
|
type="primary"
|
icon={<PlusOutlined />}
|
permission={PERMISSION.ROLE_ADD}
|
onClick={openCreateModal}
|
>
|
新增角色
|
</AuthButton>
|
</div>
|
</div>
|
|
<Card className="table-card" variant="borderless">
|
<Table<RoleRecord>
|
rowKey="key"
|
columns={columns}
|
dataSource={roles}
|
scroll={{ x: 960 }}
|
pagination={false}
|
/>
|
</Card>
|
|
<Modal
|
title={editingRole ? '编辑角色' : '新增角色'}
|
open={isModalOpen}
|
onOk={handleSubmit}
|
onCancel={closeModal}
|
okText={editingRole ? '保存' : '创建'}
|
cancelText="取消"
|
forceRender
|
>
|
<Form form={form} layout="vertical" preserve={false}>
|
<Form.Item
|
name="name"
|
label="角色名称"
|
rules={[{ required: true, message: '请输入角色名称' }]}
|
>
|
<Input placeholder="例如：销售主管" maxLength={20} />
|
</Form.Item>
|
<Form.Item
|
name="code"
|
label="角色标识"
|
rules={[
|
{ required: true, message: '请输入角色标识' },
|
{
|
pattern: /^[a-z][a-z0-9_]{2,19}$/,
|
message: '3-20 位小写字母、数字或下划线',
|
},
|
]}
|
>
|
<Input placeholder="例如：sales_manager" disabled={Boolean(editingRole)} />
|
</Form.Item>
|
<Form.Item name="description" label="角色描述">
|
<Input.TextArea
|
placeholder="简要描述该角色的职责与权限范围"
|
rows={3}
|
maxLength={100}
|
showCount
|
/>
|
</Form.Item>
|
</Form>
|
</Modal>
|
</div>
|
);
|
}
|
