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 pluginInstallationModalVisible = ref(false);
-const pluginToUpgrade = ref<Plugin>();
-
-function handleOpenUploadModal(plugin?: Plugin) {
-  pluginToUpgrade.value = plugin;
-  pluginInstallationModal.value = true;
-}
 
 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-if="
-    v-model:visible="pluginInstallationModal"
+      pluginInstallationModalVisible &&
-    :plugin-to-upgrade="pluginToUpgrade"
+      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>

ui/console-src/modules/system/plugins/components/PluginInstallationModal.vue

@@ -1,21 +1,25 @@
 <script lang="ts" setup>
-import { VModal, VButton, VTabbar } from "@halo-dev/components";
+import { VButton, VModal, VTabbar } from "@halo-dev/components";
 import type { Plugin } from "@halo-dev/api-client";
-import { computed, ref, watch } from "vue";
+import {
+  computed,
+  markRaw,
+  nextTick,
+  onMounted,
+  provide,
+  type Ref,
+  ref,
+  toRefs,
+} from "vue";
 import { useI18n } from "vue-i18n";
 import { useRouteQuery } from "@vueuse/router";
-import { provide } from "vue";
-import { toRefs } from "vue";
-import type { Ref } from "vue";
 import LocalUpload from "./installation-tabs/LocalUpload.vue";
 import RemoteDownload from "./installation-tabs/RemoteDownload.vue";
-import { markRaw } from "vue";
 import type {
   PluginInstallationTab,
   PluginModule,
 } from "@halo-dev/console-shared";
 import { usePluginModuleStore } from "@/stores/plugin";
-import { onMounted } from "vue";
 import { usePermission } from "@/utils/permission";
 
 const { t } = useI18n();
@@ -23,23 +27,22 @@ const { currentUserHasPermission } = usePermission();
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     pluginToUpgrade?: Plugin;
   }>(),
   {
-    visible: false,
     pluginToUpgrade: undefined,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
 const { pluginToUpgrade } = toRefs(props);
 provide<Ref<Plugin | undefined>>("pluginToUpgrade", pluginToUpgrade);
 
+const modal = ref();
+
 const tabs = ref<PluginInstallationTab[]>([
   {
     id: "local",
@@ -65,26 +68,18 @@ const modalTitle = computed(() => {
     : t("core.plugin.upload_modal.titles.install");
 });
 
-const handleVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    emit("close");
-  }
-};
-
 // handle remote download url from route
 const routeRemoteDownloadUrl = useRouteQuery<string | null>(
   "remote-download-url"
 );
 
-watch(
+onMounted(() => {
-  () => props.visible,
+  if (routeRemoteDownloadUrl.value) {
-  (visible) => {
+    nextTick(() => {
-    if (visible && routeRemoteDownloadUrl.value) {
       activeTabId.value = "remote";
-    }
+    });
   }
-);
+});
 
 const { pluginModules } = usePluginModuleStore();
 onMounted(() => {
@@ -114,12 +109,12 @@ onMounted(() => {
 </script>
 <template>
   <VModal
-    :visible="visible"
+    ref="modal"
     :title="modalTitle"
     :centered="true"
     :width="920"
     height="calc(100vh - 20px)"
-    @update:visible="handleVisibleChange"
+    @close="emit('close')"
   >
     <VTabbar
       v-model:active-id="activeTabId"
@@ -136,12 +131,12 @@ onMounted(() => {
           :is="tab.component"
           v-bind="tab.props"
           v-if="tab.id === activeTabId"
-          @close-modal="handleVisibleChange(false)"
+          @close-modal="modal.close()"
         />
       </template>
     </div>
     <template #footer>
-      <VButton @click="handleVisibleChange(false)">
+      <VButton @click="modal.close()">
         {{ $t("core.common.buttons.close") }}
       </VButton>
     </template>

ui/console-src/modules/system/plugins/components/PluginListItem.vue

@@ -1,21 +1,20 @@
 <script lang="ts" setup>
 import {
-  VEntity,
-  VEntityField,
   Dialog,
   Toast,
-  VDropdownItem,
   VDropdownDivider,
+  VDropdownItem,
+  VEntity,
+  VEntityField,
 } from "@halo-dev/components";
-import { inject, toRefs, markRaw } from "vue";
+import type { Ref } from "vue";
+import { computed, inject, markRaw, ref, toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
 import { formatDatetime } from "@/utils/date";
 import { usePermission } from "@/utils/permission";
 import { apiClient } from "@/utils/api-client";
 import { useI18n } from "vue-i18n";
-import type { Ref } from "vue";
-import { ref } from "vue";
 import { useEntityFieldItemExtensionPoint } from "@console/composables/use-entity-extension-points";
 import { useOperationItemExtensionPoint } from "@console/composables/use-operation-extension-points";
 import { useRouter } from "vue-router";
@@ -25,8 +24,8 @@ import LogoField from "./entity-fields/LogoField.vue";
 import StatusDotField from "@/components/entity-fields/StatusDotField.vue";
 import AuthorField from "./entity-fields/AuthorField.vue";
 import SwitchField from "./entity-fields/SwitchField.vue";
-import { computed } from "vue";
 import type { EntityFieldItem, OperationItem } from "@halo-dev/console-shared";
+import PluginInstallationModal from "@console/modules/system/plugins/components/PluginInstallationModal.vue";
 
 const { currentUserHasPermission } = usePermission();
 const { t } = useI18n();
@@ -40,16 +39,14 @@ const props = withDefaults(
   { isSelected: false }
 );
 
-const emit = defineEmits<{
-  (event: "open-upgrade-modal", plugin?: Plugin): void;
-}>();
-
 const { plugin } = toRefs(props);
 
 const selectedNames = inject<Ref<string[]>>("selectedNames", ref([]));
 
 const { getFailedMessage, uninstall } = usePluginLifeCycle(plugin);
 
+const pluginUpgradeModalVisible = ref(false);
+
 const handleResetSettingConfig = async () => {
   Dialog.warning({
     title: t("core.plugin.operations.reset.title"),
@@ -97,7 +94,7 @@ const { operationItems } = useOperationItemExtensionPoint<Plugin>(
       label: t("core.common.buttons.upgrade"),
       permissions: [],
       action: () => {
-        emit("open-upgrade-modal", props.plugin);
+        pluginUpgradeModalVisible.value = true;
       },
     },
     {
@@ -257,4 +254,13 @@ const { startFields, endFields } = useEntityFieldItemExtensionPoint<Plugin>(
       <EntityDropdownItems :dropdown-items="operationItems" :item="plugin" />
     </template>
   </VEntity>
+
+  <PluginInstallationModal
+    v-if="
+      pluginUpgradeModalVisible &&
+      currentUserHasPermission(['system:plugins:manage'])
+    "
+    :plugin-to-upgrade="plugin"
+    @close="pluginUpgradeModalVisible = false"
+  />
 </template>