com-angel-authorization 1.0.17 → 1.0.18

package/dist/vue/index.js

@@ -498,7 +498,7 @@ function toStringArray(value) {
     }).filter(Boolean);
   }
   if (typeof value === "string" && value.trim()) {
-    return value.split(",").map((s5) => s5.trim()).filter(Boolean);
+    return value.split(",").map((s6) => s6.trim()).filter(Boolean);
   }
   return [];
 }
@@ -3375,8 +3375,1056 @@ var RoleManager = defineComponent4({
   }
 });
 
+// src/vue/UserManager.ts
+import {
+  defineComponent as defineComponent5,
+  h as h4,
+  onMounted as onMounted4,
+  reactive as reactive4,
+  ref as ref4,
+  watch as watch4
+} from "vue";
+
+// 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/vue/UserManager.ts
+var PAGE_SIZE_OPTIONS4 = ["10", "20", "50", "100"];
+function emptyForm4() {
+  return {
+    username: "",
+    name: "",
+    password: "",
+    groupIds: [],
+    roleIds: [],
+    enabled: true
+  };
+}
+var s4 = {
+  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" },
+  searchBar: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    flexWrap: "wrap"
+  },
+  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: "720px" },
+  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"
+  },
+  linkBtn: {
+    border: "none",
+    background: "transparent",
+    color: "#049BAD",
+    cursor: "pointer",
+    padding: "0 8px 0 0",
+    fontSize: "13px"
+  },
+  badge: {
+    display: "inline-block",
+    padding: "2px 8px",
+    borderRadius: "999px",
+    fontSize: "12px",
+    fontWeight: "500"
+  },
+  badgeOn: { background: "#ecfdf3", color: "#027a48" },
+  badgeOff: { background: "#f2f4f7", color: "#667085" },
+  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: {
+    border: "1px solid #eaecf0",
+    borderRadius: "8px",
+    margin: "0",
+    padding: "10px 12px 12px"
+  },
+  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%"
+  },
+  multiSelect: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "6px",
+    maxHeight: "160px",
+    overflow: "auto"
+  },
+  checkItem: {
+    display: "flex",
+    alignItems: "center",
+    gap: "8px",
+    fontSize: "14px",
+    color: "#101828",
+    cursor: "pointer"
+  },
+  control: {
+    width: "16px",
+    height: "16px",
+    accentColor: "#049BAD",
+    cursor: "pointer",
+    colorScheme: "light",
+    backgroundColor: "#ffffff"
+  },
+  hint: { fontSize: "13px", color: "#98a2b3", padding: "4px 0" },
+  switchRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "12px"
+  },
+  switchTrack: {
+    width: "44px",
+    height: "24px",
+    borderRadius: "999px",
+    border: "none",
+    padding: "2px",
+    background: "#d0d5dd",
+    cursor: "pointer",
+    position: "relative",
+    transition: "background 0.15s ease"
+  },
+  switchTrackOn: { background: "#049BAD" },
+  switchThumb: {
+    display: "block",
+    width: "20px",
+    height: "20px",
+    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: "8px",
+    paddingTop: "4px"
+  }
+};
+var UserManager = defineComponent5({
+  name: "UserManager",
+  props: {
+    api: {
+      type: Object,
+      required: true
+    },
+    title: {
+      type: String,
+      default: "\u7528\u6237\u7BA1\u7406"
+    },
+    pageSize: {
+      type: String,
+      default: "20"
+    }
+  },
+  setup(props, { slots }) {
+    const records = ref4([]);
+    const loading = ref4(false);
+    const error = ref4("");
+    const keyword = ref4("");
+    const keywordInput = ref4("");
+    const enabledFilter = ref4("all");
+    const pageSize = ref4(props.pageSize);
+    const pageToken = ref4("");
+    const hasPreviousPage = ref4(false);
+    const hasNextPage = ref4(false);
+    const dialogOpen = ref4(false);
+    const editing = ref4(null);
+    const form = reactive4(emptyForm4());
+    const formError = ref4("");
+    const saving = ref4(false);
+    const deletingRow = ref4(null);
+    const deleting = ref4(false);
+    const groups = ref4([]);
+    const roles = ref4([]);
+    const optionsLoading = ref4(false);
+    function enabledParam() {
+      if (enabledFilter.value === "all") return void 0;
+      return enabledFilter.value === "true";
+    }
+    async function loadList(direction = "current", token = pageToken.value) {
+      loading.value = true;
+      error.value = "";
+      try {
+        const result = await props.api.list({
+          keyword: keyword.value,
+          enabled: enabledParam(),
+          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 loadOptions() {
+      optionsLoading.value = true;
+      try {
+        const [groupList, roleList] = await Promise.all([
+          props.api.listGroups(),
+          props.api.listRoleOptions()
+        ]);
+        groups.value = groupList;
+        roles.value = roleList;
+      } catch (err) {
+        formError.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u90E8\u95E8/\u89D2\u8272\u5931\u8D25";
+      } finally {
+        optionsLoading.value = false;
+      }
+    }
+    function handleSearch() {
+      pageToken.value = "";
+      keyword.value = keywordInput.value.trim();
+    }
+    function handleReset() {
+      keywordInput.value = "";
+      keyword.value = "";
+      enabledFilter.value = "all";
+      pageToken.value = "";
+    }
+    function openCreate() {
+      editing.value = null;
+      Object.assign(form, emptyForm4());
+      formError.value = "";
+      dialogOpen.value = true;
+      void loadOptions();
+    }
+    function openEdit(row) {
+      editing.value = row;
+      Object.assign(form, {
+        username: row.username,
+        name: row.name,
+        password: "",
+        groupIds: [...row.groupIds],
+        roleIds: [...row.roleIds],
+        enabled: row.enabled
+      });
+      formError.value = "";
+      dialogOpen.value = true;
+      void loadOptions();
+    }
+    function closeDialog() {
+      if (!saving.value) dialogOpen.value = false;
+    }
+    function toggleId(field, id) {
+      const exists = form[field].includes(id);
+      form[field] = exists ? form[field].filter((x) => x !== id) : [...form[field], id];
+    }
+    async function handleSubmit(event) {
+      event.preventDefault();
+      const usernameError = validateUsername(form.username);
+      if (usernameError) {
+        formError.value = usernameError;
+        return;
+      }
+      if (!form.name.trim()) {
+        formError.value = "\u8BF7\u586B\u5199\u7528\u6237\u540D";
+        return;
+      }
+      if (!editing.value && !form.password.trim()) {
+        formError.value = "\u8BF7\u586B\u5199\u521D\u59CB\u5BC6\u7801";
+        return;
+      }
+      saving.value = true;
+      formError.value = "";
+      error.value = "";
+      try {
+        if (editing.value) {
+          await props.api.update(editing.value.userId, { ...form });
+        } else {
+          await props.api.create({ ...form });
+        }
+        dialogOpen.value = false;
+        await loadList("current", "");
+      } catch (err) {
+        formError.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.userId);
+        deletingRow.value = null;
+        await loadList("current", "");
+      } catch (err) {
+        error.value = err instanceof Error ? err.message : "\u5220\u9664\u5931\u8D25";
+      } finally {
+        deleting.value = false;
+      }
+    }
+    function groupLabel(row) {
+      if (row.groupNames?.length) return row.groupNames.join("\u3001");
+      if (!row.groupIds.length) return "\u2014";
+      const map = new Map(groups.value.map((g) => [g.groupId, g.name]));
+      return row.groupIds.map((id) => map.get(id) || id).join("\u3001");
+    }
+    function roleLabel(row) {
+      if (row.roleNames?.length) return row.roleNames.join("\u3001");
+      if (!row.roleIds.length) return "\u2014";
+      const map = new Map(roles.value.map((r) => [r.roleId, r.name]));
+      return row.roleIds.map((id) => map.get(id) || id).join("\u3001");
+    }
+    onMounted4(() => {
+      void loadList("current", "");
+      void (async () => {
+        try {
+          const [groupList, roleList] = await Promise.all([
+            props.api.listGroups(),
+            props.api.listRoleOptions()
+          ]);
+          groups.value = groupList;
+          roles.value = roleList;
+        } catch {
+        }
+      })();
+    });
+    watch4(
+      () => [
+        props.api,
+        pageSize.value,
+        keyword.value,
+        enabledFilter.value
+      ],
+      () => {
+        pageToken.value = "";
+        void loadList("current", "");
+      }
+    );
+    return () => h4("div", { style: s4.root }, [
+      h4("div", { style: s4.toolbar }, [
+        h4("h2", { style: s4.title }, props.title),
+        h4("div", { style: s4.toolbarRight }, [
+          slots.toolbarExtra?.(),
+          h4(
+            "button",
+            { type: "button", style: s4.primaryBtn, onClick: openCreate },
+            "\u65B0\u589E\u7528\u6237"
+          )
+        ])
+      ]),
+      h4("div", { style: s4.searchBar }, [
+        h4("input", {
+          style: { ...s4.input, maxWidth: "240px" },
+          value: keywordInput.value,
+          placeholder: "\u641C\u7D22\u8D26\u53F7 / \u7528\u6237\u540D",
+          onInput: (e) => {
+            keywordInput.value = e.target.value;
+          },
+          onKeydown: (e) => {
+            if (e.key === "Enter") handleSearch();
+          }
+        }),
+        h4(
+          "select",
+          {
+            style: s4.select,
+            value: enabledFilter.value,
+            onChange: (e) => {
+              pageToken.value = "";
+              enabledFilter.value = e.target.value;
+            }
+          },
+          [
+            h4("option", { value: "all" }, "\u5168\u90E8\u72B6\u6001"),
+            h4("option", { value: "true" }, "\u5DF2\u542F\u7528"),
+            h4("option", { value: "false" }, "\u5DF2\u7981\u7528")
+          ]
+        ),
+        h4(
+          "button",
+          { type: "button", style: s4.secondaryBtn, onClick: handleSearch },
+          "\u67E5\u8BE2"
+        ),
+        h4(
+          "button",
+          { type: "button", style: s4.secondaryBtn, onClick: handleReset },
+          "\u91CD\u7F6E"
+        )
+      ]),
+      error.value ? h4("div", { style: s4.error }, error.value) : null,
+      h4("div", { style: s4.tableWrap }, [
+        h4("table", { style: s4.table }, [
+          h4("thead", [
+            h4("tr", [
+              h4("th", { style: s4.th }, "\u8D26\u53F7"),
+              h4("th", { style: s4.th }, "\u7528\u6237\u540D"),
+              h4("th", { style: s4.th }, "\u5F52\u5C5E\u90E8\u95E8"),
+              h4("th", { style: s4.th }, "\u7528\u6237\u89D2\u8272"),
+              h4("th", { style: { ...s4.th, width: "90px" } }, "\u72B6\u6001"),
+              h4("th", { style: { ...s4.th, width: "140px" } }, "\u64CD\u4F5C")
+            ])
+          ]),
+          h4(
+            "tbody",
+            loading.value ? [
+              h4("tr", [
+                h4("td", { colspan: 6, style: s4.empty }, "\u52A0\u8F7D\u4E2D\u2026")
+              ])
+            ] : records.value.length === 0 ? [
+              h4("tr", [
+                h4("td", { colspan: 6, style: s4.empty }, "\u6682\u65E0\u6570\u636E")
+              ])
+            ] : records.value.map(
+              (row) => h4("tr", { key: row.userId }, [
+                h4("td", { style: s4.td }, row.username),
+                h4("td", { style: s4.td }, row.name),
+                h4("td", { style: s4.td }, groupLabel(row)),
+                h4("td", { style: s4.td }, roleLabel(row)),
+                h4("td", { style: s4.td }, [
+                  h4(
+                    "span",
+                    {
+                      style: {
+                        ...s4.badge,
+                        ...row.enabled ? s4.badgeOn : s4.badgeOff
+                      }
+                    },
+                    row.enabled ? "\u542F\u7528" : "\u7981\u7528"
+                  )
+                ]),
+                h4("td", { style: s4.td }, [
+                  h4(
+                    "button",
+                    {
+                      type: "button",
+                      style: s4.linkBtn,
+                      onClick: () => openEdit(row)
+                    },
+                    "\u7F16\u8F91"
+                  ),
+                  h4(
+                    "button",
+                    {
+                      type: "button",
+                      style: { ...s4.linkBtn, color: "#d92d20" },
+                      onClick: () => askDelete(row)
+                    },
+                    "\u5220\u9664"
+                  )
+                ])
+              ])
+            )
+          )
+        ])
+      ]),
+      h4("div", { style: s4.pagination }, [
+        h4("label", { style: s4.pageSize }, [
+          "\u6BCF\u9875",
+          h4(
+            "select",
+            {
+              style: s4.select,
+              value: pageSize.value,
+              onChange: (e) => {
+                pageSize.value = e.target.value;
+              }
+            },
+            PAGE_SIZE_OPTIONS4.map(
+              (size) => h4("option", { key: size, value: size }, size)
+            )
+          )
+        ]),
+        h4("div", { style: s4.pageBtns }, [
+          h4(
+            "button",
+            {
+              type: "button",
+              style: s4.secondaryBtn,
+              disabled: !hasPreviousPage.value || loading.value,
+              onClick: () => void loadList("previous")
+            },
+            "\u4E0A\u4E00\u9875"
+          ),
+          h4(
+            "button",
+            {
+              type: "button",
+              style: s4.secondaryBtn,
+              disabled: !hasNextPage.value || loading.value,
+              onClick: () => void loadList("next")
+            },
+            "\u4E0B\u4E00\u9875"
+          )
+        ])
+      ]),
+      dialogOpen.value ? h4("div", { style: s4.mask, onClick: closeDialog }, [
+        h4(
+          "div",
+          {
+            style: { ...s4.dialog, maxWidth: "560px" },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation()
+          },
+          [
+            h4("div", { style: s4.dialogHeader }, [
+              h4(
+                "h3",
+                { style: s4.dialogTitle },
+                editing.value ? "\u7F16\u8F91\u7528\u6237" : "\u65B0\u589E\u7528\u6237"
+              ),
+              h4(
+                "button",
+                {
+                  type: "button",
+                  style: s4.iconBtn,
+                  "aria-label": "\u5173\u95ED",
+                  onClick: closeDialog
+                },
+                "\xD7"
+              )
+            ]),
+            h4(
+              "form",
+              {
+                style: s4.form,
+                onSubmit: (e) => void handleSubmit(e)
+              },
+              [
+                formError.value ? h4("div", { style: s4.error }, formError.value) : null,
+                h4("label", { style: s4.field }, [
+                  h4("span", { style: s4.label }, "\u8D26\u53F7"),
+                  h4("input", {
+                    style: s4.input,
+                    value: form.username,
+                    placeholder: "\u81F3\u5C116\u4F4D\uFF0C\u9700\u542B\u5B57\u6BCD\u548C\u6570\u5B57",
+                    required: true,
+                    onInput: (e) => {
+                      form.username = e.target.value;
+                    }
+                  })
+                ]),
+                h4("label", { style: s4.field }, [
+                  h4("span", { style: s4.label }, "\u7528\u6237\u540D"),
+                  h4("input", {
+                    style: s4.input,
+                    value: form.name,
+                    placeholder: "\u8BF7\u8F93\u5165\u7528\u6237\u540D",
+                    required: true,
+                    onInput: (e) => {
+                      form.name = e.target.value;
+                    }
+                  })
+                ]),
+                h4("label", { style: s4.field }, [
+                  h4(
+                    "span",
+                    { style: s4.label },
+                    editing.value ? "\u5BC6\u7801\uFF08\u7559\u7A7A\u5219\u4E0D\u4FEE\u6539\uFF09" : "\u521D\u59CB\u5BC6\u7801"
+                  ),
+                  h4("input", {
+                    style: s4.input,
+                    type: "password",
+                    value: form.password,
+                    placeholder: editing.value ? "\u7559\u7A7A\u8868\u793A\u4E0D\u4FEE\u6539\u5BC6\u7801" : "\u8BF7\u8F93\u5165\u521D\u59CB\u5BC6\u7801",
+                    required: !editing.value,
+                    autocomplete: "new-password",
+                    onInput: (e) => {
+                      form.password = e.target.value;
+                    }
+                  })
+                ]),
+                h4("fieldset", { style: s4.fieldset }, [
+                  h4("legend", { style: s4.label }, "\u5F52\u5C5E\u90E8\u95E8"),
+                  h4("div", { style: s4.multiSelect }, [
+                    optionsLoading.value ? h4("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : groups.value.length === 0 ? h4("div", { style: s4.hint }, "\u6682\u65E0\u90E8\u95E8\u6570\u636E") : groups.value.map(
+                      (g) => h4(
+                        "label",
+                        {
+                          key: g.groupId,
+                          style: s4.checkItem
+                        },
+                        [
+                          h4("input", {
+                            type: "checkbox",
+                            style: s4.control,
+                            checked: form.groupIds.includes(
+                              g.groupId
+                            ),
+                            onChange: () => toggleId("groupIds", g.groupId)
+                          }),
+                          h4("span", g.name || g.groupId)
+                        ]
+                      )
+                    )
+                  ])
+                ]),
+                h4("fieldset", { style: s4.fieldset }, [
+                  h4("legend", { style: s4.label }, "\u7528\u6237\u89D2\u8272"),
+                  h4("div", { style: s4.multiSelect }, [
+                    optionsLoading.value ? h4("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : roles.value.length === 0 ? h4("div", { style: s4.hint }, "\u6682\u65E0\u89D2\u8272\u6570\u636E") : roles.value.map(
+                      (r) => h4(
+                        "label",
+                        {
+                          key: r.roleId,
+                          style: s4.checkItem
+                        },
+                        [
+                          h4("input", {
+                            type: "checkbox",
+                            style: s4.control,
+                            checked: form.roleIds.includes(
+                              r.roleId
+                            ),
+                            onChange: () => toggleId("roleIds", r.roleId)
+                          }),
+                          h4("span", r.name || r.roleId)
+                        ]
+                      )
+                    )
+                  ])
+                ]),
+                h4("div", { style: s4.switchRow }, [
+                  h4("span", { style: s4.label }, "\u662F\u5426\u542F\u7528"),
+                  h4(
+                    "button",
+                    {
+                      type: "button",
+                      role: "switch",
+                      "aria-checked": form.enabled,
+                      style: {
+                        ...s4.switchTrack,
+                        ...form.enabled ? s4.switchTrackOn : {}
+                      },
+                      onClick: () => {
+                        form.enabled = !form.enabled;
+                      }
+                    },
+                    [
+                      h4("span", {
+                        style: {
+                          ...s4.switchThumb,
+                          ...form.enabled ? s4.switchThumbOn : {}
+                        }
+                      })
+                    ]
+                  )
+                ]),
+                h4("div", { style: s4.dialogFooter }, [
+                  h4(
+                    "button",
+                    {
+                      type: "button",
+                      style: s4.secondaryBtn,
+                      onClick: closeDialog
+                    },
+                    "\u53D6\u6D88"
+                  ),
+                  h4(
+                    "button",
+                    {
+                      type: "submit",
+                      style: s4.primaryBtn,
+                      disabled: saving.value
+                    },
+                    saving.value ? "\u4FDD\u5B58\u4E2D\u2026" : "\u4FDD\u5B58"
+                  )
+                ])
+              ]
+            )
+          ]
+        )
+      ]) : null,
+      deletingRow.value ? h4("div", { style: s4.mask, onClick: closeDeleteDialog }, [
+        h4(
+          "div",
+          {
+            style: { ...s4.dialog, maxWidth: "420px" },
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => e.stopPropagation()
+          },
+          [
+            h4("div", { style: s4.dialogHeader }, [
+              h4("h3", { style: s4.dialogTitle }, "\u786E\u8BA4\u5220\u9664"),
+              h4(
+                "button",
+                {
+                  type: "button",
+                  style: s4.iconBtn,
+                  "aria-label": "\u5173\u95ED",
+                  onClick: closeDeleteDialog
+                },
+                "\xD7"
+              )
+            ]),
+            h4("div", { style: s4.confirmBody }, [
+              h4("p", { style: s4.confirmText }, [
+                "\u786E\u8BA4\u5220\u9664\u7528\u6237\u300C",
+                h4("strong", deletingRow.value.name),
+                "\u300D\uFF08",
+                deletingRow.value.username,
+                "\uFF09\u5417\uFF1F\u5220\u9664\u540E\u4E0D\u53EF\u6062\u590D\u3002"
+              ]),
+              h4("div", { style: s4.dialogFooter }, [
+                h4(
+                  "button",
+                  {
+                    type: "button",
+                    style: s4.secondaryBtn,
+                    disabled: deleting.value,
+                    onClick: closeDeleteDialog
+                  },
+                  "\u53D6\u6D88"
+                ),
+                h4(
+                  "button",
+                  {
+                    type: "button",
+                    style: s4.dangerBtn,
+                    disabled: deleting.value,
+                    onClick: () => void confirmDelete()
+                  },
+                  deleting.value ? "\u5220\u9664\u4E2D\u2026" : "\u786E\u8BA4\u5220\u9664"
+                )
+              ])
+            ])
+          ]
+        )
+      ]) : null
+    ]);
+  }
+});
+
 // src/vue/SystemAdmin.ts
-import { computed as computed4, defineComponent as defineComponent5, h as h4, ref as ref4, watch as watch4 } from "vue";
+import { computed as computed4, defineComponent as defineComponent6, h as h5, ref as ref5, watch as watch5 } from "vue";
 
 // src/admin/menu.ts
 var SYSTEM_ADMIN_MENU = {
@@ -3385,13 +4433,14 @@ var SYSTEM_ADMIN_MENU = {
   children: [
     { key: "menu", label: "\u83DC\u5355\u7BA1\u7406" },
     { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" },
-    { key: "role", label: "\u89D2\u8272\u7BA1\u7406" }
+    { key: "role", label: "\u89D2\u8272\u7BA1\u7406" },
+    { key: "user", label: "\u7528\u6237\u7BA1\u7406" }
   ]
 };
 var SYSTEM_ADMIN_DEFAULT_KEY = "menu";
 
 // src/vue/SystemAdmin.ts
-var s4 = {
+var s5 = {
   root: {
     display: "flex",
     minHeight: "560px",
@@ -3465,7 +4514,7 @@ var s4 = {
     overflow: "auto"
   }
 };
-var SystemAdmin = defineComponent5({
+var SystemAdmin = defineComponent6({
   name: "SystemAdmin",
   props: {
     menuApi: {
@@ -3480,6 +4529,10 @@ var SystemAdmin = defineComponent5({
       type: Object,
       required: true
     },
+    userApi: {
+      type: Object,
+      required: true
+    },
     defaultActiveKey: {
       type: String,
       default: SYSTEM_ADMIN_DEFAULT_KEY
@@ -3498,8 +4551,8 @@ var SystemAdmin = defineComponent5({
     activeKeyChange: (_key) => true
   },
   setup(props, { emit, slots }) {
-    const innerKey = ref4(props.defaultActiveKey);
-    watch4(
+    const innerKey = ref5(props.defaultActiveKey);
+    watch5(
       () => props.defaultActiveKey,
       (value) => {
         if (props.activeKey === void 0) innerKey.value = value;
@@ -3516,22 +4569,22 @@ var SystemAdmin = defineComponent5({
       emit("update:activeKey", key);
       emit("activeKeyChange", key);
     }
-    return () => h4("div", { style: s4.root }, [
-      h4("aside", { style: s4.sidebar }, [
-        h4("div", { style: s4.sidebarTitle }, props.title),
-        h4(
+    return () => h5("div", { style: s5.root }, [
+      h5("aside", { style: s5.sidebar }, [
+        h5("div", { style: s5.sidebarTitle }, props.title),
+        h5(
           "nav",
-          { style: s4.nav },
+          { style: s5.nav },
           SYSTEM_ADMIN_MENU.children.map((item) => {
             const active = item.key === activeKey.value;
-            return h4(
+            return h5(
               "button",
               {
                 key: item.key,
                 type: "button",
                 style: {
-                  ...s4.navItem,
-                  ...active ? s4.navItemActive : {}
+                  ...s5.navItem,
+                  ...active ? s5.navItemActive : {}
                 },
                 onClick: () => setActiveKey(item.key)
               },
@@ -3540,20 +4593,20 @@ var SystemAdmin = defineComponent5({
           })
         )
       ]),
-      h4("main", { style: s4.content }, [
-        h4("div", { style: s4.contentHeader }, [
-          h4("div", { style: s4.breadcrumb }, [
-            h4("span", { style: s4.breadcrumbParent }, props.title),
-            h4("span", { style: s4.breadcrumbSep }, "/"),
-            h4("span", { style: s4.breadcrumbCurrent }, activeLabel.value)
+      h5("main", { style: s5.content }, [
+        h5("div", { style: s5.contentHeader }, [
+          h5("div", { style: s5.breadcrumb }, [
+            h5("span", { style: s5.breadcrumbParent }, props.title),
+            h5("span", { style: s5.breadcrumbSep }, "/"),
+            h5("span", { style: s5.breadcrumbCurrent }, activeLabel.value)
           ]),
           slots.toolbarExtra?.()
         ]),
-        h4("div", { style: s4.panel }, [
-          activeKey.value === "menu" ? h4(MenuManager, { api: props.menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey.value === "resource" ? h4(ResourceManager, {
+        h5("div", { style: s5.panel }, [
+          activeKey.value === "menu" ? h5(MenuManager, { api: props.menuApi, title: "\u83DC\u5355\u7BA1\u7406" }) : activeKey.value === "resource" ? h5(ResourceManager, {
             api: props.resourceApi,
             title: "\u6743\u9650\u70B9\u7BA1\u7406"
-          }) : h4(RoleManager, { api: props.roleApi, title: "\u89D2\u8272\u7BA1\u7406" })
+          }) : activeKey.value === "role" ? h5(RoleManager, { api: props.roleApi, title: "\u89D2\u8272\u7BA1\u7406" }) : h5(UserManager, { api: props.userApi, title: "\u7528\u6237\u7BA1\u7406" })
         ])
       ])
     ]);
@@ -3585,15 +4638,18 @@ export {
   SYSTEM_ADMIN_DEFAULT_KEY,
   SYSTEM_ADMIN_MENU,
   SystemAdmin,
+  UserManager,
   appendQueryParam,
   buildCreateBody,
   buildCreateMenuBody,
   buildCreateRoleBody,
+  buildCreateUserBody,
   buildPermissionTreeIndex,
   buildSavePermissionsBody,
   buildUpdateBody,
   buildUpdateMenuBody,
   buildUpdateRoleBody,
+  buildUpdateUserBody,
   collectTreeResourceIds,
   countCheckedDescendants,
   createAuthorizationResourceApi,
@@ -3602,6 +4658,7 @@ export {
   createPermissionPlugin,
   createPermissionStore,
   createSystemRoleApi,
+  createSystemUserApi,
   createVPermission,
   extractPagination,
   extractRecords,
@@ -3614,12 +4671,16 @@ export {
   mapMenuResource,
   mapPermissionTreeNode,
   mapRolePermissions,
+  mapSystemGroupOption,
   mapSystemRole,
+  mapSystemRoleOption,
+  mapSystemUser,
   resolveMenuDepth,
   snowyflake,
   togglePermissionCheck,
   useHasPermission,
   useHasRole,
-  usePermission
+  usePermission,
+  validateUsername
 };
 //# sourceMappingURL=index.js.map