refactor: rendering conditions for plugin installation components (#5577)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.14.x

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

优化插件安装弹框组件的渲染时机，改为在未打开时不进行渲染，可以避免一些不必要的请求，尤其是在安装了应用市场插件之后。

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

Fixes #5573 

#### Special notes for your reviewer:

测试插件安装和升级功能是否正常即可。

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

```release-note
优化插件安装弹框组件的渲染时机，避免不必要的请求。
```

ui/console-src/modules/system/plugins/PluginList.vue

@@ -1,42 +1,34 @@
 <script lang="ts" setup>
 import {
+  Dialog,
   IconAddCircle,
   IconPlug,
   IconRefreshLine,
   VButton,
   VCard,
-  VEmpty,
-  VPageHeader,
-  VSpace,
-  VLoading,
-  Dialog,
   VDropdown,
   VDropdownItem,
+  VEmpty,
+  VLoading,
+  VPageHeader,
+  VSpace,
 } from "@halo-dev/components";
 import PluginListItem from "./components/PluginListItem.vue";
 import PluginInstallationModal from "./components/PluginInstallationModal.vue";
-import { computed, ref, onMounted } from "vue";
+import type { Ref } from "vue";
+import { computed, onMounted, provide, ref, watch } from "vue";
 import { apiClient } from "@/utils/api-client";
 import { usePermission } from "@/utils/permission";
 import { useQuery } from "@tanstack/vue-query";
 import type { Plugin } from "@halo-dev/api-client";
 import { useI18n } from "vue-i18n";
 import { useRouteQuery } from "@vueuse/router";
-import { watch } from "vue";
-import { provide } from "vue";
-import type { Ref } from "vue";
 import { usePluginBatchOperations } from "./composables/use-plugin";
 
 const { t } = useI18n();
 const { currentUserHasPermission } = usePermission();
 
-const pluginInstallationModal = ref(false);
-const pluginToUpgrade = ref<Plugin>();
-
-function handleOpenUploadModal(plugin?: Plugin) {
-  pluginToUpgrade.value = plugin;
-  pluginInstallationModal.value = true;
-}
+const pluginInstallationModalVisible = ref(false);
 
 const keyword = ref("");
 
@@ -120,7 +112,7 @@ onMounted(() => {
       confirmText: t("core.common.buttons.download"),
       cancelText: t("core.common.buttons.cancel"),
       onConfirm() {
-        handleOpenUploadModal();
+        pluginInstallationModalVisible.value = true;
       },
       onCancel() {
         routeRemoteDownloadUrl.value = null;
@@ -131,9 +123,11 @@ onMounted(() => {
 </script>
 <template>
   <PluginInstallationModal
-    v-if="currentUserHasPermission(['system:plugins:manage'])"
-    v-model:visible="pluginInstallationModal"
-    :plugin-to-upgrade="pluginToUpgrade"
+    v-if="
+      pluginInstallationModalVisible &&
+      currentUserHasPermission(['system:plugins:manage'])
+    "
+    @close="pluginInstallationModalVisible = false"
   />
 
   <VPageHeader :title="$t('core.plugin.title')">
@@ -144,7 +138,7 @@ onMounted(() => {
       <VButton
         v-permission="['system:plugins:manage']"
         type="secondary"
-        @click="handleOpenUploadModal()"
+        @click="pluginInstallationModalVisible = true"
       >
         <template #icon>
           <IconAddCircle class="h-full w-full" />
@@ -276,7 +270,7 @@ onMounted(() => {
               <VButton
                 v-permission="['system:plugins:manage']"
                 type="secondary"
-                @click="handleOpenUploadModal"
+                @click="pluginInstallationModalVisible = true"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
@@ -297,7 +291,6 @@ onMounted(() => {
             <PluginListItem
               :plugin="plugin"
               :is-selected="selectedNames.includes(plugin.metadata.name)"
-              @open-upgrade-modal="handleOpenUploadModal"
             />
           </li>
         </ul>