8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一的Modal组件，采用Apple风格设计 - 实现毛玻璃效果、圆角、动画和细边框描边 - 修复弹窗打开时背景滚动问题 - 修复分类管理中重复卡片和数组字符串显示问题 - 优化选项解析逻辑，添加去重和过滤机制
99 lines
2.3 KiB
TypeScript
99 lines
2.3 KiB
TypeScript
/**
|
||
* ConfirmDialog 组件
|
||
*
|
||
* 确认对话框组件
|
||
* 基于 Modal 组件构建，用于需要用户确认的操作
|
||
* 支持多种变体（default、danger）和加载状态
|
||
*
|
||
* @created 2025-11-22
|
||
* @component
|
||
*/
|
||
|
||
'use client'
|
||
|
||
import { ReactNode } from 'react'
|
||
import Modal from './Modal'
|
||
import { useThemeStyles, cn } 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="xs"
|
||
closeOnOverlayClick={!loading}
|
||
closeOnEscape={!loading}
|
||
footer={
|
||
<>
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
disabled={loading}
|
||
className={cn(
|
||
styles.buttonStyles.secondary,
|
||
styles.buttonModifiers.compact,
|
||
'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' // 显式添加背景色和文字色
|
||
)}
|
||
>
|
||
{cancelText}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={handleConfirm}
|
||
disabled={loading}
|
||
className={cn(
|
||
variant === 'danger' ? styles.buttonStyles.danger : styles.buttonStyles.primary,
|
||
styles.buttonModifiers.compact,
|
||
variant === 'danger'
|
||
? 'bg-red-600 hover:bg-red-700 text-white' // danger 按钮
|
||
: 'bg-indigo-600 hover:bg-indigo-700 text-white', // primary 按钮
|
||
)}
|
||
>
|
||
{loading ? '处理中...' : confirmText}
|
||
</button>
|
||
</>
|
||
}
|
||
>
|
||
<div className="py-2 text-sm leading-relaxed text-slate-700 dark:text-slate-200">
|
||
{typeof message === 'string' ? (
|
||
<p>{message}</p>
|
||
) : (
|
||
message
|
||
)}
|
||
</div>
|
||
</Modal>
|
||
)
|
||
}
|
||
|