91 lines
1.9 KiB
TypeScript
91 lines
1.9 KiB
TypeScript
/**
|
||
* ConfirmDialog 组件
|
||
*
|
||
* 确认对话框组件
|
||
* 基于 Modal 组件构建，用于需要用户确认的操作
|
||
* 支持多种变体（default、danger）和加载状态
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode } from 'react'
|
||
import Modal from './Modal'
|
||
import { useThemeStyles } from '@/lib/ui-styles'
|
||
|
||
interface ConfirmDialogProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
onConfirm: () => void
|
||
title: string
|
||
message: string | ReactNode
|
||
confirmText?: string
|
||
cancelText?: string
|
||
variant?: 'default' | 'danger'
|
||
loading?: boolean
|
||
}
|
||
|
||
export default function ConfirmDialog({
|
||
isOpen,
|
||
onClose,
|
||
onConfirm,
|
||
title,
|
||
message,
|
||
confirmText = '确认',
|
||
cancelText = '取消',
|
||
variant = 'default',
|
||
loading = false,
|
||
}: ConfirmDialogProps) {
|
||
const styles = useThemeStyles()
|
||
|
||
const handleConfirm = () => {
|
||
if (!loading) {
|
||
onConfirm()
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
title={title}
|
||
size="small"
|
||
closeOnOverlayClick={!loading}
|
||
closeOnEscape={!loading}
|
||
footer={
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
disabled={loading}
|
||
className={`${styles.buttonStyles.secondary} ${styles.buttonModifiers.compact}`}
|
||
>
|
||
{cancelText}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleConfirm}
|
||
disabled={loading}
|
||
className={`${
|
||
variant === 'danger' ? styles.buttonStyles.danger : styles.buttonStyles.primary
|
||
} ${styles.buttonModifiers.compact}`}
|
||
>
|
||
{loading ? '处理中...' : confirmText}
|
||
</button>
|
||
</>
|
||
}
|
||
>
|
||
<div className="py-2">
|
||
{typeof message === 'string' ? (
|
||
<p className="text-slate-700 dark:text-slate-200">{message}</p>
|
||
) : (
|
||
message
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|