fix: 支持编辑分类

- 分类项添加编辑按钮
- 悬停时显示编辑按钮
- 点击编辑按钮打开编辑弹窗
This commit is contained in:
小龙 2026-04-06 16:50:50 +00:00
parent 84d9098049
commit e5081fc0d9
2 changed files with 44 additions and 4 deletions

View File

@ -144,11 +144,16 @@ function App() {
</div>
{categories.map(cat => (
<div key={cat.id} className={`category-item ${selectedCategory === cat.id ? 'active' : ''}`} onClick={() => setSelectedCategory(cat.id)}>
<div key={cat.id} className="category-item-wrapper">
<div className={`category-item ${selectedCategory === cat.id ? 'active' : ''}`} onClick={() => setSelectedCategory(cat.id)}>
<div className="category-icon"><Icon name={cat.icon || 'folder'} size={14}/></div>
<span className="category-name">{cat.name}</span>
<span className="category-count">{getCategoryCount(cat.id)}</span>
</div>
<button className="category-edit-btn" onClick={(e) => { e.stopPropagation(); openModal('category', cat) }} title="编辑">
<Icon name="edit" size={12}/>
</button>
</div>
))}
</div>

View File

@ -88,6 +88,8 @@ body {
margin-bottom: 4px;
color: #666;
font-size: 13px;
flex: 1;
min-width: 0;
}
.category-item:hover {
@ -110,6 +112,7 @@ body {
border-radius: 6px;
background: rgba(0, 0, 0, 0.04);
font-size: 14px;
flex-shrink: 0;
}
.category-item.active .category-icon {
@ -128,12 +131,44 @@ body {
padding: 2px 6px;
background: rgba(0, 0, 0, 0.06);
border-radius: 10px;
flex-shrink: 0;
}
.category-item.active .category-count {
background: rgba(255, 255, 255, 0.2);
}
.category-item-wrapper {
display: flex;
align-items: center;
gap: 4px;
}
.category-edit-btn {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #999;
cursor: pointer;
border-radius: 4px;
opacity: 0;
transition: all 0.2s ease;
flex-shrink: 0;
}
.category-item-wrapper:hover .category-edit-btn {
opacity: 1;
}
.category-edit-btn:hover {
background: rgba(102, 126, 234, 0.1);
color: #667eea;
}
/* 侧边栏底部 */
.sidebar-footer {
padding: 16px;