feat: 更新 FaDrawer 和 FaModal 组件，强制关闭自带遮罩

Author: hooray

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"

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"

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"

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"