在多个组件中添加渲染模式支持，优化插件配置和数据加载逻辑，增强用户体验和代码可读性

src/components/misc/DashboardElement.vue

@@ -28,6 +28,33 @@ const props = defineProps({
 
 const emit = defineEmits(['update:refreshStatus'])
 
+// 插件UI渲染模式 ('vuetify' 或 'vue')
+const pluginRenderMode = computed(() => props.config?.render_mode || 'vuetify')
+
+// Vue 模式：动态加载的组件
+const dynamicPluginComponent = computed(() => {
+  // 确保 config 存在并且 component_url 也存在
+  if (pluginRenderMode.value === 'vue' && props.config?.component_url) {
+    const url = props.config.component_url
+    return defineAsyncComponent(() =>
+      import(/* @vite-ignore */ url)
+        .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', '组件加载失败') }
+        }),
+    )
+  }
+  return null
+})
+
 onUnmounted(() => {
   // 组件卸载时禁用刷新状态
   emit('update:refreshStatus', false)
@@ -46,34 +73,49 @@ onUnmounted(() => {
   <MediaServerPlaying v-else-if="config?.id === 'playing'" />
   <MediaServerLatest v-else-if="config?.id === 'latest'" />
   <!-- 插件仪表板 -->
-  <VHover v-else-if="!isNullOrEmptyObject(props.config)">
-    <template #default="hover">
-      <!-- 无边框 -->
-      <div v-if="props.config?.attrs.border === false">
-        <VCard v-bind="hover.props">
-          <VCardText class="p-0">
+  <template v-else-if="!isNullOrEmptyObject(props.config)">
+    <!-- Vue 渲染模式 -->
+    <div v-if="pluginRenderMode === 'vue' && dynamicPluginComponent">
+      <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" />
+      <!-- Vue 模式下也可以显示拖拽句柄 -->
+      <div class="absolute right-5 top-5">
+        <VIcon class="cursor-move">mdi-drag</VIcon>
+      </div>
+    </div>
+    <!-- Vuetify 渲染模式 -->
+    <VHover v-else-if="pluginRenderMode === 'vuetify'">
+      <template #default="hover">
+        <!-- 无边框 -->
+        <div v-if="props.config?.attrs.border === false">
+          <VCard v-bind="hover.props">
+            <VCardText class="p-0">
+              <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
+            </VCardText>
+            <div v-if="hover.isHovering" class="absolute right-5 top-5">
+              <VIcon class="cursor-move">mdi-drag</VIcon>
+            </div>
+          </VCard>
+        </div>
+        <!-- 有边框 -->
+        <VCard v-else v-bind="hover.props">
+          <VCardItem v-if="props.config?.attrs.border !== false">
+            <template #append>
+              <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+            </template>
+            <VCardTitle>
+              {{ props.config?.attrs?.title ?? props.config?.name }}
+            </VCardTitle>
+            <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
+          </VCardItem>
+          <VCardText>
             <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
           </VCardText>
-          <div v-if="hover.isHovering" class="absolute right-5 top-5">
-            <VIcon class="cursor-move">mdi-drag</VIcon>
-          </div>
         </VCard>
-      </div>
-      <!-- 有边框 -->
-      <VCard v-else v-bind="hover.props">
-        <VCardItem v-if="props.config?.attrs.border !== false">
-          <template #append>
-            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
-          </template>
-          <VCardTitle>
-            {{ props.config?.attrs?.title ?? props.config?.name }}
-          </VCardTitle>
-          <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
-        </VCardItem>
-        <VCardText>
-          <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+      </template>
+    </VHover>
+    <!-- 未知模式或错误 -->
+    <VCard v-else>
+      <VCardText>无法渲染插件仪表盘部件: 未知渲染模式或配置错误</VCardText>
+    </VCard>
+  </template>
 </template>