com-angel-authorization 1.0.8 → 1.0.10

package/dist/vue/index.d.cts

@@ -224,6 +224,14 @@ type MenuResource = {
     resourceId: string;
     /** 上级菜单 ID；无上级时为 null */
     parentId: string | null;
+    /**
+     * 菜单层级：无上级（根）为 1，其余为上级 depth + 1
+     */
+    depth: number;
+    /**
+     * 是否叶子节点：`1` 表示无下级菜单，不可再展开
+     */
+    leaf: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -235,6 +243,8 @@ type MenuResource = {
 type MenuResourceFormValues = {
     /** 上级菜单 ID；选择「无」时为 null */
     parentId: string | null;
+    /** 由 parentId 自动计算：无为 1，否则上级 depth + 1 */
+    depth: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -246,6 +256,8 @@ type CreateMenuResourceBody = MenuResourceFormValues & {
 };
 type UpdateMenuResourceBody = Partial<MenuResourceFormValues>;
 type FetchMenuResourcesParams = {
+    /** 列表默认传 1，只拉根层 */
+    depth?: number;
     pagination?: ListPaginationParams;
 };
 type MenuResourceListResult = {
@@ -254,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;
@@ -265,6 +280,8 @@ declare const MENU_LIST_TYPE_PARAM = "page,menu,button";
  * 提交接口时会转换为 parentId: null。
  */
 declare const ROOT_PARENT_ID = "";
+/** 无上级时的菜单层级 */
+declare const ROOT_MENU_DEPTH = 1;
 declare const RESOURCE_STATUS_ENABLED: ResourceStatus;
 declare const RESOURCE_STATUS_DISABLED: ResourceStatus;
 declare const RESOURCE_STATUS_OPTIONS: {
@@ -305,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>;
@@ -313,6 +332,14 @@ 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。
+ */
+declare function resolveMenuDepth(parentId: string | null | undefined, menus: Array<Pick<MenuResource, 'resourceId' | 'depth'>>): number;
 declare function buildCreateBody(values: AuthorizationResourceFormValues, resourceId?: string): CreateAuthorizationResourceBody;
 declare function buildUpdateBody(values: AuthorizationResourceFormValues): UpdateAuthorizationResourceBody;
 declare function buildCreateMenuBody(values: MenuResourceFormValues, resourceId?: string): CreateMenuResourceBody;
@@ -511,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_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, 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

@@ -224,6 +224,14 @@ type MenuResource = {
     resourceId: string;
     /** 上级菜单 ID；无上级时为 null */
     parentId: string | null;
+    /**
+     * 菜单层级：无上级（根）为 1，其余为上级 depth + 1
+     */
+    depth: number;
+    /**
+     * 是否叶子节点：`1` 表示无下级菜单，不可再展开
+     */
+    leaf: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -235,6 +243,8 @@ type MenuResource = {
 type MenuResourceFormValues = {
     /** 上级菜单 ID；选择「无」时为 null */
     parentId: string | null;
+    /** 由 parentId 自动计算：无为 1，否则上级 depth + 1 */
+    depth: number;
     type: MenuResourceType;
     name: string;
     identification: string;
@@ -246,6 +256,8 @@ type CreateMenuResourceBody = MenuResourceFormValues & {
 };
 type UpdateMenuResourceBody = Partial<MenuResourceFormValues>;
 type FetchMenuResourcesParams = {
+    /** 列表默认传 1，只拉根层 */
+    depth?: number;
     pagination?: ListPaginationParams;
 };
 type MenuResourceListResult = {
@@ -254,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;
@@ -265,6 +280,8 @@ declare const MENU_LIST_TYPE_PARAM = "page,menu,button";
  * 提交接口时会转换为 parentId: null。
  */
 declare const ROOT_PARENT_ID = "";
+/** 无上级时的菜单层级 */
+declare const ROOT_MENU_DEPTH = 1;
 declare const RESOURCE_STATUS_ENABLED: ResourceStatus;
 declare const RESOURCE_STATUS_DISABLED: ResourceStatus;
 declare const RESOURCE_STATUS_OPTIONS: {
@@ -305,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>;
@@ -313,6 +332,14 @@ 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。
+ */
+declare function resolveMenuDepth(parentId: string | null | undefined, menus: Array<Pick<MenuResource, 'resourceId' | 'depth'>>): number;
 declare function buildCreateBody(values: AuthorizationResourceFormValues, resourceId?: string): CreateAuthorizationResourceBody;
 declare function buildUpdateBody(values: AuthorizationResourceFormValues): UpdateAuthorizationResourceBody;
 declare function buildCreateMenuBody(values: MenuResourceFormValues, resourceId?: string): CreateMenuResourceBody;
@@ -511,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_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, 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,12 +309,15 @@ 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";
 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 = [
@@ -533,9 +536,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 ?? ""),
@@ -544,9 +554,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");
@@ -574,9 +596,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(),
@@ -585,8 +609,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(),
@@ -640,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);
@@ -650,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);
     },
@@ -1393,6 +1430,7 @@ var PAGE_SIZE_OPTIONS2 = ["10", "20", "50", "100"];
 function emptyForm2() {
   return {
     parentId: null,
+    depth: ROOT_MENU_DEPTH,
     type: MENU_TYPE_MENU,
     name: "",
     identification: "",
@@ -1446,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",
@@ -1648,6 +1710,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("");
@@ -1668,17 +1733,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,
@@ -1686,6 +1773,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;
@@ -1704,6 +1794,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());
@@ -1714,6 +1827,7 @@ var MenuManager = defineComponent3({
       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,
@@ -1821,13 +1935,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",
@@ -1870,8 +2012,8 @@ var MenuManager = defineComponent3({
                     "\u5220\u9664"
                   )
                 ])
-              ])
-            )
+              ]);
+            })
           )
         ])
       ]),
@@ -1961,7 +2103,9 @@ var MenuManager = defineComponent3({
                         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);
                         }
                       },
                       [
@@ -1976,6 +2120,14 @@ 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(
@@ -2358,6 +2510,8 @@ var SystemAdmin = defineComponent4({
 });
 export {
   Can,
+  MENU_LEAF_NO,
+  MENU_LEAF_YES,
   MENU_LIST_TYPE_PARAM,
   MENU_TYPE_BUTTON,
   MENU_TYPE_LABEL,
@@ -2373,6 +2527,7 @@ export {
   RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API,
+  ROOT_MENU_DEPTH,
   ROOT_PARENT_ID,
   ResourceManager,
   SYSTEM_ADMIN_DEFAULT_KEY,
@@ -2393,8 +2548,10 @@ export {
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
+  isMenuLeaf,
   mapAuthorizationResource,
   mapMenuResource,
+  resolveMenuDepth,
   snowyflake,
   useHasPermission,
   useHasRole,