更新模块联邦文档，调整远程组件API路径格式，优化组件加载逻辑，移除不必要的注册步骤，增强代码可读性。

2026-05-24 01:39:42 +08:00 · 2025-05-06 11:44:08 +08:00
parent d349d2b500
commit 520180f6f5
8 changed files with 38 additions and 94 deletions
--- a/src/components/dialog/PluginConfigDialog.vue
+++ b/src/components/dialog/PluginConfigDialog.vue
@@ -8,13 +8,7 @@ import FormRender from '../render/FormRender.vue'
 import ProgressDialog from '../dialog/ProgressDialog.vue'
 import { useI18n } from 'vue-i18n'
 import { defineAsyncComponent } from 'vue'
-import {
-  loadRemoteComponent,
-  clearRemoteComponentCache,
-  registerRemotePlugin,
-  isRemoteComponentLoaded,
-  ComponentType,
-} from '@/utils/federationLoader'
+import { loadRemoteComponent, clearRemoteComponentCache, ComponentType } from '@/utils/federationLoader'

 // 国际化
 const { t } = useI18n()
@@ -64,14 +58,8 @@ const dynamicComponent = defineAsyncComponent({
    }

    try {
-      componentMounted.value = false
-
-      // 确保插件已注册
-      if (!isRemoteComponentLoaded(props.plugin.id, ComponentType.CONFIG)) {
-        await registerRemotePlugin(props.plugin.id)
-      }
-
      // 加载配置组件
+      componentMounted.value = false
      const component = await loadRemoteComponent(props.plugin.id, ComponentType.CONFIG)
      componentMounted.value = true

@@ -82,7 +70,6 @@ const dynamicComponent = defineAsyncComponent({
      return component
    } catch (error: any) {
      console.error(`加载插件配置组件失败: ${props.plugin.id}`, error)
-      $toast.error(`加载插件组件失败: ${error.message || '未知错误'}`)
      return {
        render: () => h('div', { class: 'text-error pa-4' }, `加载失败: ${error.message || '未知错误'}`),
      }
@@ -91,7 +78,7 @@ const dynamicComponent = defineAsyncComponent({
  loadingComponent: {
    render: () =>
      h('div', { class: 'text-center pa-4' }, [
-        h('v-progress-circular', { indeterminate: true, class: 'mr-2' }),
+        h('VProgressCircular', { indeterminate: true, class: 'mr-2' }),
        '加载组件中...',
      ]),
  },
@@ -110,7 +97,6 @@ async function loadPluginUIData() {
  pluginFormItems = []
  pluginConfigForm.value = {}
  renderMode.value = 'vuetify'
-  componentMounted.value = false

  // 清除组件缓存
  if (props.plugin?.id) {
@@ -126,11 +112,6 @@ async function loadPluginUIData() {
    }
    renderMode.value = result.render_mode
    if (renderMode.value === 'vue') {
-      // 注册远程插件 (如果提供了组件URL，则使用它)
-      if (props.plugin?.id) {
-        registerRemotePlugin(props.plugin.id, result.component_url)
-      }
-
      // Vue模式下，初始配置在同一个API返回
      if (!isNullOrEmptyObject(result.model)) {
        pluginConfigForm.value = result.model
@@ -191,7 +172,8 @@ onUnmounted(() => {
    <VCard :title="`${props.plugin?.plugin_name} - ${t('dialog.pluginConfig.title')}`" class="rounded-t">
      <VDialogCloseBtn @click="emit('close')" />
      <VDivider />
-      <VCardText v-if="isRefreshed">
+      <LoadingBanner v-if="!isRefreshed" class="mt-5" />
+      <VCardText v-else="isRefreshed">
        <!-- Vuetify 渲染模式 -->
        <div v-if="renderMode === 'vuetify'">
          <FormRender v-for="(item, index) in pluginFormItems" :key="index" :config="item" :model="pluginConfigForm" />
@@ -201,8 +183,6 @@ onUnmounted(() => {
        <div v-else-if="renderMode === 'vue'">
          <component :is="dynamicComponent" :initial-config="pluginConfigForm" @save="handleVueComponentSave" />
        </div>
-        <!-- 加载中或错误 -->
-        <div v-else><VProgressCircular indeterminate /> 加载中...</div>
      </VCardText>
      <VCardActions class="pt-3">
        <VBtn v-if="props.plugin?.has_page" @click="emit('switch')" variant="outlined" color="info">
--- a/src/components/dialog/PluginDataDialog.vue
+++ b/src/components/dialog/PluginDataDialog.vue
@@ -5,13 +5,7 @@ import PageRender from '@/components/render/PageRender.vue'
 import api from '@/api'
 import { useToast } from 'vue-toast-notification'
 import { defineAsyncComponent } from 'vue'
-import {
-  loadRemoteComponent,
-  clearRemoteComponentCache,
-  registerRemotePlugin,
-  isRemoteComponentLoaded,
-  ComponentType,
-} from '@/utils/federationLoader'
+import { loadRemoteComponent, clearRemoteComponentCache, ComponentType } from '@/utils/federationLoader'

 // 输入参数
 const props = defineProps({
@@ -51,14 +45,8 @@ const dynamicComponent = defineAsyncComponent({
    }

    try {
-      componentMounted.value = false
-
-      // 确保插件已注册
-      if (!isRemoteComponentLoaded(props.plugin.id, ComponentType.PAGE)) {
-        await registerRemotePlugin(props.plugin.id)
-      }
-
      // 加载页面组件
+      componentMounted.value = false
      const component = await loadRemoteComponent(props.plugin.id, ComponentType.PAGE)
      componentMounted.value = true

@@ -69,7 +57,6 @@ const dynamicComponent = defineAsyncComponent({
      return component
    } catch (error: any) {
      console.error(`加载插件页面组件失败: ${props.plugin.id}`, error)
-      $toast.error(`加载插件组件失败: ${error.message || '未知错误'}`)
      return {
        render: () => h('div', { class: 'text-error pa-4' }, `加载失败: ${error.message || '未知错误'}`),
      }
@@ -78,7 +65,7 @@ const dynamicComponent = defineAsyncComponent({
  loadingComponent: {
    render: () =>
      h('div', { class: 'text-center pa-4' }, [
-        h('v-progress-circular', { indeterminate: true, class: 'mr-2' }),
+        h('VProgressCircular', { indeterminate: true, class: 'mr-2' }),
        '加载组件中...',
      ]),
  },
@@ -95,7 +82,6 @@ async function loadPluginUIData() {
  isRefreshed.value = false
  pluginPageItems.value = []
  renderMode.value = 'vuetify'
-  componentMounted.value = false

  // 清除组件缓存
  if (props.plugin?.id) {
@@ -108,14 +94,8 @@ async function loadPluginUIData() {
      console.error(`插件 ${props.plugin?.plugin_name} UI数据加载失败：无效的响应`)
      return
    }
-
    renderMode.value = result.render_mode
-    if (renderMode.value === 'vue') {
-      // 注册远程插件 (如果提供了组件URL，则使用它)
-      if (props.plugin?.id) {
-        registerRemotePlugin(props.plugin.id, result.component_url)
-      }
-    } else {
+    if (renderMode.value === 'vuetify') {
      // Vuetify模式
      pluginPageItems.value = result.page || []
    }
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -13,13 +13,7 @@ import MediaServerPlaying from '@/views/dashboard/MediaServerPlaying.vue'
 import DashboardRender from '@/components/render/DashboardRender.vue'
 import { isNullOrEmptyObject } from '@/@core/utils'
 import { defineAsyncComponent } from 'vue'
-import {
-  loadRemoteComponent,
-  clearRemoteComponentCache,
-  registerRemotePlugin,
-  isRemoteComponentLoaded,
-  ComponentType,
-} from '@/utils/federationLoader'
+import { loadRemoteComponent, clearRemoteComponentCache, ComponentType } from '@/utils/federationLoader'

 // 输入参数
 const props = defineProps({
@@ -50,14 +44,8 @@ const dynamicPluginComponent = defineAsyncComponent({
    }

    try {
-      componentMounted.value = false
-
-      // 确保插件已注册
-      if (!isRemoteComponentLoaded(props.config.id, ComponentType.DASHBOARD)) {
-        await registerRemotePlugin(props.config.id, props.config.component_url)
-      }
-
      // 加载仪表板组件
+      componentMounted.value = false
      const component = await loadRemoteComponent(props.config.id, ComponentType.DASHBOARD)
      componentMounted.value = true

@@ -76,7 +64,7 @@ const dynamicPluginComponent = defineAsyncComponent({
  loadingComponent: {
    render: () =>
      h('div', { class: 'text-center pa-4' }, [
-        h('v-progress-circular', { indeterminate: true, class: 'mr-2' }),
+        h('VProgressCircular', { indeterminate: true, class: 'mr-2' }),
        '加载组件中...',
      ]),
  },