From b36bff3a1eade580e3e8c7ed839ec5d74111092b Mon Sep 17 00:00:00 2001
From: Attente <19653207+wikrin@users.noreply.github.com>
Date: Sat, 15 Nov 2025 18:03:29 +0800
Subject: [PATCH] =?UTF-8?q?feat(dashboard):=20=E7=A7=BB=E9=99=A4=20Vue=20?=
 =?UTF-8?q?=E6=B8=B2=E6=9F=93=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=E5=9B=BA?=
 =?UTF-8?q?=E5=AE=9A=E6=8B=96=E6=8B=BD=E5=9B=BE=E6=A0=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

更新`docs/module-federation-guide.md` 文档，使用 `v-hover` 实现仅在鼠标悬停时显示拖拽图标。
---
 docs/module-federation-guide.md          | 22 +++++++++++++++-------
 src/components/misc/DashboardElement.vue |  4 ----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/module-federation-guide.md b/docs/module-federation-guide.md
index 9b18fabd..9ff5a724 100644
--- a/docs/module-federation-guide.md
+++ b/docs/module-federation-guide.md
@@ -245,13 +245,21 @@ const props = defineProps({
 
 <template>
   <div class="dashboard-widget">
-    <!-- 仪表板内容 -->
-    <v-card>
-      <v-card-title>{{ config.title || '仪表板组件' }}</v-card-title>
-      <v-card-text>
-        <!-- 组件内容 -->
-      </v-card-text>
-    </v-card>
+    <v-hover>
+      <!-- 仪表板内容 -->
+      <template #default="{ isHovering, props: hoverProps }">
+        <v-card v-bind="hoverProps">
+          <v-card-title>{{ config.title || '仪表板组件' }}</v-card-title>
+          <v-card-text>
+            <!-- 组件内容 -->
+          </v-card-text>
+          <!-- 只在悬停时显示拖拽图标 -->
+          <div v-show="isHovering" class="absolute right-5 top-5">
+            <v-icon class="cursor-move">mdi-drag</v-icon>
+          </div>
+        </v-card>
+      </template>
+    </v-hover>
   </div>
 </template>
 ```
diff --git a/src/components/misc/DashboardElement.vue b/src/components/misc/DashboardElement.vue
index c2fc3839..46c426b7 100644
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -91,10 +91,6 @@ onUnmounted(() => {
     <!-- Vue 渲染模式 -->
     <div v-if="pluginRenderMode === 'vue'">
       <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>
-      </div>
     </div>
     <!-- Vuetify 渲染模式 -->
     <VHover v-else-if="pluginRenderMode === 'vuetify'">