Moe/ogame-vue-ts
1
0
Fork 0
mirror of https://github.com/setube/ogame-vue-ts.git synced 2026-05-11 23:45: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 }"
: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
)
"

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

@@ -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