Merge branch 'feature/maolipeng/youhua' into 'master'

Feature/maolipeng/youhua

See merge request !51

src/modules/root/App.tsx

@@ -7,7 +7,7 @@
  */
 import React, { useContext, useEffect, useState } from 'react';
 import { withRouter } from 'react-router-dom';
-import { ConfigProvider, message } from 'antd';
+import { ConfigProvider, message, Layout } from 'antd';
 import Header from './Header'
 import Menu from './Menu'
 import Main from './Main'
@@ -20,6 +20,8 @@ import Service from "@/common/js/service";
 import Bus from '@/core/tbus';
 import { func } from 'prop-types';
 
+const { Footer, Sider, Content } = Layout;
+
 declare var window: any;
 
 const App: React.FC = (props: any) => {
@@ -135,6 +137,15 @@ const App: React.FC = (props: any) => {
 
   return (
     <div id="home">
+      {/* <Layout>
+        <Sider><Menu menuType={menuType} handleMenuType={handleMenuType} /></Sider>
+        <Layout>
+        <Header id="app" handleMenuType={handleMenuType} menuType={menuType} />
+        <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
+        <Main menuType={menuType} />
+        </ConfigProvider>
+        </Layout>
+      </Layout> */}
       <Header id="app" handleMenuType={handleMenuType} menuType={menuType} />
       <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
         <Main menuType={menuType} />

src/modules/root/Menu.less

@@ -12,31 +12,28 @@
   width: @xm-left-width;
   background: @menu-bakg;
   color: #333;
+  .top-ctrl {
+    display: flex;
+    align-items: center;
     .topLogo {
-    height: 62px;
+      height: 60px;
       background: rgba(255, 255, 255, 0.5);
       .img1 {
         width: 138px;
         height: 35px;
-      margin-left: 19px;
-      margin-top: 13px;
-    }
-    .img0 {
-      display: none;
-      width: 35px;
-      height: 35px;
-      margin-left: 10px;
-      margin-top: 13px;
+        margin: 15px 0 15px 8px;
       }
     }
     .menu-type-icon{
-    margin:4px  0 0px 150px;
+      margin: 8px 14px 0px 4px;
       cursor: pointer;
       .icon{
         font-size:14px;
         color:#5E606A;
       }
     }
+  }
+  
   .ant-menu {
     padding-left: 0 !important;
     color: #333;
@@ -67,7 +64,7 @@
       .icon-img{
         width:18px;
         height:18px;
-        margin-right:16px;
+        margin-right:6px;
       }
       .listType {
         width: 5px;

src/modules/root/Menu.tsx

-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { Key, useContext, useEffect, useRef, useState } from 'react';
 import {
   withRouter,
 } from 'react-router-dom';
@@ -10,7 +10,6 @@ import StoreService from "@/domains/store-domain/storeService";
 import User from "@/common/js/user";
 import _ from 'underscore';
 import "./Menu.less";
-console.log('2021-06-17')
 
 const { SubMenu } = Menu;
 function Aside(props: any) {
@@ -19,8 +18,7 @@ function Aside(props: any) {
   const [selectKey, setSelectKey] = useState();
   const [openKeys, setOpenKeys] = useState(['']);
   const [topLogoUrl, setTopLogoUrl] = useState("")
-  const logoImg0Ref = useRef<any>()
-  const logoImg1Ref = useRef<any>()
+  const [collapsed, setCollapsed] = useState(false)
   const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
   useEffect(() => {
     const link = props.location.pathname;
@@ -40,7 +38,7 @@ function Aside(props: any) {
   }, [props.location.pathname])
   useEffect(()=> {
     getTopLeftLogo()
-  })
+  },[])
   function getTopLeftLogo() {
     if (User.getToken()) {
       StoreService.getStoreDetail({storeId:User.getStoreId()})
@@ -56,34 +54,37 @@ function Aside(props: any) {
   }
   function toggleMenu(item: any) {
     window.RCHistory.push(item.link)
+    if (!menuType) {
+      setOpenKeys([])
+    }
   }
-  function onOpenChange(key: any) {
+  function onOpenChange(key: Key[]) {
+    if (typeof key === "string") {
       if (openKeys.includes(key)) {
         setOpenKeys([]);
       } else {
         setOpenKeys([key]);
       }
     }
-  function handleMenu() {
-    handleMenuType();
   }
-  useEffect(()=> {
-    if (!logoImg0Ref.current || !logoImg1Ref.current) {
+
+  function onOpenChangeForHover(key: Key[]) {
+    if (menuType) {
       return
     }
-    if (!menuType) {
-      if (topLogoUrl.indexOf("xiaomaiketang.com") < 0) {
-          logoImg0Ref.current.style.display = "none"
-          logoImg1Ref.current.style.display = "none"
+    if (typeof key === "string") {
+      if (openKeys.includes(key)) {
+        setOpenKeys([]);
       } else {
-          logoImg0Ref.current.style.display = "inline"
-          logoImg1Ref.current.style.display = "none"
+        setOpenKeys([key]);
+      }
     }
-    } else {
-      logoImg0Ref.current.style.display = "none"
-      logoImg1Ref.current.style.display = "inline"
   }
-  },[menuType])
+
+  function handleMenu() {
+    handleMenuType();
+    setCollapsed(!collapsed)
+  }
 
   return (
     <div 
@@ -94,9 +95,9 @@ function Aside(props: any) {
             : "left-container left-container-vertical"
         }
       >
+        <div className="top-ctrl">
         <div className="topLogo">
-          <img ref={logoImg0Ref} src="https://image.xiaomaiketang.com/xm/c4KiP2epBP.png" alt="" className="img0"></img>
-          <img ref={logoImg1Ref} src={topLogoUrl} alt="" className="img1"></img>
+          { menuType && <img src={topLogoUrl} alt="" className="img1"></img> }
         </div>
         <div className="menu-type-icon"  onClick={handleMenu}>
           {menuType ? (
@@ -113,14 +114,17 @@ function Aside(props: any) {
             </span>
           )}
         </div>
+        </div>
+        
         <div className="left">
           <div className="nav">
 
         <Menu
-          style={{ minHeight: "100%", background: '#0E1935' }}
+          style={menuType ? { minHeight: "100%", background: '#0E1935' }:{minHeight: "100%", background: '#0E1935',width:"56px" }}
           selectedKeys={selectKey}
-          openKeys={openKeys}
-          inlineCollapsed={false}
+          openKeys={menuType ? openKeys : []}
+          onOpenChange={onOpenChange}
+          inlineCollapsed={collapsed}
           mode={menuType ? "inline" : "vertical"}
         >
           {
@@ -129,19 +133,19 @@ function Aside(props: any) {
                 return null;
               }
               if (item.children) {
-                return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div > 
-                    {/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */}
-                    <img src={item.img} className="icon-img"></img>
-                    {menuType &&
-                      <span>{item.groupName}</span>
-                    }</div>
-                  } onTitleClick={() => onOpenChange(item.groupCode)}>
+                return <SubMenu 
+                        key={item.groupCode} 
+                        style={{ marginTop: 0 }} 
+                        icon={<img src={item.img} className="icon-img"></img>}
+                        title={menuType ? <span>{item.groupName}</span> : ""} 
+                        onTitleClick={() => onOpenChange(item.groupCode)}
+                        >
                   {
                     item.children.map((_item: any, _index: any) => {
                       if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
                         return null;
                       }
-                      return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index}>
+                      return <Menu.Item onClick={() => { toggleMenu(_item) }} style={{ marginTop: 0 }} key={_item.groupCode + index + _index} >
                         <span className="name">{_item.groupName}</span>
                       </Menu.Item>
 
@@ -149,18 +153,12 @@ function Aside(props: any) {
                   }
                 </SubMenu>
               } else {
-                return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item">
-                  {/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */}
-                  {selectKey === item.groupCode ?
-                    <img src={item.selectImg} className="icon-img"></img>
-                    :
-                    <img src={item.img} className="icon-img"></img>
-                  }
-                  
-
-                  {menuType &&
-                    <span>{item.groupName}</span>
-                  }
+                return <Menu.Item 
+                        onClick={() => { toggleMenu(item) }} 
+                        key={item.groupCode} 
+                        icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className="icon-img"></img>}
+                        >
+                    {menuType ? item.groupName : ""}
                 </Menu.Item>
               }
             })