refactor: improve code base of user-related (#5975)

#### What type of PR is this? /area ui /kind improvement /milestone 2.16.x #### What this PR does / why we need it: 优化和用户管理相关的所有对话框显示逻辑，减少不必要的渲染开销和请求。 #### Special notes for your reviewer: 改动范围如下： 1. 用户密码修改 2. 用户资料修改 3. 用户创建 4. 重新登录 #### Does this PR introduce a user-facing change? ```release-note 优化和用户管理相关的所有对话框显示逻辑，减少不必要的渲染开销和请求。 ```
halo-dev · May 23, 2024 · 4d289c0 · 4d289c0
1 parent c51f2f4
commit 4d289c0
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 288 deletions.
diff --git a/ui/console-src/modules/system/users/UserDetail.vue b/ui/console-src/modules/system/users/UserDetail.vue
@@ -95,14 +95,23 @@ const tabbarItems = computed(() => {
 function handleRouteToUC() {
  window.location.href = "/uc";
 }
+
+function onPasswordChangeModalClose() {
+ passwordChangeModal.value = false;
+ refetch();
+}
 </script>
 <template>
- <UserEditingModal v-model:visible="editingModal" :user="user?.user" />
+ <UserEditingModal
+ v-if="editingModal && user?.user"
+ :user="user?.user"
+ @close="editingModal = false"
+ />
 
  <UserPasswordChangeModal
- v-model:visible="passwordChangeModal"
+ v-if="passwordChangeModal"
  :user="user?.user"
- @close="refetch"
+ @close="onPasswordChangeModalClose"
  />
 
  <header class="bg-white">

diff --git a/ui/console-src/modules/system/users/UserList.vue b/ui/console-src/modules/system/users/UserList.vue
@@ -1,32 +1,32 @@
 <script lang="ts" setup>
 import {
+ Dialog,
  IconAddCircle,
+ IconLockPasswordLine,
+ IconRefreshLine,
  IconUserFollow,
  IconUserSettings,
- IconLockPasswordLine,
+ Toast,
+ VAvatar,
  VButton,
  VCard,
+ VDropdownItem,
+ VEmpty,
+ VEntity,
+ VEntityField,
+ VLoading,
  VPageHeader,
  VPagination,
  VSpace,
- VTag,
- VAvatar,
- VEntity,
- VEntityField,
- Dialog,
  VStatusDot,
- VLoading,
- Toast,
- IconRefreshLine,
- VEmpty,
- VDropdownItem,
+ VTag,
 } from "@halo-dev/components";
 import UserEditingModal from "./components/UserEditingModal.vue";
 import UserPasswordChangeModal from "./components/UserPasswordChangeModal.vue";
 import GrantPermissionModal from "./components/GrantPermissionModal.vue";
 import { computed, onMounted, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
-import type { User, ListedUser } from "@halo-dev/api-client";
+import type { ListedUser, User } from "@halo-dev/api-client";
 import { rbacAnnotations } from "@/constants/annotations";
 import { formatDatetime } from "@/utils/date";
 import { useRouteQuery } from "@vueuse/router";
@@ -232,19 +232,35 @@ onMounted(() => {
  creationModal.value = true;
  }
 });
+
+function onCreationModalClose() {
+ creationModal.value = false;
+ routeQueryAction.value = undefined;
+}
+
+function onEditingModalClose() {
+ editingModal.value = false;
+ selectedUser.value = undefined;
+}
+
+function onPasswordChangeModalClose() {
+ passwordChangeModal.value = false;
+ refetch();
+}
 </script>
 <template>
- <UserEditingModal v-model:visible="editingModal" :user="selectedUser" />
-
- <UserCreationModal
- v-model:visible="creationModal"
- @close="routeQueryAction = undefined"
+ <UserEditingModal
+ v-if="editingModal && selectedUser"
+ :user="selectedUser"
+ @close="onEditingModalClose"
  />
 
+ <UserCreationModal v-if="creationModal" @close="onCreationModalClose" />
+
  <UserPasswordChangeModal
- v-model:visible="passwordChangeModal"
+ v-if="passwordChangeModal"
  :user="selectedUser"
- @close="refetch"
+ @close="onPasswordChangeModalClose"
  />
 
  <GrantPermissionModal

diff --git a/ui/console-src/modules/system/users/components/UserCreationModal.vue b/ui/console-src/modules/system/users/components/UserCreationModal.vue
@@ -1,17 +1,13 @@
 <script lang="ts" setup>
 // core libs
-import { ref, watch } from "vue";
+import { onMounted, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { CreateUserRequest } from "@halo-dev/api-client";
 
 // components
 import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
 import SubmitButton from "@/components/button/SubmitButton.vue";
 
-// libs
-import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
-
 // hooks
 import { setFocus } from "@/formkit/utils/focus";
 import { useI18n } from "vue-i18n";
@@ -20,21 +16,12 @@ import { useQueryClient } from "@tanstack/vue-query";
 const { t } = useI18n();
 const queryClient = useQueryClient();
 
-const props = withDefaults(
- defineProps<{
- visible: boolean;
- }>(),
- {
- visible: false,
- }
-);
-
 const emit = defineEmits<{
- (event: "update:visible", visible: boolean): void;
  (event: "close"): void;
 }>();
 
-const initialFormState: CreateUserRequest = {
+const modal = ref<InstanceType<typeof VModal>>();
+const formState = ref<CreateUserRequest>({
  avatar: "",
  bio: "",
  displayName: "",
@@ -43,38 +30,17 @@ const initialFormState: CreateUserRequest = {
  password: "",
  phone: "",
  roles: [],
-};
-
-const formState = ref<CreateUserRequest>(cloneDeep(initialFormState));
+});
 const selectedRole = ref("");
-const saving = ref(false);
-
-const handleResetForm = () => {
- formState.value = cloneDeep(initialFormState);
- reset("user-creation-form");
-};
-
-watch(
- () => props.visible,
- (visible) => {
- if (visible) {
- setFocus("creationUserNameInput");
- } else {
- handleResetForm();
- }
- }
-);
+const isSubmitting = ref(false);
 
-const onVisibleChange = (visible: boolean) => {
- emit("update:visible", visible);
- if (!visible) {
- emit("close");
- }
-};
+onMounted(() => {
+ setFocus("creationUserNameInput");
+});
 
 const handleCreateUser = async () => {
  try {
- saving.value = true;
+ isSubmitting.value = true;
 
  if (selectedRole.value) {
  formState.value.roles = [selectedRole.value];
@@ -84,24 +50,24 @@ const handleCreateUser = async () => {
  createUserRequest: formState.value,
  });
 
- onVisibleChange(false);
+ modal.value?.close();
 
  Toast.success(t("core.common.toast.save_success"));
 
  queryClient.invalidateQueries({ queryKey: ["users"] });
  } catch (e) {
  console.error("Failed to create or update user", e);
  } finally {
- saving.value = false;
+ isSubmitting.value = false;
  }
 };
 </script>
 <template>
  <VModal
+ ref="modal"
  :title="$t('core.user.editing_modal.titles.create')"
- :visible="visible"
  :width="650"
- @update:visible="onVisibleChange"
+ @close="emit('close')"
  >
  <FormKit
  id="user-creation-form"
@@ -177,14 +143,13 @@ const handleCreateUser = async () => {
  <template #footer>
  <VSpace>
  <SubmitButton
- v-if="visible"
- :loading="saving"
+ :loading="isSubmitting"
  type="secondary"
  :text="$t('core.common.buttons.submit')"
  @submit="$formkit.submit('user-creation-form')"
  >
  </SubmitButton>
- <VButton @click="onVisibleChange(false)">
+ <VButton @click="modal?.close()">
  {{ $t("core.common.buttons.cancel_and_shortcut") }}
  </VButton>
  </VSpace>

diff --git a/ui/console-src/modules/system/users/components/UserEditingModal.vue b/ui/console-src/modules/system/users/components/UserEditingModal.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // core libs
-import { nextTick, ref, watch } from "vue";
+import { nextTick, ref } from "vue";
 import { apiClient } from "@/utils/api-client";
 import type { User } from "@halo-dev/api-client";
 
@@ -10,10 +10,8 @@ import SubmitButton from "@/components/button/SubmitButton.vue";
 
 // libs
 import { cloneDeep } from "lodash-es";
-import { reset } from "@formkit/core";
 
 // hooks
-import { setFocus } from "@/formkit/utils/focus";
 import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
 import { useI18n } from "vue-i18n";
 import { useQueryClient } from "@tanstack/vue-query";
@@ -23,63 +21,18 @@ const queryClient = useQueryClient();
 
 const props = withDefaults(
  defineProps<{
- visible: boolean;
- user?: User;
+ user: User;
  }>(),
- {
- visible: false,
- user: undefined,
- }
+ {}
 );
 
 const emit = defineEmits<{
- (event: "update:visible", visible: boolean): void;
  (event: "close"): void;
 }>();
 
-const initialFormState: User = {
- spec: {
- displayName: "",
- email: "",
- phone: "",
- password: "",
- bio: "",
- disabled: false,
- loginHistoryLimit: 0,
- },
- apiVersion: "v1alpha1",
- kind: "User",
- metadata: {
- name: "",
- },
-};
-
-const formState = ref<User>(cloneDeep(initialFormState));
-const saving = ref(false);
-
-const handleResetForm = () => {
- formState.value = cloneDeep(initialFormState);
- reset("user-form");
-};
-
-watch(
- () => props.visible,
- (visible) => {
- if (visible) {
- if (props.user) formState.value = cloneDeep(props.user);
- setFocus("displayNameInput");
- } else {
- handleResetForm();
- }
- }
-);
-
-const onVisibleChange = (visible: boolean) => {
- emit("update:visible", visible);
- if (!visible) {
- emit("close");
- }
-};
+const modal = ref<InstanceType<typeof VModal>>();
+const formState = ref<User>(cloneDeep(props.user));
+const isSubmitting = ref(false);
 
 const annotationsFormRef = ref<InstanceType<typeof AnnotationsForm>>();
 
@@ -99,14 +52,14 @@ const handleUpdateUser = async () => {
  };
 
  try {
- saving.value = true;
+ isSubmitting.value = true;
 
  await apiClient.extension.user.updatev1alpha1User({
  name: formState.value.metadata.name,
  user: formState.value,
  });
 
- onVisibleChange(false);
+ modal.value?.close();
 
  queryClient.invalidateQueries({ queryKey: ["users"] });
  queryClient.invalidateQueries({ queryKey: ["user-detail"] });
@@ -115,16 +68,16 @@ const handleUpdateUser = async () => {
  } catch (e) {
  console.error("Failed to create or update user", e);
  } finally {
- saving.value = false;
+ isSubmitting.value = false;
  }
 };
 </script>
 <template>
  <VModal
+ ref="modal"
  :title="$t('core.user.editing_modal.titles.update')"
- :visible="visible"
  :width="700"
- @update:visible="onVisibleChange"
+ @close="emit('close')"
  >
  <FormKit
  id="user-form"
@@ -210,14 +163,13 @@ const handleUpdateUser = async () => {
  <template #footer>
  <VSpace>
  <SubmitButton
- v-if="visible"
- :loading="saving"
+ :loading="isSubmitting"
  type="secondary"
  :text="$t('core.common.buttons.submit')"
  @submit="$formkit.submit('user-form')"
  >
  </SubmitButton>
- <VButton @click="onVisibleChange(false)">
+ <VButton @click="modal?.close()">
  {{ $t("core.common.buttons.cancel_and_shortcut") }}
  </VButton>
  </VSpace>