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

style: 优化可滚动Dialog内容与遮罩布局

Browse Source 
ScrollableDialogContent重构遮罩与内容结构，遮罩层支持flex居中与内边距，内容容器样式与DialogContent统一，提升弹窗显示一致性与居中效果。DialogContent补充relative定位，便于后续扩展。
This commit is contained in:
谦君
2025-12-25 20:12:01 +08:00
parent 04ee72a33d
commit ca1aed1e9b
2 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,7 +9,7 @@
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 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 props.class
) )
" "

29
src/components/ui/dialog/ScrollableDialogContent.vue
View File

@@ -1,16 +1,19 @@
<template> <template>
<DialogPortal> <DialogPortal>
<DialogOverlay /> <DialogOverlay
<DialogContent data-slot="dialog-overlay"
data-slot="scrollable-dialog-content" 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"
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
)
"
> >
<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"> <div class="shrink-0 px-4 pt-4 pb-3 sm:px-6 sm:pt-6 sm:pb-4 border-b">
<slot name="header" /> <slot name="header" />
@@ -35,7 +38,8 @@
<X /> <X />
<span class="sr-only">Close</span> <span class="sr-only">Close</span>
</DialogClose> </DialogClose>
</DialogContent> </DialogContent>
</DialogOverlay>
</DialogPortal> </DialogPortal>
</template> </template>
@@ -44,9 +48,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