From 94f3708ccd799ddce8d757857f3ce132f6a636c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E9=BE=99?= <xiaolong@pags.cn>
Date: Mon, 6 Apr 2026 17:56:38 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E6=94=B9=E5=96=84=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E6=8F=90=E4=BA=A4=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 所有按钮添加 type="button" 防止表单默认提交
- 添加保存按钮加载状态防止重复提交
- 提交时显示"保存中..."状态
- 使用 async/await finally 确保状态重置
---
 frontend/src/App.jsx | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 0d49956..21f6651 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -60,6 +60,7 @@ function App() {
   const [categoryForm, setCategoryForm] = useState({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
   const [editingCategory, setEditingCategory] = useState(null)
   const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
   const [websiteForm, setWebsiteForm] = useState({ name: '', url: '', icon: '', description: '', category_id: '', is_favorite: false })
 
   useEffect(() => { loadData() }, [])
@@ -113,6 +114,8 @@ function App() {
   }
 
   const saveCategory = async () => {
+    if (saving) return
+    setSaving(true)
     try {
       const payload = { 
         name: categoryForm.name, 
@@ -128,7 +131,9 @@ function App() {
       setCategoryForm({ name: '', icon: 'folder', color: '#667eea', sort_order: 0 })
       setEditingCategory(null)
       loadData()
-    } catch (e) { console.error(e) }
+    } catch (e) { console.error(e) } finally {
+      setSaving(false)
+    }
   }
 
   const deleteCategory = async (id) => {
@@ -142,6 +147,8 @@ function App() {
 
   // 保存网站
   const handleWebsiteSubmit = async () => {
+    if (saving) return
+    setSaving(true)
     try {
       const payload = { ...websiteForm, category_id: websiteForm.category_id || null }
       if (modal.data) {
@@ -151,7 +158,9 @@ function App() {
       }
       closeModal()
       loadData()
-    } catch (e) {}
+    } catch (e) {} finally {
+      setSaving(false)
+    }
   }
 
   const handleDeleteWebsite = async (id) => {
@@ -315,8 +324,8 @@ function App() {
             </div>
 
             <div className="form-actions">
-              <button className="btn btn-cancel" onClick={closeModal}>取消</button>
-              <button className="btn btn-submit" onClick={handleWebsiteSubmit}>{modal.data ? '保存' : '添加'}</button>
+              <button type="button" className="btn btn-cancel" onClick={closeModal}>取消</button>
+              <button type="button" className="btn btn-submit" onClick={handleWebsiteSubmit} disabled={saving}>{saving ? '保存中...' : (modal.data ? '保存' : '添加')}</button>
             </div>
           </div>
         </div>
@@ -360,8 +369,8 @@ function App() {
                 </div>
               </div>
               <div className="form-actions" style={{marginTop: '20px'}}>
-                <button className="btn btn-cancel" onClick={() => { setEditingCategory(null); setCategoryForm({name: '', icon: 'folder', color: '#667eea', sort_order: 0}) }}>取消</button>
-                <button className="btn btn-submit" onClick={saveCategory} disabled={!categoryForm.name}>
+                <button type="button" className="btn btn-cancel" onClick={() => { setEditingCategory(null); setCategoryForm({name: '', icon: 'folder', color: '#667eea', sort_order: 0}) }}>取消</button>
+                <button type="button" className="btn btn-submit" onClick={saveCategory} disabled={saving || !categoryForm.name}>
                   {editingCategory ? '保存修改' : '添加分类'}
                 </button>
               </div>