fix: 华农菜单栏

src/layouts/AppLayout/components/SlideMenu/index.js

@@ -19,7 +19,7 @@ const Menu = props => {
   const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
   const { route } = props;
   const history = useHistory();
-  const [activeMenu, setActiveMenu] = useState('首页');
+  const [activeMenu, setActiveMenu] = useState("首页");
   const [sunRoute, setsunRoute] = useState(route);
   const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
     value: props.active,
@@ -55,6 +55,16 @@ const Menu = props => {
     }
     onMenuClick && onMenuClick(current, childrenRoutes, index);
   };
+  useEffect(() => {
+    let all=props.flatMenu;
+    all.forEach((it)=>{
+      if(it.path===props.location.pathname){
+        setActiveMenu(it.name)
+        return;
+      }
+    })
+    
+  }, [props.location.pathname]);
   useEffect(() => {
     if (route && route.routes) {
       setsunRoute(route);
@@ -120,7 +130,9 @@ const Menu = props => {
                       [`hight-active`]: item.name === activeMenu,
                     })}
                   >
-                    {item.extData.icon=='1'?(<span></span>):/.svg/.test(item.extData.icon) ? (
+                    {item.extData.icon == '1' ? (
+                      <span />
+                    ) : /.svg/.test(item.extData.icon) ? (
                       <div className="my-svg">
                         <ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                       </div>
@@ -138,11 +150,13 @@ const Menu = props => {
               }
               subMenuItemRender={(item, dom) => (
                 <div className={classNames(`test-icon`)}>
-                  {item.extData.icon=='1'?(<span></span>):/.svg/.test(item.extData.icon) ? (
+                  {item.extData.icon == '1' ? (
+                    <span />
+                  ) : /.svg/.test(item.extData.icon) ? (
                     <div className="my-svg">
                       <ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                     </div>
-                  ) :(
+                  ) : (
                     <div className="my-img">
                       <img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                     </div>

src/layouts/AppLayout/components/TopNavHeader/index.js

@@ -107,7 +107,7 @@ const Index = props => {
                     <>
                       {item.icon ? (
                         item.icon
-                      ) : item.extData && item.extData.icon == '1' ? (
+                      ) : item.extData && item.extData.icon === '1' ? (
                         <span />
                       ) : /.svg/.test(item.extData.icon) ? (
                         <ReactSVG src={item.extData.icon} style={{ width: '18px', height: '18px' }} />

src/layouts/AppLayout/layouts/BasicLayout.js

@@ -20,6 +20,8 @@ import RouteContext from '@wisdom-utils/components/lib/AppLayout/layouts/RouteCo
 import { getPageTitleInfo } from '@wisdom-utils/components/lib/AppLayout/layouts/getPageTitle';
 import omit from 'omit.js';
 import classNames from 'classnames';
+import { connect } from 'react-redux';
+import { withRouter } from '@wisdom-utils/runtime';
 import useDocumentTitle from '@wisdom-utils/components/lib/AppLayout/layouts/hooks/useDocumentTitle';
 import defaultSettings from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import isBrowser from '@wisdom-utils/components/lib/AppLayout/layouts/utils/isBrowser';
@@ -87,7 +89,7 @@ const renderSiderMenu = (props) => {
   if (menuRender === false) {
     return null;
   }
-  const defaultDom = <SlideMenu {...props} />;
+  const defaultDom = <SlideMenu {...props}/>;
 
   if (menuRender) {
     return menuRender(props, defaultDom);
@@ -259,6 +261,25 @@ const BasicLayout = (props) => {
       setCurrentRoute(newRoutes);
     }
   }, [route, currentMenuIndex]);
+  useEffect(() => {
+    let all=props.flatMenu;
+    let currentObj;
+    all.forEach((it)=>{
+      if(it.path===props.location.pathname){
+        currentObj=it;
+        setSubRoutes([
+          {
+            extData: currentObj.extData,
+            path: `${currentObj.path}`,
+            name: `${currentObj.name}`,
+          },
+        ]);
+        setTabActiveKey(currentObj.path);
+        return;
+      }
+    })
+    
+  }, [props.location.pathname]);
 
   useEffect(() => {
     const initSelectRoute = findPathByLeafId(
@@ -362,23 +383,31 @@ const BasicLayout = (props) => {
   }, []);
 
   useEffect(() => {
-    if (selectIndex !== -1 && currentRoute && currentRoute.hasOwnProperty('routes')) {
-      const routes = currentRoute.routes[selectIndex];
-      if (routes) {
-        if (routes && routes.routes) {
-          const route =
-            routes &&
-            routes.routes &&
-            routes.routes.find(
-              (item) => item.path === decodeURI(window.location.pathname.replace('/civbase', '')),
-            );
-          if (route && route.path) {
-            setTabActiveKey(route.path);
-          }
-        }
-      }
-    }
-    onPageChange && onPageChange(props.location);
+    // if (selectIndex !== -1 && currentRoute && currentRoute.hasOwnProperty('routes')) {
+    //   const routes = currentRoute.routes[selectIndex];
+    //   setSubRoutes([
+    //     {
+    //       icon: currentObj.extData.icon,
+    //       path: `${currentObj.path}`,
+    //       name: `${currentObj.name}`,
+    //     },
+    //   ]);
+    //   if (routes) {
+    //     if (routes && routes.routes) {
+    //       const route =
+    //         routes &&
+    //         routes.routes &&
+    //         routes.routes.find(
+    //           (item) => item.path === decodeURI(window.location.pathname.replace('/civbase', '')),
+    //         );
+    //       if (route && route.path) {
+    //         console.log('route000000000',route)
+    //         setTabActiveKey(route.path);
+    //       }
+    //     }
+    //   }
+    // }
+    // onPageChange && onPageChange(props.location);
   }, [props.location, location.pathname.search]);
 
   useDocumentTitle(pageTitleInfo, props.title || false);
@@ -470,5 +499,29 @@ BasicLayout.defaultProps = {
   ...defaultSettings,
   location: isBrowser() ? window.location : undefined,
 };
-
-export default BasicLayout;
+const mapStateToProps = state => ({
+  flatMenu: state.getIn(['global', 'flatMenu']),
+  menu: state.getIn(['global', 'menu']),
+  recentKeywords: state.getIn(['global', 'recentKeywords']),
+  recentVisited: state.getIn(['global', 'recentVisited']),
+  recentProducts: state.getIn(['global', 'recentProducts']),
+});
+
+const mapDispatchToProps = dispatch => ({
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config));
+  },
+  createContext(data) {
+    dispatch(actionCreators.createContext(data));
+  },
+  updateLoginMode(mode) {
+    dispatch(actionCreators.changeLoginMode(mode));
+  },
+  updateCurrentIndex(index) {
+    dispatch(actionCreators.updateCurrentIndex(index));
+  },
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withRouter(BasicLayout));
\ No newline at end of file

src/layouts/HN.less

@@ -250,7 +250,7 @@
           margin-bottom: 0!important;
           .test-icon{
             margin-left: 20px;
-            padding-left: 20px!important;
+            padding:0 10px!important;
             
           }
           .@{ant-prefix}-menu-title-content{
@@ -293,13 +293,12 @@
           }
           .test-icon{
              margin-left: 20px;
-             padding-left: 20px!important;
+             padding:10px 0!important;
           }
         }
       }
     }
     .test-icon {
-      width: 100%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -335,12 +334,11 @@
         }
       }
       .my-desc {
-        margin-left: 4px;
+        margin-left: 2px;
         color: #7c7c7a;
       }
     }
     .test-icon:hover{
-      color:  @hn-greenColor;
       .my-desc {
         color: @hn-greenColor;
       }
@@ -352,7 +350,6 @@
       }
     }
     .hight-active:hover{
-      color:  #fff;
       .my-desc {
         color:  #fff;
       }
@@ -378,10 +375,14 @@
       text-overflow: ellipsis;
       vertical-align: bottom;
     }
+    .@{ant-prefix}-menu-submenu-title{
+      padding-right: 14px!important;
+    }
+    .ant-menu-submenu-title{
+      padding-right: 14px!important;
+    }
     .hight-active {
-      color: #fff;
       background: @hn-greenColor;
-      // background: #00b278;
       border-radius: 5px;
       .my-desc {
         color: #fff;