From de84c39d2f48e01f1c2415054211a21f8388f061 Mon Sep 17 00:00:00 2001
From: jxxghp <jxxghp@gmail.com>
Date: Wed, 22 Apr 2026 18:01:26 +0800
Subject: [PATCH] fix card action hit areas

---
 src/@core/components/DialogCloseBtn.vue          | 2 +-
 src/components/cards/CustomRuleCard.vue          | 4 ++--
 src/components/cards/DirectoryCard.vue           | 4 ++--
 src/components/cards/DownloaderCard.vue          | 4 ++--
 src/components/cards/FilterRuleCard.vue          | 4 ++--
 src/components/cards/FilterRuleGroupCard.vue     | 4 ++--
 src/components/cards/NotificationChannelCard.vue | 4 ++--
 src/styles/common.scss                           | 5 +++++
 8 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/@core/components/DialogCloseBtn.vue b/src/@core/components/DialogCloseBtn.vue
index 1bdfd59b..909ff6bb 100644
--- a/src/@core/components/DialogCloseBtn.vue
+++ b/src/@core/components/DialogCloseBtn.vue
@@ -15,7 +15,7 @@ function onClick() {
 
 <template>
   <IconBtn
-    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3'"
+    :class="props.innerClass ? props.innerClass : 'absolute right-3 top-3 z-10'"
     @click.stop="onClick"
   >
     <VIcon icon="mdi-close" />
diff --git a/src/components/cards/CustomRuleCard.vue b/src/components/cards/CustomRuleCard.vue
index a243829f..becd79f8 100644
--- a/src/components/cards/CustomRuleCard.vue
+++ b/src/components/cards/CustomRuleCard.vue
@@ -102,8 +102,8 @@ function onClose() {
 <template>
   <div>
     <VCard variant="tonal" class="app-card-shell" @click="openRuleInfoDialog">
-      <span class="absolute top-3 right-12">
-        <IconBtn>
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
diff --git a/src/components/cards/DirectoryCard.vue b/src/components/cards/DirectoryCard.vue
index 0bc45ce6..8f3a9805 100644
--- a/src/components/cards/DirectoryCard.vue
+++ b/src/components/cards/DirectoryCard.vue
@@ -204,8 +204,8 @@ watch(
         :label="t('directory.alias')"
         class="me-20 text-high-emphasis font-weight-bold"
       />
-      <span class="absolute top-3 right-12">
-        <IconBtn>
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
diff --git a/src/components/cards/DownloaderCard.vue b/src/components/cards/DownloaderCard.vue
index f5bd51e9..f152d395 100644
--- a/src/components/cards/DownloaderCard.vue
+++ b/src/components/cards/DownloaderCard.vue
@@ -257,8 +257,8 @@ onUnmounted(() => {
         :class="{ 'transition transform-cpu duration-300 -translate-y-1': hover.isHovering }"
       >
         <VDialogCloseBtn @click="onClose" />
-        <span class="absolute top-3 right-12">
-          <IconBtn>
+        <span class="app-card-top-action absolute top-3 right-12">
+          <IconBtn @click.stop>
             <VIcon class="cursor-move" icon="mdi-drag" />
           </IconBtn>
         </span>
diff --git a/src/components/cards/FilterRuleCard.vue b/src/components/cards/FilterRuleCard.vue
index 81b7d597..bff2473a 100644
--- a/src/components/cards/FilterRuleCard.vue
+++ b/src/components/cards/FilterRuleCard.vue
@@ -46,8 +46,8 @@ onMounted(() => {
 
 <template>
   <VCard variant="tonal" class="app-card-shell">
-    <span class="absolute top-3 right-12">
-      <IconBtn>
+    <span class="app-card-top-action absolute top-3 right-12">
+      <IconBtn @click.stop>
         <VIcon class="cursor-move" icon="mdi-drag" />
       </IconBtn>
     </span>
diff --git a/src/components/cards/FilterRuleGroupCard.vue b/src/components/cards/FilterRuleGroupCard.vue
index 0a2b0ba7..0491b43e 100644
--- a/src/components/cards/FilterRuleGroupCard.vue
+++ b/src/components/cards/FilterRuleGroupCard.vue
@@ -206,8 +206,8 @@ function onClose() {
 <template>
   <div>
     <VCard variant="tonal" class="app-card-shell" @click="opengroupInfoDialog">
-      <span class="absolute top-3 right-12">
-        <IconBtn>
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
diff --git a/src/components/cards/NotificationChannelCard.vue b/src/components/cards/NotificationChannelCard.vue
index f298c790..70306cd6 100644
--- a/src/components/cards/NotificationChannelCard.vue
+++ b/src/components/cards/NotificationChannelCard.vue
@@ -154,8 +154,8 @@ function onClose() {
 <template>
   <div>
     <VCard variant="tonal" class="app-card-shell" @click="openNotificationInfoDialog">
-      <span class="absolute top-3 right-12">
-        <IconBtn>
+      <span class="app-card-top-action absolute top-3 right-12">
+        <IconBtn @click.stop>
           <VIcon class="cursor-move" icon="mdi-drag" />
         </IconBtn>
       </span>
diff --git a/src/styles/common.scss b/src/styles/common.scss
index b62e15d8..c48b28e6 100644
--- a/src/styles/common.scss
+++ b/src/styles/common.scss
@@ -54,6 +54,11 @@ html.v-overlay-scroll-blocked body {
   block-size: 100%;
 }
 
+// 保证卡片右上角的浮动操作区始终高于可点击的卡片内容层，避免误触发详情打开。
+.app-card-top-action {
+  z-index: 2;
+}
+
 .app-card-summary {
   position: relative;
   display: flex;