refactor: improve plugin upgrade related code to resolve performance issue (#4410)

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.9.x

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

优化插件升级相关代码，解决插件管理列表的潜在性能问题。

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

Fixes #4409 

#### Special notes for your reviewer:

需要测试插件安装和升级功能

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

```release-note
优化 Console 端插件管理列表的性能
```

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

@@ -27,7 +27,13 @@ const { t } = useI18n();
 
 const { currentUserHasPermission } = usePermission();
 
-const pluginInstall = ref(false);
+const pluginUploadModal = ref(false);
+const pluginToUpgrade = ref<Plugin>();
+
+function handleOpenUploadModal(plugin?: Plugin) {
+  pluginToUpgrade.value = plugin;
+  pluginUploadModal.value = true;
+}
 
 const keyword = ref("");
 const page = ref(1);
@@ -99,7 +105,7 @@ onMounted(() => {
       confirmText: t("core.common.buttons.download"),
       cancelText: t("core.common.buttons.cancel"),
       onConfirm() {
-        pluginInstall.value = true;
+        handleOpenUploadModal();
       },
       onCancel() {
         routeRemoteDownloadUrl.value = null;
@@ -111,7 +117,8 @@ onMounted(() => {
 <template>
   <PluginUploadModal
     v-if="currentUserHasPermission(['system:plugins:manage'])"
-    v-model:visible="pluginInstall"
+    v-model:visible="pluginUploadModal"
+    :upgrade-plugin="pluginToUpgrade"
   />
 
   <VPageHeader :title="$t('core.plugin.title')">
@@ -122,7 +129,7 @@ onMounted(() => {
       <VButton
         v-permission="['system:plugins:manage']"
         type="secondary"
-        @click="pluginInstall = true"
+        @click="handleOpenUploadModal()"
       >
         <template #icon>
           <IconAddCircle class="h-full w-full" />
@@ -219,7 +226,7 @@ onMounted(() => {
               <VButton
                 v-permission="['system:plugins:manage']"
                 type="secondary"
-                @click="pluginInstall = true"
+                @click="handleOpenUploadModal"
               >
                 <template #icon>
                   <IconAddCircle class="h-full w-full" />
@@ -237,7 +244,10 @@ onMounted(() => {
           role="list"
         >
           <li v-for="plugin in data" :key="plugin.metadata.name">
-            <PluginListItem :plugin="plugin" />
+            <PluginListItem
+              :plugin="plugin"
+              @open-upgrade-modal="handleOpenUploadModal"
+            />
           </li>
         </ul>
       </Transition>

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

@@ -11,8 +11,7 @@ import {
   VDropdown,
   VDropdownDivider,
 } from "@halo-dev/components";
-import PluginUploadModal from "./PluginUploadModal.vue";
-import { ref, toRefs } from "vue";
+import { toRefs } from "vue";
 import { usePluginLifeCycle } from "../composables/use-plugin";
 import type { Plugin } from "@halo-dev/api-client";
 import { formatDatetime } from "@/utils/date";
@@ -32,9 +31,11 @@ const props = withDefaults(
   }
 );
 
-const { plugin } = toRefs(props);
+const emit = defineEmits<{
+  (event: "open-upgrade-modal", plugin?: Plugin): void;
+}>();
 
-const upgradeModal = ref(false);
+const { plugin } = toRefs(props);
 
 const { getFailedMessage, changeStatus, uninstall } =
   usePluginLifeCycle(plugin);
@@ -65,7 +66,6 @@ const handleResetSettingConfig = async () => {
 };
 </script>
 <template>
-  <PluginUploadModal v-model:visible="upgradeModal" :upgrade-plugin="plugin" />
   <VEntity>
     <template #start>
       <VEntityField>
@@ -145,7 +145,7 @@ const handleResetSettingConfig = async () => {
       >
         {{ $t("core.common.buttons.detail") }}
       </VDropdownItem>
-      <VDropdownItem @click="upgradeModal = true">
+      <VDropdownItem @click="emit('open-upgrade-modal', plugin)">
         {{ $t("core.common.buttons.upgrade") }}
       </VDropdownItem>
       <VDropdownDivider />