48dcb23ea5
- 创建 ConfirmModal 和 MessageModal 组件 - 更新 App.tsx 使用新的 Modal 组件 - 改进表单验证错误显示 - 提升用户体验和界面一致性
40 lines
928 B
TypeScript
40 lines
928 B
TypeScript
import React from 'react'
|
|
import './AddProviderModal.css'
|
|
|
|
interface ConfirmModalProps {
|
|
title: string
|
|
message: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
onConfirm: () => void
|
|
onCancel: () => void
|
|
}
|
|
|
|
const ConfirmModal: React.FC<ConfirmModalProps> = ({
|
|
title,
|
|
message,
|
|
confirmText = '确定',
|
|
cancelText = '取消',
|
|
onConfirm,
|
|
onCancel
|
|
}) => {
|
|
return (
|
|
<div className="modal-overlay" onClick={onCancel}>
|
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
|
<h2>{title}</h2>
|
|
<p>{message}</p>
|
|
|
|
<div className="form-actions">
|
|
<button type="button" className="cancel-btn" onClick={onCancel}>
|
|
{cancelText}
|
|
</button>
|
|
<button type="button" className="submit-btn" onClick={onConfirm}>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default ConfirmModal |