com-angel-authorization 1.0.4 → 1.0.6

package/dist/vue/index.js

@@ -310,16 +310,35 @@ import {
 
 // src/resources/types.ts
 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 = "0";
 var RESOURCE_STATUS_ENABLED = 1;
 var RESOURCE_STATUS_DISABLED = 0;
 var RESOURCE_STATUS_OPTIONS = [
   { label: "\u542F\u7528", value: RESOURCE_STATUS_ENABLED },
   { label: "\u7981\u7528", value: RESOURCE_STATUS_DISABLED }
 ];
+var MENU_VISIBILITY_OPTIONS = [
+  { label: "\u663E\u793A", value: RESOURCE_STATUS_ENABLED },
+  { label: "\u9690\u85CF", value: RESOURCE_STATUS_DISABLED }
+];
 var RESOURCE_PRIVATE_OPTIONS = [
   { label: "\u662F", value: true },
   { label: "\u5426", value: false }
 ];
+var MENU_TYPE_OPTIONS = [
+  { label: "\u76EE\u5F55", value: MENU_TYPE_PAGE },
+  { label: "\u83DC\u5355", value: MENU_TYPE_MENU },
+  { label: "\u6309\u94AE", value: MENU_TYPE_BUTTON }
+];
+var MENU_TYPE_LABEL = {
+  page: "\u76EE\u5F55",
+  menu: "\u83DC\u5355",
+  button: "\u6309\u94AE"
+};
 
 // src/utils/snowflake.ts
 var DEVICE_WORKER_ID_KEY = "hgams_device_worker_id";
@@ -464,6 +483,29 @@ function toBoolean(value) {
   }
   return false;
 }
+function toStringArray(value) {
+  if (Array.isArray(value)) {
+    return value.map((item) => {
+      if (item && typeof item === "object") {
+        const row = item;
+        const id = row.resourceId ?? row.resource_id ?? row.id;
+        return id === void 0 || id === null ? "" : String(id);
+      }
+      return String(item ?? "");
+    }).filter(Boolean);
+  }
+  if (typeof value === "string" && value.trim()) {
+    return value.split(",").map((s3) => s3.trim()).filter(Boolean);
+  }
+  return [];
+}
+function toMenuType(value) {
+  const v = String(value ?? "").toLowerCase();
+  if (v === MENU_TYPE_PAGE || v === MENU_TYPE_MENU || v === MENU_TYPE_BUTTON) {
+    return v;
+  }
+  return MENU_TYPE_MENU;
+}
 function mapAuthorizationResource(item) {
   if (!item || typeof item !== "object") return null;
   const row = item;
@@ -479,9 +521,31 @@ function mapAuthorizationResource(item) {
     description: String(row.description ?? row.desc ?? "")
   };
 }
