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;