Moe/ogame-vue-ts
1
0
Fork 0
mirror of https://github.com/setube/ogame-vue-ts.git synced 2026-05-12 16:05:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: 优化Dialog与AlertDialog居中与间距样式

Browse Source 
调整AlertDialogContent、DialogContent及DialogOverlay的布局样式，统一弹窗居中方式，增加flex居中与padding，提升弹窗在不同屏幕下的显示效果与一致性。
This commit is contained in:
谦君
2025-12-25 19:51:15 +08:00
parent b6bcae3294
commit d95dffcfcd
3 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ui/alert-dialog/AlertDialogContent.vue
View File

@@ -2,20 +2,21 @@
<AlertDialogPortal> <AlertDialogPortal>
<AlertDialogOverlay <AlertDialogOverlay
data-slot="alert-dialog-overlay" 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" 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"
/> >
<AlertDialogContent <AlertDialogContent
data-slot="alert-dialog-content" data-slot="alert-dialog-content"
v-bind="{ ...$attrs, ...forwarded }" v-bind="{ ...$attrs, ...forwarded }"
:class=" :class="
cn( 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', '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 props.class
) )
" "
> >
<slot /> <slot />
</AlertDialogContent> </AlertDialogContent>
</AlertDialogOverlay>
</AlertDialogPortal> </AlertDialogPortal>
</template> </template>

11
src/components/ui/dialog/DialogContent.vue
View File

@@ -1,12 +1,15 @@
<template> <template>
<DialogPortal> <DialogPortal>
<DialogOverlay /> <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 <DialogContent
data-slot="dialog-content" data-slot="dialog-content"
v-bind="{ ...$attrs, ...forwarded }" v-bind="{ ...$attrs, ...forwarded }"
:class=" :class="
cn( 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', '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 props.class
) )
" "
@@ -22,6 +25,7 @@
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</DialogClose> </DialogClose>
</DialogContent> </DialogContent>
</DialogOverlay>
</DialogPortal> </DialogPortal>
</template> </template>
@@ -30,9 +34,8 @@
import type { HTMLAttributes } from 'vue' import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core' import { reactiveOmit } from '@vueuse/core'
import { X } from 'lucide-vue-next' 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 { cn } from '@/lib/utils'
import DialogOverlay from './DialogOverlay.vue'
defineOptions({ defineOptions({
inheritAttrs: false inheritAttrs: false

2
src/components/ui/dialog/DialogOverlay.vue
View File

@@ -4,7 +4,7 @@
v-bind="delegatedProps" v-bind="delegatedProps"
:class=" :class="
cn( 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 props.class
) )
" "