refactor: typing component template refs for VModal (#5994)

#### 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
```

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>

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>

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>

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>

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>

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);

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>

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>

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>

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>

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>

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>

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"],

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);
 

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: "",

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);
 

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);
 

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("");
 

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();

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>

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>

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>

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: "",

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>

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: {

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>

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>

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>

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>