com-angel-authorization 1.0.17 → 1.0.20

package/dist/react/index.cjs

@@ -46,15 +46,18 @@ __export(react_exports, {
   SYSTEM_ADMIN_DEFAULT_KEY: () => SYSTEM_ADMIN_DEFAULT_KEY,
   SYSTEM_ADMIN_MENU: () => SYSTEM_ADMIN_MENU,
   SystemAdmin: () => SystemAdmin,
+  UserManager: () => UserManager,
   appendQueryParam: () => appendQueryParam,
   buildCreateBody: () => buildCreateBody,
   buildCreateMenuBody: () => buildCreateMenuBody,
   buildCreateRoleBody: () => buildCreateRoleBody,
+  buildCreateUserBody: () => buildCreateUserBody,
   buildPermissionTreeIndex: () => buildPermissionTreeIndex,
   buildSavePermissionsBody: () => buildSavePermissionsBody,
   buildUpdateBody: () => buildUpdateBody,
   buildUpdateMenuBody: () => buildUpdateMenuBody,
   buildUpdateRoleBody: () => buildUpdateRoleBody,
+  buildUpdateUserBody: () => buildUpdateUserBody,
   collectTreeResourceIds: () => collectTreeResourceIds,
   countCheckedDescendants: () => countCheckedDescendants,
   createAuthorizationResourceApi: () => createAuthorizationResourceApi,
@@ -62,6 +65,7 @@ __export(react_exports, {
   createMenuResourceApi: () => createMenuResourceApi,
   createPermissionStore: () => createPermissionStore,
   createSystemRoleApi: () => createSystemRoleApi,
+  createSystemUserApi: () => createSystemUserApi,
   extractPagination: () => extractPagination,
   extractRecords: () => extractRecords,
   getAppClientId: () => getAppClientId,
@@ -73,13 +77,17 @@ __export(react_exports, {
   mapMenuResource: () => mapMenuResource,
   mapPermissionTreeNode: () => mapPermissionTreeNode,
   mapRolePermissions: () => mapRolePermissions,
+  mapSystemGroupOption: () => mapSystemGroupOption,
   mapSystemRole: () => mapSystemRole,
+  mapSystemRoleOption: () => mapSystemRoleOption,
+  mapSystemUser: () => mapSystemUser,
   resolveMenuDepth: () => resolveMenuDepth,
   snowyflake: () => snowyflake,
   togglePermissionCheck: () => togglePermissionCheck,
   useHasPermission: () => useHasPermission,
   useHasRole: () => useHasRole,
-  usePermission: () => usePermission
+  usePermission: () => usePermission,
+  validateUsername: () => validateUsername
 });
 module.exports = __toCommonJS(react_exports);
 
@@ -2903,55 +2911,1038 @@ var styles3 = {
   }
 };
 
+// src/react/UserManager.tsx
+var import_react5 = require("react");
+
+// src/users/index.ts
+function asIdList(value) {
+  if (!Array.isArray(value)) return [];
+  return value.map((item) => {
+    if (item === void 0 || item === null || item === "") return "";
+    if (typeof item === "object") {
+      const row = item;
+      const id = row.groupId ?? row.roleId ?? row.id;
+      return id === void 0 || id === null ? "" : String(id);
+    }
+    return String(item);
+  }).filter(Boolean);
+}
+function asNameList(value) {
+  if (!Array.isArray(value)) return void 0;
+  const names = value.map((item) => {
+    if (item === void 0 || item === null) return "";
+    if (typeof item === "object") {
+      return String(item.name ?? "");
+    }
+    return String(item);
+  }).filter(Boolean);
+  return names.length ? names : void 0;
+}
+function mapSystemUser(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const userId = row.userId ?? row.user_id ?? row.id;
+  if (userId === void 0 || userId === null || userId === "") return null;
+  return {
+    userId: String(userId),
+    username: String(row.username ?? row.account ?? ""),
+    name: String(row.name ?? ""),
+    groupIds: asIdList(row.groupIds ?? row.group_ids ?? row.groups),
+    roleIds: asIdList(row.roleIds ?? row.role_ids ?? row.roles),
+    groupNames: asNameList(row.groupNames ?? row.group_names ?? row.groups),
+    roleNames: asNameList(row.roleNames ?? row.role_names ?? row.roles),
+    enabled: Boolean(row.enabled ?? row.enable ?? true)
+  };
+}
+function mapSystemGroupOption(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const groupId = row.groupId ?? row.group_id ?? row.id;
+  if (groupId === void 0 || groupId === null || groupId === "") return null;
+  return {
+    groupId: String(groupId),
+    name: String(row.name ?? "")
+  };
+}
+function mapSystemRoleOption(item) {
+  if (!item || typeof item !== "object") return null;
+  const row = item;
+  const roleId = row.roleId ?? row.role_id ?? row.id;
+  if (roleId === void 0 || roleId === null || roleId === "") return null;
+  return {
+    roleId: String(roleId),
+    name: String(row.name ?? "")
+  };
+}
+function validateUsername(username) {
+  const value = username.trim();
+  if (value.length < 6) return "\u8D26\u53F7\u957F\u5EA6\u4E0D\u5C11\u4E8E 6 \u4E2A\u5B57\u7B26";
+  if (!/[A-Za-z]/.test(value) || !/[0-9]/.test(value)) {
+    return "\u8D26\u53F7\u9700\u540C\u65F6\u5305\u542B\u5B57\u6BCD\u548C\u6570\u5B57";
+  }
+  return null;
+}
+function buildListUrl3(params) {
+  const parts = [];
+  appendQueryParam(parts, "keyword", params?.keyword ?? "");
+  if (params?.enabled !== void 0) {
+    appendQueryParam(parts, "enabled", String(params.enabled));
+  }
+  appendQueryParam(parts, "page-token", params?.pagination?.pageToken ?? "");
+  appendQueryParam(parts, "page-size", params?.pagination?.pageSize ?? "20");
+  appendQueryParam(parts, "page-direction", params?.pagination?.pageDirection ?? "current");
+  return parts.length ? `/system/users?${parts.join("&")}` : "/system/users";
+}
+function buildKeywordUrl(base, keyword) {
+  const parts = [];
+  appendQueryParam(parts, "keyword", keyword ?? "");
+  return parts.length ? `${base}?${parts.join("&")}` : base;
+}
+function buildCreateUserBody(values) {
+  return {
+    username: values.username.trim(),
+    name: values.name.trim(),
+    password: values.password,
+    groupIds: [...new Set(values.groupIds.map(String))],
+    roleIds: [...new Set(values.roleIds.map(String))],
+    enabled: Boolean(values.enabled)
+  };
+}
+function buildUpdateUserBody(values) {
+  const body = {
+    username: values.username.trim(),
+    name: values.name.trim(),
+    groupIds: [...new Set(values.groupIds.map(String))],
+    roleIds: [...new Set(values.roleIds.map(String))],
+    enabled: Boolean(values.enabled)
+  };
+  if (values.password.trim()) {
+    body.password = values.password;
+  }
+  return body;
+}
+function createSystemUserApi(request) {
+  return {
+    async list(params, signal) {
+      const json = await request({
+        method: "GET",
+        url: buildListUrl3(params),
+        signal
+      });
+      const records = extractRecords(json).map(mapSystemUser).filter((item) => item !== null);
+      return {
+        records,
+        ...extractPagination(json)
+      };
+    },
+    async create(values, signal) {
+      return request({
+        method: "POST",
+        url: "/system/users",
+        body: buildCreateUserBody(values),
+        signal
+      });
+    },
+    async update(userId, values, signal) {
+      return request({
+        method: "PATCH",
+        url: `/system/users/${encodeURIComponent(userId)}`,
+        body: buildUpdateUserBody(values),
+        signal
+      });
+    },
+    async remove(userId, signal) {
+      return request({
+        method: "DELETE",
+        url: `/system/users/${encodeURIComponent(userId)}`,
+        signal
+      });
+    },
+    async listGroups(params, signal) {
+      const json = await request({
+        method: "GET",
+        url: buildKeywordUrl("/system/groups", params?.keyword),
+        signal
+      });
+      return extractRecords(json).map(mapSystemGroupOption).filter((item) => item !== null);
+    },
+    async listRoleOptions(params, signal) {
+      const json = await request({
+        method: "GET",
+        url: buildKeywordUrl("/system/roles", params?.keyword),
+        signal
+      });
+      return extractRecords(json).map(mapSystemRoleOption).filter((item) => item !== null);
+    }
+  };
+}
+
+// src/react/UserManager.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var PAGE_SIZE_OPTIONS4 = ["10", "20", "50", "100"];
+var emptyForm4 = () => ({
+  username: "",
+  name: "",
+  password: "",
+  groupIds: [],
+  roleIds: [],
+  enabled: true
+});
+function UserManager({
+  api,
+  title = "\u7528\u6237\u7BA1\u7406",
+  pageSize: initialPageSize = "20",
+  toolbarExtra
+}) {
+  const [records, setRecords] = (0, import_react5.useState)([]);
+  const [loading, setLoading] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)("");
+  const [keyword, setKeyword] = (0, import_react5.useState)("");
+  const [keywordInput, setKeywordInput] = (0, import_react5.useState)("");
+  const [enabledFilter, setEnabledFilter] = (0, import_react5.useState)("all");
+  const [pageSize, setPageSize] = (0, import_react5.useState)(initialPageSize);
+  const [pageToken, setPageToken] = (0, import_react5.useState)("");
+  const [hasPreviousPage, setHasPreviousPage] = (0, import_react5.useState)(false);
+  const [hasNextPage, setHasNextPage] = (0, import_react5.useState)(false);
+  const [dialogOpen, setDialogOpen] = (0, import_react5.useState)(false);
+  const [editing, setEditing] = (0, import_react5.useState)(null);
+  const [form, setForm] = (0, import_react5.useState)(emptyForm4);
+  const [formError, setFormError] = (0, import_react5.useState)("");
+  const [saving, setSaving] = (0, import_react5.useState)(false);
+  const [deletingRow, setDeletingRow] = (0, import_react5.useState)(null);
+  const [deleting, setDeleting] = (0, import_react5.useState)(false);
+  const [groups, setGroups] = (0, import_react5.useState)([]);
+  const [roles, setRoles] = (0, import_react5.useState)([]);
+  const [rolesLoading, setRolesLoading] = (0, import_react5.useState)(false);
+  const [groupsOpen, setGroupsOpen] = (0, import_react5.useState)(false);
+  const [groupsLoading, setGroupsLoading] = (0, import_react5.useState)(false);
+  const [groupsLoaded, setGroupsLoaded] = (0, import_react5.useState)(false);
+  const enabledParam = enabledFilter === "all" ? void 0 : enabledFilter === "true";
+  const loadList = (0, import_react5.useCallback)(
+    async (direction = "current", token = pageToken) => {
+      setLoading(true);
+      setError("");
+      try {
+        const result = await api.list({
+          keyword,
+          enabled: enabledParam,
+          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, keyword, enabledParam, pageSize, pageToken]
+  );
+  (0, import_react5.useEffect)(() => {
+    void loadList("current", "");
+  }, [api, pageSize, keyword, enabledFilter]);
+  const loadRoles = (0, import_react5.useCallback)(async () => {
+    setRolesLoading(true);
+    try {
+      setRoles(await api.listRoleOptions());
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "\u52A0\u8F7D\u89D2\u8272\u5931\u8D25");
+    } finally {
+      setRolesLoading(false);
+    }
+  }, [api]);
+  const loadGroups = (0, import_react5.useCallback)(async () => {
+    if (groupsLoaded || groupsLoading) return;
+    setGroupsLoading(true);
+    try {
+      setGroups(await api.listGroups());
+      setGroupsLoaded(true);
+    } catch (err) {
+      setFormError(err instanceof Error ? err.message : "\u52A0\u8F7D\u90E8\u95E8\u5931\u8D25");
+    } finally {
+      setGroupsLoading(false);
+    }
+  }, [api, groupsLoaded, groupsLoading]);
+  const handleSearch = () => {
+    setPageToken("");
+    setKeyword(keywordInput.trim());
+  };
+  const resetGroupPanel = () => {
+    setGroupsOpen(false);
+    setGroups([]);
+    setGroupsLoaded(false);
+  };
+  const openCreate = () => {
+    setEditing(null);
+    setForm(emptyForm4());
+    setFormError("");
+    resetGroupPanel();
+    setDialogOpen(true);
+    void loadRoles();
+  };
+  const openEdit = (row) => {
+    setEditing(row);
+    setForm({
+      username: row.username,
+      name: row.name,
+      password: "",
+      groupIds: [...row.groupIds],
+      roleIds: [...row.roleIds],
+      enabled: row.enabled
+    });
+    setFormError("");
+    resetGroupPanel();
+    setDialogOpen(true);
+    void loadRoles();
+  };
+  const closeDialog = () => {
+    if (!saving) setDialogOpen(false);
+  };
+  const toggleGroupsPanel = () => {
+    setGroupsOpen((prev) => {
+      const next = !prev;
+      if (next) void loadGroups();
+      return next;
+    });
+  };
+  const toggleId = (field, id) => {
+    setForm((prev) => {
+      const exists = prev[field].includes(id);
+      return {
+        ...prev,
+        [field]: exists ? prev[field].filter((x) => x !== id) : [...prev[field], id]
+      };
+    });
+  };
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    const usernameError = validateUsername(form.username);
+    if (usernameError) {
+      setFormError(usernameError);
+      return;
+    }
+    if (!form.name.trim()) {
+      setFormError("\u8BF7\u586B\u5199\u7528\u6237\u540D");
+      return;
+    }
+    if (!editing && !form.password.trim()) {
+      setFormError("\u8BF7\u586B\u5199\u521D\u59CB\u5BC6\u7801");
+      return;
+    }
+    if (!form.groupIds.length) {
+      setFormError("\u8BF7\u9009\u62E9\u5F52\u5C5E\u90E8\u95E8");
+      return;
+    }
+    setSaving(true);
+    setFormError("");
+    setError("");
+    try {
+      if (editing) {
+        await api.update(editing.userId, form);
+      } else {
+        await api.create(form);
+      }
+      setDialogOpen(false);
+      await loadList("current", "");
+    } catch (err) {
+      setFormError(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.userId);
+      setDeletingRow(null);
+      await loadList("current", "");
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25");
+    } finally {
+      setDeleting(false);
+    }
+  };
+  const groupLabel = (row) => {
+    if (row.groupNames?.length) return row.groupNames.join("\u3001");
+    if (!row.groupIds.length) return "\u2014";
+    return row.groupIds.join("\u3001");
+  };
+  const roleLabel = (row) => {
+    if (row.roleNames?.length) return row.roleNames.join("\u3001");
+    if (!row.roleIds.length) return "\u2014";
+    const map = new Map(roles.map((r) => [r.roleId, r.name]));
+    return row.roleIds.map((id) => map.get(id) || id).join("\u3001");
+  };
+  const selectedGroupSummary = () => {
+    if (!form.groupIds.length) return "\u8BF7\u9009\u62E9\u5F52\u5C5E\u90E8\u95E8";
+    if (groupsLoaded) {
+      const map = new Map(groups.map((g) => [g.groupId, g.name]));
+      return form.groupIds.map((id) => map.get(id) || id).join("\u3001");
+    }
+    if (editing?.groupNames?.length && editing.groupIds.every((id) => form.groupIds.includes(id))) {
+      const map = new Map(editing.groupIds.map((id, i) => [id, editing.groupNames?.[i] || id]));
+      return form.groupIds.map((id) => map.get(id) || id).join("\u3001");
+    }
+    return `\u5DF2\u9009 ${form.groupIds.length} \u4E2A\u90E8\u95E8`;
+  };
+  (0, import_react5.useEffect)(() => {
+    void (async () => {
+      try {
+        setRoles(await api.listRoleOptions());
+      } catch {
+      }
+    })();
+  }, [api]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.toolbar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h2", { style: styles4.title, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.toolbarRight, children: [
+        toolbarExtra,
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: styles4.primaryBtn, onClick: openCreate, children: "\u65B0\u589E\u7528\u6237" })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.searchBar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "input",
+        {
+          style: { ...styles4.input, maxWidth: 240 },
+          value: keywordInput,
+          onChange: (e) => setKeywordInput(e.target.value),
+          placeholder: "\u641C\u7D22\u8D26\u53F7 / \u7528\u6237\u540D",
+          onKeyDown: (e) => {
+            if (e.key === "Enter") handleSearch();
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "select",
+        {
+          style: styles4.select,
+          value: enabledFilter,
+          onChange: (e) => {
+            setPageToken("");
+            setEnabledFilter(e.target.value);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "all", children: "\u5168\u90E8\u72B6\u6001" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "true", children: "\u5DF2\u542F\u7528" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: "false", children: "\u5DF2\u7981\u7528" })
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: styles4.secondaryBtn, onClick: handleSearch, children: "\u67E5\u8BE2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          type: "button",
+          style: styles4.secondaryBtn,
+          onClick: () => {
+            setKeywordInput("");
+            setKeyword("");
+            setEnabledFilter("all");
+            setPageToken("");
+          },
+          children: "\u91CD\u7F6E"
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.error, children: error }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.tableWrap, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("table", { style: styles4.table, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: styles4.th, children: "\u8D26\u53F7" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: styles4.th, children: "\u7528\u6237\u540D" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: styles4.th, children: "\u5F52\u5C5E\u90E8\u95E8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: styles4.th, children: "\u7528\u6237\u89D2\u8272" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: { ...styles4.th, width: 90 }, children: "\u72B6\u6001" }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { style: { ...styles4.th, width: 140 }, children: "\u64CD\u4F5C" })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: 6, style: styles4.empty, children: "\u52A0\u8F7D\u4E2D\u2026" }) }) : records.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { colSpan: 6, style: styles4.empty, children: "\u6682\u65E0\u6570\u636E" }) }) : records.map((row) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { style: styles4.td, children: row.username }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { style: styles4.td, children: row.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { style: styles4.td, children: groupLabel(row) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { style: styles4.td, children: roleLabel(row) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("td", { style: styles4.td, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "span",
+          {
+            style: {
+              ...styles4.badge,
+              ...row.enabled ? styles4.badgeOn : styles4.badgeOff
+            },
+            children: row.enabled ? "\u542F\u7528" : "\u7981\u7528"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("td", { style: styles4.td, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: styles4.linkBtn, onClick: () => openEdit(row), children: "\u7F16\u8F91" }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "button",
+            {
+              type: "button",
+              style: { ...styles4.linkBtn, color: "#d92d20" },
+              onClick: () => askDelete(row),
+              children: "\u5220\u9664"
+            }
+          )
+        ] })
+      ] }, row.userId)) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.pagination, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.pageSize, children: [
+        "\u6BCF\u9875",
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "select",
+          {
+            value: pageSize,
+            onChange: (e) => {
+              setPageToken("");
+              setPageSize(e.target.value);
+            },
+            style: styles4.select,
+            children: PAGE_SIZE_OPTIONS4.map((size) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: size, children: size }, size))
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.pageBtns, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles4.secondaryBtn,
+            disabled: !hasPreviousPage || loading,
+            onClick: () => void loadList("previous"),
+            children: "\u4E0A\u4E00\u9875"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "button",
+          {
+            type: "button",
+            style: styles4.secondaryBtn,
+            disabled: !hasNextPage || loading,
+            onClick: () => void loadList("next"),
+            children: "\u4E0B\u4E00\u9875"
+          }
+        )
+      ] })
+    ] }),
+    dialogOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.mask, onClick: closeDialog, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: { ...styles4.dialog, maxWidth: 560 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: styles4.dialogTitle, children: editing ? "\u7F16\u8F91\u7528\u6237" : "\u65B0\u589E\u7528\u6237" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: styles4.iconBtn, onClick: closeDialog, "aria-label": "\u5173\u95ED", children: "\xD7" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("form", { style: styles4.form, onSubmit: (e) => void handleSubmit(e), children: [
+            formError ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.error, children: formError }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.label, children: "\u8D26\u53F7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  style: styles4.input,
+                  value: form.username,
+                  onChange: (e) => setForm((prev) => ({ ...prev, username: e.target.value })),
+                  placeholder: "\u81F3\u5C116\u4F4D\uFF0C\u9700\u542B\u5B57\u6BCD\u548C\u6570\u5B57",
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.label, children: "\u7528\u6237\u540D" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  style: styles4.input,
+                  value: form.name,
+                  onChange: (e) => setForm((prev) => ({ ...prev, name: e.target.value })),
+                  placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D",
+                  required: true
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.field, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.label, children: editing ? "\u5BC6\u7801\uFF08\u7559\u7A7A\u5219\u4E0D\u4FEE\u6539\uFF09" : "\u521D\u59CB\u5BC6\u7801" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "input",
+                {
+                  style: styles4.input,
+                  type: "password",
+                  value: form.password,
+                  onChange: (e) => setForm((prev) => ({ ...prev, password: e.target.value })),
+                  placeholder: editing ? "\u7559\u7A7A\u8868\u793A\u4E0D\u4FEE\u6539\u5BC6\u7801" : "\u8BF7\u8F93\u5165\u521D\u59CB\u5BC6\u7801",
+                  required: !editing,
+                  autoComplete: "new-password"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("fieldset", { style: styles4.fieldset, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("legend", { style: styles4.label, children: [
+                "\u5F52\u5C5E\u90E8\u95E8 ",
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.required, children: "*" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                "button",
+                {
+                  type: "button",
+                  style: styles4.selectTrigger,
+                  onClick: toggleGroupsPanel,
+                  "aria-expanded": groupsOpen,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                      "span",
+                      {
+                        style: {
+                          ...styles4.selectTriggerText,
+                          ...form.groupIds.length ? null : styles4.selectPlaceholder
+                        },
+                        children: selectedGroupSummary()
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.selectChevron, children: groupsOpen ? "\u25B2" : "\u25BC" })
+                  ]
+                }
+              ),
+              groupsOpen ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.multiSelect, children: groupsLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.hint, children: "\u52A0\u8F7D\u4E2D\u2026" }) : groups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.hint, children: "\u6682\u65E0\u90E8\u95E8\u6570\u636E" }) : groups.map((g) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.checkItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    style: styles4.control,
+                    checked: form.groupIds.includes(g.groupId),
+                    onChange: () => toggleId("groupIds", g.groupId)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: g.name || g.groupId })
+              ] }, g.groupId)) }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("fieldset", { style: styles4.fieldset, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("legend", { style: styles4.label, children: "\u7528\u6237\u89D2\u8272" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.multiSelect, children: rolesLoading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.hint, children: "\u52A0\u8F7D\u4E2D\u2026" }) : roles.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.hint, children: "\u6682\u65E0\u89D2\u8272\u6570\u636E" }) : roles.map((r) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("label", { style: styles4.checkItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    style: styles4.control,
+                    checked: form.roleIds.includes(r.roleId),
+                    onChange: () => toggleId("roleIds", r.roleId)
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: r.name || r.roleId })
+              ] }, r.roleId)) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.switchRow, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.label, children: "\u662F\u5426\u542F\u7528" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "switch",
+                  "aria-checked": form.enabled,
+                  style: {
+                    ...styles4.switchTrack,
+                    ...form.enabled ? styles4.switchTrackOn : null
+                  },
+                  onClick: () => setForm((prev) => ({ ...prev, enabled: !prev.enabled })),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                    "span",
+                    {
+                      style: {
+                        ...styles4.switchThumb,
+                        ...form.enabled ? styles4.switchThumbOn : null
+                      }
+                    }
+                  )
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "button", style: styles4.secondaryBtn, onClick: closeDialog, children: "\u53D6\u6D88" }),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { type: "submit", style: styles4.primaryBtn, disabled: saving, children: saving ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58" })
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null,
+    deletingRow ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.mask, onClick: closeDeleteDialog, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        style: { ...styles4.dialog, maxWidth: 420 },
+        onClick: (e) => e.stopPropagation(),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.dialogHeader, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h3", { style: styles4.dialogTitle, children: "\u786E\u8BA4\u5220\u9664" }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "button",
+              {
+                type: "button",
+                style: styles4.iconBtn,
+                onClick: closeDeleteDialog,
+                "aria-label": "\u5173\u95ED",
+                children: "\xD7"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.confirmBody, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { style: styles4.confirmText, children: [
+              "\u786E\u8BA4\u5220\u9664\u7528\u6237\u300C",
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("strong", { children: deletingRow.name }),
+              "\u300D\uFF08",
+              deletingRow.username,
+              "\uFF09\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.dialogFooter, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles4.secondaryBtn,
+                  onClick: closeDeleteDialog,
+                  disabled: deleting,
+                  children: "\u53D6\u6D88"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                "button",
+                {
+                  type: "button",
+                  style: styles4.dangerBtn,
+                  onClick: () => void confirmDelete(),
+                  disabled: deleting,
+                  children: deleting ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                }
+              )
+            ] })
+          ] })
+        ]
+      }
+    ) }) : null
+  ] });
+}
+var styles4 = {
+  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 },
+  searchBar: { display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" },
+  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: 720 },
+  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 },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: 13
+  },
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: 999,
+    fontSize: 12,
+    fontWeight: 500
+  },
+  badgeOn: { background: "#ecfdf3", color: "#027a48" },
+  badgeOff: { background: "#f2f4f7", color: "#667085" },
+  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: {
+    border: "1px solid #eaecf0",
+    borderRadius: 8,
+    margin: 0,
+    padding: "10px 12px 12px"
+  },
+  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%"
+  },
+  multiSelect: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 6,
+    maxHeight: 160,
+    overflow: "auto",
+    marginTop: 8
+  },
+  selectTrigger: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: 8,
+    width: "100%",
+    border: "1px solid #d0d5dd",
+    borderRadius: 8,
+    padding: "8px 10px",
+    background: "#fff",
+    cursor: "pointer",
+    fontSize: 14,
+    color: "#101828",
+    boxSizing: "border-box",
+    textAlign: "left"
+  },
+  selectTriggerText: {
+    flex: 1,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  selectPlaceholder: { color: "#98a2b3" },
+  selectChevron: { color: "#667085", fontSize: 10, flexShrink: 0 },
+  required: { color: "#d92d20", marginLeft: 2 },
+  checkItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: 8,
+    fontSize: 14,
+    color: "#101828",
+    cursor: "pointer"
+  },
+  control: {
+    width: 16,
+    height: 16,
+    accentColor: "#049BAD",
+    cursor: "pointer",
+    colorScheme: "light",
+    backgroundColor: "#ffffff"
+  },
+  hint: { fontSize: 13, color: "#98a2b3", padding: "4px 0" },
+  switchRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
+    gap: 12
+  },
+  switchTrack: {
+    width: 44,
+    height: 24,
+    borderRadius: 999,
+    border: "none",
+    padding: 2,
+    background: "#d0d5dd",
+    cursor: "pointer",
+    position: "relative",
+    transition: "background 0.15s ease"
+  },
+  switchTrackOn: { background: "#049BAD" },
+  switchThumb: {
+    display: "block",
+    width: 20,
+    height: 20,
+    borderRadius: "50%",
+    background: "#fff",
+    boxShadow: "0 1px 2px rgba(16,24,40,0.2)",
+    transform: "translateX(0)",
+    transition: "transform 0.15s ease"
+  },
+  switchThumbOn: { transform: "translateX(20px)" },
+  dialogFooter: {
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    paddingTop: 4
+  }
+};
+
 // src/react/SystemAdmin.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/admin/menu.ts
 var SYSTEM_ADMIN_MENU = {
   key: "system",
   label: "\u7CFB\u7EDF\u7BA1\u7406",
   children: [
+    { key: "user", label: "\u7528\u6237\u7BA1\u7406" },
+    { key: "role", label: "\u89D2\u8272\u7BA1\u7406" },
     { key: "menu", label: "\u83DC\u5355\u7BA1\u7406" },
-    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" },
-    { key: "role", label: "\u89D2\u8272\u7BA1\u7406" }
+    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" }
   ]
 };
 var SYSTEM_ADMIN_DEFAULT_KEY = "menu";
 
 // src/react/SystemAdmin.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 function SystemAdmin({
   menuApi,
   resourceApi,
   roleApi,
