仪表板组件拖拽按钮按照hover进行展示

src/components/misc/DashboardElement.vue

@@ -40,10 +40,12 @@ onUnmounted(() => {
   <MediaServerPlaying v-else-if="config?.id === 'playing'" />
   <MediaServerLatest v-else-if="config?.id === 'latest'" />
   <!-- 插件仪表板 -->
-  <VCard v-else-if="!isNullOrEmptyObject(props.config)">
+  <VHover v-else-if="!isNullOrEmptyObject(props.config)">
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem v-if="props.config?.attrs.border !== false">
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>
             {{ props.config?.name }}
@@ -53,8 +55,10 @@ onUnmounted(() => {
         <VCardText :class="{ 'p-0': props.config?.attrs.border === false }">
           <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
         </VCardText>
-    <div v-if="props.config?.attrs.border === false" class="absolute right-5 top-5">
+        <div v-if="props.config?.attrs.border === false && hover.isHovering" class="absolute right-5 top-5">
           <VIcon class="cursor-move">mdi-drag</VIcon>
         </div>
       </VCard>
+    </template>
+  </VHover>
 </template>

src/views/dashboard/AnalyticsCpu.vue

@@ -123,10 +123,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>CPU</VCardTitle>
         </VCardItem>
@@ -136,4 +138,6 @@ onUnmounted(() => {
           <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>

src/views/dashboard/AnalyticsMediaStatistic.vue

@@ -53,10 +53,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>媒体统计</VCardTitle>
         </VCardItem>
@@ -82,4 +84,6 @@ onMounted(() => {
           </VRow>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>

src/views/dashboard/AnalyticsMemory.vue

@@ -129,10 +129,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>内存</VCardTitle>
         </VCardItem>
@@ -142,4 +144,6 @@ onUnmounted(() => {
           <p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>

src/views/dashboard/AnalyticsScheduler.vue

@@ -38,10 +38,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>后台任务</VCardTitle>
         </VCardItem>
@@ -77,6 +79,8 @@ onUnmounted(() => {
           </VList>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss" scoped>

src/views/dashboard/AnalyticsSpeed.vue

@@ -80,10 +80,12 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>实时速率</VCardTitle>
         </VCardItem>
@@ -114,6 +116,8 @@ onUnmounted(() => {
           </VList>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss" scoped>

src/views/dashboard/AnalyticsStorage.vue

@@ -39,12 +39,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <!-- Triangle Background -->
         <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>存储空间</VCardTitle>
         </VCardItem>
@@ -61,6 +63,8 @@ onMounted(() => {
         <!-- Trophy -->
         <VImg :src="trophy" class="trophy" />
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">

src/views/dashboard/AnalyticsWeeklyOverview.vue

@@ -110,10 +110,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>最近入库</VCardTitle>
         </VCardItem>
@@ -131,4 +133,6 @@ onMounted(() => {
           <VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
         </VCardText>
       </VCard>
+    </template>
+  </VHover>
 </template>

src/views/dashboard/MediaServerLatest.vue

@@ -21,10 +21,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle >最近添加</VCardTitle>
         </VCardItem>
@@ -33,6 +35,8 @@ onMounted(() => {
           <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
         </div>
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">

src/views/dashboard/MediaServerLibrary.vue

@@ -21,10 +21,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle >我的媒体库</VCardTitle>
         </VCardItem>
@@ -33,6 +35,8 @@ onMounted(() => {
           <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
         </div>
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">

src/views/dashboard/MediaServerPlaying.vue

@@ -21,10 +21,12 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
         <VCardItem>
           <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
           <VCardTitle>继续观看</VCardTitle>
         </VCardItem>
@@ -33,6 +35,8 @@ onMounted(() => {
           <BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
         </div>
       </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">