From ba10f90dde2acff2307e2b0653a219a899ca8fc3 Mon Sep 17 00:00:00 2001
From: shenmo <jifengshenmo@outlook.com>
Date: Sun, 12 Apr 2026 21:30:33 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=BB=9A=E5=8A=A8):=20=E4=B8=BA=E5=A4=9A?=
 =?UTF-8?q?=E4=B8=AA=E7=BB=84=E4=BB=B6=E6=B7=BB=E5=8A=A0overscroll-contain?=
 =?UTF-8?q?=E5=B9=B6=E5=A4=84=E7=90=86=E6=BB=9A=E8=BD=AE=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为多个模态框和列表组件添加overscroll-contain类以防止滚动链
添加处理函数阻止模态框背景的滚轮事件传播到内容区域
---
 src/components/AppDetailModal.vue                     | 6 +++---
 src/components/DownloadDetail.vue                     | 7 +++++++
 src/components/UpdateCenterModal.vue                  | 7 +++++++
 src/components/update-center/UpdateCenterList.vue     | 2 +-
 src/components/update-center/UpdateCenterLogPanel.vue | 2 +-
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index fd330b78..9f62e2de 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -14,7 +14,7 @@
       @click.self="closeModal"
     >
       <div
-        class="modal-panel relative w-full max-w-5xl max-h-[85vh] overflow-y-auto scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 px-6 pb-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
+        class="modal-panel relative w-full max-w-5xl max-h-[85vh] overflow-y-auto overscroll-contain scrollbar-nowidth rounded-3xl border border-white/10 bg-white/95 px-6 pb-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
       >
         <!-- 返回按钮 - sticky定位在模态框内部左上角，滚动时始终可见 -->
         <button
@@ -276,7 +276,7 @@
                 应用详情
               </h3>
               <div
-                class="max-h-48 overflow-y-auto text-sm leading-relaxed text-slate-600 dark:text-slate-300 space-y-2"
+                class="max-h-48 overflow-y-auto overscroll-contain text-sm leading-relaxed text-slate-600 dark:text-slate-300 space-y-2"
                 v-html="displayApp.more.replace(/\n/g, '<br>')"
               ></div>
             </div>
@@ -351,7 +351,7 @@
           应用信息
         </h3>
         <div
-          class="max-h-80 overflow-y-auto rounded-xl bg-slate-50 p-4 dark:bg-slate-900/50 space-y-3"
+          class="max-h-80 overflow-y-auto overscroll-contain rounded-xl bg-slate-50 p-4 dark:bg-slate-900/50 space-y-3"
         >
           <div v-if="displayApp?.name" class="flex justify-between">
             <span class="text-sm text-slate-500">应用名称</span>
diff --git a/src/components/DownloadDetail.vue b/src/components/DownloadDetail.vue
index f449d995..ce6cfc39 100644
--- a/src/components/DownloadDetail.vue
+++ b/src/components/DownloadDetail.vue
@@ -11,6 +11,7 @@
       v-if="show"
       class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-10"
       @click="handleOverlayClick"
+      @wheel="onOverlayWheel"
     >
       <div
         class="scrollbar-nowidth scrollbar-thumb-slate-200 dark:scrollbar-thumb-slate-700 scrollbar-track-transparent w-full max-w-2xl max-h-[85vh] overflow-y-auto overscroll-contain rounded-3xl border border-white/10 bg-white/95 p-6 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
@@ -310,4 +311,10 @@ const copyLogs = () => {
 const downloadProgress = computed(() => {
   return props.download ? Math.floor(props.download.progress * 100) : 0;
 });
+
+const onOverlayWheel = (e: WheelEvent) => {
+  const target = e.target as HTMLElement;
+  if (target.closest(".overflow-y-auto, .overflow-auto")) return;
+  e.preventDefault();
+};
 </script>
diff --git a/src/components/UpdateCenterModal.vue b/src/components/UpdateCenterModal.vue
index 76ce5a2f..7e08dc7d 100644
--- a/src/components/UpdateCenterModal.vue
+++ b/src/components/UpdateCenterModal.vue
@@ -10,6 +10,7 @@
     <div
       v-if="show"
       class="fixed inset-0 z-50 flex items-start justify-center bg-slate-900/70 px-4 py-6 lg:py-10"
+      @wheel="onOverlayWheel"
     >
       <div
         class="flex max-h-[90vh] w-full max-w-6xl flex-col overflow-hidden rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
@@ -78,4 +79,10 @@ const props = defineProps<{
 }>();
 
 const selectedCount = computed(() => props.store.getSelectedItems().length);
+
+const onOverlayWheel = (e: WheelEvent) => {
+  const target = e.target as HTMLElement;
+  if (target.closest(".overflow-y-auto, .overflow-auto")) return;
+  e.preventDefault();
+};
 </script>
diff --git a/src/components/update-center/UpdateCenterList.vue b/src/components/update-center/UpdateCenterList.vue
index 7947177e..f85ce2aa 100644
--- a/src/components/update-center/UpdateCenterList.vue
+++ b/src/components/update-center/UpdateCenterList.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="min-h-0 overflow-y-auto border-r border-slate-200/70 p-6 dark:border-slate-800/70"
+    class="min-h-0 overflow-y-auto overscroll-contain border-r border-slate-200/70 p-6 dark:border-slate-800/70"
   >
     <div
       v-if="items.length === 0"
diff --git a/src/components/update-center/UpdateCenterLogPanel.vue b/src/components/update-center/UpdateCenterLogPanel.vue
index 50fb3b46..b77c43f0 100644
--- a/src/components/update-center/UpdateCenterLogPanel.vue
+++ b/src/components/update-center/UpdateCenterLogPanel.vue
@@ -10,7 +10,7 @@
         >{{ tasks.length }} 项</span
       >
     </div>
-    <div class="mt-4 min-h-0 flex-1 space-y-4 overflow-y-auto">
+    <div class="mt-4 min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain">
       <div
         v-if="tasks.length === 0"
         class="rounded-2xl border border-dashed border-slate-200/80 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-800/80 dark:text-slate-400"