-function buildListUrl(params) {
+function mapMenuResource(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const resourceId = row.resourceId ?? row.resource_id ?? row.id;
+  if (resourceId === void 0 || resourceId === null || resourceId === "") return null;
+  const permissionPointIds = toStringArray(
+    row.permissionPointIds ?? row.permission_point_ids ?? row.permissionPoints ?? row.permissions
+  );
+  const permissionNamesRaw = row.permissionPointNames ?? row.permission_point_names ?? row.permissionNames;
+  const permissionPointNames = Array.isArray(permissionNamesRaw) ? permissionNamesRaw.map((n) => String(n ?? "")).filter(Boolean) : void 0;
+  const parentId = row.parentId ?? row.parent_id ?? ROOT_PARENT_ID;
+  return {
+    resourceId: String(resourceId),
+    parentId: parentId === void 0 || parentId === null ? ROOT_PARENT_ID : String(parentId),
+    type: toMenuType(row.type),
+    name: String(row.name ?? ""),
+    identification: String(row.identification ?? row.identity ?? row.path ?? ""),
+    permissionPointIds,
+    permissionPointNames,
+    status: toResourceStatus(row.status)
+  };
+}
+function buildListUrl(type, params) {
   const parts = [];
-  appendQueryParam(parts, "type", RESOURCE_TYPE_API);
+  appendQueryParam(parts, "type", type);
   appendQueryParam(parts, "page-token", params?.pagination?.pageToken ?? "");
   appendQueryParam(parts, "page-size", params?.pagination?.pageSize ?? "20");
   appendQueryParam(parts, "page-direction", params?.pagination?.pageDirection ?? "current");
@@ -508,12 +572,33 @@ function buildUpdateBody(values) {
     description: values.description.trim()
   };
 }
+function buildCreateMenuBody(values, resourceId = getAppClientId()) {
+  return {
+    resourceId,
+    parentId: values.parentId || ROOT_PARENT_ID,
+    type: values.type,
+    name: values.name.trim(),
+    identification: values.identification.trim(),
+    permissionPointIds: [...values.permissionPointIds],
+    status: values.status
+  };
+}
+function buildUpdateMenuBody(values) {
+  return {
+    parentId: values.parentId || ROOT_PARENT_ID,
+    type: values.type,
+    name: values.name.trim(),
+    identification: values.identification.trim(),
+    permissionPointIds: [...values.permissionPointIds],
+    status: values.status
+  };
+}
 function createAuthorizationResourceApi(request) {
   return {
     async list(params, signal) {
       const json = await request({
         method: "GET",
-        url: buildListUrl(params),
+        url: buildListUrl(RESOURCE_TYPE_API, params),
         signal
       });
       const records = extractRecords(json).map(mapAuthorizationResource).filter((item) => item !== null);
@@ -548,6 +633,50 @@ function createAuthorizationResourceApi(request) {
     }
   };
 }
+function createMenuResourceApi(request) {
+  const permissionApi = createAuthorizationResourceApi(request);
+  return {
+    async list(params, signal) {
+      const json = await request({
+        method: "GET",
+        url: buildListUrl(MENU_LIST_TYPE_PARAM, params),
+        signal
+      });
+      const records = extractRecords(json).map(mapMenuResource).filter((item) => item !== null);
+      const pagination = extractPagination(json);
+      return {
+        records,
+        ...pagination
+      };
+    },
+    listPermissionPoints(params, signal) {
+      return permissionApi.list(params, signal);
+    },
+    async create(values, signal) {
+      return request({
+        method: "POST",
+        url: "/authorization-resources",
+        body: buildCreateMenuBody(values),
+        signal
+      });
+    },
+    async update(resourceId, values, signal) {
+      return request({
+        method: "PATCH",
+        url: `/authorization-resources/${encodeURIComponent(resourceId)}`,
+        body: buildUpdateMenuBody(values),
+        signal
+      });
+    },
+    async remove(resourceId, signal) {
+      return request({
+        method: "DELETE",
+        url: `/authorization-resources/${encodeURIComponent(resourceId)}`,
+        signal
+      });
+    }
+  };
+}
 function createDefaultResourceRequest(options = {}) {
   const baseUrl = (options.baseUrl ?? "").replace(/\/+$/, "");
   const credentials = options.credentials ?? "include";
@@ -704,11 +833,22 @@ var s = {
     cursor: "pointer",
     fontSize: "14px"
   },
+  dangerBtn: {
+    border: "none",
+    background: "#d92d20",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
   select: {
     border: "1px solid #d0d5dd",
     borderRadius: "6px",
     padding: "4px 8px",
-    fontSize: "13px"
+    fontSize: "13px",
+    backgroundColor: "#ffffff",
+    color: "#101828"
   },
   mask: {
     position: "fixed",
@@ -744,6 +884,18 @@ var s = {
     color: "#667085"
   },
   form: { display: "flex", flexDirection: "column", gap: "12px", padding: "16px" },
+  confirmBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px"
+  },
+  confirmText: {
+    margin: "0",
+    fontSize: "14px",
+    color: "#344054",
+    lineHeight: "1.6"
+  },
   field: { display: "flex", flexDirection: "column", gap: "6px" },
   label: { fontSize: "13px", color: "#344054", fontWeight: "500" },
   input: {
@@ -751,7 +903,11 @@ var s = {
     borderRadius: "8px",
     padding: "8px 10px",
     fontSize: "14px",
-    outline: "none"
+    outline: "none",
+    backgroundColor: "#ffffff",
+    color: "#101828",
+    boxSizing: "border-box",
+    width: "100%"
   },
   dialogFooter: {
     display: "flex",
@@ -788,6 +944,8 @@ var ResourceManager = defineComponent2({
     const editing = ref(null);
     const form = reactive(emptyForm());
     const saving = ref(false);
+    const deletingRow = ref(null);
+    const deleting = ref(false);
     const statusLabel = Object.fromEntries(
       RESOURCE_STATUS_OPTIONS.map((o) => [o.value, o.label])
     );
@@ -857,14 +1015,24 @@ var ResourceManager = defineComponent2({
         saving.value = false;
       }
     }
-    async function handleDelete(row) {
-      if (!window.confirm(`\u786E\u8BA4\u5220\u9664\u6743\u9650\u70B9\u300C${row.name}\u300D\uFF1F`)) return;
+    function askDelete(row) {
+      deletingRow.value = row;
+    }
+    function closeDeleteDialog() {
+      if (!deleting.value) deletingRow.value = null;
+    }
+    async function confirmDelete() {
+      if (!deletingRow.value) return;
+      deleting.value = true;
       error.value = "";
       try {
-        await props.api.remove(row.resourceId);
+        await props.api.remove(deletingRow.value.resourceId);
+        deletingRow.value = null;
         await loadList("current", "");
       } catch (err) {
         error.value = err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25";
+      } finally {
+        deleting.value = false;
       }
     }
     onMounted(() => {
@@ -946,7 +1114,7 @@ var ResourceManager = defineComponent2({
                     {
                       type: "button",
                       style: { ...s.linkBtn, color: "#d92d20" },
-                      onClick: () => void handleDelete(row)
+                      onClick: () => askDelete(row)
                     },
                     "\u5220\u9664"
                   )
@@ -1138,12 +1306,884 @@ var ResourceManager = defineComponent2({
             ]
           )
         ]
+      ) : null,
+      deletingRow.value ? h(
+        "div",
+        { style: s.mask, onClick: closeDeleteDialog },
+        [
+          h(
+            "div",
+            {
+              style: { ...s.dialog, maxWidth: "420px" },
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": "angel-auth-delete-title",
+              onClick: (e) => e.stopPropagation()
+            },
+            [
+              h("div", { style: s.dialogHeader }, [
+                h(
+                  "h3",
+                  {
+                    id: "angel-auth-delete-title",
+                    style: s.dialogTitle
+                  },
+                  "\u786E\u8BA4\u5220\u9664"
+                ),
+                h(
+                  "button",
+                  {
+                    type: "button",
+                    style: s.iconBtn,
+                    "aria-label": "\u5173\u95ED",
+                    onClick: closeDeleteDialog
+                  },
+                  "\xD7"
+                )
+              ]),
+              h("div", { style: s.confirmBody }, [
+                h("p", { style: s.confirmText }, [
+                  "\u786E\u8BA4\u5220\u9664\u6743\u9650\u70B9\u300C",
+                  h("strong", deletingRow.value.name),
+                  "\u300D\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+                ]),
+                h("div", { style: s.dialogFooter }, [
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      style: s.secondaryBtn,
+                      disabled: deleting.value,
+                      onClick: closeDeleteDialog
+                    },
+                    "\u53D6\u6D88"
+                  ),
+                  h(
+                    "button",
+                    {
+                      type: "button",
+                      style: s.dangerBtn,
+                      disabled: deleting.value,
+                      onClick: () => void confirmDelete()
+                    },
+                    deleting.value ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                  )
+                ])
+              ])
+            ]
+          )
+        ]
+      ) : null
+    ]);
+  }
+});
+
+// src/vue/MenuManager.ts
+import {
+  computed as computed3,
+  defineComponent as defineComponent3,
+  h as h2,
+  onMounted as onMounted2,
+  reactive as reactive2,
+  ref as ref2,
+  watch as watch2
+} from "vue";
+var PAGE_SIZE_OPTIONS2 = ["10", "20", "50", "100"];
+function emptyForm2() {
+  return {
+    parentId: ROOT_PARENT_ID,
+    type: MENU_TYPE_MENU,
+    name: "",
+    identification: "",
+    permissionPointIds: [],
+    status: RESOURCE_STATUS_ENABLED
+  };
+}
+var s2 = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px",
+    color: "#101828",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  title: { margin: "0", fontSize: "18px", fontWeight: "600" },
+  toolbarRight: { display: "flex", alignItems: "center", gap: "8px" },
+  error: {
+    padding: "10px 12px",
+    borderRadius: "8px",
+    background: "#fef3f2",
+    color: "#b42318",
+    fontSize: "13px"
+  },
+  tableWrap: {
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: "10px",
+    background: "#fff"
+  },
+  table: { width: "100%", borderCollapse: "collapse", minWidth: "820px" },
+  th: {
+    textAlign: "left",
+    padding: "12px 14px",
+    fontSize: "13px",
+    fontWeight: "600",
+    color: "#475467",
+    background: "#f9fafb",
+    borderBottom: "1px solid #eaecf0"
+  },
+  td: {
+    padding: "12px 14px",
+    fontSize: "14px",
+    borderBottom: "1px solid #f2f4f7",
+    verticalAlign: "middle"
+  },
+  empty: {
+    padding: "28px",
+    textAlign: "center",
+    color: "#98a2b3",
+    fontSize: "14px"
+  },
+  code: {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: "13px",
+    background: "#f2f4f7",
+    padding: "2px 6px",
+    borderRadius: "4px"
+  },
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: "999px",
+    fontSize: "12px",
+    fontWeight: "500"
+  },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: "13px"
+  },
+  pagination: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  pageSize: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "13px",
+    color: "#475467"
+  },
+  pageBtns: { display: "flex", gap: "8px" },
+  primaryBtn: {
+    border: "none",
+    background: "#049BAD",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  secondaryBtn: {
+    border: "1px solid #d0d5dd",
+    background: "#fff",
+    color: "#344054",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  dangerBtn: {
+    border: "none",
+    background: "#d92d20",
+    color: "#fff",
+    borderRadius: "8px",
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: "14px"
+  },
+  select: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "6px",
+    padding: "4px 8px",
+    fontSize: "13px",
+    backgroundColor: "#ffffff",
+    color: "#101828"
+  },
+  mask: {
+    position: "fixed",
+    inset: "0",
+    background: "rgba(16, 24, 40, 0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: "1000",
+    padding: "16px"
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: "480px",
+    background: "#fff",
+    borderRadius: "12px",
+    boxShadow: "0 20px 40px rgba(16,24,40,0.18)",
+    maxHeight: "90vh",
+    overflow: "auto"
+  },
+  dialogHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "14px 16px",
+    borderBottom: "1px solid #eaecf0",
+    position: "sticky",
+    top: "0",
+    background: "#fff",
+    zIndex: "1"
+  },
+  dialogTitle: { margin: "0", fontSize: "16px", fontWeight: "600" },
+  iconBtn: {
+    border: "none",
+    background: "transparent",
+    fontSize: "22px",
+    lineHeight: "1",
+    cursor: "pointer",
+    color: "#667085"
+  },
+  form: { display: "flex", flexDirection: "column", gap: "12px", padding: "16px" },
+  confirmBody: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "16px",
+    padding: "16px"
+  },
+  confirmText: {
+    margin: "0",
+    fontSize: "14px",
+    color: "#344054",
+    lineHeight: "1.6"
+  },
+  field: { display: "flex", flexDirection: "column", gap: "6px" },
+  fieldset: {
+    margin: "0",
+    padding: "0",
+    border: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: "8px"
+  },
+  label: { fontSize: "13px", color: "#344054", fontWeight: "500" },
+  input: {
+    border: "1px solid #d0d5dd",
+    borderRadius: "8px",
+    padding: "8px 10px",
+    fontSize: "14px",
+    outline: "none",
+    backgroundColor: "#ffffff",
+    color: "#101828",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  radioGroup: { display: "flex", flexWrap: "wrap", gap: "16px" },
+  radioItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "6px",
+    fontSize: "14px",
+    color: "#344054",
+    cursor: "pointer"
+  },
+  multiSelect: {
+    maxHeight: "160px",
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: "8px",
+    padding: "8px",
+    background: "#f9fafb"
+  },
+  checkItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    padding: "6px 4px",
+    fontSize: "13px",
+    color: "#344054",
+    cursor: "pointer"
+  },
+  hint: { fontSize: "13px", color: "#98a2b3", padding: "8px" },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: "8px",
+    paddingTop: "4px"
+  }
+};
+var MenuManager = defineComponent3({
+  name: "MenuManager",
+  props: {
+    api: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      default: "\u83DC\u5355\u7BA1\u7406"
+    },
+    pageSize: {
+      type: String,
+      default: "20"
+    }
+  },
+  setup(props, { slots }) {
+    const records = ref2([]);
+    const permissionPoints = ref2([]);
+    const loading = ref2(false);
+    const error = ref2("");
+    const pageSize = ref2(props.pageSize);
+    const pageToken = ref2("");
+    const hasPreviousPage = ref2(false);
+    const hasNextPage = ref2(false);
+    const dialogOpen = ref2(false);
+    const editing = ref2(null);
+    const form = reactive2(emptyForm2());
+    const saving = ref2(false);
+    const deletingRow = ref2(null);
+    const deleting = ref2(false);
+    const permissionNameMap = computed3(() => {
+      const map = /* @__PURE__ */ new Map();
+      permissionPoints.value.forEach(
+        (p) => map.set(p.resourceId, p.name || p.identification)
+      );
+      return map;
+    });
+    const parentOptions = computed3(
+      () => records.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`
+      }))
+    );
+    async function loadList(direction = "current", token = pageToken.value) {
+      loading.value = true;
+      error.value = "";
+      try {
+        const result = await props.api.list({
+          pagination: {
+            pageToken: token,
+            pageSize: pageSize.value,
+            pageDirection: direction
+          }
+        });
+        records.value = result.records;
+        pageToken.value = result.pageToken;
+        hasPreviousPage.value = result.hasPreviousPage;
+        hasNextPage.value = result.hasNextPage;
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u5931\u8D25";
+      } finally {
+        loading.value = false;
+      }
+    }
+    async function loadPermissionPoints() {
+      try {
+        const result = await props.api.listPermissionPoints({
+          pagination: { pageSize: "200", pageDirection: "current" }
+        });
+        permissionPoints.value = result.records;
+      } catch {
+      }
+    }
+    function openCreate() {
+      editing.value = null;
+      Object.assign(form, emptyForm2());
+      dialogOpen.value = true;
+      void loadPermissionPoints();
+    }
+    function openEdit(row) {
+      editing.value = row;
+      Object.assign(form, {
+        parentId: row.parentId || ROOT_PARENT_ID,
+        type: row.type,
+        name: row.name,
+        identification: row.identification,
+        permissionPointIds: [...row.permissionPointIds],
+        status: row.status
+      });
+      dialogOpen.value = true;
+      void loadPermissionPoints();
+    }
+    function closeDialog() {
+      if (!saving.value) dialogOpen.value = false;
+    }
+    async function handleSubmit(event) {
+      event.preventDefault();
+      if (!form.name.trim()) {
+        error.value = "\u8BF7\u586B\u5199\u83DC\u5355\u540D\u79F0";
+        return;
+      }
+      saving.value = true;
+      error.value = "";
+      try {
+        if (editing.value) {
+          await props.api.update(editing.value.resourceId, { ...form });
+        } else {
+          await props.api.create({ ...form });
+        }
+        dialogOpen.value = false;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25";
+      } finally {
+        saving.value = false;
+      }
+    }
+    function askDelete(row) {
+      deletingRow.value = row;
+    }
+    function closeDeleteDialog() {
+      if (!deleting.value) deletingRow.value = null;
+    }
+    async function confirmDelete() {
+      if (!deletingRow.value) return;
+      deleting.value = true;
+      error.value = "";
+      try {
+        await props.api.remove(deletingRow.value.resourceId);
+        deletingRow.value = null;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25";
+      } finally {
+        deleting.value = false;
+      }
+    }
+    function togglePermission(id) {
+      const exists = form.permissionPointIds.includes(id);
+      form.permissionPointIds = exists ? form.permissionPointIds.filter((x) => x !== id) : [...form.permissionPointIds, id];
+    }
+    function renderPermissionLabels(row) {
+      if (row.permissionPointNames?.length) {
+        return row.permissionPointNames.join("\u3001");
+      }
+      if (!row.permissionPointIds.length) return "\u2014";
+      return row.permissionPointIds.map((id) => permissionNameMap.value.get(id) ?? id).join("\u3001");
+    }
+    onMounted2(() => {
+      void loadList("current", "");
+      void loadPermissionPoints();
+    });
+    watch2(
+      () => [props.api, pageSize.value],
+      () => {
+        pageToken.value = "";
+        void loadList("current", "");
+      }
+    );
+    return () => h2("div", { style: s2.root }, [
+      h2("div", { style: s2.toolbar }, [
+        h2("h2", { style: s2.title }, props.title),
+        h2("div", { style: s2.toolbarRight }, [
+          slots.toolbarExtra?.(),
+          h2(
+            "button",
+            { type: "button", style: s2.primaryBtn, onClick: openCreate },
+            "\u65B0\u589E"
+          )
+        ])
+      ]),
+      error.value ? h2("div", { style: s2.error }, error.value) : null,
+      h2("div", { style: s2.tableWrap }, [
+        h2("table", { style: s2.table }, [
+          h2("thead", [
+            h2("tr", [
+              h2("th", { style: s2.th }, "\u83DC\u5355\u540D\u79F0"),
+              h2("th", { style: s2.th }, "\u8BF7\u6C42\u5730\u5740"),
+              h2("th", { style: { ...s2.th, width: "90px" } }, "\u7C7B\u578B"),
+              h2("th", { style: { ...s2.th, width: "80px" } }, "\u53EF\u89C1"),
+              h2("th", { style: s2.th }, "\u6743\u9650\u6807\u8BC6"),
+              h2("th", { style: { ...s2.th, width: "140px" } }, "\u64CD\u4F5C")
+            ])
+          ]),
+          h2(
+            "tbody",
+            loading.value ? [
+              h2("tr", [
+                h2("td", { colspan: 6, style: s2.empty }, "\u52A0\u8F7D\u4E2D\u2026")
+              ])
+            ] : records.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),
+                h2("td", { style: s2.td }, [
+                  h2(
+                    "code",
+                    { style: s2.code },
+                    row.identification || "\u2014"
+                  )
+                ]),
+                h2("td", { style: s2.td }, MENU_TYPE_LABEL[row.type]),
+                h2("td", { style: s2.td }, [
+                  h2(
+                    "span",
+                    {
+                      style: {
+                        ...s2.badge,
+                        background: row.status === RESOURCE_STATUS_ENABLED ? "#e8f7ef" : "#f4f4f5",
+                        color: row.status === RESOURCE_STATUS_ENABLED ? "#067647" : "#667085"
+                      }
+                    },
+                    row.status === RESOURCE_STATUS_ENABLED ? "\u663E\u793A" : "\u9690\u85CF"
+                  )
+                ]),
+                h2("td", { style: s2.td }, renderPermissionLabels(row)),
+                h2("td", { style: s2.td }, [
+                  h2(
+                    "button",
+                    {
+                      type: "button",
+                      style: s2.linkBtn,
+                      onClick: () => openEdit(row)
+                    },
+                    "\u7F16\u8F91"
+                  ),
+                  h2(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...s2.linkBtn, color: "#d92d20" },
+                      onClick: () => askDelete(row)
+                    },
+                    "\u5220\u9664"
+                  )
+                ])
+              ])
+            )
+          )
+        ])
+      ]),
+      h2("div", { style: s2.pagination }, [
+        h2("label", { style: s2.pageSize }, [
+          "\u6BCF\u9875",
+          h2(
+            "select",
+            {
+              style: s2.select,
+              value: pageSize.value,
+              onChange: (e) => {
+                pageSize.value = e.target.value;
+              }
+            },
+            PAGE_SIZE_OPTIONS2.map(
+              (size) => h2("option", { key: size, value: size }, size)
+            )
+          )
+        ]),
+        h2("div", { style: s2.pageBtns }, [
+          h2(
+            "button",
+            {
+              type: "button",
+              style: s2.secondaryBtn,
+              disabled: !hasPreviousPage.value || loading.value,
+              onClick: () => void loadList("previous")
+            },
+            "\u4E0A\u4E00\u9875"
+          ),
+          h2(
+            "button",
+            {
+              type: "button",
+              style: s2.secondaryBtn,
+              disabled: !hasNextPage.value || loading.value,
+              onClick: () => void loadList("next")
+            },
+            "\u4E0B\u4E00\u9875"
+          )
+        ])
+      ]),
+      dialogOpen.value ? h2(
+        "div",
+        { style: s2.mask, onClick: closeDialog },
+        [
+          h2(
+            "div",
+            {
+              style: { ...s2.dialog, maxWidth: "520px" },
+              role: "dialog",
+              "aria-modal": "true",
+              onClick: (e) => e.stopPropagation()
+            },
+            [
+              h2("div", { style: s2.dialogHeader }, [
+                h2(
+                  "h3",
+                  { style: s2.dialogTitle },
+                  editing.value ? "\u7F16\u8F91\u83DC\u5355" : "\u65B0\u589E\u83DC\u5355"
+                ),
+                h2(
+                  "button",
+                  {
+                    type: "button",
+                    style: s2.iconBtn,
+                    "aria-label": "\u5173\u95ED",
+                    onClick: closeDialog
+                  },
+                  "\xD7"
+                )
+              ]),
+              h2(
+                "form",
+                {
+                  style: s2.form,
+                  onSubmit: (e) => void handleSubmit(e)
+                },
+                [
+                  h2("label", { style: s2.field }, [
+                    h2("span", { style: s2.label }, "\u4E0A\u7EA7\u83DC\u5355"),
+                    h2(
+                      "select",
+                      {
+                        style: s2.input,
+                        value: form.parentId,
+                        onChange: (e) => {
+                          form.parentId = e.target.value;
+                        }
+                      },
+                      [
+                        h2("option", { value: ROOT_PARENT_ID }, "\u6839\u76EE\u5F55"),
+                        ...parentOptions.value.map(
+                          (opt) => h2(
+                            "option",
+                            { key: opt.value, value: opt.value },
+                            opt.label
+                          )
+                        )
+                      ]
+                    )
+                  ]),
+                  h2("fieldset", { style: s2.fieldset }, [
+                    h2("legend", { style: s2.label }, "\u83DC\u5355\u7C7B\u578B"),
+                    h2(
+                      "div",
+                      { style: s2.radioGroup },
+                      MENU_TYPE_OPTIONS.map(
+                        (opt) => h2("label", { key: opt.value, style: s2.radioItem }, [
+                          h2("input", {
+                            type: "radio",
+                            name: "menu-type",
+                            checked: form.type === opt.value,
+                            onChange: () => {
+                              form.type = opt.value;
+                            }
+                          }),
+                          opt.label
+                        ])
+                      )
+                    )
+                  ]),
+                  h2("label", { style: s2.field }, [
+                    h2("span", { style: s2.label }, "\u83DC\u5355\u540D\u79F0"),
+                    h2("input", {
+                      style: s2.input,
+                      value: form.name,
+                      placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u540D\u79F0",
+                      required: true,
+                      onInput: (e) => {
+                        form.name = e.target.value;
+                      }
+                    })
+                  ]),
+                  h2("label", { style: s2.field }, [
+                    h2("span", { style: s2.label }, "\u8BF7\u6C42\u5730\u5740"),
+                    h2("input", {
+                      style: s2.input,
+                      value: form.identification,
+                      placeholder: "\u5982 /system/user",
+                      onInput: (e) => {
+                        form.identification = e.target.value;
+                      }
+                    })
+                  ]),
+                  h2("fieldset", { style: s2.fieldset }, [
+                    h2("legend", { style: s2.label }, "\u6743\u9650\u6807\u8BC6"),
+                    h2(
+                      "div",
+                      { style: s2.multiSelect },
+                      permissionPoints.value.length === 0 ? [
+                        h2(
+                          "div",
+                          { style: s2.hint },
+                          "\u6682\u65E0\u6743\u9650\u70B9\uFF0C\u8BF7\u5148\u5728\u6743\u9650\u70B9\u7BA1\u7406\u4E2D\u65B0\u589E"
+                        )
+                      ] : permissionPoints.value.map(
+                        (p) => h2(
+                          "label",
+                          { key: p.resourceId, style: s2.checkItem },
+                          [
+                            h2("input", {
+                              type: "checkbox",
+                              checked: form.permissionPointIds.includes(
+                                p.resourceId
+                              ),
+                              onChange: () => togglePermission(p.resourceId)
+                            }),
+                            h2("span", [
+                              p.name,
+                              h2(
+                                "code",
+                                {
+                                  style: {
+                                    ...s2.code,
+                                    marginLeft: "6px"
+                                  }
+                                },
+                                p.identification
+                              )
+                            ])
+                          ]
+                        )
+                      )
+                    )
+                  ]),
+                  h2("fieldset", { style: s2.fieldset }, [
+                    h2("legend", { style: s2.label }, "\u72B6\u6001"),
+                    h2(
+                      "div",
+                      { style: s2.radioGroup },
+                      MENU_VISIBILITY_OPTIONS.map(
+                        (opt) => h2("label", { key: opt.value, style: s2.radioItem }, [
+                          h2("input", {
+                            type: "radio",
+                            name: "menu-status",
+                            checked: form.status === opt.value,
+                            onChange: () => {
+                              form.status = opt.value;
+                            }
+                          }),
+                          opt.label
+                        ])
+                      )
+                    )
+                  ]),
+                  h2("div", { style: s2.dialogFooter }, [
+                    h2(
+                      "button",
+                      {
+                        type: "button",
+                        style: s2.secondaryBtn,
+                        onClick: closeDialog
+                      },
+                      "\u53D6\u6D88"
+                    ),
+                    h2(
+                      "button",
+                      {
+                        type: "submit",
+                        style: s2.primaryBtn,
+                        disabled: saving.value
+                      },
+                      saving.value ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                    )
+                  ])
+                ]
+              )
+            ]
+          )
+        ]
+      ) : null,
+      deletingRow.value ? h2(
+        "div",
+        { style: s2.mask, onClick: closeDeleteDialog },
+        [
+          h2(
+            "div",
+            {
+              style: { ...s2.dialog, maxWidth: "420px" },
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": "angel-auth-menu-delete-title",
+              onClick: (e) => e.stopPropagation()
+            },
+            [
+              h2("div", { style: s2.dialogHeader }, [
+                h2(
+                  "h3",
+                  {
+                    id: "angel-auth-menu-delete-title",
+                    style: s2.dialogTitle
+                  },
+                  "\u786E\u8BA4\u5220\u9664"
+                ),
+                h2(
+                  "button",
+                  {
+                    type: "button",
+                    style: s2.iconBtn,
+                    "aria-label": "\u5173\u95ED",
+                    onClick: closeDeleteDialog
+                  },
+                  "\xD7"
+                )
+              ]),
+              h2("div", { style: s2.confirmBody }, [
+                h2("p", { style: s2.confirmText }, [
+                  "\u786E\u8BA4\u5220\u9664\u83DC\u5355\u300C",
+                  h2("strong", deletingRow.value.name),
+                  "\u300D\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+                ]),
+                h2("div", { style: s2.dialogFooter }, [
+                  h2(
+                    "button",
+                    {
+                      type: "button",
+                      style: s2.secondaryBtn,
+                      disabled: deleting.value,
+                      onClick: closeDeleteDialog
+                    },
+                    "\u53D6\u6D88"
+                  ),
+                  h2(
+                    "button",
+                    {
+                      type: "button",
+                      style: s2.dangerBtn,
+                      disabled: deleting.value,
+                      onClick: () => void confirmDelete()
+                    },
+                    deleting.value ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                  )
+                ])
+              ])
+            ]
+          )
+        ]
       ) : null
     ]);
   }
 });
 export {
   Can,
+  MENU_LIST_TYPE_PARAM,
+  MENU_TYPE_BUTTON,
+  MENU_TYPE_LABEL,
+  MENU_TYPE_MENU,
+  MENU_TYPE_OPTIONS,
+  MENU_TYPE_PAGE,
+  MENU_VISIBILITY_OPTIONS,
+  MenuManager,
   PERMISSION_STORE_KEY,
   PermissionStore,
   RESOURCE_PRIVATE_OPTIONS,
@@ -1151,12 +2191,16 @@ export {
   RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API,
+  ROOT_PARENT_ID,
   ResourceManager,
   appendQueryParam,
   buildCreateBody,
+  buildCreateMenuBody,
   buildUpdateBody,
+  buildUpdateMenuBody,
   createAuthorizationResourceApi,
   createDefaultResourceRequest,
+  createMenuResourceApi,
   createPermissionPlugin,
   createPermissionStore,
   createVPermission,
@@ -1165,6 +2209,7 @@ export {
   getAppClientId,
   getDeviceWorkerId,
   mapAuthorizationResource,
+  mapMenuResource,
   snowyflake,
   useHasPermission,
   useHasRole,