diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index aaaeec7..ddf480c 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -144,10 +144,15 @@ function App() { {categories.map(cat => ( -
setSelectedCategory(cat.id)}> -
- {cat.name} - {getCategoryCount(cat.id)} +
+
setSelectedCategory(cat.id)}> +
+ {cat.name} + {getCategoryCount(cat.id)} +
+
))}
diff --git a/frontend/src/index.css b/frontend/src/index.css index 516a589..36c201d 100644 --- a/frontend/src/index.css +++ b/frontend/src/index.css @@ -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;