com-angel-authorization 1.0.18 → 1.0.22

package/dist/vue/index.cjs

@@ -3825,7 +3825,8 @@ var s4 = {
     flexDirection: "column",
     gap: "6px",
     maxHeight: "160px",
-    overflow: "auto"
+    overflow: "auto",
+    marginTop: "8px"
   },
   checkItem: {
     display: "flex",
@@ -3844,10 +3845,35 @@ var s4 = {
     backgroundColor: "#ffffff"
   },
   hint: { fontSize: "13px", color: "#98a2b3", padding: "4px 0" },
-  switchRow: {
+  selectTrigger: {
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
+    gap: "8px",
+    width: "100%",
+    border: "1px solid #d0d5dd",
+    borderRadius: "8px",
+    padding: "8px 10px",
+    background: "#fff",
+    cursor: "pointer",
+    fontSize: "14px",
+    color: "#101828",
+    boxSizing: "border-box",
+    textAlign: "left"
+  },
+  selectTriggerText: {
+    flex: "1",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  selectPlaceholder: { color: "#98a2b3" },
+  selectChevron: { color: "#667085", fontSize: "10px", flexShrink: "0" },
+  required: { color: "#d92d20", marginLeft: "2px" },
+  switchRow: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-start",
     gap: "12px"
   },
   switchTrack: {
@@ -3916,7 +3942,10 @@ var UserManager = (0, import_vue6.defineComponent)({
     const deleting = (0, import_vue6.ref)(false);
     const groups = (0, import_vue6.ref)([]);
     const roles = (0, import_vue6.ref)([]);
-    const optionsLoading = (0, import_vue6.ref)(false);
+    const rolesLoading = (0, import_vue6.ref)(false);
+    const groupsOpen = (0, import_vue6.ref)(false);
+    const groupsLoading = (0, import_vue6.ref)(false);
+    const groupsLoaded = (0, import_vue6.ref)(false);
     function enabledParam() {
       if (enabledFilter.value === "all") return void 0;
       return enabledFilter.value === "true";
@@ -3944,19 +3973,26 @@ var UserManager = (0, import_vue6.defineComponent)({
         loading.value = false;
       }
     }
-    async function loadOptions() {
-      optionsLoading.value = true;
+    async function loadRoles() {
+      rolesLoading.value = true;
       try {
-        const [groupList, roleList] = await Promise.all([
-          props.api.listGroups(),
-          props.api.listRoleOptions()
-        ]);
-        groups.value = groupList;
-        roles.value = roleList;
+        roles.value = await props.api.listRoleOptions();
+      } catch (err) {
+        formError.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u89D2\u8272\u5931\u8D25";
+      } finally {
+        rolesLoading.value = false;
+      }
+    }
+    async function loadGroups() {
+      if (groupsLoaded.value || groupsLoading.value) return;
+      groupsLoading.value = true;
+      try {
+        groups.value = await props.api.listGroups();
+        groupsLoaded.value = true;
       } catch (err) {
-        formError.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u90E8\u95E8/\u89D2\u8272\u5931\u8D25";
+        formError.value = err instanceof Error ? err.message : "\u52A0\u8F7D\u90E8\u95E8\u5931\u8D25";
       } finally {
-        optionsLoading.value = false;
+        groupsLoading.value = false;
       }
     }
     function handleSearch() {
@@ -3969,12 +4005,18 @@ var UserManager = (0, import_vue6.defineComponent)({
       enabledFilter.value = "all";
       pageToken.value = "";
     }
+    function resetGroupPanel() {
+      groupsOpen.value = false;
+      groups.value = [];
+      groupsLoaded.value = false;
+    }
     function openCreate() {
       editing.value = null;
       Object.assign(form, emptyForm4());
       formError.value = "";
+      resetGroupPanel();
       dialogOpen.value = true;
-      void loadOptions();
+      void loadRoles();
     }
     function openEdit(row) {
       editing.value = row;
@@ -3987,12 +4029,17 @@ var UserManager = (0, import_vue6.defineComponent)({
         enabled: row.enabled
       });
       formError.value = "";
+      resetGroupPanel();
       dialogOpen.value = true;
-      void loadOptions();
+      void loadRoles();
     }
     function closeDialog() {
       if (!saving.value) dialogOpen.value = false;
     }
+    function toggleGroupsPanel() {
+      groupsOpen.value = !groupsOpen.value;
+      if (groupsOpen.value) void loadGroups();
+    }
     function toggleId(field, id) {
       const exists = form[field].includes(id);
       form[field] = exists ? form[field].filter((x) => x !== id) : [...form[field], id];
@@ -4012,6 +4059,10 @@ var UserManager = (0, import_vue6.defineComponent)({
         formError.value = "\u8BF7\u586B\u5199\u521D\u59CB\u5BC6\u7801";
         return;
       }
+      if (!form.groupIds.length) {
+        formError.value = "\u8BF7\u9009\u62E9\u5F52\u5C5E\u90E8\u95E8";
+        return;
+      }
       saving.value = true;
       formError.value = "";
       error.value = "";
@@ -4052,8 +4103,7 @@ var UserManager = (0, import_vue6.defineComponent)({
     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");
+      return row.groupIds.join("\u3001");
     }
     function roleLabel(row) {
       if (row.roleNames?.length) return row.roleNames.join("\u3001");
@@ -4061,16 +4111,28 @@ var UserManager = (0, import_vue6.defineComponent)({
       const map = new Map(roles.value.map((r) => [r.roleId, r.name]));
       return row.roleIds.map((id) => map.get(id) || id).join("\u3001");
     }
+    function selectedGroupSummary() {
+      if (!form.groupIds.length) return "\u8BF7\u9009\u62E9\u5F52\u5C5E\u90E8\u95E8";
+      if (groupsLoaded.value) {
+        const map = new Map(groups.value.map((g) => [g.groupId, g.name]));
+        return form.groupIds.map((id) => map.get(id) || id).join("\u3001");
+      }
+      if (editing.value?.groupNames?.length) {
+        const map = new Map(
+          editing.value.groupIds.map((id, i) => [
+            id,
+            editing.value?.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_vue6.onMounted)(() => {
       void loadList("current", "");
       void (async () => {
         try {
-          const [groupList, roleList] = await Promise.all([
-            props.api.listGroups(),
-            props.api.listRoleOptions()
-          ]);
-          groups.value = groupList;
-          roles.value = roleList;
+          roles.value = await props.api.listRoleOptions();
         } catch {
         }
       })();
@@ -4322,9 +4384,34 @@ var UserManager = (0, import_vue6.defineComponent)({
                   })
                 ]),
                 (0, import_vue6.h)("fieldset", { style: s4.fieldset }, [
-                  (0, import_vue6.h)("legend", { style: s4.label }, "\u5F52\u5C5E\u90E8\u95E8"),
-                  (0, import_vue6.h)("div", { style: s4.multiSelect }, [
-                    optionsLoading.value ? (0, import_vue6.h)("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : groups.value.length === 0 ? (0, import_vue6.h)("div", { style: s4.hint }, "\u6682\u65E0\u90E8\u95E8\u6570\u636E") : groups.value.map(
+                  (0, import_vue6.h)("legend", { style: s4.label }, [
+                    "\u5F52\u5C5E\u90E8\u95E8 ",
+                    (0, import_vue6.h)("span", { style: s4.required }, "*")
+                  ]),
+                  (0, import_vue6.h)(
+                    "button",
+                    {
+                      type: "button",
+                      style: s4.selectTrigger,
+                      "aria-expanded": groupsOpen.value,
+                      onClick: toggleGroupsPanel
+                    },
+                    [
+                      (0, import_vue6.h)("span", {
+                        style: {
+                          ...s4.selectTriggerText,
+                          ...form.groupIds.length ? {} : s4.selectPlaceholder
+                        }
+                      }, selectedGroupSummary()),
+                      (0, import_vue6.h)(
+                        "span",
+                        { style: s4.selectChevron },
+                        groupsOpen.value ? "\u25B2" : "\u25BC"
+                      )
+                    ]
+                  ),
+                  groupsOpen.value ? (0, import_vue6.h)("div", { style: s4.multiSelect }, [
+                    groupsLoading.value ? (0, import_vue6.h)("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : groups.value.length === 0 ? (0, import_vue6.h)("div", { style: s4.hint }, "\u6682\u65E0\u90E8\u95E8\u6570\u636E") : groups.value.map(
                       (g) => (0, import_vue6.h)(
                         "label",
                         {
@@ -4344,12 +4431,12 @@ var UserManager = (0, import_vue6.defineComponent)({
                         ]
                       )
                     )
-                  ])
+                  ]) : null
                 ]),
                 (0, import_vue6.h)("fieldset", { style: s4.fieldset }, [
                   (0, import_vue6.h)("legend", { style: s4.label }, "\u7528\u6237\u89D2\u8272"),
                   (0, import_vue6.h)("div", { style: s4.multiSelect }, [
-                    optionsLoading.value ? (0, import_vue6.h)("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : roles.value.length === 0 ? (0, import_vue6.h)("div", { style: s4.hint }, "\u6682\u65E0\u89D2\u8272\u6570\u636E") : roles.value.map(
+                    rolesLoading.value ? (0, import_vue6.h)("div", { style: s4.hint }, "\u52A0\u8F7D\u4E2D\u2026") : roles.value.length === 0 ? (0, import_vue6.h)("div", { style: s4.hint }, "\u6682\u65E0\u89D2\u8272\u6570\u636E") : roles.value.map(
                       (r) => (0, import_vue6.h)(
                         "label",
                         {
@@ -4491,10 +4578,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";