Merge pull request #537 from huxianc/fix/top_nav_style

fix: 修复导航栏浅色主题颜色固定的问题

Author: giscafer

template-packages/leek-center/src/components/layout/Header.module.less

@@ -4,7 +4,7 @@
   margin-top: 4px;
   font-size: 18px;
   line-height: 42px;
-  color: #fff;
+  // color: #fff;
   display: flex;
   align-items: center;
   box-sizing: border-box;
@@ -34,12 +34,28 @@
       &-horizontal {
         background: none;
       }
-      .ant-menu-item-selected {
-        background-color: var(--vscode-tab-activeBackground, #282c34);
-      }
-      .ant-menu-item:hover {
-        background-color: var(--vscode-tab-hoverBackground, #323842);
-      }
+      // .ant-menu-item-selected {
+      //   background-color: var(--vscode-tab-activeBackground, #282c34);
+      // }
+      // .ant-menu-item:hover {
+      //   background-color: var(--vscode-tab-hoverBackground, #323842);
+      // }
+    }
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item:hover,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu:hover,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-active,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-active,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-open,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-open,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected {
+      border-color: transparent;
+      background-color: var(--vscode-list-activeSelectionBackground, #094771);
+      color: #fff;
+    }
+
+    .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item, .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu {
+      padding: 0 20px !important;
     }
   }
 }

template-packages/leek-center/src/components/layout/Header.tsx

@@ -29,7 +29,7 @@ export default function LHeader() {
       <div className={Styles.logo}>韭菜中心</div>
       <Menu
         onClick={handleClick}
-        theme="dark"
+        // theme="dark"
         mode="horizontal"
         selectedKeys={[defaultSelectedKeys]}
       >

template-packages/leek-center/src/view/data-center/index.tsx

@@ -29,7 +29,7 @@ export default function DataCenter({ children }: { children: ReactElement }) {
         }}
       >
         <Menu
-          theme="dark"
+          // theme="dark"
           style={{
             height: 'calc(100vh - 86px)',
           }}