From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001
From: wwf <yearningwang@iqtogether.com>
Date: 星期三, 04 六月 2025 15:17:49 +0800
Subject: [PATCH] 初始化
---
app/components/base/dialog/index.tsx | 49 +++++++++++++++++++++++++++----------------------
1 files changed, 27 insertions(+), 22 deletions(-)
diff --git a/app/components/base/dialog/index.tsx b/app/components/base/dialog/index.tsx
index 6eae3bc..f439067 100644
--- a/app/components/base/dialog/index.tsx
+++ b/app/components/base/dialog/index.tsx
@@ -1,6 +1,6 @@
import { Fragment, useCallback } from 'react'
import type { ElementType, ReactNode } from 'react'
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react'
+import { Dialog, Transition } from '@headlessui/react'
import classNames from '@/utils/classnames'
// https://headlessui.com/react/dialog
@@ -34,32 +34,37 @@
return (
<Transition appear show={show} as={Fragment}>
<Dialog as="div" className="relative z-40" onClose={close}>
- <TransitionChild>
- <div className={classNames(
- 'fixed inset-0 bg-background-overlay-backdrop backdrop-blur-[6px]',
- 'duration-300 ease-in data-[closed]:opacity-0',
- 'data-[enter]:opacity-100',
- 'data-[leave]:opacity-0',
- )} />
- </TransitionChild>
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100"
+ leaveTo="opacity-0"
+ >
+ <div className="fixed inset-0 bg-black bg-opacity-25" />
+ </Transition.Child>
<div className="fixed inset-0 overflow-y-auto">
- <div className="flex min-h-full items-center justify-center">
- <TransitionChild>
- <DialogPanel className={classNames(
- 'w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl',
- 'duration-100 ease-in data-[closed]:opacity-0 data-[closed]:scale-95',
- 'data-[enter]:opacity-100 data-[enter]:scale-100',
- 'data-[leave]:opacity-0 data-[enter]:scale-95',
- className,
- )}>
+ <div className="flex items-center justify-center min-h-full">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-out duration-300"
+ enterFrom="opacity-0 scale-95"
+ enterTo="opacity-100 scale-100"
+ leave="ease-in duration-200"
+ leaveFrom="opacity-100 scale-100"
+ leaveTo="opacity-0 scale-95"
+ >
+ <Dialog.Panel className={classNames('w-full max-w-[800px] p-6 overflow-hidden transition-all transform bg-components-panel-bg border-[0.5px] border-components-panel-border shadow-xl rounded-2xl', className)}>
{Boolean(title) && (
- <DialogTitle
+ <Dialog.Title
as={titleAs || 'h3'}
className={classNames('pr-8 pb-3 title-2xl-semi-bold text-text-primary', titleClassName)}
>
{title}
- </DialogTitle>
+ </Dialog.Title>
)}
<div className={classNames(bodyClassName)}>
{children}
@@ -69,8 +74,8 @@
{footer}
</div>
)}
- </DialogPanel>
- </TransitionChild>
+ </Dialog.Panel>
+ </Transition.Child>
</div>
</div>
</Dialog>
--
Gitblit v1.8.0