com-angel-authorization 1.0.8 → 1.0.10

package/dist/react/index.cjs

@@ -22,6 +22,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   Can: () => Can,
+  MENU_LEAF_NO: () => MENU_LEAF_NO,
+  MENU_LEAF_YES: () => MENU_LEAF_YES,
   MENU_LIST_TYPE_PARAM: () => MENU_LIST_TYPE_PARAM,
   MENU_TYPE_BUTTON: () => MENU_TYPE_BUTTON,
   MENU_TYPE_LABEL: () => MENU_TYPE_LABEL,
@@ -37,6 +39,7 @@ __export(react_exports, {
   RESOURCE_STATUS_ENABLED: () => RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS: () => RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API: () => RESOURCE_TYPE_API,
+  ROOT_MENU_DEPTH: () => ROOT_MENU_DEPTH,
   ROOT_PARENT_ID: () => ROOT_PARENT_ID,
   ResourceManager: () => ResourceManager,
   SYSTEM_ADMIN_DEFAULT_KEY: () => SYSTEM_ADMIN_DEFAULT_KEY,
@@ -55,8 +58,10 @@ __export(react_exports, {
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
   getDeviceWorkerId: () => getDeviceWorkerId,
+  isMenuLeaf: () => isMenuLeaf,
   mapAuthorizationResource: () => mapAuthorizationResource,
   mapMenuResource: () => mapMenuResource,
+  resolveMenuDepth: () => resolveMenuDepth,
   snowyflake: () => snowyflake,
   useHasPermission: () => useHasPermission,
   useHasRole: () => useHasRole,
@@ -283,12 +288,15 @@ function Can({
 var import_react2 = require("react");
 
 // src/resources/types.ts
+var MENU_LEAF_YES = 1;
+var MENU_LEAF_NO = 0;
 var RESOURCE_TYPE_API = "api";
 var MENU_TYPE_PAGE = "page";
 var MENU_TYPE_MENU = "menu";
 var MENU_TYPE_BUTTON = "button";
 var MENU_LIST_TYPE_PARAM = "page,menu,button";
 var ROOT_PARENT_ID = "";
+var ROOT_MENU_DEPTH = 1;
 var RESOURCE_STATUS_ENABLED = 1;
 var RESOURCE_STATUS_DISABLED = 0;
 var RESOURCE_STATUS_OPTIONS = [
@@ -507,9 +515,16 @@ function mapMenuResource(item) {
   const permissionPointNames = Array.isArray(permissionNamesRaw) ? permissionNamesRaw.map((n) => String(n ?? "")).filter(Boolean) : void 0;
   const rawParentId = row.parentId ?? row.parent_id;
   const parentId = rawParentId === void 0 || rawParentId === null || rawParentId === "" || String(rawParentId) === "0" ? null : String(rawParentId);
+  const rawDepth = row.depth;
+  const parsedDepth = Number(rawDepth);
+  const depth = Number.isFinite(parsedDepth) && parsedDepth > 0 ? Math.floor(parsedDepth) : parentId ? ROOT_MENU_DEPTH + 1 : ROOT_MENU_DEPTH;
+  const rawLeaf = row.leaf;
+  const leaf = rawLeaf === true || rawLeaf === 1 || rawLeaf === "1" || String(rawLeaf).toLowerCase() === "true" ? MENU_LEAF_YES : Number(rawLeaf) === MENU_LEAF_YES ? MENU_LEAF_YES : 0;
   return {
     resourceId: String(resourceId),
     parentId,
+    depth,
+    leaf,
     type: toMenuType(row.type),
     name: String(row.name ?? ""),
     identification: String(row.identification ?? row.identity ?? row.path ?? ""),
@@ -518,9 +533,21 @@ function mapMenuResource(item) {
     status: toResourceStatus(row.status)
   };
 }
+function isMenuLeaf(row) {
+  return Number(row.leaf) === MENU_LEAF_YES;
+}
+function resolveMenuDepth(parentId, menus) {
+  if (!parentId) return ROOT_MENU_DEPTH;
+  const parent = menus.find((item) => item.resourceId === parentId);
+  const parentDepth = parent && Number.isFinite(parent.depth) && parent.depth > 0 ? Math.floor(parent.depth) : ROOT_MENU_DEPTH;
+  return parentDepth + 1;
+}
 function buildListUrl(type, params) {
   const parts = [];
   appendQueryParam(parts, "type", type);
+  if (params?.depth !== void 0 && params?.depth !== null && String(params.depth) !== "") {
+    appendQueryParam(parts, "depth", String(params.depth));
+  }
   appendQueryParam(parts, "page-token", params?.pagination?.pageToken ?? "");
   appendQueryParam(parts, "page-size", params?.pagination?.pageSize ?? "20");
   appendQueryParam(parts, "page-direction", params?.pagination?.pageDirection ?? "current");
@@ -548,9 +575,11 @@ function buildUpdateBody(values) {
   };
 }
 function buildCreateMenuBody(values, resourceId = getAppClientId()) {
+  const parentId = values.parentId ? values.parentId : null;
   return {
     resourceId,
-    parentId: values.parentId ? values.parentId : null,
+    parentId,
+    depth: values.depth > 0 ? Math.floor(values.depth) : parentId ? ROOT_MENU_DEPTH + 1 : ROOT_MENU_DEPTH,
     type: values.type,
     name: values.name.trim(),
     identification: values.identification.trim(),
@@ -559,8 +588,10 @@ function buildCreateMenuBody(values, resourceId = getAppClientId()) {
   };
 }
 function buildUpdateMenuBody(values) {
+  const parentId = values.parentId ? values.parentId : null;
   return {
-    parentId: values.parentId ? values.parentId : null,
+    parentId,
+    depth: values.depth > 0 ? Math.floor(values.depth) : parentId ? ROOT_MENU_DEPTH + 1 : ROOT_MENU_DEPTH,
     type: values.type,
     name: values.name.trim(),
     identification: values.identification.trim(),
@@ -614,7 +645,10 @@ function createMenuResourceApi(request) {
     async list(params, signal) {
       const json = await request({
         method: "GET",
-        url: buildListUrl(MENU_LIST_TYPE_PARAM, params),
+        url: buildListUrl(MENU_LIST_TYPE_PARAM, {
+          pagination: params?.pagination,
+          depth: params?.depth ?? ROOT_MENU_DEPTH
+        }),
         signal
       });
       const records = extractRecords(json).map(mapMenuResource).filter((item) => item !== null);
@@ -624,6 +658,14 @@ function createMenuResourceApi(request) {
         ...pagination
       };
     },
+    async listSubResources(resourceId, signal) {
+      const json = await request({
+        method: "GET",
+        url: `/authorization-resources/${encodeURIComponent(resourceId)}/sub-resources`,
+        signal
+      });
+      return extractRecords(json).map(mapMenuResource).filter((item) => item !== null);
+    },
     listPermissionPoints(params, signal) {
       return permissionApi.list(params, signal);
     },
@@ -1225,6 +1267,7 @@ var import_jsx_runtime3 = require("react/jsx-runtime");
 var PAGE_SIZE_OPTIONS2 = ["10", "20", "50", "100"];
 var emptyForm2 = () => ({
   parentId: null,
+  depth: ROOT_MENU_DEPTH,
   type: MENU_TYPE_MENU,
   name: "",
   identification: "",
@@ -1238,6 +1281,9 @@ function MenuManager({
   toolbarExtra
 }) {
   const [records, setRecords] = (0, import_react3.useState)([]);
+  const [childrenMap, setChildrenMap] = (0, import_react3.useState)({});
+  const [expandedIds, setExpandedIds] = (0, import_react3.useState)({});
+  const [expandingIds, setExpandingIds] = (0, import_react3.useState)({});
   const [permissionPoints, setPermissionPoints] = (0, import_react3.useState)([]);
   const [loading, setLoading] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)("");
@@ -1256,18 +1302,40 @@ function MenuManager({
     permissionPoints.forEach((p) => map.set(p.resourceId, p.name || p.identification));
     return map;
   }, [permissionPoints]);
+  const allKnownMenus = (0, import_react3.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    records.forEach((row) => map.set(row.resourceId, row));
+    Object.values(childrenMap).forEach((list) => {
+      list.forEach((row) => map.set(row.resourceId, row));
+    });
+    return Array.from(map.values());
+  }, [records, childrenMap]);
   const parentOptions = (0, import_react3.useMemo)(() => {
-    return records.filter((row) => !editing || row.resourceId !== editing.resourceId).map((row) => ({
+    return allKnownMenus.filter((row) => !editing || row.resourceId !== editing.resourceId).map((row) => ({
       value: row.resourceId,
       label: `${row.name}\uFF08${MENU_TYPE_LABEL[row.type]}\uFF09`
     }));
-  }, [records, editing]);
+  }, [allKnownMenus, editing]);
+  const flatRows = (0, import_react3.useMemo)(() => {
+    const rows = [];
+    const walk = (list) => {
+      list.forEach((row) => {
+        rows.push(row);
+        if (expandedIds[row.resourceId] && childrenMap[row.resourceId]?.length) {
+          walk(childrenMap[row.resourceId]);
+        }
+      });
+    };
+    walk(records);
+    return rows;
+  }, [records, childrenMap, expandedIds]);
   const loadList = (0, import_react3.useCallback)(
     async (direction = "current", token = pageToken) => {
       setLoading(true);
       setError("");
       try {
         const result = await api.list({
+          depth: ROOT_MENU_DEPTH,
           pagination: {
             pageToken: token,
             pageSize,
@@ -1275,6 +1343,9 @@ function MenuManager({
           }
         });
         setRecords(result.records);
+        setChildrenMap({});
+        setExpandedIds({});
+        setExpandingIds({});
         setPageToken(result.pageToken);
         setHasPreviousPage(result.hasPreviousPage);
         setHasNextPage(result.hasNextPage);
@@ -1295,6 +1366,29 @@ function MenuManager({
     } catch {
     }
   }, [api]);
+  const toggleExpand = async (row) => {
+    if (isMenuLeaf(row)) return;
+    const id = row.resourceId;
+    if (expandedIds[id]) {
+      setExpandedIds((prev) => ({ ...prev, [id]: false }));
+      return;
+    }
+    if (!childrenMap[id]) {
+      setExpandingIds((prev) => ({ ...prev, [id]: true }));
+      setError("");
+      try {
+        const children = await api.listSubResources(id);
+        setChildrenMap((prev) => ({ ...prev, [id]: children }));
+        setExpandedIds((prev) => ({ ...prev, [id]: true }));
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "\u52A0\u8F7D\u4E0B\u7EA7\u83DC\u5355\u5931\u8D25");
+      } finally {
+        setExpandingIds((prev) => ({ ...prev, [id]: false }));
+      }
+      return;
+    }
+    setExpandedIds((prev) => ({ ...prev, [id]: true }));
+  };
   (0, import_react3.useEffect)(() => {
     void loadList("current", "");
     void loadPermissionPoints();
@@ -1309,6 +1403,7 @@ function MenuManager({
     setEditing(row);
     setForm({
       parentId: row.parentId ?? null,
+      depth: resolveMenuDepth(row.parentId ?? null, allKnownMenus),
       type: row.type,
       name: row.name,
       identification: row.identification,
@@ -1396,35 +1491,54 @@ function MenuManager({
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: styles2.th, children: "\u6743\u9650\u6807\u8BC6" }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: { ...styles2.th, width: 140 }, children: "\u64CD\u4F5C" })
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) }) : records.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u6682\u65E0\u6570\u636E" }) }) : records.map((row) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: row.name }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: styles2.code, children: row.identification || "\u2014" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: MENU_TYPE_LABEL[row.type] }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-          "span",
-          {
-            style: {
-              ...styles2.badge,
-              background: row.status === RESOURCE_STATUS_ENABLED ? "#e8f7ef" : "#f4f4f5",
-              color: row.status === RESOURCE_STATUS_ENABLED ? "#067647" : "#667085"
-            },
-            children: row.status === RESOURCE_STATUS_ENABLED ? "\u663E\u793A" : "\u9690\u85CF"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: renderPermissionLabels(row) }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { style: styles2.td, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.linkBtn, onClick: () => openEdit(row), children: "\u7F16\u8F91" }),
-          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            "button",
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) }) : flatRows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u6682\u65E0\u6570\u636E" }) }) : flatRows.map((row) => {
+        const leaf = isMenuLeaf(row);
+        const expanded = Boolean(expandedIds[row.resourceId]);
+        const expanding = Boolean(expandingIds[row.resourceId]);
+        const indent = Math.max(0, (row.depth || 1) - 1) * 18;
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...styles2.treeCell, paddingLeft: indent }, children: [
+            leaf ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles2.treeSpacer }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles2.treeToggle,
+                onClick: () => void toggleExpand(row),
+                disabled: expanding,
+                "aria-label": expanded ? "\u6536\u8D77" : "\u5C55\u5F00",
+                children: expanding ? "\u2026" : expanded ? "\u25BC" : "\u25B6"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: row.name })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: styles2.code, children: row.identification || "\u2014" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: MENU_TYPE_LABEL[row.type] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "span",
             {
-              type: "button",
-              style: { ...styles2.linkBtn, color: "#d92d20" },
-              onClick: () => askDelete(row),
-              children: "\u5220\u9664"
+              style: {
+                ...styles2.badge,
+                background: row.status === RESOURCE_STATUS_ENABLED ? "#e8f7ef" : "#f4f4f5",
+                color: row.status === RESOURCE_STATUS_ENABLED ? "#067647" : "#667085"
+              },
+              children: row.status === RESOURCE_STATUS_ENABLED ? "\u663E\u793A" : "\u9690\u85CF"
             }
-          )
-        ] })
-      ] }, row.resourceId)) })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: renderPermissionLabels(row) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { style: styles2.td, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.linkBtn, onClick: () => openEdit(row), children: "\u7F16\u8F91" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                style: { ...styles2.linkBtn, color: "#d92d20" },
+                onClick: () => askDelete(row),
+                children: "\u5220\u9664"
+              }
+            )
+          ] })
+        ] }, row.resourceId);
+      }) })
     ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.pagination, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.pageSize, children: [
@@ -1485,10 +1599,14 @@ function MenuManager({
                 {
                   style: styles2.input,
                   value: form.parentId ?? ROOT_PARENT_ID,
-                  onChange: (e) => setForm((prev) => ({
-                    ...prev,
-                    parentId: e.target.value ? e.target.value : null
-                  })),
+                  onChange: (e) => {
+                    const parentId = e.target.value ? e.target.value : null;
+                    setForm((prev) => ({
+                      ...prev,
+                      parentId,
+                      depth: resolveMenuDepth(parentId, allKnownMenus)
+                    }));
+                  },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: ROOT_PARENT_ID, children: "\u65E0" }),
                     parentOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
@@ -1496,6 +1614,10 @@ function MenuManager({
                 }
               )
             ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles2.label, children: "\u83DC\u5355\u5C42\u7EA7\uFF08depth\uFF09" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("input", { style: styles2.input, value: form.depth, readOnly: true })
+            ] }),
             /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { style: styles2.fieldset, children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("legend", { style: styles2.label, children: "\u83DC\u5355\u7C7B\u578B" }),
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.radioGroup, children: MENU_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.radioItem, children: [
@@ -1680,6 +1802,30 @@ var styles2 = {
     borderBottom: "1px solid #f2f4f7",
     verticalAlign: "middle"
   },
+  treeCell: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6
+  },
+  treeToggle: {
+    width: 22,
+    height: 22,
+    border: "1px solid #d0d5dd",
+    borderRadius: 4,
+    background: "#fff",
+    color: "#475467",
+    cursor: "pointer",
+    fontSize: 10,
+    lineHeight: "20px",
+    padding: 0,
+    flexShrink: 0
+  },
+  treeSpacer: {
+    width: 22,
+    height: 22,
+    flexShrink: 0,
+    display: "inline-block"
+  },
   empty: { padding: 28, textAlign: "center", color: "#98a2b3", fontSize: 14 },
   code: {
     fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
@@ -1989,6 +2135,8 @@ var styles3 = {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Can,
+  MENU_LEAF_NO,
+  MENU_LEAF_YES,
   MENU_LIST_TYPE_PARAM,
   MENU_TYPE_BUTTON,
   MENU_TYPE_LABEL,
@@ -2004,6 +2152,7 @@ var styles3 = {
   RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API,
+  ROOT_MENU_DEPTH,
   ROOT_PARENT_ID,
   ResourceManager,
   SYSTEM_ADMIN_DEFAULT_KEY,
@@ -2022,8 +2171,10 @@ var styles3 = {
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
+  resolveMenuDepth,
   snowyflake,
   useHasPermission,
   useHasRole,