fix: 修复分类管理弹窗问题

- 添加表单字段标签说明
- 添加图标选择器到分类表单
- 修复保存按钮样式,使用标准form-actions布局
- 添加取消按钮
This commit is contained in:
小龙 2026-04-06 17:53:55 +00:00
parent 6db2ee13dd
commit 82b91bbcf5

View File

@ -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>
{/* 分类列表 */}