fix: 支持编辑分类
- 分类项添加编辑按钮 - 悬停时显示编辑按钮 - 点击编辑按钮打开编辑弹窗
This commit is contained in:
parent
84d9098049
commit
e5081fc0d9
@ -144,11 +144,16 @@ function App() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{categories.map(cat => (
|
{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>
|
<div className="category-icon"><Icon name={cat.icon || 'folder'} size={14}/></div>
|
||||||
<span className="category-name">{cat.name}</span>
|
<span className="category-name">{cat.name}</span>
|
||||||
<span className="category-count">{getCategoryCount(cat.id)}</span>
|
<span className="category-count">{getCategoryCount(cat.id)}</span>
|
||||||
</div>
|
</div>
|
||||||
|
<button className="category-edit-btn" onClick={(e) => { e.stopPropagation(); openModal('category', cat) }} title="编辑">
|
||||||
|
<Icon name="edit" size={12}/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -88,6 +88,8 @@ body {
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
color: #666;
|
color: #666;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item:hover {
|
.category-item:hover {
|
||||||
@ -110,6 +112,7 @@ body {
|
|||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background: rgba(0, 0, 0, 0.04);
|
background: rgba(0, 0, 0, 0.04);
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item.active .category-icon {
|
.category-item.active .category-icon {
|
||||||
@ -128,12 +131,44 @@ body {
|
|||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
background: rgba(0, 0, 0, 0.06);
|
background: rgba(0, 0, 0, 0.06);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.category-item.active .category-count {
|
.category-item.active .category-count {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
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 {
|
.sidebar-footer {
|
||||||
padding: 16px;
|
padding: 16px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user