代码修改

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

@@ -10,11 +10,12 @@
     flex-direction: column;
     align-items: center;
     padding: 12px 10px;
+    position: relative;
 }
 
 .item-nav{
     width:100%;
-    padding:14px 0;
+    padding:10px 0;
     border-bottom:1px solid rgba(85, 166, 254, 0.2);
     font-family:'Noto Sans S Chinese', sans-serif;
     font-weight:500;
@@ -39,4 +40,45 @@
     box-sizing:border-box;
     letter-spacing:6px;
     word-break:break-all;
+}
+
+.item-nav-content{ 
+    width: 155px;
+    height: 970px;
+    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);
+    position: absolute;
+    left: 97px;
+    top: 0;
+    z-index: 1000;
+}
+
+.item-nav-active{
+    color:#ffffff;
+    position: relative;
+}
+
+.item-nav-active::before{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    width:84.5px;
+    height:70px;
+    background: url('../assets/icon/nav-active.svg') no-repeat;
+    background-size: contain;
+}
+
+.item-nav-active::after{
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 25px;
+    width:77px;
+    height:45px;
+    background: url('../assets/icon/nav-line-logo.svg') no-repeat;
+    background-size: cover;
 }

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

@@ -332,8 +332,9 @@ export function PageSidebarDark({
       {/* TODO: 在这里编写深色主题的侧边栏 HTML 结构 */}
       <div className="sidebar-contnet">
         <div className="sidebar-contents">
+          <div className="item-nav-content"></div>
           {visibleMenuItems.map((item) => (
-            <div key={item.id} className="item-nav">
+            <div key={item.id} className={`item-nav ${item.id === 'qa-center' ? 'item-nav-active' : ''}`}>
               <span className="item-nav__label">{item.label}</span>
             </div>
           ))}