feat: 添加平铺菜单布局

config/proxy.js

 /* eslint-disable */
 // const proxyURL = process.env.NODE_ENV !== 'production' ? 'http://192.168.10.150:8777' : window.location.origin;
-const proxyURL = 'http://192.168.10.156:8085';
+const proxyURL = 'http://192.168.10.150:8023';
 module.exports = {
   assetsRoot: process.env.NODE_ENV !== 'production' ? proxyURL : './',
   dev: {
@@ -90,6 +90,16 @@ module.exports = {
         '/CityTemp': '/CityTemp',
       },
     },
+    '/web4': {
+      target: proxyURL,
+      changeOrigin: true,
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      pathRewrite: {
+        '/web4': '/web4',
+      },
+    }
   },
   pre: {
     '/CityInterface': {

internals/webpack/babel-preset/index.js

@@ -50,6 +50,7 @@ module.exports = opts => {
           proposal: 'minimal',
         },
       ],
+      'inline-react-svg',
       '@babel/plugin-proposal-do-expressions',
       '@babel/plugin-proposal-function-bind',
       '@babel/plugin-proposal-logical-assignment-operators',

internals/webpack/webpack.base.babel.js

@@ -250,7 +250,7 @@ module.exports = options => {
     .use('file-loader')
     .loader(require.resolve('file-loader'))
     .options({
-      name: '/static/[name].[hash:8].[ext]',
+      name: 'static/[name].[hash:8].[ext]',
       esModule: false,
     });
 

package.json

@@ -92,7 +92,7 @@
     "dependencies": {
         "@ant-design/colors": "^5.0.1",
         "@ant-design/icons": "^4.0.0",
-        "@ant-design/pro-layout": "^6.18.1",
+        "@ant-design/pro-layout": "^6.24.1",
         "@ant-design/pro-skeleton": "^1.0.0-beta.2",
         "@ant-design/pro-table": "^2.5.3",
         "@ant-design/pro-utils": "^1.10.4",
@@ -133,6 +133,7 @@
         "react-redux": "7.0.2",
         "react-router-config": "^5.1.1",
         "react-router-dom": "5.1.0",
+        "react-svg": "^14.0.11",
         "react-use": "^15.3.4",
         "redux": "4.0.1",
         "redux-immutable": "^4.0.0",
@@ -174,6 +175,7 @@
         "babel-loader": "8.0.5",
         "babel-plugin-dynamic-import-node": "2.2.0",
         "babel-plugin-import": "^1.13.0",
+        "babel-plugin-inline-react-svg": "^2.0.1",
         "babel-plugin-lodash": "3.3.4",
         "babel-plugin-react-intl": "3.0.1",
         "babel-plugin-styled-components": "1.10.0",
@@ -252,6 +254,7 @@
         "raw-loader": "^4.0.2",
         "react-app-polyfill": "0.2.2",
         "react-error-overlay": "6.0.8",
+        "react-inlinesvg": "^2.3.0",
         "react-refresh": "^0.9.0",
         "react-sticky": "^6.0.3",
         "react-test-renderer": "16.8.6",

src/components/GlobalHeader/ExtendRightContent.js

+import React, { useState } from 'react';
+import { ReactSVG } from 'react-svg'
+import { message } from 'antd';
+import _, { words } from 'lodash';
+import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
+
+import { useIntl } from '@/locales/localeExports';
+import Icon from '@ant-design/icons';
+
+import { actionCreators } from '../../containers/App/store';
+import HeaderSearch from '../HeaderSearch';
+import Avatar from './AvatarDropdown';
+import styles from './index.less';
+import NoticeIconView from './NoticeIconView';
+import classNames from 'classnames';
+
+/* eslint-disable */
+const orderSvg = () => (
+  <svg
+    version="1.1"
+    x="0px"
+    y="0px"
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    enableBackground="new 0 0 24 24"
+    space="preserve"
+  >
+    <path
+      fill="#5F718C"
+      d="M7.223,13.131c-0.445,0-0.815,0.364-0.815,0.816c0,0.446,0.37,0.816,0.815,0.816
+      c0.446,0,0.816-0.37,0.816-0.816C8.039,13.495,7.669,13.131,7.223,13.131L7.223,13.131z M7.223,16.574L7.223,16.574
+      c-0.445,0-0.815,0.371-0.815,0.817c0,0.45,0.37,0.814,0.815,0.814c0.446,0,0.816-0.364,0.816-0.814
+      C8.039,16.945,7.669,16.574,7.223,16.574L7.223,16.574z M7.223,9.688L7.223,9.688c-0.445,0-0.815,0.366-0.815,0.817
+      c0,0.445,0.37,0.815,0.815,0.815c0.446,0,0.816-0.37,0.816-0.815C8.039,10.054,7.669,9.688,7.223,9.688L7.223,9.688z M20.469,4.533
+      L20.469,4.533h-2.246V4.082c0-0.268-0.22-0.48-0.485-0.48h-2.622c-0.138-0.59-0.434-1.1-0.839-1.505
+      c-0.59-0.591-1.388-0.95-2.28-0.95c-0.884,0-1.677,0.359-2.262,0.95C9.323,2.502,9.022,3.012,8.879,3.602H6.263
+      c-0.267,0-0.492,0.213-0.492,0.48v0.451H3.548c-0.451,0-0.821,0.363-0.821,0.814v16.688c0,0.452,0.37,0.817,0.821,0.817h16.921
+      c0.438,0,0.805-0.365,0.805-0.817V5.348C21.273,4.896,20.907,4.533,20.469,4.533L20.469,4.533z M10.671,3.027
+      c0.405-0.404,0.718-0.653,1.325-0.653c0.614,0,0.933,0.249,1.337,0.653c0.221,0.227,0.158,0.256,0.273,0.574h-3.208
+      C10.516,3.283,10.44,3.254,10.671,3.027 M7.015,4.822L7.015,4.822h9.982v1.054H7.015 M19.647,21.215L19.647,21.215H4.359V6.158
+      h1.411v0.451c0,0.267,0.226,0.486,0.492,0.486h11.475c0.266,0,0.485-0.22,0.485-0.486V6.158h1.425V21.215L19.647,21.215z
+      M16.742,9.765L16.742,9.765H9.659c-0.267,0-0.485,0.468-0.485,0.74c0,0.267,0.219,0.739,0.485,0.739h7.083
+      c0.277,0,0.491-0.473,0.491-0.739C17.233,10.232,17.02,9.765,16.742,9.765L16.742,9.765z M16.742,16.65L16.742,16.65H9.659
+      c-0.267,0-0.485,0.468-0.485,0.741c0,0.271,0.219,0.728,0.485,0.728h7.083c0.277,0,0.491-0.457,0.491-0.728
+      C17.233,17.118,17.02,16.65,16.742,16.65L16.742,16.65z M16.742,13.213L16.742,13.213H9.659c-0.267,0-0.485,0.462-0.485,0.735
+      c0,0.271,0.219,0.734,0.485,0.734h7.083c0.277,0,0.491-0.464,0.491-0.734C17.233,13.675,17.02,13.213,16.742,13.213L16.742,13.213z"
+    />
+  </svg>
+);
+const homeSvg = () => (
+  <svg
+    version="1.1"
+    x="0px"
+    y="0px"
+    width="24px"
+    height="24px"
+    viewBox="0 0 24 24"
+    enableBackground="new 0 0 24 24"
+    space="preserve"
+  >
+    <path
+      fill="#5F718C"
+      d="M23.359,13.561v-1.313L12.057,1.064L0.642,12.247v1.37h2.84v9.318h7.381v-4.935h2.271v4.935h7.385v-9.318
+	    L23.359,13.561z M18.815,11.917v9.319H14.84v-4.935H9.161v4.935H5.185v-9.319H3.311l8.746-8.551l8.577,8.551H18.815z"
+    />
+  </svg>
+);
+
+const favitorSvg = () => (
+<svg t="1631171489722" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16457" width="24" height="24"><path d="M512 87.806c-234.721 0-424.194 189.474-424.194 424.194s189.474 424.194 424.194 424.194 424.194-189.474 424.194-424.194-189.474-424.194-424.194-424.194zM783.484 442.715l-137.155 100.393c-7.069 5.655-9.899 14.141-7.069 22.624l52.317 161.194c5.655 18.382-15.553 33.935-31.108 22.624l-137.155-100.393c-7.069-5.655-16.967-5.655-24.037 0l-137.155 100.393c-15.553 11.312-36.763-4.242-31.108-22.624l53.731-162.608c2.829-8.484 0-16.967-7.069-22.624l-137.155-100.393c-15.553-11.312-7.069-35.349 11.312-35.349h169.678c8.484 0 16.967-5.655 18.382-14.141l52.317-161.194c5.655-18.382 32.522-18.382 38.177 0l52.317 161.194c2.829 8.484 9.899 14.141 18.382 14.141h169.678c21.21 0 28.278 25.452 12.725 36.763z" p-id="16458" fill="#E3ECFF"></path></svg>);
+const OrderIcon = props => <Icon component={orderSvg} {...props} />;
+const HomeIcon = props => <Icon component={homeSvg} {...props} />;
+const FavitorIcon = props => <Icon component={favitorSvg} {...props}/>
+const MESSAGE_BOX_URL =
+  'product/maintenance/CaseManage/CaseDoingBox/StardCaseDoingBoxView|isDelay=1';
+
+export const getConfig = (widgets, url, key) => {
+  let widgetconfig = {};
+  if (widgets) {
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < widgets.length; i++) {
+      const widget = widgets[i];
+
+      if (widget && widget[key])
+        widget[key] = widget[key].replace(/\\/g, '/').trim();
+      // eslint-disable-next-line eqeqeq
+      if (widget[key] && url.toLowerCase() === widget[key].toLowerCase()) {
+        widgetconfig = widget;
+        break;
+      } else {
+        const children = widget.widgets ? widget.widgets : widget.routes;
+        if (children) {
+          widgetconfig = getConfig(children, url, key);
+          if (widgetconfig) {
+            break;
+          }
+        }
+      }
+    }
+  }
+  return widgetconfig;
+};
+const GlobalHeaderRight = props => {
+  const { theme, layout } = props;
+  const [options, setOptions] = useState([]);
+  const [currentIndex, setCurrentIndex] = useState(-1);
+  let className = styles.right;
+ 
+  if (theme === 'dark' && layout === 'top') {
+    className = `${styles.right}  ${styles.dark}`;
+  }
+
+  const intl = useIntl();
+
+
+  const goHome = event => {
+    event.stopPropagation();
+    setCurrentIndex(0);
+    const url = _.isString(props.global.get('homepage'))
+      ? props.global.get('homepage')
+      : props.global.get('homepage.url');
+    window.share.event.emit('goHome', `/civbase/civweb4/${url}`);
+    url ? (
+      window.share.event.emit('listenerMointer', {
+        label: '首页',
+        url: url,
+      })
+    ) : null;
+  };
+
+
+  const handleOrder = event => {
+    event.stopPropagation();
+    const widgetConfig = getConfig(
+      props.global.get('widgets').concat(props.global.get('uiwidgets')),
+      MESSAGE_BOX_URL,
+      'url',
+    );
+
+    if (Object.keys(widgetConfig).length > 0) {
+      props.history.push(`/civweb4/${MESSAGE_BOX_URL}`);
+      setCurrentIndex(2);
+    } else {
+      message.warning('对不起，您没有菜单权限！');
+    }
+  };
+
+  const handlerFavitor = event => {
+    setCurrentIndex(1);
+  }
+
+
+  return (
+    <div className={className}>
+      <div className={styles.nav}>
+        <div className={classNames(styles.item, {
+          [styles.active]: currentIndex === -1
+        })} onClick={goHome}>
+            <HomeIcon  title={intl.formatMessage({id: 'component.header.icon.home'})} />
+            <span>首页</span>
+        </div>
+        <div className={classNames(styles.item, {
+          [styles.active]: currentIndex === 1
+        })} onClick={handlerFavitor}>
+            <FavitorIcon></FavitorIcon>
+            <span>常用</span>
+        </div>
+        <div className={classNames(styles.item, {
+          [styles.active]: currentIndex === 2
+        })}>
+            <OrderIcon onClick={handleOrder} title={intl.formatMessage({id: 'component.header.icon.order'})} />
+            <span>工单</span>
+        </div>
+       
+      </div>
+      <NoticeIconView title={intl.formatMessage({id: 'component.header.icon.alarm'})} />
+      <Avatar menu global={props.global} updateCurrentIndex={props.updateCurrentIndex} updateConfig={props.updateConfig} logout={props.logout}/>
+      {/* <SelectLang className={styles.action} /> */}
+    </div>
+  );
+};
+
+const mapStateToProps = state => ({
+  global: state.getIn(['global', 'globalConfig']),
+  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 => ({
+  updateRecentKeywords(keyword) {
+    dispatch(actionCreators.updateRecentKeywords(keyword));
+  },
+  updateRecentVisited(history) {
+    dispatch(actionCreators.updateRecentVisited(history));
+  },
+  updateRecentProduct(history) {
+    dispatch(actionCreators.updateRecentProduct(history));
+  },
+  clearRecentProduct() {
+    dispatch(actionCreators.clearRecentProduct());
+  },
+  updateCurrentIndex(index) {
+    dispatch(actionCreators.updateCurrentIndex(index))
+  },
+  updateConfig(config) {
+    dispatch(actionCreators.getConfig(config))
+  },
+  updateComplexConfig(config) {
+    dispatch(actionCreators.updateComplexConfig(config))
+  },
+  logout() {
+    dispatch(actionCreators.logout())
+  }
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps,
+)(withRouter(GlobalHeaderRight));

src/components/GlobalHeader/index.less

@@ -166,6 +166,30 @@
       transform: scale(0.88);
     }
   }
+  .item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    height: 100%;
+    padding: 0 16px;
+    cursor: pointer;
+    span:first-child {
+      margin: 0 8px 0 0!important;
+    }
+    span:last-child {
+      color: #5F718C;
+    }
+    &:hover, &.active {
+      background: rgba(22,133,255, 0.4);
+      path {
+        fill: #FFFFFF!important;
+      }
+      span:last-child {
+        color: #fff;
+      }
+    }
+  }
 }
 .platformModal {
   //

src/components/SliderPanel/Categories.js

@@ -15,7 +15,9 @@ const Categories = props => {
     props.onChange && props.onChange(index);
   };
   return (
-    <div className={styles['menu-categories']}>
+    <div className={classNames(styles['menu-categories'], {
+      [styles['min-cateorites']]: props.mode
+    })}>
       {(props.data || []).map((item, index) => {
         const categorieCls = classNames(
           styles['categorie-name'],

src/components/SliderPanel/MinCategories.js

+import React, { useState } from 'react';
+
+import classNames from 'classnames';
+
+import styles from './min.less';
+
+const Categories = props => {
+  const [currentIndex, setCurrentIndex] = useState(props.currentMenuIndex);
+  const selectCategories = (event, index) => {
+    event.preventDefault();
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+    setCurrentIndex(index);
+    // eslint-disable-next-line no-unused-expressions
+    props.onChange && props.onChange(index);
+  };
+  return (
+    <div className={classNames(styles['menu-categories'], {
+      [styles['min-cateorites']]: props.mode
+    })}>
+      {(props.data || []).map((item, index) => {
+        const categorieCls = classNames(
+          styles['categorie-name'],
+          styles.btn,
+          currentIndex === index ? styles.active : '',
+        );
+        return (
+          <div
+            className={categorieCls}
+            key={item.name}
+            onClick={event => selectCategories(event, index)}
+          >
+            {/* eslint-disable-next-line jsx-a11y/alt-text */}
+            <img src={item.extData.icon} />
+            <span>{item.extData.label}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Categories;

src/components/SliderPanel/MinPanel.js

+import React, { useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+import propTypes from 'prop-types';
+import KeyCode from 'rc-util/lib/KeyCode';
+import Icon, { MenuOutlined } from '@ant-design/icons';
+import Categories from './MinCategories';
+import styles from './min.less';
+// eslint-disable-next-line import/extensions
+import { events } from './utils/index.js';
+
+const ThLarge = props => (
+  <svg viewBox="0 0 1024 1024" version="1.1" width="14" height="14">
+    <path
+      d="M592 64h384c26.51 0 48 21.49 48 48v320c0 26.51-21.49 48-48 48H592c-26.51 0-48-21.49-48-48V112c0-26.51 21.49-48 48-48z m-160 0H48C21.49 64 0 85.49 0 112v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zM0 592v320c0 26.51 21.49 48 48 48h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H48c-26.51 0-48 21.49-48 48z m592 368h384c26.51 0 48-21.49 48-48V592c0-26.51-21.49-48-48-48H592c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48z"
+      fill="#737f97"
+    />
+  </svg>
+);
+
+const ThLargeIcon = props => <Icon component={ThLarge} {...props} />;
+
+const MinPanel = props => {
+  const getCategories = () => {
+    let { data } = props;
+    // eslint-disable-next-line no-prototype-builtins
+    data = data.filter(item => item.hasOwnProperty('extData'));
+    return data;
+  };
+  
+  const categories = getCategories();
+  const wcls = categories.length <= 10 ? styles.w110: styles.w210
+  const panelCls = classNames(
+    styles.mainPane,
+    props.visible ? styles.visible : styles.hidden,
+    wcls
+  );
+
+  const domRef = useRef();
+  // eslint-disable-next-line no-debugger;
+  const [currentMenu, setCurrentMenu] = useState(null);
+
+  useEffect(() => {
+    setCurrentMenu(props.data[props.currentMenuIndex]);
+  }, [props.data, props.currentMenuIndex]);
+
+  // eslint-disable-next-line no-underscore-dangle
+  let _clickEvents = null;
+  const handleKeyDown = event => {
+    if (event.keyCode === KeyCode.ESC) {
+      const { onClose } = props;
+      event.stopPropagation();
+      if (onClose) {
+        onClose(event);
+      }
+    }
+  };
+  const domFocus = () => {
+    if (domRef) {
+      domRef.current.focus();
+    }
+  };
+  const handleDocumentClick = e => {
+    if (props.visible) {
+      const node = domRef && domRef.current;
+      if (
+        node &&
+        (node === e.target ||
+          node.contains(e.target) ||
+          (e.target !== document &&
+            !document.documentElement.contains(e.target)))
+      ) {
+        return;
+      }
+      // eslint-disable-next-line no-unused-expressions
+      props.onClose && props.onClose(e);
+    }
+  };
+  const addDocumentEvents = () => {
+    if (props.canCloseByOutSideClick) {
+      _clickEvents = events.on(document, 'click', handleDocumentClick);
+    }
+  };
+  const removeDocumentEvents = () => {
+    _clickEvents.off();
+    _clickEvents = null;
+  };
+
+
+  const selectItem = (event, item) => {
+    // eslint-disable-next-line no-unused-expressions
+    props.onSelect && props.onSelect(item);
+  };
+ 
+
+  const handleCategories = index => {
+    setCurrentMenu(props.data[index]);
+    // eslint-disable-next-line no-unused-expressions
+    props.onChange && props.onChange(index);
+  };
+  useEffect(() => {
+    if (props.visible) {
+      domFocus();
+    }
+    addDocumentEvents();
+
+    return () => removeDocumentEvents();
+  }, [props.visible]);
+  return (
+    <div
+      className={panelCls}
+      tabIndex="-1"
+      onKeyDown={event =>
+        props.visible && props.keyboard ? handleKeyDown(event) : undefined
+      }
+      ref={domRef}
+    >
+      <div className={styles.main}>
+        <div className={styles['main-left']}>
+          <Categories
+            mode="mini"
+            data={categories}
+            onChange={handleCategories}
+            currentMenuIndex={props.currentMenuIndex}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+MinPanel.propTypes = {
+  visible: propTypes.bool,
+  keyboard: propTypes.bool,
+  onClose: propTypes.func,
+  canCloseByOutSideClick: propTypes.bool,
+};
+MinPanel.defaultProps = {
+  visible: false,
+  keyboard: true,
+  canCloseByOutSideClick: true,
+  onClose: () => {},
+};
+export default MinPanel;

src/components/SliderPanel/index.less

@@ -20,7 +20,7 @@
     flex: 1 1 0%;
     position: absolute;
     z-index: 30;
-    background-color: rgba(0, 21, 41, 0.94);
+    background-color: #001529;
     min-width: 500px;
     max-width: 640px;
     overflow: hidden;
@@ -69,6 +69,10 @@
       overflow: hidden auto;
       box-sizing: border-box;
       .menu-categories {
+        &.min-cateorites {
+          position: relative;
+          top: 46px;
+        }
         .categorie-name {
           border-width: 0px 0px 0px 1px;
           border-top-style: initial;

src/components/SliderPanel/min.less

+@import '~antd/es/style/themes/default.less';
+@dark-menu-catatories-color: rgba(255, 255, 255, 0.65);
+@menu-primary-color: #1685FF;
+.mainPane {
+  position: absolute;
+  &.hidden {
+    // display: none;
+    flex: 1 1 0%;
+    // position: relative;
+    z-index: 5;
+    background-color: rgb(247, 247, 247);
+    // min-width: 490px;
+    // max-width: 980px;
+    width: 0;
+    overflow: hidden;
+    transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
+    transform: translateX(-1240px);
+  }
+  &.visible {
+    display: block;
+    flex: 1;
+    position: absolute;
+    z-index: 610;
+    background-color: rgba(0, 21, 41, 0.98);
+    min-width: 210px;
+    max-width: 210px;
+    overflow: hidden;
+    height: 100%;
+    transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
+  }
+  &.w110 {
+    min-width: 110px;
+    max-width: 110px;
+  }
+  &.w210 {
+    min-width: 210px;
+    max-width: 210px;
+  }
+  .header {
+    width: 100%;
+    height: 40px;
+    line-height: 20px;
+    text-align: center;
+    padding: 0 0 0 18px;
+    display: inline-flex;
+    align-items: center;
+    &-title {
+      color: #fff;
+      padding-left: 12px;
+    }
+    .subheader {
+      color: #fff;
+      display: flex;
+      align-items: center;
+      margin-left: 20px;
+      :global(.@{ant-prefix}icon-menu) {
+        color: #737f97;
+        padding-right: 12px;
+      }
+    }
+    .marks {
+      position: absolute;
+      right: 12px;
+      top: 8px;
+    }
+  }
+  .main {
+    // padding: 32px 0px 0px 32px;
+    padding: 0px 0px 0px 4px;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+    display: flex;
+    &-left {
+      // padding-top: 32px;
+      // width: 125px;
+      height: 100%;
+      overflow: hidden auto;
+      box-sizing: border-box;
+      .menu-categories {
+        &.min-cateorites {
+          position: relative;
+          top: 48px;
+          display: flex;
+          flex-direction: row;
+          flex-wrap: wrap;
+        }
+        .categorie-name {
+          border-width: 0px 0px 0px 1px;
+          border-top-style: initial;
+          border-right-style: initial;
+          border-bottom-style: initial;
+          border-top-color: initial;
+          border-right-color: initial;
+          border-bottom-color: initial;
+          border-image: initial;
+          border-left-style: solid;
+          border-left-color: rgb(222, 222, 222);
+          display: flex;
+          align-items: center;
+          &.btn {
+            box-sizing: border-box;
+            outline: medium;
+            background: none;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+            text-decoration: none;
+            transition: all 0.3s ease-out 0s;
+            border: 1px solid transparent;
+            vertical-align: middle;
+            text-align: left;
+            color: #555555;
+            width: 100px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            padding: 12px 12px;
+            height: 74px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            margin-bottom: 2px;
+            &:hover {
+              // border-left: 2px solid @primary-color;
+              // span {
+              //   color: #fff;
+              // }
+              span {
+                color: @menu-primary-color;
+                transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
+              }
+            }
+            &:hover,
+            &:link:hover,
+            &:visited:hover {
+              color: #273150;
+            }
+          }
+          img {
+            width: 22px;
+            height: 22px;
+          }
+          span {
+            // margin-left: 12px;
+            padding-top: 4px;
+            color: @dark-menu-catatories-color;
+          }
+          &.active {
+            background-color: rgba(0, 0, 0, 0.2);
+            // border-left: 2px solid @primary-2;
+            transition: all 0.25s cubic-bezier(0, 0, 0.2, 1) 0s;
+            span {
+              color: @menu-primary-color;
+            }
+          }
+        }
+      }
+    }
+    &-menus {
+      flex: 1 1 0%;
+      height: 100%;
+      overflow: hidden;
+      display: flex;
+      flex-direction: row;
+      margin-left: 12px;
+      &::-webkit-scrollbar {
+        width: 0px;
+        height: 0px;
+      }
+      &-recentAll {
+        flex: 1 1 0%;
+        padding: 0px 32px 32px 0px;
+        overflow: auto;
+        &-menu-group {
+          margin-bottom: 12px;
+          columns: 120px 3;
+          column-gap: 12px;
+          &-items {
+            display: inline-block;
+            margin-bottom: 20px;
+            width: 100%;
+            break-inside: avoid;
+            .title {
+              margin: 0px 0px 8px 0px;
+              padding: 0px;
+              height: 30px;
+              line-height: 30px;
+              font-size: 12px;
+              font-weight: 600;
+              color: #fff;
+              transition: all 250ms linear 0s;
+            }
+            &-menu-item {
+              position: relative;
+              transition: all 300ms ease 0s;
+              display: flex;
+              align-items: center;
+              img {
+                width: 14px;
+                height: 14px;
+              }
+              &-name {
+                box-sizing: border-box;
+                outline: medium;
+                background: none;
+                cursor: pointer;
+                font-family: inherit;
+                font-size: inherit;
+                text-decoration: none;
+                transition: all 0.3s ease-out 0s;
+                border: 1px solid transparent;
+                vertical-align: middle;
+                text-align: left;
+                color: rgba(255, 255, 255, 0.65);
+                display: block;
+                width: 100%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                padding: 0px 12px;
+                height: 32px;
+                line-height: 30px;
+                &.pad {
+                  padding: 0px 4px;
+                }
+                &:link,
+                &:visited,
+                &:hover {
+                  // color: rgb(85, 85, 85);
+                  color: #fff;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/global.less

@@ -15,6 +15,10 @@ body,
   font-family: 'ZhenyanGB';
   src: url("./assets/fonts/ZhenyanGB.ttf");
 }
+@font-face {
+  font-family: 'PangMenZhengDaoBiaoTiTi';
+  src: url("./assets/fonts/PangMenZhengDaoBiaoTiTi.ttf");
+}
 
 .colorWeak {
   filter: invert(80%);
@@ -64,7 +68,6 @@ select:-webkit-autofill {
     }
   }
 }
-
 // 兼容IE11
 @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) {
   body .ant-design-pro > .ant-layout {

src/layouts/BasicLayout.js

@@ -357,15 +357,6 @@ const BasicLayout = props => {
 
   useEffect(() => {
     props.updatePathname(props.location.pathname);
-    // let path = props.global.homepage ? `/civweb4/${props.global.homepage}` : `/civweb4/?client=${props.global.get('client')}`;
-    // if(!JSON.parse(sessionStorage.getItem('tabNav'))){
-    //   sessionStorage.setItem('tabNav', JSON.stringify([{title: '首页', key: path, path: path}]))
-    //   setTabRoutesList([{title: '首页', key: path, path: path}]);
-    // }
-    // if(!sessionStorage.getItem('tabActiveKey')){
-    //   sessionStorage.setItem('tabActiveKey', path);
-    //   setTabActiveKey(path);
-    // }
   }, []);
 
   const extraRender = menuExtraRender(currentRoutes);

src/layouts/BasicLayout.less

+@import '~antd/es/style/themes/default.less';
+@menu-primary-color: #1685FF;
+.basicLayout * {
+    box-sizing: border-box;
+}
+.basicLayout {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 100%;
+    .layout-has-slider {
+        flex-direction: row;
+        display: flex;
+        flex: auto;
+    }
+    .layoutSlider {
+        overflow: hidden; 
+        flex: 0 0 100px; 
+        max-width: 100px; 
+        min-width: 100px; 
+        width: 100px;
+        background-color: @layout-header-background;
+        &.fixed {
+            position: fixed!important;
+            top: 46px;
+            left: 0;
+            z-index: 600;
+            height: 100%;
+            overflow: auto;
+            overflow-x: hidden;
+            box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+        }
+        .sliderMenu {
+            flex: 1 1 0%; overflow: hidden auto;
+            ul {
+                position: relative;
+                min-height: 100%;
+                li {
+                    height: 74px;
+                    display: flex;
+                    align-items: center;
+                    text-align: center;
+                    width: 100%;
+                    justify-content: center;
+                    cursor: pointer;
+                    a {
+                        text-align: center;
+                        display: block;
+                        img {
+                            width: 22px;
+                            height: 22px;
+                            opacity: 0.7;
+                        }
+                        span {
+                            display: block;
+                            color: #A9AEB2;
+                            padding-top: 4px;
+                            max-width: 70px;
+                            text-overflow: ellipsis;
+                            overflow: hidden;
+                            white-space: nowrap;
+                        }
+                    }
+                    &:hover {
+                        span {
+                            color: #1685FF;
+                        }
+                    }
+                    &.active {
+                        background: #1685FF;
+                        box-shadow: 0px 1px 0px 0px rgba(238, 238, 238, 0.17);
+                        span {
+                            color: #FFFFFF;
+                        }
+                    }
+                }
+            }
+            .splitLine {
+                width: 90px;
+                height: 1px;
+                border: 1px solid;
+                border-image: linear-gradient(-90deg, #030000, #FFFFFF, #030000) 10 0;
+                background: linear-gradient(90deg, #030000 0%, #FFFFFF 50%, #030000 100%);
+                margin: 0 auto;
+                position: relative;
+                top: -4px;
+            }
+        }
+        .layout-slider-childern {
+            display: flex;
+            flex-direction: column;
+            height: 100%;
+        }
+    }
+    .layout {
+        position: relative;
+        // display: flex;
+        flex: auto;
+        flex-direction: column;
+        min-height: 0;
+        background: #f0f2f5;
+    }
+    .basicLayout-content {
+        position: relative;
+        // margin: 24px 24px 0px 24px;
+    }
+    .ant-page-header {
+        // padding: 4px 16px;
+        position: fixed; top: 0px; width: 100%; left: 0px; z-index: 999; 
+        // box-shadow: rgb(240, 241, 242) 0px 2px 8px;
+        box-sizing: border-box;
+        margin: 0;
+        color: rgba(0,0,0,.85);
+        font-size: 14px;
+        font-variant: tabular-nums;
+        line-height: 1.5715;
+        list-style: none;
+        font-feature-settings: "tnum","tnum";
+        position: relative;
+        // padding: 16px 24px;
+        height: 46px;
+        background-color: #0678F5;
+        // background: url('../assets/basic/图层 998@2x.png') no-repeat center;
+        background-size: cover;
+        display: flex;
+        flex-direction: row;
+        box-sizing: border-box;
+        .header {
+            position: absolute;
+            width: 100%;
+            display: flex;
+            align-items: center;
+            height: 100%;
+            padding-left: 17px;
+            .logo {
+                display: flex;
+                align-items: center;
+                height: 100%;
+                padding-left: 7px;
+                img {
+                    width: 48px;
+                    height: 25px;
+                }
+            }
+            .title {
+                min-width: 200px;
+                font-size: 26px;
+                font-weight: 400;
+                color: #FFFFFF;
+                opacity: 0.9;
+                padding-left: 25px;
+                font-family: PangMenZhengDaoBiaoTiTi;
+                letter-spacing: 2px;
+            }
+        }
+    }
+    .menu-item-children {
+        height: 50px;
+        background: linear-gradient(0deg, #E5E7E8 0%, #FAFDFF 13%);
+        box-shadow: rgb(240 241 242) 0px 2px 8px;
+        position: fixed;
+        top: 46px;
+        width: 100%;
+        z-index: 500;
+        svg {
+            path {
+                fill: #C4CDDB;
+                box-shadow: 0px 1px 2px 0px rgb(6 0 1 / 50%);
+            }
+        }
+        .menu-item {
+            float: left;
+        }
+        & :global(.ant-tabs-tab) {
+            display: flex!important;
+        }
+        & :global(.ant-tabs-tab-btn) {
+            display: flex;
+            position: relative;
+            align-items: center;
+        }
+
+        // :global .ant-tabs-tab-btn:after {
+        //     position: absolute;
+        //     width: 1px;
+        //     height: 15px;
+        //     border: 1px solid #E4E8F1;
+        //     content: ' ';
+        //     right: -21px;
+        //     top: 5px;
+        // }
+
+        .menu-item-name {
+            margin-left: 8px;
+            color: #737983;
+        }
+        & :global(.ant-tabs-ink-bar) {
+            background: @menu-primary-color!important;
+        }
+        & :global(.ant-tabs-tab-active) {
+            color: @menu-primary-color!important;
+        }
+        & :global(.ant-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
+            color: @menu-primary-color!important;
+        }
+        & :global(.ant-tabs-tab-active svg path) {
+            fill: @menu-primary-color!important;
+        }
+        & :global(.ant-tabs-nav-wrap) {
+            margin-left: 44px;
+        }
+
+        & :global(.ant-dropdown-trigger) {
+            display: flex;
+            align-items: center;
+        }
+        & :global(.ant-tabs-top > .ant-tabs-nav, .ant-tabs-bottom > .ant-tabs-nav, .ant-tabs-top > div > .ant-tabs-nav, .ant-tabs-bottom > div > .ant-tabs-nav) {
+            margin: 0px!important;
+        }
+    }   
+    .ant-page-container {
+        // padding-top: 48px;
+        margin: -24px -24px 0;
+        //    background-color: #fff;
+    }
+    .ant-pro-page-container-warp {
+        background-color: #fff;
+    }
+    .fixedHeader {
+        position: fixed;
+        width: 100%;
+        top:0px;
+        left: 0px;
+        height: 46px;
+        margin: 0px;
+        padding: 0px;
+    }
+
+}
+
+& :global {
+    .ant-dropdown-menu-item {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding: 10px 12px!important;
+        div {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            span:first-child {
+                width: 3px;
+                height: 3px;
+                background: #7A8E9D;
+                /* position: absolute; */
+                display: flex;
+                border-radius: 100%;
+            }
+            span:last-child {
+                padding-left: 10px;
+            }
+        }
+
+        &:hover {
+            span:first-child {
+                background: @menu-primary-color;
+            }
+            span:last-child {
+                color: @menu-primary-color;
+            } 
+        }
+    }
+    .ant-dropdown-menu {
+        .ant-divider-horizontal{
+            &:last-child {
+                display: none;
+            }
+        }
+    }
+}
+& :global {
+    .ant-dropdown-custom-menu {
+        top: 92px!important;
+    }
+}

src/routes/config.js

 import LoadingComponent from '@ant-design/pro-layout/es/PageLoading';
 import { dynamic } from '@wisdom-utils/runtime';
 
-import BasicLayout from '../layouts/BasicLayout';
+import BasicLayout from '../layouts/BasicLayout1';
 import UserLayout from '../layouts/UserLayout';
 import BootPage from '../pages/bootpage';
 import Login from '../pages/user/login';