From ca7520cb2e7a0dce5aab7ead658e4884113bde7c Mon Sep 17 00:00:00 2001
From: shenmo <jifengshenmo@outlook.com>
Date: Sun, 12 Apr 2026 21:34:51 +0800
Subject: [PATCH] =?UTF-8?q?fix(modal):=20=E4=BF=AE=E5=A4=8D=E6=A8=A1?=
 =?UTF-8?q?=E6=80=81=E6=A1=86=E6=BB=9A=E5=8A=A8=E5=92=8C=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为多个模态框组件添加滚动和点击事件处理，防止背景滚动时内容滚动
当点击模态框背景时关闭模态框，同时阻止事件冒泡到内容区域
---
 src/components/AppDetailModal.vue                     | 7 +++++++
 src/components/DownloadQueue.vue                      | 5 ++++-
 src/components/InstalledAppsModal.vue                 | 7 +++++++
 src/components/UpdateCenterModal.vue                  | 6 ++++++
 src/components/update-center/UpdateCenterLogPanel.vue | 4 +++-
 5 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/AppDetailModal.vue b/src/components/AppDetailModal.vue
index 9f62e2de..199ce6f8 100644
--- a/src/components/AppDetailModal.vue
+++ b/src/components/AppDetailModal.vue
@@ -12,6 +12,7 @@
       v-bind="attrs"
       class="fixed inset-0 z-50 flex items-center justify-center overflow-hidden bg-slate-900/70 p-4"
       @click.self="closeModal"
+      @wheel="onOverlayWheel"
     >
       <div
         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"
@@ -629,4 +630,10 @@ const openPreview = (index: number) => {
 const hideImage = (e: Event) => {
   (e.target as HTMLElement).style.display = "none";
 };
+
+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/DownloadQueue.vue b/src/components/DownloadQueue.vue
index e094a507..85c7b994 100644
--- a/src/components/DownloadQueue.vue
+++ b/src/components/DownloadQueue.vue
@@ -49,7 +49,10 @@
       leave-from-class="opacity-100 translate-y-0"
       leave-to-class="opacity-0 -translate-y-2"
     >
-      <div v-show="isExpanded" class="max-h-96 overflow-y-auto overscroll-contain px-3 pb-4">
+      <div
+        v-show="isExpanded"
+        class="max-h-96 overflow-y-auto overscroll-contain px-3 pb-4"
+      >
         <div
           v-if="downloads.length === 0"
           class="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200/80 px-4 py-12 text-slate-500 dark:border-slate-800/80 dark:text-slate-400"
diff --git a/src/components/InstalledAppsModal.vue b/src/components/InstalledAppsModal.vue
index 3275342e..76ac3eb7 100644
--- a/src/components/InstalledAppsModal.vue
+++ b/src/components/InstalledAppsModal.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.self="$emit('close')"
+      @wheel="onOverlayWheel"
     >
       <div
         class="flex w-full max-w-4xl max-h-[85vh] flex-col rounded-3xl border border-white/10 bg-white/95 shadow-2xl dark:border-slate-800 dark:bg-slate-900"
@@ -193,4 +194,10 @@ defineEmits<{
   (e: "uninstall", app: App): void;
   (e: "switch-origin", origin: "apm" | "spark"): void;
 }>();
+
+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 7e08dc7d..0bd8372c 100644
--- a/src/components/UpdateCenterModal.vue
+++ b/src/components/UpdateCenterModal.vue
@@ -11,9 +11,11 @@
       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"
+      @click="onOverlayClick"
     >
       <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"
+        @click.stop
       >
         <UpdateCenterToolbar
           :search-query="store.searchQuery.value"
@@ -85,4 +87,8 @@ const onOverlayWheel = (e: WheelEvent) => {
   if (target.closest(".overflow-y-auto, .overflow-auto")) return;
   e.preventDefault();
 };
+
+const onOverlayClick = () => {
+  props.store.requestClose();
+};
 </script>
diff --git a/src/components/update-center/UpdateCenterLogPanel.vue b/src/components/update-center/UpdateCenterLogPanel.vue
index b77c43f0..79e7d7f4 100644
--- a/src/components/update-center/UpdateCenterLogPanel.vue
+++ b/src/components/update-center/UpdateCenterLogPanel.vue
@@ -10,7 +10,9 @@
         >{{ tasks.length }} 项</span
       >
     </div>
-    <div class="mt-4 min-h-0 flex-1 space-y-4 overflow-y-auto overscroll-contain">
+    <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"