com-angel-authorization 1.0.5 → 1.0.7

package/dist/react/index.cjs

@@ -22,6 +22,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var react_exports = {};
 __export(react_exports, {
   Can: () => Can,
+  MENU_LIST_TYPE_PARAM: () => MENU_LIST_TYPE_PARAM,
+  MENU_TYPE_BUTTON: () => MENU_TYPE_BUTTON,
+  MENU_TYPE_LABEL: () => MENU_TYPE_LABEL,
+  MENU_TYPE_MENU: () => MENU_TYPE_MENU,
+  MENU_TYPE_OPTIONS: () => MENU_TYPE_OPTIONS,
+  MENU_TYPE_PAGE: () => MENU_TYPE_PAGE,
+  MENU_VISIBILITY_OPTIONS: () => MENU_VISIBILITY_OPTIONS,
+  MenuManager: () => MenuManager,
   PermissionProvider: () => PermissionProvider,
   PermissionStore: () => PermissionStore,
   RESOURCE_PRIVATE_OPTIONS: () => RESOURCE_PRIVATE_OPTIONS,
@@ -29,18 +37,26 @@ __export(react_exports, {
   RESOURCE_STATUS_ENABLED: () => RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS: () => RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API: () => RESOURCE_TYPE_API,
+  ROOT_PARENT_ID: () => ROOT_PARENT_ID,
   ResourceManager: () => ResourceManager,
+  SYSTEM_ADMIN_DEFAULT_KEY: () => SYSTEM_ADMIN_DEFAULT_KEY,
+  SYSTEM_ADMIN_MENU: () => SYSTEM_ADMIN_MENU,
+  SystemAdmin: () => SystemAdmin,
   appendQueryParam: () => appendQueryParam,
   buildCreateBody: () => buildCreateBody,
+  buildCreateMenuBody: () => buildCreateMenuBody,
   buildUpdateBody: () => buildUpdateBody,
+  buildUpdateMenuBody: () => buildUpdateMenuBody,
   createAuthorizationResourceApi: () => createAuthorizationResourceApi,
   createDefaultResourceRequest: () => createDefaultResourceRequest,
+  createMenuResourceApi: () => createMenuResourceApi,
   createPermissionStore: () => createPermissionStore,
   extractPagination: () => extractPagination,
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
   getDeviceWorkerId: () => getDeviceWorkerId,
   mapAuthorizationResource: () => mapAuthorizationResource,
+  mapMenuResource: () => mapMenuResource,
   snowyflake: () => snowyflake,
   useHasPermission: () => useHasPermission,
   useHasRole: () => useHasRole,
@@ -268,16 +284,35 @@ var import_react2 = require("react");
 
 // 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";
@@ -422,6 +457,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((s) => s.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;
@@ -437,9 +495,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");
@@ -466,12 +546,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);
@@ -506,6 +607,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";
@@ -1072,9 +1217,782 @@ var styles = {
     paddingTop: 4
   }
 };
+
+// src/react/MenuManager.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var PAGE_SIZE_OPTIONS2 = ["10", "20", "50", "100"];
+var emptyForm2 = () => ({
+  parentId: ROOT_PARENT_ID,
+  type: MENU_TYPE_MENU,
+  name: "",
+  identification: "",
+  permissionPointIds: [],
+  status: RESOURCE_STATUS_ENABLED
+});
+function MenuManager({
+  api,
+  title = "\u83DC\u5355\u7BA1\u7406",
+  pageSize: initialPageSize = "20",
+  toolbarExtra
+}) {
+  const [records, setRecords] = (0, import_react3.useState)([]);
+  const [permissionPoints, setPermissionPoints] = (0, import_react3.useState)([]);
+  const [loading, setLoading] = (0, import_react3.useState)(false);
+  const [error, setError] = (0, import_react3.useState)("");
+  const [pageSize, setPageSize] = (0, import_react3.useState)(initialPageSize);
+  const [pageToken, setPageToken] = (0, import_react3.useState)("");
+  const [hasPreviousPage, setHasPreviousPage] = (0, import_react3.useState)(false);
+  const [hasNextPage, setHasNextPage] = (0, import_react3.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, import_react3.useState)(false);
+  const [editing, setEditing] = (0, import_react3.useState)(null);
+  const [form, setForm] = (0, import_react3.useState)(emptyForm2);
+  const [saving, setSaving] = (0, import_react3.useState)(false);
+  const [deletingRow, setDeletingRow] = (0, import_react3.useState)(null);
+  const [deleting, setDeleting] = (0, import_react3.useState)(false);
+  const permissionNameMap = (0, import_react3.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    permissionPoints.forEach((p) => map.set(p.resourceId, p.name || p.identification));
+    return map;
+  }, [permissionPoints]);
+  const parentOptions = (0, import_react3.useMemo)(() => {
+    return records.filter((row) => !editing || row.resourceId !== editing.resourceId).map((row) => ({
+      value: row.resourceId,
+      label: `${row.name}\uFF08${MENU_TYPE_LABEL[row.type]}\uFF09`
+    }));
+  }, [records, editing]);
+  const loadList = (0, import_react3.useCallback)(
+    async (direction = "current", token = pageToken) => {
+      setLoading(true);
+      setError("");
+      try {
+        const result = await api.list({
+          pagination: {
+            pageToken: token,
+            pageSize,
+            pageDirection: direction
+          }
+        });
+        setRecords(result.records);
+        setPageToken(result.pageToken);
+        setHasPreviousPage(result.hasPreviousPage);
+        setHasNextPage(result.hasNextPage);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "\u52A0\u8F7D\u5931\u8D25");
+      } finally {
+        setLoading(false);
+      }
+    },
+    [api, pageSize, pageToken]
+  );
+  const loadPermissionPoints = (0, import_react3.useCallback)(async () => {
+    try {
+      const result = await api.listPermissionPoints({
+        pagination: { pageSize: "200", pageDirection: "current" }
+      });
+      setPermissionPoints(result.records);
+    } catch {
+    }
+  }, [api]);
+  (0, import_react3.useEffect)(() => {
+    void loadList("current", "");
+    void loadPermissionPoints();
+  }, [api, pageSize]);
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm2());
+    setDialogOpen(true);
+    void loadPermissionPoints();
+  };
+  const openEdit = (row) => {
+    setEditing(row);
+    setForm({
+      parentId: row.parentId || ROOT_PARENT_ID,
+      type: row.type,
+      name: row.name,
+      identification: row.identification,
+      permissionPointIds: [...row.permissionPointIds],
+      status: row.status
+    });
+    setDialogOpen(true);
+    void loadPermissionPoints();
+  };
+  const closeDialog = () => {
+    if (saving) return;
+    setDialogOpen(false);
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!form.name.trim()) {
+      setError("\u8BF7\u586B\u5199\u83DC\u5355\u540D\u79F0");
+      return;
+    }
+    setSaving(true);
+    setError("");
+    try {
+      if (editing) {
+        await api.update(editing.resourceId, form);
+      } else {
+        await api.create(form);
+      }
+      setDialogOpen(false);
+      await loadList("current", "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const askDelete = (row) => setDeletingRow(row);
+  const closeDeleteDialog = () => {
+    if (!deleting) setDeletingRow(null);
+  };
+  const confirmDelete = async () => {
+    if (!deletingRow) return;
+    setDeleting(true);
+    setError("");
+    try {
+      await api.remove(deletingRow.resourceId);
+      setDeletingRow(null);
+      await loadList("current", "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const togglePermission = (id) => {
+    setForm((prev) => {
+      const exists = prev.permissionPointIds.includes(id);
+      return {
+        ...prev,
+        permissionPointIds: exists ? prev.permissionPointIds.filter((x) => x !== id) : [...prev.permissionPointIds, id]
+      };
+    });
+  };
+  const renderPermissionLabels = (row) => {
+    if (row.permissionPointNames?.length) {
+      return row.permissionPointNames.join("\u3001");
+    }
+    if (!row.permissionPointIds.length) return "\u2014";
+    return row.permissionPointIds.map((id) => permissionNameMap.get(id) ?? id).join("\u3001");
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { style: styles2.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.toolbarRight, children: [
+        toolbarExtra,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.primaryBtn, onClick: openCreate, children: "\u65B0\u589E" })
+      ] })
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.error, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("table", { style: styles2.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: styles2.th, children: "\u83DC\u5355\u540D\u79F0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: styles2.th, children: "\u8BF7\u6C42\u5730\u5740" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: { ...styles2.th, width: 90 }, children: "\u7C7B\u578B" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: { ...styles2.th, width: 80 }, children: "\u53EF\u89C1" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: styles2.th, children: "\u6743\u9650\u6807\u8BC6" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("th", { style: { ...styles2.th, width: 140 }, children: "\u64CD\u4F5C" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) }) : records.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { colSpan: 6, style: styles2.empty, children: "\u6682\u65E0\u6570\u636E" }) }) : records.map((row) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: row.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: styles2.code, children: row.identification || "\u2014" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: MENU_TYPE_LABEL[row.type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "span",
+          {
+            style: {
+              ...styles2.badge,
+              background: row.status === RESOURCE_STATUS_ENABLED ? "#e8f7ef" : "#f4f4f5",
+              color: row.status === RESOURCE_STATUS_ENABLED ? "#067647" : "#667085"
+            },
+            children: row.status === RESOURCE_STATUS_ENABLED ? "\u663E\u793A" : "\u9690\u85CF"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("td", { style: styles2.td, children: renderPermissionLabels(row) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("td", { style: styles2.td, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.linkBtn, onClick: () => openEdit(row), children: "\u7F16\u8F91" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles2.linkBtn, color: "#d92d20" },
+              onClick: () => askDelete(row),
+              children: "\u5220\u9664"
+            }
+          )
+        ] })
+      ] }, row.resourceId)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.pagination, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.pageSize, children: [
+        "\u6BCF\u9875",
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => {
+              setPageToken("");
+              setPageSize(e.target.value);
+            },
+            style: styles2.select,
+            children: PAGE_SIZE_OPTIONS2.map((size) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: size, children: size }, size))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.pageBtns, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles2.secondaryBtn,
+            disabled: !hasPreviousPage || loading,
+            onClick: () => void loadList("previous"),
+            children: "\u4E0A\u4E00\u9875"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles2.secondaryBtn,
+            disabled: !hasNextPage || loading,
+            onClick: () => void loadList("next"),
+            children: "\u4E0B\u4E00\u9875"
+          }
+        )
+      ] })
+    ] }),
+    dialogOpen ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.mask, onClick: closeDialog, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: { ...styles2.dialog, maxWidth: 520 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: styles2.dialogTitle, children: editing ? "\u7F16\u8F91\u83DC\u5355" : "\u65B0\u589E\u83DC\u5355" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.iconBtn, onClick: closeDialog, "aria-label": "\u5173\u95ED", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("form", { style: styles2.form, onSubmit: (e) => void handleSubmit(e), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles2.label, children: "\u4E0A\u7EA7\u83DC\u5355" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                "select",
+                {
+                  style: styles2.input,
+                  value: form.parentId,
+                  onChange: (e) => setForm((prev) => ({ ...prev, parentId: e.target.value })),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: ROOT_PARENT_ID, children: "\u6839\u76EE\u5F55" }),
+                    parentOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { style: styles2.fieldset, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("legend", { style: styles2.label, children: "\u83DC\u5355\u7C7B\u578B" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.radioGroup, children: MENU_TYPE_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.radioItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "menu-type",
+                    checked: form.type === opt.value,
+                    onChange: () => setForm((prev) => ({
+                      ...prev,
+                      type: opt.value
+                    }))
+                  }
+                ),
+                opt.label
+              ] }, opt.value)) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles2.label, children: "\u83DC\u5355\u540D\u79F0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  style: styles2.input,
+                  value: form.name,
+                  onChange: (e) => setForm((prev) => ({ ...prev, name: e.target.value })),
+                  placeholder: "\u8BF7\u8F93\u5165\u83DC\u5355\u540D\u79F0",
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: styles2.label, children: "\u8BF7\u6C42\u5730\u5740" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "input",
+                {
+                  style: styles2.input,
+                  value: form.identification,
+                  onChange: (e) => setForm((prev) => ({ ...prev, identification: e.target.value })),
+                  placeholder: "\u5982 /system/user"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { style: styles2.fieldset, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("legend", { style: styles2.label, children: "\u6743\u9650\u6807\u8BC6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.multiSelect, children: permissionPoints.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.hint, children: "\u6682\u65E0\u6743\u9650\u70B9\uFF0C\u8BF7\u5148\u5728\u6743\u9650\u70B9\u7BA1\u7406\u4E2D\u65B0\u589E" }) : permissionPoints.map((p) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.checkItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: form.permissionPointIds.includes(p.resourceId),
+                    onChange: () => togglePermission(p.resourceId)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { children: [
+                  p.name,
+                  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("code", { style: { ...styles2.code, marginLeft: 6 }, children: p.identification })
+                ] })
+              ] }, p.resourceId)) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("fieldset", { style: styles2.fieldset, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("legend", { style: styles2.label, children: "\u72B6\u6001" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.radioGroup, children: MENU_VISIBILITY_OPTIONS.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { style: styles2.radioItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "menu-status",
+                    checked: form.status === opt.value,
+                    onChange: () => setForm((prev) => ({ ...prev, status: opt.value }))
+                  }
+                ),
+                opt.label
+              ] }, opt.value)) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: styles2.secondaryBtn, onClick: closeDialog, children: "\u53D6\u6D88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "submit", style: styles2.primaryBtn, disabled: saving, children: saving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58" })
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null,
+    deletingRow ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: styles2.mask, onClick: closeDeleteDialog, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        style: { ...styles2.dialog, maxWidth: 420 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h3", { style: styles2.dialogTitle, children: "\u786E\u8BA4\u5220\u9664" }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles2.iconBtn,
+                onClick: closeDeleteDialog,
+                "aria-label": "\u5173\u95ED",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.confirmBody, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { style: styles2.confirmText, children: [
+              "\u786E\u8BA4\u5220\u9664\u83DC\u5355\u300C",
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: deletingRow.name }),
+              "\u300D\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: styles2.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles2.secondaryBtn,
+                  onClick: closeDeleteDialog,
+                  disabled: deleting,
+                  children: "\u53D6\u6D88"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles2.dangerBtn,
+                  onClick: () => void confirmDelete(),
+                  disabled: deleting,
+                  children: deleting ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+var styles2 = {
+  root: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 16,
+    padding: 16,
+    color: "#101828",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif'
+  },
+  toolbar: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  title: { margin: 0, fontSize: 18, fontWeight: 600 },
+  toolbarRight: { display: "flex", alignItems: "center", gap: 8 },
+  error: {
+    padding: "10px 12px",
+    borderRadius: 8,
+    background: "#fef3f2",
+    color: "#b42318",
+    fontSize: 13
+  },
+  tableWrap: {
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: 10,
+    background: "#fff"
+  },
+  table: { width: "100%", borderCollapse: "collapse", minWidth: 820 },
+  th: {
+    textAlign: "left",
+    padding: "12px 14px",
+    fontSize: 13,
+    fontWeight: 600,
+    color: "#475467",
+    background: "#f9fafb",
+    borderBottom: "1px solid #eaecf0"
+  },
+  td: {
+    padding: "12px 14px",
+    fontSize: 14,
+    borderBottom: "1px solid #f2f4f7",
+    verticalAlign: "middle"
+  },
+  empty: { padding: 28, textAlign: "center", color: "#98a2b3", fontSize: 14 },
+  code: {
+    fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+    fontSize: 13,
+    background: "#f2f4f7",
+    padding: "2px 6px",
+    borderRadius: 4
+  },
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 999,
+    fontSize: 12,
+    fontWeight: 500
+  },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: 13
+  },
+  pagination: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12
+  },
+  pageSize: { display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "#475467" },
+  pageBtns: { display: "flex", gap: 8 },
+  primaryBtn: {
+    border: "none",
+    background: "#049BAD",
+    color: "#fff",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  secondaryBtn: {
+    border: "1px solid #d0d5dd",
+    background: "#fff",
+    color: "#344054",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  dangerBtn: {
+    border: "none",
+    background: "#d92d20",
+    color: "#fff",
+    borderRadius: 8,
+    padding: "8px 14px",
+    cursor: "pointer",
+    fontSize: 14
+  },
+  select: {
+    border: "1px solid #d0d5dd",
+    borderRadius: 6,
+    padding: "4px 8px",
+    fontSize: 13,
+    backgroundColor: "#ffffff",
+    color: "#101828"
+  },
+  mask: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(16, 24, 40, 0.45)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 1e3,
+    padding: 16
+  },
+  dialog: {
+    width: "100%",
+    maxWidth: 480,
+    background: "#fff",
+    borderRadius: 12,
+    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: 16, fontWeight: 600 },
+  iconBtn: {
+    border: "none",
+    background: "transparent",
+    fontSize: 22,
+    lineHeight: 1,
+    cursor: "pointer",
+    color: "#667085"
+  },
+  form: { display: "flex", flexDirection: "column", gap: 12, padding: 16 },
+  confirmBody: { display: "flex", flexDirection: "column", gap: 16, padding: 16 },
+  confirmText: { margin: 0, fontSize: 14, color: "#344054", lineHeight: 1.6 },
+  field: { display: "flex", flexDirection: "column", gap: 6 },
+  fieldset: {
+    margin: 0,
+    padding: 0,
+    border: "none",
+    display: "flex",
+    flexDirection: "column",
+    gap: 8
+  },
+  label: { fontSize: 13, color: "#344054", fontWeight: 500 },
+  input: {
+    border: "1px solid #d0d5dd",
+    borderRadius: 8,
+    padding: "8px 10px",
+    fontSize: 14,
+    outline: "none",
+    backgroundColor: "#ffffff",
+    color: "#101828",
+    boxSizing: "border-box",
+    width: "100%"
+  },
+  radioGroup: { display: "flex", flexWrap: "wrap", gap: 16 },
+  radioItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 6,
+    fontSize: 14,
+    color: "#344054",
+    cursor: "pointer"
+  },
+  multiSelect: {
+    maxHeight: 160,
+    overflow: "auto",
+    border: "1px solid #eaecf0",
+    borderRadius: 8,
+    padding: 8,
+    background: "#f9fafb"
+  },
+  checkItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    padding: "6px 4px",
+    fontSize: 13,
+    color: "#344054",
+    cursor: "pointer"
+  },
+  hint: { fontSize: 13, color: "#98a2b3", padding: 8 },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    paddingTop: 4
+  }
+};
+
+// src/react/SystemAdmin.tsx
+var import_react4 = require("react");
+
+// src/admin/menu.ts
+var SYSTEM_ADMIN_MENU = {
+  key: "system",
+  label: "\u7CFB\u7EDF\u7BA1\u7406",
+  children: [
+    { key: "menu", label: "\u83DC\u5355\u7BA1\u7406" },
+    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" }
+  ]
+};
+var SYSTEM_ADMIN_DEFAULT_KEY = "menu";
+
+// src/react/SystemAdmin.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function SystemAdmin({
+  menuApi,
+  resourceApi,
+  defaultActiveKey = SYSTEM_ADMIN_DEFAULT_KEY,
+  activeKey: controlledKey,
+  onActiveKeyChange,
+  title = SYSTEM_ADMIN_MENU.label,
+  toolbarExtra
+}) {
+  const [innerKey, setInnerKey] = (0, import_react4.useState)(defaultActiveKey);
+  const activeKey = controlledKey ?? innerKey;
+  const setActiveKey = (key) => {
+    if (controlledKey === void 0) setInnerKey(key);
+    onActiveKeyChange?.(key);
+  };
+  const activeLabel = (0, import_react4.useMemo)(
+    () => SYSTEM_ADMIN_MENU.children.find((item) => item.key === activeKey)?.label ?? "",
+    [activeKey]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("aside", { style: styles3.sidebar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.sidebarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("nav", { style: styles3.nav, children: SYSTEM_ADMIN_MENU.children.map((item) => {
+        const active = item.key === activeKey;
+        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "button",
+          {
+            type: "button",
+            style: {
+              ...styles3.navItem,
+              ...active ? styles3.navItemActive : null
+            },
+            onClick: () => setActiveKey(item.key),
+            children: item.label
+          },
+          item.key
+        );
+      }) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("main", { style: styles3.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.contentHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: styles3.breadcrumb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbParent, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbSep, children: "/" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: styles3.breadcrumbCurrent, children: activeLabel })
+        ] }),
+        toolbarExtra
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: styles3.panel, children: activeKey === "menu" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuManager, { api: menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ResourceManager, { api: resourceApi, title: "\u6743\u9650\u70B9\u7BA1\u7406" }) })
+    ] })
+  ] });
+}
+var styles3 = {
+  root: {
+    display: "flex",
+    minHeight: 560,
+    border: "1px solid #eaecf0",
+    borderRadius: 12,
+    overflow: "hidden",
+    background: "#fff",
+    fontFamily: '"PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif',
+    color: "#101828"
+  },
+  sidebar: {
+    width: 200,
+    flexShrink: 0,
+    borderRight: "1px solid #eaecf0",
+    background: "#f9fafb",
+    padding: "16px 12px"
+  },
+  sidebarTitle: {
+    fontSize: 14,
+    fontWeight: 600,
+    color: "#344054",
+    padding: "4px 10px 12px"
+  },
+  nav: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4
+  },
+  navItem: {
+    border: "none",
+    background: "transparent",
+    textAlign: "left",
+    padding: "10px 12px",
+    borderRadius: 8,
+    fontSize: 14,
+    color: "#475467",
+    cursor: "pointer"
+  },
+  navItemActive: {
+    background: "#e6f7f9",
+    color: "#049BAD",
+    fontWeight: 600
+  },
+  content: {
+    flex: 1,
+    minWidth: 0,
+    display: "flex",
+    flexDirection: "column",
+    background: "#fff"
+  },
+  contentHeader: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 12,
+    padding: "12px 16px",
+    borderBottom: "1px solid #f2f4f7"
+  },
+  breadcrumb: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    fontSize: 13
+  },
+  breadcrumbParent: { color: "#98a2b3" },
+  breadcrumbSep: { color: "#d0d5dd" },
+  breadcrumbCurrent: { color: "#344054", fontWeight: 600 },
+  panel: {
+    flex: 1,
+    minHeight: 0,
+    overflow: "auto"
+  }
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Can,
+  MENU_LIST_TYPE_PARAM,
+  MENU_TYPE_BUTTON,
+  MENU_TYPE_LABEL,
+  MENU_TYPE_MENU,
+  MENU_TYPE_OPTIONS,
+  MENU_TYPE_PAGE,
+  MENU_VISIBILITY_OPTIONS,
+  MenuManager,
   PermissionProvider,
   PermissionStore,
   RESOURCE_PRIVATE_OPTIONS,
@@ -1082,18 +2000,26 @@ var styles = {
   RESOURCE_STATUS_ENABLED,
   RESOURCE_STATUS_OPTIONS,
   RESOURCE_TYPE_API,
+  ROOT_PARENT_ID,
   ResourceManager,
+  SYSTEM_ADMIN_DEFAULT_KEY,
+  SYSTEM_ADMIN_MENU,
+  SystemAdmin,
   appendQueryParam,
   buildCreateBody,
+  buildCreateMenuBody,
   buildUpdateBody,
+  buildUpdateMenuBody,
   createAuthorizationResourceApi,
   createDefaultResourceRequest,
+  createMenuResourceApi,
   createPermissionStore,
   extractPagination,
   extractRecords,
   getAppClientId,
   getDeviceWorkerId,
   mapAuthorizationResource,
+  mapMenuResource,
   snowyflake,
   useHasPermission,
   useHasRole,