com-angel-authorization 1.0.11 → 1.0.15

package/dist/vue/index.js

@@ -498,7 +498,7 @@ function toStringArray(value) {
     }).filter(Boolean);
   }
   if (typeof value === "string" && value.trim()) {
-    return value.split(",").map((s4) => s4.trim()).filter(Boolean);
+    return value.split(",").map((s5) => s5.trim()).filter(Boolean);
   }
   return [];
 }
@@ -2343,8 +2343,992 @@ var MenuManager = defineComponent3({
   }
 });
 
+// src/vue/RoleManager.ts
+import {
+  defineComponent as defineComponent4,
+  h as h3,
+  onMounted as onMounted3,
+  reactive as reactive3,
+  ref as ref3,
+  watch as watch3
+} from "vue";
+
+// 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/vue/RoleManager.ts
+var PAGE_SIZE_OPTIONS3 = ["10", "20", "50", "100"];
+function emptyForm3() {
+  return {
+    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 };
+}
+var s3 = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+    color: "#101828",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  title: { margin: "0", fontSize: "18px", fontWeight: "600" },
+  toolbarRight: { display: "flex", alignItems: "center", gap: "8px" },
+  searchBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap"
+  },
+  error: {
+    padding: "10px 12px",
+    borderRadius: "8px",
+    background: "#fef3f2",
+    color: "#b42318",
+    fontSize: "13px"
+  },
+  tableWrap: {
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: "10px",
+    background: "#fff"
+  },
+  table: { width: "100%", borderCollapse: "collapse", minWidth: "560px" },
+  th: {
+    textAlign: "left",
+    padding: "12px 14px",
+    fontSize: "13px",
+    fontWeight: "600",
+    color: "#475467",
+    background: "#f9fafb",
+    borderBottom: "1px solid #eaecf0"
+  },
+  td: {
+    padding: "12px 14px",
+    fontSize: "14px",
+    borderBottom: "1px solid #f2f4f7",
+    verticalAlign: "middle"
+  },
+  empty: {
+    padding: "28px",
+    textAlign: "center",
+    color: "#98a2b3",
+    fontSize: "14px"
+  },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: "13px"
+  },
+  pagination: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  pageSize: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "13px",
+    color: "#475467"
+  },
+  pageBtns: { display: "flex", gap: "8px" },
+  primaryBtn: {
+    border: "none",
+    background: "#049BAD",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  secondaryBtn: {
+    border: "1px solid #d0d5dd",
+    background: "#fff",
+    color: "#344054",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  dangerBtn: {
+    border: "none",
+    background: "#d92d20",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  select: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "6px",
+    padding: "4px 8px",
+    fontSize: "13px",
+    backgroundColor: "#ffffff",
+    color: "#101828"
+  },
+  mask: {
+    position: "fixed",
+    inset: "0",
+    background: "rgba(16, 24, 40, 0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: "1000",
+    padding: "16px"
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: "480px",
+    background: "#fff",
+    borderRadius: "12px",
+    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: "16px", fontWeight: "600" },
+  iconBtn: {
+    border: "none",
+    background: "transparent",
+    fontSize: "22px",
+    lineHeight: "1",
+    cursor: "pointer",
+    color: "#667085"
+  },
+  form: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    padding: "16px"
+  },
+  confirmBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px"
+  },
+  confirmText: {
+    margin: "0",
+    fontSize: "14px",
+    color: "#344054",
+    lineHeight: "1.6"
+  },
+  authBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    padding: "16px"
+  },
+  treePanel: {
+    maxHeight: "420px",
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: "8px",
+    padding: "8px 0",
+    background: "#fff"
+  },
+  treeRow: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    minHeight: "32px",
+    paddingRight: "12px"
+  },
+  treeToggle: {
+    border: "none",
+    background: "transparent",
+    width: "20px",
+    height: "20px",
+    padding: "0",
+    cursor: "pointer",
+    color: "#667085",
+    fontSize: "10px",
+    flexShrink: "0"
+  },
+  treeSpacer: { width: "20px", flexShrink: "0" },
+  treeLabel: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    color: "#101828",
+    cursor: "pointer",
+    userSelect: "none"
+  },
+  checkbox: {
+    width: "16px",
+    height: "16px",
+    accentColor: "#049BAD",
+    cursor: "pointer",
+    colorScheme: "light",
+    backgroundColor: "#ffffff"
+  },
+  field: { display: "flex", flexDirection: "column", gap: "6px" },
+  label: { fontSize: "13px", color: "#344054", fontWeight: "500" },
+  input: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "8px",
+    padding: "8px 10px",
+    fontSize: "14px",
+    outline: "none",
+    backgroundColor: "#ffffff",
+    color: "#101828",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "4px"
+  }
+};
+var RoleManager = defineComponent4({
+  name: "RoleManager",
+  props: {
+    api: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      default: "\u89D2\u8272\u7BA1\u7406"
+    },
+    pageSize: {
+      type: String,
+      default: "20"
+    }
+  },
+  setup(props, { slots }) {
+    const records = ref3([]);
+    const loading = ref3(false);
+    const error = ref3("");
+    const keyword = ref3("");
+    const keywordInput = ref3("");
+    const pageSize = ref3(props.pageSize);
+    const pageToken = ref3("");
+    const hasPreviousPage = ref3(false);
+    const hasNextPage = ref3(false);
+    const dialogOpen = ref3(false);
+    const editing = ref3(null);
+    const form = reactive3(emptyForm3());
+    const saving = ref3(false);
+    const deletingRow = ref3(null);
+    const deleting = ref3(false);
+    const authRole = ref3(null);
+    const authTree = ref3([]);
+    const authChecked = ref3(/* @__PURE__ */ new Set());
+    const authExpanded = ref3({});
+    const authLoading = ref3(false);
+    const authSaving = ref3(false);
+    const authError = ref3("");
+    async function loadList(direction = "current", token = pageToken.value) {
+      loading.value = true;
+      error.value = "";
+      try {
+        const result = await props.api.list({
+          keyword: keyword.value,
+          pagination: {
+            pageToken: token,
+            pageSize: pageSize.value,
+            pageDirection: direction
+          }
+        });
+        records.value = result.records;
+        pageToken.value = result.pageToken;
+        hasPreviousPage.value = result.hasPreviousPage;
+        hasNextPage.value = result.hasNextPage;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u5931\u8D25";
+      } finally {
+        loading.value = false;
+      }
+    }
+    function handleSearch() {
+      pageToken.value = "";
+      keyword.value = keywordInput.value.trim();
+    }
+    function handleReset() {
+      keywordInput.value = "";
+      keyword.value = "";
+      pageToken.value = "";
+    }
+    function openCreate() {
+      editing.value = null;
+      Object.assign(form, emptyForm3());
+      dialogOpen.value = true;
+    }
+    function openEdit(row) {
+      editing.value = row;
+      Object.assign(form, {
+        name: row.name,
+        description: row.description
+      });
+      dialogOpen.value = true;
+    }
+    function closeDialog() {
+      if (!saving.value) dialogOpen.value = false;
+    }
+    async function handleSubmit(event) {
+      event.preventDefault();
+      if (!form.name.trim()) {
+        error.value = "\u8BF7\u586B\u5199\u89D2\u8272\u540D\u79F0";
+        return;
+      }
+      saving.value = true;
+      error.value = "";
+      try {
+        if (editing.value) {
+          await props.api.update(editing.value.roleId, { ...form });
+        } else {
+          await props.api.create({ ...form });
+        }
+        dialogOpen.value = false;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25";
+      } finally {
+        saving.value = false;
+      }
+    }
+    function askDelete(row) {
+      deletingRow.value = row;
+    }
+    function closeDeleteDialog() {
+      if (!deleting.value) deletingRow.value = null;
+    }
+    async function confirmDelete() {
+      if (!deletingRow.value) return;
+      deleting.value = true;
+      error.value = "";
+      try {
+        await props.api.remove(deletingRow.value.roleId);
+        deletingRow.value = null;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25";
+      } finally {
+        deleting.value = false;
+      }
+    }
+    async function openAuthorize(row) {
+      authRole.value = row;
+      authTree.value = [];
+      authChecked.value = /* @__PURE__ */ new Set();
+      authExpanded.value = {};
+      authError.value = "";
+      authLoading.value = true;
+      try {
+        const result = await props.api.getPermissions(row.roleId);
+        authTree.value = result.resourceTree;
+        authChecked.value = 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);
+        authExpanded.value = expanded;
+      } catch (err) {
+        authError.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u6388\u6743\u6811\u5931\u8D25";
+      } finally {
+        authLoading.value = false;
+      }
+    }
+    function closeAuthorize() {
+      if (!authSaving.value) {
+        authRole.value = null;
+        authError.value = "";
+      }
+    }
+    function toggleExpand(resourceId) {
+      authExpanded.value = {
+        ...authExpanded.value,
+        [resourceId]: !authExpanded.value[resourceId]
+      };
+    }
+    function toggleCheck(node) {
+      const next = new Set(authChecked.value);
+      const ids = collectTreeResourceIds(node);
+      const shouldCheck = !authChecked.value.has(node.resourceId);
+      if (shouldCheck) {
+        ids.forEach((id) => next.add(id));
+      } else {
+        ids.forEach((id) => next.delete(id));
+      }
+      authChecked.value = next;
+    }
+    async function saveAuthorize() {
+      if (!authRole.value) return;
+      authSaving.value = true;
+      authError.value = "";
+      try {
+        await props.api.savePermissions(
+          authRole.value.roleId,
+          Array.from(authChecked.value)
+        );
+        authRole.value = null;
+      } catch (err) {
+        authError.value = err instanceof Error ? err.message : "\u4FDD\u5B58\u6388\u6743\u5931\u8D25";
+      } finally {
+        authSaving.value = false;
+      }
+    }
+    function renderTreeNodes(nodes, depth = 0) {
+      return nodes.map((node) => {
+        const hasChildren = node.children.length > 0;
+        const expanded = Boolean(authExpanded.value[node.resourceId]);
+        const checked = authChecked.value.has(node.resourceId);
+        const { total, checkedCount } = countCheckedDescendants(
+          node,
+          authChecked.value
+        );
+        const indeterminate = hasChildren && checkedCount > 0 && checkedCount < total && !checked;
+        return h3("div", { key: node.resourceId }, [
+          h3(
+            "div",
+            {
+              style: {
+                ...s3.treeRow,
+                paddingLeft: `${12 + depth * 20}px`
+              }
+            },
+            [
+              hasChildren ? h3(
+                "button",
+                {
+                  type: "button",
+                  style: s3.treeToggle,
+                  "aria-label": expanded ? "\u6536\u8D77" : "\u5C55\u5F00",
+                  onClick: () => toggleExpand(node.resourceId)
+                },
+                expanded ? "\u25BC" : "\u25B6"
+              ) : h3("span", { style: s3.treeSpacer }),
+              h3("label", { style: s3.treeLabel }, [
+                h3("input", {
+                  type: "checkbox",
+                  style: s3.checkbox,
+                  checked,
+                  onChange: () => toggleCheck(node),
+                  onVnodeMounted: (vnode) => {
+                    const el = vnode.el;
+                    if (el) el.indeterminate = indeterminate;
+                  },
+                  onVnodeUpdated: (vnode) => {
+                    const el = vnode.el;
+                    if (el) el.indeterminate = indeterminate;
+                  }
+                }),
+                h3("span", node.name || node.resourceId)
+              ])
+            ]
+          ),
+          hasChildren && expanded ? h3("div", renderTreeNodes(node.children, depth + 1)) : null
+        ]);
+      });
+    }
+    onMounted3(() => {
+      void loadList("current", "");
+    });
+    watch3(
+      () => [props.api, pageSize.value, keyword.value],
+      () => {
+        pageToken.value = "";
+        void loadList("current", "");
+      }
+    );
+    return () => h3("div", { style: s3.root }, [
+      h3("div", { style: s3.toolbar }, [
+        h3("h2", { style: s3.title }, props.title),
+        h3("div", { style: s3.toolbarRight }, [
+          slots.toolbarExtra?.(),
+          h3(
+            "button",
+            { type: "button", style: s3.primaryBtn, onClick: openCreate },
+            "\u65B0\u589E"
+          )
+        ])
+      ]),
+      h3("div", { style: s3.searchBar }, [
+        h3("input", {
+          style: { ...s3.input, maxWidth: "280px" },
+          value: keywordInput.value,
+          placeholder: "\u641C\u7D22\u89D2\u8272\u540D\u79F0 / \u63CF\u8FF0",
+          onInput: (e) => {
+            keywordInput.value = e.target.value;
+          },
+          onKeydown: (e) => {
+            if (e.key === "Enter") handleSearch();
+          }
+        }),
+        h3(
+          "button",
+          { type: "button", style: s3.secondaryBtn, onClick: handleSearch },
+          "\u67E5\u8BE2"
+        ),
+        h3(
+          "button",
+          { type: "button", style: s3.secondaryBtn, onClick: handleReset },
+          "\u91CD\u7F6E"
+        )
+      ]),
+      error.value ? h3("div", { style: s3.error }, error.value) : null,
+      h3("div", { style: s3.tableWrap }, [
+        h3("table", { style: s3.table }, [
+          h3("thead", [
+            h3("tr", [
+              h3("th", { style: s3.th }, "\u89D2\u8272\u540D\u79F0"),
+              h3("th", { style: s3.th }, "\u89D2\u8272\u63CF\u8FF0"),
+              h3("th", { style: { ...s3.th, width: "200px" } }, "\u64CD\u4F5C")
+            ])
+          ]),
+          h3(
+            "tbody",
+            loading.value ? [
+              h3("tr", [
+                h3("td", { colspan: 3, style: s3.empty }, "\u52A0\u8F7D\u4E2D\u2026")
+              ])
+            ] : records.value.length === 0 ? [
+              h3("tr", [
+                h3("td", { colspan: 3, style: s3.empty }, "\u6682\u65E0\u6570\u636E")
+              ])
+            ] : records.value.map(
+              (row) => h3("tr", { key: row.roleId }, [
+                h3("td", { style: s3.td }, row.name),
+                h3("td", { style: s3.td }, row.description || "\u2014"),
+                h3("td", { style: s3.td }, [
+                  h3(
+                    "button",
+                    {
+                      type: "button",
+                      style: s3.linkBtn,
+                      onClick: () => openEdit(row)
+                    },
+                    "\u7F16\u8F91"
+                  ),
+                  h3(
+                    "button",
+                    {
+                      type: "button",
+                      style: s3.linkBtn,
+                      onClick: () => void openAuthorize(row)
+                    },
+                    "\u6388\u6743"
+                  ),
+                  h3(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...s3.linkBtn, color: "#d92d20" },
+                      onClick: () => askDelete(row)
+                    },
+                    "\u5220\u9664"
+                  )
+                ])
+              ])
+            )
+          )
+        ])
+      ]),
+      h3("div", { style: s3.pagination }, [
+        h3("label", { style: s3.pageSize }, [
+          "\u6BCF\u9875",
+          h3(
+            "select",
+            {
+              style: s3.select,
+              value: pageSize.value,
+              onChange: (e) => {
+                pageSize.value = e.target.value;
+              }
+            },
+            PAGE_SIZE_OPTIONS3.map(
+              (size) => h3("option", { key: size, value: size }, size)
+            )
+          )
+        ]),
+        h3("div", { style: s3.pageBtns }, [
+          h3(
+            "button",
+            {
+              type: "button",
+              style: s3.secondaryBtn,
+              disabled: !hasPreviousPage.value || loading.value,
+              onClick: () => void loadList("previous")
+            },
+            "\u4E0A\u4E00\u9875"
+          ),
+          h3(
+            "button",
+            {
+              type: "button",
+              style: s3.secondaryBtn,
+              disabled: !hasNextPage.value || loading.value,
+              onClick: () => void loadList("next")
+            },
+            "\u4E0B\u4E00\u9875"
+          )
+        ])
+      ]),
+      dialogOpen.value ? h3("div", { style: s3.mask, onClick: closeDialog }, [
+        h3(
+          "div",
+          {
+            style: s3.dialog,
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation()
+          },
+          [
+            h3("div", { style: s3.dialogHeader }, [
+              h3(
+                "h3",
+                { style: s3.dialogTitle },
+                editing.value ? "\u7F16\u8F91\u89D2\u8272" : "\u65B0\u589E\u89D2\u8272"
+              ),
+              h3(
+                "button",
+                {
+                  type: "button",
+                  style: s3.iconBtn,
+                  "aria-label": "\u5173\u95ED",
+                  onClick: closeDialog
+                },
+                "\xD7"
+              )
+            ]),
+            h3(
+              "form",
+              {
+                style: s3.form,
+                onSubmit: (e) => void handleSubmit(e)
+              },
+              [
+                h3("label", { style: s3.field }, [
+                  h3("span", { style: s3.label }, "\u89D2\u8272\u540D\u79F0"),
+                  h3("input", {
+                    style: s3.input,
+                    value: form.name,
+                    placeholder: "\u8BF7\u8F93\u5165\u89D2\u8272\u540D\u79F0",
+                    required: true,
+                    onInput: (e) => {
+                      form.name = e.target.value;
+                    }
+                  })
+                ]),
+                h3("label", { style: s3.field }, [
+                  h3("span", { style: s3.label }, "\u89D2\u8272\u63CF\u8FF0"),
+                  h3("textarea", {
+                    style: {
+                      ...s3.input,
+                      minHeight: "88px",
+                      resize: "vertical"
+                    },
+                    value: form.description,
+                    placeholder: "\u8BF7\u8F93\u5165\u89D2\u8272\u63CF\u8FF0",
+                    onInput: (e) => {
+                      form.description = e.target.value;
+                    }
+                  })
+                ]),
+                h3("div", { style: s3.dialogFooter }, [
+                  h3(
+                    "button",
+                    {
+                      type: "button",
+                      style: s3.secondaryBtn,
+                      onClick: closeDialog
+                    },
+                    "\u53D6\u6D88"
+                  ),
+                  h3(
+                    "button",
+                    {
+                      type: "submit",
+                      style: s3.primaryBtn,
+                      disabled: saving.value
+                    },
+                    saving.value ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                  )
+                ])
+              ]
+            )
+          ]
+        )
+      ]) : null,
+      deletingRow.value ? h3("div", { style: s3.mask, onClick: closeDeleteDialog }, [
+        h3(
+          "div",
+          {
+            style: { ...s3.dialog, maxWidth: "420px" },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation()
+          },
+          [
+            h3("div", { style: s3.dialogHeader }, [
+              h3("h3", { style: s3.dialogTitle }, "\u786E\u8BA4\u5220\u9664"),
+              h3(
+                "button",
+                {
+                  type: "button",
+                  style: s3.iconBtn,
+                  "aria-label": "\u5173\u95ED",
+                  onClick: closeDeleteDialog
+                },
+                "\xD7"
+              )
+            ]),
+            h3("div", { style: s3.confirmBody }, [
+              h3("p", { style: s3.confirmText }, [
+                "\u786E\u8BA4\u5220\u9664\u89D2\u8272\u300C",
+                h3("strong", deletingRow.value.name),
+                "\u300D\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+              ]),
+              h3("div", { style: s3.dialogFooter }, [
+                h3(
+                  "button",
+                  {
+                    type: "button",
+                    style: s3.secondaryBtn,
+                    disabled: deleting.value,
+                    onClick: closeDeleteDialog
+                  },
+                  "\u53D6\u6D88"
+                ),
+                h3(
+                  "button",
+                  {
+                    type: "button",
+                    style: s3.dangerBtn,
+                    disabled: deleting.value,
+                    onClick: () => void confirmDelete()
+                  },
+                  deleting.value ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                )
+              ])
+            ])
+          ]
+        )
+      ]) : null,
+      authRole.value ? h3("div", { style: s3.mask, onClick: closeAuthorize }, [
+        h3(
+          "div",
+          {
+            style: { ...s3.dialog, maxWidth: "560px" },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation()
+          },
+          [
+            h3("div", { style: s3.dialogHeader }, [
+              h3(
+                "h3",
+                { style: s3.dialogTitle },
+                `\u89D2\u8272\u6388\u6743 \u2014 ${authRole.value.name}`
+              ),
+              h3(
+                "button",
+                {
+                  type: "button",
+                  style: s3.iconBtn,
+                  "aria-label": "\u5173\u95ED",
+                  onClick: closeAuthorize
+                },
+                "\xD7"
+              )
+            ]),
+            h3("div", { style: s3.authBody }, [
+              authError.value ? h3("div", { style: s3.error }, authError.value) : null,
+              authLoading.value ? h3("div", { style: s3.empty }, "\u52A0\u8F7D\u4E2D\u2026") : authTree.value.length === 0 ? h3("div", { style: s3.empty }, "\u6682\u65E0\u53EF\u6388\u6743\u8D44\u6E90") : h3(
+                "div",
+                { style: s3.treePanel },
+                renderTreeNodes(authTree.value)
+              ),
+              h3("div", { style: s3.dialogFooter }, [
+                h3(
+                  "button",
+                  {
+                    type: "button",
+                    style: s3.secondaryBtn,
+                    disabled: authSaving.value,
+                    onClick: closeAuthorize
+                  },
+                  "\u53D6\u6D88"
+                ),
+                h3(
+                  "button",
+                  {
+                    type: "button",
+                    style: s3.primaryBtn,
+                    disabled: authLoading.value || authSaving.value,
+                    onClick: () => void saveAuthorize()
+                  },
+                  authSaving.value ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                )
+              ])
+            ])
+          ]
+        )
+      ]) : null
+    ]);
+  }
+});
+
 // src/vue/SystemAdmin.ts
