优化导航菜单选中状态和样式

src/pages/layout/components/Nav.tsx

@@ -145,6 +145,7 @@ const Nav : React.FC<Props> = ( props : Props ) => {
       router.navigate( selectedKey );
     }
   }, [ selectedKey ] );
+
   
   return (
       <Sider
@@ -154,7 +155,7 @@ const Nav : React.FC<Props> = ( props : Props ) => {
         <div className='nav-menu'>
           <Menu
               mode='inline'
-              selectedKeys={ [ selectedKey ] }
+              selectedKeys={ selectedKey ? [ selectedKey ] : [] }
               onSelect={ ( item ) => {
                 if ( String(item.key).startsWith('/help') ) {
                   // External help opens in new tab; do not change selectedKey or navigate current tab
@@ -170,6 +171,7 @@ const Nav : React.FC<Props> = ( props : Props ) => {
                 onOpenChange( latestOpenKey ? [ latestOpenKey ] : [] );
               } }
               items={ items }
+              style={{ border: 'none' }}
           />
         </div>
         <div className='nav-bottom'>

src/pages/layout/store.ts

@@ -62,17 +62,17 @@ const useLayoutStore = (): LayoutStore => {
 
     // 改变选中菜单
     const onChangeSelectedKey = (path: string, menuLevel: number) => {
-        const firstKey = path.split('/')[1];
-        const secondKey = path.split('/')[2];
-
-        if (menuLevel === 2) {// 选中二级菜单
-            onOpenChange(['/' + firstKey]);
-            actions.setSelectedKey('/' + firstKey + '/' + secondKey);
-        } else {// 选中一级菜单
-            const initialOpenKeys = stateGenerator().openKeys;
-
-            onOpenChange(initialOpenKeys);
-            actions.setSelectedKey('/' + firstKey);
+        // 直接使用完整路径作为selectedKey
+        actions.setSelectedKey(path);
+        
+        const pathParts = path.split('/').filter(Boolean);
+        
+        if (menuLevel === 2 && pathParts.length >= 2) {
+            // 选中二级菜单，打开对应的一级菜单
+            onOpenChange(['/' + pathParts[0]]);
+        } else {
+            // 选中一级菜单，关闭所有展开的菜单
+            onOpenChange([]);
         }
     }
 

src/pages/layout/style.less

@@ -241,14 +241,44 @@
         background-color: transparent !important;
         overflow-x: hidden;
         overflow-y: auto;
+        border-right: none !important;
 
         &-item {
-            transition: font-weight 0.2s ease;
+            transition: all 0.2s ease;
+            margin: 4px 8px !important;
+            border-radius: 6px !important;
+            height: 40px !important;
+            line-height: 40px !important;
 
-            &-selected, &-active {
+            &:hover {
+                background-color: rgba(24, 144, 255, 0.06) !important;
+                color: @primary-color !important;
+            }
+
+            &-selected {
                 font-weight: 600 !important;
                 color: @primary-color !important;
+                background-color: rgba(24, 144, 255, 0.1) !important;
+                
+                &::after {
+                    display: none !important;
+                }
             }
+
+            &-active {
+                font-weight: 600 !important;
+                color: @primary-color !important;
+                background-color: rgba(24, 144, 255, 0.06) !important;
+            }
+        }
+
+        // 确保选中状态的图标也有正确的颜色
+        &-item-selected .anticon {
+            color: @primary-color !important;
+        }
+
+        &-item-active .anticon {
+            color: @primary-color !important;
         }
     }
 

src/style/global.less

@@ -92,6 +92,32 @@ ul li {
     border: none !important;
 }
 
+// 导航菜单选中项背景色
+.ant-menu-item-selected {
+    background-color: #e6f7ff !important;
+}
+
+.ant-menu-item-active {
+    background-color: #e6f7ff !important;
+}
+
+// 确保选中状态的样式优先级
+.ant-menu-inline .ant-menu-item-selected {
+    background-color: #e6f7ff !important;
+}
+
+.ant-menu-inline .ant-menu-item-active {
+    background-color: #e6f7ff !important;
+}
+
+// 为选中状态添加额外的样式以确保效果
+.ant-menu-inline .ant-menu-item-selected,
+.ant-menu-inline .ant-menu-item-active {
+    background-color: #e6f7ff !important;
+    border-left: 4px solid #1890ff !important;
+    color: #1890ff !important;
+}
+
 // 禁用
 //.ant-form-item {
 //    margin-bottom: 16px !important;