com-angel-authorization 1.0.14 → 1.0.15

package/dist/react/index.cjs

@@ -42,18 +42,24 @@ __export(react_exports, {
   ROOT_MENU_DEPTH: () => ROOT_MENU_DEPTH,
   ROOT_PARENT_ID: () => ROOT_PARENT_ID,
   ResourceManager: () => ResourceManager,
+  RoleManager: () => RoleManager,
   SYSTEM_ADMIN_DEFAULT_KEY: () => SYSTEM_ADMIN_DEFAULT_KEY,
   SYSTEM_ADMIN_MENU: () => SYSTEM_ADMIN_MENU,
   SystemAdmin: () => SystemAdmin,
   appendQueryParam: () => appendQueryParam,
   buildCreateBody: () => buildCreateBody,
   buildCreateMenuBody: () => buildCreateMenuBody,
+  buildCreateRoleBody: () => buildCreateRoleBody,
+  buildSavePermissionsBody: () => buildSavePermissionsBody,
   buildUpdateBody: () => buildUpdateBody,
   buildUpdateMenuBody: () => buildUpdateMenuBody,
+  buildUpdateRoleBody: () => buildUpdateRoleBody,
+  collectTreeResourceIds: () => collectTreeResourceIds,
   createAuthorizationResourceApi: () => createAuthorizationResourceApi,
   createDefaultResourceRequest: () => createDefaultResourceRequest,
   createMenuResourceApi: () => createMenuResourceApi,
   createPermissionStore: () => createPermissionStore,
+  createSystemRoleApi: () => createSystemRoleApi,
   extractPagination: () => extractPagination,
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
@@ -61,6 +67,9 @@ __export(react_exports, {
   isMenuLeaf: () => isMenuLeaf,
   mapAuthorizationResource: () => mapAuthorizationResource,
   mapMenuResource: () => mapMenuResource,
+  mapPermissionTreeNode: () => mapPermissionTreeNode,
+  mapRolePermissions: () => mapRolePermissions,
+  mapSystemRole: () => mapSystemRole,
   resolveMenuDepth: () => resolveMenuDepth,
   snowyflake: () => snowyflake,
   useHasPermission: () => useHasPermission,
@@ -2008,8 +2017,847 @@ var styles2 = {
   }
 };
 
+// src/react/RoleManager.tsx
+var import_react4 = require("react");
+
+// src/roles/index.ts
+function mapSystemRole(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const roleId = row.roleId ?? row.role_id ?? row.id;
+  if (roleId === void 0 || roleId === null || roleId === "") return null;
+  return {
+    roleId: String(roleId),
+    name: String(row.name ?? ""),
+    description: String(row.description ?? row.desc ?? "")
+  };
+}
+function mapPermissionTreeNode(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const resourceId = row.resourceId ?? row.resource_id ?? row.id;
+  if (resourceId === void 0 || resourceId === null || resourceId === "") return null;
+  const rawChildren = row.children ?? row.childList ?? row.child_list ?? [];
+  const children = Array.isArray(rawChildren) ? rawChildren.map(mapPermissionTreeNode).filter((node) => node !== null) : [];
+  return {
+    resourceId: String(resourceId),
+    name: String(row.name ?? ""),
+    children
+  };
+}
+function asObject(value) {
+  return value && typeof value === "object" ? value : null;
+}
+function mapRolePermissions(payload) {
+  const envelope = asObject(payload) ?? {};
+  const data = asObject(envelope.data) ?? envelope;
+  const rawIds = data.resourceIds ?? data.resource_ids ?? [];
+  const resourceIds = Array.isArray(rawIds) ? rawIds.map((id) => id === void 0 || id === null ? "" : String(id)).filter(Boolean) : [];
+  const rawTree = data.resourceTree ?? data.resource_tree ?? [];
+  const resourceTree = Array.isArray(rawTree) ? rawTree.map(mapPermissionTreeNode).filter((node) => node !== null) : [];
+  return { resourceIds, resourceTree };
+}
+function collectTreeResourceIds(node) {
+  return [node.resourceId, ...node.children.flatMap(collectTreeResourceIds)];
+}
+function buildListUrl2(params) {
+  const parts = [];
+  appendQueryParam(parts, "keyword", params?.keyword ?? "");
+  appendQueryParam(parts, "page-token", params?.pagination?.pageToken ?? "");
+  appendQueryParam(parts, "page-size", params?.pagination?.pageSize ?? "20");
+  appendQueryParam(parts, "page-direction", params?.pagination?.pageDirection ?? "current");
+  return parts.length ? `/system/roles?${parts.join("&")}` : "/system/roles";
+}
+function buildCreateRoleBody(values) {
+  return {
+    name: values.name.trim(),
+    description: values.description.trim()
+  };
+}
+function buildUpdateRoleBody(values) {
+  return {
+    name: values.name.trim(),
+    description: values.description.trim()
+  };
+}
+function buildSavePermissionsBody(resourceIds) {
+  return {
+    resourceIds: [...new Set(resourceIds.map(String).filter(Boolean))]
+  };
+}
+function createSystemRoleApi(request) {
+  return {
+    async list(params, signal) {
+      const json = await request({
+        method: "GET",
+        url: buildListUrl2(params),
+        signal
+      });
+      const records = extractRecords(json).map(mapSystemRole).filter((item) => item !== null);
+      return {
+        records,
+        ...extractPagination(json)
+      };
+    },
+    async create(values, signal) {
+      return request({
+        method: "POST",
+        url: "/system/roles",
+        body: buildCreateRoleBody(values),
+        signal
+      });
+    },
+    async update(roleId, values, signal) {
+      return request({
+        method: "PATCH",
+        url: `/system/roles/${encodeURIComponent(roleId)}`,
+        body: buildUpdateRoleBody(values),
+        signal
+      });
+    },
+    async remove(roleId, signal) {
+      return request({
+        method: "DELETE",
+        url: `/system/roles/${encodeURIComponent(roleId)}`,
+        signal
+      });
+    },
+    async getPermissions(roleId, signal) {
+      const json = await request({
+        method: "GET",
+        url: `/system/roles/${encodeURIComponent(roleId)}/permissions`,
+        signal
+      });
+      return mapRolePermissions(json);
+    },
+    async savePermissions(roleId, resourceIds, signal) {
+      return request({
+        method: "POST",
+        url: `/system/roles/${encodeURIComponent(roleId)}/permissions`,
+        body: buildSavePermissionsBody(resourceIds),
+        signal
+      });
+    }
+  };
+}
+
+// src/react/RoleManager.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PAGE_SIZE_OPTIONS3 = ["10", "20", "50", "100"];
+var emptyForm3 = () => ({
+  name: "",
+  description: ""
+});
+function countCheckedDescendants(node, checked) {
+  let total = 0;
+  let checkedCount = 0;
+  const walk = (n) => {
+    for (const child of n.children) {
+      total += 1;
+      if (checked.has(child.resourceId)) checkedCount += 1;
+      walk(child);
+    }
+  };
+  walk(node);
+  return { total, checkedCount };
+}
+function RoleManager({
+  api,
+  title = "\u89D2\u8272\u7BA1\u7406",
+  pageSize: initialPageSize = "20",
+  toolbarExtra
+}) {
+  const [records, setRecords] = (0, import_react4.useState)([]);
+  const [loading, setLoading] = (0, import_react4.useState)(false);
+  const [error, setError] = (0, import_react4.useState)("");
+  const [keyword, setKeyword] = (0, import_react4.useState)("");
+  const [keywordInput, setKeywordInput] = (0, import_react4.useState)("");
+  const [pageSize, setPageSize] = (0, import_react4.useState)(initialPageSize);
+  const [pageToken, setPageToken] = (0, import_react4.useState)("");
+  const [hasPreviousPage, setHasPreviousPage] = (0, import_react4.useState)(false);
+  const [hasNextPage, setHasNextPage] = (0, import_react4.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, import_react4.useState)(false);
+  const [editing, setEditing] = (0, import_react4.useState)(null);
+  const [form, setForm] = (0, import_react4.useState)(emptyForm3);
+  const [saving, setSaving] = (0, import_react4.useState)(false);
+  const [deletingRow, setDeletingRow] = (0, import_react4.useState)(null);
+  const [deleting, setDeleting] = (0, import_react4.useState)(false);
+  const [authRole, setAuthRole] = (0, import_react4.useState)(null);
+  const [authTree, setAuthTree] = (0, import_react4.useState)([]);
+  const [authChecked, setAuthChecked] = (0, import_react4.useState)(() => /* @__PURE__ */ new Set());
+  const [authExpanded, setAuthExpanded] = (0, import_react4.useState)({});
+  const [authLoading, setAuthLoading] = (0, import_react4.useState)(false);
+  const [authSaving, setAuthSaving] = (0, import_react4.useState)(false);
+  const [authError, setAuthError] = (0, import_react4.useState)("");
+  const loadList = (0, import_react4.useCallback)(
+    async (direction = "current", token = pageToken) => {
+      setLoading(true);
+      setError("");
+      try {
+        const result = await api.list({
+          keyword,
+          pagination: {
+            pageToken: token,
+            pageSize,
+            pageDirection: direction
+          }
+        });
+        setRecords(result.records);
+        setPageToken(result.pageToken);
+        setHasPreviousPage(result.hasPreviousPage);
+        setHasNextPage(result.hasNextPage);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "\u52A0\u8F7D\u5931\u8D25");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api, keyword, pageSize, pageToken]
+  );
+  (0, import_react4.useEffect)(() => {
+    void loadList("current", "");
+  }, [api, pageSize, keyword]);
+  const handleSearch = () => {
+    setPageToken("");
+    setKeyword(keywordInput.trim());
+  };
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm3());
+    setDialogOpen(true);
+  };
+  const openEdit = (row) => {
+    setEditing(row);
+    setForm({
+      name: row.name,
+      description: row.description
+    });
+    setDialogOpen(true);
+  };
+  const closeDialog = () => {
+    if (!saving) setDialogOpen(false);
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!form.name.trim()) {
+      setError("\u8BF7\u586B\u5199\u89D2\u8272\u540D\u79F0");
+      return;
+    }
+    setSaving(true);
+    setError("");
+    try {
+      if (editing) {
+        await api.update(editing.roleId, form);
+      } else {
+        await api.create(form);
+      }
+      setDialogOpen(false);
+      await loadList("current", "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const askDelete = (row) => setDeletingRow(row);
+  const closeDeleteDialog = () => {
+    if (!deleting) setDeletingRow(null);
+  };
+  const confirmDelete = async () => {
+    if (!deletingRow) return;
+    setDeleting(true);
+    setError("");
+    try {
+      await api.remove(deletingRow.roleId);
+      setDeletingRow(null);
+      await loadList("current", "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const openAuthorize = async (row) => {
+    setAuthRole(row);
+    setAuthTree([]);
+    setAuthChecked(/* @__PURE__ */ new Set());
+    setAuthExpanded({});
+    setAuthError("");
+    setAuthLoading(true);
+    try {
+      const result = await api.getPermissions(row.roleId);
+      setAuthTree(result.resourceTree);
+      setAuthChecked(new Set(result.resourceIds));
+      const expanded = {};
+      const walk = (nodes) => {
+        for (const node of nodes) {
+          if (node.children.length > 0) {
+            expanded[node.resourceId] = true;
+            walk(node.children);
+          }
+        }
+      };
+      walk(result.resourceTree);
+      setAuthExpanded(expanded);
+    } catch (err) {
+      setAuthError(err instanceof Error ? err.message : "\u52A0\u8F7D\u6388\u6743\u6811\u5931\u8D25");
+    } finally {
+      setAuthLoading(false);
+    }
+  };
+  const closeAuthorize = () => {
+    if (!authSaving) {
+      setAuthRole(null);
+      setAuthError("");
+    }
+  };
+  const toggleExpand = (resourceId) => {
+    setAuthExpanded((prev) => ({ ...prev, [resourceId]: !prev[resourceId] }));
+  };
+  const toggleCheck = (node) => {
+    setAuthChecked((prev) => {
+      const next = new Set(prev);
+      const ids = collectTreeResourceIds(node);
+      const shouldCheck = !prev.has(node.resourceId);
+      if (shouldCheck) {
+        ids.forEach((id) => next.add(id));
+      } else {
+        ids.forEach((id) => next.delete(id));
+      }
+      return next;
+    });
+  };
+  const saveAuthorize = async () => {
+    if (!authRole) return;
+    setAuthSaving(true);
+    setAuthError("");
+    try {
+      await api.savePermissions(authRole.roleId, Array.from(authChecked));
+      setAuthRole(null);
+    } catch (err) {
+      setAuthError(err instanceof Error ? err.message : "\u4FDD\u5B58\u6388\u6743\u5931\u8D25");
+    } finally {
+      setAuthSaving(false);
+    }
+  };
+  const renderTreeNodes = (nodes, depth = 0) => nodes.map((node) => {
+    const hasChildren = node.children.length > 0;
+    const expanded = Boolean(authExpanded[node.resourceId]);
+    const checked = authChecked.has(node.resourceId);
+    const { total, checkedCount } = countCheckedDescendants(node, authChecked);
+    const indeterminate = hasChildren && checkedCount > 0 && checkedCount < total && !checked;
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...styles3.treeRow, paddingLeft: 12 + depth * 20 }, children: [
+        hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles3.treeToggle,
+            onClick: () => toggleExpand(node.resourceId),
+            "aria-label": expanded ? "\u6536\u8D77" : "\u5C55\u5F00",
+            children: expanded ? "\u25BC" : "\u25B6"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.treeSpacer }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: styles3.treeLabel, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            TreeCheckbox,
+            {
+              checked,
+              indeterminate,
+              onChange: () => toggleCheck(node)
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { children: node.name || node.resourceId })
+        ] })
+      ] }),
+      hasChildren && expanded ? renderTreeNodes(node.children, depth + 1) : null
+    ] }, node.resourceId);
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { style: styles3.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.toolbarRight, children: [
+        toolbarExtra,
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: styles3.primaryBtn, onClick: openCreate, children: "\u65B0\u589E\u89D2\u8272" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.searchBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "input",
+        {
+          style: { ...styles3.input, maxWidth: 260 },
+          value: keywordInput,
+          onChange: (e) => setKeywordInput(e.target.value),
+          placeholder: "\u641C\u7D22\u89D2\u8272\u540D\u79F0 / \u63CF\u8FF0",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleSearch();
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: styles3.secondaryBtn, onClick: handleSearch, children: "\u67E5\u8BE2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        "button",
+        {
+          type: "button",
+          style: styles3.secondaryBtn,
+          onClick: () => {
+            setKeywordInput("");
+            setKeyword("");
+            setPageToken("");
+          },
+          children: "\u91CD\u7F6E"
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.error, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("table", { style: styles3.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { style: styles3.th, children: "\u89D2\u8272\u540D\u79F0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { style: styles3.th, children: "\u89D2\u8272\u63CF\u8FF0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("th", { style: { ...styles3.th, width: 200 }, children: "\u64CD\u4F5C" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: 3, style: styles3.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) }) : records.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { colSpan: 3, style: styles3.empty, children: "\u6682\u65E0\u6570\u636E" }) }) : records.map((row) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { style: styles3.td, children: row.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("td", { style: styles3.td, children: row.description || "\u2014" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("td", { style: styles3.td, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: styles3.linkBtn, onClick: () => openEdit(row), children: "\u7F16\u8F91" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles3.linkBtn,
+              onClick: () => void openAuthorize(row),
+              children: "\u6388\u6743"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles3.linkBtn, color: "#d92d20" },
+              onClick: () => askDelete(row),
+              children: "\u5220\u9664"
+            }
+          )
+        ] })
+      ] }, row.roleId)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.pagination, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: styles3.pageSize, children: [
+        "\u6BCF\u9875",
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => {
+              setPageToken("");
+              setPageSize(e.target.value);
+            },
+            style: styles3.select,
+            children: PAGE_SIZE_OPTIONS3.map((size) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: size, children: size }, size))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.pageBtns, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles3.secondaryBtn,
+            disabled: !hasPreviousPage || loading,
+            onClick: () => void loadList("previous"),
+            children: "\u4E0A\u4E00\u9875"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles3.secondaryBtn,
+            disabled: !hasNextPage || loading,
+            onClick: () => void loadList("next"),
+            children: "\u4E0B\u4E00\u9875"
+          }
+        )
+      ] })
+    ] }),
+    dialogOpen ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.mask, onClick: closeDialog, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: styles3.dialog,
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: styles3.dialogTitle, children: editing ? "\u7F16\u8F91\u89D2\u8272" : "\u65B0\u589E\u89D2\u8272" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: styles3.iconBtn, onClick: closeDialog, "aria-label": "\u5173\u95ED", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("form", { style: styles3.form, onSubmit: (e) => void handleSubmit(e), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: styles3.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.label, children: "\u89D2\u8272\u540D\u79F0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "input",
+                {
+                  style: styles3.input,
+                  value: form.name,
+                  onChange: (e) => setForm((prev) => ({ ...prev, name: e.target.value })),
+                  placeholder: "\u8BF7\u8F93\u5165\u89D2\u8272\u540D\u79F0",
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { style: styles3.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.label, children: "\u89D2\u8272\u63CF\u8FF0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "textarea",
+                {
+                  style: { ...styles3.input, minHeight: 88, resize: "vertical" },
+                  value: form.description,
+                  onChange: (e) => setForm((prev) => ({ ...prev, description: e.target.value })),
+                  placeholder: "\u8BF7\u8F93\u5165\u89D2\u8272\u63CF\u8FF0"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", style: styles3.secondaryBtn, onClick: closeDialog, children: "\u53D6\u6D88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "submit", style: styles3.primaryBtn, disabled: saving, children: saving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58" })
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null,
+    deletingRow ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.mask, onClick: closeDeleteDialog, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: { ...styles3.dialog, maxWidth: 420 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { style: styles3.dialogTitle, children: "\u786E\u8BA4\u5220\u9664" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles3.iconBtn,
+                onClick: closeDeleteDialog,
+                "aria-label": "\u5173\u95ED",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.confirmBody, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("p", { style: styles3.confirmText, children: [
+              "\u786E\u8BA4\u5220\u9664\u89D2\u8272\u300C",
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("strong", { children: deletingRow.name }),
+              "\u300D\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles3.secondaryBtn,
+                  onClick: closeDeleteDialog,
+                  disabled: deleting,
+                  children: "\u53D6\u6D88"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles3.dangerBtn,
+                  onClick: () => void confirmDelete(),
+                  disabled: deleting,
+                  children: deleting ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null,
+    authRole ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.mask, onClick: closeAuthorize, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        style: { ...styles3.dialog, maxWidth: 560 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("h3", { style: styles3.dialogTitle, children: [
+              "\u89D2\u8272\u6388\u6743 \u2014 ",
+              authRole.name
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles3.iconBtn,
+                onClick: closeAuthorize,
+                "aria-label": "\u5173\u95ED",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.authBody, children: [
+            authError ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.error, children: authError }) : null,
+            authLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) : authTree.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.empty, children: "\u6682\u65E0\u53EF\u6388\u6743\u8D44\u6E90" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.treePanel, children: renderTreeNodes(authTree) }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles3.secondaryBtn,
+                  onClick: closeAuthorize,
+                  disabled: authSaving,
+                  children: "\u53D6\u6D88"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles3.primaryBtn,
+                  onClick: () => void saveAuthorize(),
+                  disabled: authLoading || authSaving,
+                  children: authSaving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+function TreeCheckbox({
+  checked,
+  indeterminate,
+  onChange
+}) {
+  const ref = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    if (ref.current) ref.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      checked,
+      onChange,
+      style: styles3.checkbox
+    }
+  );
+}
+var styles3 = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16,
+    padding: 16,
+    color: "#101828",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  title: { margin: 0, fontSize: 18, fontWeight: 600 },
+  toolbarRight: { display: "flex", alignItems: "center", gap: 8 },
+  searchBar: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
+  error: {
+    padding: "10px 12px",
+    borderRadius: 8,
+    background: "#fef3f2",
+    color: "#b42318",
+    fontSize: 13
+  },
+  tableWrap: {
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: 10,
+    background: "#fff"
+  },
+  table: { width: "100%", borderCollapse: "collapse", minWidth: 560 },
+  th: {
+    textAlign: "left",
+    padding: "12px 14px",
+    fontSize: 13,
+    fontWeight: 600,
+    color: "#475467",
+    background: "#f9fafb",
+    borderBottom: "1px solid #eaecf0"
+  },
+  td: {
+    padding: "12px 14px",
+    fontSize: 14,
+    borderBottom: "1px solid #f2f4f7",
+    verticalAlign: "middle"
+  },
+  empty: { padding: 28, textAlign: "center", color: "#98a2b3", fontSize: 14 },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: 13
+  },
+  pagination: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  pageSize: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "#475467" },
+  pageBtns: { display: "flex", gap: 8 },
+  primaryBtn: {
+    border: "none",
+    background: "#049BAD",
+    color: "#fff",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  secondaryBtn: {
+    border: "1px solid #d0d5dd",
+    background: "#fff",
+    color: "#344054",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  dangerBtn: {
+    border: "none",
+    background: "#d92d20",
+    color: "#fff",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  select: {
+    border: "1px solid #d0d5dd",
+    borderRadius: 6,
+    padding: "4px 8px",
+    fontSize: 13,
+    backgroundColor: "#ffffff",
+    color: "#101828"
+  },
+  mask: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(16, 24, 40, 0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3,
+    padding: 16
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: 480,
+    background: "#fff",
+    borderRadius: 12,
+    boxShadow: "0 20px 40px rgba(16,24,40,0.18)"
+  },
+  dialogHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "14px 16px",
+    borderBottom: "1px solid #eaecf0"
+  },
+  dialogTitle: { margin: 0, fontSize: 16, fontWeight: 600 },
+  iconBtn: {
+    border: "none",
+    background: "transparent",
+    fontSize: 22,
+    lineHeight: 1,
+    cursor: "pointer",
+    color: "#667085"
+  },
+  form: { display: "flex", flexDirection: "column", gap: 12, padding: 16 },
+  confirmBody: { display: "flex", flexDirection: "column", gap: 16, padding: 16 },
+  confirmText: { margin: 0, fontSize: 14, color: "#344054", lineHeight: 1.6 },
+  authBody: { display: "flex", flexDirection: "column", gap: 12, padding: 16 },
+  treePanel: {
+    maxHeight: 420,
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: 8,
+    padding: "8px 0",
+    background: "#fff"
+  },
+  treeRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    minHeight: 32,
+    paddingRight: 12
+  },
+  treeToggle: {
+    border: "none",
+    background: "transparent",
+    width: 20,
+    height: 20,
+    padding: 0,
+    cursor: "pointer",
+    color: "#667085",
+    fontSize: 10,
+    flexShrink: 0
+  },
+  treeSpacer: { width: 20, flexShrink: 0 },
+  treeLabel: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    fontSize: 14,
+    color: "#101828",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  checkbox: {
+    width: 16,
+    height: 16,
+    accentColor: "#049BAD",
+    cursor: "pointer",
+    colorScheme: "light",
+    backgroundColor: "#ffffff"
+  },
+  field: { display: "flex", flexDirection: "column", gap: 6 },
+  label: { fontSize: 13, color: "#344054", fontWeight: 500 },
+  input: {
+    border: "1px solid #d0d5dd",
+    borderRadius: 8,
+    padding: "8px 10px",
+    fontSize: 14,
+    outline: "none",
+    backgroundColor: "#ffffff",
+    color: "#101828",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    paddingTop: 4
+  }
+};
+
 // src/react/SystemAdmin.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/admin/menu.ts
 var SYSTEM_ADMIN_MENU = {
@@ -2017,44 +2865,46 @@ var SYSTEM_ADMIN_MENU = {
   label: "\u7CFB\u7EDF\u7BA1\u7406",
   children: [
     { key: "menu", label: "\u83DC\u5355\u7BA1\u7406" },
-    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" }
+    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" },
+    { key: "role", label: "\u89D2\u8272\u7BA1\u7406" }
   ]
 };
 var SYSTEM_ADMIN_DEFAULT_KEY = "menu";
 
 // src/react/SystemAdmin.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function SystemAdmin({
   menuApi,
   resourceApi,
+  roleApi,
   defaultActiveKey = SYSTEM_ADMIN_DEFAULT_KEY,
   activeKey: controlledKey,
   onActiveKeyChange,
   title = SYSTEM_ADMIN_MENU.label,
   toolbarExtra
 }) {
-  const [innerKey, setInnerKey] = (0, import_react4.useState)(defaultActiveKey);
+  const [innerKey, setInnerKey] = (0, import_react5.useState)(defaultActiveKey);
   const activeKey = controlledKey ?? innerKey;
   const setActiveKey = (key) => {
     if (controlledKey === void 0) setInnerKey(key);
     onActiveKeyChange?.(key);
   };
-  const activeLabel = (0, import_react4.useMemo)(
+  const activeLabel = (0, import_react5.useMemo)(
     () => SYSTEM_ADMIN_MENU.children.find((item) => item.key === activeKey)?.label ?? "",
     [activeKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("aside", { style: styles3.sidebar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.sidebarTitle, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { style: styles3.nav, children: SYSTEM_ADMIN_MENU.children.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { style: styles4.sidebar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.sidebarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { style: styles4.nav, children: SYSTEM_ADMIN_MENU.children.map((item) => {
         const active = item.key === activeKey;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           "button",
           {
             type: "button",
             style: {
-              ...styles3.navItem,
-              ...active ? styles3.navItemActive : null
+              ...styles4.navItem,
+              ...active ? styles4.navItemActive : null
             },
             onClick: () => setActiveKey(item.key),
             children: item.label
@@ -2063,20 +2913,20 @@ function SystemAdmin({
         );
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("main", { style: styles3.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.contentHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.breadcrumb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbParent, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbSep, children: "/" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbCurrent, children: activeLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("main", { style: styles4.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.contentHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.breadcrumb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbParent, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbSep, children: "/" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbCurrent, children: activeLabel })
         ] }),
         toolbarExtra
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.panel, children: activeKey === "menu" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuManager, { api: menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ResourceManager, { api: resourceApi, title: "\u6743\u9650\u70B9\u7BA1\u7406" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.panel, children: activeKey === "menu" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuManager, { api: menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey === "resource" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ResourceManager, { api: resourceApi, title: "\u6743\u9650\u70B9\u7BA1\u7406" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RoleManager, { api: roleApi, title: "\u89D2\u8272\u7BA1\u7406" }) })
     ] })
   ] });
 }
-var styles3 = {
+var styles4 = {
   root: {
     display: "flex",
     minHeight: 560,
@@ -2173,18 +3023,24 @@ var styles3 = {
   ROOT_MENU_DEPTH,
   ROOT_PARENT_ID,
   ResourceManager,
+  RoleManager,
   SYSTEM_ADMIN_DEFAULT_KEY,
   SYSTEM_ADMIN_MENU,
   SystemAdmin,
   appendQueryParam,
   buildCreateBody,
   buildCreateMenuBody,
+  buildCreateRoleBody,
+  buildSavePermissionsBody,
   buildUpdateBody,
   buildUpdateMenuBody,
+  buildUpdateRoleBody,
+  collectTreeResourceIds,
   createAuthorizationResourceApi,
   createDefaultResourceRequest,
   createMenuResourceApi,
   createPermissionStore,
+  createSystemRoleApi,
   extractPagination,
   extractRecords,
   getAppClientId,
@@ -2192,6 +3048,9 @@ var styles3 = {
   isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
+  mapPermissionTreeNode,
+  mapRolePermissions,
+  mapSystemRole,
   resolveMenuDepth,
   snowyflake,
   useHasPermission,