-import { computed as computed4, defineComponent as defineComponent4, h as h3, ref as ref3, watch as watch3 } from "vue";
+import { computed as computed4, defineComponent as defineComponent5, h as h4, ref as ref4, watch as watch4 } from "vue";
 
 // src/admin/menu.ts
 var SYSTEM_ADMIN_MENU = {
@@ -2352,13 +3336,14 @@ 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/vue/SystemAdmin.ts
-var s3 = {
+var s4 = {
   root: {
     display: "flex",
     minHeight: "560px",
@@ -2432,7 +3417,7 @@ var s3 = {
     overflow: "auto"
   }
 };
-var SystemAdmin = defineComponent4({
+var SystemAdmin = defineComponent5({
   name: "SystemAdmin",
   props: {
     menuApi: {
@@ -2443,6 +3428,10 @@ var SystemAdmin = defineComponent4({
       type: Object,
       required: true
     },
+    roleApi: {
+      type: Object,
+      required: true
+    },
     defaultActiveKey: {
       type: String,
       default: SYSTEM_ADMIN_DEFAULT_KEY
@@ -2461,8 +3450,8 @@ var SystemAdmin = defineComponent4({
     activeKeyChange: (_key) => true
   },
   setup(props, { emit, slots }) {
-    const innerKey = ref3(props.defaultActiveKey);
-    watch3(
+    const innerKey = ref4(props.defaultActiveKey);
+    watch4(
       () => props.defaultActiveKey,
       (value) => {
         if (props.activeKey === void 0) innerKey.value = value;
@@ -2479,22 +3468,22 @@ var SystemAdmin = defineComponent4({
       emit("update:activeKey", key);
       emit("activeKeyChange", key);
     }
-    return () => h3("div", { style: s3.root }, [
-      h3("aside", { style: s3.sidebar }, [
-        h3("div", { style: s3.sidebarTitle }, props.title),
-        h3(
+    return () => h4("div", { style: s4.root }, [
+      h4("aside", { style: s4.sidebar }, [
+        h4("div", { style: s4.sidebarTitle }, props.title),
+        h4(
           "nav",
-          { style: s3.nav },
+          { style: s4.nav },
           SYSTEM_ADMIN_MENU.children.map((item) => {
             const active = item.key === activeKey.value;
-            return h3(
+            return h4(
               "button",
               {
                 key: item.key,
                 type: "button",
                 style: {
-                  ...s3.navItem,
-                  ...active ? s3.navItemActive : {}
+                  ...s4.navItem,
+                  ...active ? s4.navItemActive : {}
                 },
                 onClick: () => setActiveKey(item.key)
               },
@@ -2503,20 +3492,20 @@ var SystemAdmin = defineComponent4({
           })
         )
       ]),
-      h3("main", { style: s3.content }, [
-        h3("div", { style: s3.contentHeader }, [
-          h3("div", { style: s3.breadcrumb }, [
-            h3("span", { style: s3.breadcrumbParent }, props.title),
-            h3("span", { style: s3.breadcrumbSep }, "/"),
-            h3("span", { style: s3.breadcrumbCurrent }, activeLabel.value)
+      h4("main", { style: s4.content }, [
+        h4("div", { style: s4.contentHeader }, [
+          h4("div", { style: s4.breadcrumb }, [
+            h4("span", { style: s4.breadcrumbParent }, props.title),
+            h4("span", { style: s4.breadcrumbSep }, "/"),
+            h4("span", { style: s4.breadcrumbCurrent }, activeLabel.value)
           ]),
           slots.toolbarExtra?.()
         ]),
-        h3("div", { style: s3.panel }, [
-          activeKey.value === "menu" ? h3(MenuManager, { api: props.menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : h3(ResourceManager, {
+        h4("div", { style: s4.panel }, [
+          activeKey.value === "menu" ? h4(MenuManager, { api: props.menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey.value === "resource" ? h4(ResourceManager, {
             api: props.resourceApi,
             title: "\u6743\u9650\u70B9\u7BA1\u7406"
-          })
+          }) : h4(RoleManager, { api: props.roleApi, title: "\u89D2\u8272\u7BA1\u7406" })
         ])
       ])
     ]);
@@ -2544,19 +3533,25 @@ export {
   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,
   createPermissionPlugin,
   createPermissionStore,
+  createSystemRoleApi,
   createVPermission,
   extractPagination,
   extractRecords,
@@ -2565,6 +3560,9 @@ export {
   isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
+  mapPermissionTreeNode,
+  mapRolePermissions,
+  mapSystemRole,
   resolveMenuDepth,
   snowyflake,
   useHasPermission,