84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import type { PlatformPermission } from "../../services/api";
|
|
|
|
/** 模块编码 → 展示名（用于权限分组标题）。 */
|
|
const MODULE_LABELS: Record<string, string> = {
|
|
dashboard: "工作台",
|
|
script: "构建脚本",
|
|
schedule: "调度配置",
|
|
system: "系统管理",
|
|
};
|
|
|
|
/**
|
|
* 权限勾选列表：按 module_code 分组渲染。
|
|
* - targetRoleCode === "admin" 时 system:view 锁定勾选（后端守卫）；
|
|
* - 非 admin 角色 system:* 全部锁定（后端守卫）。
|
|
*/
|
|
export function PermissionCheckboxList({
|
|
permissions,
|
|
selected,
|
|
targetRoleCode,
|
|
onToggle,
|
|
}: {
|
|
permissions: PlatformPermission[];
|
|
selected: string[];
|
|
targetRoleCode: string;
|
|
onToggle: (code: string) => void;
|
|
}) {
|
|
const groups = permissions.reduce<Record<string, PlatformPermission[]>>(
|
|
(acc, permission) => {
|
|
const bucket = acc[permission.module_code] ?? [];
|
|
bucket.push(permission);
|
|
acc[permission.module_code] = bucket;
|
|
return acc;
|
|
},
|
|
{},
|
|
);
|
|
|
|
if (permissions.length === 0) {
|
|
return <p className="admin-empty">暂无可用权限</p>;
|
|
}
|
|
|
|
const isAdmin = targetRoleCode === "admin";
|
|
|
|
return (
|
|
<div className="permission-groups">
|
|
{Object.entries(groups).map(([module, items]) => (
|
|
<div className="permission-group" key={module}>
|
|
<div className="permission-group__title">
|
|
{MODULE_LABELS[module] ?? module}
|
|
</div>
|
|
{items.map((permission) => {
|
|
const code = permission.permission_code;
|
|
const locked = isAdmin
|
|
? code === "system:view"
|
|
: code.startsWith("system:");
|
|
const checked = selected.includes(code);
|
|
return (
|
|
<label
|
|
className={`permission-item${locked ? " is-locked" : ""}`}
|
|
key={code}
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
checked={checked}
|
|
disabled={locked}
|
|
onChange={() => onToggle(code)}
|
|
/>
|
|
<span>
|
|
<strong>{permission.permission_name}</strong>
|
|
<small>
|
|
{code}
|
|
{permission.description
|
|
? ` · ${permission.description}`
|
|
: ""}
|
|
</small>
|
|
</span>
|
|
</label>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|