com-angel-authorization 1.0.18 → 1.0.22

package/dist/react/index.cjs

@@ -3113,7 +3113,10 @@ function UserManager({
   const [deleting, setDeleting] = (0, import_react5.useState)(false);
   const [groups, setGroups] = (0, import_react5.useState)([]);
   const [roles, setRoles] = (0, import_react5.useState)([]);
-  const [optionsLoading, setOptionsLoading] = (0, import_react5.useState)(false);
+  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) => {
@@ -3144,31 +3147,44 @@ function UserManager({
   (0, import_react5.useEffect)(() => {
     void loadList("current", "");
   }, [api, pageSize, keyword, enabledFilter]);
-  const loadOptions = (0, import_react5.useCallback)(async () => {
-    setOptionsLoading(true);
+  const loadRoles = (0, import_react5.useCallback)(async () => {
+    setRolesLoading(true);
     try {
-      const [groupList, roleList] = await Promise.all([
-        api.listGroups(),
-        api.listRoleOptions()
-      ]);
-      setGroups(groupList);
-      setRoles(roleList);
+      setRoles(await api.listRoleOptions());
     } catch (err) {
-      setFormError(err instanceof Error ? err.message : "\u52A0\u8F7D\u90E8\u95E8/\u89D2\u8272\u5931\u8D25");
+      setFormError(err instanceof Error ? err.message : "\u52A0\u8F7D\u89D2\u8272\u5931\u8D25");
     } finally {
-      setOptionsLoading(false);
+      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 loadOptions();
+    void loadRoles();
   };
   const openEdit = (row) => {
     setEditing(row);
@@ -3181,12 +3197,20 @@ function UserManager({
       enabled: row.enabled
     });
     setFormError("");
+    resetGroupPanel();
     setDialogOpen(true);
-    void loadOptions();
+    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);
@@ -3211,6 +3235,10 @@ function UserManager({
       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("");
@@ -3249,8 +3277,7 @@ function UserManager({
   const groupLabel = (row) => {
     if (row.groupNames?.length) return row.groupNames.join("\u3001");
     if (!row.groupIds.length) return "\u2014";
-    const map = new Map(groups.map((g) => [g.groupId, g.name]));
-    return row.groupIds.map((id) => map.get(id) || id).join("\u3001");
+    return row.groupIds.join("\u3001");
   };
   const roleLabel = (row) => {
     if (row.roleNames?.length) return row.roleNames.join("\u3001");
@@ -3258,15 +3285,22 @@ function UserManager({
     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 {
-        const [groupList, roleList] = await Promise.all([
-          api.listGroups(),
-          api.listRoleOptions()
-        ]);
-        setGroups(groupList);
-        setRoles(roleList);
+        setRoles(await api.listRoleOptions());
       } catch {
       }
     })();
@@ -3458,8 +3492,33 @@ function UserManager({
               )
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("fieldset", { style: styles4.fieldset, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("legend", { style: styles4.label, children: "\u5F52\u5C5E\u90E8\u95E8" }),
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: styles4.multiSelect, children: optionsLoading ? /* @__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.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",
                   {
@@ -3470,11 +3529,11 @@ function UserManager({
                   }
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { children: g.name || g.groupId })
-              ] }, 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: optionsLoading ? /* @__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)("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",
                   {
@@ -3751,8 +3810,34 @@ var styles4 = {
     flexDirection: "column",
     gap: 6,
     maxHeight: 160,
-    overflow: "auto"
+    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",
@@ -3773,7 +3858,7 @@ var styles4 = {
   switchRow: {
     display: "flex",
     alignItems: "center",
-    justifyContent: "space-between",
+    justifyContent: "flex-start",
     gap: 12
   },
   switchTrack: {
@@ -3815,10 +3900,10 @@ 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" },
+    { key: "user", label: "\u7528\u6237\u7BA1\u7406" },
     { key: "role", label: "\u89D2\u8272\u7BA1\u7406" },
-    { key: "user", label: "\u7528\u6237\u7BA1\u7406" }
+    { key: "menu", label: "\u83DC\u5355\u7BA1\u7406" },
+    { key: "resource", label: "\u6743\u9650\u70B9\u7BA1\u7406" }
   ]
 };
 var SYSTEM_ADMIN_DEFAULT_KEY = "menu";