解决系统弹窗阻塞问题:实现非阻塞用户交互

- 创建自定义ConfirmDialog组件替代系统confirm
- 删除功能使用自定义确认对话框,避免界面阻塞
- 添加/编辑模态框使用内联错误提示替代alert
- 优化用户体验:更详细的确认信息和统一的视觉风格
This commit is contained in:
farion1231
2025-08-06 16:29:52 +08:00
parent 8a9ec05d33
commit dbafab57cf
6 changed files with 209 additions and 6 deletions

View File

@@ -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">