From e76325475ec9759664cd2e15ec9155921a5759cf Mon Sep 17 00:00:00 2001
From: Hooray <304327508@qq.com>
Date: Tue, 11 Feb 2025 17:56:10 +0800
Subject: [PATCH] =?UTF-8?q?`FaDrawer`/`FaModal`=E5=BC=80=E5=90=AF=E9=81=AE?=
 =?UTF-8?q?=E7=BD=A9=E5=B1=82=E6=97=B6=E7=A6=81=E7=94=A8=E5=85=A8=E5=B1=80?=
 =?UTF-8?q?=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/ui/components/FaDrawer/sheet/SheetContent.vue | 15 +++++++++++++--
 src/ui/components/FaDrawer/sheet/index.ts         |  8 ++++----
 .../components/FaModal/dialog/DialogContent.vue   | 14 +++++++++++++-
 3 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/src/ui/components/FaDrawer/sheet/SheetContent.vue b/src/ui/components/FaDrawer/sheet/SheetContent.vue
index 47e98c6b..1c81e4d0 100644
--- a/src/ui/components/FaDrawer/sheet/SheetContent.vue
+++ b/src/ui/components/FaDrawer/sheet/SheetContent.vue
@@ -3,11 +3,11 @@ import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import type { SheetVariants } from '.'
 import { cn } from '@/utils'
+import { useScrollLock } from '@vueuse/core'
 import { X } from 'lucide-vue-next'
 import {
   DialogClose,
   DialogContent,
-
   DialogPortal,
   useForwardPropsEmits,
 } from 'radix-vue'
@@ -41,6 +41,17 @@ const delegatedProps = computed(() => {
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
 
+const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
+
 const id = inject('DrawerId')
 </script>
 
@@ -58,7 +69,7 @@ const id = inject('DrawerId')
       :appear="true"
     >
       <div
-        v-if="props.open && props.overlay"
+        v-if="showOverlay"
         :data-drawer-id="id"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,
diff --git a/src/ui/components/FaDrawer/sheet/index.ts b/src/ui/components/FaDrawer/sheet/index.ts
index 4354acc6..f53771ec 100644
--- a/src/ui/components/FaDrawer/sheet/index.ts
+++ b/src/ui/components/FaDrawer/sheet/index.ts
@@ -14,12 +14,12 @@ export const sheetVariants = cva(
   {
     variants: {
       side: {
-        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        top: 'inset-x-0 top-0 shadow-[0_1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
-        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
+            'inset-x-0 bottom-0 shadow-[0_-1px_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 shadow-[1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-md',
         right:
-            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
+            'inset-y-0 right-0 h-full w-3/4 shadow-[-1px_0_0_0_hsl(var(--border))] data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-md',
       },
     },
     defaultVariants: {
diff --git a/src/ui/components/FaModal/dialog/DialogContent.vue b/src/ui/components/FaModal/dialog/DialogContent.vue
index c53e6848..e1a6151d 100644
--- a/src/ui/components/FaModal/dialog/DialogContent.vue
+++ b/src/ui/components/FaModal/dialog/DialogContent.vue
@@ -2,6 +2,7 @@
 import type { DialogContentEmits, DialogContentProps } from 'radix-vue'
 import type { HTMLAttributes } from 'vue'
 import { cn } from '@/utils'
+import { useScrollLock } from '@vueuse/core'
 import { Maximize, Minimize, X } from 'lucide-vue-next'
 import {
   DialogClose,
@@ -44,6 +45,17 @@ defineExpose({
   el: dialogContentRef,
 })
 
+const showOverlay = computed(() => props.open && props.overlay)
+const isLocked = useScrollLock(document.body)
+watch(showOverlay, (val) => {
+  if (val) {
+    isLocked.value = true
+  }
+  else {
+    isLocked.value = false
+  }
+})
+
 const id = inject('ModalId')
 </script>
 
@@ -61,7 +73,7 @@ const id = inject('ModalId')
       :appear="true"
     >
       <div
-        v-if="props.open && props.overlay"
+        v-if="showOverlay"
         :data-modal-id="id"
         :class="cn('fixed inset-0 z-2000 data-[state=closed]:animate-out data-[state=open]:animate-in bg-black/50 data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0', {
           'backdrop-blur-sm': props.overlayBlur,