From d95dffcfcdcb3c72be788f3885f06432006f29f2 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 19:51:15 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96Dialog=E4=B8=8EAlert?=
 =?UTF-8?q?Dialog=E5=B1=85=E4=B8=AD=E4=B8=8E=E9=97=B4=E8=B7=9D=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

调整AlertDialogContent、DialogContent及DialogOverlay的布局样式，统一弹窗居中方式，增加flex居中与padding，提升弹窗在不同屏幕下的显示效果与一致性。
---
 .../ui/alert-dialog/AlertDialogContent.vue    | 27 ++++++-----
 src/components/ui/dialog/DialogContent.vue    | 47 ++++++++++---------
 src/components/ui/dialog/DialogOverlay.vue    |  2 +-
 3 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/src/components/ui/alert-dialog/AlertDialogContent.vue b/src/components/ui/alert-dialog/AlertDialogContent.vue
index c914295..d46b090 100644
--- a/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -2,20 +2,21 @@
   <AlertDialogPortal>
     <AlertDialogOverlay
       data-slot="alert-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-50 bg-black/80"
-    />
-    <AlertDialogContent
-      data-slot="alert-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-50 grid w-[calc(100vw-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200',
-          props.class
-        )
-      "
+      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-50 bg-black/80 flex items-center justify-center p-4"
     >
-      <slot />
-    </AlertDialogContent>
+      <AlertDialogContent
+        data-slot="alert-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-50 grid w-full max-w-lg gap-4 rounded-lg border p-6 shadow-lg duration-200',
+            props.class
+          )
+        "
+      >
+        <slot />
+      </AlertDialogContent>
+    </AlertDialogOverlay>
   </AlertDialogPortal>
 </template>
 
diff --git a/src/components/ui/dialog/DialogContent.vue b/src/components/ui/dialog/DialogContent.vue
index 5ad2df9..d71b994 100644
--- a/src/components/ui/dialog/DialogContent.vue
+++ b/src/components/ui/dialog/DialogContent.vue
@@ -1,27 +1,31 @@
 <template>
   <DialogPortal>
-    <DialogOverlay />
-    <DialogContent
-      data-slot="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 grid w-[calc(100vw-2rem)] max-w-2xl -translate-x-1/2 -translate-y-1/2 gap-4 rounded-lg border p-6 shadow-lg duration-200',
-          props.class
-        )
-      "
+    <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"
     >
-      <slot />
-
-      <DialogClose
-        v-if="showCloseButton"
-        data-slot="dialog-close"
-        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      <DialogContent
+        data-slot="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 grid w-full max-w-2xl gap-4 rounded-lg border p-6 shadow-lg duration-200',
+            props.class
+          )
+        "
       >
-        <X />
-        <span class="sr-only">Close</span>
-      </DialogClose>
-    </DialogContent>
+        <slot />
+
+        <DialogClose
+          v-if="showCloseButton"
+          data-slot="dialog-close"
+          class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+        >
+          <X />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
   </DialogPortal>
 </template>
 
@@ -30,9 +34,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
diff --git a/src/components/ui/dialog/DialogOverlay.vue b/src/components/ui/dialog/DialogOverlay.vue
index 9a801c3..93ba9fd 100644
--- a/src/components/ui/dialog/DialogOverlay.vue
+++ b/src/components/ui/dialog/DialogOverlay.vue
@@ -4,7 +4,7 @@
     v-bind="delegatedProps"
     :class="
       cn(
-        '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',
+        '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',
         props.class
       )
     "