fix(dashboard): stabilize editable layout controls

2026-06-16 13:11:22 +08:00 · 2026-06-06 18:22:36 +08:00
parent e2722801e4
commit 75da7d35b4
14 changed files with 295 additions and 307 deletions
--- a/src/components/dialog/ContentToggleSettingsDialog.vue
+++ b/src/components/dialog/ContentToggleSettingsDialog.vue
@@ -16,8 +16,6 @@ const props = withDefaults(
    items: UnknownRecord[]
    labelGetter?: (item: UnknownRecord) => string
    modelValue?: boolean
-    resetIcon?: string
-    resetText?: string
    selectAllText?: string
    selectNoneText?: string
    showBulkActions?: boolean
@@ -30,8 +28,6 @@ const props = withDefaults(
    elevated: false,
    labelGetter: undefined,
    modelValue: true,
-    resetIcon: 'mdi-restore',
-    resetText: '',
    selectAllText: '',
    selectNoneText: '',
    showBulkActions: false,
@@ -42,7 +38,6 @@ const props = withDefaults(

 const emit = defineEmits<{
  (event: 'close'): void
-  (event: 'reset'): void
  (event: 'save', payload: { elevated: boolean; enabled: Record<string, boolean> }): void
  (event: 'update:elevated', value: boolean): void
  (event: 'update:modelValue', value: boolean): void
@@ -104,11 +99,6 @@ function setAllItems(value: boolean) {
  })
 }

-// 触发调用方提供的重置动作。
-function triggerResetAction() {
-  emit('reset')
-}
-
 // 提交通用内容开关设置。
 function submitSettings() {
  emit('save', {
@@ -157,12 +147,6 @@ function submitSettings() {
        </p>
      </VCardText>
      <VCardActions class="pt-3">
-        <VBtn v-if="props.resetText" variant="text" color="secondary" @click="triggerResetAction">
-          <template #prepend>
-            <VIcon :icon="props.resetIcon" />
-          </template>
-          {{ props.resetText }}
-        </VBtn>
        <VBtn v-if="props.showBulkActions" variant="text" @click="setAllItems(true)">
          {{ props.selectAllText }}
        </VBtn>
--- a/src/components/misc/DashboardElement.vue
+++ b/src/components/misc/DashboardElement.vue
@@ -140,30 +140,28 @@ onUnmounted(() => {
      <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" :api="api" />
    </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>
-          </VCard>
-        </div>
-        <!-- 有边框 -->
-        <VCard v-else v-bind="hover.props">
-          <VCardItem v-if="props.config?.attrs.border !== false">
-            <VCardTitle>
-              {{ props.config?.attrs?.title ?? props.config?.name }}
-            </VCardTitle>
-            <VCardSubtitle v-if="props.config?.attrs?.subtitle"> {{ props.config?.attrs?.subtitle }}</VCardSubtitle>
-          </VCardItem>
-          <VCardText>
+    <template v-else-if="pluginRenderMode === 'vuetify'">
+      <!-- 无边框 -->
+      <div v-if="props.config?.attrs.border === false">
+        <VCard>
+          <VCardText class="p-0">
            <DashboardRender v-for="(item, index) in props.config?.elements" :key="index" :config="item" />
          </VCardText>
        </VCard>
-      </template>
-    </VHover>
+      </div>
+      <!-- 有边框 -->
+      <VCard v-else>
+        <VCardItem v-if="props.config?.attrs.border !== false">
+          <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>
    <!-- 未知模式或错误 -->
    <VCard v-else>
      <VCardText>无法渲染插件仪表盘部件: 未知渲染模式或配置错误</VCardText>
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -33,6 +33,7 @@ const DASHBOARD_GRID_COLUMNS = 12
 const DASHBOARD_GRID_CELL_HEIGHT = 16
 const DASHBOARD_GRID_FALLBACK_ROWS = 4
 const DASHBOARD_GRID_MARGIN = 8
+const DASHBOARD_GRID_CONTENT_RESIZE_THRESHOLD = 4
 const DASHBOARD_GRID_LAYOUT_STORAGE_KEY = 'MP_DASHBOARD_GRID_LAYOUT'

 interface DashboardGridLayoutItem {
@@ -66,8 +67,12 @@ const isSyncingDashboardGrid = ref(false)
 // 仪表板本地布局覆盖配置
 const dashboardGridLayout = ref<Record<string, DashboardGridLayoutItem>>({})

+// 是否刚恢复过默认布局，用于避免退出编辑时立即把默认布局写回本地覆盖。
+const isDashboardGridLayoutResetPending = ref(false)
+
 const dashboardGridResizeStartHeights = new Map<string, number | undefined>()
 const dashboardGridPendingContentResize = new Set<GridItemHTMLElement>()
+const dashboardGridObservedContentHeights = new Map<string, number>()

 let dashboardGridContentObserver: ResizeObserver | null = null
 let dashboardGridContentResizeFrame: number | null = null
@@ -324,7 +329,6 @@ function openDashboardSettings() {
      hint: t('dashboard.chooseContent'),
      items: dashboardConfigs.value,
      labelGetter: (item: DashboardItem) => item.attrs?.title ?? item.name,
-      resetText: t('dashboard.resetLayout'),
      title: t('dashboard.settings'),
      valueGetter: (item: DashboardItem) => buildPluginDashboardId(item.id, item.key),
    },
@@ -332,7 +336,6 @@ function openDashboardSettings() {
      close: () => {
        settingsDialogController = null
      },
-      reset: resetDashboardGridLayout,
      save: saveDashboardConfig,
      'update:modelValue': (value: boolean) => {
        if (!value) settingsDialogController = null
@@ -347,6 +350,7 @@ function resetDashboardGridLayout() {
  dashboardGridLayout.value = {}
  localStorage.removeItem(DASHBOARD_GRID_LAYOUT_STORAGE_KEY)
  dashboardGrid.value?.removeAll(false, false)
+  isDashboardGridLayoutResetPending.value = true
  nextTick(syncDashboardGrid)
 }

@@ -354,20 +358,32 @@ function resetDashboardGridLayout() {
 const dashboardDynamicButtonMenuItems = computed<DynamicButtonMenuItem[] | undefined>(() => {
  if (!appMode.value) return undefined

-  return [
+  const items: DynamicButtonMenuItem[] = [
    {
      title: isLayoutEditing.value ? t('dashboard.exitEditMode') : t('dashboard.editLayout'),
      icon: isLayoutEditing.value ? 'mdi-check' : 'mdi-view-dashboard-edit',
      color: 'primary',
      action: toggleDashboardLayoutEditing,
    },
-    {
-      title: t('dashboard.settings'),
-      icon: 'mdi-tune',
-      color: 'info',
-      action: openDashboardSettings,
-    },
  ]
+
+  if (isLayoutEditing.value) {
+    items.push({
+      title: t('dashboard.resetLayout'),
+      icon: 'mdi-restore',
+      color: 'warning',
+      action: resetDashboardGridLayout,
+    })
+  }
+
+  items.push({
+    title: t('dashboard.settings'),
+    icon: 'mdi-tune',
+    color: 'info',
+    action: openDashboardSettings,
+  })
+
+  return items
 })

 useDynamicButton({
@@ -379,11 +395,16 @@ useDynamicButton({
 // 切换仪表板布局编辑模式，退出编辑时压实并保存当前布局。
 function toggleDashboardLayoutEditing() {
  if (isLayoutEditing.value) {
-    compactAndPersistDashboardGrid()
+    if (isDashboardGridLayoutResetPending.value) {
+      isDashboardGridLayoutResetPending.value = false
+    } else {
+      compactAndPersistDashboardGrid()
+    }
    isLayoutEditing.value = false
    return
  }

+  isDashboardGridLayoutResetPending.value = false
  isLayoutEditing.value = true
  nextTick(syncDashboardGrid)
 }
@@ -676,10 +697,14 @@ function observeDashboardGridContent() {
  if (!gridElement || typeof ResizeObserver === 'undefined') return

  dashboardGridContentObserver?.disconnect()
+  dashboardGridPendingContentResize.clear()
+  dashboardGridObservedContentHeights.clear()
  dashboardGridContentObserver = new ResizeObserver(entries => {
    entries.forEach(entry => {
      const itemElement = entry.target.closest('.dashboard-grid-item') as GridItemHTMLElement | null
-      if (itemElement) scheduleDashboardItemContentResize(itemElement)
+      if (itemElement && shouldScheduleDashboardContentResize(itemElement, entry.contentRect.height)) {
+        scheduleDashboardItemContentResize(itemElement)
+      }
    })
  })

@@ -688,6 +713,20 @@ function observeDashboardGridContent() {
  })
 }

+// 判断内容高度变化是否足够触发 GridStack 行高重算，避免 hover 级微小波动造成布局抖动。
+function shouldScheduleDashboardContentResize(element: GridItemHTMLElement, nextHeight: number) {
+  const id = element.getAttribute('gs-id') ?? ''
+  if (!id) return true
+
+  const previousHeight = dashboardGridObservedContentHeights.get(id)
+  dashboardGridObservedContentHeights.set(id, nextHeight)
+
+  return (
+    previousHeight === undefined ||
+    Math.abs(nextHeight - previousHeight) >= DASHBOARD_GRID_CONTENT_RESIZE_THRESHOLD
+  )
+}
+
 // 延迟执行单个组件内容测高，合并连续 ResizeObserver 回调。
 function scheduleDashboardItemContentResize(element: GridItemHTMLElement) {
  dashboardGridPendingContentResize.add(element)
@@ -805,6 +844,7 @@ function getDefaultDashboardGridWidthById(id: string) {
 function compactAndPersistDashboardGrid(manualHeightId: string | false = false) {
  if (!dashboardGrid.value || isSyncingDashboardGrid.value) return

+  isDashboardGridLayoutResetPending.value = false
  dashboardGrid.value.compact('compact')
  nextTick(() => persistDashboardGridLayout(manualHeightId))
 }
@@ -855,6 +895,7 @@ onBeforeUnmount(() => {
    dashboardGridResizeRefreshFrame = null
  }
  dashboardGridPendingContentResize.clear()
+  dashboardGridObservedContentHeights.clear()
  dashboardGridResizeStartHeights.clear()
  dashboardGrid.value?.destroy(false)
  dashboardGrid.value = null
@@ -905,6 +946,15 @@ onBeforeUnmount(() => {
        class="compact-fab compact-fab--secondary"
        @click="openDashboardSettings"
      />
+      <VFab
+        v-if="isLayoutEditing"
+        icon="mdi-restore"
+        color="warning"
+        variant="tonal"
+        appear
+        class="compact-fab compact-fab--secondary"
+        @click="resetDashboardGridLayout"
+      />
      <VFab
        :icon="isLayoutEditing ? 'mdi-check' : 'mdi-view-dashboard-edit'"
        color="primary"
--- a/src/views/dashboard/AnalyticsCpu.vue
+++ b/src/views/dashboard/AnalyticsCpu.vue
@@ -133,21 +133,17 @@ useKeepAliveRefresh(refresh)
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
-        <VCardItem>
-          <VCardTitle>CPU</VCardTitle>
-        </VCardItem>
-        <VCardText class="dashboard-chart-content">
-          <div class="dashboard-chart-plot">
-            <VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
-          </div>
-          <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ current }}%</p>
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+  <VCard class="dashboard-chart-card">
+    <VCardItem>
+      <VCardTitle>CPU</VCardTitle>
+    </VCardItem>
+    <VCardText class="dashboard-chart-content">
+      <div class="dashboard-chart-plot">
+        <VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
+      </div>
+      <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ current }}%</p>
+    </VCardText>
+  </VCard>
 </template>

 <style scoped>
--- a/src/views/dashboard/AnalyticsMediaStatistic.vue
+++ b/src/views/dashboard/AnalyticsMediaStatistic.vue
@@ -54,34 +54,30 @@ onActivated(() => {
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-summary-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.mediaStatistic') }}</VCardTitle>
-        </VCardItem>
+  <VCard class="dashboard-summary-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.mediaStatistic') }}</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>
-    </template>
-  </VHover>
+            <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>
--- a/src/views/dashboard/AnalyticsMemory.vue
+++ b/src/views/dashboard/AnalyticsMemory.vue
@@ -138,21 +138,17 @@ useKeepAliveRefresh(refresh)
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.memory') }}</VCardTitle>
-        </VCardItem>
-        <VCardText class="dashboard-chart-content">
-          <div class="dashboard-chart-plot">
-            <VApexChart type="area" :options="chartOptions" :series="series" height="100%" />
-          </div>
-          <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ formatBytes(usedMemory) }}</p>
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+  <VCard class="dashboard-chart-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.memory') }}</VCardTitle>
+    </VCardItem>
+    <VCardText class="dashboard-chart-content">
+      <div class="dashboard-chart-plot">
+        <VApexChart type="area" :options="chartOptions" :series="series" height="100%" />
+      </div>
+      <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ formatBytes(usedMemory) }}</p>
+    </VCardText>
+  </VCard>
 </template>

 <style scoped>
--- a/src/views/dashboard/AnalyticsNetwork.vue
+++ b/src/views/dashboard/AnalyticsNetwork.vue
@@ -171,30 +171,26 @@ useKeepAliveRefresh(refresh)
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.network') }}</VCardTitle>
-        </VCardItem>
-        <VCardText class="dashboard-chart-content">
-          <div class="dashboard-chart-plot">
-            <VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
-          </div>
-          <div class="d-flex justify-space-between">
-            <p class="text-center font-weight-medium mb-0">
-              <span class="text-warning">{{ t('dashboard.upload') }}</span
-              >：{{ formatBytes(currentUpload) }}
-            </p>
-            <p class="text-center font-weight-medium mb-0">
-              <span class="text-info">{{ t('dashboard.download') }}</span
-              >：{{ formatBytes(currentDownload) }}
-            </p>
-          </div>
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+  <VCard class="dashboard-chart-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.network') }}</VCardTitle>
+    </VCardItem>
+    <VCardText class="dashboard-chart-content">
+      <div class="dashboard-chart-plot">
+        <VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
+      </div>
+      <div class="d-flex justify-space-between">
+        <p class="text-center font-weight-medium mb-0">
+          <span class="text-warning">{{ t('dashboard.upload') }}</span
+          >：{{ formatBytes(currentUpload) }}
+        </p>
+        <p class="text-center font-weight-medium mb-0">
+          <span class="text-info">{{ t('dashboard.download') }}</span
+          >：{{ formatBytes(currentDownload) }}
+        </p>
+      </div>
+    </VCardText>
+  </VCard>
 </template>

 <style scoped>
--- a/src/views/dashboard/AnalyticsScheduler.vue
+++ b/src/views/dashboard/AnalyticsScheduler.vue
@@ -44,46 +44,42 @@ useDataRefresh(
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.scheduler') }}</VCardTitle>
-        </VCardItem>
+  <VCard class="dashboard-work-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.scheduler') }}</VCardTitle>
+    </VCardItem>

-        <VCardText class="dashboard-work-content">
-          <VList class="card-list">
-            <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>
+    <VCardText class="dashboard-work-content">
+      <VList class="card-list">
+        <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>
+          <VListItemTitle class="mb-1">
+            <span class="text-sm font-weight-medium">{{ item.name }}</span>
+          </VListItemTitle>

-              <VListItemSubtitle class="text-xs">
-                {{ item.next_run }}
-              </VListItemSubtitle>
+          <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"> {{ t('dashboard.noSchedulers') }} </VListItemTitle>
-            </VListItem>
-          </VList>
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+          <template #append>
+            <div>
+              <h4 class="font-weight-medium">
+                {{ item.status }}
+              </h4>
+            </div>
+          </template>
+        </VListItem>
+        <VListItem v-if="schedulerList.length === 0">
+          <VListItemTitle class="text-center"> {{ t('dashboard.noSchedulers') }} </VListItemTitle>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
 </template>

 <style lang="scss" scoped>
--- a/src/views/dashboard/AnalyticsSpeed.vue
+++ b/src/views/dashboard/AnalyticsSpeed.vue
@@ -87,41 +87,37 @@ const { loading } = useDataRefresh(
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.realTimeSpeed') }}</VCardTitle>
-        </VCardItem>
+  <VCard class="dashboard-work-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.realTimeSpeed') }}</VCardTitle>
+    </VCardItem>

-        <VCardText class="dashboard-work-content 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>
+    <VCardText class="dashboard-work-content 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>
+          <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 #append>
+            <div>
+              <h6 class="text-sm font-weight-medium mb-2">
+                {{ item.amount }}
+              </h6>
+            </div>
+          </template>
+        </VListItem>
+      </VList>
+    </VCardText>
+  </VCard>
 </template>

 <style lang="scss" scoped>
--- a/src/views/dashboard/AnalyticsStorage.vue
+++ b/src/views/dashboard/AnalyticsStorage.vue
@@ -47,28 +47,24 @@ onActivated(() => {
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-summary-card">
-        <!-- Triangle Background -->
-        <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.storage') }}</VCardTitle>
-        </VCardItem>
-        <VCardText>
-          <h5 class="text-2xl font-weight-medium text-primary">
-            {{ formatFileSize(storage) }}
-          </h5>
-          <p class="mt-2">{{ t('storage.usedPercent', { percent: usedPercent }) }} 🚀</p>
-          <p class="mt-1">
-            <VProgressLinear :model-value="usedPercent" color="primary" />
-          </p>
-        </VCardText>
-        <!-- Trophy -->
-        <VImg :src="trophy" class="trophy" />
-      </VCard>
-    </template>
-  </VHover>
+  <VCard class="dashboard-summary-card">
+    <!-- Triangle Background -->
+    <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.storage') }}</VCardTitle>
+    </VCardItem>
+    <VCardText>
+      <h5 class="text-2xl font-weight-medium text-primary">
+        {{ formatFileSize(storage) }}
+      </h5>
+      <p class="mt-2">{{ t('storage.usedPercent', { percent: usedPercent }) }} 🚀</p>
+      <p class="mt-1">
+        <VProgressLinear :model-value="usedPercent" color="primary" />
+      </p>
+    </VCardText>
+    <!-- Trophy -->
+    <VImg :src="trophy" class="trophy" />
+  </VCard>
 </template>

 <style lang="scss" scoped>
--- a/src/views/dashboard/AnalyticsWeeklyOverview.vue
+++ b/src/views/dashboard/AnalyticsWeeklyOverview.vue
@@ -131,29 +131,25 @@ onActivated(() => {
 </script>

 <template>
-  <VHover>
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.weeklyOverview') }}</VCardTitle>
-        </VCardItem>
+  <VCard class="dashboard-work-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.weeklyOverview') }}</VCardTitle>
+    </VCardItem>

-        <VCardText class="dashboard-work-content">
-          <div class="dashboard-work-chart">
-            <VApexChart type="bar" :options="options" :series="series" height="100%" />
-          </div>
-          <div class="d-flex align-center mb-3">
-            <h5 class="text-h5 me-4">
-              {{ totalCount }}
-            </h5>
-            <p>{{ t('dashboard.weeklyOverviewDescription', { count: totalCount }) }} 😎</p>
-          </div>
+    <VCardText class="dashboard-work-content">
+      <div class="dashboard-work-chart">
+        <VApexChart type="bar" :options="options" :series="series" height="100%" />
+      </div>
+      <div class="d-flex align-center mb-3">
+        <h5 class="text-h5 me-4">
+          {{ totalCount }}
+        </h5>
+        <p>{{ t('dashboard.weeklyOverviewDescription', { count: totalCount }) }} 😎</p>
+      </div>

-          <VBtn v-if="superUser" block to="/history"> {{ t('common.viewDetails') }} </VBtn>
-        </VCardText>
-      </VCard>
-    </template>
-  </VHover>
+      <VBtn v-if="superUser" block to="/history"> {{ t('common.viewDetails') }} </VBtn>
+    </VCardText>
+  </VCard>
 </template>

 <style scoped>
--- a/src/views/dashboard/MediaServerLatest.vue
+++ b/src/views/dashboard/MediaServerLatest.vue
@@ -58,29 +58,25 @@ onActivated(() => {

 <template>
  <div>
-    <VHover v-for="(data, name) in latestList" :key="name">
-      <template #default="hover">
-        <VCard v-bind="hover.props" class="dashboard-work-card dashboard-media-card">
-          <VCardItem>
-            <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
-          </VCardItem>
+    <VCard v-for="(data, name) in latestList" :key="name" class="dashboard-work-card dashboard-media-card">
+      <VCardItem>
+        <VCardTitle>{{ t('dashboard.latest') }} - {{ name }}</VCardTitle>
+      </VCardItem>

-          <div class="dashboard-card-grid-wrap">
-            <ProgressiveCardGrid
-              :items="data"
-              :get-item-key="item => item.id || item.link || item.title"
-              :min-item-width="144"
-              :item-aspect-ratio="1.5"
-              tabindex="0"
-            >
-              <template #default="{ item }">
-                <PosterCard :media="item" />
-              </template>
-            </ProgressiveCardGrid>
-          </div>
-        </VCard>
-      </template>
-    </VHover>
+      <div class="dashboard-card-grid-wrap">
+        <ProgressiveCardGrid
+          :items="data"
+          :get-item-key="item => item.id || item.link || item.title"
+          :min-item-width="144"
+          :item-aspect-ratio="1.5"
+          tabindex="0"
+        >
+          <template #default="{ item }">
+            <PosterCard :media="item" />
+          </template>
+        </ProgressiveCardGrid>
+      </div>
+    </VCard>
  </div>
 </template>

--- a/src/views/dashboard/MediaServerLibrary.vue
+++ b/src/views/dashboard/MediaServerLibrary.vue
@@ -61,28 +61,24 @@ onActivated(() => {
 </script>

 <template>
-  <VHover v-if="libraryList.length > 0">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-media-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
-        </VCardItem>
-        <div class="dashboard-card-grid-wrap">
-          <ProgressiveCardGrid
-            :items="libraryList"
-            :get-item-key="item => item.id || item.name"
-            :min-item-width="240"
-            :estimated-item-height="160"
-            tabindex="0"
-          >
-            <template #default="{ item }">
-              <LibraryCard :media="item" height="10rem" />
-            </template>
-          </ProgressiveCardGrid>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
+  <VCard v-if="libraryList.length > 0" class="dashboard-media-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
+    </VCardItem>
+    <div class="dashboard-card-grid-wrap">
+      <ProgressiveCardGrid
+        :items="libraryList"
+        :get-item-key="item => item.id || item.name"
+        :min-item-width="240"
+        :estimated-item-height="160"
+        tabindex="0"
+      >
+        <template #default="{ item }">
+          <LibraryCard :media="item" height="10rem" />
+        </template>
+      </ProgressiveCardGrid>
+    </div>
+  </VCard>
 </template>

 <style scoped>
--- a/src/views/dashboard/MediaServerPlaying.vue
+++ b/src/views/dashboard/MediaServerPlaying.vue
@@ -61,29 +61,25 @@ onActivated(() => {
 </script>

 <template>
-  <VHover v-if="playingList.length > 0">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-media-card">
-        <VCardItem>
-          <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
-        </VCardItem>
+  <VCard v-if="playingList.length > 0" class="dashboard-media-card">
+    <VCardItem>
+      <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
+    </VCardItem>

-        <div class="dashboard-card-grid-wrap">
-          <ProgressiveCardGrid
-            :items="playingList"
-            :get-item-key="item => item.id || item.link || item.title"
-            :min-item-width="240"
-            :estimated-item-height="160"
-            tabindex="0"
-          >
-            <template #default="{ item }">
-              <BackdropCard :media="item" height="10rem" />
-            </template>
-          </ProgressiveCardGrid>
-        </div>
-      </VCard>
-    </template>
-  </VHover>
+    <div class="dashboard-card-grid-wrap">
+      <ProgressiveCardGrid
+        :items="playingList"
+        :get-item-key="item => item.id || item.link || item.title"
+        :min-item-width="240"
+        :estimated-item-height="160"
+        tabindex="0"
+      >
+        <template #default="{ item }">
+          <BackdropCard :media="item" height="10rem" />
+        </template>
+      </ProgressiveCardGrid>
+    </div>
+  </VCard>
 </template>

 <style scoped>