From b85950e4ca48fc110e19bee223a7f97eaf3e1216 Mon Sep 17 00:00:00 2001
From: Allen <hotlcc@qq.com>
Date: Fri, 17 May 2024 10:23:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=AA=E8=A1=A8=E6=9D=BF=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=8B=96=E6=8B=BD=E6=8C=89=E9=92=AE=E6=8C=89=E7=85=A7hover?=
 =?UTF-8?q?=E8=BF=9B=E8=A1=8C=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/misc/DashboardElement.vue      | 38 +++++----
 src/views/dashboard/AnalyticsCpu.vue          | 28 ++++---
 .../dashboard/AnalyticsMediaStatistic.vue     | 58 +++++++-------
 src/views/dashboard/AnalyticsMemory.vue       | 28 ++++---
 src/views/dashboard/AnalyticsScheduler.vue    | 78 ++++++++++---------
 src/views/dashboard/AnalyticsSpeed.vue        | 68 ++++++++--------
 src/views/dashboard/AnalyticsStorage.vue      | 46 ++++++-----
 .../dashboard/AnalyticsWeeklyOverview.vue     | 40 +++++-----
 src/views/dashboard/MediaServerLatest.vue     | 26 ++++---
 src/views/dashboard/MediaServerLibrary.vue    | 26 ++++---
 src/views/dashboard/MediaServerPlaying.vue    | 26 ++++---
 11 files changed, 253 insertions(+), 209 deletions(-)

