fix(dashboard): stabilize editable layout controls

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>

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>

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>

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>

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>

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>

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>

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>

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>
 

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>

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>