feat: role CRUD page

2026-08-25 22:52:00 +08:00
parent 5ed7e12a23
commit 6fe2d0b42e
12 changed files with 891 additions and 6 deletions
@@ -0,0 +1,83 @@
+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>
+  );
+}