样式修改

frontend-web/src/components/page-sdebar.css

@@ -1,27 +1,42 @@
 .sidebar-contents{
     width:98px;
-    height:986px;
+    min-height:986px;
     background:rgba(3, 38, 80, 0.8);
     border:1px solid;
     border-color:rgba(43, 143, 254, 0.6);
     border-radius:4px;
     backdrop-filter:blur(2px);
     display: flex;
-    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    padding: 12px 10px;
 }
 
 .item-nav{
-    width:78px;
-    height:70px;
-    background:rgba(0, 12, 28, 0.15);
-    border:1px solid;
-    border-color:rgba(85, 166, 254, 0.2);
-    line-height:28px;
-    font-family:Noto Sans S Chinese;
+    width:100%;
+    padding:14px 0;
+    border-bottom:1px solid rgba(85, 166, 254, 0.2);
+    font-family:'Noto Sans S Chinese', sans-serif;
     font-weight:500;
     color:rgba(255, 255, 255, 0.8);
     font-size:20px;
-    padding-bottom:18px;
+    line-height:26px;
     text-align:center;
-    margin: 10px;
+    cursor:pointer;
+    transition:background 0.2s ease, color 0.2s ease;
+}
+
+.item-nav:hover{
+    background:rgba(85, 166, 254, 0.12);
+    color:#ffffff;
+}
+
+.item-nav__label{
+    display:block;
+    width:3em;
+    margin:0 auto;
+    padding-left:6px;
+    box-sizing:border-box;
+    letter-spacing:6px;
+    word-break:break-all;
 }

frontend-web/src/components/page-sidebar-dark.tsx

@@ -332,9 +332,11 @@ export function PageSidebarDark({
       {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
       <div className="sidebar-contnet">
         <div className="sidebar-contents">
-          <div className="item-nav">
-            问答管理
-          </div>
+          {visibleMenuItems.map((item) => (
+            <div key={item.id} className="item-nav">
+              <span className="item-nav__label">{item.label}</span>
+            </div>
+          ))}
         </div>
       </div>
     </>