265 lines
8.9 KiB
TypeScript
265 lines
8.9 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
||
import {
|
||
Alert,
|
||
Button,
|
||
Card,
|
||
Checkbox,
|
||
Col,
|
||
Form,
|
||
Row,
|
||
Select,
|
||
Space,
|
||
Tabs,
|
||
Tag,
|
||
Typography,
|
||
message,
|
||
} from 'antd';
|
||
import {
|
||
HQ_ADMIN_ROLES,
|
||
HQ_PERMISSION_CATALOG,
|
||
type HqPermissionKey,
|
||
} from '@dukang/shared-types';
|
||
import { request, type HqProfile } from '../lib/api';
|
||
|
||
type RolePermRes = { role: string; permissionKeys: string[] };
|
||
type AccountOption = { id: string; name: string; phone: string; loginName: string | null; adminRole: string };
|
||
type AccountPermRes = {
|
||
account: AccountOption;
|
||
permissionKeys: string[];
|
||
rolePermissionKeys: string[];
|
||
userPermissionKeys: string[];
|
||
effectivePermissionKeys: string[];
|
||
};
|
||
|
||
const ROLE_LABELS = Object.fromEntries(HQ_ADMIN_ROLES.map((r) => [r.value, r.label]));
|
||
|
||
function PermissionChecklist({
|
||
value,
|
||
onChange,
|
||
disabled,
|
||
}: {
|
||
value: string[];
|
||
onChange: (keys: string[]) => void;
|
||
disabled?: boolean;
|
||
}) {
|
||
return (
|
||
<Checkbox.Group
|
||
style={{ width: '100%' }}
|
||
value={value}
|
||
disabled={disabled}
|
||
onChange={(checked) => onChange(checked as string[])}
|
||
>
|
||
<Row gutter={[8, 8]}>
|
||
{HQ_PERMISSION_CATALOG.map((item) => (
|
||
<Col key={item.key} span={8}>
|
||
<Checkbox value={item.key}>{item.label}</Checkbox>
|
||
</Col>
|
||
))}
|
||
</Row>
|
||
</Checkbox.Group>
|
||
);
|
||
}
|
||
|
||
export default function HqPermissionsPage() {
|
||
const [profile, setProfile] = useState<HqProfile | null>(null);
|
||
const [role, setRole] = useState<string>('OPS');
|
||
const [roleKeys, setRoleKeys] = useState<string[]>([]);
|
||
const [roleLoading, setRoleLoading] = useState(false);
|
||
const [roleSaving, setRoleSaving] = useState(false);
|
||
|
||
const [accounts, setAccounts] = useState<AccountOption[]>([]);
|
||
const [accountId, setAccountId] = useState<string>();
|
||
const [accountKeys, setAccountKeys] = useState<string[]>([]);
|
||
const [roleInheritedKeys, setRoleInheritedKeys] = useState<string[]>([]);
|
||
const [accountLoading, setAccountLoading] = useState(false);
|
||
const [accountSaving, setAccountSaving] = useState(false);
|
||
|
||
const previewEffectiveKeys = useMemo(
|
||
() => [...new Set([...roleInheritedKeys, ...accountKeys])],
|
||
[roleInheritedKeys, accountKeys],
|
||
);
|
||
|
||
const isSuperAdmin = profile?.adminRole === 'SUPER_ADMIN';
|
||
|
||
useEffect(() => {
|
||
request<HqProfile>('/admin/auth/me').then(setProfile).catch(() => {});
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (!isSuperAdmin) return;
|
||
request<{ items: AccountOption[] }>('/admin/hq-accounts?page=1&pageSize=100')
|
||
.then((res) => setAccounts(res.items))
|
||
.catch(() => {});
|
||
}, [isSuperAdmin]);
|
||
|
||
useEffect(() => {
|
||
if (!isSuperAdmin || !role) return;
|
||
setRoleLoading(true);
|
||
request<RolePermRes>(`/admin/hq-permissions/roles/${role}`)
|
||
.then((res) => setRoleKeys(res.permissionKeys))
|
||
.finally(() => setRoleLoading(false));
|
||
}, [isSuperAdmin, role]);
|
||
|
||
useEffect(() => {
|
||
if (!isSuperAdmin || !accountId) return;
|
||
setAccountLoading(true);
|
||
request<AccountPermRes>(`/admin/hq-permissions/accounts/${accountId}`)
|
||
.then((res) => {
|
||
setAccountKeys(res.userPermissionKeys);
|
||
setRoleInheritedKeys(res.rolePermissionKeys);
|
||
})
|
||
.finally(() => setAccountLoading(false));
|
||
}, [isSuperAdmin, accountId]);
|
||
|
||
async function saveRolePermissions() {
|
||
setRoleSaving(true);
|
||
try {
|
||
const res = await request<RolePermRes>(`/admin/hq-permissions/roles/${role}`, {
|
||
method: 'PUT',
|
||
body: JSON.stringify({ permissionKeys: roleKeys }),
|
||
});
|
||
setRoleKeys(res.permissionKeys);
|
||
message.success('角色权限已保存');
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setRoleSaving(false);
|
||
}
|
||
}
|
||
|
||
async function saveAccountPermissions() {
|
||
if (!accountId) return;
|
||
setAccountSaving(true);
|
||
try {
|
||
const res = await request<AccountPermRes>(`/admin/hq-permissions/accounts/${accountId}`, {
|
||
method: 'PUT',
|
||
body: JSON.stringify({ permissionKeys: accountKeys }),
|
||
});
|
||
setAccountKeys(res.userPermissionKeys);
|
||
setRoleInheritedKeys(res.rolePermissionKeys);
|
||
message.success('用户权限已保存');
|
||
} catch (e) {
|
||
message.error(e instanceof Error ? e.message : '保存失败');
|
||
} finally {
|
||
setAccountSaving(false);
|
||
}
|
||
}
|
||
|
||
if (!isSuperAdmin) {
|
||
return (
|
||
<div>
|
||
<Typography.Title level={4}>权限分配</Typography.Title>
|
||
<Alert type="warning" showIcon message="仅超级管理员可配置权限" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div>
|
||
<Typography.Title level={4}>权限分配</Typography.Title>
|
||
<Typography.Paragraph type="secondary">
|
||
按角色配置基础权限；按用户可追加专属权限。最终生效权限 = 角色权限 ∪ 用户权限（超级管理员始终拥有全部权限）。
|
||
</Typography.Paragraph>
|
||
|
||
<Tabs
|
||
items={[
|
||
{
|
||
key: 'role',
|
||
label: '按角色分配',
|
||
children: (
|
||
<Card loading={roleLoading}>
|
||
<Form layout="inline" style={{ marginBottom: 16 }}>
|
||
<Form.Item label="角色">
|
||
<Select
|
||
style={{ width: 180 }}
|
||
value={role}
|
||
onChange={setRole}
|
||
options={HQ_ADMIN_ROLES.map((r) => ({
|
||
value: r.value,
|
||
label: r.label,
|
||
disabled: r.value === 'SUPER_ADMIN',
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
{role === 'SUPER_ADMIN' ? (
|
||
<Alert type="info" showIcon message="超级管理员拥有全部权限，无需配置" />
|
||
) : (
|
||
<>
|
||
<PermissionChecklist value={roleKeys} onChange={setRoleKeys} />
|
||
<div style={{ marginTop: 16 }}>
|
||
<Button type="primary" loading={roleSaving} onClick={() => void saveRolePermissions()}>
|
||
保存角色权限
|
||
</Button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</Card>
|
||
),
|
||
},
|
||
{
|
||
key: 'user',
|
||
label: '按用户分配',
|
||
children: (
|
||
<Card loading={accountLoading}>
|
||
<Form layout="inline" style={{ marginBottom: 16 }}>
|
||
<Form.Item label="HQ 账户">
|
||
<Select
|
||
showSearch
|
||
allowClear
|
||
placeholder="选择账户"
|
||
style={{ width: 320 }}
|
||
value={accountId}
|
||
onChange={setAccountId}
|
||
optionFilterProp="label"
|
||
options={accounts
|
||
.filter((a) => a.adminRole !== 'SUPER_ADMIN')
|
||
.map((a) => ({
|
||
value: a.id,
|
||
label: `${a.name} · ${a.loginName || a.phone} · ${ROLE_LABELS[a.adminRole] || a.adminRole}`,
|
||
}))}
|
||
/>
|
||
</Form.Item>
|
||
</Form>
|
||
{!accountId ? (
|
||
<Alert type="info" showIcon message="请先选择要配置的 HQ 账户" />
|
||
) : (
|
||
<>
|
||
<Space wrap style={{ marginBottom: 12 }}>
|
||
<span>角色继承：</span>
|
||
{roleInheritedKeys.map((key) => {
|
||
const item = HQ_PERMISSION_CATALOG.find((p) => p.key === key);
|
||
return (
|
||
<Tag key={key} color="blue">
|
||
{item?.label || key}
|
||
</Tag>
|
||
);
|
||
})}
|
||
</Space>
|
||
<Typography.Paragraph type="secondary">
|
||
下方勾选为用户专属追加权限（保存后与角色权限合并生效）。
|
||
</Typography.Paragraph>
|
||
<PermissionChecklist value={accountKeys} onChange={setAccountKeys} />
|
||
<Space wrap style={{ marginTop: 12 }}>
|
||
<span>合并生效：</span>
|
||
{previewEffectiveKeys.map((key) => {
|
||
const item = HQ_PERMISSION_CATALOG.find((p) => p.key === (key as HqPermissionKey));
|
||
return <Tag key={key}>{item?.label || key}</Tag>;
|
||
})}
|
||
</Space>
|
||
<div style={{ marginTop: 16 }}>
|
||
<Button type="primary" loading={accountSaving} onClick={() => void saveAccountPermissions()}>
|
||
保存用户权限
|
||
</Button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</Card>
|
||
),
|
||
},
|
||
]}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|