用 Modal 组件替换所有 alert 弹窗

- 创建 ConfirmModal 和 MessageModal 组件
- 更新 App.tsx 使用新的 Modal 组件
- 改进表单验证错误显示
- 提升用户体验和界面一致性

src/renderer/components/AddProviderModal.tsx

@@ -5,21 +5,23 @@ import './AddProviderModal.css'
 interface AddProviderModalProps {
   onAdd: (provider: Omit<Provider, 'id'>) => void
   onClose: () => void
+  onError?: (message: string) => void
 }
 
-const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) => {
+const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose, onError }) => {
   const [formData, setFormData] = useState({
     name: '',
     apiUrl: '',
     apiKey: ''
   })
   const [showPassword, setShowPassword] = useState(false)
+  const [error, setError] = useState<string>('')
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     
     if (!formData.name || !formData.apiUrl || !formData.apiKey) {
-      alert('请填写所有必填字段')
+      setError('请填写所有必填字段')
       return
     }
 
@@ -75,6 +77,12 @@ const AddProviderModal: React.FC<AddProviderModalProps> = ({ onAdd, onClose }) =
         </div>
 
         <form onSubmit={handleSubmit}>
+          {error && (
+            <div style={{ color: 'red', marginBottom: '1rem', padding: '0.5rem', backgroundColor: '#ffe6e6', borderRadius: '4px' }}>
+              {error}
+            </div>
+          )}
+          
           <div className="form-group">
             <label htmlFor="name">供应商名称 *</label>
             <input