8705b9846a
Some checks failed
CI Check / check (push) Has been cancelled
- 创建统一的Modal组件，采用Apple风格设计 - 实现毛玻璃效果、圆角、动画和细边框描边 - 修复弹窗打开时背景滚动问题 - 修复分类管理中重复卡片和数组字符串显示问题 - 优化选项解析逻辑，添加去重和过滤机制
81 lines
2.0 KiB
TypeScript
81 lines
2.0 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, cn } 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 { base: styles.buttonStyles.success, colors: 'bg-emerald-600 hover:bg-emerald-700 text-white' }
|
||
case 'warning':
|
||
return { base: styles.buttonStyles.secondary, colors: 'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200' }
|
||
case 'error':
|
||
return { base: styles.buttonStyles.danger, colors: 'bg-red-600 hover:bg-red-700 text-white' }
|
||
default:
|
||
return { base: styles.buttonStyles.primary, colors: 'bg-indigo-600 hover:bg-indigo-700 text-white' }
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
isOpen={isOpen}
|
||
onClose={onClose}
|
||
title={title}
|
||
size="xs"
|
||
footer={
|
||
<button
|
||
type="button"
|
||
onClick={onClose}
|
||
className={cn(
|
||
getButtonStyle().base,
|
||
styles.buttonModifiers.compact,
|
||
getButtonStyle().colors // 显式添加背景色和文字色
|
||
)}
|
||
>
|
||
{buttonText}
|
||
</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>
|
||
)
|
||
}
|
||
|