优化 Vue 渲染模式下的组件结构，将动态组件包裹在 VCard 和 VCardText 中，以提升布局一致性和可读性，同时在 DashboardElement.vue 中为动态插件组件添加 API 属性。

src/components/dialog/PluginConfigDialog.vue

@@ -182,16 +182,19 @@ onBeforeMount(async () => {
       </VCardActions>
     </VCard>
     <!-- Vue 渲染模式 -->
-    <div v-else-if="renderMode === 'vue'">
+    <VCard v-else-if="renderMode === 'vue'">
-      <component
+      <VCardText class="pa-0">
-        :is="dynamicComponent"
+        <component
-        :initial-config="pluginConfigForm"
+          :is="dynamicComponent"
-        :api="api"
+          :initial-config="pluginConfigForm"
-        @save="handleVueComponentSave"
+          :api="api"
-        @switch="emit('switch')"
+          @save="handleVueComponentSave"
-        @close="emit('close')"
+          @switch="emit('switch')"
-      />
+          @close="emit('close')"
-    </div>
+        />
+      </VCardText>
+    </VCard>
+
     <!-- 进度框 -->
     <ProgressDialog v-if="progressDialog" v-model="progressDialog" :text="progressText" />
   </VDialog>

src/components/dialog/PluginDataDialog.vue

@@ -141,8 +141,16 @@ onMounted(() => {
       />
     </VCard>
     <!-- Vue 渲染模式 -->
-    <div v-else-if="renderMode === 'vue'">
+    <VCard v-else-if="renderMode === 'vue'">
-      <component :is="dynamicComponent" :api="api" @action="handleAction" @switch="emit('switch')" @close="emit('close')" />
+      <VCardText class="pa-0">
-    </div>
+        <component
+          :is="dynamicComponent"
+          :api="api"
+          @action="handleAction"
+          @switch="emit('switch')"
+          @close="emit('close')"
+        />
+      </VCardText>
+    </VCard>
   </VDialog>
 </template>

src/components/misc/DashboardElement.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, computed, defineAsyncComponent } from 'vue'
+import api from '@/api'
 import { DashboardItem } from '@/api/types'
 import AnalyticsMediaStatistic from '@/views/dashboard/AnalyticsMediaStatistic.vue'
 import AnalyticsScheduler from '@/views/dashboard/AnalyticsScheduler.vue'
@@ -88,7 +88,7 @@ onUnmounted(() => {
   <template v-else-if="!isNullOrEmptyObject(props.config)">
     <!-- Vue 渲染模式 -->
     <div v-if="pluginRenderMode === 'vue'">
-      <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" />
+      <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" :api="api" />
       <!-- Vue 模式下也可以显示拖拽句柄 -->
       <div class="absolute right-5 top-5">
         <VIcon class="cursor-move">mdi-drag</VIcon>