diff --git a/src/components/misc/DashboardElement.vue b/src/components/misc/DashboardElement.vue
index d76f3f0e..37742aca 100644
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -40,21 +40,25 @@ onUnmounted(() => {
   <MediaServerPlaying v-else-if="config?.id === 'playing'" />
   <MediaServerLatest v-else-if="config?.id === 'latest'" />
   <!-- 插件仪表板 -->
-  <VCard v-else-if="!isNullOrEmptyObject(props.config)">
-    <VCardItem v-if="props.config?.attrs.border !== false">
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>
-        {{ props.config?.name }}
-      </VCardTitle>
-      <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
-    </VCardItem>
-    <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">
-      <VIcon class="cursor-move">mdi-drag</VIcon>
-    </div>
-  </VCard>
+  <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" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>
+            {{ props.config?.name }}
+          </VCardTitle>
+          <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
+        </VCardItem>
+        <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 && hover.isHovering" class="absolute right-5 top-5">
+          <VIcon class="cursor-move">mdi-drag</VIcon>
+        </div>
+      </VCard>
+    </template>
+  </VHover>
 </template>
diff --git a/src/views/dashboard/AnalyticsCpu.vue b/src/views/dashboard/AnalyticsCpu.vue
index f6dced87..a1bdb89f 100644
--- a/src/views/dashboard/AnalyticsCpu.vue
+++ b/src/views/dashboard/AnalyticsCpu.vue
@@ -123,17 +123,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>CPU</VCardTitle>
-    </VCardItem>
-    <VCardText>
-      <VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>CPU</VCardTitle>
+        </VCardItem>
+        <VCardText>
+          <VueApexCharts type="line" :options="chartOptions" :series="series" :height="150" />
 
-      <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
-    </VCardText>
-  </VCard>
+          <p class="text-center font-weight-medium mb-0">当前：{{ current }}%</p>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
diff --git a/src/views/dashboard/AnalyticsMediaStatistic.vue b/src/views/dashboard/AnalyticsMediaStatistic.vue
index c09313b7..505bd646 100644
--- a/src/views/dashboard/AnalyticsMediaStatistic.vue
+++ b/src/views/dashboard/AnalyticsMediaStatistic.vue
@@ -53,33 +53,37 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>媒体统计</VCardTitle>
-    </VCardItem>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>媒体统计</VCardTitle>
+        </VCardItem>
 
-    <VCardText>
-      <VRow>
-        <VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
-          <div class="d-flex align-center">
-            <div class="me-3">
-              <VAvatar :color="item.color" rounded size="42" class="elevation-1">
-                <VIcon size="24" :icon="item.icon" />
-              </VAvatar>
-            </div>
+        <VCardText>
+          <VRow>
+            <VCol v-for="item in statistics" :key="item.title" cols="6" sm="3">
+              <div class="d-flex align-center">
+                <div class="me-3">
+                  <VAvatar :color="item.color" rounded size="42" class="elevation-1">
+                    <VIcon size="24" :icon="item.icon" />
+                  </VAvatar>
+                </div>
 
-            <div class="d-flex flex-column">
-              <span class="text-caption">
-                {{ item.title }}
-              </span>
-              <span class="text-h6">{{ item.stats }}</span>
-            </div>
-          </div>
-        </VCol>
-      </VRow>
-    </VCardText>
-  </VCard>
+                <div class="d-flex flex-column">
+                  <span class="text-caption">
+                    {{ item.title }}
+                  </span>
+                  <span class="text-h6">{{ item.stats }}</span>
+                </div>
+              </div>
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
diff --git a/src/views/dashboard/AnalyticsMemory.vue b/src/views/dashboard/AnalyticsMemory.vue
index 2560f0c7..77f525a4 100644
--- a/src/views/dashboard/AnalyticsMemory.vue
+++ b/src/views/dashboard/AnalyticsMemory.vue
@@ -129,17 +129,21 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>内存</VCardTitle>
-    </VCardItem>
-    <VCardText>
-      <VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>内存</VCardTitle>
+        </VCardItem>
+        <VCardText>
+          <VueApexCharts type="area" :options="chartOptions" :series="series" :height="150" />
 
-      <p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
-    </VCardText>
-  </VCard>
+          <p class="text-center font-weight-medium mb-0">当前：{{ formatBytes(usedMemory) }}</p>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
diff --git a/src/views/dashboard/AnalyticsScheduler.vue b/src/views/dashboard/AnalyticsScheduler.vue
index 174da7a6..d44e60d9 100644
--- a/src/views/dashboard/AnalyticsScheduler.vue
+++ b/src/views/dashboard/AnalyticsScheduler.vue
@@ -38,45 +38,49 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>后台任务</VCardTitle>
-    </VCardItem>
-
-    <VCardText>
-      <VList class="card-list" height="250">
-        <VListItem v-for="item in schedulerList" :key="item.id">
-          <template #prepend>
-            <VAvatar size="40" variant="tonal" color="" class="me-3">
-              {{ item.name[0] }}
-            </VAvatar>
-          </template>
-
-          <VListItemTitle class="mb-1">
-            <span class="text-sm font-weight-medium">{{ item.name }}</span>
-          </VListItemTitle>
-
-          <VListItemSubtitle class="text-xs">
-            {{ item.next_run }}
-          </VListItemSubtitle>
-
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
           <template #append>
-            <div>
-              <h4 class="font-weight-medium">
-                {{ item.status }}
-              </h4>
-            </div>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
-        </VListItem>
-        <VListItem v-if="schedulerList.length === 0">
-          <VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
-        </VListItem>
-      </VList>
-    </VCardText>
-  </VCard>
+          <VCardTitle>后台任务</VCardTitle>
+        </VCardItem>
+
+        <VCardText>
+          <VList class="card-list" height="250">
+            <VListItem v-for="item in schedulerList" :key="item.id">
+              <template #prepend>
+                <VAvatar size="40" variant="tonal" color="" class="me-3">
+                  {{ item.name[0] }}
+                </VAvatar>
+              </template>
+
+              <VListItemTitle class="mb-1">
+                <span class="text-sm font-weight-medium">{{ item.name }}</span>
+              </VListItemTitle>
+
+              <VListItemSubtitle class="text-xs">
+                {{ item.next_run }}
+              </VListItemSubtitle>
+
+              <template #append>
+                <div>
+                  <h4 class="font-weight-medium">
+                    {{ item.status }}
+                  </h4>
+                </div>
+              </template>
+            </VListItem>
+            <VListItem v-if="schedulerList.length === 0">
+              <VListItemTitle class="text-center"> 没有后台服务 </VListItemTitle>
+            </VListItem>
+          </VList>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/AnalyticsSpeed.vue b/src/views/dashboard/AnalyticsSpeed.vue
index 781e7e89..f182f7af 100644
--- a/src/views/dashboard/AnalyticsSpeed.vue
+++ b/src/views/dashboard/AnalyticsSpeed.vue
@@ -80,40 +80,44 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>实时速率</VCardTitle>
-    </VCardItem>
-
-    <VCardText class="pt-4">
-      <div>
-        <p class="text-h5 me-2">↑{{ formatFileSize(downloadInfo.upload_speed) }}/s</p>
-        <p class="text-h4 me-2">↓{{ formatFileSize(downloadInfo.download_speed) }}/s</p>
-      </div>
-      <VList class="card-list mt-9">
-        <VListItem v-for="item in infoItems" :key="item.title">
-          <template #prepend>
-            <VIcon rounded :icon="item.avatar" />
-          </template>
-
-          <VListItemTitle class="text-sm font-weight-medium mb-1">
-            {{ item.title }}
-          </VListItemTitle>
-
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
           <template #append>
-            <div>
-              <h6 class="text-sm font-weight-medium mb-2">
-                {{ item.amount }}
-              </h6>
-            </div>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
           </template>
-        </VListItem>
-      </VList>
-    </VCardText>
-  </VCard>
+          <VCardTitle>实时速率</VCardTitle>
+        </VCardItem>
+
+        <VCardText class="pt-4">
+          <div>
+            <p class="text-h5 me-2">↑{{ formatFileSize(downloadInfo.upload_speed) }}/s</p>
+            <p class="text-h4 me-2">↓{{ formatFileSize(downloadInfo.download_speed) }}/s</p>
+          </div>
+          <VList class="card-list mt-9">
+            <VListItem v-for="item in infoItems" :key="item.title">
+              <template #prepend>
+                <VIcon rounded :icon="item.avatar" />
+              </template>
+
+              <VListItemTitle class="text-sm font-weight-medium mb-1">
+                {{ item.title }}
+              </VListItemTitle>
+
+              <template #append>
+                <div>
+                  <h6 class="text-sm font-weight-medium mb-2">
+                    {{ item.amount }}
+                  </h6>
+                </div>
+              </template>
+            </VListItem>
+          </VList>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/views/dashboard/AnalyticsStorage.vue b/src/views/dashboard/AnalyticsStorage.vue
index 8ba34efd..2b141bea 100644
--- a/src/views/dashboard/AnalyticsStorage.vue
+++ b/src/views/dashboard/AnalyticsStorage.vue
@@ -39,28 +39,32 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <!-- Triangle Background -->
-    <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>存储空间</VCardTitle>
-    </VCardItem>
-    <VCardText>
-      <h5 class="text-2xl font-weight-medium text-primary">
-        {{ formatFileSize(storage) }}
-      </h5>
-      <p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
-      <p class="mt-1">
-        <VProgressLinear :model-value="usedPercent" color="primary" />
-      </p>
-    </VCardText>
+  <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" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>存储空间</VCardTitle>
+        </VCardItem>
+        <VCardText>
+          <h5 class="text-2xl font-weight-medium text-primary">
+            {{ formatFileSize(storage) }}
+          </h5>
+          <p class="mt-2">已使用 {{ usedPercent }}% 🚀</p>
+          <p class="mt-1">
+            <VProgressLinear :model-value="usedPercent" color="primary" />
+          </p>
+        </VCardText>
 
-    <!-- Trophy -->
-    <VImg :src="trophy" class="trophy" />
-  </VCard>
+        <!-- Trophy -->
+        <VImg :src="trophy" class="trophy" />
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">
diff --git a/src/views/dashboard/AnalyticsWeeklyOverview.vue b/src/views/dashboard/AnalyticsWeeklyOverview.vue
index 59c1dbca..97d0c695 100644
--- a/src/views/dashboard/AnalyticsWeeklyOverview.vue
+++ b/src/views/dashboard/AnalyticsWeeklyOverview.vue
@@ -110,25 +110,29 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>最近入库</VCardTitle>
-    </VCardItem>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>最近入库</VCardTitle>
+        </VCardItem>
 
-    <VCardText>
-      <VueApexCharts type="bar" :options="options" :series="series" :height="160" />
+        <VCardText>
+          <VueApexCharts type="bar" :options="options" :series="series" :height="160" />
 
-      <div class="d-flex align-center mb-3">
-        <h5 class="text-h5 me-4">
-          {{ totalCount }}
-        </h5>
-        <p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
-      </div>
+          <div class="d-flex align-center mb-3">
+            <h5 class="text-h5 me-4">
+              {{ totalCount }}
+            </h5>
+            <p>最近一周入库了 {{ totalCount }} 部影片 😎</p>
+          </div>
 
-      <VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
-    </VCardText>
-  </VCard>
+          <VBtn v-if="superUser" block to="/history"> 查看详情 </VBtn>
+        </VCardText>
+      </VCard>
+    </template>
+  </VHover>
 </template>
diff --git a/src/views/dashboard/MediaServerLatest.vue b/src/views/dashboard/MediaServerLatest.vue
index 91915e9e..a6fb8697 100644
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -21,18 +21,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle >最近添加</VCardTitle>
-    </VCardItem>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle >最近添加</VCardTitle>
+        </VCardItem>
 
-    <div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
-      <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
-    </div>
-  </VCard>
+        <div v-if="latestList.length > 0" class="grid gap-4 grid-media-card mx-3 mb-3" tabindex="0">
+          <PosterCard v-for="data in latestList" :key="data.id" :media="data" />
+        </div>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">
diff --git a/src/views/dashboard/MediaServerLibrary.vue b/src/views/dashboard/MediaServerLibrary.vue
index 563e6480..3e7bf0c6 100644
--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -21,18 +21,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle >我的媒体库</VCardTitle>
-    </VCardItem>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle >我的媒体库</VCardTitle>
+        </VCardItem>
 
-    <div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
-      <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
-    </div>
-  </VCard>
+        <div v-if="libraryList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
+          <LibraryCard v-for="data in libraryList" :key="data.id" :media="data" height="10rem" />
+        </div>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">
diff --git a/src/views/dashboard/MediaServerPlaying.vue b/src/views/dashboard/MediaServerPlaying.vue
index 7424aa1a..01dfcf96 100644
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -21,18 +21,22 @@ onMounted(() => {
 </script>
 
 <template>
-  <VCard>
-    <VCardItem>
-      <template #append>
-        <VIcon class="cursor-move">mdi-drag</VIcon>
-      </template>
-      <VCardTitle>继续观看</VCardTitle>
-    </VCardItem>
+  <VHover>
+    <template #default="hover">
+      <VCard v-bind="hover.props">
+        <VCardItem>
+          <template #append>
+            <VIcon class="cursor-move" v-if="hover.isHovering">mdi-drag</VIcon>
+          </template>
+          <VCardTitle>继续观看</VCardTitle>
+        </VCardItem>
 
-    <div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
-      <BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
-    </div>
-  </VCard>
+        <div v-if="playingList.length > 0" class="grid gap-4 grid-backdrop-card mx-3" tabindex="0">
+          <BackdropCard v-for="data in playingList" :key="data.id" :media="data" height="10rem" />
+        </div>
+      </VCard>
+    </template>
+  </VHover>
 </template>
 
 <style lang="scss">