Skip to content

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

华农主题导航菜单

parent 59e86911
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 335 deletions
.eslintcache deleted 100644 → 0
View file @ 59e86911
This diff is collapsed.
src/containers/App/index.js
View file @ 75c5134c
......@@ -4,7 +4,7 @@ import { Helmet } from 'react-helmet';
import { connect } from 'react-redux';
import { Router, Switch } from '@wisdom-utils/runtime';
import { helpers } from '@wisdom-utils/utils';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
// eslint-disable-next-line import/extensions
import { dyRoutes } from '../../routes/config';
const pkg = require('../../../package.json');
......@@ -24,7 +24,12 @@ function App(props) {
<meta name="description" content={`${props.global && props.global.title}`} />
</Helmet>
<Router basename={config.base || pkg.name.toLocaleLowerCase() || ''}>
<Switch>{renderRoutes('panda-console-base', dyRoutes(props.menu || [], props.global.layout).routes)}</Switch>
<Switch>
{renderRoutes(
'panda-console-base',
dyRoutes(props.menu || [], props.global.layout, props.global.theme).routes,
)}
</Switch>
</Router>
</>
);
......
src/layouts/AppLayout/components/SlideMenu/index copy.js deleted 100644 → 0
View file @ 59e86911
import React, { useContext } from 'react';
import { ConfigProvider, Divider, Skeleton, Tooltip } from 'antd';
import './index.less';
import classNames from 'classnames';
import { ReactSVG } from 'react-svg';
import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
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 }}>
{props.children}
</Skeleton>
</div>
);
};
const Menu = props => {
const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick } = props;
const { route } = props;
const history = useHistory();
const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
value: props.active,
onChange: props.onActiveChange,
});
const toLink = path => {
if (!window.__POWERED_BY_QIANKUN__) {
history.push(path);
} else {
window.history.pushState(null, '', path);
}
};
const onSelectItem = (item, index) => {
let current = void 0;
let childrenRoutes = [];
if (item && item.routes) {
current = item.routes[0];
childrenRoutes = item.routes;
} else {
current = item;
childrenRoutes = [item];
}
setSelectIndex(index);
if (/iframe/.test(current.path)) {
history.push({
path: 'iframe',
state: current.params,
});
} else {
window.__POWERED_BY_QIANKUN__ ? toLink(`/civbase${current.path}`) : toLink(current.path);
}
onMenuClick && onMenuClick(current, childrenRoutes, index);
};
return (
<LoadingSkeleton {...props}>
{route && route.routes && route.routes.length > 0 && (
<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`)}>
{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>
);
};
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.js
View file @ 75c5134c
/*
* @Author: ZengJing
* @Date: 2022-04-15 09:34:03
* @LastEditTime: 2022-04-15 18:16:26
* @LastEditTime: 2022-04-18 14:52:44
* @LastEditors: ZengJing
* @Description:
* @FilePath: \CivWeb\src\layouts\AppLayout\components\SlideMenu\index.js
*/
import React, { useContext, useEffect } from 'react';
import React, { useContext, useEffect, useState } from 'react';
import { ConfigProvider, Divider, Skeleton, Tooltip } from 'antd';
import classNames from 'classnames';
import { connect } from 'react-redux';
......@@ -16,6 +16,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
import { useHistory } from '@wisdom-utils/runtime';
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 }}>
......@@ -26,14 +27,13 @@ const LoadingSkeleton = props => {
};
const Menu = props => {
const { prefixCls, collapsed, onCollapse, onMenuClick, menuHeaderRender, onMenuHeaderClick, title } = props;
const { route } = props;
const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
const prefixCls = getPrefixCls('layout-slider');
const { menuItemRender, menuHeaderRender, siderWidth, onMenuClick } = props;
const { collapsed, onCollapse, route, style } = props;
const history = useHistory();
const [activeMenu, setActiveMenu] = useState('首页');
const [selectIndex, setSelectIndex] = useMergedState(() => -1, {
value: props.active,
onChange: props.onActiveChange,
});
const toLink = path => {
if (!window.__POWERED_BY_QIANKUN__) {
history.push(path);
......@@ -45,7 +45,7 @@ const Menu = props => {
const onSelectItem = (item, dom) => {
let current = void 0;
let childrenRoutes = [];
console.log('item', item, dom);
setActiveMenu(item.name);
if (item && item.child) {
current = item.child[0];
......@@ -63,18 +63,16 @@ const Menu = props => {
} else {
window.__POWERED_BY_QIANKUN__ ? toLink(`/civbase${current.path}`) : toLink(current.path);
}
console.log('current', childrenRoutes);
onMenuClick && onMenuClick(current, childrenRoutes);
};
useEffect(() => {
route.routes = treeRoutes(route.routes);
}, [route, treeRoutes]);
const treeRoutes =(iroute =>
const treeRoutes = useCallback(iroute =>
iroute
.filter(item => item.level !== 3)
.map(item => {
console.log('item..>', item);
if (item.routes && Array.isArray(item.routes) && item.routes.length >= 1) {
if (item.level === 2) {
item.child = item.routes;
......@@ -82,7 +80,7 @@ const Menu = props => {
item.routes = treeRoutes(item.routes);
}
return item;
})
}),
);
return (
<LoadingSkeleton {...props}>
......@@ -93,7 +91,6 @@ const Menu = props => {
logo={null}
siderWidth={140}
config={props.global}
currentMenuIndex={props.currentMenuIndex}
// onHeaderLogo={handlerIndustry}
// onPageChange={handlerPageChange}
// onMenuPanelItemClick={handleUpdateCurrentIndex}
......@@ -103,7 +100,9 @@ const Menu = props => {
onClick={() => {
onSelectItem(item, dom);
}}
className="test-icon"
className={classNames(`test-icon`, {
[`hight-active`]: item.name === activeMenu,
})}
>
{/.svg/.test(item.extData.icon) ? (
<div className="my-svg">
......@@ -114,12 +113,19 @@ const Menu = props => {
<img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
</div>
)}
<span style={{ marginLeft: '5px' }}> {dom} </span>
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
) : null
}
subMenuItemRender={(item, dom) => (
<div className="test-icon">
<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%' }} />
......@@ -129,7 +135,10 @@ const Menu = props => {
<img src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
</div>
)}
<span style={{ marginLeft: '5px' }}> {dom} </span>
<span className="my-desc" title={item.name}>
{' '}
{item.name}{' '}
</span>
</div>
)}
// headerSiteRender={() =>
......
src/layouts/AppLayout/components/SlideMenu/index.less
View file @ 75c5134c
......@@ -16,47 +16,6 @@
@slider-light: #fff;
@color-black: #fff;
.@{panda-prefix-cls} {
overflow: hidden;
flex: 0 0 80px;
max-width: 80px;
min-width: 80px;
width: 80px;
background-color: @layout-header-background;
transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
&-logo{
display: none;
}
&-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%;
......@@ -97,18 +56,20 @@
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/HN.less
View file @ 75c5134c
......@@ -75,6 +75,14 @@
.panda-console-base-menu-item-children
:global(.panda-console-base-tabs-tab.panda-console-base-tabs-tab-active .panda-console-base-tabs-tab-btn) {
color: @hn-greenColor !important;
svg {
path,
rect,
circle,
.cls-1 {
fill: hsla(0, 0%, 100%, 0.65) !important;
}
}
}
.panda-console-base-menu-item-children :global(.panda-console-base-tabs-tab-btn > div > div) {
display: flex;
......@@ -122,8 +130,6 @@
.panda-console-base-panel-min-mainPane-main-left .menu-categories .categorie-name span {
color: #737983;
}
.panda-console-base-panel-min-mainPane-main-left .menu-categories .categorie-name.active {
}
.panda-console-base-panel-min-mainPane-main-left .menu-categories .categorie-name.btn:hover span {
color: #333;
}
......@@ -150,18 +156,46 @@
display: none;
}
.test-icon {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0 16px;
width: 100%;
margin: 0 auto;
padding: 0 16px;
.my-svg {
display: inline-block;
width: 18px;
height: 18px;
display: inline-block;
color: #7a7a7a;
svg {
path,
rect,
circle,
.cls-1 {
fill: #7a7a7a;
stroke: hsla(0, 0%, 100%, 0.65);
stroke-width: 0;
stroke-linecap: round;
stroke-miterlimit: 10;
}
}
}
.my-img {
display: inline-block;
width: 18px;
height: 18px;
display: inline-block;
& > img {
position: relative;
top: 3px;
width: 100%;
height: 100%;
vertical-align: baseline;
}
}
&>span{
.my-desc {
margin-left: 4px;
color: #7c7c7a;
}
}
.panda-console-base-pro-menu-item-title {
......@@ -172,11 +206,51 @@
vertical-align: bottom;
}
.panda-console-base-menu-sub .panda-console-base-menu-item.panda-console-base-menu-item-only-child{
padding-left: 26px!important;
.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{
.panda-console-base-pro-sider .panda-console-base-layout-sider-children {
margin-top: 44px;
}
.hight-active {
// color: @hn-greenColor;
background: @hn-greenColor;
background: #00b278;
border-radius: 5px;
.my-desc {
color: #fff;
}
// svg path,
// svg rect,
// svg circle {
// fill: @hn-greenColor !important;
// stroke: @hn-greenColor !important;
// }
}
.panda-console-base-pro-sider {
background: #fff;
// .panda-console-base-menu-submenu-arrow{
// color:#7a7a7a;
// }
.panda-console-base-menu.panda-console-base-menu-dark
.panda-console-base-menu-submenu-title
.panda-console-base-menu-submenu-arrow::before {
background: #7a7a7a !important;
}
.panda-console-base-menu.panda-console-base-menu-dark
.panda-console-base-menu-submenu-title
.panda-console-base-menu-submenu-arrow::after {
background: #7a7a7a !important;
}
.panda-console-base-menu-dark .panda-console-base-menu-inline.panda-console-base-menu-sub {
background: #fff;
}
}
}
}
src/layouts/HNLayout.js
View file @ 75c5134c
......@@ -258,48 +258,6 @@ const Layout = props => {
return (
<SecurityLayout loading {...props}>
<div className={styls.hnlayout}>
{/* <BasicLayout
route={props.route}
title={props.global.title}
logo={logo}
config={props.global}
collapsed={collapse}
onCollapse={handlerCollapsed}
currentMenuIndex={props.currentMenuIndex}
onHeaderLogo={handlerIndustry}
onPageChange={handlerPageChange}
onMenuPanelItemClick={handleUpdateCurrentIndex}
headerContentRender={() => <RightContent />}
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>
</>
</BasicLayout> */}
<BasicLayout
route={props.route}
title=""
......
src/routes/config.js
View file @ 75c5134c
import LoadingComponent from '@wisdom-utils/components/lib/AppLayout/components/PageLoading';
import { dynamic } from '@wisdom-utils/runtime';
import BasicLayout from '../layouts/HNLayout';
import { UserLayout } from '@wisdom-utils/components/lib/AppLayout';
import BasicLayout from '../layouts/BasicLayout';
import HNLayout from '../layouts/HNLayout';
import BootPage from '../pages/bootpage';
import Iframe from '../pages/iframe';
import Login from '../pages/user/login';
import CommonMenu from '../pages/commonMenu';
import NoSecret from '../pages/user/login/noSecret';
import UsingAnalysis from '../pages/cloudOMS/usingAnalysis';
export const dyRoutes = (routes, layout) => {
export const dyRoutes = (routes, layout, theme) => {
// eslint-disable-next-line no-shadow
const dyRoutes = routes || [];
return {
......@@ -44,7 +44,7 @@ export const dyRoutes = (routes, layout) => {
},
{
path: '/',
component: BasicLayout,
component: theme === 'lightgreen.css' ? HNLayout : BasicLayout,
routes: [
...dyRoutes,
{
......
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