From ca1aed1e9beac2c2abdabb670d3494d0d890bbb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B0=A6=E5=90=9B?=
 <73606411+setube@users.noreply.github.com>
Date: Thu, 25 Dec 2025 20:12:01 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E5=8F=AF=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8Dialog=E5=86=85=E5=AE=B9=E4=B8=8E=E9=81=AE=E7=BD=A9?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ScrollableDialogContent重构遮罩与内容结构，遮罩层支持flex居中与内边距，内容容器样式与DialogContent统一，提升弹窗显示一致性与居中效果。DialogContent补充relative定位，便于后续扩展。
---
 src/components/ui/dialog/DialogContent.vue    |  2 +-
 .../ui/dialog/ScrollableDialogContent.vue     | 29 ++++++++++---------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index d71b994..ff2506a 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -9,7 +9,7 @@
         v-bind="{ ...$attrs, ...forwarded }"
         :class="
           cn(
-            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 grid w-full max-w-2xl gap-4 rounded-lg border p-6 shadow-lg duration-200',
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 grid w-full max-w-2xl gap-4 rounded-lg border p-6 shadow-lg duration-200 relative',
             props.class
           )
         "
diff --git a/src/components/ui/dialog/ScrollableDialogContent.vue b/src/components/ui/dialog/ScrollableDialogContent.vue
index d5a6a98..d54d1a8 100644
--- a/src/components/ui/dialog/ScrollableDialogContent.vue
+++ b/src/components/ui/dialog/ScrollableDialogContent.vue
@@ -1,16 +1,19 @@
 <template>
   <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="scrollable-dialog-content"
-      v-bind="{ ...$attrs, ...forwarded }"
-      :class="
-        cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-1/2 left-1/2 z-60 w-[calc(100vw-3rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border shadow-lg duration-200 sm:w-auto sm:min-w-[764px] flex flex-col p-0',
-          containerClass
-        )
-      "
+    <DialogOverlay
+      data-slot="dialog-overlay"
+      class="data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-60 bg-black/80 flex items-center justify-center p-4"
     >
+      <DialogContent
+        data-slot="scrollable-dialog-content"
+        v-bind="{ ...$attrs, ...forwarded }"
+        :class="
+          cn(
+            'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 z-60 w-full max-w-3xl rounded-lg border shadow-lg duration-200 flex flex-col p-0 relative',
+            containerClass
+          )
+        "
+      >
       <!-- 固定的头部 -->
       <div class="shrink-0 px-4 pt-4 pb-3 sm:px-6 sm:pt-6 sm:pb-4 border-b">
         <slot name="header" />
@@ -35,7 +38,8 @@
         <X />
         <span class="sr-only">Close</span>
       </DialogClose>
-    </DialogContent>
+      </DialogContent>
+    </DialogOverlay>
   </DialogPortal>
 </template>
 
@@ -44,9 +48,8 @@
   import type { HTMLAttributes } from 'vue'
   import { reactiveOmit } from '@vueuse/core'
   import { X } from 'lucide-vue-next'
-  import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+  import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
   import { cn } from '@/lib/utils'
-  import DialogOverlay from './DialogOverlay.vue'
 
   defineOptions({
     inheritAttrs: false