refactor: logic of theme management modal (#5966)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.16.x

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

优化主题管理弹窗的显示逻辑，改为在未打开弹窗组件的时候不渲染组件，减少不必要的请求。

before:

<img width="1656" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/96cfe2f0-4fef-4140-a014-1a96efb0e2c0">

after:

<img width="1660" alt="image" src="https://github.com/halo-dev/halo/assets/21301288/9624561f-ae94-43c9-8e05-32134ebb4091">

#### Which issue(s) this PR fixes:

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

```release-note
优化主题管理弹窗的显示逻辑，减少不必要的请求。
```

ui/console-src/modules/interface/themes/components/ThemeListModal.vue

@@ -2,14 +2,14 @@
 import { VButton, VModal, VTabbar } from "@halo-dev/components";
 import {
   computed,
-  ref,
-  watch,
-  provide,
   inject,
   markRaw,
   nextTick,
   onMounted,
+  provide,
+  ref,
   type Ref,
+  watch,
 } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
@@ -25,33 +25,15 @@ import { usePermission } from "@/utils/permission";
 const { t } = useI18n();
 const { currentUserHasPermission } = usePermission();
 
-const props = withDefaults(
-  defineProps<{
-    visible: boolean;
-  }>(),
-  {
-    visible: false,
-  }
-);
-
 const selectedTheme = inject<Ref<Theme | undefined>>("selectedTheme", ref());
 
-watch(
-  () => selectedTheme.value,
-  (value, oldValue) => {
-    if (value && oldValue) {
-      emit("select", value);
-      onVisibleChange(false);
-    }
-  }
-);
-
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
   (event: "select", theme: Theme | undefined): void;
 }>();
 
+const modal = ref();
+
 const tabs = ref<ThemeListTab[]>([
   {
     id: "installed",
@@ -79,6 +61,16 @@ const tabs = ref<ThemeListTab[]>([
   },
 ]);
 
+watch(
+  () => selectedTheme.value,
+  (value, oldValue) => {
+    if (value && oldValue) {
+      emit("select", value);
+      modal.value.close();
+    }
+  }
+);
+
 const activeTabId = ref();
 
 provide<Ref<string>>("activeTabId", activeTabId);
@@ -88,25 +80,16 @@ const modalTitle = computed(() => {
   return tab?.label;
 });
 
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
-
 // handle remote wordpress url from route
 const remoteDownloadUrl = useRouteQuery<string>("remote-download-url");
-watch(
+
-  () => props.visible,
+onMounted(() => {
-  (visible) => {
+  if (remoteDownloadUrl.value) {
-    if (visible && remoteDownloadUrl.value) {
+    nextTick(() => {
-      nextTick(() => {
+      activeTabId.value = "remote-download";
-        activeTabId.value = "remote-download";
+    });
-      });
-    }
   }
-);
+});
 
 const { pluginModules } = usePluginModuleStore();
 onMounted(() => {
@@ -135,11 +118,11 @@ onMounted(() => {
 </script>
 <template>
   <VModal
-    :visible="visible"
+    ref="modal"
     :width="920"
     height="calc(100vh - 20px)"
     :title="modalTitle"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <VTabbar
       v-model:active-id="activeTabId"
@@ -162,7 +145,7 @@ onMounted(() => {
     </div>
 
     <template #footer>
-      <VButton @click="onVisibleChange(false)">
+      <VButton @click="modal.close()">
         {{ $t("core.common.buttons.close") }}
       </VButton>
     </template>

ui/console-src/modules/interface/themes/components/list-tabs/InstalledThemes.vue

@@ -3,12 +3,12 @@ import {
   IconAddCircle,
   VButton,
   VEmpty,
-  VSpace,
   VLoading,
+  VSpace,
 } from "@halo-dev/components";
 import ThemePreviewModal from "../preview/ThemePreviewModal.vue";
 import ThemeListItem from "../ThemeListItem.vue";
-import { ref, inject, type Ref } from "vue";
+import { inject, ref, type Ref } from "vue";
 import type { Theme } from "@halo-dev/api-client";
 import { apiClient } from "@/utils/api-client";
 import { useQuery } from "@tanstack/vue-query";
@@ -48,11 +48,11 @@ const {
     });
   },
   refetchInterval(data) {
-    const deletingThemes = data?.filter(
+    const hasDeletingTheme = data?.some(
       (theme) => !!theme.metadata.deletionTimestamp
     );
 
-    return deletingThemes?.length ? 1000 : false;
+    return hasDeletingTheme ? 1000 : false;
   },
 });
 

ui/console-src/modules/interface/themes/layouts/ThemeLayout.vue

@@ -1,7 +1,14 @@
 <script lang="ts" setup>
 // core libs
-import { nextTick, onMounted, type Ref, computed, watch } from "vue";
+import {
-import { provide, ref } from "vue";
+  computed,
+  nextTick,
+  onMounted,
+  provide,
+  type Ref,
+  ref,
+  watch,
+} from "vue";
 import { useRoute, useRouter } from "vue-router";
 
 // libs
@@ -14,18 +21,18 @@ import BasicLayout from "@console/layouts/BasicLayout.vue";
 
 // components
 import {
+  Dialog,
   IconExchange,
   IconEye,
+  IconListSettings,
   IconPalette,
   VButton,
   VCard,
   VEmpty,
+  VLoading,
   VPageHeader,
   VSpace,
   VTabbar,
-  VLoading,
-  Dialog,
-  IconListSettings,
 } from "@halo-dev/components";
 import ThemeListModal from "../components/ThemeListModal.vue";
 import ThemePreviewModal from "../components/preview/ThemePreviewModal.vue";
@@ -268,7 +275,11 @@ onMounted(() => {
       </div>
     </div>
 
-    <ThemeListModal v-model:visible="themesModal" @select="onSelectTheme" />
+    <ThemeListModal
+      v-if="themesModal"
+      @close="themesModal = false"
+      @select="onSelectTheme"
+    />
     <ThemePreviewModal
       v-if="previewModal"
       :theme="selectedTheme"