+  userApi,
   defaultActiveKey = SYSTEM_ADMIN_DEFAULT_KEY,
   activeKey: controlledKey,
   onActiveKeyChange,
   title = SYSTEM_ADMIN_MENU.label,
   toolbarExtra
 }) {
-  const [innerKey, setInnerKey] = (0, import_react5.useState)(defaultActiveKey);
+  const [innerKey, setInnerKey] = (0, import_react6.useState)(defaultActiveKey);
   const activeKey = controlledKey ?? innerKey;
   const setActiveKey = (key) => {
     if (controlledKey === void 0) setInnerKey(key);
     onActiveKeyChange?.(key);
   };
-  const activeLabel = (0, import_react5.useMemo)(
+  const activeLabel = (0, import_react6.useMemo)(
     () => SYSTEM_ADMIN_MENU.children.find((item) => item.key === activeKey)?.label ?? "",
     [activeKey]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.root, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("aside", { style: styles4.sidebar, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.sidebarTitle, children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("nav", { style: styles4.nav, children: SYSTEM_ADMIN_MENU.children.map((item) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles5.root, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("aside", { style: styles5.sidebar, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles5.sidebarTitle, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("nav", { style: styles5.nav, children: SYSTEM_ADMIN_MENU.children.map((item) => {
         const active = item.key === activeKey;
-        return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             style: {
-              ...styles4.navItem,
-              ...active ? styles4.navItemActive : null
+              ...styles5.navItem,
+              ...active ? styles5.navItemActive : null
             },
             onClick: () => setActiveKey(item.key),
             children: item.label
@@ -2960,20 +3951,20 @@ function SystemAdmin({
         );
       }) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("main", { style: styles4.content, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.contentHeader, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: styles4.breadcrumb, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbParent, children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbSep, children: "/" }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: styles4.breadcrumbCurrent, children: activeLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("main", { style: styles5.content, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles5.contentHeader, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: styles5.breadcrumb, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles5.breadcrumbParent, children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles5.breadcrumbSep, children: "/" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { style: styles5.breadcrumbCurrent, children: activeLabel })
         ] }),
         toolbarExtra
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.panel, children: activeKey === "menu" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuManager, { api: menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey === "resource" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ResourceManager, { api: resourceApi, title: "\u6743\u9650\u70B9\u7BA1\u7406" }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RoleManager, { api: roleApi, title: "\u89D2\u8272\u7BA1\u7406" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { style: styles5.panel, children: activeKey === "menu" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuManager, { api: menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey === "resource" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ResourceManager, { api: resourceApi, title: "\u6743\u9650\u70B9\u7BA1\u7406" }) : activeKey === "role" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(RoleManager, { api: roleApi, title: "\u89D2\u8272\u7BA1\u7406" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(UserManager, { api: userApi, title: "\u7528\u6237\u7BA1\u7406" }) })
     ] })
   ] });
 }
-var styles4 = {
+var styles5 = {
   root: {
     display: "flex",
     minHeight: 560,
@@ -3074,15 +4065,18 @@ var styles4 = {
   SYSTEM_ADMIN_DEFAULT_KEY,
   SYSTEM_ADMIN_MENU,
   SystemAdmin,
+  UserManager,
   appendQueryParam,
   buildCreateBody,
   buildCreateMenuBody,
   buildCreateRoleBody,
+  buildCreateUserBody,
   buildPermissionTreeIndex,
   buildSavePermissionsBody,
   buildUpdateBody,
   buildUpdateMenuBody,
   buildUpdateRoleBody,
+  buildUpdateUserBody,
   collectTreeResourceIds,
   countCheckedDescendants,
   createAuthorizationResourceApi,
@@ -3090,6 +4084,7 @@ var styles4 = {
   createMenuResourceApi,
   createPermissionStore,
   createSystemRoleApi,
+  createSystemUserApi,
   extractPagination,
   extractRecords,
   getAppClientId,
@@ -3101,12 +4096,16 @@ var styles4 = {
   mapMenuResource,
   mapPermissionTreeNode,
   mapRolePermissions,
+  mapSystemGroupOption,
   mapSystemRole,
+  mapSystemRoleOption,
+  mapSystemUser,
   resolveMenuDepth,
   snowyflake,
   togglePermissionCheck,
   useHasPermission,
   useHasRole,
-  usePermission
+  usePermission,
+  validateUsername
 });
 //# sourceMappingURL=index.cjs.map