com-angel-authorization 1.0.9 → 1.0.11

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,
@@ -56,6 +58,7 @@ __export(react_exports, {
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
   getDeviceWorkerId: () => getDeviceWorkerId,
+  isMenuLeaf: () => isMenuLeaf,
   mapAuthorizationResource: () => mapAuthorizationResource,
   mapMenuResource: () => mapMenuResource,
   resolveMenuDepth: () => resolveMenuDepth,
@@ -285,6 +288,8 @@ 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";
@@ -513,10 +518,13 @@ function mapMenuResource(item) {
   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 ?? ""),
@@ -525,6 +533,9 @@ 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);
@@ -534,6 +545,9 @@ function resolveMenuDepth(parentId, menus) {
 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");
@@ -631,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);
@@ -641,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);
     },
@@ -1256,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)("");
@@ -1274,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,
@@ -1293,6 +1343,9 @@ function MenuManager({
           }
         });
         setRecords(result.records);
+        setChildrenMap({});
+        setExpandedIds({});
+        setExpandingIds({});
         setPageToken(result.pageToken);
         setHasPreviousPage(result.hasPreviousPage);
         setHasNextPage(result.hasNextPage);
@@ -1313,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();
@@ -1327,7 +1403,7 @@ function MenuManager({
     setEditing(row);
     setForm({
       parentId: row.parentId ?? null,
-      depth: resolveMenuDepth(row.parentId ?? null, records),
+      depth: resolveMenuDepth(row.parentId ?? null, allKnownMenus),
       type: row.type,
       name: row.name,
       identification: row.identification,
@@ -1415,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: [
@@ -1509,7 +1604,7 @@ function MenuManager({
                     setForm((prev) => ({
                       ...prev,
                       parentId,
-                      depth: resolveMenuDepth(parentId, records)
+                      depth: resolveMenuDepth(parentId, allKnownMenus)
                     }));
                   },
                   children: [
@@ -1519,10 +1614,6 @@ 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: [
@@ -1531,6 +1622,7 @@ function MenuManager({
                   {
                     type: "radio",
                     name: "menu-type",
+                    style: styles2.control,
                     checked: form.type === opt.value,
                     onChange: () => setForm((prev) => ({
                       ...prev,
@@ -1573,6 +1665,7 @@ function MenuManager({
                   "input",
                   {
                     type: "checkbox",
+                    style: styles2.control,
                     checked: form.permissionPointIds.includes(p.resourceId),
                     onChange: () => togglePermission(p.resourceId)
                   }
@@ -1591,6 +1684,7 @@ function MenuManager({
                   {
                     type: "radio",
                     name: "menu-status",
+                    style: styles2.control,
                     checked: form.status === opt.value,
                     onChange: () => setForm((prev) => ({ ...prev, status: opt.value }))
                   }
@@ -1707,6 +1801,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",
@@ -1822,7 +1940,9 @@ var styles2 = {
     border: "none",
     display: "flex",
     flexDirection: "column",
-    gap: 8
+    gap: 8,
+    backgroundColor: "transparent",
+    color: "#101828"
   },
   label: { fontSize: 13, color: "#344054", fontWeight: 500 },
   input: {
@@ -1836,14 +1956,29 @@ var styles2 = {
     boxSizing: "border-box",
     width: "100%"
   },
-  radioGroup: { display: "flex", flexWrap: "wrap", gap: 16 },
+  control: {
+    width: 16,
+    height: 16,
+    margin: 0,
+    flexShrink: 0,
+    accentColor: "#049BAD",
+    backgroundColor: "#ffffff",
+    colorScheme: "light"
+  },
+  radioGroup: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 16,
+    backgroundColor: "transparent"
+  },
   radioItem: {
     display: "flex",
     alignItems: "center",
     gap: 6,
     fontSize: 14,
     color: "#344054",
-    cursor: "pointer"
+    cursor: "pointer",
+    backgroundColor: "transparent"
   },
   multiSelect: {
     maxHeight: 160,
@@ -1851,7 +1986,8 @@ var styles2 = {
     border: "1px solid #eaecf0",
     borderRadius: 8,
     padding: 8,
-    background: "#f9fafb"
+    backgroundColor: "#ffffff",
+    color: "#101828"
   },
   checkItem: {
     display: "flex",
@@ -1860,7 +1996,8 @@ var styles2 = {
     padding: "6px 4px",
     fontSize: 13,
     color: "#344054",
-    cursor: "pointer"
+    cursor: "pointer",
+    backgroundColor: "transparent"
   },
   hint: { fontSize: 13, color: "#98a2b3", padding: 8 },
   dialogFooter: {
@@ -2016,6 +2153,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,
@@ -2050,6 +2189,7 @@ var styles3 = {
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
   resolveMenuDepth,