7dc8d2a528
Some checks failed
CI Check / check (push) Has been cancelled
- 替换所有浏览器原生弹窗（confirm/alert/prompt） - 创建 ConfirmDialog、AlertDialog、PromptDialog 组件 - 创建 DialogProvider 和 useDialog Hook - 替换所有 admin 组件、首页、分享页面中的原生弹窗 - 素材预览面板统一 - 创建 MaterialPreviewModal 组件 - 使用统一弹窗组件，统一退出逻辑 - 首页UI统一到三层架构 - 迁移主要按钮和输入框样式 - 迁移筛选弹窗中的所有按钮样式 - 使用 useThemeStyles() Hook - 更新文档 - 更新优化记录、优化计划、后续修改、更新日志
80 lines
1.7 KiB
TypeScript
80 lines
1.7 KiB
TypeScript
'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>
|
|
)
|
|
}
|
|
|