fix: 支持编辑分类
- 分类项添加编辑按钮 - 悬停时显示编辑按钮 - 点击编辑按钮打开编辑弹窗
This commit is contained in:
parent
84d9098049
commit
e5081fc0d9
@ -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>
|
||||
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user