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/fullscreen-modal/index.tsx | 54 +++++++++++++++++++++++++++++++-----------------------
1 files changed, 31 insertions(+), 23 deletions(-)
diff --git a/app/components/base/fullscreen-modal/index.tsx b/app/components/base/fullscreen-modal/index.tsx
index 209507a..752a91c 100644
--- a/app/components/base/fullscreen-modal/index.tsx
+++ b/app/components/base/fullscreen-modal/index.tsx
@@ -1,7 +1,7 @@
-import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import { Dialog, Transition } from '@headlessui/react'
+import { Fragment } from 'react'
import { RiCloseLargeLine } from '@remixicon/react'
import classNames from '@/utils/classnames'
-import { noop } from 'lodash-es'
type IModal = {
className?: string
@@ -19,22 +19,25 @@
className,
wrapperClassName,
open,
- onClose = noop,
+ onClose = () => { },
children,
closable = false,
overflowVisible = false,
}: IModal) {
return (
- <Transition show={open} appear>
+ <Transition show={open} as={Fragment}>
<Dialog as="div" className={classNames('modal-dialog', wrapperClassName)} onClose={onClose}>
- <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-background-overlay-backdrop backdrop-blur-[6px]" />
+ </Transition.Child>
<div
className="fixed inset-0 h-screen w-screen p-4"
@@ -43,29 +46,34 @@
e.stopPropagation()
}}
>
- <div className="relative h-full w-full rounded-2xl border border-effects-highlight bg-background-default-subtle">
- <TransitionChild>
- <DialogPanel className={classNames(
+ <div className="w-full h-full bg-background-default-subtle rounded-2xl border border-effects-highlight relative">
+ <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(
'h-full',
overflowVisible ? 'overflow-visible' : 'overflow-hidden',
- '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,
)}>
{closable
&& <div
- className='absolute right-3 top-3 z-50 flex h-9 w-9 cursor-pointer items-center justify-center
- rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'
+ className='absolute z-50 top-3 right-3 w-9 h-9 flex items-center justify-center rounded-[10px]
+ bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover cursor-pointer'
onClick={(e) => {
e.stopPropagation()
onClose()
}}>
- <RiCloseLargeLine className='h-3.5 w-3.5 text-components-button-tertiary-text' />
+ <RiCloseLargeLine className='w-3.5 h-3.5 text-components-button-tertiary-text' />
</div>}
{children}
- </DialogPanel>
- </TransitionChild>
+ </Dialog.Panel>
+ </Transition.Child>
</div>
</div>
</Dialog>
--
Gitblit v1.8.0