com-angel-authorization 1.0.8 → 1.0.10

package/dist/vue/index.cjs

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var vue_exports = {};
 __export(vue_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,
@@ -36,6 +38,7 @@ __export(vue_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,
@@ -56,8 +59,10 @@ __export(vue_exports, {
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
   getDeviceWorkerId: () => getDeviceWorkerId,
+  isMenuLeaf: () => isMenuLeaf,
   mapAuthorizationResource: () => mapAuthorizationResource,
   mapMenuResource: () => mapMenuResource,
+  resolveMenuDepth: () => resolveMenuDepth,
   snowyflake: () => snowyflake,
   useHasPermission: () => useHasPermission,
   useHasRole: () => useHasRole,
@@ -364,12 +369,15 @@ var Can = (0, import_vue2.defineComponent)({
 var import_vue3 = require("vue");
 
 // 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 = [
@@ -588,9 +596,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 ?? ""),
@@ -599,9 +614,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");
@@ -629,9 +656,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(),
@@ -640,8 +669,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(),
@@ -695,7 +726,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);
@@ -705,6 +739,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);
     },
@@ -1440,6 +1482,7 @@ var PAGE_SIZE_OPTIONS2 = ["10", "20", "50", "100"];
 function emptyForm2() {
   return {
     parentId: null,
+    depth: ROOT_MENU_DEPTH,
     type: MENU_TYPE_MENU,
     name: "",
     identification: "",
@@ -1493,6 +1536,30 @@ var s2 = {
     borderBottom: "1px solid #f2f4f7",
     verticalAlign: "middle"
   },
+  treeCell: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px"
+  },
+  treeToggle: {
+    width: "22px",
+    height: "22px",
+    border: "1px solid #d0d5dd",
+    borderRadius: "4px",
+    background: "#fff",
+    color: "#475467",
+    cursor: "pointer",
+    fontSize: "10px",
+    lineHeight: "20px",
+    padding: "0",
+    flexShrink: "0"
+  },
+  treeSpacer: {
+    width: "22px",
+    height: "22px",
+    flexShrink: "0",
+    display: "inline-block"
+  },
   empty: {
     padding: "28px",
     textAlign: "center",
@@ -1695,6 +1762,9 @@ var MenuManager = (0, import_vue4.defineComponent)({
   },
   setup(props, { slots }) {
     const records = (0, import_vue4.ref)([]);
+    const childrenMap = (0, import_vue4.ref)({});
+    const expandedIds = (0, import_vue4.ref)({});
+    const expandingIds = (0, import_vue4.ref)({});
     const permissionPoints = (0, import_vue4.ref)([]);
     const loading = (0, import_vue4.ref)(false);
     const error = (0, import_vue4.ref)("");
@@ -1715,17 +1785,39 @@ var MenuManager = (0, import_vue4.defineComponent)({
       );
       return map;
     });
+    const allKnownMenus = (0, import_vue4.computed)(() => {
+      const map = /* @__PURE__ */ new Map();
+      records.value.forEach((row) => map.set(row.resourceId, row));
+      Object.values(childrenMap.value).forEach((list) => {
+        list.forEach((row) => map.set(row.resourceId, row));
+      });
+      return Array.from(map.values());
+    });
     const parentOptions = (0, import_vue4.computed)(
-      () => records.value.filter((row) => !editing.value || row.resourceId !== editing.value.resourceId).map((row) => ({
+      () => allKnownMenus.value.filter((row) => !editing.value || row.resourceId !== editing.value.resourceId).map((row) => ({
         value: row.resourceId,
         label: `${row.name}\uFF08${MENU_TYPE_LABEL[row.type]}\uFF09`
       }))
     );
+    const flatRows = (0, import_vue4.computed)(() => {
+      const rows = [];
+      const walk = (list) => {
+        list.forEach((row) => {
+          rows.push(row);
+          if (expandedIds.value[row.resourceId] && childrenMap.value[row.resourceId]?.length) {
+            walk(childrenMap.value[row.resourceId]);
+          }
+        });
+      };
+      walk(records.value);
+      return rows;
+    });
     async function loadList(direction = "current", token = pageToken.value) {
       loading.value = true;
       error.value = "";
       try {
         const result = await props.api.list({
+          depth: ROOT_MENU_DEPTH,
           pagination: {
             pageToken: token,
             pageSize: pageSize.value,
@@ -1733,6 +1825,9 @@ var MenuManager = (0, import_vue4.defineComponent)({
           }
         });
         records.value = result.records;
+        childrenMap.value = {};
+        expandedIds.value = {};
+        expandingIds.value = {};
         pageToken.value = result.pageToken;
         hasPreviousPage.value = result.hasPreviousPage;
         hasNextPage.value = result.hasNextPage;
@@ -1751,6 +1846,29 @@ var MenuManager = (0, import_vue4.defineComponent)({
       } catch {
       }
     }
+    async function toggleExpand(row) {
+      if (isMenuLeaf(row)) return;
+      const id = row.resourceId;
+      if (expandedIds.value[id]) {
+        expandedIds.value = { ...expandedIds.value, [id]: false };
+        return;
+      }
+      if (!childrenMap.value[id]) {
+        expandingIds.value = { ...expandingIds.value, [id]: true };
+        error.value = "";
+        try {
+          const children = await props.api.listSubResources(id);
+          childrenMap.value = { ...childrenMap.value, [id]: children };
+          expandedIds.value = { ...expandedIds.value, [id]: true };
+        } catch (err) {
+          error.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u4E0B\u7EA7\u83DC\u5355\u5931\u8D25";
+        } finally {
+          expandingIds.value = { ...expandingIds.value, [id]: false };
+        }
+        return;
+      }
+      expandedIds.value = { ...expandedIds.value, [id]: true };
+    }
     function openCreate() {
       editing.value = null;
       Object.assign(form, emptyForm2());
@@ -1761,6 +1879,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
       editing.value = row;
       Object.assign(form, {
         parentId: row.parentId ?? null,
+        depth: resolveMenuDepth(row.parentId ?? null, allKnownMenus.value),
         type: row.type,
         name: row.name,
         identification: row.identification,
@@ -1868,13 +1987,41 @@ var MenuManager = (0, import_vue4.defineComponent)({
               (0, import_vue4.h)("tr", [
                 (0, import_vue4.h)("td", { colspan: 6, style: s2.empty }, "\u52A0\u8F7D\u4E2D\u2026")
               ])
-            ] : records.value.length === 0 ? [
+            ] : flatRows.value.length === 0 ? [
               (0, import_vue4.h)("tr", [
                 (0, import_vue4.h)("td", { colspan: 6, style: s2.empty }, "\u6682\u65E0\u6570\u636E")
               ])
-            ] : records.value.map(
-              (row) => (0, import_vue4.h)("tr", { key: row.resourceId }, [
-                (0, import_vue4.h)("td", { style: s2.td }, row.name),
+            ] : flatRows.value.map((row) => {
+              const leaf = isMenuLeaf(row);
+              const expanded = Boolean(expandedIds.value[row.resourceId]);
+              const expanding = Boolean(expandingIds.value[row.resourceId]);
+              const indent = Math.max(0, (row.depth || 1) - 1) * 18;
+              return (0, import_vue4.h)("tr", { key: row.resourceId }, [
+                (0, import_vue4.h)("td", { style: s2.td }, [
+                  (0, import_vue4.h)(
+                    "div",
+                    {
+                      style: {
+                        ...s2.treeCell,
+                        paddingLeft: `${indent}px`
+                      }
+                    },
+                    [
+                      leaf ? (0, import_vue4.h)("span", { style: s2.treeSpacer }) : (0, import_vue4.h)(
+                        "button",
+                        {
+                          type: "button",
+                          style: s2.treeToggle,
+                          disabled: expanding,
+                          "aria-label": expanded ? "\u6536\u8D77" : "\u5C55\u5F00",
+                          onClick: () => void toggleExpand(row)
+                        },
+                        expanding ? "\u2026" : expanded ? "\u25BC" : "\u25B6"
+                      ),
+                      (0, import_vue4.h)("span", row.name)
+                    ]
+                  )
+                ]),
                 (0, import_vue4.h)("td", { style: s2.td }, [
                   (0, import_vue4.h)(
                     "code",
@@ -1917,8 +2064,8 @@ var MenuManager = (0, import_vue4.defineComponent)({
                     "\u5220\u9664"
                   )
                 ])
-              ])
-            )
+              ]);
+            })
           )
         ])
       ]),
@@ -2008,7 +2155,9 @@ var MenuManager = (0, import_vue4.defineComponent)({
                         value: form.parentId ?? ROOT_PARENT_ID,
                         onChange: (e) => {
                           const value = e.target.value;
-                          form.parentId = value ? value : null;
+                          const parentId = value ? value : null;
+                          form.parentId = parentId;
+                          form.depth = resolveMenuDepth(parentId, allKnownMenus.value);
                         }
                       },
                       [
@@ -2023,6 +2172,14 @@ var MenuManager = (0, import_vue4.defineComponent)({
                       ]
                     )
                   ]),
+                  (0, import_vue4.h)("div", { style: s2.field }, [
+                    (0, import_vue4.h)("span", { style: s2.label }, "\u83DC\u5355\u5C42\u7EA7\uFF08depth\uFF09"),
+                    (0, import_vue4.h)("input", {
+                      style: s2.input,
+                      value: form.depth,
+                      readOnly: true
+                    })
+                  ]),
                   (0, import_vue4.h)("fieldset", { style: s2.fieldset }, [
                     (0, import_vue4.h)("legend", { style: s2.label }, "\u83DC\u5355\u7C7B\u578B"),
                     (0, import_vue4.h)(
@@ -2406,6 +2563,8 @@ var SystemAdmin = (0, import_vue5.defineComponent)({
 // 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,
@@ -2421,6 +2580,7 @@ var SystemAdmin = (0, import_vue5.defineComponent)({
   RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API,
+  ROOT_MENU_DEPTH,
   ROOT_PARENT_ID,
   ResourceManager,
   SYSTEM_ADMIN_DEFAULT_KEY,
@@ -2441,8 +2601,10 @@ var SystemAdmin = (0, import_vue5.defineComponent)({
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
+  resolveMenuDepth,
   snowyflake,
   useHasPermission,
   useHasRole,