com-angel-authorization 1.0.9 → 1.0.11

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,
@@ -57,6 +59,7 @@ __export(vue_exports, {
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
   getDeviceWorkerId: () => getDeviceWorkerId,
+  isMenuLeaf: () => isMenuLeaf,
   mapAuthorizationResource: () => mapAuthorizationResource,
   mapMenuResource: () => mapMenuResource,
   resolveMenuDepth: () => resolveMenuDepth,
@@ -366,6 +369,8 @@ 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";
@@ -594,10 +599,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 ?? ""),
@@ -606,6 +614,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);
@@ -615,6 +626,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");
@@ -712,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);
@@ -722,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);
     },
@@ -1511,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",
@@ -1647,7 +1696,9 @@ var s2 = {
     border: "none",
     display: "flex",
     flexDirection: "column",
-    gap: "8px"
+    gap: "8px",
+    backgroundColor: "transparent",
+    color: "#101828"
   },
   label: { fontSize: "13px", color: "#344054", fontWeight: "500" },
   input: {
@@ -1661,14 +1712,29 @@ var s2 = {
     boxSizing: "border-box",
     width: "100%"
   },
-  radioGroup: { display: "flex", flexWrap: "wrap", gap: "16px" },
+  control: {
+    width: "16px",
+    height: "16px",
+    margin: "0",
+    flexShrink: "0",
+    accentColor: "#049BAD",
+    backgroundColor: "#ffffff",
+    colorScheme: "light"
+  },
+  radioGroup: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: "16px",
+    backgroundColor: "transparent"
+  },
   radioItem: {
     display: "flex",
     alignItems: "center",
     gap: "6px",
     fontSize: "14px",
     color: "#344054",
-    cursor: "pointer"
+    cursor: "pointer",
+    backgroundColor: "transparent"
   },
   multiSelect: {
     maxHeight: "160px",
@@ -1676,7 +1742,8 @@ var s2 = {
     border: "1px solid #eaecf0",
     borderRadius: "8px",
     padding: "8px",
-    background: "#f9fafb"
+    backgroundColor: "#ffffff",
+    color: "#101828"
   },
   checkItem: {
     display: "flex",
@@ -1685,7 +1752,8 @@ var s2 = {
     padding: "6px 4px",
     fontSize: "13px",
     color: "#344054",
-    cursor: "pointer"
+    cursor: "pointer",
+    backgroundColor: "transparent"
   },
   hint: { fontSize: "13px", color: "#98a2b3", padding: "8px" },
   dialogFooter: {
@@ -1713,6 +1781,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)("");
@@ -1733,17 +1804,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,
@@ -1751,6 +1844,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;
@@ -1769,6 +1865,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());
@@ -1779,7 +1898,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
       editing.value = row;
       Object.assign(form, {
         parentId: row.parentId ?? null,
-        depth: resolveMenuDepth(row.parentId ?? null, records.value),
+        depth: resolveMenuDepth(row.parentId ?? null, allKnownMenus.value),
         type: row.type,
         name: row.name,
         identification: row.identification,
@@ -1887,13 +2006,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",
@@ -1936,8 +2083,8 @@ var MenuManager = (0, import_vue4.defineComponent)({
                     "\u5220\u9664"
                   )
                 ])
-              ])
-            )
+              ]);
+            })
           )
         ])
       ]),
@@ -2029,7 +2176,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
                           const value = e.target.value;
                           const parentId = value ? value : null;
                           form.parentId = parentId;
-                          form.depth = resolveMenuDepth(parentId, records.value);
+                          form.depth = resolveMenuDepth(parentId, allKnownMenus.value);
                         }
                       },
                       [
@@ -2044,14 +2191,6 @@ 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)(
@@ -2062,6 +2201,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
                           (0, import_vue4.h)("input", {
                             type: "radio",
                             name: "menu-type",
+                            style: s2.control,
                             checked: form.type === opt.value,
                             onChange: () => {
                               form.type = opt.value;
@@ -2113,6 +2253,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
                           [
                             (0, import_vue4.h)("input", {
                               type: "checkbox",
+                              style: s2.control,
                               checked: form.permissionPointIds.includes(
                                 p.resourceId
                               ),
@@ -2146,6 +2287,7 @@ var MenuManager = (0, import_vue4.defineComponent)({
                           (0, import_vue4.h)("input", {
                             type: "radio",
                             name: "menu-status",
+                            style: s2.control,
                             checked: form.status === opt.value,
                             onChange: () => {
                               form.status = opt.value;
@@ -2435,6 +2577,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,
@@ -2471,6 +2615,7 @@ var SystemAdmin = (0, import_vue5.defineComponent)({
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
   resolveMenuDepth,