global menu search

.eslintrc.js

@@ -67,7 +67,7 @@ module.exports = {
     'newline-per-chained-call': 0,
     'no-confusing-arrow': 0,
     'no-console': 1,
-    'no-unused-vars': 2,
+    'no-unused-vars': 0,
     'no-use-before-define': 0,
     'prefer-template': 2,
     'react/jsx-wrap-multilines': 0,
@@ -96,6 +96,7 @@ module.exports = {
     'redux-saga/no-yield-in-race': 2,
     'redux-saga/yield-effects': 2,
     'require-yield': 0,
+
   },
   settings: {
     'import/resolver': {

config/dist/proxy.dev.js

@@ -4,9 +4,9 @@ module.exports = {
   dev: {
     '/CityInterface': {
       // target: 'http://192.168.10.151:8055',
-      // target: 'https://panda-water.cn',
+      target: 'https://panda-water.cn',
       // target: 'http://192.168.19.103:8112',
-      target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.12.8:8098',
       changeOrigin: true,
       headers: {
         'Access-Control-Allow-Origin': '*'
@@ -17,8 +17,8 @@ module.exports = {
     },
     '/cityinterface': {
       // target: 'http://192.168.10.151:8055',
-      // target: 'https://panda-water.cn',
-      target: 'http://192.168.12.8:8098',
+      target: 'https://panda-water.cn',
+      // target: 'http://192.168.12.8:8098',
       changeOrigin: true,
       headers: {
         'Access-Control-Allow-Origin': '*'

config/proxy.js

@@ -2,9 +2,9 @@ module.exports = {
   dev: {
     '/CityInterface': {
       // target: 'http://192.168.10.151:8055',
-      // target: 'https://panda-water.cn',
+      target: 'https://panda-water.cn',
       // target: 'http://192.168.19.103:8112',
-      target: 'http://192.168.12.8:8098',
+      // target: 'http://192.168.12.8:8098',
       changeOrigin: true,
       headers: {
         'Access-Control-Allow-Origin': '*',
@@ -15,8 +15,8 @@ module.exports = {
     },
     '/cityinterface': {
       // target: 'http://192.168.10.151:8055',
-      // target: 'https://panda-water.cn',
-      target: 'http://192.168.12.8:8098',
+      target: 'https://panda-water.cn',
+      // target: 'http://192.168.12.8:8098',
       changeOrigin: true,
       headers: {
         'Access-Control-Allow-Origin': '*',

package.json

@@ -101,10 +101,13 @@
     "kit_utils": "^1.3.6",
     "lodash": "4.17.11",
     "minimist": "1.2.0",
+    "mqtt-client": "^1.0.11",
+    "pinyin-match": "^1.1.1",
     "prop-types": "15.7.2",
     "qrcode.react": "^1.0.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
+    "react-draggable": "^4.4.3",
     "react-helmet": "6.0.0-beta",
     "react-intl": "2.8.0",
     "react-redux": "7.0.2",
@@ -189,6 +192,7 @@
     "lodash": "^4.17.11",
     "mockjs": "^1.0.1-beta3",
     "moment": "^2.25.3",
+    "mousetrap": "^1.6.5",
     "nanoid": "^3.1.16",
     "ngrok": "3.1.1",
     "node-plop": "0.18.0",

src/api/apiConfig.js

@@ -24,6 +24,7 @@ class HttpRequest {
         // ------------------------------------------------------------------------------------
         if (!config.ignoreSite && this.getSite()) {
           config.headers['civ-site'] = this.getSite();
+          // config.headers['civ-site'] = "192_168_19_105_site_c8de50fc";
         }
         this.removePending(config); //在一个ajax发送前执行一下取消操作
         config.cancelToken = new cancelToken(c => {

src/api/baseService.js

@@ -8,11 +8,12 @@ const API = {
   GET_USER_INFO: '/CityInterface/rest/services.svc/getUserInfo',
   GET_OA: '/CityInterface/rest/services/OA.svc/getLoginInfo',
   GET_LOGS: '/CityInterface/rest/services/portal.svc/OMMonitor/SaveLoginInfo',
-  GET_INFORMATION:
-    '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/GetInformationInfo',
+  GET_INFORMATION:'/CityInterface/rest/services/CountyProduct.svc/SCADAOper/GetInformationInfo',
+  GET_MQTT_SITE_CODE:'/CityInterface/rest/services/CountyProduct.svc/SCADAOper/getMqttSitecode',
   GET_CITY: 'https://pv.sohu.com/cityjson?ie=utf-8',
-  GET_ALL_GROUPS_INFO_FORUSER: 'CityInterface/rest/Services/Portal.svc/AuthorityManage/GetAllGroupsInfoForUser',
-  GET_WEATHER: '/CityInterface/rest/services/CountyProduct.svc/GetWeather'
+  GET_ALL_GROUPS_INFO_FORUSER:
+    'CityInterface/rest/Services/Portal.svc/AuthorityManage/GetAllGroupsInfoForUser',
+  GET_WEATHER: '/CityInterface/rest/services/CountyProduct.svc/GetWeather',
 };
 export default vm => {
   vm.getConfig = (
@@ -38,11 +39,19 @@ export default vm => {
   vm.getInformationInfo = (data = {}) =>
     vm.get(API.GET_INFORMATION, data).then(res => Promise.resolve(res));
 
-  vm.getCity = () => vm.get(API.GET_CITY).then(res => Promise.resolve(res))  
+  vm.getMqttSiteCode = (data = {}) =>
+    vm.get(API.GET_MQTT_SITE_CODE, data).then(res => Promise.resolve(res));
 
   vm.generateTokenQuick = (data={}, config = {}) => vm.get(API.GENERATE_TOKEN_CHANGE, data, config).then(res => Promise.resolve(res))
 
-  vm.getAllGroupsInfoForUser = (data = {}, config) => vm.get(API.GET_ALL_GROUPS_INFO_FORUSER, data, config).then(res => Promise.resolve(res))
+  vm.generateTokenQuick = (data = {}) =>
+    vm.get(API.GENERATE_TOKEN_CHANGE, data).then(res => Promise.resolve(res));
 
-  vm.getWeather = (data={}, config = {}) => vm.get(API.GET_WEATHER, data, config).then(res => Promise.resolve(res))
+  vm.getAllGroupsInfoForUser = (data = {}, config) =>
+    vm
+      .get(API.GET_ALL_GROUPS_INFO_FORUSER, data, config)
+      .then(res => Promise.resolve(res));
+
+  vm.getWeather = (data = {}, config) =>
+    vm.get(API.GET_WEATHER, data, config).then(res => Promise.resolve(res));
 };

src/api/dist/baseService.dev.js

@@ -16,6 +16,7 @@ var API = {
   GET_OA: '/CityInterface/rest/services/OA.svc/getLoginInfo',
   GET_LOGS: '/CityInterface/rest/services/portal.svc/OMMonitor/SaveLoginInfo',
   GET_INFORMATION: '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/GetInformationInfo',
+  GET_MQTT_SITE_CODE: '/CityInterface/rest/services/CountyProduct.svc/SCADAOper/getMqttSitecode',
   GET_CITY: 'https://pv.sohu.com/cityjson?ie=utf-8',
   GET_ALL_GROUPS_INFO_FORUSER: 'CityInterface/rest/Services/Portal.svc/AuthorityManage/GetAllGroupsInfoForUser',
   GET_WEATHER: '/CityInterface/rest/services/CountyProduct.svc/GetWeather'
@@ -79,8 +80,9 @@ var _default = function _default(vm) {
     });
   };
 
-  vm.getCity = function () {
-    return vm.get(API.GET_CITY).then(function (res) {
+  vm.getMqttSiteCode = function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return vm.get(API.GET_MQTT_SITE_CODE, data).then(function (res) {
       return Promise.resolve(res);
     });
   };
@@ -93,6 +95,13 @@ var _default = function _default(vm) {
     });
   };
 
+  vm.generateTokenQuick = function () {
+    var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    return vm.get(API.GENERATE_TOKEN_CHANGE, data).then(function (res) {
+      return Promise.resolve(res);
+    });
+  };
+
   vm.getAllGroupsInfoForUser = function () {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     var config = arguments.length > 1 ? arguments[1] : undefined;
@@ -103,7 +112,7 @@ var _default = function _default(vm) {
 
   vm.getWeather = function () {
     var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var config = arguments.length > 1 ? arguments[1] : undefined;
     return vm.get(API.GET_WEATHER, data, config).then(function (res) {
       return Promise.resolve(res);
     });

src/app.js

@@ -19,6 +19,7 @@ import {
 import { Provider } from 'react-redux';
 
 import Http from './api';
+import Container from './components/Container';
 import configureStore from './configureStore';
 import App from './containers/App';
 import { actionCreators } from './containers/App/store';
@@ -29,13 +30,14 @@ window.createStoreage = new Storeage('PANDA_STORE');
 window.Http = Http;
 const initialState = Immutable.Map();
 const store = configureStore(initialState, history);
-
 const MOUNT_NODE = document.getElementById('app');
 const render = () => {
   ReactDOM.render(
     <Provider store={store}>
       <ConnectedRouter history={history}>
+        <Container>
           <App />
+        </Container>
       </ConnectedRouter>
     </Provider>,
     MOUNT_NODE,
@@ -80,6 +82,7 @@ const initGlobalConfig = () => {
     initMicroApps();
   }
 };
+
 window.share &&
   window.share.event &&
   window.share.event.on('triggerMicro', () => {

src/components/Container/HandlerMap.js

+import React from 'react';
+
+import mousetrap from 'mousetrap';
+import propTypes from 'prop-types';
+
+export default class HandlerMap extends React.Component {
+  componentDidMount() {
+    const keyHandlerMap = this.props.keyHandlerMap;
+    if (keyHandlerMap) {
+      const mouse = (this.mousetrap = mousetrap);
+      let c = !0;
+      let d = !1;
+      let e = void 0;
+      try {
+        for (
+          var f, g = keyHandlerMap.entries()[Symbol.iterator]();
+          !(c = (f = g.next()).done);
+          c = !0
+        ) {
+          var value = f.value;
+          mouse.bind(value[0], value[1]);
+        }
+      } catch (e) {
+        d = !0;
+        e = mouse;
+      } finally {
+        try {
+          !c && g.return && g.return();
+        } finally {
+          if (d) {
+            throw e;
+          }
+        }
+      }
+    }
+  }
+
+  componentWillUnmount() {
+      this.mousetrap && this.mousetrap.reset() && (this.mousetrap = null);
+  }
+
+  render() {
+      return this.props.children
+  }
+}
+
+HandlerMap.propTypes = {
+    keyHandlerMap: propTypes.object,
+    children: propTypes.node
+}

src/components/Container/dist/HandlerMap.dev.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _mousetrap = _interopRequireDefault(require("mousetrap"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var HandlerMap =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(HandlerMap, _React$Component);
+
+  function HandlerMap() {
+    _classCallCheck(this, HandlerMap);
+
+    return _possibleConstructorReturn(this, _getPrototypeOf(HandlerMap).apply(this, arguments));
+  }
+
+  _createClass(HandlerMap, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var keyHandlerMap = this.props.keyHandlerMap;
+
+      if (keyHandlerMap) {
+        var mouse = this.mousetrap = _mousetrap["default"];
+        var c = !0;
+        var d = !1;
+        var e = void 0;
+
+        try {
+          for (var f, g = keyHandlerMap.entries()[Symbol.iterator](); !(c = (f = g.next()).done); c = !0) {
+            var value = f.value;
+            mouse.bind(value[0], value[1]);
+          }
+        } catch (e) {
+          d = !0;
+          e = mouse;
+        } finally {
+          try {
+            !c && g["return"] && g["return"]();
+          } finally {
+            if (d) {
+              throw e;
+            }
+          }
+        }
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.mousetrap && this.mousetrap.reset() && (this.mousetrap = null);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return this.props.children;
+    }
+  }]);
+
+  return HandlerMap;
+}(_react["default"].Component);
+
+exports["default"] = HandlerMap;
+HandlerMap.propTypes = {
+  keyHandlerMap: _propTypes["default"].object,
+  children: _propTypes["default"].node
+};
\ No newline at end of file

src/components/Container/dist/index.dev.js

+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+var Container =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(Container, _React$Component);
+
+  function Container() {
+    var _this;
+
+    _classCallCheck(this, Container);
+
+    _this.oms = _this.oms.bind(_assertThisInitialized(_this));
+    _this.keyHandlerMap = new Map([[['alt+c', 'option+c'], _this.copy]]);
+    return _possibleConstructorReturn(_this);
+  }
+
+  _createClass(Container, [{
+    key: "oms",
+    value: function oms() {}
+  }]);
+
+  return Container;
+}(_react["default"].Component);
+
+exports["default"] = Container;
\ No newline at end of file

src/components/Container/index.js

+import React from 'react';
+
+import HandlerMap from './HandlerMap';
+
+export default class Container extends React.Component {
+    constructor(props) {
+        super(props);
+        this.oms = this.oms.bind(this);
+        this.keyHandlerMap = new Map([
+            [['alt+c', 'option+c'], this.oms]
+        ])
+    }
+
+    oms(event) {
+        const omsUrl = [
+            window.location.protocol + '/',
+            window.location.host,
+            'cityoms3/4.0.html',
+          ].join('/');
+        window.open(omsUrl, '_blank');
+    }
+
+    render() {
+        return (
+            <HandlerMap keyHandlerMap={this.keyHandlerMap}>
+                {
+                    this.props.children
+                }
+            </HandlerMap>
+        )
+    }
+}
\ No newline at end of file

src/components/GlobalHeader/AvatarDropdown.js

@@ -57,6 +57,7 @@ class AvatarDropdown extends React.Component {
           'Serati Ma',
       },
     } = this.props;
+
     const menuHeaderDropdown = (
       <div className={styles.userInfo}>
         <div className={styles.header}>

src/components/GlobalHeader/NoticeIconView.js

@@ -8,6 +8,7 @@ import moment from 'moment';
 import { connect } from 'react-redux';
 
 import NoticeIcon from '../NoticeIcon';
+import Notifier from '../Notifier';
 import styles from './index.less';
 
 class NoticeIconView extends Component {
@@ -15,25 +16,24 @@ class NoticeIconView extends Component {
     count: 0,
     noticeData: [],
   };
-  componentDidMount() {
-    // Http.getInformationInfo({
-    //   userID: this.props.global.userInfo.OID,
-    //   pageIndex: 1,
-    //   pageSize: 10,
-    //   'request.preventCache': Date.now(),
-    // }).then(res => {
-    //   this.setState({
-    //     count: res.totalRcdNum,
-    //     noticeData: res.getMe,
-    //   });
-    // });
+  async componentDidMount() {
+    let notifier = new Notifier(this.props.global.userInfo);
+    notifier.subscribe("NEW_MESSAGE",this.onNewMessage.bind(this));
+    notifier.start();
+
   }
 
+  onNewMessage = messages => {
+    this.setState({
+      count:messages.totalCount,
+      noticeData:messages.messages
+    })
+  };
+
   /* eslint-disable no-unused-vars */
   changeReadState = clickedItem => {};
 
   /* eslint-disable no-unused-vars */
-
   handleNoticeClear = (title, key) => {};
 
   getNoticeData = () => {
@@ -86,7 +86,7 @@ class NoticeIconView extends Component {
     return (
       <NoticeIcon
         className={styles.action}
-        count={this.state.count}
+        count={this.state.count > 99 ? 99 : this.state.count}
         onItemClick={item => {
           this.changeReadState(item);
         }}

src/components/GlobalHeader/RightContent.js

@@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom';
 
 import Icon from '@ant-design/icons';
 
+import { actionCreators } from '../../containers/App/store';
 // import { searchAutoCity } from '../../api/jsonp/autoService';
 import HeaderSearch from '../HeaderSearch';
 // import NoticeIcon from '../NoticeIcon';
@@ -46,7 +47,7 @@ const HomeIcon = props => <Icon component={homeSvg} {...props}/>
 const MESSAGE_BOX_URL = 'product/maintenance/CaseManage/CaseDoingBox/StardCaseDoingBoxView|isDelay=1'
 
 const getConfig = (widgets, url) => {
-  const widgetconfig = {};
+  let widgetconfig = {};
   if(!widgets) {
     return
   } else {
@@ -129,9 +130,10 @@ const GlobalHeaderRight = props => {
     <div className={className}>
       <HeaderSearch
         className={`${styles.action} ${styles.search}`}
-        placeholder="搜索位置"
+        placeholder="搜索菜单"
         defaultValue=""
         options={options}
+        {...props}
         onSelect={handleSelect}
         onChange={handleSearch}
         onSearch={handleSearch}
@@ -150,9 +152,30 @@ const GlobalHeaderRight = props => {
 const mapStateToProps = state => {
   return {
     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 => {
+  return {
+    updateRecentKeywords(keyword) {
+      dispatch(actionCreators.updateRecentKeywords(keyword));
+    },
+    updateRecentVisited(history) {
+      dispatch(actionCreators.updateRecentVisited(history));
+    },
+    updateRecentProduct(history) {
+      dispatch(actionCreators.updateRecentProduct(history));
+    },
+    clearRecentProduct() {
+      dispatch(actionCreators.clearRecentProduct())
+    }
+  }
+}
 export default connect(
   mapStateToProps,
-  null,
+  mapDispatchToProps,
 )(withRouter(GlobalHeaderRight));

src/components/GlobalHeader/dist/address.dev.js

-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createAddress = createAddress;
-exports.ERROR_OK = void 0;
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Address = function Address(_ref) {
-  var id = _ref.id,
-      adcode = _ref.adcode,
-      address = _ref.address,
-      city = _ref.city,
-      district = _ref.district,
-      name = _ref.name,
-      typecode = _ref.typecode;
-
-  _classCallCheck(this, Address);
-
-  this.id = id;
-  this.adcode = adcode;
-  this.address = address;
-  this.city = city;
-  this.district = district;
-  this.name = name;
-  this.typecode;
-};
-
-var ERROR_OK = '10000';
-exports.ERROR_OK = ERROR_OK;
-
-function createAddress(data) {
-  return new Address({
-    id: data.id,
-    adcode: data.adcode,
-    address: data.address,
-    city: data.city,
-    district: data.district,
-    name: data.name,
-    typecode: data.typecode
-  });
-}
\ No newline at end of file

src/components/HeaderSearch/index.js

-import React, { useRef } from 'react';
+import React, {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 
-import {
-  AutoComplete,
-  Input,
-} from 'antd';
+import { Input } from 'antd';
 import classNames from 'classnames';
+import PinyinMatch from 'pinyin-match';
 import PropType from 'prop-types';
 import useMergeValue from 'use-merge-value';
 
 import { SearchOutlined } from '@ant-design/icons';
 
 import styles from './index.less';
+import SearchPanel from './panel';
 
 const HeaderSearch = props => {
   const {
@@ -20,11 +23,19 @@ const HeaderSearch = props => {
     placeholder,
     open,
     defaultOpen,
+    menu,
     ...restProps
   } = props;
 
   const inputRef = useRef(null);
-
+  const wrapperRef = useRef(null)
+  const [keyword, setKeyword] = useState("");
+  const [willSearch, setWillSearch] = useState([]); 
+  const [willMenu, setWillMenu] = useState([]);
+  const [focus, setFocus] = useState(false);
+  const [isShowWidget, setIsShowWidget] = useState(false);
+  const [visiblePanel, setVisiblePanel] = useState(false);
+  const [targetOffset, setTargetOffset] = useState(0)
   const [value, setValue] = useMergeValue(defaultValue, {
     value: props.value,
     onChange: props.onChange,
@@ -36,18 +47,76 @@ const HeaderSearch = props => {
   });
 
   const inputClass = classNames(styles.input, styles.search, {
-    // [styles.show]: searchMode,
+    [styles.show]: searchMode,
+  });
+
+  const onMouseEnter = () => {
+    // setFocus(true)
+    // setVisiblePanel(true)
+  }
+
+  const onMouseLeave = () => {
+    // setVisiblePanel(false)
+    // setFocus(false)
+  }
+  const onFocusChange = (event) => {
+      event.persist && event.persist()
+      event && event.stopPropagation();
+      setVisiblePanel(true)
+      // inputRef.current.blur();
+      // setIsShowWidget(true)
+  }
+  const onSearch = (event) => {
+    event.persist && event.persist()
+    setKeyword(event.target.value)
+    let ret = [];
+    let menu = [];
+    (props.flatMenu || []).forEach(item => {
+      if(PinyinMatch.match(item.name, event.target.value)) {
+        ret.push(item)
+      }
     });
+    setWillSearch(ret);
+    (props.menu || []).forEach(item => {
+      if(PinyinMatch.match(item.name, event.target.value)) {
+        menu.push(item)
+      }
+    })
+    setWillMenu(menu);
+  }
+
+  useEffect(() => {
+    setTargetOffset(wrapperRef.current.offsetLeft)
+    window.addEventListener('resize', () => {
+      setTargetOffset(wrapperRef.current.offsetLeft)
+    })
+    return () => {
+      window.removeEventListener('resize', () => setTargetOffset(wrapperRef.current.offsetLeft))
+    }
+  }, [wrapperRef]);
+
+  const onWillSearch = (keyword) => {
+    // setKeyword(keyword);
+    onSearch({
+      target: {
+        value: keyword
+      }
+    })
+  }
+
+  const onClose = (event) => {
+    event.persist && event.persist()
+    event && event.nativeEvent.stopImmediatePropagation()
+    inputRef.current.blur();
+    setFocus(false)
+  }
+
+
+  
 
   return (
     <div
       className={classNames(className, styles.headerSearch)}
-      onClick={() => {
-        // setSearchMode(true);
-        if (searchMode && inputRef.current) {
-          inputRef.current.focus();
-        }
-      }}
       onTransitionEnd={({ propertyName }) => {
         if (propertyName === 'width' && !searchMode) {
           if (onVisibleChange) {
@@ -56,38 +125,42 @@ const HeaderSearch = props => {
         }
       }}
     >
-      <AutoComplete
-        key="AutoComplete"
-        // className={inputClass}
-        value={value}
-        style={{
-          height: 28,
-          marginTop: -6,
-        }}
-        options={restProps.options}
-        onChange={setValue}
-        onSelect={restProps.onSelect}
-      >
+
+    <div ref={wrapperRef}>
         <Input
               ref={inputRef}
-          defaultValue={defaultValue}
+              value={keyword}
               aria-label={placeholder}
               placeholder={placeholder}
               className={inputClass}
               allowClear={true}
-          onKeyDown={e => {
-            if (e.key === 'Enter') {
-              if (restProps.onSearch) {
-                restProps.onSearch(value);
-              }
-            }
+              onFocus={() => {
+                setFocus(true)
               }}
-          onBlur={() => {
-            setSearchMode(false);
+              onKeyDown={(event) => {
+                "Escape" === event.key && (setKeyword(""), setFocus(false), inputRef.current.blur())
               }}
+              onChange={onSearch}
               prefix={<SearchOutlined className="site-form-item-icon" />}
             />
-      </AutoComplete>
+      </div>
+      <SearchPanel 
+        value={keyword}
+        {...props}
+        target={wrapperRef} 
+        inputRef={inputRef}
+        className={focus ?styles.active: styles.hidden} 
+        style={{left: targetOffset + 'px', top: isShowWidget ? '42px': '52px'}}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        onWillSearch={onWillSearch}
+        onFocusChange={onFocusChange}
+        willSearch={willSearch}
+        onClose={onClose}
+        console={willMenu}
+      />
+       
+      
     </div>
   );
 };

src/components/HeaderSearch/index.less

 @import '~antd/es/style/themes/default.less';
 
 .headerSearch {
+  // position: relative;
+  // display: block;
   .input {
     width: 0;
     min-width: 0;
@@ -8,6 +10,7 @@
     background: transparent;
     border-radius: 0;
     transition: width 0.3s, margin-left 0.3s;
+  
     :global(.ant-select-selection) {
       background: transparent;
     }
@@ -16,6 +19,7 @@
       padding-left: 0;
       border: 0;
       box-shadow: none !important;
+
     }
     &,
     &:hover,
@@ -33,4 +37,299 @@
     width: 320px!important;
     color: #555555;
   }
+  :global(.ant-input-affix-wrapper) {
+    padding-right: 12px;
+    width: 280px;
+    min-width: 120px;
+    max-width: 280px;
+  }
+
+}
+
+.searchPanel {
+  z-index: 4000; 
+  &.hidden {
+    display: block;
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
+    box-sizing: border-box;
+    background-color: rgb(255, 255, 255);
+    min-width: 120px;
+    font-size: 12px;
+    color: rgb(51, 51, 51);
+    transition: all 360ms ease 0s;
+  }
+  &.active {
+    display: block;
+    position: absolute;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px;
+    box-sizing: border-box;
+    background-color: rgb(255, 255, 255);
+    min-width: 120px;
+    font-size: 12px;
+    color: rgb(51, 51, 51);
+    transition: all 360ms ease 0s;
+    visibility: visible;
+    opacity: 1;
+  }
+  .container {
+    padding: 8px 0px;
+    .body {
+      min-width: 480px;
+      max-width: 600px;
+      font-size: 12px;
+      // .content {
+      //   display: flex;
+        
+      // }
+      .flexItem {
+        flex: 1 1 0%;
+        overflow: hidden;
+        .historyTitle {
+          display: flex;
+          -webkit-box-align: center;
+          align-items: center;
+          -webkit-box-pack: justify;
+          justify-content: space-between;
+          // margin: 16px 0px 0px;
+          font-family: "PingFang SC", sans-serif;
+          font-weight: 400;
+          color: rgb(136, 136, 136);
+          padding: 0px 12px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .historyHref {
+          padding: 0px 12px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          display: flex;
+          -webkit-box-align: center;
+          align-items: center;
+          outline: none;
+          text-decoration: none;
+          color: rgb(85, 85, 85);
+          transition: all 250ms linear 0s;
+          &:link, &:visited {
+            color: rgb(17, 17, 17);
+          }
+          .title {
+            flex: 1 1 0%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          &:hover {
+            background-color: rgb(247, 247, 247);
+            text-decoration: none;
+            color: rgb(17, 17, 17);
+          }
+          .featIn {
+            margin-left: 8px;
+            color: rgb(193, 193, 193);
+          }
+        }
+      }
+      .item, .flexItem {
+      
+        margin-bottom: 4px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid rgb(242, 242, 242);
+        .title {
+          padding: 0px 12px;
+          height: 28px;
+          line-height: 28px;
+          color: rgb(136, 136, 136);
+        }
+        .label {
+          display: flex;
+          flex-wrap: wrap;
+          -webkit-box-pack: start;
+          justify-content: flex-start;
+          margin: 0px -3px -4px;
+          height: auto;
+          padding: 0px 12px;
+          height: 28px;
+          line-height: 28px;
+          font-size: 12px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-height: 24px;
+          overflow: hidden;
+          .btn {
+            box-sizing: border-box;
+            outline: medium;
+            background: none rgb(250, 250, 250);
+            cursor: pointer;
+            font-family: inherit;
+            font-size: inherit;
+            text-decoration: none;
+            // transition: all 0.3s ease-out 0s;
+            transition: all 250ms linear 0s;
+            display: inline-block;
+            border: 1px solid rgba(0, 0, 0, 0.1);
+            overflow: hidden;
+            vertical-align: middle;
+            text-align: center;
+            color: rgb(85, 85, 85);
+            white-space: nowrap;
+            padding: 0px 8px;
+            height: 24px;
+            line-height: 22px;
+            margin: 4px 3px;
+            border-radius: 14px;
+            margin-top: 0px;
+            margin-bottom: 0px;
+            &:hover {
+              background-color: rgb(247, 247, 247);
+            }
+          }
+        }
+        
+      }
+      .features {
+        display: flex;
+        .flex {
+          flex: 1 1 0%;
+          overflow: hidden;
+          .title {
+            padding: 0px 12px;
+            height: 28px;
+            line-height: 28px;
+            font-size: 12px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin: 16px 0px 0px;
+            font-family: "PingFang SC", sans-serif;
+            font-weight: 400;
+            color: rgb(136, 136, 136);
+            display: flex;
+            -webkit-box-align: center;
+            align-items: center;
+            -webkit-box-pack: justify;
+            justify-content: space-between;
+            &:first-child {
+              margin-top: 0;
+            }
+          }
+          .feature {
+            flex: 1 1 0%;
+            overflow: hidden;
+            .featureItem {
+              padding: 0px 12px;
+              height: 28px;
+              line-height: 28px;
+              font-size: 12px;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              display: flex;
+              -webkit-box-align: center;
+              align-items: center;
+              outline: none;
+              text-decoration: none;
+              color: rgb(85, 85, 85);
+              transition: all 250ms linear 0s;
+              cursor: pointer;
+              &:link, &:visited {
+                color: rgb(17, 17, 17);
+              }
+              &:hover {
+                background-color: rgb(247, 247, 247);
+                text-decoration: none;
+                color: rgb(17, 17, 17);
+                .text {
+                  .href {
+                    opacity: 1;
+                  }
+                }
+              }
+              .text {
+                flex: 1 1 0%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                display: flex;
+                align-items: center;
+                em {
+                  font-style: normal;
+                  color: @primary-color;
+                  font-weight: 500;
+                }
+                .href {
+                  opacity: 0;
+                  margin-left: 4px;
+                  color: rgb(193, 193, 193);
+                  transition: none 0s ease 0s;
+                }
+              }
+              .featIn {
+                flex: 0 1 auto;
+                max-width: 40%;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                margin-left: 8px;
+                color: rgb(193, 193, 193);
+              }
+            }
+          }
+        }
+      }
+    }
+    .footer {
+      padding: 8px 12px 0px;
+      border-top: 1px solid rgb(242, 242, 242);
+      box-sizing: content-box;
+      height: 16px;
+      line-height: 16px;
+      span {
+        line-height: 12px;
+        cursor: pointer;
+        &:hover {
+          color: @primary-color;
+        }
+      }
+    }
+  }
+}
+
+.searchOverfy {
+  box-sizing: border-box;
+  :global(.ant-popover-arrow) {
+    display: none;
+  }
+  :global(.ant-popover-inner) {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: -19px;
+  }
+}
+.empty {
+  color: rgb(193, 193, 193);
+  // text-align: center;
+  padding-left: 4px;
+  width: 100%;
+  padding: 0px 12px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
\ No newline at end of file