Merge branch 'dev-hn'

src/components/GlobalHeader/HNRightContent.js

-/*
- * @Author: ZengJing
- * @Date: 2022-04-14 10:25:39
- * @LastEditTime: 2022-04-14 10:30:09
- * @LastEditors: ZengJing
- * @Description:
- * @FilePath: \CivWeb\src\components\GlobalHeader\HNRightContent.js
- */
 import React, { useState, useRef } from 'react';
 import { message } from 'antd';
 import _ from 'lodash';
@@ -13,7 +5,8 @@ import { connect } from 'react-redux';
 import Icon from '@ant-design/icons';
 import classNames from 'classnames';
 import { useHistory } from '@wisdom-utils/runtime';
-import { HeaderSearch, useIntl, AvatarDropdown as Avatar } from '@wisdom-utils/components';
+import { HeaderSearch, useIntl} from '@wisdom-utils/components';
+import { AvatarDropdown as Avatar } from '../../layouts/AppLayout/components/GlobalHeader';
 import { actionCreators } from '../../containers/App/store';
 import styles from './index.less';
 import NoticeIconView from './NoticeIconView';
@@ -70,55 +63,17 @@ const homeSvg = () => (
   </svg>
 );
 
-const favitorSvg = () => (
-  <svg
-    t="1631171489722"
-    className="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="hsla(221, 100%, 95%, 0.7)"
-    />
-  </svg>
-);
-const themeSvg = () => (
-  <svg
-    t="1631362986014"
-    className="icon"
-    viewBox="0 0 1024 1024"
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-  >
-    <path
-      d="M552.75 563.239c44.4 26.348 99.1 26.348 143.5 0C740.65 536.89 768 488.197 768 435.5c0-81.462-64.247-147.5-143.5-147.5S481 354.038 481 435.5c0 52.697 27.35 101.39 71.75 127.739z"
-      fill="hsla(221, 100%, 95%, 0.7)"
-      p-id="2351"
-    />
-    <path
-      d="M471.264 952c-18.842 0-38.581-1.796-60.115-4.49l-5.384-0.899c-152.533-23.352-256.614-171.55-261.1-177.837-147.149-224.541-73.574-451.777 65.5-577.52C348.34 65.511 578.934 11.621 780.814 174.19c130.102 105.085 169.58 250.588 171.375 256.875v1.797c18.843 102.39 3.59 177.836-45.76 226.337-75.368 72.752-200.086 49.4-217.134 45.807-23.328-2.695-40.376 4.49-52.938 19.76-13.458 17.064-16.15 39.518-11.664 52.991 12.562 37.723 14.356 66.464 5.384 88.02C604.058 922.361 551.12 952 471.264 952z m-51.973-80.488l5.083 0.849c82.179 12.72 132.164-3.393 152.497-49.188 0-0.849 4.236-11.873-6.778-45.796-11.013-30.53-2.541-70.39 19.486-97.528 22.875-28.834 56.763-41.556 96.581-37.315l2.542 0.848c0.847 0 105.9 22.898 160.122-29.683 33.04-32.226 43.207-88.199 28.805-166.221-3.39-11.025-39.819-130.603-144.872-214.562-166.053-135.69-356.674-90.743-471.894 13.57-105.9 96.68-183.843 280.71-53.374 480.007 0.848 0 89.804 127.21 211.802 145.02z"
-      fill="hsla(221, 100%, 95%, 0.7)"
-      p-id="2352"
-    />
-    <path
-      d="M203 529c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90-115.235A54 54 0 0 1 266 367c0-29.823 24.177-54 54-54s54 24.177 54 54a54 54 0 0 1-81 46.765zM427 278c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m180 44c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90 144c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z"
-      fill="hsla(221, 100%, 95%, 0.7)"
-    />
-  </svg>
-);
+const favitorSvg = () => (<svg t="1631171489722" className="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="hsla(221, 100%, 95%, 0.7)"></path></svg>);
+const themeSvg = () => (<svg t="1631362986014" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+  <path d="M552.75 563.239c44.4 26.348 99.1 26.348 143.5 0C740.65 536.89 768 488.197 768 435.5c0-81.462-64.247-147.5-143.5-147.5S481 354.038 481 435.5c0 52.697 27.35 101.39 71.75 127.739z" fill="hsla(221, 100%, 95%, 0.7)" p-id="2351"></path>
+  <path d="M471.264 952c-18.842 0-38.581-1.796-60.115-4.49l-5.384-0.899c-152.533-23.352-256.614-171.55-261.1-177.837-147.149-224.541-73.574-451.777 65.5-577.52C348.34 65.511 578.934 11.621 780.814 174.19c130.102 105.085 169.58 250.588 171.375 256.875v1.797c18.843 102.39 3.59 177.836-45.76 226.337-75.368 72.752-200.086 49.4-217.134 45.807-23.328-2.695-40.376 4.49-52.938 19.76-13.458 17.064-16.15 39.518-11.664 52.991 12.562 37.723 14.356 66.464 5.384 88.02C604.058 922.361 551.12 952 471.264 952z m-51.973-80.488l5.083 0.849c82.179 12.72 132.164-3.393 152.497-49.188 0-0.849 4.236-11.873-6.778-45.796-11.013-30.53-2.541-70.39 19.486-97.528 22.875-28.834 56.763-41.556 96.581-37.315l2.542 0.848c0.847 0 105.9 22.898 160.122-29.683 33.04-32.226 43.207-88.199 28.805-166.221-3.39-11.025-39.819-130.603-144.872-214.562-166.053-135.69-356.674-90.743-471.894 13.57-105.9 96.68-183.843 280.71-53.374 480.007 0.848 0 89.804 127.21 211.802 145.02z" fill="hsla(221, 100%, 95%, 0.7)" p-id="2352"></path>
+  <path d="M203 529c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90-115.235A54 54 0 0 1 266 367c0-29.823 24.177-54 54-54s54 24.177 54 54a54 54 0 0 1-81 46.765zM427 278c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m180 44c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z m90 144c0-29.823 24.177-54 54-54s54 24.177 54 54-24.177 54-54 54-54-24.177-54-54z" fill="hsla(221, 100%, 95%, 0.7)"></path></svg>)
 const OrderIcon = props => <Icon component={orderSvg} {...props} />;
 const HomeIcon = props => <Icon component={homeSvg} {...props} />;
-const FavitorIcon = props => <Icon component={favitorSvg} {...props} />;
-const ThemeIcon = props => <Icon component={themeSvg} {...props} />;
-const MESSAGE_BOX_URL = 'product/maintenance/CaseManage/CaseDoingBox/StardCaseDoingBoxView|isDelay=1';
+const FavitorIcon = props => <Icon component={favitorSvg} {...props}/>
+const ThemeIcon = props => <Icon component={themeSvg} {...props}/>
+const MESSAGE_BOX_URL =
+  'product/maintenance/CaseManage/CaseDoingBox/StardCaseDoingBoxView|isDelay=1';
 
 export const getConfig = (widgets, url, key) => {
   let widgetconfig = {};
@@ -127,7 +82,8 @@ export const getConfig = (widgets, url, key) => {
     for (let i = 0; i < widgets.length; i++) {
       const widget = widgets[i];
 
-      if (widget && widget[key]) widget[key] = widget[key].replace(/\\/g, '/').trim();
+      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;
@@ -158,14 +114,14 @@ const GlobalHeaderRight = props => {
   }
   const intl = useIntl();
 
-  console.log('props.global ==', props.global);
+
   const goHome = event => {
     event.stopPropagation();
     let url = _.isString(props.global.get('homepage'))
       ? props.global.get('homepage')
       : props.global.get('homepage.url');
-    if (!props.global.get('home')) {
-      url = `civweb4/${url.replace(/^\//, '').replace(/^civweb4\//, '')}`;
+    if(!props.global.get('home')) {
+      url = `civweb4/${url.replace(/^\//, '').replace(/^civweb4\//, '')}`
     }
     window.share.event.emit('goHome', `/${url}`);
     // url ? (
@@ -176,6 +132,7 @@ const GlobalHeaderRight = props => {
     // ) : null;
   };
 
+
   const handleOrder = event => {
     event.stopPropagation();
     const widgetConfig = getConfig(
@@ -195,18 +152,16 @@ const GlobalHeaderRight = props => {
   const handlerFavitor = event => {
     // setCurrentIndex(1);
     history.push('/commonmenu');
-    window.share &&
-      window.share.event &&
-      window.share.event.emit('event:favitor', {
-        name: '常用',
+    window.share && window.share.event && window.share.event.emit('event:favitor', {
+      name: "常用",
       path: '/commonmenu',
-        icon: <FavitorIcon />,
+      icon: <FavitorIcon/>
     });
-  };
+  }
 
   const handlerTheme = () => {
     window.share.event.emit('event:theme');
-  };
+  }
 
   const handleSelect = (value, data) => {
     window.share.event.emit('addTips', options, data);
@@ -231,7 +186,9 @@ const GlobalHeaderRight = props => {
               item.label = (
                 <>
                   <span>{item.name}</span>
-                  <span style={{ color: '#c1c1c1' }}>{item.district + item.address}</span>
+                  <span style={{ color: '#c1c1c1' }}>
+                    {item.district + item.address}
+                  </span>
                 </>
               );
               return item;
@@ -242,12 +199,11 @@ const GlobalHeaderRight = props => {
         })
       : setOptions([]);
   };
-
   return (
     <div className={className}>
-      {/* <HeaderSearch
+       <HeaderSearch
           className={`${styles.action} ${styles.search} ${styles.extendsearch}`}
-        placeholder={intl.formatMessage({ id: 'component.search.menu.placeholder' })}
+          placeholder={intl.formatMessage({id:'component.search.menu.placeholder'})}
           offset="46px"
           defaultValue=""
           mode="tiled"
@@ -256,39 +212,34 @@ const GlobalHeaderRight = props => {
           onSelect={handleSelect}
           onChange={handleSearch}
           onSearch={handleSearch}
-      /> */}
+      />
       <div className={styles.nav}>
-        {/* <div className={classNames(styles.item)} onClick={goHome} ref={homeRef}>
-          <HomeIcon title={intl.formatMessage({ id: 'component.header.icon.home' })} />
+        <div className={classNames(styles.item)} onClick={goHome} ref={homeRef}>
+            <HomeIcon  title={intl.formatMessage({id: 'component.header.icon.home'})} />
             <span>首页</span>
-        </div> */}
-        {/* {// 云平台去掉常用菜单
-        props.global &&
-        props.global.userInfo &&
-        props.global.userInfo.Groups &&
-        props.global.userInfo.Groups.length ? null : (
+        </div>
+        {
+          // 云平台去掉常用菜单
+          props.global && props.global.userInfo && props.global.userInfo.Groups && props.global.userInfo.Groups.length
+          ? null
+          : (
             <div className={classNames(styles.item)} onClick={handlerFavitor} ref={favitorRef}>
-            <FavitorIcon />
+                <FavitorIcon></FavitorIcon>
                 <span>常用</span>
             </div>
-        )} */}
-        {/* <div className={classNames(styles.item)} onClick={handlerTheme}>
-         <ThemeIcon/>
-         <span>主题</span>
-        </div> */}
-        {/* <div className={classNames(styles.item)}>
-          <OrderIcon onClick={handleOrder} title={intl.formatMessage({ id: 'component.header.icon.order' })} />
+          )
+        }
+        {/*<div className={classNames(styles.item)} onClick={handlerTheme}>*/}
+        {/*  <ThemeIcon/>*/}
+        {/*  <span>主题</span>*/}
+        {/*</div>*/}
+        <div className={classNames(styles.item)}>
+            <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
-        config={props.global}
-        updateCurrentIndex={props.updateCurrentIndex}
-        updateConfig={props.updateConfig}
-        logout={props.logout}
-      />
+      </div>
+      <NoticeIconView title={intl.formatMessage({id: 'component.header.icon.alarm'})} />
+      <Avatar  menu config={props.global} updateCurrentIndex={props.updateCurrentIndex} updateConfig={props.updateConfig} logout={props.logout}/>
     </div>
   );
 };
@@ -315,17 +266,17 @@ const mapDispatchToProps = dispatch => ({
     dispatch(actionCreators.clearRecentProduct());
   },
   updateCurrentIndex(index) {
-    dispatch(actionCreators.updateCurrentIndex(index));
+    dispatch(actionCreators.updateCurrentIndex(index))
   },
   updateConfig(config) {
-    dispatch(actionCreators.getConfig(config));
+    dispatch(actionCreators.getConfig(config))
   },
   updateComplexConfig(config) {
-    dispatch(actionCreators.updateComplexConfig(config));
+    dispatch(actionCreators.updateComplexConfig(config))
   },
   logout() {
-    dispatch(actionCreators.logout());
-  },
+    dispatch(actionCreators.logout())
+  }
 });
 export default connect(
   mapStateToProps,

src/layouts/AppLayout/components/GlobalHeader/AvatarDropdown.js

+import React, { useContext } from 'react';
+import './index.less';
+import { Avatar, ConfigProvider, Form, Input, message, Modal, Popover, Spin, Upload } from 'antd';
+import { withRouter } from 'react-router';
+import { request } from '@wisdom-utils/utils';
+import { FormattedMessage, useIntl } from '@wisdom-utils/components/lib/AppLayout/locales/localeExports';
+
+import globalHeader from '@wisdom-utils/components/lib/AppLayout/locales/zh-CN/globalHeader';
+import { appService } from '@wisdom-utils/components/lib/AppLayout/notifier/api';
+import { API } from '@wisdom-utils/components/lib/AppLayout/notifier/api/service/user';
+// eslint-disable-next-line import/named
+
+const GlobalContext = React.createContext(ConfigProvider.ConfigContext);
+const formItemLayout = {
+  labelCol: {
+    xs: { span: 4 },
+    sm: { span: 4 },
+  },
+};
+
+/* eslint-disable */
+const getIOT = () =>
+  window.globalConfig.loginTemplate === 'Dark - IOTMultiLogin.html' ||
+  window.globalConfig.loginTemplate === '新春 - 智联.html';
+
+class AvatarDropdown extends React.Component {
+  /* eslint-disable no-unused-vars */
+
+  constructor(props) {
+    super(props);
+    let {
+      currentUser = {
+        avatar: this.transformAvatarImage(),
+        name:
+          (props.config && props.config.userInfo && props.config.userInfo.fullName) || 'Serati Ma',
+      },
+    } = this.props;
+    this.state = {
+      currentUser: currentUser,
+      visible: false,
+      popVisible: false,
+      path: null,
+      version: null,
+      action: API.UPLOAD_FILE_URL,
+    };
+  }
+  loginout = (event) => {
+    // eslint-disable-next-line no-undef
+    this.props.logout();
+    if (
+      window.globalConfig.style === 'ios' &&
+      window.globalConfig.loginTemplate === 'IOSCloud.html'
+    ) {
+      window.location.href = `${window.location.origin}/#login`;
+      return false;
+    }
+    // console.log(this.props)
+    // this.props.history.push('/login')
+    // window.location.reload();
+    //
+  };
+
+  getRoles = () => {
+    const roles = this.props.config.userInfo.roles || [];
+    const ret = [];
+    roles.forEach((item) => {
+      ret.push(item.name);
+    });
+    return ret.join(',');
+  };
+
+  showModal = (event) => {
+    event.stopPropagation();
+    this.setState({
+      visible: true,
+    });
+  };
+
+  handleOk = (event, form) => {
+    event.stopPropagation();
+    form
+      .validateFields()
+      .then((res) => {
+        const params = getIOT()
+          ? {
+              newPassword: res.newPwd,
+              phone: window.globalConfig.userInfo.Phone,
+            }
+          : {
+              password: res.oldPwd,
+              newpassword: res.newPwd,
+              token: window.globalConfig.token,
+            };
+        appService
+          .changePassword(params)
+          .then((res) => {
+            if (res.success) {
+              //message.success(useIntl().formatMessage({id: 'component.account.password.update.success'}));
+              message.success(globalHeader['component.account.password.update.success']);
+              setTimeout(() => {
+                this.setState({
+                  visible: false,
+                });
+              }, 300);
+            } else {
+              message.error(
+                useIntl().formatMessage({ id: 'component.account.oldpassword.errorMessage' }),
+              );
+            }
+          })
+          .catch((error) => {
+            message.error(
+              useIntl().formatMessage({ id: 'component.account.password.update.fail' }),
+            );
+          });
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  };
+
+  handleCancel = (event, form) => {
+    event.stopPropagation();
+    form.resetFields();
+    this.setState({
+      visible: false,
+    });
+  };
+
+  transformAvatarImage() {
+    const { userInfo } = this.props.config;
+    const defaultImage = `${window.location.origin}/civweb4/assets/images/icon/熊猫新2.png`;
+    let image = defaultImage;
+    if (userInfo && userInfo.UserImge && userInfo.UserImge.indexOf('个人信息') > -1) {
+      image = `/cityinterface/rest/services/filedownload.svc/download/${userInfo.UserImge}`;
+    } else if (
+      userInfo.UserImge &&
+      userInfo.UserImge !== '' &&
+      userInfo.UserImge !== 'default_user.png'
+    ) {
+      image = userInfo.UserImge;
+    } else if (userInfo.WxImage && userInfo.WxImage !== '') {
+      image = userInfo.WxImage;
+    }
+    return image;
+  }
+
+  beforeUpload(file) {
+    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    if (!isJpgOrPng) {
+      message.error('You can only upload JPG/PNG file!');
+    }
+    const isLt2M = file.size / 1024 / 1024 < 2;
+    if (!isLt2M) {
+      message.error('Image must smaller than 2MB!');
+    }
+    const path = new Date().getTime();
+    this.setState({
+      path: path,
+      action: this.state.action.replace('{path}', path).replace('{filename}', file.name),
+    });
+    return isJpgOrPng && isLt2M;
+  }
+
+  handleChange(data) {
+    console.log(data);
+  }
+
+  componentDidMount() {
+    appService
+      .getVersion({
+        ignoreSite: true,
+      })
+      .then((res) => {
+        if (res.success) {
+          this.setState({
+            version: res.message,
+          });
+        }
+      })
+      .catch((error) => {
+        message.error(useIntl().formatMessage({ id: 'component.getVersion.errorMessage' }));
+      });
+  }
+
+  customRequest = ({
+    action,
+    data,
+    file,
+    filename,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials,
+  }) => {
+    const formData = new FormData();
+    if (data) {
+      Object.keys(data).forEach((key) => {
+        formData.append(key, data[key]);
+      });
+    }
+    formData.append('filedata', file);
+    request(action, {
+      withCredentials,
+      headers: {
+        ...headers,
+        Accept: '*/*',
+        'civ-site': '',
+      },
+      method: 'post',
+      data: formData,
+      ignoreSite: true,
+      onUploadProgress: ({ total, loaded }) => {
+        onProgress({ percent: Math.round((loaded / total) * 100).toFixed(2) }, file);
+      },
+    })
+      .then((res) => {
+        onSuccess(res, file);
+      })
+      .catch(onError);
+    return {
+      abort() {
+        console.log('upload progress is aborted.');
+      },
+    };
+  };
+
+  render() {
+    const self = this;
+    const { props } = this;
+    const { userInfo } = props.config;
+    const site =
+      props.config &&
+      props.config.userInfo &&
+      props.config.userInfo.site &&
+      userInfo.site !== '' &&
+      props.config.client !== 'oms'
+        ? userInfo.site
+        : '';
+    // const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+    // const prefixCls = getPrefixCls();
+    const uploadProps = {
+      action: this.state.action,
+      onStart(file) {
+        console.log('onStart', file, file.name);
+      },
+      onSuccess(res, file) {
+        if (res.success) {
+          const avatarPath = '/个人信息/' + self.state.path + '/' + file.name;
+          const params = {
+            userID: props.config.get('userInfo.OID'),
+            loginName: props.config.get('userInfo.loginName'),
+            userName: props.config.get('userInfo.fullName'),
+            _version: self.state.version,
+            mark: props.config.get('userInfo.Mark'),
+            phone: props.config.get('userInfo.Phone'),
+            email: props.config.get('userInfo.Email'),
+            userImage: decodeURIComponent(avatarPath),
+            WXid: props.config.get('userInfo.WXid'),
+          };
+
+          appService
+            .updateAvatar(params)
+            .then((res) => {
+              if (res.success) {
+                // message.success(useIntl().formatMessage({id: 'component.avatar.update.success'}));
+                message.success(globalHeader['component.avatar.update.success']);
+                self.setState({
+                  currentUser: {
+                    name: self.state.currentUser.name,
+                    avatar: `${API.AVATAR_FILE_URL}${avatarPath}`,
+                    action: API.UPLOAD_FILE_URL,
+                  },
+                });
+              }
+            })
+            .catch((e) => {
+              message.error(useIntl().formatMessage({ id: 'component.avatar.update.fail' }));
+            });
+        } else {
+          message.error(res.message);
+        }
+      },
+      onError(err) {
+        console.log('onError', err);
+      },
+      onProgress({ percent }, file) {
+        console.log('onProgress', `${percent}%`, file.name);
+      },
+      customRequest: this.customRequest.bind(this),
+      beforeUpload: this.beforeUpload.bind(this),
+      onChange: this.handleChange.bind(this),
+    };
+    const currentUser = this.state.currentUser;
+    const menuHeaderDropdown = (prefixCls) => (
+      <div className={`${prefixCls}-userWrapper-userInfo`}>
+        <div className={`${prefixCls}-userWrapper-userInfo-header`} style={{background:'#00b278'}}>
+          <Upload
+            className="avatar-uploader"
+            {...uploadProps}
+            maxCount={1}
+            itemRender={() => <></>}
+          >
+            <div
+              className={`${prefixCls}-userWrapper-userInfo-header-avatar`}
+              style={{ backgroundImage: `url(${currentUser.avatar})` }}
+            />
+          </Upload>
+          <div className={`${prefixCls}-userWrapper-userInfo-header-name`}>{userInfo.fullName}</div>
+        </div>
+        <div className={`${prefixCls}-userWrapper-userInfo-body`}>
+          <div className={`${prefixCls}-userWrapper-userInfo-body-item`}>
+            <ul>
+              <li>
+                <span />
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
+                  <FormattedMessage id="component.avatar.account" />：
+                </span>
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
+                  {userInfo.loginName}
+                </span>
+              </li>
+              <li>
+                <span />
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
+                  <FormattedMessage id="component.avatar.name" />：
+                </span>
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
+                  {userInfo.fullName}
+                </span>
+              </li>
+              <li>
+                <span />
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
+                  <FormattedMessage id="component.avatar.depart" />：
+                </span>
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
+                  {userInfo && userInfo.depart && userInfo.depart.name}
+                </span>
+              </li>
+              <li>
+                <span />
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
+                  <FormattedMessage id="component.avatar.role" />：
+                </span>
+                <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
+                  {this.getRoles()}
+                </span>
+              </li>
+              {site ? (
+                <li>
+                  <span />
+                  <span className={`${prefixCls}-userWrapper-userInfo-body-item-label`}>
+                    <FormattedMessage id="component.siteCode" />：
+                  </span>
+                  <span className={`${prefixCls}-userWrapper-userInfo-body-item-value`}>
+                    {userInfo.site}
+                  </span>
+                </li>
+              ) : null}
+            </ul>
+          </div>
+          <div className={`${prefixCls}-userWrapper-userInfo-body-exit`}>
+            {userInfo && userInfo.site === '' && (
+              <a onClick={(event) => this.showModal(event)}>
+                <FormattedMessage id="component.password.update" />
+              </a>
+            )}
+
+            <a onClick={this.loginout}>
+              <FormattedMessage id="component.exit.login" />
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+
+    return currentUser && currentUser.name ? (
+      <GlobalContext.Consumer>
+        {(value) => {
+          const { getPrefixCls } = value._currentValue;
+          const prefixCls = getPrefixCls();
+          return (
+            <>
+              <Popover
+                overlayClassName={`${prefixCls}-userWrapper`}
+                placement="bottom"
+                trigger="click"
+                content={
+                  props.config && props.config.userInfo ? menuHeaderDropdown(prefixCls) : null
+                }
+              >
+                <span
+                  className={`${prefixCls}-action ${prefixCls}-account`}
+                  ref={(r) => (this.avatarRef = r)}
+                >
+                  <Avatar
+                    size="small"
+                    className={`${prefixCls}-account-avatar`}
+                    src={currentUser.avatar}
+                    alt="avatar"
+                  />
+                  {/* <span className={`${styles.name} anticon`}>{currentUser.name}</span> */}
+                </span>
+              </Popover>
+              <Modal
+                title="修改密码"
+                centered
+                width="480px"
+                visible={this.state.visible}
+                wrapClassName={`${prefixCls}-updatePassword`}
+                cancelText="取消"
+                okText="确定"
+                onOk={(event) => this.handleOk(event, this.form)}
+                onCancel={(event) => this.handleCancel(event, this.form)}
+                zIndex={2000}
+              >
+                <Form labelAlign="right" {...formItemLayout} ref={(f) => (this.form = f)}>
+                  {!getIOT() && (
+                    <Form.Item
+                      name="oldPwd"
+                      label="原密码"
+                      rules={[
+                        {
+                          required: true,
+                          message: '请输入原始密码',
+                        },
+                      ]}
+                      hasFeedback
+                    >
+                      <Input.Password />
+                    </Form.Item>
+                  )}
+                  <Form.Item
+                    name="newPwd"
+                    label="新密码"
+                    rules={[
+                      {
+                        required: true,
+                        message: '请输入新密码',
+                      },
+                      {
+                        pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/,
+                        message: '密码字符长度为8-16个字符',
+                      },
+                    ]}
+                    hasFeedback
+                  >
+                    <Input.Password />
+                  </Form.Item>
+                  <Form.Item
+                    name="confirmPwd"
+                    label="确认密码"
+                    dependencies={['newPwd']}
+                    hasFeedback
+                    rules={[
+                      {
+                        required: true,
+                        message: '请输入确认密码',
+                      },
+                      ({ getFieldValue }) => ({
+                        validator(rule, value) {
+                          if (!value || getFieldValue('newPwd') === value) {
+                            return Promise.resolve();
+                          }
+                          return Promise.reject('确认密码与新密码输入不一致');
+                        },
+                      }),
+                    ]}
+                  >
+                    <Input.Password />
+                  </Form.Item>
+                </Form>
+              </Modal>
+            </>
+          );
+        }}
+      </GlobalContext.Consumer>
+    ) : (
+      <GlobalContext.Consumer>
+        {(value) => {
+          const { getPrefixCls } = value._currentValue;
+          const prefixCls = getPrefixCls();
+          return (
+            <span className={`${prefixCls}-action ${prefixCls}-account`}>
+              <Spin
+                size="small"
+                style={{
+                  marginLeft: 8,
+                  marginRight: 8,
+                }}
+              />
+            </span>
+          );
+        }}
+      </GlobalContext.Consumer>
+    );
+  }
+}
+
+export default withRouter(AvatarDropdown);

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

+import AvatarDropdown from './AvatarDropdown';
+
+export { AvatarDropdown };

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

+@import '~antd/es/style/themes/default.less';
+@pro-header-hover-bg: rgba(0, 0, 0, 0.025);
+@panda-prefix-cls: ~'@{ant-prefix}';
+.@{panda-prefix-cls}-action {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 9px;
+  cursor: pointer;
+  transition: all 0.3s;
+  > span {
+    vertical-align: middle;
+    margin: 0 8px 0 0 !important;
+  }
+  &:hover {
+    background: @pro-header-hover-bg;
+  }
+  &:global(.opened) {
+    background: @pro-header-hover-bg;
+  }
+}
+.@{panda-prefix-cls}-account {
+  &-avatar {
+    margin: ~'calc((@{layout-header-height} - 24px) / 2)' 0;
+    // margin-right: 8px;
+    color: @primary-color;
+    vertical-align: top;
+    background: rgba(255, 255, 255, 0.85);
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+    transition: box-shadow 0.1s linear, opacity 0.4s linear;
+    background-position: center;
+    overflow: hidden;
+  }
+}
+
+.@{panda-prefix-cls}-userWrapper {
+  &-userInfo {
+    background-color: #fff;
+    width: 300px;
+    position: absolute;
+    right: 0;
+    top: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+    border-radius: 6px;
+    &-header {
+      width: 100%;
+      height: 80px;
+      position: relative;
+      background: #40b3f7;
+      padding: 14px 12px;
+      display: flex;
+      border-top-left-radius: 6px;
+      border-top-right-radius: 6px;
+      &-avatar {
+        display: inline-block;
+        width: 52px;
+        height: 52px;
+        border: 2px solid #fff;
+        background-color: #fff;
+        border-radius: 50%;
+        background-size: 100%;
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-position: center;
+        cursor: pointer;
+      }
+      &-name {
+        display: inline-block;
+        width: 214px;
+        font-size: 18px;
+        color: #fff;
+        font-weight: bold;
+        padding: 14px;
+      }
+    }
+    &-body {
+      &-item {
+        border-bottom: 1px solid #e0e0e0;
+        ul {
+          padding: 0 12px;
+          list-style: none;
+          margin: 0;
+          li {
+            height: 40px;
+            line-height: 42px;
+            border-bottom: 1px dashed #eee;
+            position: relative;
+            text-indent: 3px;
+            overflow: hidden;
+            width: 100%;
+            font-size: 12px;
+            font-weight: 100;
+            &-label {
+              padding: 0 2px;
+              max-width: 200px;
+            }
+            &-value {
+              padding: 0 2px;
+              max-width: 200px;
+            }
+          }
+        }
+      }
+      &-exit {
+        height: 30px;
+        line-height: 30px;
+        text-align: right;
+        padding: 0 10px;
+        a {
+          color: #777;
+          text-decoration: none;
+          margin: 0 5px;
+          &:hover {
+            color: @primary-7;
+          }
+        }
+      }
+    }
+  }
+}
+
+.@{panda-prefix-cls}-updatePassword {
+  :global(.@{ant-prefix}-modal-header) {
+    padding: 10px 24px !important;
+  }
+  :global(.@{ant-prefix}-modal-close .@{ant-prefix}-modal-close-x) {
+    width: 45px;
+    height: 45px;
+    font-size: 12px;
+    line-height: 35px;
+  }
+  :global(.@{ant-prefix}-modal-body) {
+    padding: 10px 24px;
+  }
+  :global(.@{ant-prefix}-modal-footer) {
+    padding: 8px 12px;
+  }
+  :global(.@{ant-prefix}-modal-footer .@{ant-prefix}-btn) {
+    line-height: 1.2px;
+    height: 28px;
+  }
+}

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

@@ -59,10 +59,7 @@ const Menu = props => {
     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 =>

src/layouts/HN.less

 @hn-greenColor: #00b278;
-:global {
-  .panda-console-base-userWrapper-userInfo-header {
-    //右上角弹框
-    // background-color: @hn-greenColor;
-  }
-}
+
 .hnlayout {
   :global {
+    .panda-console-base-global-page-header-header {
+      padding-left: 0;
+    }
     .panda-console-base-global-page-header-header-logo {
+      width: 140px;
+      padding-left: 0;
       & > img {
-        width: 144px !important;
+        width: auto !important;
         height: 36px;
+        margin: 0 auto;
       }
     }
     .panda-console-base-global-page-header {

src/layouts/HNLayout.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { useHistory } from '@wisdom-utils/runtime';
 import KeepAlive from 'react-activation';
 import AMapLoader from '@amap/amap-jsapi-loader';
-import RightContent from '@/components/GlobalHeader/ExtendRightContent';
+import RightContent from '@/components/GlobalHeader/HNRightContent';
 import defaultSetting from '@wisdom-utils/components/lib/AppLayout/layouts/defaultSettings';
 import { actionCreators } from '@/containers/App/store';
 import BasicLayout from './AppLayout/layouts/BasicLayout';
@@ -260,9 +260,10 @@ const Layout = props => {
       <div className={styls.hnlayout}>
         <BasicLayout
           route={props.route}
-          title={props.global.subtitle}
+          title={props.global.title}
           siderWidth={140}
           logo={logo}
+          // logo={require('@/assets/basic/HN-logo.png')}
           config={props.global}
           currentMenuIndex={props.currentMenuIndex}
           onHeaderLogo={handlerIndustry}