77 lines
1.6 KiB
TypeScript
77 lines
1.6 KiB
TypeScript
/**
|
||
* AlertDialog 组件
|
||
*
|
||
* 提示对话框组件
|
||
* 基于 Modal 组件构建，用于显示提示信息
|
||
* 支持多种变体（default、success、warning、error）
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode } from 'react'
|
||
import Modal from './Modal'
|
||
import { useThemeStyles } from '@/lib/ui-styles'
|
||
|
||
interface AlertDialogProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
title: string
|
||
message: string | ReactNode
|
||
buttonText?: string
|
||
variant?: 'default' | 'success' | 'warning' | 'error'
|
||
}
|
||
|
||
export default function AlertDialog({
|
||
isOpen,
|
||
onClose,
|
||
title,
|
||
message,
|
||
buttonText = '确定',
|
||
variant = 'default',
|
||
}: AlertDialogProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
const getButtonStyle = () => {
|
||
switch (variant) {
|
||
case 'success':
|
||
return styles.buttonStyles.success
|
||
case 'warning':
|
||
return styles.buttonStyles.secondary
|
||
case 'error':
|
||
return styles.buttonStyles.danger
|
||
default:
|
||
return styles.buttonStyles.primary
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
title={title}
|
||
size="small"
|
||
footer={
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className={`${getButtonStyle()} ${styles.buttonModifiers.compact}`}
|
||
>
|
||
{buttonText}
|
||
</button>
|
||
}
|
||
>
|
||
<div className="py-2">
|
||
{typeof message === 'string' ? (
|
||
<p className="text-slate-700 dark:text-slate-200">{message}</p>
|
||
) : (
|
||
message
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|