react-toolkits 2.13.2 → 2.13.3

package/lib/index.js

@@ -117,7 +117,7 @@ var init_en_GB = __esm({
       UserWidget: {
         signOutText: "Sign Out"
       },
-      UserList: {
+      User: {
         createTitle: "Create User",
         createSuccessfully: "User created successfully",
         updateTitle: "Update User",
@@ -126,7 +126,7 @@ var init_en_GB = __esm({
         deleteContent: "Are you sure you want to delete user <%= user %>?",
         deleteSuccessfully: "User deleted successfully"
       },
-      RoleList: {
+      Role: {
         createTitle: "Create Role",
         createSuccessfully: "Role created successfully",
         updateTitle: "Update Role",
@@ -1079,7 +1079,7 @@ var init_modal = __esm({
   }
 });
 function useFormModal(props) {
-  const { content, form, formProps, onConfirm, ...modalProps } = props;
+  const { content, form, formProps, onConfirm, onSuccess, ...modalProps } = props;
   const [internalExtraValues, setInternalExtraValues] = useState({});
   let [internalForm] = Form.useForm();
   internalForm = form || internalForm;
@@ -1087,6 +1087,7 @@ function useFormModal(props) {
   const hanldeConfirm = async () => {
     const values = await internalForm.validateFields();
     await onConfirm?.(values, internalExtraValues);
+    onSuccess?.();
     hide();
   };
   const afterClose = () => {
@@ -1098,10 +1099,8 @@ function useFormModal(props) {
     onConfirm: hanldeConfirm,
     afterClose
   });
-  const onShow = ({
-    initialValues,
-    extraValues
-  } = {}) => {
+  const onShow = (options) => {
+    const { initialValues, extraValues } = options || {};
     if (extraValues) {
       setInternalExtraValues(extraValues);
     }
@@ -1869,63 +1868,279 @@ function useRemoveUser() {
     }) => axios2.post(url4, arg)
   );
 }
-var useRoleModal;
+var Text2, useCreateRoleModal, useUpdateRoleModal, useCreateUserModal, useUpdateUserModal, GameSelect2, UserModalContentV2, useCreateUserModalV2, useUpdateUserModalV2;
 var init_hooks5 = __esm({
   "src/features/permission/hooks/index.tsx"() {
     init_locale();
     init_modal2();
-    init_queryList();
     init_toolkitsProvider();
+    init_constants();
     init_hooks2();
     init_components();
-    useRoleModal = (isCreate) => {
-      const { message } = App.useApp();
+    ({ Text: Text2 } = Typography);
+    useCreateRoleModal = ({ onSuccess } = {}) => {
       const { t } = useTranslation();
-      const { refetch, mutate: mutate2 } = useQueryListStore();
-      const create5 = useCreateRole();
-      const update = useUpdateRole();
-      const title = isCreate ? t("RoleList.createTitle") : t("RoleList.updateTitle");
-      const formProps = {
-        layout: "vertical"
-      };
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: !isCreate, addonBefore: "role_" }) }),
-        /* @__PURE__ */ jsx(Form.Item, { name: "permissions", children: /* @__PURE__ */ jsx(permissionList_default, {}) })
-      ] });
-      const url4 = "/api/usystem/role/list";
-      const onConfirm = async (values, extraValues) => {
-        if (isCreate) {
-          await create5.trigger({
+      const { trigger } = useCreateRole();
+      return useFormModal({
+        title: t("Role.createTitle"),
+        width: "50vw",
+        formProps: {
+          layout: "vertical"
+        },
+        content: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { addonBefore: "role_" }) }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "permissions", children: /* @__PURE__ */ jsx(permissionList_default, {}) })
+        ] }),
+        onConfirm: async (values) => {
+          await trigger({
             name: `role_${values.name}`,
             permissions: values.permissions
           });
-          refetch(url4, { page: 1 });
-          message.success(t("RoleList.createSuccessfully"));
-        } else {
-          await update.trigger({
+          onSuccess?.();
+        }
+      });
+    };
+    useUpdateRoleModal = ({ onSuccess } = {}) => {
+      const { t } = useTranslation();
+      const { trigger } = useUpdateRole();
+      return useFormModal({
+        title: t("Role.updateTitle"),
+        width: "50vw",
+        formProps: {
+          layout: "vertical"
+        },
+        content: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: true, addonBefore: "role_" }) }),
+          /* @__PURE__ */ jsx(Form.Item, { name: "permissions", children: /* @__PURE__ */ jsx(permissionList_default, {}) })
+        ] }),
+        onConfirm: async (values, extraValues) => {
+          await trigger({
             id: extraValues?.id,
             name: `role_${values.name}`,
             permissions: values.permissions
           });
-          mutate2(
-            url4,
-            (prev) => produce(prev, (draft) => {
-              const match = draft?.List?.find((item) => item.id === extraValues?.id);
-              if (match) {
-                match.permissions = values.permissions;
-              }
-            }),
-            { revalidate: false }
-          );
-          message.success(t("RoleList.updateSuccessfully"));
+          onSuccess?.();
+        }
+      });
+    };
+    useCreateUserModal = ({ onSuccess } = {}) => {
+      const { t } = useTranslation();
+      const { data: roles, isLoading } = useAllRoles();
+      const { trigger } = useCreateUser();
+      return useFormModal({
+        title: t("User.createTitle"),
+        width: 600,
+        formProps: {
+          autoComplete: "off",
+          labelCol: { flex: "80px" }
+        },
+        content: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, {}) }),
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.role"), name: "roles", children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              allowClear: true,
+              showSearch: true,
+              mode: "multiple",
+              loading: isLoading,
+              optionFilterProp: "label",
+              options: roles?.map((role) => ({ label: role.name, value: role.name }))
+            }
+          ) })
+        ] }),
+        onConfirm: async (values) => {
+          await trigger(values);
+          onSuccess?.();
+        }
+      });
+    };
+    useUpdateUserModal = ({ onSuccess } = {}) => {
+      const { t } = useTranslation();
+      const { data: roles, isLoading } = useAllRoles();
+      const { trigger } = useUpdateUser();
+      return useFormModal({
+        title: t("User.updateTitle"),
+        width: 600,
+        formProps: {
+          autoComplete: "off",
+          labelCol: { flex: "80px" }
+        },
+        content: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: true }) }),
+          /* @__PURE__ */ jsx(Form.Item, { label: t("global.role"), name: "roles", children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              allowClear: true,
+              showSearch: true,
+              mode: "multiple",
+              loading: isLoading,
+              optionFilterProp: "label",
+              options: roles?.map((role) => ({ label: role.name, value: role.name }))
+            }
+          ) })
+        ] }),
+        onConfirm: async (values, extraValues) => {
+          await trigger({ ...values, id: extraValues?.id });
+          onSuccess?.();
+        }
+      });
+    };
+    GameSelect2 = (props) => {
+      const { groups, onChange, ...rest } = props;
+      const { axios: axios2 } = useToolkitsStore((s) => s);
+      const { data, isLoading } = useSWR5(
+        groups?.length ? `/api/enum/game_group/get_game_ids?game_groups=${groups.join(",")}` : null,
+        (path) => axios2.get(path).then((response) => response.data.data.list)
+      );
+      const options = data?.map((group) => ({ label: group.name, value: group.id }));
+      const onValueChange = (value) => {
+        if (last(value) === WILDCARD) {
+          onChange?.([WILDCARD]);
+        } else if (first(value) === WILDCARD) {
+          onChange?.(value.slice(1));
+        } else {
+          onChange?.(value);
         }
       };
+      return /* @__PURE__ */ jsx(
+        Select,
+        {
+          ...rest,
+          allowClear: true,
+          showSearch: true,
+          optionFilterProp: "label",
+          mode: "tags",
+          loading: isLoading,
+          options,
+          onChange: onValueChange
+        }
+      );
+    };
+    UserModalContentV2 = ({ isCreate }) => {
+      const { t } = useTranslation();
+      const { axios: axios2 } = useToolkitsStore((s) => s);
+      const { data: roles, isLoading: isRolesLoading } = useAllRoles();
+      const { data: groups, isLoading: isGroupsLoading } = useSWR5(
+        "/api/enum/get?enum=game_group",
+        (path) => axios2.get(path).then((response) => response.data.data)
+      );
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: !isCreate }) }),
+        /* @__PURE__ */ jsx(Form.List, { name: "permissions", children: (fields, { add, remove }) => /* @__PURE__ */ jsxs(Row, { gutter: 8, children: [
+          /* @__PURE__ */ jsx(Col, { span: 8, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text2, { strong: true, children: t("global.projectGroup") }) }),
+          /* @__PURE__ */ jsx(Col, { span: 10, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text2, { strong: true, children: t("global.game") }) }),
+          /* @__PURE__ */ jsx(Col, { span: 6, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text2, { strong: true, children: t("global.role") }) }),
+          fields.map((field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+            /* @__PURE__ */ jsx(Col, { span: 8, children: /* @__PURE__ */ jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ setFieldValue }) => /* @__PURE__ */ jsx(Form.Item, { name: [field.name, "game_group"], children: /* @__PURE__ */ jsx(
+              Select,
+              {
+                allowClear: true,
+                showSearch: true,
+                mode: "tags",
+                optionFilterProp: "label",
+                loading: isGroupsLoading,
+                options: groups?.map((group) => ({ label: group, value: group })),
+                onChange: () => {
+                  setFieldValue(["permissions", field.name, "game_ids"], []);
+                }
+              }
+            ) }) }) }),
+            /* @__PURE__ */ jsx(Col, { span: 10, children: /* @__PURE__ */ jsx(
+              Form.Item,
+              {
+                noStyle: true,
+                shouldUpdate: (prevValues, nextValues) => prevValues.permissions[field.name]?.game_group !== nextValues.permissions[field.name]?.game_group,
+                children: ({ getFieldValue }) => {
+                  const _groups = getFieldValue(["permissions", field.name, "game_group"]);
+                  return /* @__PURE__ */ jsx(
+                    Form.Item,
+                    {
+                      name: [field.name, "game_ids"],
+                      dependencies: [["permissions", field.name, "game_group"]],
+                      rules: [{ required: _groups?.length, message: "\u8BF7\u9009\u62E9\u6E38\u620F" }],
+                      children: /* @__PURE__ */ jsx(GameSelect2, { groups: _groups })
+                    }
+                  );
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
+                Form.Item,
+                {
+                  name: [field.name, "role"],
+                  rules: [
+                    { required: true, message: "\u8BF7\u9009\u62E9\u89D2\u8272" },
+                    ({ getFieldValue }) => ({
+                      validator(_rule, value) {
+                        const items = getFieldValue("permissions");
+                        const otherItems = items.filter((item, index) => !!item && index !== field.name);
+                        if (otherItems.some((item) => item.role === value)) {
+                          return Promise.reject(new Error("\u8BF7\u52FF\u91CD\u590D\u9009\u62E9\u89D2\u8272"));
+                        }
+                        return Promise.resolve();
+                      }
+                    })
+                  ],
+                  children: /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      allowClear: true,
+                      showSearch: true,
+                      optionFilterProp: "label",
+                      loading: isRolesLoading,
+                      options: roles?.map((role) => ({ label: role.name, value: role.name }))
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "w-8 text-center", children: /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsx(
+                MinusCircleOutlined,
+                {
+                  onClick: () => {
+                    remove(field.name);
+                  }
+                }
+              ) }) })
+            ] }) })
+          ] }, field.key)),
+          fields.length === 0 && /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Empty, { className: "mb-6" }) }),
+          /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Button, { block: true, type: "dashed", onClick: () => add(), children: t("global.add") }) })
+        ] }) })
+      ] });
+    };
+    useCreateUserModalV2 = ({ onSuccess } = {}) => {
+      const { t } = useTranslation();
+      const { trigger } = useCreateUser();
+      return useFormModal({
+        title: t("User.createTitle"),
+        width: "50vw",
+        formProps: {
+          autoComplete: "off",
+          labelCol: { flex: "80px" }
+        },
+        content: /* @__PURE__ */ jsx(UserModalContentV2, { isCreate: true }),
+        onConfirm: async (values) => {
+          await trigger(values);
+          onSuccess?.();
+        }
+      });
+    };
+    useUpdateUserModalV2 = ({ onSuccess } = {}) => {
+      const { t } = useTranslation();
+      const { trigger } = useUpdateUser();
       return useFormModal({
-        title,
+        title: t("User.updateTitle"),
         width: "50vw",
-        formProps,
-        content,
-        onConfirm
+        formProps: {
+          autoComplete: "off",
+          labelCol: { flex: "80px" }
+        },
+        content: /* @__PURE__ */ jsx(UserModalContentV2, {}),
+        onConfirm: async (values, extraValues) => {
+          await trigger({ ...values, id: extraValues?.id });
+          onSuccess?.();
+        }
       });
     };
   }
