fix: 弹框居中写法调整,增强兼容性

This commit is contained in:
黄振敏
2026-03-11 11:48:53 +08:00
parent c28dd2d278
commit 5293a32748
2 changed files with 21 additions and 28 deletions

View File

@@ -34,7 +34,7 @@ import {
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { CloseIcon, DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon, ResetIcon } from './Icons';
import { DragIcon, ExitIcon, SettingsIcon, StarIcon, TrashIcon, ResetIcon } from './Icons';
const NON_FROZEN_COLUMN_IDS = [
'yesterdayChangePercent',
@@ -1167,22 +1167,13 @@ export default function PcFundTable({
>
<DialogContent
className="sm:max-w-2xl max-h-[88vh] flex flex-col p-0 overflow-hidden"
showCloseButton={false}
showCloseButton
onPointerDownOutside={blockDialogClose ? (e) => e.preventDefault() : undefined}
>
<DialogHeader className="flex-shrink-0 flex flex-row items-center justify-between gap-2 space-y-0 px-6 pb-4 pt-6 text-left border-b border-[var(--border)]">
<DialogTitle className="text-base font-semibold text-[var(--text)]">
基金详情
</DialogTitle>
<button
type="button"
className="icon-button rounded-lg"
aria-label="关闭"
onClick={() => setCardDialogRow(null)}
style={{ padding: 4, borderColor: 'transparent' }}
>
<CloseIcon width="20" height="20" />
</button>
</DialogHeader>
<div
className="flex-1 min-h-0 overflow-y-auto px-6 py-4"

View File

@@ -56,10 +56,11 @@ function DialogContent({
return (
<DialogPortal data-slot="dialog-portal">
<DialogOverlay className={overlayClassName} style={overlayStyle} />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<DialogPrimitive.Content
data-slot="dialog-content"
className={cn(
"fixed top-[50%] left-[50%] z-50 w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
"relative w-full max-w-[calc(100%-2rem)] rounded-[16px] border border-[var(--border)] text-[var(--foreground)] p-6 dialog-content-shadow outline-none duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
className
)}
{...props}>
@@ -73,6 +74,7 @@ function DialogContent({
</DialogPrimitive.Close>
)}
</DialogPrimitive.Content>
</div>
</DialogPortal>
);
}