解决系统弹窗阻塞问题:实现非阻塞用户交互
- 创建自定义ConfirmDialog组件替代系统confirm - 删除功能使用自定义确认对话框,避免界面阻塞 - 添加/编辑模态框使用内联错误提示替代alert - 优化用户体验:更详细的确认信息和统一的视觉风格
This commit is contained in:
@@ -16,12 +16,14 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
||||
websiteUrl: ''
|
||||
})
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [error, setError] = useState('')
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setError('')
|
||||
|
||||
if (!formData.name || !formData.apiUrl || !formData.apiKey) {
|
||||
alert('请填写所有必填字段')
|
||||
setError('请填写所有必填字段')
|
||||
return
|
||||
}
|
||||
|
||||
@@ -89,6 +91,12 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
|
||||
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||||
<h2>添加新供应商</h2>
|
||||
|
||||
{error && (
|
||||
<div className="error-message">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="presets">
|
||||
<label>快速选择:</label>
|
||||
<div className="preset-buttons">
|
||||
|
||||
Reference in New Issue
Block a user