From 530fe9d35b3e232b100296ead04d119609f4c325 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 24 Jun 2026 21:34:38 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=8D=A1=E7=89=87=20h?=
 =?UTF-8?q?over=20=E4=B8=8A=E6=B5=AE=E6=8A=96=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/cards/BackdropCard.vue       | 32 +++++++-----
 src/components/cards/DownloadingCard.vue    | 27 +++++-----
 src/components/cards/LibraryCard.vue        | 29 +++++++----
 src/components/cards/MediaCard.vue          |  4 +-
 src/components/cards/PersonCard.vue         | 27 ++++++----
 src/components/cards/PluginAppCard.vue      | 28 ++++++-----
 src/components/cards/PluginCard.vue         | 33 +++++++------
 src/components/cards/PluginFolderCard.vue   | 39 ++++++++-------
 src/components/cards/PosterCard.vue         | 30 ++++++-----
 src/components/cards/SiteCard.vue           | 55 ++++++++++++---------
 src/components/cards/SubscribeCard.vue      | 42 +++++++++-------
 src/components/cards/SubscribeShareCard.vue | 24 +++++----
 src/components/cards/SubtitleCard.vue       | 15 ++++--
 src/components/cards/SubtitleItem.vue       | 15 ++++--
 src/components/cards/TorrentCard.vue        | 15 ++++--
 src/components/cards/TorrentItem.vue        | 15 ++++--
 src/components/cards/UserCard.vue           | 29 +++++++----
 src/components/cards/WorkflowShareCard.vue  | 35 ++++++-------
 src/components/cards/WorkflowTaskCard.vue   | 26 ++++++----
 src/styles/common.scss                      | 10 ++++
 src/views/setup/PreferencesSettingsStep.vue | 10 ++--
 21 files changed, 339 insertions(+), 201 deletions(-)

diff --git a/src/components/cards/BackdropCard.vue b/src/components/cards/BackdropCard.vue
index e6961a3d..4b6c92dd 100644
--- a/src/components/cards/BackdropCard.vue
+++ b/src/components/cards/BackdropCard.vue
@@ -46,17 +46,18 @@ const getImgUrl = computed(() => {
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="props.height"
-        :width="props.width"
-        class="ring-gray-500"
-        :class="{
-          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-          'ring-1': imageLoaded,
-        }"
-        @click="goPlay"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-bind="hover.props" class="backdrop-card-hover-area">
+        <VCard
+          :height="props.height"
+          :width="props.width"
+          class="app-hover-lift-card ring-gray-500"
+          :class="{
+            'app-hover-lift-card--hovering': hover.isHovering,
+            'ring-1': imageLoaded,
+          }"
+          @click="goPlay"
+        >
         <template #image>
           <VImg :src="getImgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
             <template #placeholder>
