From afabffc54640fbe35c43985214e232714c4b48f0 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Mon, 27 May 2024 16:56:57 +0800
Subject: [PATCH] refactor: typing component template refs for VModal (#5994)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

#### What this PR does / why we need it:

为 VModal 组件的引用添加类型。

See https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 .../AttachmentGroupEditingModal.vue           |  6 ++---
 .../components/AttachmentPoliciesModal.vue    |  4 ++--
 .../AttachmentPolicyEditingModal.vue          |  6 ++---
 .../components/AttachmentUploadModal.vue      |  4 ++--
 .../components/ReplyCreationModal.vue         |  6 ++---
 .../components/SinglePageSettingModal.vue     | 24 +++++++++----------
 .../components/CategoryEditingModal.vue       |  6 ++---
 .../posts/tags/components/TagEditingModal.vue |  6 ++---
 .../menus/components/MenuEditingModal.vue     |  6 ++---
 .../menus/components/MenuItemEditingModal.vue |  6 ++---
 .../themes/components/ThemeListModal.vue      |  6 ++---
 .../components/PluginInstallationModal.vue    |  6 ++---
 .../roles/components/RoleEditingModal.vue     |  2 +-
 .../users/components/GrantPermissionModal.vue |  2 +-
 .../users/components/UserCreationModal.vue    |  2 +-
 .../users/components/UserEditingModal.vue     |  2 +-
 .../components/UserPasswordChangeModal.vue    |  2 +-
 .../global-search/GlobalSearchModal.vue       |  2 +-
 ui/src/components/login/LoginModal.vue        |  2 +-
 .../posts/components/PostCreationModal.vue    |  6 ++---
 .../posts/components/PostSettingEditModal.vue |  6 ++---
 .../profile/components/EmailVerifyModal.vue   | 14 +++++------
 .../components/PasswordChangeModal.vue        |  2 +-
 .../PersonalAccessTokenCreationModal.vue      |  4 ++--
 .../components/ProfileEditingModal.vue        |  2 +-
 .../tabs/components/TotpConfigureModal.vue    |  6 ++---
 .../tabs/components/TotpDeletionModal.vue     |  6 ++---
 .../tabs/components/TwoFactorDisableModal.vue |  6 ++---
 .../tabs/components/TwoFactorEnableModal.vue  |  6 ++---
 29 files changed, 79 insertions(+), 79 deletions(-)

diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue b/ui/console-src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
index d91ef4670..6ef068d4f 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentGroupEditingModal.vue
@@ -23,7 +23,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<Group>({
   spec: {
     displayName: "",
@@ -60,7 +60,7 @@ const handleSave = async () => {
     }
 
     Toast.success(t("core.common.toast.save_success"));
-    modal.value.close();
+    modal.value?.close();
   } catch (e) {
     console.error("Failed to save attachment group", e);
   } finally {
@@ -112,7 +112,7 @@ onMounted(() => {
           @submit="$formkit.submit('attachment-group-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue b/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
index e3c2a8f83..c4c9e85d3 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentPoliciesModal.vue
@@ -33,7 +33,7 @@ const { t } = useI18n();
 const { policies, isLoading, handleFetchPolicies } = useFetchAttachmentPolicy();
 const { policyTemplates } = useFetchAttachmentPolicyTemplate();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const selectedPolicy = ref<Policy>();
 const selectedTemplateName = ref();
 
@@ -200,7 +200,7 @@ function getPolicyTemplateDisplayName(templateName: string) {
       </li>
     </ul>
     <template #footer>
-      <VButton @click="modal.close()">
+      <VButton @click="modal?.close()">
         {{ $t("core.common.buttons.close_and_shortcut") }}
       </VButton>
     </template>
diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue b/ui/console-src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
index 6e34053de..41a432041 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentPolicyEditingModal.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const formState = ref<Policy>({
   spec: {
@@ -167,7 +167,7 @@ const handleSave = async () => {
     }
 
     Toast.success(t("core.common.toast.save_success"));
-    modal.value.close();
+    modal.value?.close();
   } catch (e) {
     console.error("Failed to save attachment policy", e);
   } finally {
@@ -234,7 +234,7 @@ const modalTitle = props.policy
           @submit="$formkit.submit('attachment-policy-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue b/ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue
index 4b80b8b7f..241677284 100644
--- a/ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue
+++ b/ui/console-src/modules/contents/attachments/components/AttachmentUploadModal.vue
@@ -26,7 +26,7 @@ const { groups } = useFetchAttachmentGroup();
 const { policies, handleFetchPolicies } = useFetchAttachmentPolicy();
 const { policyTemplates } = useFetchAttachmentPolicyTemplate();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const selectedGroupName = useLocalStorage("attachment-upload-group", "");
 const selectedPolicyName = useLocalStorage("attachment-upload-policy", "");
 const policyEditingModal = ref(false);
@@ -169,7 +169,7 @@ const onEditingModalClose = async () => {
             ? ''
             : $t('core.attachment.upload_modal.filters.policy.not_select')
         "
-        :done-button-handler="() => modal.close()"
+        :done-button-handler="() => modal?.close()"
       />
     </div>
   </VModal>
diff --git a/ui/console-src/modules/contents/comments/components/ReplyCreationModal.vue b/ui/console-src/modules/contents/comments/components/ReplyCreationModal.vue
index fca40eaef..f1e6d41c8 100644
--- a/ui/console-src/modules/contents/comments/components/ReplyCreationModal.vue
+++ b/ui/console-src/modules/contents/comments/components/ReplyCreationModal.vue
@@ -39,7 +39,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<ReplyRequest>({
   raw: "",
   content: "",
@@ -67,7 +67,7 @@ const handleCreateReply = async () => {
       replyRequest: formState.value,
     });
 
-    modal.value.close();
+    modal.value?.close();
 
     Toast.success(
       t("core.comment.reply_modal.operations.submit.toast_success")
@@ -149,7 +149,7 @@ const onEmojiSelect = (emoji: { native: string }) => {
           @submit="$formkit.submit('create-reply-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
index 208b9e5a6..6907469d1 100644
--- a/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
+++ b/ui/console-src/modules/contents/pages/components/SinglePageSettingModal.vue
@@ -1,4 +1,14 @@
 <script lang="ts" setup>
+import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
+import { singlePageLabels } from "@/constants/labels";
+import { FormType } from "@/types/slug";
+import { apiClient } from "@/utils/api-client";
+import { toDatetimeLocal, toISOString } from "@/utils/date";
+import { randomUUID } from "@/utils/id";
+import useSlugify from "@console/composables/use-slugify";
+import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
+import { submitForm } from "@formkit/core";
+import type { SinglePage } from "@halo-dev/api-client";
 import {
   IconRefreshLine,
   Toast,
@@ -6,20 +16,10 @@ import {
   VModal,
   VSpace,
 } from "@halo-dev/components";
-import { computed, nextTick, ref, watch } from "vue";
-import type { SinglePage } from "@halo-dev/api-client";
 import { cloneDeep } from "lodash-es";
-import { apiClient } from "@/utils/api-client";
-import { useThemeCustomTemplates } from "@console/modules/interface/themes/composables/use-theme";
-import { singlePageLabels } from "@/constants/labels";
-import { randomUUID } from "@/utils/id";
-import { toDatetimeLocal, toISOString } from "@/utils/date";
-import { submitForm } from "@formkit/core";
-import AnnotationsForm from "@/components/form/AnnotationsForm.vue";
-import useSlugify from "@console/composables/use-slugify";
+import { computed, nextTick, ref, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { usePageUpdateMutate } from "../composables/use-page-update-mutate";
-import { FormType } from "@/types/slug";
 
 const props = withDefaults(
   defineProps<{
@@ -67,7 +67,7 @@ const formState = ref<SinglePage>({
     name: randomUUID(),
   },
 });
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const isSubmitting = ref(false);
 const publishing = ref(false);
 const publishCanceling = ref(false);
diff --git a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
index e81a0c47d..f2e222b70 100644
--- a/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/categories/components/CategoryEditingModal.vue
@@ -64,7 +64,7 @@ const formState = ref<Category>({
 });
 const selectedParentCategory = ref();
 const saving = ref(false);
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const isUpdateMode = !!props.category;
 
@@ -138,7 +138,7 @@ const handleSaveCategory = async () => {
       }
     }
 
-    modal.value.close();
+    modal.value?.close();
 
     queryClient.invalidateQueries({ queryKey: ["post-categories"] });
 
@@ -304,7 +304,7 @@ const { handleGenerateSlug } = useSlugify(
           @submit="$formkit.submit('category-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
index f43dec8e6..3992d41c5 100644
--- a/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
+++ b/ui/console-src/modules/contents/posts/tags/components/TagEditingModal.vue
@@ -59,7 +59,7 @@ const formState = ref<Tag>({
   },
 });
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const saving = ref(false);
 
@@ -101,7 +101,7 @@ const handleSaveTag = async () => {
       });
     }
 
-    modal.value.close();
+    modal.value?.close();
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -258,7 +258,7 @@ const { handleGenerateSlug } = useSlugify(
           @submit="$formkit.submit('tag-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
index 328e613b0..c83b3b59e 100644
--- a/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuEditingModal.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 const queryClient = useQueryClient();
 const { t } = useI18n();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const formState = ref<Menu>({
   spec: {
@@ -64,7 +64,7 @@ const handleSaveMenu = async () => {
 
     queryClient.invalidateQueries({ queryKey: ["menus"] });
 
-    modal.value.close();
+    modal.value?.close();
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -108,7 +108,7 @@ onMounted(() => {
           @submit="$formkit.submit('menu-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
index 22206f768..b85e1a557 100644
--- a/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
+++ b/ui/console-src/modules/interface/menus/components/MenuItemEditingModal.vue
@@ -28,7 +28,7 @@ const emit = defineEmits<{
 
 const { t } = useI18n();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const selectedParentMenuItem = ref<string>("");
 const formState = ref<MenuItem>({
   spec: {
@@ -121,7 +121,7 @@ const handleSaveMenuItem = async () => {
       emit("saved", data);
     }
 
-    modal.value.close();
+    modal.value?.close();
 
     Toast.success(t("core.common.toast.save_success"));
   } catch (e) {
@@ -381,7 +381,7 @@ onMounted(() => {
           @submit="$formkit.submit('menuitem-form')"
         >
         </SubmitButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/console-src/modules/interface/themes/components/ThemeListModal.vue b/ui/console-src/modules/interface/themes/components/ThemeListModal.vue
index 35183fc3b..6855e9c8f 100644
--- a/ui/console-src/modules/interface/themes/components/ThemeListModal.vue
+++ b/ui/console-src/modules/interface/themes/components/ThemeListModal.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   (event: "select", theme: Theme | undefined): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const tabs = ref<ThemeListTab[]>([
   {
@@ -66,7 +66,7 @@ watch(
   (value, oldValue) => {
     if (value && oldValue) {
       emit("select", value);
-      modal.value.close();
+      modal.value?.close();
     }
   }
 );
@@ -145,7 +145,7 @@ onMounted(() => {
     </div>
 
     <template #footer>
-      <VButton @click="modal.close()">
+      <VButton @click="modal?.close()">
         {{ $t("core.common.buttons.close") }}
       </VButton>
     </template>
diff --git a/ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue b/ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue
index da5b19b26..c1c1be672 100644
--- a/ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue
+++ b/ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue
@@ -41,7 +41,7 @@ const emit = defineEmits<{
 const { pluginToUpgrade } = toRefs(props);
 provide<Ref<Plugin | undefined>>("pluginToUpgrade", pluginToUpgrade);
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const tabs = ref<PluginInstallationTab[]>([
   {
@@ -131,12 +131,12 @@ onMounted(() => {
           :is="tab.component"
           v-bind="tab.props"
           v-if="tab.id === activeTabId"
-          @close-modal="modal.close()"
+          @close-modal="modal?.close()"
         />
       </template>
     </div>
     <template #footer>
-      <VButton @click="modal.close()">
+      <VButton @click="modal?.close()">
         {{ $t("core.common.buttons.close") }}
       </VButton>
     </template>
diff --git a/ui/console-src/modules/system/roles/components/RoleEditingModal.vue b/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
index 85885c8e9..eef528491 100644
--- a/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
+++ b/ui/console-src/modules/system/roles/components/RoleEditingModal.vue
@@ -27,7 +27,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { data: roleTemplates } = useQuery({
   queryKey: ["role-templates"],
diff --git a/ui/console-src/modules/system/users/components/GrantPermissionModal.vue b/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
index 92ed6cd9d..eae8707d6 100644
--- a/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
+++ b/ui/console-src/modules/system/users/components/GrantPermissionModal.vue
@@ -18,7 +18,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const selectedRole = ref("");
 const isSubmitting = ref(false);
 
diff --git a/ui/console-src/modules/system/users/components/UserCreationModal.vue b/ui/console-src/modules/system/users/components/UserCreationModal.vue
index 972f11106..9f7b1c6ac 100644
--- a/ui/console-src/modules/system/users/components/UserCreationModal.vue
+++ b/ui/console-src/modules/system/users/components/UserCreationModal.vue
@@ -20,7 +20,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<CreateUserRequest>({
   avatar: "",
   bio: "",
diff --git a/ui/console-src/modules/system/users/components/UserEditingModal.vue b/ui/console-src/modules/system/users/components/UserEditingModal.vue
index 3ceaa0fbf..484f70d56 100644
--- a/ui/console-src/modules/system/users/components/UserEditingModal.vue
+++ b/ui/console-src/modules/system/users/components/UserEditingModal.vue
@@ -30,7 +30,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<User>(cloneDeep(props.user));
 const isSubmitting = ref(false);
 
diff --git a/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue b/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
index 60ad62074..456b6b03d 100644
--- a/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
+++ b/ui/console-src/modules/system/users/components/UserPasswordChangeModal.vue
@@ -30,7 +30,7 @@ const initialFormState: PasswordChangeFormState = {
   password_confirm: "",
 };
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<PasswordChangeFormState>(cloneDeep(initialFormState));
 const isSubmitting = ref(false);
 
diff --git a/ui/src/components/global-search/GlobalSearchModal.vue b/ui/src/components/global-search/GlobalSearchModal.vue
index dbda6dad2..3194edc35 100644
--- a/ui/src/components/global-search/GlobalSearchModal.vue
+++ b/ui/src/components/global-search/GlobalSearchModal.vue
@@ -32,7 +32,7 @@ const emit = defineEmits<{
   (e: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const globalSearchInput = ref<HTMLInputElement | null>(null);
 const keyword = ref("");
 
diff --git a/ui/src/components/login/LoginModal.vue b/ui/src/components/login/LoginModal.vue
index 43ff8d986..12635e474 100644
--- a/ui/src/components/login/LoginModal.vue
+++ b/ui/src/components/login/LoginModal.vue
@@ -9,7 +9,7 @@ import { ref } from "vue";
 const userStore = useUserStore();
 const { t } = useI18n();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const onLoginSucceed = () => {
   modal.value?.close();
diff --git a/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue b/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
index a28d8840a..1e79750e7 100644
--- a/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostCreationModal.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
   (event: "success", post: Post): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["uc:create-post"],
@@ -84,7 +84,7 @@ const { mutate, isLoading } = useMutation({
     }
 
     emit("success", data);
-    modal.value.close();
+    modal.value?.close();
   },
   onError() {
     if (props.publish) {
@@ -133,7 +133,7 @@ function onSubmit(data: PostFormState) {
               : $t("core.common.buttons.save")
           }}
         </VButton>
-        <VButton type="default" @click="modal.close()">
+        <VButton type="default" @click="modal?.close()">
           {{ $t("core.common.buttons.close") }}
         </VButton>
       </VSpace>
diff --git a/ui/uc-src/modules/contents/posts/components/PostSettingEditModal.vue b/ui/uc-src/modules/contents/posts/components/PostSettingEditModal.vue
index 01df2d625..17522d21f 100644
--- a/ui/uc-src/modules/contents/posts/components/PostSettingEditModal.vue
+++ b/ui/uc-src/modules/contents/posts/components/PostSettingEditModal.vue
@@ -22,7 +22,7 @@ const emit = defineEmits<{
   (event: "success", post: Post): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { mutateAsync, isLoading } = usePostUpdateMutate();
 
@@ -51,7 +51,7 @@ async function onSubmit(data: PostFormState) {
 
   Toast.success(t("core.common.toast.save_success"));
   emit("success", newPost);
-  modal.value.close();
+  modal.value?.close();
 }
 </script>
 
@@ -92,7 +92,7 @@ async function onSubmit(data: PostFormState) {
         >
           {{ $t("core.common.buttons.save") }}
         </VButton>
-        <VButton type="default" @click="modal.close()">
+        <VButton type="default" @click="modal?.close()">
           {{ $t("core.common.buttons.close") }}
         </VButton>
       </VSpace>
diff --git a/ui/uc-src/modules/profile/components/EmailVerifyModal.vue b/ui/uc-src/modules/profile/components/EmailVerifyModal.vue
index 818ce8ddc..94efb0555 100644
--- a/ui/uc-src/modules/profile/components/EmailVerifyModal.vue
+++ b/ui/uc-src/modules/profile/components/EmailVerifyModal.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
-import { computed, ref } from "vue";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useUserStore } from "@/stores/user";
 import { apiClient } from "@/utils/api-client";
 import type { VerifyCodeRequest } from "@halo-dev/api-client";
-import { useUserStore } from "@/stores/user";
+import { Toast, VButton, VModal, VSpace } from "@halo-dev/components";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import { useIntervalFn } from "@vueuse/shared";
+import { computed, ref } from "vue";
 import { useI18n } from "vue-i18n";
 
 const queryClient = useQueryClient();
@@ -17,7 +17,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 // count down
 const timer = ref(0);
@@ -93,7 +93,7 @@ const { mutate: verifyEmail, isLoading: isVerifying } = useMutation({
     );
     queryClient.invalidateQueries({ queryKey: ["user-detail"] });
     fetchCurrentUser();
-    modal.value.close();
+    modal.value?.close();
   },
 });
 
@@ -163,7 +163,7 @@ function handleVerify({ password, code }: VerifyCodeRequest) {
         >
           {{ $t("core.common.buttons.verify") }}
         </VButton>
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.close_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/uc-src/modules/profile/components/PasswordChangeModal.vue b/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
index b03a6b4a0..a3f01f716 100644
--- a/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
+++ b/ui/uc-src/modules/profile/components/PasswordChangeModal.vue
@@ -16,7 +16,7 @@ interface PasswordChangeFormState {
   password_confirm?: string;
 }
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const formState = ref<PasswordChangeFormState>({
   oldPassword: "",
diff --git a/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue b/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
index e868a29ca..cc3a5f43b 100644
--- a/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
+++ b/ui/uc-src/modules/profile/components/PersonalAccessTokenCreationModal.vue
@@ -20,7 +20,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const formState = ref<
   Omit<PersonalAccessToken, "spec"> & {
@@ -249,7 +249,7 @@ const { mutate, isLoading } = useMutation({
           :text="$t('core.common.buttons.submit')"
           @submit="$formkit.submit('pat-creation-form')"
         />
-        <VButton @click="modal.close()">
+        <VButton @click="modal?.close()">
           {{ $t("core.common.buttons.cancel_and_shortcut") }}
         </VButton>
       </VSpace>
diff --git a/ui/uc-src/modules/profile/components/ProfileEditingModal.vue b/ui/uc-src/modules/profile/components/ProfileEditingModal.vue
index 1dcadd99d..a7f1a1fa4 100644
--- a/ui/uc-src/modules/profile/components/ProfileEditingModal.vue
+++ b/ui/uc-src/modules/profile/components/ProfileEditingModal.vue
@@ -26,7 +26,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref<InstanceType<typeof VModal>>();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 const formState = ref<User>(
   cloneDeep(userStore.currentUser) || {
     spec: {
diff --git a/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue b/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
index ca02cb544..8e7da1d38 100644
--- a/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
+++ b/ui/uc-src/modules/profile/tabs/components/TotpConfigureModal.vue
@@ -13,7 +13,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { data } = useQuery({
   queryKey: ["totp-auth-link"],
@@ -35,7 +35,7 @@ const { mutate, isLoading } = useMutation({
   onSuccess() {
     Toast.success("配置成功");
     queryClient.invalidateQueries({ queryKey: ["two-factor-settings"] });
-    modal.value.close();
+    modal.value?.close();
   },
 });
 
@@ -106,7 +106,7 @@ function onSubmit(data: TotpRequest) {
         >
           完成
         </VButton>
-        <VButton @click="modal.close()">关闭</VButton>
+        <VButton @click="modal?.close()">关闭</VButton>
       </VSpace>
     </template>
   </VModal>
diff --git a/ui/uc-src/modules/profile/tabs/components/TotpDeletionModal.vue b/ui/uc-src/modules/profile/tabs/components/TotpDeletionModal.vue
index 5c013e54f..95acb3389 100644
--- a/ui/uc-src/modules/profile/tabs/components/TotpDeletionModal.vue
+++ b/ui/uc-src/modules/profile/tabs/components/TotpDeletionModal.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["totp-deletion"],
@@ -25,7 +25,7 @@ const { mutate, isLoading } = useMutation({
   onSuccess() {
     Toast.success("停用成功");
     queryClient.invalidateQueries({ queryKey: ["two-factor-settings"] });
-    modal.value.close();
+    modal.value?.close();
   },
 });
 
@@ -52,7 +52,7 @@ function onSubmit(password: string) {
         >
           停用
         </VButton>
-        <VButton @click="modal.close()">关闭</VButton>
+        <VButton @click="modal?.close()">关闭</VButton>
       </VSpace>
     </template>
   </VModal>
diff --git a/ui/uc-src/modules/profile/tabs/components/TwoFactorDisableModal.vue b/ui/uc-src/modules/profile/tabs/components/TwoFactorDisableModal.vue
index f6070aaf7..5434fc967 100644
--- a/ui/uc-src/modules/profile/tabs/components/TwoFactorDisableModal.vue
+++ b/ui/uc-src/modules/profile/tabs/components/TwoFactorDisableModal.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["disable-two-factor"],
@@ -25,7 +25,7 @@ const { mutate, isLoading } = useMutation({
   onSuccess() {
     Toast.success("停用成功");
     queryClient.invalidateQueries({ queryKey: ["two-factor-settings"] });
-    modal.value.close();
+    modal.value?.close();
   },
 });
 
@@ -52,7 +52,7 @@ function onSubmit(password: string) {
         >
           停用
         </VButton>
-        <VButton @click="modal.close()">关闭</VButton>
+        <VButton @click="modal?.close()">关闭</VButton>
       </VSpace>
     </template>
   </VModal>
diff --git a/ui/uc-src/modules/profile/tabs/components/TwoFactorEnableModal.vue b/ui/uc-src/modules/profile/tabs/components/TwoFactorEnableModal.vue
index 622040954..db4e97886 100644
--- a/ui/uc-src/modules/profile/tabs/components/TwoFactorEnableModal.vue
+++ b/ui/uc-src/modules/profile/tabs/components/TwoFactorEnableModal.vue
@@ -11,7 +11,7 @@ const emit = defineEmits<{
   (event: "close"): void;
 }>();
 
-const modal = ref();
+const modal = ref<InstanceType<typeof VModal> | null>(null);
 
 const { mutate, isLoading } = useMutation({
   mutationKey: ["enable-two-factor"],
@@ -25,7 +25,7 @@ const { mutate, isLoading } = useMutation({
   onSuccess() {
     Toast.success("启用成功");
     queryClient.invalidateQueries({ queryKey: ["two-factor-settings"] });
-    modal.value.close();
+    modal.value?.close();
   },
 });
 
@@ -52,7 +52,7 @@ function onSubmit(password: string) {
         >
           启用
         </VButton>
-        <VButton @click="modal.close()">关闭</VButton>
+        <VButton @click="modal?.close()">关闭</VButton>
       </VSpace>
     </template>
   </VModal>