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/drawer/index.tsx | 45 ++++++++++++++++++---------------------------
1 files changed, 18 insertions(+), 27 deletions(-)
diff --git a/app/components/base/drawer/index.tsx b/app/components/base/drawer/index.tsx
index 8217caa..c1057b9 100644
--- a/app/components/base/drawer/index.tsx
+++ b/app/components/base/drawer/index.tsx
@@ -1,5 +1,5 @@
'use client'
-import { Dialog, DialogBackdrop, DialogTitle } from '@headlessui/react'
+import { Dialog } from '@headlessui/react'
import { useTranslation } from 'react-i18next'
import { XMarkIcon } from '@heroicons/react/24/outline'
import Button from '../button'
@@ -8,9 +8,7 @@
export type IDrawerProps = {
title?: string
description?: string
- dialogClassName?: string
- dialogBackdropClassName?: string
- panelClassName?: string
+ panelClassname?: string
children: React.ReactNode
footer?: React.ReactNode
mask?: boolean
@@ -27,9 +25,7 @@
export default function Drawer({
title = '',
description = '',
- dialogClassName = '',
- dialogBackdropClassName = '',
- panelClassName = '',
+ panelClassname = '',
children,
footer,
mask = true,
@@ -48,30 +44,25 @@
unmount={unmount}
open={isOpen}
onClose={() => !clickOutsideNotOpen && onClose()}
- className={cn('fixed inset-0 z-[30] overflow-y-auto', dialogClassName)}
+ className="fixed z-30 inset-0 overflow-y-auto"
>
- <div className={cn('flex h-screen w-screen justify-end', positionCenter && '!justify-center')}>
+ <div className={cn('flex w-screen h-screen justify-end', positionCenter && '!justify-center')}>
{/* mask */}
- <DialogBackdrop
- className={cn('fixed inset-0 z-[40]', mask && 'bg-black/30', dialogBackdropClassName)}
- onClick={() => {
- !clickOutsideNotOpen && onClose()
- }}
+ <Dialog.Overlay
+ className={cn('z-40 fixed inset-0', mask && 'bg-black bg-opacity-30')}
/>
- <div className={cn('relative z-[50] flex w-full max-w-sm flex-col justify-between overflow-hidden bg-components-panel-bg p-6 text-left align-middle shadow-xl', panelClassName)}>
+ <div className={cn('relative z-50 flex flex-col justify-between bg-background-body w-full max-w-sm p-6 overflow-hidden text-left align-middle shadow-xl', panelClassname)}>
<>
- <div className='flex justify-between'>
- {title && <DialogTitle
- as="h3"
- className="text-lg font-medium leading-6 text-text-primary"
- >
- {title}
- </DialogTitle>}
- {showClose && <DialogTitle className="mb-4 flex cursor-pointer items-center" as="div">
- <XMarkIcon className='h-4 w-4 text-text-tertiary' onClick={onClose} />
- </DialogTitle>}
- </div>
- {description && <div className='mt-2 text-xs font-normal text-text-tertiary'>{description}</div>}
+ {title && <Dialog.Title
+ as="h3"
+ className="text-lg font-medium leading-6 text-gray-900"
+ >
+ {title}
+ </Dialog.Title>}
+ {showClose && <Dialog.Title className="flex items-center mb-4" as="div">
+ <XMarkIcon className='w-4 h-4 text-gray-500' onClick={onClose} />
+ </Dialog.Title>}
+ {description && <Dialog.Description className='text-gray-500 text-xs font-normal mt-2'>{description}</Dialog.Description>}
{children}
</>
{footer || (footer === null
--
Gitblit v1.8.0