From fc2c89fa2dc2aa60c94e6a8f3ce0f1c7fd7b2e8b Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Thu, 30 Apr 2026 21:47:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20FaDrawer=20?=
 =?UTF-8?q?=E5=92=8C=20FaModal=20=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=BC=BA?=
 =?UTF-8?q?=E5=88=B6=E5=85=B3=E9=97=AD=E8=87=AA=E5=B8=A6=E9=81=AE=E7=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/components/src/drawer/index.vue            |  2 +-
 .../components/src/drawer/sheet/SheetContent.vue    | 13 +++++++++++--
 .../components/src/modal/dialog/DialogContent.vue   | 13 +++++++++++--
 packages/components/src/modal/index.vue             |  2 +-
 4 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/packages/components/src/drawer/index.vue b/packages/components/src/drawer/index.vue
index decb9f62..49fdbba9 100644
--- a/packages/components/src/drawer/index.vue
+++ b/packages/components/src/drawer/index.vue
@@ -178,7 +178,7 @@ function handleAnimationEnd() {
 </script>
 
 <template>
-  <Sheet :open="isOpen" @update:open="updateOpen">
+  <Sheet :modal="false" :open="isOpen" @update:open="updateOpen">
     <SheetContent
       ref="sheetContentRef"
       :drawer-id="drawerId"
diff --git a/packages/components/src/drawer/sheet/SheetContent.vue b/packages/components/src/drawer/sheet/SheetContent.vue
index 863f991f..0dd6a6e6 100644
--- a/packages/components/src/drawer/sheet/SheetContent.vue
+++ b/packages/components/src/drawer/sheet/SheetContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -45,6 +45,15 @@ defineExpose({
 })
 
 const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
 </script>
 
 <template>
@@ -71,7 +80,7 @@ const showOverlay = computed(() => props.open && props.overlay)
         }"
       />
     </Transition>
-    <SheetOverlay class="hidden" />
+    <SheetOverlay />
     <DialogContent
       ref="sheetContentRef"
       data-slot="sheet-content"
diff --git a/packages/components/src/modal/dialog/DialogContent.vue b/packages/components/src/modal/dialog/DialogContent.vue
index ec798e1b..9b04b291 100644
--- a/packages/components/src/modal/dialog/DialogContent.vue
+++ b/packages/components/src/modal/dialog/DialogContent.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
 import type { HTMLAttributes } from 'vue'
-import { reactiveOmit } from '@vueuse/core'
+import { reactiveOmit, useScrollLock } from '@vueuse/core'
 import { Maximize, Minimize, X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -47,6 +47,15 @@ defineExpose({
 })
 
 const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
 </script>
 
 <template>
@@ -73,7 +82,7 @@ const showOverlay = computed(() => props.open && props.overlay)
         }"
       />
     </Transition>
-    <DialogOverlay class="hidden" />
+    <DialogOverlay />
     <DialogContent
       ref="dialogContentRef"
       v-bind="forwarded"
diff --git a/packages/components/src/modal/index.vue b/packages/components/src/modal/index.vue
index 40aaec34..c6818be8 100644
--- a/packages/components/src/modal/index.vue
+++ b/packages/components/src/modal/index.vue
@@ -216,7 +216,7 @@ function handleAnimationEnd() {
 </script>
 
 <template>
-  <Dialog :open="isOpen" @update:open="updateOpen">
+  <Dialog :modal="false" :open="isOpen" @update:open="updateOpen">
     <DialogContent
       ref="dialogContentRef"
       :modal-id="modalId"