From 16ebc67796431630d44f3e7de3ac159ffe803665 Mon Sep 17 00:00:00 2001
From: Harold Zhang <HZhang@datacolor.com>
Date: Mon, 15 Jun 2026 16:34:53 +0800
Subject: [PATCH] feat: fixed useScrollLock() can not be unlock

---
 .../ui/alert-dialog/AlertDialogContent.vue    | 22 ++++++-------
 .../ui/alert-dialog/AlertDialogOverlay.vue    | 31 +++++++++++++++++++
 2 files changed, 41 insertions(+), 12 deletions(-)
 create mode 100644 packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue

diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
index 58aba020..c0775f40 100644
--- a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogContent.vue
@@ -5,7 +5,6 @@ import type { ClassType } from '@vben-core/typings';
 
 import { ref } from 'vue';
 
-import { useScrollLock } from '@vben-core/composables';
 import { cn } from '@vben-core/shared/utils';
 
 import { reactiveOmit } from '@vueuse/core';
@@ -15,6 +14,8 @@ import {
   useForwardPropsEmits,
 } from 'reka-ui';
 
+import AlertDialogOverlay from './AlertDialogOverlay.vue';
+
 defineOptions({
   inheritAttrs: false,
 });
@@ -38,8 +39,9 @@ const emits = defineEmits<
 
 // reka-ui 的 AlertDialog 在 modal=true 时会将 body 设置 pointer-events:none，
 // 弹出层（如 Select 下拉框）会因此无法点击。这里通过在上层传入 :modal="false" 来
-// 避免该问题，同时自行渲染遮罩并锁定滚动。
-useScrollLock();
+// 避免该问题，同时通过 AlertDialogOverlay 组件自行渲染遮罩并锁定滚动。
+// AlertDialogOverlay 通过 v-if 控制挂载/卸载，其内部的 useScrollLock 会在组件
+// 卸载时自动解锁滚动。
 
 const delegatedProps = reactiveOmit(props, 'class');
 
@@ -64,17 +66,13 @@ defineExpose({
 <template>
   <AlertDialogPortal>
     <Transition name="fade" appear>
-      <div
+      <AlertDialogOverlay
         v-if="open && modal"
-        class="fixed inset-0 z-popup bg-overlay"
-        :style="{
-          ...(zIndex ? { zIndex } : {}),
-          position: 'fixed',
-          backdropFilter:
-            overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
-        }"
+        :overlay-blur="overlayBlur"
+        position="fixed"
+        :z-index="zIndex"
         @click="() => emits('close')"
-      ></div>
+      />
     </Transition>
     <AlertDialogContent
       data-slot="alert-dialog-content"
diff --git a/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
new file mode 100644
index 00000000..0c721c77
--- /dev/null
+++ b/packages/@core/ui-kit/shadcn-ui/src/ui/alert-dialog/AlertDialogOverlay.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { useScrollLock } from '@vben-core/composables';
+import { cn } from '@vben-core/shared/utils';
+
+const props = withDefaults(
+  defineProps<{
+    class?: any;
+    overlayBlur?: number;
+    position?: 'absolute' | 'fixed';
+    zIndex?: number;
+  }>(),
+  {
+    position: 'fixed',
+  },
+);
+
+// 通过 v-if 控制挂载/卸载，组件卸载时 useScrollLock 自动解锁滚动
+useScrollLock();
+</script>
+
+<template>
+  <div
+    :style="{
+      ...(zIndex ? { zIndex } : {}),
+      position,
+      backdropFilter:
+        overlayBlur && overlayBlur > 0 ? `blur(${overlayBlur}px)` : 'none',
+    }"
+    :class="cn('z-popup bg-overlay inset-0 fixed', props.class)"
+  ></div>
+</template>