com-angel-authorization 1.0.9 → 1.0.11

package/dist/vue/index.d.cts

@@ -228,6 +228,10 @@ type MenuResource = {
      * 菜单层级：无上级（根）为 1，其余为上级 depth + 1
      */
     depth: number;
+    /**
+     * 是否叶子节点：`1` 表示无下级菜单，不可再展开
+     */
+    leaf: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -252,6 +256,8 @@ type CreateMenuResourceBody = MenuResourceFormValues & {
 };
 type UpdateMenuResourceBody = Partial<MenuResourceFormValues>;
 type FetchMenuResourcesParams = {
+    /** 列表默认传 1，只拉根层 */
+    depth?: number;
     pagination?: ListPaginationParams;
 };
 type MenuResourceListResult = {
@@ -260,6 +266,9 @@ type MenuResourceListResult = {
     hasPreviousPage: boolean;
     hasNextPage: boolean;
 };
+/** leaf === 1 表示无下级 */
+declare const MENU_LEAF_YES = 1;
+declare const MENU_LEAF_NO = 0;
 declare const RESOURCE_TYPE_API: ApiResourceType;
 declare const MENU_TYPE_PAGE: MenuResourceType;
 declare const MENU_TYPE_MENU: MenuResourceType;
@@ -313,6 +322,8 @@ type AuthorizationResourceApi = {
 };
 type MenuResourceApi = {
     list: (params?: FetchMenuResourcesParams, signal?: AbortSignal) => Promise<MenuResourceListResult>;
+    /** 展开下级：GET /authorization-resources/{resource-id}/sub-resources */
+    listSubResources: (resourceId: string, signal?: AbortSignal) => Promise<MenuResource[]>;
     /** 拉取权限点（type=api），供菜单表单多选 */
     listPermissionPoints: (params?: FetchAuthorizationResourcesParams, signal?: AbortSignal) => Promise<AuthorizationResourceListResult>;
     create: (values: MenuResourceFormValues, signal?: AbortSignal) => Promise<unknown>;
@@ -321,6 +332,10 @@ type MenuResourceApi = {
 };
 declare function mapAuthorizationResource(item: unknown): AuthorizationResource | null;
 declare function mapMenuResource(item: unknown): MenuResource | null;
+/**
+ * leaf === 1 表示无下级菜单。
+ */
+declare function isMenuLeaf(row: Pick<MenuResource, 'leaf'>): boolean;
 /**
  * 根据上级菜单计算 depth：无上级为 1，否则为上级 depth + 1。
  */
@@ -523,4 +538,4 @@ declare const snowyflake: ConfigurableSnowflake;
 declare function getAppClientId(): string;
 declare function getDeviceWorkerId(): string;
 
-export { type ApiResourceType, type AuthorizationResource, type AuthorizationResourceApi, type AuthorizationResourceFormValues, type AuthorizationResourceListResult, Can, type CheckOptions, type CreateAuthorizationResourceBody, type CreateDefaultResourceRequestOptions, type CreateMenuResourceBody, type FetchAuthorizationResourcesParams, type FetchMenuResourcesParams, type HttpMethod, type ListPaginationParams, type ListPaginationResult, MENU_LIST_TYPE_PARAM, MENU_TYPE_BUTTON, MENU_TYPE_LABEL, MENU_TYPE_MENU, MENU_TYPE_OPTIONS, MENU_TYPE_PAGE, MENU_VISIBILITY_OPTIONS, type MatchMode, MenuManager, type MenuResource, type MenuResourceApi, type MenuResourceFormValues, type MenuResourceListResult, type MenuResourceType, PERMISSION_STORE_KEY, type PageDirection, type PermissionChecker, type PermissionCode, type PermissionDirectiveValue, type PermissionListener, type PermissionPluginOptions, type PermissionState, PermissionStore, RESOURCE_PRIVATE_OPTIONS, RESOURCE_STATUS_DISABLED, RESOURCE_STATUS_ENABLED, RESOURCE_STATUS_OPTIONS, RESOURCE_TYPE_API, ROOT_MENU_DEPTH, ROOT_PARENT_ID, type ResourceHttpRequest, ResourceManager, type ResourceRequestOptions, type ResourceStatus, type ResourceType, type RoleCode, SYSTEM_ADMIN_DEFAULT_KEY, SYSTEM_ADMIN_MENU, SystemAdmin, type SystemAdminMenuGroup, type SystemAdminMenuKey, type SystemAdminSubMenu, type UpdateAuthorizationResourceBody, type UpdateMenuResourceBody, type UsePermissionResult, appendQueryParam, buildCreateBody, buildCreateMenuBody, buildUpdateBody, buildUpdateMenuBody, createAuthorizationResourceApi, createDefaultResourceRequest, createMenuResourceApi, createPermissionPlugin, createPermissionStore, createVPermission, extractPagination, extractRecords, getAppClientId, getDeviceWorkerId, mapAuthorizationResource, mapMenuResource, resolveMenuDepth, snowyflake, useHasPermission, useHasRole, usePermission };
+export { type ApiResourceType, type AuthorizationResource, type AuthorizationResourceApi, type AuthorizationResourceFormValues, type AuthorizationResourceListResult, Can, type CheckOptions, type CreateAuthorizationResourceBody, type CreateDefaultResourceRequestOptions, type CreateMenuResourceBody, type FetchAuthorizationResourcesParams, type FetchMenuResourcesParams, type HttpMethod, type ListPaginationParams, type ListPaginationResult, MENU_LEAF_NO, MENU_LEAF_YES, MENU_LIST_TYPE_PARAM, MENU_TYPE_BUTTON, MENU_TYPE_LABEL, MENU_TYPE_MENU, MENU_TYPE_OPTIONS, MENU_TYPE_PAGE, MENU_VISIBILITY_OPTIONS, type MatchMode, MenuManager, type MenuResource, type MenuResourceApi, type MenuResourceFormValues, type MenuResourceListResult, type MenuResourceType, PERMISSION_STORE_KEY, type PageDirection, type PermissionChecker, type PermissionCode, type PermissionDirectiveValue, type PermissionListener, type PermissionPluginOptions, type PermissionState, PermissionStore, RESOURCE_PRIVATE_OPTIONS, RESOURCE_STATUS_DISABLED, RESOURCE_STATUS_ENABLED, RESOURCE_STATUS_OPTIONS, RESOURCE_TYPE_API, ROOT_MENU_DEPTH, ROOT_PARENT_ID, type ResourceHttpRequest, ResourceManager, type ResourceRequestOptions, type ResourceStatus, type ResourceType, type RoleCode, SYSTEM_ADMIN_DEFAULT_KEY, SYSTEM_ADMIN_MENU, SystemAdmin, type SystemAdminMenuGroup, type SystemAdminMenuKey, type SystemAdminSubMenu, type UpdateAuthorizationResourceBody, type UpdateMenuResourceBody, type UsePermissionResult, appendQueryParam, buildCreateBody, buildCreateMenuBody, buildUpdateBody, buildUpdateMenuBody, createAuthorizationResourceApi, createDefaultResourceRequest, createMenuResourceApi, createPermissionPlugin, createPermissionStore, createVPermission, extractPagination, extractRecords, getAppClientId, getDeviceWorkerId, isMenuLeaf, mapAuthorizationResource, mapMenuResource, resolveMenuDepth, snowyflake, useHasPermission, useHasRole, usePermission };

package/dist/vue/index.d.ts

@@ -228,6 +228,10 @@ type MenuResource = {
      * 菜单层级：无上级（根）为 1，其余为上级 depth + 1
      */
     depth: number;
+    /**
+     * 是否叶子节点：`1` 表示无下级菜单，不可再展开
+     */
+    leaf: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -252,6 +256,8 @@ type CreateMenuResourceBody = MenuResourceFormValues & {
 };
 type UpdateMenuResourceBody = Partial<MenuResourceFormValues>;
 type FetchMenuResourcesParams = {
+    /** 列表默认传 1，只拉根层 */
+    depth?: number;
     pagination?: ListPaginationParams;
 };
 type MenuResourceListResult = {
@@ -260,6 +266,9 @@ type MenuResourceListResult = {
     hasPreviousPage: boolean;
     hasNextPage: boolean;
 };
+/** leaf === 1 表示无下级 */
+declare const MENU_LEAF_YES = 1;
+declare const MENU_LEAF_NO = 0;
 declare const RESOURCE_TYPE_API: ApiResourceType;
 declare const MENU_TYPE_PAGE: MenuResourceType;
 declare const MENU_TYPE_MENU: MenuResourceType;
@@ -313,6 +322,8 @@ type AuthorizationResourceApi = {
 };
 type MenuResourceApi = {
     list: (params?: FetchMenuResourcesParams, signal?: AbortSignal) => Promise<MenuResourceListResult>;
+    /** 展开下级：GET /authorization-resources/{resource-id}/sub-resources */
+    listSubResources: (resourceId: string, signal?: AbortSignal) => Promise<MenuResource[]>;
     /** 拉取权限点（type=api），供菜单表单多选 */
     listPermissionPoints: (params?: FetchAuthorizationResourcesParams, signal?: AbortSignal) => Promise<AuthorizationResourceListResult>;
     create: (values: MenuResourceFormValues, signal?: AbortSignal) => Promise<unknown>;
@@ -321,6 +332,10 @@ type MenuResourceApi = {
 };
 declare function mapAuthorizationResource(item: unknown): AuthorizationResource | null;
 declare function mapMenuResource(item: unknown): MenuResource | null;
+/**
+ * leaf === 1 表示无下级菜单。
+ */
+declare function isMenuLeaf(row: Pick<MenuResource, 'leaf'>): boolean;
 /**
  * 根据上级菜单计算 depth：无上级为 1，否则为上级 depth + 1。
  */
@@ -523,4 +538,4 @@ declare const snowyflake: ConfigurableSnowflake;
 declare function getAppClientId(): string;
 declare function getDeviceWorkerId(): string;
 
-export { type ApiResourceType, type AuthorizationResource, type AuthorizationResourceApi, type AuthorizationResourceFormValues, type AuthorizationResourceListResult, Can, type CheckOptions, type CreateAuthorizationResourceBody, type CreateDefaultResourceRequestOptions, type CreateMenuResourceBody, type FetchAuthorizationResourcesParams, type FetchMenuResourcesParams, type HttpMethod, type ListPaginationParams, type ListPaginationResult, MENU_LIST_TYPE_PARAM, MENU_TYPE_BUTTON, MENU_TYPE_LABEL, MENU_TYPE_MENU, MENU_TYPE_OPTIONS, MENU_TYPE_PAGE, MENU_VISIBILITY_OPTIONS, type MatchMode, MenuManager, type MenuResource, type MenuResourceApi, type MenuResourceFormValues, type MenuResourceListResult, type MenuResourceType, PERMISSION_STORE_KEY, type PageDirection, type PermissionChecker, type PermissionCode, type PermissionDirectiveValue, type PermissionListener, type PermissionPluginOptions, type PermissionState, PermissionStore, RESOURCE_PRIVATE_OPTIONS, RESOURCE_STATUS_DISABLED, RESOURCE_STATUS_ENABLED, RESOURCE_STATUS_OPTIONS, RESOURCE_TYPE_API, ROOT_MENU_DEPTH, ROOT_PARENT_ID, type ResourceHttpRequest, ResourceManager, type ResourceRequestOptions, type ResourceStatus, type ResourceType, type RoleCode, SYSTEM_ADMIN_DEFAULT_KEY, SYSTEM_ADMIN_MENU, SystemAdmin, type SystemAdminMenuGroup, type SystemAdminMenuKey, type SystemAdminSubMenu, type UpdateAuthorizationResourceBody, type UpdateMenuResourceBody, type UsePermissionResult, appendQueryParam, buildCreateBody, buildCreateMenuBody, buildUpdateBody, buildUpdateMenuBody, createAuthorizationResourceApi, createDefaultResourceRequest, createMenuResourceApi, createPermissionPlugin, createPermissionStore, createVPermission, extractPagination, extractRecords, getAppClientId, getDeviceWorkerId, mapAuthorizationResource, mapMenuResource, resolveMenuDepth, snowyflake, useHasPermission, useHasRole, usePermission };
+export { type ApiResourceType, type AuthorizationResource, type AuthorizationResourceApi, type AuthorizationResourceFormValues, type AuthorizationResourceListResult, Can, type CheckOptions, type CreateAuthorizationResourceBody, type CreateDefaultResourceRequestOptions, type CreateMenuResourceBody, type FetchAuthorizationResourcesParams, type FetchMenuResourcesParams, type HttpMethod, type ListPaginationParams, type ListPaginationResult, MENU_LEAF_NO, MENU_LEAF_YES, MENU_LIST_TYPE_PARAM, MENU_TYPE_BUTTON, MENU_TYPE_LABEL, MENU_TYPE_MENU, MENU_TYPE_OPTIONS, MENU_TYPE_PAGE, MENU_VISIBILITY_OPTIONS, type MatchMode, MenuManager, type MenuResource, type MenuResourceApi, type MenuResourceFormValues, type MenuResourceListResult, type MenuResourceType, PERMISSION_STORE_KEY, type PageDirection, type PermissionChecker, type PermissionCode, type PermissionDirectiveValue, type PermissionListener, type PermissionPluginOptions, type PermissionState, PermissionStore, RESOURCE_PRIVATE_OPTIONS, RESOURCE_STATUS_DISABLED, RESOURCE_STATUS_ENABLED, RESOURCE_STATUS_OPTIONS, RESOURCE_TYPE_API, ROOT_MENU_DEPTH, ROOT_PARENT_ID, type ResourceHttpRequest, ResourceManager, type ResourceRequestOptions, type ResourceStatus, type ResourceType, type RoleCode, SYSTEM_ADMIN_DEFAULT_KEY, SYSTEM_ADMIN_MENU, SystemAdmin, type SystemAdminMenuGroup, type SystemAdminMenuKey, type SystemAdminSubMenu, type UpdateAuthorizationResourceBody, type UpdateMenuResourceBody, type UsePermissionResult, appendQueryParam, buildCreateBody, buildCreateMenuBody, buildUpdateBody, buildUpdateMenuBody, createAuthorizationResourceApi, createDefaultResourceRequest, createMenuResourceApi, createPermissionPlugin, createPermissionStore, createVPermission, extractPagination, extractRecords, getAppClientId, getDeviceWorkerId, isMenuLeaf, mapAuthorizationResource, mapMenuResource, resolveMenuDepth, snowyflake, useHasPermission, useHasRole, usePermission };

package/dist/vue/index.js

@@ -309,6 +309,8 @@ import {
 } from "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";
@@ -537,10 +539,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 ?? ""),
@@ -549,6 +554,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);
@@ -558,6 +566,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");
@@ -655,7 +666,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);
@@ -665,6 +679,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);
     },
@@ -1462,6 +1484,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",
@@ -1598,7 +1644,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: {
@@ -1612,14 +1660,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",
@@ -1627,7 +1690,8 @@ var s2 = {
     border: "1px solid #eaecf0",
     borderRadius: "8px",
     padding: "8px",
-    background: "#f9fafb"
+    backgroundColor: "#ffffff",
+    color: "#101828"
   },
   checkItem: {
     display: "flex",
@@ -1636,7 +1700,8 @@ var s2 = {
     padding: "6px 4px",
     fontSize: "13px",
     color: "#344054",
-    cursor: "pointer"
+    cursor: "pointer",
+    backgroundColor: "transparent"
   },
   hint: { fontSize: "13px", color: "#98a2b3", padding: "8px" },
   dialogFooter: {
@@ -1664,6 +1729,9 @@ var MenuManager = defineComponent3({
   },
   setup(props, { slots }) {
     const records = ref2([]);
+    const childrenMap = ref2({});
+    const expandedIds = ref2({});
+    const expandingIds = ref2({});
     const permissionPoints = ref2([]);
     const loading = ref2(false);
     const error = ref2("");
@@ -1684,17 +1752,39 @@ var MenuManager = defineComponent3({
       );
       return map;
     });
+    const allKnownMenus = computed3(() => {
+      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 = computed3(
-      () => 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 = computed3(() => {
+      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,
@@ -1702,6 +1792,9 @@ var MenuManager = defineComponent3({
           }
         });
         records.value = result.records;
+        childrenMap.value = {};
+        expandedIds.value = {};
+        expandingIds.value = {};
         pageToken.value = result.pageToken;
         hasPreviousPage.value = result.hasPreviousPage;
         hasNextPage.value = result.hasNextPage;
@@ -1720,6 +1813,29 @@ var MenuManager = defineComponent3({
       } 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());
@@ -1730,7 +1846,7 @@ var MenuManager = defineComponent3({
       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,
@@ -1838,13 +1954,41 @@ var MenuManager = defineComponent3({
               h2("tr", [
                 h2("td", { colspan: 6, style: s2.empty }, "\u52A0\u8F7D\u4E2D\u2026")
               ])
-            ] : records.value.length === 0 ? [
+            ] : flatRows.value.length === 0 ? [
               h2("tr", [
                 h2("td", { colspan: 6, style: s2.empty }, "\u6682\u65E0\u6570\u636E")
               ])
-            ] : records.value.map(
-              (row) => h2("tr", { key: row.resourceId }, [
-                h2("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 h2("tr", { key: row.resourceId }, [
+                h2("td", { style: s2.td }, [
+                  h2(
+                    "div",
+                    {
+                      style: {
+                        ...s2.treeCell,
+                        paddingLeft: `${indent}px`
+                      }
+                    },
+                    [
+                      leaf ? h2("span", { style: s2.treeSpacer }) : h2(
+                        "button",
+                        {
+                          type: "button",
+                          style: s2.treeToggle,
+                          disabled: expanding,
+                          "aria-label": expanded ? "\u6536\u8D77" : "\u5C55\u5F00",
+                          onClick: () => void toggleExpand(row)
+                        },
+                        expanding ? "\u2026" : expanded ? "\u25BC" : "\u25B6"
+                      ),
+                      h2("span", row.name)
+                    ]
+                  )
+                ]),
                 h2("td", { style: s2.td }, [
                   h2(
                     "code",
@@ -1887,8 +2031,8 @@ var MenuManager = defineComponent3({
                     "\u5220\u9664"
                   )
                 ])
-              ])
-            )
+              ]);
+            })
           )
         ])
       ]),
@@ -1980,7 +2124,7 @@ var MenuManager = defineComponent3({
                           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);
                         }
                       },
                       [
@@ -1995,14 +2139,6 @@ var MenuManager = defineComponent3({
                       ]
                     )
                   ]),
-                  h2("div", { style: s2.field }, [
-                    h2("span", { style: s2.label }, "\u83DC\u5355\u5C42\u7EA7\uFF08depth\uFF09"),
-                    h2("input", {
-                      style: s2.input,
-                      value: form.depth,
-                      readOnly: true
-                    })
-                  ]),
                   h2("fieldset", { style: s2.fieldset }, [
                     h2("legend", { style: s2.label }, "\u83DC\u5355\u7C7B\u578B"),
                     h2(
@@ -2013,6 +2149,7 @@ var MenuManager = defineComponent3({
                           h2("input", {
                             type: "radio",
                             name: "menu-type",
+                            style: s2.control,
                             checked: form.type === opt.value,
                             onChange: () => {
                               form.type = opt.value;
@@ -2064,6 +2201,7 @@ var MenuManager = defineComponent3({
                           [
                             h2("input", {
                               type: "checkbox",
+                              style: s2.control,
                               checked: form.permissionPointIds.includes(
                                 p.resourceId
                               ),
@@ -2097,6 +2235,7 @@ var MenuManager = defineComponent3({
                           h2("input", {
                             type: "radio",
                             name: "menu-status",
+                            style: s2.control,
                             checked: form.status === opt.value,
                             onChange: () => {
                               form.status = opt.value;
@@ -2385,6 +2524,8 @@ var SystemAdmin = defineComponent4({
 });
 export {
   Can,
+  MENU_LEAF_NO,
+  MENU_LEAF_YES,
   MENU_LIST_TYPE_PARAM,
   MENU_TYPE_BUTTON,
   MENU_TYPE_LABEL,
@@ -2421,6 +2562,7 @@ export {
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
   resolveMenuDepth,