fix: 修复分类管理弹窗问题
- 添加表单字段标签说明 - 添加图标选择器到分类表单 - 修复保存按钮样式,使用标准form-actions布局 - 添加取消按钮
This commit is contained in:
parent
6db2ee13dd
commit
82b91bbcf5
@ -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>
|
||||
|
||||
{/* 分类列表 */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user