selfrelease
0df8aa77d9
- 员工花名册管理（加密存储、导入导出） - 薪酬管理（发薪批次、薪酬模版、加班费计算、工资条） - 社保公积金（多城市配置、版本管理、基数调整） - 解聘管理（6步流程、证据链、工作交接） - AI 助手（合同审查、风险预测、RAG 知识库） - Dashboard 仪表盘 - 设置与通知
63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { ReactNode, useEffect, useState } from 'react'
|
|
import { X } from 'lucide-react'
|
|
import clsx from 'clsx'
|
|
|
|
interface ModalProps {
|
|
open: boolean
|
|
onClose: () => void
|
|
title?: string
|
|
children: ReactNode
|
|
className?: string
|
|
size?: 'sm' | 'md' | 'lg' | 'xl'
|
|
}
|
|
|
|
export default function Modal({ open, onClose, title, children, className, size = 'md' }: ModalProps) {
|
|
const [show, setShow] = useState(false)
|
|
|
|
useEffect(() => {
|
|
if (open) {
|
|
document.body.style.overflow = 'hidden'
|
|
requestAnimationFrame(() => setShow(true))
|
|
} else {
|
|
document.body.style.overflow = ''
|
|
setShow(false)
|
|
}
|
|
return () => {
|
|
document.body.style.overflow = ''
|
|
}
|
|
}, [open])
|
|
|
|
if (!open) return null
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div
|
|
className={clsx('fixed inset-0 bg-black/40 transition-opacity duration-200', show ? 'opacity-100' : 'opacity-0')}
|
|
onClick={onClose}
|
|
/>
|
|
<div
|
|
className={clsx(
|
|
'relative bg-white rounded-lg shadow-xl w-full max-h-[90vh] overflow-y-auto transition-all duration-200',
|
|
show ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
|
|
{
|
|
'max-w-md': size === 'sm',
|
|
'max-w-lg': size === 'md',
|
|
'max-w-2xl': size === 'lg',
|
|
'max-w-4xl': size === 'xl',
|
|
},
|
|
className,
|
|
)}>
|
|
{title && (
|
|
<div className="flex items-center justify-between px-4 py-2.5 border-b border-gray-200">
|
|
<h3 className="font-medium text-gray-900 text-sm">{title}</h3>
|
|
<button onClick={onClose} className="text-gray-500 hover:text-gray-700" aria-label="关闭">
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
<div className="p-4">{children}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|