From 82b91bbcf52c15d6d6f2c5b1f514d10332b32881 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:53:55 +0000
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E5=88=86=E7=B1=BB?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E5=BC=B9=E7=AA=97=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加表单字段标签说明
- 添加图标选择器到分类表单
- 修复保存按钮样式，使用标准form-actions布局
- 添加取消按钮
---
 frontend/src/App.jsx | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 31bec2a..0d49956 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -333,9 +333,23 @@ function App() {
 
             {/* 添加/编辑表单 */}
             <div className="category-form">
-              <div className="form-row">
-                <input className="form-input" style={{flex: 1}} value={categoryForm.name} onChange={e => setCategoryForm({...categoryForm, name: e.target.value})} placeholder="分类名称"/>
-                <input type="number" className="form-input" style={{width: '80px'}} value={categoryForm.sort_order} onChange={e => setCategoryForm({...categoryForm, sort_order: e.target.value})} placeholder="排序"/>
+              <div className="form-group">
+                <label className="form-label">分类名称 *</label>
+                <input className="form-input" value={categoryForm.name} onChange={e => setCategoryForm({...categoryForm, name: e.target.value})} placeholder="输入分类名称"/>
+              </div>
+              <div className="form-group">
+                <label className="form-label">排序（数字越小越靠前）</label>
+                <input type="number" className="form-input" value={categoryForm.sort_order} onChange={e => setCategoryForm({...categoryForm, sort_order: e.target.value})} placeholder="0"/>
+              </div>
+              <div className="form-group">
+                <label className="form-label">图标</label>
+                <div className="icon-picker">
+                  {PRESET_ICONS.map(iconName => (
+                    <button key={iconName} type="button" className={`icon-option ${categoryForm.icon === iconName ? 'selected' : ''}`} onClick={() => setCategoryForm({...categoryForm, icon: iconName})}>
+                      <Icon name={iconName} size={16}/>
+                    </button>
+                  ))}
+                </div>
               </div>
               <div className="form-group">
                 <label className="form-label">颜色</label>
@@ -345,9 +359,12 @@ function App() {
                   ))}
                 </div>
               </div>
-              <button className="btn btn-submit" style={{width: '100%', marginTop: '12px'}} onClick={saveCategory} disabled={!categoryForm.name}>
-                {editingCategory ? '保存修改' : '添加分类'}
-              </button>
+              <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}>
+                  {editingCategory ? '保存修改' : '添加分类'}
+                </button>
+              </div>
             </div>
 
             {/* 分类列表 */}