添加 @originjs/vite-plugin-federation 依赖，并在多个组件中实现远程组件加载功能

src/components/dialog/PluginConfigDialog.vue

@@ -7,6 +7,7 @@ import { useToast } from 'vue-toast-notification'
 import FormRender from '../render/FormRender.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
+import { loadRemoteComponent, clearRemoteComponentCache } from '@/utils/remoteFederationLoader'
 
 // 国际化
 const { t } = useI18n()
@@ -51,32 +52,12 @@ const vueComponentUrl = ref<string | null>(null)
 //  Vue 模式：动态加载的组件
 const dynamicComponent = computed(() => {
   if (renderMode.value === 'vue' && vueComponentUrl.value) {
-    const url = vueComponentUrl.value
-    return defineAsyncComponent(() =>
-      api
-        .get(url)
-        .then((response: any) => {
-          if (response) {
-            const blob = new Blob([response.data], { type: 'text/javascript' })
-            const blobUrl = URL.createObjectURL(blob)
-            return import(/* @vite-ignore */ blobUrl)
-          } else {
-            return { render: () => h('div', '组件加载失败: 未读取到文件数据') }
-          }
-        })
-        .then(module => {
-          if (module.default) {
-            return module.default
-          } else {
-            console.error(`无法从 ${url} 加载默认导出的 Vue 组件`)
-            return { render: () => h('div', '组件加载失败: 无默认导出') }
-          }
-        })
-        .catch(err => {
-          console.error(`无法加载插件组件: ${url}`, err)
-          return { render: () => h('div', `组件加载失败：${err}`) }
-        }),
-    )
+    return loadRemoteComponent(vueComponentUrl.value, {
+      onError: error => {
+        console.error(`加载插件组件失败: ${vueComponentUrl.value}`, error)
+        $toast.error(`加载插件组件失败: ${error.message || '未知错误'}`)
+      },
+    })
   }
   return null
 })
@@ -88,6 +69,11 @@ async function loadPluginUIData() {
   pluginFormItems = []
   pluginConfigForm.value = {}
   renderMode.value = 'vuetify'
+
+  // 如果存在旧的组件URL，清除其缓存
+  if (vueComponentUrl.value) {
+    clearRemoteComponentCache(vueComponentUrl.value)
+  }
   vueComponentUrl.value = null
 
   try {
@@ -151,6 +137,13 @@ async function savePluginConf() {
 onBeforeMount(async () => {
   await loadPluginUIData()
 })
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  if (vueComponentUrl.value) {
+    clearRemoteComponentCache(vueComponentUrl.value)
+  }
+})
 </script>
 <template>
   <VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">

src/components/dialog/PluginDataDialog.vue

@@ -4,6 +4,7 @@ import type { Plugin } from '@/api/types'
 import PageRender from '@/components/render/PageRender.vue'
 import api from '@/api'
 import { useToast } from 'vue-toast-notification'
+import { loadRemoteComponent, clearRemoteComponentCache } from '@/utils/remoteFederationLoader'
 
 // 输入参数
 const props = defineProps({
@@ -38,32 +39,12 @@ let pluginPageItems = ref([])
 //  Vue 模式：动态加载的组件
 const dynamicComponent = computed(() => {
   if (renderMode.value === 'vue' && vueComponentUrl.value) {
-    const url = vueComponentUrl.value
-    return defineAsyncComponent(() =>
-      api
-        .get(url)
-        .then((response: any) => {
-          if (response) {
-            const blob = new Blob([response.data], { type: 'text/javascript' })
-            const blobUrl = URL.createObjectURL(blob)
-            return import(/* @vite-ignore */ blobUrl)
-          } else {
-            return { render: () => h('div', '组件加载失败: 未读取到文件数据') }
-          }
-        })
-        .then(module => {
-          if (module.default) {
-            return module.default
-          } else {
-            console.error(`无法从 ${url} 加载默认导出的 Vue 组件`)
-            return { render: () => h('div', '组件加载失败: 无默认导出') }
-          }
-        })
-        .catch(err => {
-          console.error(`无法加载插件组件: ${url}`, err)
-          return { render: () => h('div', `组件加载失败：${err}`) }
-        }),
-    )
+    return loadRemoteComponent(vueComponentUrl.value, {
+      onError: error => {
+        console.error(`加载插件组件失败: ${vueComponentUrl.value}`, error)
+        $toast.error(`加载插件组件失败: ${error.message || '未知错误'}`)
+      },
+    })
   }
   return null
 })
@@ -73,6 +54,11 @@ async function loadPluginUIData() {
   isRefreshed.value = false
   pluginPageItems.value = []
   renderMode.value = 'vuetify'
+
+  // 如果存在旧的组件URL，清除其缓存
+  if (vueComponentUrl.value) {
+    clearRemoteComponentCache(vueComponentUrl.value)
+  }
   vueComponentUrl.value = null
 
   try {
@@ -105,6 +91,13 @@ function handleAction() {
 onMounted(() => {
   loadPluginUIData()
 })
+
+// 组件卸载时清理资源
+onUnmounted(() => {
+  if (vueComponentUrl.value) {
+    clearRemoteComponentCache(vueComponentUrl.value)
+  }
+})
 </script>
 <template>
   <VDialog scrollable max-width="80rem" :fullscreen="!display.mdAndUp.value">

src/components/misc/DashboardElement.vue

@@ -13,6 +13,7 @@ import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 import DashboardRender from '@/components/render/DashboardRender.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import api from '@/api'
+import { loadRemoteComponent, clearRemoteComponentCache } from '@/utils/remoteFederationLoader'
 
 // 输入参数
 const props = defineProps({
@@ -36,30 +37,11 @@ const pluginRenderMode = computed(() => props.config?.render_mode || 'vuetify')
 const dynamicPluginComponent = computed(() => {
   // 确保 config 存在并且 component_url 也存在
   if (pluginRenderMode.value === 'vue' && props.config?.component_url) {
-    const url = props.config?.component_url
-    return defineAsyncComponent(() =>
-      api
-        .get(url)
-        .then((response: any) => {
-          if (response) {
-            const blob = new Blob([response.data], { type: 'text/javascript' })
-            const blobUrl = URL.createObjectURL(blob)
-            return import(/* @vite-ignore */ blobUrl)
-          } else {
-            return { render: () => h('div', '组件加载失败: 未读取到文件数据') }
-          }
-        })
-        .then(module => {
-          if (module.default) {
-            return module.default
-          } else {
-            return { render: () => h('div', '组件加载失败: 无默认导出') }
-          }
-        })
-        .catch(err => {
-          return { render: () => h('div', '组件加载失败') }
-        }),
-    )
+    return loadRemoteComponent(props.config.component_url, {
+      onError: error => {
+        console.error(`加载插件组件失败: ${props.config?.component_url}`, error)
+      },
+    })
   }
   return null
 })
@@ -67,6 +49,11 @@ const dynamicPluginComponent = computed(() => {
 onUnmounted(() => {
   // 组件卸载时禁用刷新状态
   emit('update:refreshStatus', false)
+
+  // 清理远程组件缓存
+  if (pluginRenderMode.value === 'vue' && props.config?.component_url) {
+    clearRemoteComponentCache(props.config.component_url)
+  }
 })
 </script>
 <template>