@@ -2021,13 +2236,13 @@ var init_permissionCollapse = __esm({
     permissionCollapse_default = PermissionCollapse;
   }
 });
-var Text2, Option2, PermissionWithGame, PermissionWithGame_default;
+var Text3, Option2, PermissionWithGame, PermissionWithGame_default;
 var init_PermissionWithGame = __esm({
   "src/features/permission/components/permissionList/PermissionWithGame.tsx"() {
     init_locale();
     init_hooks5();
     init_permissionCollapse();
-    ({ Text: Text2 } = Typography);
+    ({ Text: Text3 } = Typography);
     ({ Option: Option2 } = Select);
     PermissionWithGame = (props) => {
       const { expand = true, value, readonly, onChange } = props;
@@ -2046,7 +2261,7 @@ var init_PermissionWithGame = __esm({
         setGameList(list);
       }, [value]);
       if (error) {
-        return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Text2, { type: "danger", children: t("PermissionList.failedDescription") }) });
+        return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Text3, { type: "danger", children: t("PermissionList.failedDescription") }) });
       }
       const addGame = () => {
         setGameList((prev) => [...prev, { gameId: "", permissions: [] }]);
@@ -2076,8 +2291,8 @@ var init_PermissionWithGame = __esm({
           Card,
           {
             title: /* @__PURE__ */ jsxs(Space, { children: [
-              /* @__PURE__ */ jsx(Text2, { children: t("global.game") }),
-              readonly ? /* @__PURE__ */ jsx(Text2, { children: games?.find((game) => String(game.id) === item.gameId)?.name }) : /* @__PURE__ */ jsx(
+              /* @__PURE__ */ jsx(Text3, { children: t("global.game") }),
+              readonly ? /* @__PURE__ */ jsx(Text3, { children: games?.find((game) => String(game.id) === item.gameId)?.name }) : /* @__PURE__ */ jsx(
                 Select,
                 {
                   disabled: readonly,
@@ -2138,19 +2353,19 @@ var init_PermissionWithGame = __esm({
     PermissionWithGame_default = PermissionWithGame;
   }
 });
-var Text3, PermissionWithoutGame, PermissionWithoutGame_default;
+var Text4, PermissionWithoutGame, PermissionWithoutGame_default;
 var init_PermissionWithoutGame = __esm({
   "src/features/permission/components/permissionList/PermissionWithoutGame.tsx"() {
     init_locale();
     init_hooks5();
     init_permissionCollapse();
-    ({ Text: Text3 } = Typography);
+    ({ Text: Text4 } = Typography);
     PermissionWithoutGame = (props) => {
       const { expand = true, value, readonly, onChange } = props;
       const { data: permissions, isLoading, error } = useAllPermissions();
       const { t } = useTranslation();
       if (error) {
-        return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Text3, { type: "danger", children: t("PermissionList.failedDescription") }) });
+        return /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(Text4, { type: "danger", children: t("PermissionList.failedDescription") }) });
       }
       return /* @__PURE__ */ jsx(Skeleton, { active: true, loading: isLoading, children: /* @__PURE__ */ jsx(
         permissionCollapse_default,
@@ -2208,242 +2423,57 @@ var userList_exports = {};
 __export(userList_exports, {
   default: () => userList_default
 });
-var Text4, url2, useModal2, GameSelect2, useModalWithGroup, UserList, userList_default;
+var url2, UserList, userList_default;
 var init_userList = __esm({
   "src/pages/permission/userList/index.tsx"() {
     init_highlight();
     init_locale();
-    init_modal2();
     init_permissionButton();
     init_queryList();
     init_toolkitsProvider();
-    init_constants();
     init_permission();
-    ({ Text: Text4 } = Typography);
     url2 = "/api/usystem/user/list";
-    useModal2 = (isCreate) => {
-      const { message } = App.useApp();
+    UserList = () => {
+      const { modal, message } = App.useApp();
       const { t } = useTranslation();
-      const { refetch, mutate: mutate2 } = useQueryListStore();
-      const { data: roles, isLoading } = useAllRoles();
-      const create5 = useCreateUser();
-      const update = useUpdateUser();
-      const title = isCreate ? t("UserList.createTitle") : t("UserList.updateTitle");
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: !isCreate }) }),
-        /* @__PURE__ */ jsx(Form.Item, { label: t("global.role"), name: "roles", children: /* @__PURE__ */ jsx(
-          Select,
-          {
-            allowClear: true,
-            showSearch: true,
-            mode: "multiple",
-            loading: isLoading,
-            optionFilterProp: "label",
-            options: roles?.map((role) => ({ label: role.name, value: role.name }))
-          }
-        ) })
-      ] });
-      const onConfirm = async (values, extraValues) => {
-        if (isCreate) {
-          await create5.trigger(values);
+      const remove = useRemoveUser();
+      const { mutate: mutate2, refetch } = useQueryListStore();
+      const { permissionVersion } = useToolkitsStore((s) => s);
+      const { show: showCreateModal, modal: createModal } = useCreateUserModal({
+        onSuccess() {
           refetch(url2, { page: 1 });
-          message.success(t("UserList.createSuccessfully"));
-        } else {
-          await update.trigger({ ...values, id: extraValues?.id });
-          mutate2(
-            url2,
-            (prev) => {
-              return produce(prev, (draft) => {
-                if (draft?.List) {
-                  const index = draft.List?.findIndex((item) => item.id === extraValues?.id);
-                  if (index !== -1) {
-                    draft.List[index].roles = values.roles;
-                  }
-                }
-              });
-            },
-            { revalidate: false }
-          );
-          message.success(t("UserList.updateSuccessfully"));
+          message.success(t("User.createSuccessfully"));
         }
-      };
-      return useFormModal({
-        title,
-        width: 600,
-        formProps: {
-          autoComplete: "off",
-          labelCol: { flex: "80px" }
-        },
-        content,
-        onConfirm
       });
-    };
-    GameSelect2 = (props) => {
-      const { groups, onChange, ...rest } = props;
-      const { axios: axios2 } = useToolkitsStore((s) => s);
-      const { data, isLoading } = useSWR5(
-        groups?.length ? `/api/enum/game_group/get_game_ids?game_groups=${groups.join(",")}` : null,
-        (path) => axios2.get(path).then((response) => response.data.data.list)
-      );
-      const options = data?.map((group) => ({ label: group.name, value: group.id }));
-      const onValueChange = (value) => {
-        if (last(value) === WILDCARD) {
-          onChange?.([WILDCARD]);
-        } else if (first(value) === WILDCARD) {
-          onChange?.(value.slice(1));
-        } else {
-          onChange?.(value);
+      const { show: showUpdateModal, modal: updateModal } = useUpdateUserModal({
+        onSuccess() {
+          refetch(url2);
+          message.success(t("User.updateSuccessfully"));
         }
-      };
-      return /* @__PURE__ */ jsx(
-        Select,
-        {
-          ...rest,
-          allowClear: true,
-          showSearch: true,
-          optionFilterProp: "label",
-          mode: "tags",
-          loading: isLoading,
-          options,
-          onChange: onValueChange
-        }
-      );
-    };
-    useModalWithGroup = (isCreate) => {
-      const { message } = App.useApp();
-      const { t } = useTranslation();
-      const { axios: axios2 } = useToolkitsStore((s) => s);
-      const { refetch, mutate: mutate2 } = useQueryListStore();
-      const { data: roles, isLoading: isRolesLoading } = useAllRoles();
-      const create5 = useCreateUser();
-      const update = useUpdateUser();
-      const title = isCreate ? t("UserList.createTitle") : t("UserList.updateTitle");
-      const { data: groups, isLoading: isGroupsLoading } = useSWR5(
-        "/api/enum/get?enum=game_group",
-        (path) => axios2.get(path).then((response) => response.data.data)
-      );
-      const content = /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(Form.Item, { label: t("global.name"), name: "name", rules: [{ required: true }], children: /* @__PURE__ */ jsx(Input, { disabled: !isCreate }) }),
-        /* @__PURE__ */ jsx(Form.List, { name: "permissions", children: (fields, { add, remove }) => /* @__PURE__ */ jsxs(Row, { gutter: 8, children: [
-          /* @__PURE__ */ jsx(Col, { span: 8, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text4, { strong: true, children: t("global.projectGroup") }) }),
-          /* @__PURE__ */ jsx(Col, { span: 10, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text4, { strong: true, children: t("global.game") }) }),
-          /* @__PURE__ */ jsx(Col, { span: 6, className: "text-center mb-4", children: /* @__PURE__ */ jsx(Text4, { strong: true, children: t("global.role") }) }),
-          fields.map((field) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
-            /* @__PURE__ */ jsx(Col, { span: 8, children: /* @__PURE__ */ jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ setFieldValue }) => /* @__PURE__ */ jsx(Form.Item, { name: [field.name, "game_group"], children: /* @__PURE__ */ jsx(
-              Select,
-              {
-                allowClear: true,
-                showSearch: true,
-                mode: "tags",
-                optionFilterProp: "label",
-                loading: isGroupsLoading,
-                options: groups?.map((group) => ({ label: group, value: group })),
-                onChange: () => {
-                  setFieldValue(["permissions", field.name, "game_ids"], []);
-                }
-              }
-            ) }) }) }),
-            /* @__PURE__ */ jsx(Col, { span: 10, children: /* @__PURE__ */ jsx(
-              Form.Item,
-              {
-                noStyle: true,
-                shouldUpdate: (prevValues, nextValues) => prevValues.permissions[field.name]?.game_group !== nextValues.permissions[field.name]?.game_group,
-                children: ({ getFieldValue }) => {
-                  const _groups = getFieldValue(["permissions", field.name, "game_group"]);
-                  return /* @__PURE__ */ jsx(
-                    Form.Item,
-                    {
-                      name: [field.name, "game_ids"],
-                      dependencies: [["permissions", field.name, "game_group"]],
-                      rules: [{ required: _groups?.length, message: "\u8BF7\u9009\u62E9\u6E38\u620F" }],
-                      children: /* @__PURE__ */ jsx(GameSelect2, { groups: _groups })
-                    }
-                  );
-                }
-              }
-            ) }),
-            /* @__PURE__ */ jsx(Col, { span: 6, children: /* @__PURE__ */ jsxs("div", { className: "flex", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx(
-                Form.Item,
-                {
-                  name: [field.name, "role"],
-                  rules: [
-                    { required: true, message: "\u8BF7\u9009\u62E9\u89D2\u8272" },
-                    ({ getFieldValue }) => ({
-                      validator(_rule, value) {
-                        const items = getFieldValue("permissions");
-                        const otherItems = items.filter((item, index) => !!item && index !== field.name);
-                        if (otherItems.some((item) => item.role === value)) {
-                          return Promise.reject(new Error("\u8BF7\u52FF\u91CD\u590D\u9009\u62E9\u89D2\u8272"));
-                        }
-                        return Promise.resolve();
-                      }
-                    })
-                  ],
-                  children: /* @__PURE__ */ jsx(
-                    Select,
-                    {
-                      allowClear: true,
-                      showSearch: true,
-                      optionFilterProp: "label",
-                      loading: isRolesLoading,
-                      options: roles?.map((role) => ({ label: role.name, value: role.name }))
-                    }
-                  )
-                }
-              ) }),
-              /* @__PURE__ */ jsx("div", { className: "w-8 text-center", children: /* @__PURE__ */ jsx(Form.Item, { children: /* @__PURE__ */ jsx(
-                MinusCircleOutlined,
-                {
-                  onClick: () => {
-                    remove(field.name);
-                  }
-                }
-              ) }) })
-            ] }) })
-          ] }, field.key)),
-          fields.length === 0 && /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Empty, { className: "mb-6" }) }),
-          /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(Button, { block: true, type: "dashed", onClick: () => add(), children: t("global.add") }) })
-        ] }) })
-      ] });
-      const onConfirm = async (values, extraValues) => {
-        if (isCreate) {
-          await create5.trigger(values);
+      });
+      const { show: showCreateModalV2, modal: createModalV2 } = useCreateUserModalV2({
+        onSuccess() {
           refetch(url2, { page: 1 });
-          message.success(t("UserList.createSuccessfully"));
-        } else {
-          await update.trigger({ ...values, id: extraValues?.id });
-          mutate2(url2);
-          message.success(t("UserList.updateSuccessfully"));
+          message.success(t("User.createSuccessfully"));
+        }
+      });
+      const { show: showUpdateModalV2, modal: updateModalV2 } = useUpdateUserModalV2({
+        onSuccess() {
+          refetch(url2);
+          message.success(t("User.updateSuccessfully"));
         }
-      };
-      return useFormModal({
-        title,
-        width: "50vw",
-        formProps: {
-          autoComplete: "off",
-          labelCol: { flex: "80px" }
-        },
-        content,
-        onConfirm
       });
-    };
-    UserList = () => {
-      const { modal, message } = App.useApp();
-      const remove = useRemoveUser();
-      const { mutate: mutate2 } = useQueryListStore();
-      const { permissionVersion } = useToolkitsStore((s) => s);
-      const { show: showCreateModal, modal: createModal } = useModal2(true);
-      const { show: showUpdateModal, modal: updateModal } = useModal2();
-      const { show: showCreateModalWithGroup, modal: createModalWithGroup } = useModalWithGroup(true);
-      const { show: showUpdateModalWithGroup, modal: updateModalWithGroup } = useModalWithGroup();
-      const { t } = useTranslation();
-      const navigate = useNavigate();
       const columns = [
         {
           title: t("global.name"),
           dataIndex: "name",
-          key: "name"
+          key: "name",
+          render(value, record) {
+            if (permissionVersion === "v3" /* V3 */) {
+              return /* @__PURE__ */ jsx(Link, { to: `./${record.id}`, children: value });
+            }
+            return value;
+          }
         },
         {
           title: "ID",
@@ -2471,16 +2501,6 @@ var init_userList = __esm({
           render: (_, record) => {
             const { name, permissions, roles, id: id2 } = record;
             return /* @__PURE__ */ jsxs(Space, { children: [
-              permissionVersion === "v3" /* V3 */ && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  type: "link",
-                  onClick: () => {
-                    navigate(`./${id2}}`);
-                  },
-                  children: t("global.view")
-                }
-              ),
               /* @__PURE__ */ jsx(
                 PermissionButton_default,
                 {
@@ -2489,7 +2509,7 @@ var init_userList = __esm({
                   code: "100003",
                   onClick: () => {
                     if (permissionVersion === "v3" /* V3 */) {
-                      showUpdateModalWithGroup({
+                      showUpdateModalV2({
                         initialValues: {
                           name,
                           permissions
@@ -2522,8 +2542,8 @@ var init_userList = __esm({
                   type: "link",
                   onClick: () => {
                     modal.confirm({
-                      title: t("UserList.deleteTitle"),
-                      content: /* @__PURE__ */ jsx(Highlight_default, { texts: [name], children: t("UserList.deleteContent", { user: name }) }),
+                      title: t("User.deleteTitle"),
+                      content: /* @__PURE__ */ jsx(Highlight_default, { texts: [name], children: t("User.deleteContent", { user: name }) }),
                       async onOk() {
                         await remove.trigger({
                           id: id2,
@@ -2537,7 +2557,7 @@ var init_userList = __esm({
                             }
                           });
                         });
-                        message.success(t("UserList.deleteSuccessfully"));
+                        message.success(t("User.deleteSuccessfully"));
                       }
                     });
                   },
@@ -2561,12 +2581,12 @@ var init_userList = __esm({
                 code: "100002",
                 onClick: () => {
                   if (permissionVersion === "v3" /* V3 */) {
-                    showCreateModalWithGroup();
+                    showCreateModalV2();
                   } else {
                     showCreateModal();
                   }
                 },
-                children: t("UserList.createTitle")
+                children: t("User.createTitle")
               }
             ),
             children: /* @__PURE__ */ jsx(
@@ -2585,8 +2605,8 @@ var init_userList = __esm({
         ),
         createModal,
         updateModal,
-        createModalWithGroup,
-        updateModalWithGroup
+        createModalV2,
+        updateModalV2
       ] });
     };
     userList_default = withContext(UserList, { isGlobal: true });
@@ -2605,15 +2625,23 @@ var init_userDetail = __esm({
     init_locale();
     init_toolkitsProvider();
     init_constants();
+    init_permission();
     UserDetail = () => {
+      const { message } = App.useApp();
       const params = useParams();
       const { t } = useTranslation();
       const { axios: axios2, gameApiV2 } = useToolkitsStore((s) => s);
-      const { data, isLoading } = useSWR5(
+      const { data, isLoading, mutate: mutate2 } = useSWR5(
         params.id ? `/api/usystem/user/info?id=${params.id}` : null,
         (url4) => axios2.get(url4).then((res) => res.data.data)
       );
       const { data: games } = useGames();
+      const { show, modal } = useUpdateUserModalV2({
+        onSuccess() {
+          mutate2();
+          message.success(t("User.updateSuccessfully"));
+        }
+      });
       const columns = [
         {
           key: "group",
@@ -2660,11 +2688,36 @@ var init_userDetail = __esm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Card, { title: "\u7528\u6237\u8BE6\u60C5", loading: isLoading, children: /* @__PURE__ */ jsxs(Descriptions, { bordered: true, column: 1, children: [
-          /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.name"), children: data?.name }),
-          /* @__PURE__ */ jsx(Descriptions.Item, { label: "ID", children: data?.id }),
-          /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.role"), children: /* @__PURE__ */ jsx(Table, { rowKey: "role", columns, dataSource: data?.permissions, pagination: false }) })
-        ] }) })
+        /* @__PURE__ */ jsx(
+          Card,
+          {
+            title: "\u7528\u6237\u8BE6\u60C5",
+            loading: isLoading,
+            extra: /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => {
+                  show({
+                    initialValues: {
+                      name: data?.name,
+                      permissions: data?.permissions
+                    },
+                    extraValues: {
+                      id: data.id
+                    }
+                  });
+                },
+                children: t("global.update")
+              }
+            ),
+            children: /* @__PURE__ */ jsxs(Descriptions, { bordered: true, column: 1, children: [
+              /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.name"), children: data?.name }),
+              /* @__PURE__ */ jsx(Descriptions.Item, { label: "ID", children: data?.id }),
+              /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.role"), children: /* @__PURE__ */ jsx(Table, { rowKey: "role", columns, dataSource: data?.permissions, pagination: false }) })
+            ] })
+          }
+        ),
+        modal
       ] });
     };
     userDetail_default = UserDetail;
@@ -2689,13 +2742,23 @@ var init_roleList = __esm({
     init_hooks2();
     url3 = "/api/usystem/role/list";
     RoleList = () => {
-      const { accessible: viewable } = usePermission("200005");
       const { modal, message } = App.useApp();
+      const { accessible: viewable } = usePermission("200005");
       const { t } = useTranslation();
       const { axios: axios2, permissionVersion } = useToolkitsStore((s) => s);
-      const { mutate: mutate2 } = useQueryListStore();
-      const { show: showCreateModal, modal: createModal } = useRoleModal(true);
-      const { show: showUpdateModal, modal: updateModal } = useRoleModal();
+      const { mutate: mutate2, refetch } = useQueryListStore();
+      const { show: showCreateModal, modal: createModal } = useCreateRoleModal({
+        onSuccess() {
+          refetch(url3, { page: 1 });
+          message.success(t("Role.createSuccessfully"));
+        }
+      });
+      const { show: showUpdateModal, modal: updateModal } = useUpdateRoleModal({
+        onSuccess() {
+          mutate2(url3);
+          message.success(t("Role.updateSuccessfully"));
+        }
+      });
       const remove = useRemoveRole();
       const handleUpdateBtnClick = async (record) => {
         const response = await axios2.get(
@@ -2749,7 +2812,7 @@ var init_roleList = __esm({
                   onClick: async () => {
                     handleUpdateBtnClick(record);
                   },
-                  children: t("global.edit")
+                  children: t("global.update")
                 }
               ),
               /* @__PURE__ */ jsx(
@@ -2761,8 +2824,8 @@ var init_roleList = __esm({
                   type: "link",
                   onClick: () => {
                     modal.confirm({
-                      title: t("RoleList.deleteTitle"),
-                      content: /* @__PURE__ */ jsx(Highlight_default, { texts: [record.name], children: t("RoleList.deleteContent", { role: record.name }) }),
+                      title: t("Role.deleteTitle"),
+                      content: /* @__PURE__ */ jsx(Highlight_default, { texts: [record.name], children: t("Role.deleteContent", { role: record.name }) }),
                       async onOk() {
                         await remove.trigger({
                           id: record.id,
@@ -2776,7 +2839,7 @@ var init_roleList = __esm({
                             }
                           });
                         });
-                        message.success(t("RoleList.deleteSuccessfully"));
+                        message.success(t("Role.deleteSuccessfully"));
                       }
                     });
                   },
@@ -2801,7 +2864,7 @@ var init_roleList = __esm({
                 onClick: () => {
                   showCreateModal();
                 },
-                children: t("RoleList.createTitle")
+                children: t("Role.createTitle")
               }
             ),
             children: /* @__PURE__ */ jsx(
@@ -2839,24 +2902,24 @@ var init_roleDetail = __esm({
     init_toolkitsProvider();
     init_permission();
     RoleDetail = () => {
+      const { message } = App.useApp();
       const params = useParams();
       const { t } = useTranslation();
-      const { axios: axios2, permissionVersion } = useToolkitsStore((s) => s);
-      const { data: role, isLoading } = useRole(params.name);
-      const { show, modal } = useRoleModal(false);
+      const { data, isLoading, mutate: mutate2 } = useRole(params.name);
+      const { show, modal } = useUpdateRoleModal({
+        onSuccess() {
+          mutate2();
+          message.success(t("Role.updateSuccessfully"));
+        }
+      });
       const handleUpdateBtnClick = async () => {
-        const {
-          data: { data }
-        } = await axios2.get(
-          `/api/usystem/role/info${permissionVersion === "v2" /* V2 */ ? "V2" : ""}?name=${role.name}`
-        );
         show({
           initialValues: {
             permissions: data?.permissions,
             name: data?.name.replace(/^role_/, "")
           },
           extraValues: {
-            id: data?.id
+            id: data.id
           }
         });
       };
@@ -2877,13 +2940,13 @@ var init_roleDetail = __esm({
             ]
           }
         ),
-        /* @__PURE__ */ jsx(Card, { title: t("RoleDetail.title"), extra: /* @__PURE__ */ jsx(Button, { onClick: handleUpdateBtnClick, children: t("global.edit") }), children: /* @__PURE__ */ jsxs(Skeleton, { loading: isLoading, children: [
+        /* @__PURE__ */ jsx(Card, { title: t("RoleDetail.title"), extra: /* @__PURE__ */ jsx(Button, { onClick: handleUpdateBtnClick, children: t("global.update") }), children: /* @__PURE__ */ jsxs(Skeleton, { loading: isLoading, children: [
           /* @__PURE__ */ jsxs(Descriptions, { column: 2, layout: "vertical", className: "mb-6", children: [
-            /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.name"), children: role?.name }),
-            /* @__PURE__ */ jsx(Descriptions.Item, { label: "ID", children: role?.id }),
-            /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.creationTime"), children: role?.ctime })
+            /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.name"), children: data?.name }),
+            /* @__PURE__ */ jsx(Descriptions.Item, { label: "ID", children: data?.id }),
+            /* @__PURE__ */ jsx(Descriptions.Item, { label: t("global.creationTime"), children: data?.ctime })
           ] }),
-          /* @__PURE__ */ jsx(permissionList_default, { readonly: true, value: role?.permissions })
+          /* @__PURE__ */ jsx(permissionList_default, { readonly: true, value: data?.permissions })
         ] }) }),
         modal
       ] });