@@ -86,7 +87,14 @@ const getImgUrl = computed(() => {
             color="success"
           />
         </div>
-      </VCard>
+        </VCard>
+      </div>
     </template>
   </VHover>
 </template>
+
+<style scoped>
+.backdrop-card-hover-area {
+  inline-size: 100%;
+}
+</style>
diff --git a/src/components/cards/DownloadingCard.vue b/src/components/cards/DownloadingCard.vue
index b9ed2882..3ba18364 100644
--- a/src/components/cards/DownloadingCard.vue
+++ b/src/components/cards/DownloadingCard.vue
@@ -73,16 +73,16 @@ async function deleteDownload() {
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-if="cardState"
-        v-bind="hover.props"
-        :key="props.info?.hash"
-        class="downloading-card app-surface flex flex-col h-full overflow-hidden"
-        :class="{
-          'transition transform-cpu duration-300  -translate-y-1': hover.isHovering,
-        }"
-        min-height="150"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-if="cardState" v-bind="hover.props" class="downloading-card-hover-area h-full">
+        <VCard
+          :key="props.info?.hash"
+          class="downloading-card app-hover-lift-card app-surface flex flex-col h-full overflow-hidden"
+          :class="{
+            'app-hover-lift-card--hovering': hover.isHovering,
+          }"
+          min-height="150"
+        >
         <template #image>
           <VImg
             :src="props.info?.media.image"
@@ -130,7 +130,8 @@ async function deleteDownload() {
             <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
           </VCardActions>
         </div>
-      </VCard>
+        </VCard>
+      </div>
     </template>
   </VHover>
 </template>
@@ -138,6 +139,10 @@ async function deleteDownload() {
 <style lang="scss" scoped>
 /* stylelint-disable selector-pseudo-class-no-unknown */
 
+.downloading-card-hover-area {
+  inline-size: 100%;
+}
+
 .downloading-card-image {
   block-size: 100%;
 }
diff --git a/src/components/cards/LibraryCard.vue b/src/components/cards/LibraryCard.vue
index 1dfb2a97..b8568b79 100644
--- a/src/components/cards/LibraryCard.vue
+++ b/src/components/cards/LibraryCard.vue
@@ -156,15 +156,17 @@ onMounted(async () => {
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="props.height"
-        :width="props.width"
-        :class="{
-          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-        }"
-        @click="goPlay"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-bind="hover.props" class="library-card-hover-area">
+        <VCard
+          :height="props.height"
+          :width="props.width"
+          class="app-hover-lift-card"
+          :class="{
+            'app-hover-lift-card--hovering': hover.isHovering,
+          }"
+          @click="goPlay"
+        >
         <template #image>
           <canvas ref="canvasRef" width="640" height="360" class="w-full h-full hidden" />
           <VImg :src="imgUrl" aspect-ratio="2/3" cover @load="imageLoadHandler" @error="imageErrorHandler">
@@ -184,7 +186,14 @@ onMounted(async () => {
             </template>
           </VImg>
         </template>
-      </VCard>
+        </VCard>
+      </div>
     </template>
   </VHover>
 </template>
+
+<style scoped>
+.library-card-hover-area {
+  inline-size: 100%;
+}
+</style>
diff --git a/src/components/cards/MediaCard.vue b/src/components/cards/MediaCard.vue
index 1e857bb0..2aeb9fd3 100644
--- a/src/components/cards/MediaCard.vue
+++ b/src/components/cards/MediaCard.vue
@@ -498,9 +498,9 @@ onBeforeUnmount(() => {
         <VCard
           :height="props.height"
           :width="props.width"
-          class="outline-none ring-gray-500 media-card"
+          class="app-hover-lift-card outline-none ring-gray-500 media-card"
           :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
+            'app-hover-lift-card--hovering': hover.isHovering,
             'ring-1': isImageLoaded,
           }"
           @click.stop="goMediaDetail(hover.isHovering ?? false)"
diff --git a/src/components/cards/PersonCard.vue b/src/components/cards/PersonCard.vue
index 20323e4c..d49103b1 100644
--- a/src/components/cards/PersonCard.vue
+++ b/src/components/cards/PersonCard.vue
@@ -75,15 +75,17 @@ function goPersonDetail() {
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="personProps.height"
-        :width="personProps.width"
-        :class="{
-          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-        }"
-        @click.stop="goPersonDetail"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-bind="hover.props" class="person-card-hover-area">
+        <VCard
+          :height="personProps.height"
+          :width="personProps.width"
+          class="app-hover-lift-card"
+          :class="{
+            'app-hover-lift-card--hovering': hover.isHovering,
+          }"
+          @click.stop="goPersonDetail"
+        >
         <div class="person-card relative cursor-pointer ring-gray-700">
           <div style="padding-block-end: 150%">
             <div class="absolute inset-0 flex h-full w-full flex-col items-center p-2">
@@ -107,12 +109,17 @@ function goPersonDetail() {
             </div>
           </div>
         </div>
-      </VCard>
+        </VCard>
+      </div>
     </template>
   </VHover>
 </template>
 
 <style lang="scss" scoped>
+.person-card-hover-area {
+  inline-size: 100%;
+}
+
 .person-card {
   background-image: linear-gradient(
     45deg,
diff --git a/src/components/cards/PluginAppCard.vue b/src/components/cards/PluginAppCard.vue
index 7c20a052..e5b1f9a5 100644
--- a/src/components/cards/PluginAppCard.vue
+++ b/src/components/cards/PluginAppCard.vue
@@ -230,16 +230,17 @@ onUnmounted(() => {
   <div>
     <VHover>
       <template #default="hover">
-        <VCard
-          v-bind="hover.props"
-          :width="props.width"
-          :height="props.height"
-          @click="showPluginDetail"
-          class="flex flex-col h-full"
-          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-          }"
-        >
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-bind="hover.props" class="plugin-app-card-hover-area h-full">
+          <VCard
+            :width="props.width"
+            :height="props.height"
+            @click="showPluginDetail"
+            class="app-hover-lift-card flex flex-col h-full"
+            :class="{
+              'app-hover-lift-card--hovering': hover.isHovering,
+            }"
+          >
           <div
             class="flex-grow"
             :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
@@ -325,13 +326,18 @@ onUnmounted(() => {
               </IconBtn>
             </div>
           </VCardText>
-        </VCard>
+          </VCard>
+        </div>
       </template>
     </VHover>
   </div>
 </template>
 
 <style scoped>
+.plugin-app-card-hover-area {
+  inline-size: 100%;
+}
+
 .plugin-app-card__tags-section {
   display: flex;
   overflow: hidden;
diff --git a/src/components/cards/PluginCard.vue b/src/components/cards/PluginCard.vue
index 0981bb8f..efe90d52 100644
--- a/src/components/cards/PluginCard.vue
+++ b/src/components/cards/PluginCard.vue
@@ -567,19 +567,19 @@ watch(
     <!-- 插件卡片 -->
     <VHover>
       <template #default="hover">
-        <VCard
-          v-if="isVisible"
-          v-bind="hover.props"
-          :width="props.width"
-          :height="props.height"
-          @click="handleCardClick"
-          class="flex flex-col h-full"
-          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
-            'cursor-move': props.sortable,
-          }"
-          :ripple="!props.sortable"
-        >
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-if="isVisible" v-bind="hover.props" class="plugin-card-hover-area h-full">
+          <VCard
+            :width="props.width"
+            :height="props.height"
+            @click="handleCardClick"
+            class="app-hover-lift-card flex flex-col h-full"
+            :class="{
+              'app-hover-lift-card--hovering': hover.isHovering && !props.sortable,
+              'cursor-move': props.sortable,
+            }"
+            :ripple="!props.sortable"
+          >
           <div
             class="flex-grow"
             :style="`background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(${backgroundColor} 0%, ${backgroundColor} 100%)`"
@@ -669,7 +669,8 @@ watch(
           <div v-if="props.plugin?.has_update" class="me-n3 absolute top-0 right-5">
             <VIcon icon="mdi-new-box" class="text-white" />
           </div>
-        </VCard>
+          </VCard>
+        </div>
       </template>
     </VHover>
 
@@ -677,6 +678,10 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+.plugin-card-hover-area {
+  inline-size: 100%;
+}
+
 .card-cover-blurred::before {
   position: absolute;
   /* stylelint-disable-next-line property-no-vendor-prefix */
diff --git a/src/components/cards/PluginFolderCard.vue b/src/components/cards/PluginFolderCard.vue
index 90d4029d..e9490f77 100644
--- a/src/components/cards/PluginFolderCard.vue
+++ b/src/components/cards/PluginFolderCard.vue
@@ -211,20 +211,21 @@ const dropdownItems = ref([
     <!-- 文件夹卡片 -->
     <VHover>
       <template #default="hover">
-        <VCard
-          v-bind="hover.props"
-          :ripple="false"
-          :width="props.width"
-          :height="props.height"
-          min-height="8.5rem"
-          @click="handleCardClick"
-          class="plugin-folder-card h-full"
-          :class="{
-            'plugin-folder-card--mobile': display.mobile,
-            'plugin-folder-card--hover': hover.isHovering && !props.sortable,
-            'plugin-folder-card--sortable': props.sortable,
-          }"
-        >
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-bind="hover.props" class="plugin-folder-card-hover-area h-full">
+          <VCard
+            :ripple="false"
+            :width="props.width"
+            :height="props.height"
+            min-height="8.5rem"
+            @click="handleCardClick"
+            class="plugin-folder-card app-hover-lift-card h-full"
+            :class="{
+              'plugin-folder-card--mobile': display.mobile,
+              'plugin-folder-card--hover': hover.isHovering && !props.sortable,
+              'plugin-folder-card--sortable': props.sortable,
+            }"
+          >
           <template v-if="backgroundImage" #image>
             <VImg :src="backgroundImage" cover position="top"> </VImg>
           </template>
@@ -288,25 +289,29 @@ const dropdownItems = ref([
               </VMenu>
             </div>
           </div>
-        </VCard>
+          </VCard>
+        </div>
       </template>
     </VHover>
   </div>
 </template>
 
 <style lang="scss" scoped>
+.plugin-folder-card-hover-area {
+  inline-size: 100%;
+}
+
 .plugin-folder-card {
   position: relative;
   overflow: hidden;
   cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   &--sortable {
     cursor: move;
   }
 
   &--hover {
-    transform: translateY(-4px);
+    transform: translate3d(0, -0.25rem, 0);
   }
 
   &__bg {
diff --git a/src/components/cards/PosterCard.vue b/src/components/cards/PosterCard.vue
index 25792e57..e8039e26 100644
--- a/src/components/cards/PosterCard.vue
+++ b/src/components/cards/PosterCard.vue
@@ -47,16 +47,17 @@ async function goPlay(isHovering: boolean | null = false) {
 <template>
   <VHover>
     <template #default="hover">
-      <VCard
-        v-bind="hover.props"
-        :height="props.height"
-        :width="props.width"
-        class="outline-none ring-gray-500"
-        :class="{
-          'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-          'ring-1': isImageLoaded,
-        }"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-bind="hover.props" class="poster-card-hover-area">
+        <VCard
+          :height="props.height"
+          :width="props.width"
+          class="app-hover-lift-card outline-none ring-gray-500"
+          :class="{
+            'app-hover-lift-card--hovering': hover.isHovering,
+            'ring-1': isImageLoaded,
+          }"
+        >
         <VImg
           aspect-ratio="2/3"
           :src="getImgUrl"
@@ -93,7 +94,14 @@ async function goPlay(isHovering: boolean | null = false) {
             {{ props.media?.title }}
           </h1>
         </VCardText>
-      </VCard>
+        </VCard>
+      </div>
     </template>
   </VHover>
 </template>
+
+<style scoped>
+.poster-card-hover-area {
+  inline-size: 100%;
+}
+</style>
diff --git a/src/components/cards/SiteCard.vue b/src/components/cards/SiteCard.vue
index 7e65aa54..87ccefe7 100644
--- a/src/components/cards/SiteCard.vue
+++ b/src/components/cards/SiteCard.vue
@@ -239,25 +239,27 @@ onMounted(() => {
 
 <template>
   <div>
-    <VCard
-      class="site-card relative h-full flex flex-col overflow-hidden group transition-all duration-300"
-      :class="[
-        cardProps.site?.is_active ? '' : 'opacity-70',
-        {
-          'border-error': statColor === 'error',
-          'border-warning': statColor === 'warning',
-          'border-success': statColor === 'success',
-          'cursor-pointer hover:-translate-y-1': !cardProps.sortable,
-          'cursor-move': cardProps.sortable,
-          'site-card--sortable': cardProps.sortable,
-        },
-      ]"
-      :ripple="false"
-      variant="flat"
-      elevation="0"
-      :hover="!cardProps.sortable"
-      @click="handleCardClick"
-    >
+    <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+    <div class="site-card-hover-area h-full">
+      <VCard
+        class="site-card app-hover-lift-card relative h-full flex flex-col overflow-hidden group"
+        :class="[
+          cardProps.site?.is_active ? '' : 'opacity-70',
+          {
+            'border-error': statColor === 'error',
+            'border-warning': statColor === 'warning',
+            'border-success': statColor === 'success',
+            'cursor-pointer site-card--hoverable': !cardProps.sortable,
+            'cursor-move': cardProps.sortable,
+            'site-card--sortable': cardProps.sortable,
+          },
+        ]"
+        :ripple="false"
+        variant="flat"
+        elevation="0"
+        :hover="!cardProps.sortable"
+        @click="handleCardClick"
+      >
       <!-- 装饰性状态指示器 -->
       <div v-if="cardProps.site?.is_active" class="site-status-indicator" :class="statColor"></div>
 
@@ -419,11 +421,20 @@ onMounted(() => {
           </VMenu>
         </VBtn>
       </VSheet>
-    </VCard>
+      </VCard>
+    </div>
   </div>
 </template>
 
 <style scoped>
+.site-card-hover-area {
+  inline-size: 100%;
+}
+
+.site-card-hover-area:hover .site-card--hoverable {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 .site-status-indicator {
   position: absolute;
   z-index: 1;
@@ -455,7 +466,7 @@ onMounted(() => {
 }
 
 /* 站点卡片悬停时状态指示器变化 */
-.site-card:not(.site-card--sortable):hover .site-status-indicator {
+.site-card-hover-area:hover .site-card:not(.site-card--sortable) .site-status-indicator {
   block-size: 2px;
   opacity: 0.8;
 }
@@ -644,7 +655,7 @@ onMounted(() => {
   visibility: hidden;
 }
 
-.site-card:hover .site-card-actions {
+.site-card-hover-area:hover .site-card-actions {
   opacity: 1;
   transform: translateX(0);
   visibility: visible;
diff --git a/src/components/cards/SubscribeCard.vue b/src/components/cards/SubscribeCard.vue
index 01e6ba78..432095ce 100644
--- a/src/components/cards/SubscribeCard.vue
+++ b/src/components/cards/SubscribeCard.vue
@@ -404,26 +404,27 @@ function handleCardClick() {
   <div>
     <VHover>
       <template #default="hover">
-        <div
-          class="subscribe-card-shell w-full h-full relative"
-          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering && !props.sortable,
-            'outline-dotted outline-pink-500 outline-2': props.batchMode && props.selected,
-          }"
-        >
-          <VCard
-            v-bind="hover.props"
-            :key="props.media?.id"
-            class="flex flex-col h-full overflow-hidden"
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-bind="hover.props" class="subscribe-card-hover-area w-full h-full">
+          <div
+            class="subscribe-card-shell app-hover-lift-card w-full h-full relative"
             :class="{
-              'subscribe-card-paused': subscribeState === 'S',
-              'subscribe-card-pending-tint': subscribeState === 'P',
-              'cursor-move': props.sortable,
+              'app-hover-lift-card--hovering': hover.isHovering && !props.sortable,
+              'outline-dotted outline-pink-500 outline-2': props.batchMode && props.selected,
             }"
-            min-height="150"
-            @click="handleCardClick"
-            :ripple="!props.batchMode && !props.sortable"
           >
+            <VCard
+              :key="props.media?.id"
+              class="flex flex-col h-full overflow-hidden"
+              :class="{
+                'subscribe-card-paused': subscribeState === 'S',
+                'subscribe-card-pending-tint': subscribeState === 'P',
+                'cursor-move': props.sortable,
+              }"
+              min-height="150"
+              @click="handleCardClick"
+              :ripple="!props.batchMode && !props.sortable"
+            >
             <div
               v-if="bestVersionBadge && imageLoaded"
               class="best-version-badge"
@@ -568,13 +569,18 @@ function handleCardClick() {
                 />
               </div>
             </div>
-          </VCard>
+            </VCard>
+          </div>
         </div>
       </template>
     </VHover>
   </div>
 </template>
 <style lang="scss" scoped>
+.subscribe-card-hover-area {
+  inline-size: 100%;
+}
+
 .subscribe-card-background {
   background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
diff --git a/src/components/cards/SubscribeShareCard.vue b/src/components/cards/SubscribeShareCard.vue
index 82018569..00e2d399 100644
--- a/src/components/cards/SubscribeShareCard.vue
+++ b/src/components/cards/SubscribeShareCard.vue
@@ -93,16 +93,17 @@ function doDelete() {
   <div class="h-full">
     <VHover>
       <template #default="hover">
-        <div
-          class="w-full h-full overflow-hidden"
-          :class="{
-            'transition transform-cpu duration-300 -translate-y-1': hover.isHovering,
-          }"
-        >
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-bind="hover.props" class="subscribe-share-card-hover-area w-full h-full">
+          <div
+            class="app-hover-lift-card w-full h-full overflow-hidden"
+            :class="{
+              'app-hover-lift-card--hovering': hover.isHovering,
+            }"
+          >
           <VCard
-            v-bind="hover.props"
             :key="props.media?.id"
-            class="flex flex-col h-full"
+            class="app-hover-lift-card flex flex-col h-full"
             min-height="150"
             @click="showForkSubscribe"
           >
@@ -155,13 +156,18 @@ function doDelete() {
                 {{ dateText }}
               </VCardText>
             </div>
-          </VCard>
+            </VCard>
+          </div>
         </div>
       </template>
     </VHover>
   </div>
 </template>
 <style lang="scss" scoped>
+.subscribe-share-card-hover-area {
+  inline-size: 100%;
+}
+
 .subscribe-card-background {
   background-image: linear-gradient(180deg, rgba(31, 41, 55, 47%) 0%, rgb(31, 41, 55) 100%);
 }
diff --git a/src/components/cards/SubtitleCard.vue b/src/components/cards/SubtitleCard.vue
index a37fb7b8..f0279897 100644
--- a/src/components/cards/SubtitleCard.vue
+++ b/src/components/cards/SubtitleCard.vue
@@ -100,12 +100,13 @@ watch(
 </script>
 
 <template>
-  <div class="h-full">
+  <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+  <div class="subtitle-card-hover-area h-full">
     <VCard
       :width="props.width || '100%'"
       :variant="isDownloaded ? 'outlined' : 'flat'"
       @click="handleAddDownload"
-      class="h-full cursor-pointer transition-transform hover:-translate-y-1 duration-300 d-flex flex-column overflow-hidden subtitle-card"
+      class="app-hover-lift-card h-full cursor-pointer d-flex flex-column overflow-hidden subtitle-card"
       :class="{ 'border-success border-2 opacity-85': isDownloaded }"
       hover
     >
@@ -203,11 +204,19 @@ watch(
 </template>
 
 <style scoped>
+.subtitle-card-hover-area {
+  inline-size: 100%;
+}
+
+.subtitle-card-hover-area:hover .subtitle-card {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 .subtitle-card {
   border: 1px solid transparent;
 }
 
-.subtitle-card:hover {
+.subtitle-card-hover-area:hover .subtitle-card {
   border-color: rgba(var(--v-theme-primary), 0.3);
 }
 </style>
diff --git a/src/components/cards/SubtitleItem.vue b/src/components/cards/SubtitleItem.vue
index ff4e9306..d8d9783a 100644
--- a/src/components/cards/SubtitleItem.vue
+++ b/src/components/cards/SubtitleItem.vue
@@ -99,10 +99,11 @@ watch(
 </script>
 
 <template>
-  <div class="w-100">
+  <!-- Hover 命中区域保持静止，避免列表项上浮后底边反复触发 mouseleave。 -->
+  <div class="subtitle-item-hover-area w-100">
     <VListItem
       :value="subtitle?.enclosure"
-      class="pa-3 mb-2 rounded subtitle-item transition-all duration-300 hover:-translate-y-1 overflow-hidden"
+      class="app-hover-lift-card pa-3 mb-2 rounded subtitle-item overflow-hidden"
       :class="{ 'border-start border-success border-3 opacity-85': isDownloaded }"
       @click="handleAddDownload"
     >
@@ -206,11 +207,19 @@ watch(
 </template>
 
 <style scoped>
+.subtitle-item-hover-area {
+  inline-size: 100%;
+}
+
+.subtitle-item-hover-area:hover .subtitle-item {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 .subtitle-item {
   border: 1px solid transparent;
 }
 
-.subtitle-item:hover {
+.subtitle-item-hover-area:hover .subtitle-item {
   border-color: rgba(var(--v-theme-primary), 0.3);
 }
 </style>
diff --git a/src/components/cards/TorrentCard.vue b/src/components/cards/TorrentCard.vue
index 15403a50..3fb4c753 100644
--- a/src/components/cards/TorrentCard.vue
+++ b/src/components/cards/TorrentCard.vue
@@ -146,12 +146,13 @@ watch(
 </script>
 
 <template>
-  <div class="h-full">
+  <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+  <div class="torrent-card-hover-area h-full">
     <VCard
       :width="props.width || '100%'"
       :variant="isDownloaded ? 'outlined' : 'flat'"
       @click="handleAddDownload(props.torrent)"
-      class="h-full cursor-pointer transition-transform hover:-translate-y-1 duration-300 d-flex flex-column overflow-hidden torrent-card"
+      class="app-hover-lift-card h-full cursor-pointer d-flex flex-column overflow-hidden torrent-card"
       :class="{ 'border-success border-2 opacity-85': isDownloaded }"
       hover
     >
@@ -316,12 +317,20 @@ watch(
   inset-inline-end: 0;
 }
 
+.torrent-card-hover-area {
+  inline-size: 100%;
+}
+
+.torrent-card-hover-area:hover .torrent-card {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 /* 卡片悬停效果 */
 .torrent-card {
   border: 1px solid transparent;
 }
 
-.torrent-card:hover {
+.torrent-card-hover-area:hover .torrent-card {
   border-color: rgba(var(--v-theme-primary), 0.3);
 }
 
diff --git a/src/components/cards/TorrentItem.vue b/src/components/cards/TorrentItem.vue
index 8d4fd812..61503cc9 100644
--- a/src/components/cards/TorrentItem.vue
+++ b/src/components/cards/TorrentItem.vue
@@ -115,10 +115,11 @@ watch(
 </script>
 
 <template>
-  <div class="w-100">
+  <!-- Hover 命中区域保持静止，避免列表项上浮后底边反复触发 mouseleave。 -->
+  <div class="torrent-item-hover-area w-100">
     <VListItem
       :value="props.torrent?.torrent_info?.enclosure"
-      class="pa-3 mb-2 rounded torrent-item transition-all duration-300 hover:-translate-y-1 overflow-hidden"
+      class="app-hover-lift-card pa-3 mb-2 rounded torrent-item overflow-hidden"
       :class="{ 'border-start border-success border-3 opacity-85': isDownloaded }"
       @click="handleAddDownload"
     >
@@ -262,11 +263,19 @@ watch(
   inset-inline-end: 0;
 }
 
+.torrent-item-hover-area {
+  inline-size: 100%;
+}
+
+.torrent-item-hover-area:hover .torrent-item {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 .torrent-item {
   border: 1px solid transparent;
 }
 
-.torrent-item:hover {
+.torrent-item-hover-area:hover .torrent-item {
   border-color: rgba(var(--v-theme-primary), 0.3);
 }
 
diff --git a/src/components/cards/UserCard.vue b/src/components/cards/UserCard.vue
index 9cfe5982..32d6c428 100644
--- a/src/components/cards/UserCard.vue
+++ b/src/components/cards/UserCard.vue
@@ -127,14 +127,16 @@ onMounted(() => {
 })
 </script>
 <template>
-  <VCard
-    :class="[
-      'transition-transform duration-300 hover:-translate-y-1',
-      !props.user.is_active ? 'opacity-85 bg-surface-lighten-1' : '',
-    ]"
-    class="user-card flex flex-column h-full"
-    @click="editUser"
-  >
+  <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+  <div class="user-card-hover-area h-full">
+    <VCard
+      :class="[
+        'app-hover-lift-card',
+        !props.user.is_active ? 'opacity-85 bg-surface-lighten-1' : '',
+      ]"
+      class="user-card flex flex-column h-full"
+      @click="editUser"
+    >
     <div class="user-card__body flex-grow flex-grow-1">
       <!-- 用户头像和基本信息 -->
       <VCardItem :class="[user.is_superuser ? 'admin-header' : '']">
@@ -302,10 +304,19 @@ onMounted(() => {
         </div>
       </VCardText>
     </div>
-  </VCard>
+    </VCard>
+  </div>
 </template>
 
 <style scoped>
+.user-card-hover-area {
+  inline-size: 100%;
+}
+
+.user-card-hover-area:hover .user-card {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 .user-card {
   block-size: 100%;
 }
diff --git a/src/components/cards/WorkflowShareCard.vue b/src/components/cards/WorkflowShareCard.vue
index 5a309c51..eb0906af 100644
--- a/src/components/cards/WorkflowShareCard.vue
+++ b/src/components/cards/WorkflowShareCard.vue
@@ -95,17 +95,18 @@ function doDelete() {
   <div class="h-full">
     <VHover>
       <template #default="hover">
-        <VCard
-          v-bind="hover.props"
-          :key="props.workflow?.id"
-          class="workflow-share-card flex flex-col h-full cursor-pointer overflow-hidden"
-          :class="{
-            'workflow-share-card--hovering': hover.isHovering,
-          }"
-          min-height="150"
-          :style="{ background: gradientStyle }"
-          @click="showForkWorkflow"
-        >
+        <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+        <div v-bind="hover.props" class="workflow-share-card-hover-area h-full">
+          <VCard
+            :key="props.workflow?.id"
+            class="workflow-share-card app-hover-lift-card flex flex-col h-full cursor-pointer overflow-hidden"
+            :class="{
+              'app-hover-lift-card--hovering': hover.isHovering,
+            }"
+            min-height="150"
+            :style="{ background: gradientStyle }"
+            @click="showForkWorkflow"
+          >
           <div class="h-full flex flex-col">
             <VCardText class="flex items-center pa-3 pb-1 grow">
               <div class="flex flex-col justify-center w-full">
@@ -134,20 +135,16 @@ function doDelete() {
               {{ dateText }}
             </VCardText>
           </div>
-        </VCard>
+          </VCard>
+        </div>
       </template>
     </VHover>
   </div>
 </template>
 
 <style lang="scss" scoped>
-// 阴影需要落在实际卡片上，不能被额外的 overflow 容器裁掉。
-.workflow-share-card {
-  transition: transform 0.3s ease, box-shadow 0.2s ease;
-  transform: translateZ(0);
+.workflow-share-card-hover-area {
+  inline-size: 100%;
 }
 
-.workflow-share-card--hovering {
-  transform: translate3d(0, -0.25rem, 0);
-}
 </style>
diff --git a/src/components/cards/WorkflowTaskCard.vue b/src/components/cards/WorkflowTaskCard.vue
index 1f1cba73..7555fdcc 100644
--- a/src/components/cards/WorkflowTaskCard.vue
+++ b/src/components/cards/WorkflowTaskCard.vue
@@ -220,14 +220,15 @@ const resolveProgress = (item: Workflow) => {
 <template>
   <div class="h-full">
     <VHover v-slot="hover">
-      <VCard
-        v-bind="hover.props"
-        class="mx-auto h-full"
-        @click="handleFlow(workflow)"
-        :ripple="false"
-        :loading="loading"
-        :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
-      >
+      <!-- Hover 命中区域保持静止，避免卡片上浮后底边反复触发 mouseleave。 -->
+      <div v-bind="hover.props" class="workflow-task-card-hover-area h-full">
+        <VCard
+          class="app-hover-lift-card mx-auto h-full"
+          @click="handleFlow(workflow)"
+          :ripple="false"
+          :loading="loading"
+          :class="{ 'app-hover-lift-card--hovering': hover.isHovering }"
+        >
         <VCardItem
           class="px-2 py-2"
           :style="{
@@ -367,7 +368,14 @@ const resolveProgress = (item: Workflow) => {
             </div>
           </div>
         </VCardText>
-      </VCard>
+        </VCard>
+      </div>
     </VHover>
   </div>
 </template>
+
+<style scoped>
+.workflow-task-card-hover-area {
+  inline-size: 100%;
+}
+</style>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index cd528d7b..689a0602 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -184,6 +184,16 @@ html[data-theme-radius='extra'] {
   box-shadow: var(--app-surface-shadow) !important;
 }
 
+// 统一卡片上浮反馈；hover 命中区域应放在静止外层，避免上浮后底边反复触发 mouseleave。
+.app-hover-lift-card {
+  transition: transform 0.3s ease, box-shadow 0.2s ease;
+  transform: translateZ(0);
+}
+
+.app-hover-lift-card--hovering {
+  transform: translate3d(0, -0.25rem, 0);
+}
+
 // 全局页面与 overlay 动效：短距离、轻缩放，保持快速但不生硬。
 .mp-page-route {
   inline-size: 100%;
diff --git a/src/views/setup/PreferencesSettingsStep.vue b/src/views/setup/PreferencesSettingsStep.vue
index d15feffc..223932d1 100644
--- a/src/views/setup/PreferencesSettingsStep.vue
+++ b/src/views/setup/PreferencesSettingsStep.vue
@@ -157,11 +157,12 @@ onMounted(() => {
         <VCardText>
           <p class="text-body-2 text-medium-emphasis mb-4">{{ t('setupWizard.preferences.quickPresetsDesc') }}</p>
           <VRow>
-            <VCol v-for="(preset, key) in presetConfigs" :key="key" cols="12" sm="6" md="3">
+            <!-- Hover 命中区域保持静止，避免预设卡片上浮后底边反复触发 mouseleave。 -->
+            <VCol v-for="(preset, key) in presetConfigs" :key="key" class="preset-card-hover-area" cols="12" sm="6" md="3">
               <VCard
                 :color="selectedPreset === key ? preset.color : 'default'"
                 :variant="selectedPreset === key ? 'tonal' : 'outlined'"
-                class="cursor-pointer preset-card"
+                class="app-hover-lift-card cursor-pointer preset-card"
                 @click="selectPreset(key)"
               >
                 <VCardText class="text-center pa-4">
@@ -218,11 +219,10 @@ onMounted(() => {
 <style scoped>
 .cursor-pointer {
   cursor: pointer;
-  transition: all 0.3s ease;
 }
 
-.preset-card:hover {
-  transform: translateY(-4px);
+.preset-card-hover-area:hover .preset-card {
+  transform: translate3d(0, -0.25rem, 0);
 }
 
 .preset-card:active {