fix(dashboard): stabilize editable layout controls

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>

src/components/misc/DashboardElement.vue

@@ -140,18 +140,17 @@ onUnmounted(() => {
       <component :is="dynamicPluginComponent" :config="props.config" :allow-refresh="props.allowRefresh" :api="api" />
     </div>
     <!-- Vuetify 渲染模式 -->
-    <VHover v-else-if="pluginRenderMode === 'vuetify'">
+    <template v-else-if="pluginRenderMode === 'vuetify'">
-      <template #default="hover">
       <!-- 无边框 -->
       <div v-if="props.config?.attrs.border === false">
-          <VCard v-bind="hover.props">
+        <VCard>
           <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">
+      <VCard v-else>
         <VCardItem v-if="props.config?.attrs.border !== false">
           <VCardTitle>
             {{ props.config?.attrs?.title ?? props.config?.name }}
@@ -163,7 +162,6 @@ onUnmounted(() => {
         </VCardText>
       </VCard>
     </template>
-    </VHover>
     <!-- 未知模式或错误 -->
     <VCard v-else>
       <VCardText>无法渲染插件仪表盘部件: 未知渲染模式或配置错误</VCardText>

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,
     },
-    {
+  ]
+
+  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) {
+    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"

src/views/dashboard/AnalyticsCpu.vue

@@ -133,9 +133,7 @@ useKeepAliveRefresh(refresh)
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-chart-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
     <VCardItem>
       <VCardTitle>CPU</VCardTitle>
     </VCardItem>
@@ -146,8 +144,6 @@ useKeepAliveRefresh(refresh)
       <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ current }}%</p>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>

src/views/dashboard/AnalyticsMediaStatistic.vue

@@ -54,9 +54,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-summary-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-summary-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.mediaStatistic') }}</VCardTitle>
     </VCardItem>
@@ -82,6 +80,4 @@ onActivated(() => {
       </VRow>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>

src/views/dashboard/AnalyticsMemory.vue

@@ -138,9 +138,7 @@ useKeepAliveRefresh(refresh)
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-chart-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.memory') }}</VCardTitle>
     </VCardItem>
@@ -151,8 +149,6 @@ useKeepAliveRefresh(refresh)
       <p class="text-center font-weight-medium mb-0">{{ t('dashboard.current') }}：{{ formatBytes(usedMemory) }}</p>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>

src/views/dashboard/AnalyticsNetwork.vue

@@ -171,9 +171,7 @@ useKeepAliveRefresh(refresh)
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-chart-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-chart-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.network') }}</VCardTitle>
     </VCardItem>
@@ -193,8 +191,6 @@ useKeepAliveRefresh(refresh)
       </div>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>

src/views/dashboard/AnalyticsScheduler.vue

@@ -44,9 +44,7 @@ useDataRefresh(
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-work-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.scheduler') }}</VCardTitle>
     </VCardItem>
@@ -82,8 +80,6 @@ useDataRefresh(
       </VList>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style lang="scss" scoped>

src/views/dashboard/AnalyticsSpeed.vue

@@ -87,9 +87,7 @@ const { loading } = useDataRefresh(
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-work-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.realTimeSpeed') }}</VCardTitle>
     </VCardItem>
@@ -120,8 +118,6 @@ const { loading } = useDataRefresh(
       </VList>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style lang="scss" scoped>

src/views/dashboard/AnalyticsStorage.vue

@@ -47,9 +47,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-summary-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-summary-card">
     <!-- Triangle Background -->
     <VImg :src="triangleBg" class="triangle-bg flip-in-rtl" />
     <VCardItem>
@@ -67,8 +65,6 @@ onActivated(() => {
     <!-- Trophy -->
     <VImg :src="trophy" class="trophy" />
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style lang="scss" scoped>

src/views/dashboard/AnalyticsWeeklyOverview.vue

@@ -131,9 +131,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <VHover>
+  <VCard class="dashboard-work-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-work-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.weeklyOverview') }}</VCardTitle>
     </VCardItem>
@@ -152,8 +150,6 @@ onActivated(() => {
       <VBtn v-if="superUser" block to="/history"> {{ t('common.viewDetails') }} </VBtn>
     </VCardText>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>

src/views/dashboard/MediaServerLatest.vue

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

src/views/dashboard/MediaServerLibrary.vue

@@ -61,9 +61,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <VHover v-if="libraryList.length > 0">
+  <VCard v-if="libraryList.length > 0" class="dashboard-media-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-media-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.library') }}</VCardTitle>
     </VCardItem>
@@ -81,8 +79,6 @@ onActivated(() => {
       </ProgressiveCardGrid>
     </div>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>

src/views/dashboard/MediaServerPlaying.vue

@@ -61,9 +61,7 @@ onActivated(() => {
 </script>
 
 <template>
-  <VHover v-if="playingList.length > 0">
+  <VCard v-if="playingList.length > 0" class="dashboard-media-card">
-    <template #default="hover">
-      <VCard v-bind="hover.props" class="dashboard-media-card">
     <VCardItem>
       <VCardTitle>{{ t('dashboard.playing') }}</VCardTitle>
     </VCardItem>
@@ -82,8 +80,6 @@ onActivated(() => {
       </ProgressiveCardGrid>
     </div>
   </VCard>
-    </template>
-  </VHover>
 </template>
 
 <style scoped>