feat: 完成导航菜单图标

react-ui/src/app.tsx

@@ -17,9 +17,10 @@ import {
   patchRouteWithRemoteMenus,
   setRemoteMenu,
 } from './services/session';
+import './styles/menu.less';
 export { requestConfig as request } from './requestConfig';
 // const isDev = process.env.NODE_ENV === 'development';
-
+import { menuItemRender } from '@/utils/menuRender';
 /**
  * @see  https://umijs.org/zh-CN/plugins/plugin-initial-state
  * */
@@ -139,10 +140,8 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
       onClick: () => {
         // 点击菜单项，删除所有的页面 state 缓存
         removeAllPageCacheState();
+        // console.log('click menu');
       },
-      // onSelect: (e) => {
-      //   console.log(e);
-      // },
     },
     ...initialState?.settings,
     token: {
@@ -150,51 +149,36 @@ export const layout: RuntimeConfig['layout'] = ({ initialState }) => {
         colorTextMenu: themes['textColor'],
         colorTextMenuSelected: themes['primaryColor'],
         colorTextMenuActive: themes['primaryColor'],
+        colorTextMenuItemHover: themes['primaryColor'],
         colorBgMenuItemSelected: 'rgba(197, 232, 255, 0.8)',
         colorMenuBackground: themes['siderBGColor'],
       },
     },
-    // menuItemRender: (itemProps, defaultDom, props) => {
-    //   console.log('menuItemProps', itemProps);
-    //   console.log('defaultDom', defaultDom);
-    //   console.log('props', props);
-
-    //   const { pathname } = window.location;
-    //   const isSelected = pathname === itemProps.path;
-
-    //   // 根据菜单项的状态动态显示不同的 icon
-    //   const icon = isSelected ? 'icon-developmentEnvironment-icon' : 'icon-kaifahuanjing';
-    //   return (
-    //     <Link to={itemProps.path || ''} target={itemProps.target}>
-    //       <KFIcon type={icon} />
-    //       {itemProps.name}
-    //     </Link>
-    //   );
-    // },
+    menuItemRender: menuItemRender(false),
+    subMenuItemRender: menuItemRender(true),
   };
 };
 
 export const onRouteChange: RuntimeConfig['onRouteChange'] = async (e) => {
   const { location } = e;
   const menus = getRemoteMenu();
-  console.log('onRouteChange', e);
+  // console.log('onRouteChange', e);
   if (menus === null && location.pathname !== PageEnum.LOGIN) {
-    console.log('refresh');
     history.go(0);
   }
 };
 
 export const patchRoutes: RuntimeConfig['patchRoutes'] = (e) => {
-  console.log('patchRoutes', e);
+  //console.log('patchRoutes', e);
 };
 
 export const patchClientRoutes: RuntimeConfig['patchClientRoutes'] = (e) => {
-  console.log('patchClientRoutes', e);
+  //console.log('patchClientRoutes', e);
   patchRouteWithRemoteMenus(e.routes);
 };
 
 export function render(oldRender: () => void) {
-  console.log('render');
+  //console.log('render');
   const token = getAccessToken();
   if (!token || token?.length === 0) {
     oldRender();

react-ui/src/overrides.less

@@ -145,3 +145,11 @@
     }
   }
 }
+
+// 取消 hover 颜色变化
+.ant-menu .ant-menu-title-content {
+  transition: color 0s;
+  a {
+    transition: color 0s;
+  }
+}

react-ui/src/pages/Workspace/components/TotalStatistics/index.less

@@ -26,11 +26,7 @@
     left: 0;
     width: 79px;
     height: 6px;
-    background-color: linear-gradient(
-      87.07deg,
-      rgba(22, 100, 255, 0.6) 0%,
-      rgba(22, 100, 255, 0) 100%
-    );
+    background: linear-gradient(87.07deg, rgba(22, 100, 255, 0.6) 0%, rgba(22, 100, 255, 0) 100%);
   }
 
   &__count {

react-ui/src/pages/Workspace/index.less

@@ -2,7 +2,7 @@
   height: 100%;
   padding: 20px 30px 10px;
   overflow-y: auto;
-  background-color: linear-gradient(#ecf2fe, #f9fafb);
+  background: linear-gradient(#ecf2fe, #f9fafb);
 
   &__overview {
     gap: 15px;

react-ui/src/styles/menu.less

@@ -0,0 +1,59 @@
+.ant-menu-item,
+.ant-menu-submenu {
+  .kf-menu-item {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    font-size: 16px;
+
+    .anticon.kf-menu-item__default-icon {
+      display: inline !important;
+      opacity: 1;
+    }
+
+    .anticon.kf-menu-item__active-icon {
+      display: none !important;
+      margin-left: 0 !important;
+    }
+
+    &:hover {
+      .anticon.kf-menu-item__default-icon {
+        display: none !important;
+      }
+      .anticon.kf-menu-item__active-icon {
+        display: inline !important;
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.ant-menu-item.ant-menu-item-selected,
+.ant-menu-submenu.ant-menu-submenu-selected {
+  .kf-menu-item {
+    .anticon.kf-menu-item__default-icon {
+      display: none !important;
+    }
+
+    .anticon.kf-menu-item__active-icon {
+      display: inline !important;
+      opacity: 1;
+    }
+  }
+}
+
+.ant-pro-base-menu-vertical-collapsed {
+  .kf-menu-item {
+    justify-content: center;
+
+    .kf-menu-item__name {
+      display: none !important;
+    }
+  }
+}
+
+.ant-menu-submenu {
+  .ant-menu-submenu-title:hover {
+    color: #1664ff !important;
+  }
+}

react-ui/src/styles/theme.less

@@ -44,7 +44,6 @@
   @red: red(@color);
   @green: green(@color);
   @blue: blue(@color);
-
   @result: rgba(@red, @green, @blue, @alpha);
 }
 

react-ui/src/utils/menuRender.tsx

@@ -0,0 +1,31 @@
+import KFIcon from '@/components/KFIcon';
+import { MenuDataItem } from '@ant-design/pro-components';
+import { Link } from '@umijs/max';
+
+export const menuItemRender = (isSubMenu: boolean) => {
+  return (item: MenuDataItem) => {
+    const defaultIcon: string = item.icon as string;
+    const activeIcon = defaultIcon + '-active';
+    const hasParent = item.pro_layout_parentKeys?.length > 0;
+    const childen = (
+      <>
+        {!hasParent && defaultIcon && (
+          <>
+            <KFIcon type={defaultIcon} font={17} className="kf-menu-item__default-icon" />
+            <KFIcon type={activeIcon} font={17} className="kf-menu-item__active-icon" />
+          </>
+        )}
+        <span className="kf-menu-item__name">{item.name}</span>
+      </>
+    );
+    if (isSubMenu) {
+      return <div className="kf-menu-item">{childen}</div>;
+    } else {
+      return (
+        <Link to={item.path || ''} className="kf-menu-item">
+          {childen}
+        </Link>
+      );
+    }
+  };
+};