Skip to content

C
CivWeb
Commit f043fb42 authored by 曾婧's avatar 曾婧
Browse files
Options

feat: 合并

parents a1c8fa06 b5489782
Hide whitespace changes
Inline Side-by-side
Showing with 388 additions and 262 deletions
src/assets/basic/HN-logo.png deleted 100644 → 0
View file @ a1c8fa06
This diff was suppressed by a .gitattributes entry.
src/layouts/AppLayout/components/SlideMenu/index.js
View file @ f043fb42
/*
* @Author: ZengJing
* @Date: 2022-04-15 09:34:03
* @LastEditTime: 2022-04-19 14:57:13
* @LastEditors: ZengJing
* @Description:
* @FilePath: \CivWeb\src\layouts\AppLayout\components\SlideMenu\index.js
*/
import React, { useContext, useEffect, useState, useCallback } from 'react';
import React, { useContext, useState, useEffect, useCallback } from 'react';
import { ConfigProvider, Divider, Skeleton, Tooltip } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';
import { ReactSVG } from 'react-svg';
import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
import ProLayout, { getPageTitle } from '@ant-design/pro-layout';
const LoadingSkeleton = props => {
const { route } = props;
return (
<div style={{ padding: route && !route.routes ? '20px 6px 6px 6px' : '0px' }}>
<Skeleton loading={route && !route.routes} active title={false} paragraph={{ rows: 10 }}>
......@@ -25,15 +15,16 @@ const LoadingSkeleton = props => {
</div>
);
};
const Menu = props => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('layout-slider');
const { menuItemRender, menuHeaderRender, siderWidth, onMenuClick } = props;
const { collapsed, onCollapse, route, style } = props;
const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
const { route } = props;
const history = useHistory();
const [activeMenu, setActiveMenu] = useState('首页');
const [sunRoute, setsunRoute] = useState(route);
const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
value: props.active,
onChange: props.onActiveChange,
});
const toLink = path => {
if (!window.__POWERED_BY_QIANKUN__) {
history.push(path);
......@@ -41,12 +32,10 @@ const Menu = props => {
window.history.pushState(null, '', path);
}
};
const onSelectItem = (item, dom) => {
const onSelectItem = (item, index) => {
let current = void 0;
let childrenRoutes = [];
setActiveMenu(item.name);
if (item && item.child) {
current = item.child[0];
childrenRoutes = item.child;
......@@ -55,6 +44,7 @@ const Menu = props => {
childrenRoutes = [item];
}
setSelectIndex(index);
if (/iframe/.test(current.path)) {
history.push({
path: 'iframe',
......@@ -63,18 +53,24 @@ const Menu = props => {
} else {
window.__POWERED_BY_QIANKUN__ ? toLink(`/civbase${current.path}`) : toLink(current.path);
}
onMenuClick && onMenuClick(current, childrenRoutes);
onMenuClick && onMenuClick(current, childrenRoutes, index);
};
useEffect(() => {
route.routes = treeRoutes(route.routes);
}, [route, treeRoutes]);
if (route && route.routes) {
setsunRoute(route);
let tmp = treeRoutes(route.routes);
console.log('tmp', tmp);
console.log('route', route);
setsunRoute({ ...sunRoute, routes: tmp });
console.log('sunRoute', sunRoute);
}
}, [route]);
const treeRoutes = useCallback(iroute =>
iroute
.filter(item => item.level !== 3)
.filter(item => item.level < 4)
.map(item => {
if (item.routes && Array.isArray(item.routes) && item.routes.length >= 1) {
if (item.level === 2) {
if (item.level === 3) {
item.child = item.routes;
}
item.routes = treeRoutes(item.routes);
......@@ -85,146 +81,206 @@ const Menu = props => {
return (
<LoadingSkeleton {...props}>
{route && route.routes && route.routes.length > 0 && (
<ProLayout
route={route}
title={props.title}
logo={null}
siderWidth={140}
config={props.global}
// onHeaderLogo={handlerIndustry}
// onPageChange={handlerPageChange}
// onMenuPanelItemClick={handleUpdateCurrentIndex}
menuItemRender={(item, dom) =>
item.level < 3 ? (
<div
onClick={() => {
onSelectItem(item, dom);
}}
className={classNames(`test-icon`, {
[`hight-active`]: item.name === activeMenu,
})}
>
{/.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%' }} />
<React.Fragment>
{menuHeaderRender ? (
menuHeaderRender(props)
) : (
<>
<ul className={classNames(`${prefixCls}-menu`)} style={{ minHeight: '0px', marginBottom: '0px' }}>
<li className={`${prefixCls}-menu-item`} onClick={onMenuHeaderClick}>
<Tooltip placement="right" title={collapsed ? route.name : ''}>
<a>
{route && route.extData && route.extData.icon && <img src={route.extData.icon} />}
{collapsed ? null : (
<span className={classNames(`${prefixCls}-menu-item-text`, `${prefixCls}-menu-item-current`)}>
{route && route.name}
</span>
)}
</a>
</Tooltip>
</li>
</ul>
<div className={`${prefixCls}-line`} />
</>
)}
<ul className={classNames(`${prefixCls}-menu ${prefixCls}-menu-vertical`)}>
<ProLayout
route={sunRoute}
title={props.title}
logo={null}
siderWidth={140}
config={props.global}
// onHeaderLogo={handlerIndustry}
// onPageChange={handlerPageChange}
// onMenuPanelItemClick={handleUpdateCurrentIndex}
menuItemRender={(item, dom) =>
item.level < 4 ? (
<div
onClick={() => {
onSelectItem(item, dom);
}}
className={classNames(`test-icon`, {
[`hight-active`]: item.name === activeMenu,
})}
>
{/.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>
)}
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
)}
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
) : null
}
subMenuItemRender={(item, dom) => (
<div
className={classNames(`test-icon`, {
[`hight-active`]: item.name === activeMenu,
})}
>
{/.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%' }} />
) : null
}
subMenuItemRender={(item, dom) => (
<div
className={classNames(`test-icon`)}
>
{/.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>
)}
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
)}
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
)}
// headerSiteRender={() =>
// renderSite({
// data: cityData,
// config: props.global,
// loading: siteLoading,
// setLoading: setSiteLoading,
// action: siteAction,
// })
// }
>
<>
{/* <Suspense fallback={<></>}>
{window.location.pathname.startsWith('/civbase/civ_3d') ? (
<KeepAlive>
<CesiumMap />
</KeepAlive>
) : window.location.pathname.startsWith('/civbase/civ_webgis') ? (
mapMode === 'AMap' ? (
<AMap />
) : (
<ArcgisMap options={{ type: 'ArcgisMap' }} />
)
) : null}
</Suspense>
<div id="micro-container" className="subapp-container">
{props.children}
</div> */}
</>
</ProLayout>
/>
{/* {route &&
(route.routes || [])
.filter(item => !item.hideInMenu)
.map((item, index) => (
<React.Fragment key={index}>
<li
key={index}
className={classNames(`${prefixCls}-menu-item`, {
[`${prefixCls}-menu-item-active`]: index === selectIndex,
})}
onClick={() => onSelectItem(item, index)}
>
<Tooltip placement="right" title={collapsed ? item.name : ''}>
<a>
{item.icon ? (
item.icon
) : item.extData && /.svg/.test(item.extData.icon) ? (
<ReactSVG
src={item.extData.icon}
style={{ width: '20px', height: '20px' }}
className={`${prefixCls}-menu-item-icon`}
/>
) : (
item.extData && <img src={item.extData.icon} />
)}
{collapsed ? (
item.extData && (
<span className={`${prefixCls}-menu-item-text`}>
{(item.extData.shortName || item.name).substr(0, 2)}
</span>
)
) : (
<span className={`${prefixCls}-menu-item-text`}>{item.name}</span>
)}
</a>
</Tooltip>
</li>
<Divider
style={{
border: '1px solid rgb(49, 53, 62, 0.3)',
margin: '0 auto',
minWidth: '80%',
width: '80%',
}}
/>
</React.Fragment>
))} */}
</ul>
</React.Fragment>
)}
</LoadingSkeleton>
);
};
const mapStateToProps = state => ({
global: state.getIn(['global', 'globalConfig']),
settings: state.getIn(['global', 'defaultSetting']),
collapsed: state.getIn(['global', 'collapsed']),
menu: state.getIn(['global', 'menu']),
currentMenuIndex: state.getIn(['global', 'currentMenuIndex']),
flatMenu: state.getIn(['global', 'flatMenu']),
authValidate: state.getIn(['global', 'authValidate']),
pathname: state.getIn(['global', 'pathname']),
selectedKeys: state.getIn(['global', 'selectedKeys']),
openKeys: state.getIn(['global', 'openKeys']),
complexConfig: state.getIn(['global', 'complexConfig']),
complexPathName: state.getIn(['global', 'complexPathName']),
microMounted: state.getIn(['global', 'microMounted']),
});
const mapDispatchToProps = dispatch => ({
updageSetting(setting) {
dispatch(actionCreators.updageSetting(setting));
},
updateConfig(config) {
dispatch(actionCreators.getConfig(config));
},
updateCurrentIndex(index) {
dispatch(actionCreators.updateCurrentIndex(index));
},
updateCollapsed(collapsed) {
dispatch(actionCreators.updateCollapsed(collapsed));
},
updateAuthValidate(auth) {
dispatch(actionCreators.updateAuthValidate(auth));
},
updatePathname(pathname) {
dispatch(actionCreators.updatePathname(pathname));
},
updateSelectedKeys(keys) {
dispatch(actionCreators.updateSelectedKeys(keys));
},
updateOpenKeys(keys) {
dispatch(actionCreators.updateOpenKeys(keys));
},
updateComplexConfig(config) {
dispatch(actionCreators.updateComplexConfig(config));
},
updateComplexPathName(pathname) {
dispatch(actionCreators.updateComplexPathName(pathname));
},
logout() {
dispatch(actionCreators.logout());
},
});
export default connect(
mapStateToProps,
mapDispatchToProps,
)(Menu);
export default props => {
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('layout-slider');
const { menuItemRender, menuHeaderRender, siderWidth } = props;
const { collapsed, onCollapse, route, style } = props;
return (
<>
<div
style={{
width: collapsed ? '48px' : `${siderWidth}px`,
overflow: 'hidden',
flex: `0 0 ${collapsed ? 48 : siderWidth}px`,
maxWidth: collapsed ? 48 : siderWidth,
minWidth: collapsed ? 48 : siderWidth,
transition:
'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s',
...style,
}}
/>
<aside
className={classNames(`${prefixCls}`, `${prefixCls}-fixed`, {
[`${prefixCls}-collapsed`]: collapsed,
})}
>
<div className={`${prefixCls}-children`}>
<div className={`${prefixCls}-wrapper`} style={{ flex: '1 1 0%', overflow: 'hidden auto' }}>
{/* {LoadingSkeleton(props)} */}
{menuItemRender ? menuItemRender(props) : Menu(Object.assign({}, props, { prefixCls }))}
</div>
{route && route.routes && route.routes.length > 0 && (
<div className={`${prefixCls}-pro-sider-links`}>
<ul
className={`${prefixCls}-menu ${prefixCls}-menu-root ${prefixCls}-menu-inline ${prefixCls}-menu-dark ${prefixCls}-pro-sider-link-menu`}
role="menu"
tabIndex="0"
>
<li
className={`${prefixCls}-menu-item ${prefixCls}-menu-item-only-child ${prefixCls}-pro-sider-collapsed-button`}
style={{ height: '40px', lineHeight: '40px' }}
role="menuitem"
tabIndex="-1"
onClick={onCollapse}
>
<span className={`${prefixCls}-menu-title-content`}>
<span
role="img"
aria-label="menu-fold"
className="anticon anticon-menu-fold"
style={{ color: '#fff' }}
>
<svg
viewBox="64 64 896 896"
focusable="false"
width="1em"
height="1em"
fill="currentColor"
aria-hidden="true"
>
<path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z" />
</svg>
</span>
</span>
</li>
</ul>
<div aria-hidden="true" style={{ display: 'none' }} />
</div>
)}
</div>
</aside>
</>
);
};
src/layouts/AppLayout/components/SlideMenu/index.less
View file @ f043fb42
......@@ -16,6 +16,44 @@
@slider-light: #fff;
@color-black: #fff;
.@{panda-prefix-cls} {
overflow: hidden;
flex: 0 0 140px;
max-width: 140px;
min-width: 140px;
width: 140px;
background-color: @layout-header-background;
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
&-fixed {
position: fixed !important;
top: 46px;
left: 0;
z-index: 600;
height: calc(100% - 46px);
// overflow: auto;
overflow-x: hidden;
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
transition: all 0.2s;
}
&-collapsed {
flex: 0 0 48px;
max-width: 48px;
min-width: 48px;
width: 48px;
transition: background 0.3s, width 0.5s cubic-bezier(0.2, 0, 0, 1) 0s;
.sliderMenu {
.splitLine {
width: 48px;
}
}
}
&-children {
display: flex;
flex-direction: column;
height: 100%;
}
&-wrapper {
flex: 1 1 0%;
}
&-menu {
position: relative;
min-height: 100%;
......@@ -56,20 +94,18 @@
stroke-miterlimit: 10;
}
}
svg {
path:not(.st0) {
fill: #fff!important;
}
path.st0 {
fill:url(#SVGID_1_)!important;
}
path.st1 {
fill:url(#SVGID_2_)!important;
}
}
}
&-text {
display: block;
color: hsla(0, 0%, 100%, 0.65);
padding-top: 4px;
max-width: 70px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
opacity: 1;
transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
}
&-current {
color: @color-black;
}
......
src/layouts/AppLayout/layouts/BasicLayout.js
View file @ f043fb42
......@@ -3,6 +3,7 @@ import { ConfigProvider } from 'antd';
import propTypes from 'prop-types';
import Icon from '@ant-design/icons';
import warning from 'warning';
import SlideMenu from '../components/SlideMenu';
import WrapContent from '@wisdom-utils/components/lib/AppLayout/layouts/WrapContent';
import Header from '@wisdom-utils/components/lib/AppLayout/layouts/Header';
import Footer from '@wisdom-utils/components/lib/AppLayout/layouts/Footer';
......@@ -12,6 +13,7 @@ import { helpers } from '@wisdom-utils/utils';
import { getBreadcrumbProps } from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getBreadcrumbProps';
import getMenuData from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getMenuData';
import { findPathByLeafId } from '@wisdom-utils/components/lib/AppLayout/helpers';
const { renderRoutes } = helpers;
import { MinPanel } from '@wisdom-utils/components/lib/AppLayout/components/SliderPanel';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import RouteContext from '@wisdom-utils/components/lib/AppLayout/layouts/RouteContext';
......@@ -21,8 +23,6 @@ import classNames from 'classnames';
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';
import SlideMenu from '../components/SlideMenu';
const { renderRoutes } = helpers;
const homeSvg = () => (
<svg
t="1631169883330"
......@@ -40,7 +40,7 @@ const homeSvg = () => (
/>
</svg>
);
const HomeIcon = props => <Icon component={homeSvg} {...props} style={{ marginRight: '0px' }} />;
const HomeIcon = (props) => <Icon component={homeSvg} {...props} style={{ marginRight: '0px' }} />;
const defaultPageTitleRender = (pageProps, props) => {
const { pageTitleRender } = props;
......@@ -65,13 +65,13 @@ const defaultPageTitleRender = (pageProps, props) => {
}
return pageTitleInfo;
};
const headerRender = props => {
const headerRender = (props) => {
if (props.headerRender === false) {
return null;
}
return <Header {...props} />;
};
const footerRender = props => {
const footerRender = (props) => {
if (props.footerRender === false) {
return null;
}
......@@ -82,7 +82,7 @@ const footerRender = props => {
return null;
};
const renderSiderMenu = props => {
const renderSiderMenu = (props) => {
const { menuRender } = props;
if (menuRender === false) {
return null;
......@@ -92,7 +92,7 @@ const renderSiderMenu = props => {
if (menuRender) {
return menuRender(props, defaultDom);
}
return defaultDom;
return defaultDom;
};
const getPaddingLeft = (hasLeftPadding, collapsed, siderWidth) => {
......@@ -102,7 +102,7 @@ const getPaddingLeft = (hasLeftPadding, collapsed, siderWidth) => {
return 0;
};
const BasicLayout = props => {
const BasicLayout = (props) => {
const {
children,
route,
......@@ -141,12 +141,10 @@ const BasicLayout = props => {
value: props.collapsed,
onChange: props.onCollapse,
});
const menuInfoData = React.useMemo(() => getMenuData(route?.routes || [], menu, formatMessage, menuDataRender), [
formatMessage,
menu,
menuDataRender,
route.routes,
]);
const menuInfoData = React.useMemo(
() => getMenuData(route?.routes || [], menu, formatMessage, menuDataRender),
[formatMessage, menu, menuDataRender, route?.routes],
);
const { breadcrumb = {}, breadcrumbMap, menuData = [] } = menuInfoData || {};
......@@ -179,10 +177,11 @@ const BasicLayout = props => {
props,
);
const onMenuClick = (current, routes) => {
const onMenuClick = (current, routes, activeIndex = []) => {
setTabActiveKey(current.path);
if (current.routes) {
setSelectedKey([current.routes[0].href]);
setSelectIndex(activeIndex);
}
setSubRoutes(routes);
};
......@@ -199,7 +198,7 @@ const BasicLayout = props => {
...defaultProps,
collapsed,
onCollapse,
route: props.route,
route: currentRoute,
active: selectIndex,
onActiveChange: setSelectIndex,
menu,
......@@ -227,7 +226,8 @@ const BasicLayout = props => {
const { isChildrenLayout: contextIsChildrenLayout } = useContext(RouteContext);
const isChildrenLayout = propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
const isChildrenLayout =
propsIsChildrenLayout !== undefined ? propsIsChildrenLayout : contextIsChildrenLayout;
const leftSiderWidth = getPaddingLeft(!!hasLeftPadding, collapsed, siderWidth);
......@@ -251,14 +251,14 @@ const BasicLayout = props => {
(route &&
route.routes &&
Array.isArray(route.routes) &&
route.routes.filter(item => !item.hideInMenu)[currentMenuIndex]) ||
route.routes.filter((item) => !item.hideInMenu)[currentMenuIndex]) ||
{};
if (!_.isEqual(currentRoute, newRoutes)) {
// setCurrentRoute({});
setSelectIndex(-1);
setCurrentRoute(newRoutes);
}
}, [route, currentMenuIndex, currentRoute]);
}, [route, currentMenuIndex]);
useEffect(() => {
const initSelectRoute = findPathByLeafId(
......@@ -269,20 +269,23 @@ const BasicLayout = props => {
true,
);
const parentMenuName = initSelectRoute && initSelectRoute.parent && initSelectRoute.parent.label;
const parentMenuName =
initSelectRoute && initSelectRoute.parent && initSelectRoute.parent.label;
if (parentMenuName) {
let currentChildrenRoute = currentRoute.routes.find(item => item.name === parentMenuName);
let currentChildrenRoute = currentRoute.routes.find((item) => item.name === parentMenuName);
if (!currentChildrenRoute) {
currentChildrenRoute = initSelectRoute;
}
const childrenName = currentChildrenRoute ? currentChildrenRoute.name : parentMenuName;
let childrenName = currentChildrenRoute ? currentChildrenRoute.name : parentMenuName;
if (currentChildrenRoute.routes) {
const active = currentChildrenRoute.routes.find(item => item.name === initSelectRoute.name);
const active = currentChildrenRoute.routes.find(
(item) => item.name === initSelectRoute.name,
);
setTabActiveKey(active.path);
} else {
setTabActiveKey(currentChildrenRoute.path);
}
const initSelectIndex = currentRoute.routes.findIndex(item => item.name === childrenName);
const initSelectIndex = currentRoute.routes.findIndex((item) => item.name === childrenName);
setSelectIndex(initSelectIndex);
currentChildrenRoute && currentChildrenRoute.routes
? setSubRoutes(currentChildrenRoute.routes)
......@@ -306,20 +309,23 @@ const BasicLayout = props => {
},
]);
}
}, [currentRoute, props.config, props.location]);
}, []);
useEffect(() => {
window.share &&
window.share.event &&
window.share.event.on('event:updateCurrentChildrenRoutes', ({ currentPath, currentRoute, selectedIndex }) => {
currentRoute && currentRoute.parent && currentRoute.parent.routes
? setSubRoutes(currentRoute.parent.routes)
: !currentRoute.parent
window.share.event.on(
'event:updateCurrentChildrenRoutes',
({ currentPath, currentRoute, selectedIndex }) => {
currentRoute && currentRoute.parent && currentRoute.parent.routes
? setSubRoutes(currentRoute.parent.routes)
: !currentRoute.parent
? setSubRoutes(currentRoute.routes)
: setSubRoutes([currentRoute]);
setSelectIndex(selectedIndex);
setTabActiveKey(currentPath);
});
setSelectIndex(selectedIndex);
setTabActiveKey(currentPath);
},
);
window.share &&
window.share.event &&
......@@ -327,15 +333,15 @@ const BasicLayout = props => {
setSubRoutes([
{
icon: <HomeIcon />,
path,
name,
path: path,
name: name,
},
]);
});
window.share &&
window.share.event &&
window.share.event.on('goHome', url => {
window.share.event.on('goHome', (url) => {
setSubRoutes([
{
icon: <HomeIcon />,
......@@ -347,7 +353,9 @@ const BasicLayout = props => {
window.history.pushState(null, '', `/civbase${url}`);
});
return () => {
window.share && window.share.event && window.share.event.removeAllListeners('event:updateCurrentChildrenRoutes');
window.share &&
window.share.event &&
window.share.event.removeAllListeners('event:updateCurrentChildrenRoutes');
window.share && window.share.event && window.share.event.removeAllListeners('event:favitor');
window.share && window.share.event && window.share.event.removeAllListeners('goHome');
};
......@@ -361,7 +369,9 @@ const BasicLayout = props => {
const route =
routes &&
routes.routes &&
routes.routes.find(item => item.path === decodeURI(window.location.pathname.replace('/civbase', '')));
routes.routes.find(
(item) => item.path === decodeURI(window.location.pathname.replace('/civbase', '')),
);
if (route && route.path) {
setTabActiveKey(route.path);
}
......@@ -369,7 +379,7 @@ const BasicLayout = props => {
}
}
onPageChange && onPageChange(props.location);
}, [props.location, location.pathname.search, selectIndex, currentRoute, onPageChange]);
}, [props.location, location.pathname.search]);
useDocumentTitle(pageTitleInfo, props.title || false);
......@@ -399,27 +409,30 @@ const BasicLayout = props => {
data={route.routes || []}
onClose={() => setVisible(false)}
currentMenuIndex={activeMenu}
onChange={index => setActiveMenu(index)}
onChange={(index) => setActiveMenu(index)}
/>
<WrapContent isChildrenLayout={isChildrenLayout} className={contentClassName} style={contentStyle}>
<WrapContent
isChildrenLayout={isChildrenLayout}
className={contentClassName}
style={contentStyle}
>
<div className={`${prefixCls}-page-container-wrap`}>{headerDom}</div>
<TopNavHeader
{...props}
childrenRoutes={subRoutes}
tabActiveKey={tabActiveKey}
selectedKey={selectedKey}
onTabChange={setTabActiveKey}
onHandlerSubmenu={setSelectedKey}
/>
{subMenuItemRender ? (
subMenuItemRender(props)
) : (
<TopNavHeader
{...props}
childrenRoutes={subRoutes}
tabActiveKey={tabActiveKey}
selectedKey={selectedKey}
onTabChange={setTabActiveKey}
onHandlerSubmenu={setSelectedKey}
/>
)}
<PageContainer style={{ paddingTop: '0px', height: '100%' }}>
{renderRoutes(prefixCls, route.routes, props)}
{handerMapContentRender && handerMapContentRender(props)}
{/* <div id="micro-container" className="subapp-container"> */}
{/* {children} */}
{/* </div> */}
{children}
</PageContainer>
</WrapContent>
......
src/layouts/HN.less
View file @ f043fb42
......@@ -2,7 +2,7 @@
:global {
.panda-console-base-userWrapper-userInfo-header {
//右上角弹框
// background-color: @hn-greenColor;git
// background-color: @hn-greenColor;
}
}
.hnlayout {
......@@ -20,6 +20,11 @@
}
}
.panda-console-base-layout-slider {
flex: 0 0 140px;
width: 140px;
min-width: 140px;
max-width: 140px;
overflow: hidden;
background-color: #fff;
}
.panda-console-base-layout-slider-menu-item-active {
......@@ -111,8 +116,7 @@
.panda-console-base-menu-item-children :global(.panda-console-base-tabs-tab-active) {
color: @hn-greenColor !important;
}
.panda-console-base-menu-item-children
:global(.panda-console-base-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
.panda-console-base-menu-item-children :global(.panda-console-base-tabs-tab-active .menu-item-name) {
color: @hn-greenColor !important;
}
.panda-console-base-menu-item-children :global .panda-console-base-tabs-tab-active svg path,
......@@ -155,14 +159,41 @@
.panda-console-base-pro-sider-logo {
display: none;
}
.test-icon {
.panda-console-base-layout-slider-menu-item {
height: 36px;
}
.panda-console-base-layout-slider-menu-item a {
flex-direction: row;
width: 100%;
margin: 0 auto;
margin-top: 4px;
margin-right: 16px;
padding-left: 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 16px;
& > img {
width: 18px;
height: 18px;
margin-top: 4px;
opacity: 1;
}
& > span {
margin-left: 4px;
}
}
.panda-console-base-menu {
ul {
.panda-console-base-menu-item-only-child {
padding-left: 26px !important;
}
}
}
.test-icon {
width: 100%;
margin: 0 auto;
padding: 0 16px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
.my-svg {
display: inline-block;
width: 18px;
......@@ -198,6 +229,7 @@
color: #7c7c7a;
}
}
.panda-console-base-pro-menu-item-title {
display: inline-block;
overflow: hidden;
......@@ -205,33 +237,20 @@
text-overflow: ellipsis;
vertical-align: bottom;
}
.panda-console-base-menu-submenu-title{
padding-right: 0 !important;
padding-left: 0 !important;
}
.panda-console-base-menu-sub .panda-console-base-menu-item.panda-console-base-menu-item-only-child {
padding-right: 0 !important;
padding-left: 0 !important;
}
.panda-console-base-pro-sider .panda-console-base-layout-sider-children {
margin-top: 44px;
}
.hight-active {
// color: @hn-greenColor;
background: @hn-greenColor;
background: #00b278;
color: @hn-greenColor;
// background: @hn-greenColor;
// background: #00b278;
border-radius: 5px;
.my-desc {
color: #fff;
color: #00b278;
}
svg path,
svg rect,
svg circle {
fill: @hn-greenColor !important;
stroke: @hn-greenColor !important;
}
// svg path,
// svg rect,
// svg circle {
// fill: @hn-greenColor !important;
// stroke: @hn-greenColor !important;
// }
}
.panda-console-base-pro-sider {
background: #fff;
......
src/layouts/HNLayout.js
View file @ f043fb42
......@@ -18,6 +18,7 @@ import SecurityLayout from './SecurityLayout';
import Site from './Site';
import layoutStyles from './BasicLayout.less';
import styls from './HN.less';
const ArcgisMap = React.lazy(() => import('../pages/map/arcgis'));
const AMap = React.lazy(() => import('../pages/map/amap'));
const CesiumMap = React.lazy(() => import('../pages/map/cesiumMap'));
......@@ -254,19 +255,20 @@ const Layout = props => {
_.isFunction(props.global.transformDevAssetsBaseURL) &&
props.global.transformDevAssetsBaseURL(props.global.get('bannerLogo'))
: defaultSetting.logo;
return (
<SecurityLayout loading {...props}>
<div className={styls.hnlayout}>
<BasicLayout
route={props.route}
title=""
logo={require('@/assets/basic/HN-logo.png')}
title={props.global.subtitle}
siderWidth={140}
logo={logo}
config={props.global}
currentMenuIndex={props.currentMenuIndex}
onHeaderLogo={handlerIndustry}
onPageChange={handlerPageChange}
onMenuPanelItemClick={handleUpdateCurrentIndex}
// subMenuItemRender={()=> <RightContent />}
headerContentRender={() => <RightContent />}
headerSiteRender={() =>
renderSite({
......
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