Merge branch 'master' of https://g.civnet.cn:8443/ReactWeb5/CivWeb

src/layouts/AppLayout/components/SlideMenu/index.js

@@ -120,7 +120,7 @@ const Menu = props => {
                       [`hight-active`]: item.name === activeMenu,
                     })}
                   >
-                    {/.svg/.test(item.extData.icon) ? (
+                    {item.extData.icon=='1'?(<span></span>):/.svg/.test(item.extData.icon) ? (
                       <div className="my-svg">
                         <ReactSVG src={item.extData.icon} style={{ width: '100%', height: '100%' }} />
                       </div>
@@ -138,11 +138,11 @@ const Menu = props => {
               }
               subMenuItemRender={(item, dom) => (
                 <div className={classNames(`test-icon`)}>
-                  {/.svg/.test(item.extData.icon) ? (
+                  {item.extData.icon=='1'?(<span></span>):/.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>

src/layouts/AppLayout/components/TopNavHeader/index.js

+import React, { useContext } from 'react';
+import { ConfigProvider, Tabs, Divider, Menu, Dropdown } from 'antd';
+import Icon, { DownOutlined } from '@ant-design/icons';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { ReactSVG } from 'react-svg';
+import { useHistory } from '@wisdom-utils/runtime';
+import './index.less';
+const { TabPane } = Tabs;
+
+const Index = props => {
+  const history = useHistory();
+  const context = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = props.prefixCls ?? context.getPrefixCls();
+  const { childrenRoutes = [] } = props;
+  const [selectedKey, setSelectedKey] = useMergedState(() => [], {
+    value: props.selectedKey,
+    onChange: props.onHandlerSubmenu,
+  });
+  const [tabActiveKey, setTabActiveKey] = useMergedState(() => '', {
+    value: props.tabActiveKey,
+    onChange: props.onTabChange,
+  });
+
+  React.useEffect(() => {
+    const current = selectedKey[0];
+    if (current) {
+      if (window.__POWERED_BY_QIANKUN__) {
+        window.history.pushState(null, '', `/civbase${current}`);
+      } else {
+        history.push(`/${current}`);
+      }
+    }
+  }, [selectedKey]);
+
+  const onHandleSubmenu = ({ item, key, keyPath, domEvent }) => {
+    setSelectedKey([key]);
+    // window.history.pushState(null, '', `/civbase${key}`);
+  };
+  const renderChildrenMenu = route => {
+    const routes = (route.routes || []).map(item => {
+      item.key = item.href;
+      return item;
+    });
+    const menu = (
+      <Menu selectedKeys={selectedKey} onClick={onHandleSubmenu}>
+        {(routes || []).map((item, index) => {
+          return (
+            <>
+              <Menu.Item key={item.href}>
+                <div>
+                  <span />
+                  <span>{item.name}</span>
+                </div>
+              </Menu.Item>
+              <Divider style={{ width: '80%', minWidth: '80%', margin: '0 auto' }} />
+            </>
+          );
+        })}
+      </Menu>
+    );
+    return (
+      <>
+        <Dropdown overlay={menu} overlayClassName={`${prefixCls}-dropdown-custom-menu`}>
+          <div>
+            {route.extData.icon == '1' ? (
+              <span />
+            ) : /.svg/.test(route.extData.icon) ? (
+              <ReactSVG
+                src={route.extData.icon}
+                style={{ width: '18px', height: '18px', position: 'relative', top: '-3px' }}
+              />
+            ) : (
+              <img src={route.extData.icon} style={{ width: '18px', height: '18px' }} />
+            )}
+            <span style={{ marginLeft: '8px' }}>{route.name} </span>
+            <DownOutlined style={{ position: 'relative', right: '-10px' }} />
+          </div>
+        </Dropdown>
+        <Divider type="vertical" />
+      </>
+    );
+  };
+
+  const onTab = event => {
+    setTabActiveKey(event);
+    if (event.indexOf('web_console') === -1) {
+      if (window.__POWERED_BY_QIANKUN__) {
+        window.history.pushState(null, '', `/civbase${event}`);
+      } else {
+        history.push(event);
+      }
+    }
+  };
+
+  return (
+    <div className={`${prefixCls}-menu-item-children`}>
+      <Tabs activeKey={tabActiveKey} tabBarGutter={30} tabPosition="top" onTabClick={event => onTab(event)}>
+        {childrenRoutes.map((item, index) => (
+          <>
+            <TabPane
+              className="only-last-children"
+              tab={
+                <>
+                  {item.routes ? (
+                    renderChildrenMenu(item)
+                  ) : (
+                    <>
+                      {item.icon ? (
+                        item.icon
+                      ) : item.extData && item.extData.icon == '1' ? (
+                        <span />
+                      ) : /.svg/.test(item.extData.icon) ? (
+                        <ReactSVG src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
+                      ) : (
+                        item.extData && <img src={item.extData.icon} style={{ width: '18px', height: '18px' }} />
+                      )}
+                      <span className={`menu-item-name`}>{item.name}</span>
+                      {childrenRoutes.length === 1 ? null : <Divider type="vertical" />}
+                    </>
+                  )}
+                </>
+              }
+              key={item.path}
+            />
+          </>
+        ))}
+      </Tabs>
+    </div>
+  );
+};
+
+export default Index;

src/layouts/AppLayout/components/TopNavHeader/index.less

+@import '~antd/es/style/themes/default.less';
+@primary-color: #1685ff;
+@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
+@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
+@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
+@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
+@primary-5: color(
+  ~`colorPalette('@{primary-color}', 5) `
+); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
+@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
+@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
+@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
+@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
+@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
+@slider-light: #fff;
+@color-black: #fff;
+@panda-prefix-cls: ~'@{ant-prefix}';
+
+.@{panda-prefix-cls}-menu-item-children {
+  height: 36px;
+  background: #fff;
+  box-shadow: rgb(240 241 242) 0px 2px 8px;
+  position: fixed;
+  top: 46px;
+  width: 100%;
+  z-index: 500;
+  svg {
+    path,
+    rect,
+    circle {
+      fill: #c4cddb;
+      stroke: #c4cddb;
+      box-shadow: 0px 1px 2px 0px rgb(6 0 1 / 50%);
+    }
+  }
+  img {
+    filter: drop-shadow(10px 0px #c4cddb);
+    transform: translateX(-10px);
+  }
+
+  & :global {
+    .@{ant-prefix}-tabs-tab {
+      padding: 7px 0 !important;
+      margin: 0 32px 0 0 !important;
+      &:hover {
+        svg path,
+        svg rect,
+        svg circle {
+          fill: @primary-color!important;
+          stroke: @primary-color!important;
+        }
+        img {
+          filter: drop-shadow(10px 0px @primary-color);
+        }
+        .menu-item-name {
+          color: @primary-color;
+        }
+        .@{ant-prefix}-tabs-tab-btn {
+          color: @primary-color;
+        }
+      }
+      .@{ant-prefix}-tabs-tab-btn {
+        .@{ant-prefix}-dropdown-trigger {
+          div {
+            div {
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+      }
+    }
+  }
+  .menu-item {
+    float: left;
+  }
+  & :global(.@{ant-prefix}-tabs-tab) {
+    display: flex !important;
+  }
+  & :global(.@{ant-prefix}-tabs-tab-btn) {
+    display: flex;
+    position: relative;
+    align-items: center;
+    color: #737983;
+    transform: scale(0.92);
+  }
+  & :global(.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn) {
+    color: @primary-color!important;
+  }
+  & :global(.@{ant-prefix}-tabs-tab-btn > div > div) {
+    display: flex;
+  }
+  & :global(.@{ant-prefix}-tabs-nav::before) {
+    border-bottom: none !important;
+  }
+
+  .menu-item-name {
+    margin-left: 8px;
+    color: #737983;
+    // transition: color .3s;
+    transition: border-color 0.3s, color 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
+    &:hover {
+      color: @primary-color;
+    }
+  }
+  & :global {
+    .@{ant-prefix}-divider-vertical {
+      left: 20px;
+      margin: 0 1px !important;
+    }
+    .@{ant-prefix}-tabs-nav-operations {
+      .ant-tabs-nav-more {
+        margin-right: 0px !important;
+      }
+    }
+  }
+  & :global(.@{ant-prefix}-tabs-ink-bar) {
+    background: @primary-color!important;
+  }
+  & :global(.@{ant-prefix}-tabs-tab-active) {
+    color: @primary-color!important;
+  }
+  & :global(.@{ant-prefix}-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) {
+    color: @primary-color!important;
+  }
+  & :global {
+    .@{ant-prefix}-tabs-tab-active svg path,
+    .@{ant-prefix}-tabs-tab-active svg rect,
+    .@{ant-prefix}-tabs-tab-active svg circle {
+      fill: @primary-color!important;
+      stroke: @primary-color!important;
+    }
+    .@{ant-prefix}-tabs-tab-active img {
+      filter: drop-shadow(10px 0px @primary-color);
+    }
+  }
+  & :global(.@{ant-prefix}-tabs-nav-wrap) {
+    margin-left: 22px;
+  }
+
+  & :global(.@{ant-prefix}-dropdown-trigger) {
+    display: flex;
+    align-items: center;
+  }
+  & :global(.@{ant-prefix}-tabs-nav) {
+    margin: 0px !important;
+  }
+}

src/layouts/AppLayout/layouts/BasicLayout.js

@@ -7,7 +7,7 @@ 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';
-import TopNavHeader from '@wisdom-utils/components/lib/AppLayout/components/TopNavHeader';
+import TopNavHeader from '../components/TopNavHeader';
 import PageContainer from '@wisdom-utils/components/lib/AppLayout/components/PageContainer';
 import { helpers } from '@wisdom-utils/utils';
 import { getBreadcrumbProps } from '@wisdom-utils/components/lib/AppLayout/layouts/utils/getBreadcrumbProps';

src/layouts/BasicLayout.js

@@ -189,6 +189,7 @@ const Layout = props => {
   // const basename = getBaseName();
   const history = useHistory();
   useEffect(() => {
+    siteAction.setGlobalConfig(props.global);
     const tk = Cookies.get('token') || props.global.token;
     const isLogin = tk !== null && tk !== 'undefined' && tk !== (void 0);
     if (!isLogin) {
@@ -231,7 +232,6 @@ const Layout = props => {
 
   useEffect(() => {
     window.share.event.on('updateSite', res => {
-      debugger;
       setCityData(res);
     });
     return () => {

src/layouts/HN.less

@@ -53,8 +53,6 @@
     .ant-menu-inline > .ant-menu-item{
       height: 40px;
       line-height: 40px;
-      margin-top: 4px;
-      margin-bottom: 4px;
       padding: 0 16px;
       line-height: 40px;
       text-overflow: ellipsis;
@@ -230,7 +228,7 @@
       margin: 0 auto;
       margin-top: 4px;
       margin-right: 16px;
-      padding-left: 16px;
+      padding-left: 23px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -247,7 +245,14 @@
     .@{ant-prefix}-menu {
       ul {
         .@{ant-prefix}-menu-item-only-child {
-          padding-left: 26px !important;
+          padding-left: 0 !important;
+          .test-icon{
+            margin-left: 20px;
+            padding-left: 20px!important;
+          }
+          .@{ant-prefix}-menu-title-content{
+            border-radius: 5px;
+          }
         }
       }
     }
@@ -260,7 +265,7 @@
       margin: 0 auto;
       margin-top: 4px;
       margin-right: 16px;
-      padding-left: 16px;
+      padding-left: 23px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
@@ -277,7 +282,14 @@
     .ant-menu {
       ul {
         .ant-menu-item-only-child {
-          padding-left: 26px !important;
+          padding-left: 0 !important;
+          .ant-menu-title-content{
+            border-radius: 5px;
+          }
+          .test-icon{
+             margin-left: 20px;
+             padding-left: 20px!important;
+          }
         }
       }
     }
@@ -286,6 +298,7 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+      padding-left: 6px;
       .my-svg {
         display: inline-block;
         width: 18px;
@@ -322,9 +335,27 @@
       }
     }
     .test-icon:hover{
-      color: #00b278;
+      color:  @hn-greenColor;
       .my-desc {
-        color: #00b278;
+        color: @hn-greenColor;
+      }
+      svg path,
+      svg rect,
+      svg circle {
+        fill: @hn-greenColor !important;
+        stroke: @hn-greenColor !important;
+      }
+    }
+    .hight-active:hover{
+      color:  #fff;
+      .my-desc {
+        color:  #fff;
+      }
+      svg path,
+      svg rect,
+      svg circle {
+        fill: #fff !important;
+        stroke: #fff !important;
       }
     }
 
@@ -343,18 +374,18 @@
       vertical-align: bottom;
     }
     .hight-active {
-      color: @hn-greenColor;
-      // background: @hn-greenColor;
+      color: #fff;
+      background: @hn-greenColor;
       // background: #00b278;
       border-radius: 5px;
       .my-desc {
-        color: #00b278;
+        color: #fff;
       }
       svg path,
       svg rect,
       svg circle {
-        fill: @hn-greenColor !important;
-        stroke: @hn-greenColor !important;
+        fill: #fff !important;
+        stroke: #fff !important;
       }
     }
     .@{ant-prefix}-menu.@{ant-prefix}-menu-dark

src/layouts/Site.js

@@ -361,6 +361,10 @@ class Site {
       window.share && window.share.event && window.share.event.emit('reloadNotice');
       const config = self.globalConfig;
       let url = !config.home ? ((config.homepage === '' || _.isNull(config.homepage)) ? `/civweb4`: `/civweb4/${config.homepage.replace(/^\//, '').replace(/^civweb4\//, '')}`) :  `/${config.homepage.replace(/^\//, '')}`;
+      // 在云平台上，切换前后如果url一致会出问题
+      if(config.userInfo && config.userInfo.site) {
+        url += `${url.indexOf('|') > -1 ? '&' : '|' }__site__=${config.userInfo.site}`;
+      }
       self.props.history && self.props.history.push(url);
       self.props && self.props.updateCollapsed && self.props.updateCollapsed(false);
       window.share.event.emit('triggerMicro', this.props.global);