Skip to content

X
xiaomai-cloud-class-web
Commit 9e1ba3d2 by maolipeng
Options

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

Feature/maolipeng/youhua

See merge request !51
parents 6473fa7c 44fa3846
Showing with 80 additions and 74 deletions
src/modules/root/App.tsx
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
*/ */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import { ConfigProvider, message } from 'antd'; import { ConfigProvider, message, Layout } from 'antd';
import Header from './Header' import Header from './Header'
import Menu from './Menu' import Menu from './Menu'
import Main from './Main' import Main from './Main'
...@@ -20,6 +20,8 @@ import Service from "@/common/js/service"; ...@@ -20,6 +20,8 @@ import Service from "@/common/js/service";
import Bus from '@/core/tbus'; import Bus from '@/core/tbus';
import { func } from 'prop-types'; import { func } from 'prop-types';
const { Footer, Sider, Content } = Layout;
declare var window: any; declare var window: any;
const App: React.FC = (props: any) => { const App: React.FC = (props: any) => {
...@@ -135,6 +137,15 @@ const App: React.FC = (props: any) => { ...@@ -135,6 +137,15 @@ const App: React.FC = (props: any) => {
return ( return (
<div id="home"> <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} /> <Header id="app" handleMenuType={handleMenuType} menuType={menuType} />
<ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}> <ConfigProvider locale={zhCN} autoInsertSpaceInButton={false}>
<Main menuType={menuType} /> <Main menuType={menuType} />
......
src/modules/root/Menu.less
...@@ -12,31 +12,28 @@ ...@@ -12,31 +12,28 @@
width: @xm-left-width; width: @xm-left-width;
background: @menu-bakg; background: @menu-bakg;
color: #333; color: #333;
.topLogo { .top-ctrl {
height: 62px; display: flex;
background: rgba(255, 255, 255, 0.5); align-items: center;
.img1 { .topLogo {
width: 138px; height: 60px;
height: 35px; background: rgba(255, 255, 255, 0.5);
margin-left: 19px; .img1 {
margin-top: 13px; width: 138px;
} height: 35px;
.img0 { margin: 15px 0 15px 8px;
display: none; }
width: 35px;
height: 35px;
margin-left: 10px;
margin-top: 13px;
} }
} .menu-type-icon{
.menu-type-icon{ margin: 8px 14px 0px 4px;
margin:4px 0 0px 150px; cursor: pointer;
cursor: pointer; .icon{
.icon{ font-size:14px;
font-size:14px; color:#5E606A;
color:#5E606A; }
} }
} }
.ant-menu { .ant-menu {
padding-left: 0 !important; padding-left: 0 !important;
color: #333; color: #333;
...@@ -67,7 +64,7 @@ ...@@ -67,7 +64,7 @@
.icon-img{ .icon-img{
width:18px; width:18px;
height:18px; height:18px;
margin-right:16px; margin-right:6px;
} }
.listType { .listType {
width: 5px; 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 { import {
withRouter, withRouter,
} from 'react-router-dom'; } from 'react-router-dom';
...@@ -10,7 +10,6 @@ import StoreService from "@/domains/store-domain/storeService"; ...@@ -10,7 +10,6 @@ import StoreService from "@/domains/store-domain/storeService";
import User from "@/common/js/user"; import User from "@/common/js/user";
import _ from 'underscore'; import _ from 'underscore';
import "./Menu.less"; import "./Menu.less";
console.log('2021-06-17')
const { SubMenu } = Menu; const { SubMenu } = Menu;
function Aside(props: any) { function Aside(props: any) {
...@@ -19,8 +18,7 @@ function Aside(props: any) { ...@@ -19,8 +18,7 @@ function Aside(props: any) {
const [selectKey, setSelectKey] = useState(); const [selectKey, setSelectKey] = useState();
const [openKeys, setOpenKeys] = useState(['']); const [openKeys, setOpenKeys] = useState(['']);
const [topLogoUrl, setTopLogoUrl] = useState("") const [topLogoUrl, setTopLogoUrl] = useState("")
const logoImg0Ref = useRef<any>() const [collapsed, setCollapsed] = useState(false)
const logoImg1Ref = useRef<any>()
const rootSubmenuKeys = _.pluck(menuList, 'groupCode'); const rootSubmenuKeys = _.pluck(menuList, 'groupCode');
useEffect(() => { useEffect(() => {
const link = props.location.pathname; const link = props.location.pathname;
...@@ -40,7 +38,7 @@ function Aside(props: any) { ...@@ -40,7 +38,7 @@ function Aside(props: any) {
}, [props.location.pathname]) }, [props.location.pathname])
useEffect(()=> { useEffect(()=> {
getTopLeftLogo() getTopLeftLogo()
}) },[])
function getTopLeftLogo() { function getTopLeftLogo() {
if (User.getToken()) { if (User.getToken()) {
StoreService.getStoreDetail({storeId:User.getStoreId()}) StoreService.getStoreDetail({storeId:User.getStoreId()})
...@@ -56,34 +54,37 @@ function Aside(props: any) { ...@@ -56,34 +54,37 @@ function Aside(props: any) {
} }
function toggleMenu(item: any) { function toggleMenu(item: any) {
window.RCHistory.push(item.link) window.RCHistory.push(item.link)
} if (!menuType) {
function onOpenChange(key: any) { setOpenKeys([])
if (openKeys.includes(key)) {
setOpenKeys([]);
} else {
setOpenKeys([key]);
} }
} }
function handleMenu() { function onOpenChange(key: Key[]) {
handleMenuType(); if (typeof key === "string") {
if (openKeys.includes(key)) {
setOpenKeys([]);
} else {
setOpenKeys([key]);
}
}
} }
useEffect(()=> {
if (!logoImg0Ref.current || !logoImg1Ref.current) { function onOpenChangeForHover(key: Key[]) {
if (menuType) {
return return
} }
if (!menuType) { if (typeof key === "string") {
if (topLogoUrl.indexOf("xiaomaiketang.com") < 0) { if (openKeys.includes(key)) {
logoImg0Ref.current.style.display = "none" setOpenKeys([]);
logoImg1Ref.current.style.display = "none"
} else { } else {
logoImg0Ref.current.style.display = "inline" setOpenKeys([key]);
logoImg1Ref.current.style.display = "none"
} }
} else {
logoImg0Ref.current.style.display = "none"
logoImg1Ref.current.style.display = "inline"
} }
},[menuType]) }
function handleMenu() {
handleMenuType();
setCollapsed(!collapsed)
}
return ( return (
<div <div
...@@ -94,9 +95,9 @@ function Aside(props: any) { ...@@ -94,9 +95,9 @@ function Aside(props: any) {
: "left-container left-container-vertical" : "left-container left-container-vertical"
} }
> >
<div className="top-ctrl">
<div className="topLogo"> <div className="topLogo">
<img ref={logoImg0Ref} src="https://image.xiaomaiketang.com/xm/c4KiP2epBP.png" alt="" className="img0"></img> { menuType && <img src={topLogoUrl} alt="" className="img1"></img> }
<img ref={logoImg1Ref} src={topLogoUrl} alt="" className="img1"></img>
</div> </div>
<div className="menu-type-icon" onClick={handleMenu}> <div className="menu-type-icon" onClick={handleMenu}>
{menuType ? ( {menuType ? (
...@@ -113,14 +114,17 @@ function Aside(props: any) { ...@@ -113,14 +114,17 @@ function Aside(props: any) {
</span> </span>
)} )}
</div> </div>
</div>
<div className="left"> <div className="left">
<div className="nav"> <div className="nav">
<Menu <Menu
style={{ minHeight: "100%", background: '#0E1935' }} style={menuType ? { minHeight: "100%", background: '#0E1935' }:{minHeight: "100%", background: '#0E1935',width:"56px" }}
selectedKeys={selectKey} selectedKeys={selectKey}
openKeys={openKeys} openKeys={menuType ? openKeys : []}
inlineCollapsed={false} onOpenChange={onOpenChange}
inlineCollapsed={collapsed}
mode={menuType ? "inline" : "vertical"} mode={menuType ? "inline" : "vertical"}
> >
{ {
...@@ -129,19 +133,19 @@ function Aside(props: any) { ...@@ -129,19 +133,19 @@ function Aside(props: any) {
return null; return null;
} }
if (item.children) { if (item.children) {
return <SubMenu key={item.groupCode} style={{ marginTop: 0 }} className="first-menu-item" title={<div > return <SubMenu
{/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */} key={item.groupCode}
<img src={item.img} className="icon-img"></img> style={{ marginTop: 0 }}
{menuType && icon={<img src={item.img} className="icon-img"></img>}
<span>{item.groupName}</span> title={menuType ? <span>{item.groupName}</span> : ""}
}</div> onTitleClick={() => onOpenChange(item.groupCode)}
} onTitleClick={() => onOpenChange(item.groupCode)}> >
{ {
item.children.map((_item: any, _index: any) => { item.children.map((_item: any, _index: any) => {
if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) { if (ctx.xmState.storeUserPermissionList.indexOf(_item.groupCode) === -1) {
return null; 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> <span className="name">{_item.groupName}</span>
</Menu.Item> </Menu.Item>
...@@ -149,18 +153,12 @@ function Aside(props: any) { ...@@ -149,18 +153,12 @@ function Aside(props: any) {
} }
</SubMenu> </SubMenu>
} else { } else {
return <Menu.Item onClick={() => { toggleMenu(item) }} key={item.groupCode} className="first-menu-item"> return <Menu.Item
{/* <span style={{ marginRight: 16 }} className="iconfont icon" dangerouslySetInnerHTML={{ __html:item.icon}}></span> */} onClick={() => { toggleMenu(item) }}
{selectKey === item.groupCode ? key={item.groupCode}
<img src={item.selectImg} className="icon-img"></img> icon={<img src={selectKey === item.groupCode ? item.selectImg : item.img} className="icon-img"></img>}
: >
<img src={item.img} className="icon-img"></img> {menuType ? item.groupName : ""}
}
{menuType &&
<span>{item.groupName}</span>
}
</Menu.Item> </Menu.Item>
} }
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment