cloud-b2b 1.1.51 → 1.1.53

package/lib/Enhance/Loading.js

@@ -0,0 +1,138 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Loading = _interopRequireDefault(require("../Loading"));
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context2, _context3; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(t), !0)).call(_context2, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context3 = ownKeys(Object(t))).call(_context3, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var STATUS = ['loadingWithInit',
+// 显示加载画面，并自动触发onInit事件，默认值
+'loading',
+// 显示加载画面
+'retry',
+// 显示重试画面
+'retryForHome',
+// 显示重试画面(触发onInit时，home参数为true)
+'page' // 显示正常的页面(表明页面状态已经初始化好)
+];
+
+/**
+ * status: [可选], 当前状态。默认为loadingWithInit
+ * home: [可选]，为true表明接受首页触发的事件。默认为false
+ * onInit: [可选],原型为func(home)，home为true表明初始化是来源首页
+ * onRefreshForHome：[可选],检测到来至首页时会触发该事件，原型为func()
+ */
+var Enhance = function Enhance(Component) {
+  var _class;
+  return _class = /*#__PURE__*/function (_React$Component) {
+    (0, _inherits2["default"])(_class, _React$Component);
+    var _super = _createSuper(_class);
+    function _class() {
+      var _context;
+      var _this;
+      (0, _classCallCheck2["default"])(this, _class);
+      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+        args[_key] = arguments[_key];
+      }
+      _this = _super.call.apply(_super, (0, _concat["default"])(_context = [this]).call(_context, args));
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "triggerEvent", function () {
+        if (!global.isServer) {
+          var _this$props = _this.props,
+            _this$props$status = _this$props.status,
+            status = _this$props$status === void 0 ? 'loadingWithInit' : _this$props$status,
+            home = _this$props.home,
+            onInit = _this$props.onInit,
+            onRefreshForHome = _this$props.onRefreshForHome;
+          if (!home) {
+            if (status === 'loadingWithInit') {
+              onInit && onInit(false);
+            }
+          } else {
+            var __home = global['__home'];
+            global['__home'] && (global['__home'] = false);
+            if (status === 'loadingWithInit') {
+              onInit && onInit(__home);
+            } else if (__home) {
+              if (status === 'page') {
+                onRefreshForHome && onRefreshForHome();
+              } else if (status !== 'loading') {
+                onInit && onInit(__home);
+              }
+            }
+          }
+        }
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onRetry", function () {
+        var _this$props2 = _this.props,
+          status = _this$props2.status,
+          onInit = _this$props2.onInit;
+        onInit && onInit(status === 'retryForHome');
+      });
+      (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getPageProps", function () {
+        var props = _objectSpread({}, _this.props);
+        delete props.status;
+        delete props.home;
+        delete props.onInit;
+        delete props.onRefreshForHome;
+        return props;
+      });
+      return _this;
+    }
+    (0, _createClass2["default"])(_class, [{
+      key: "componentDidMount",
+      value: function componentDidMount() {
+        this.triggerEvent();
+      }
+    }, {
+      key: "componentDidUpdate",
+      value: function componentDidUpdate() {
+        this.triggerEvent();
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var status = this.props.status;
+        if (status !== 'page') {
+          var retry = status === 'retry' || status === 'retryForHome';
+          return /*#__PURE__*/_react["default"].createElement(_Loading["default"], {
+            retry: retry,
+            onRetry: this.onRetry
+          });
+        } else {
+          return /*#__PURE__*/_react["default"].createElement(Component, this.getPageProps());
+        }
+      }
+    }]);
+    return _class;
+  }(_react["default"].Component), (0, _defineProperty2["default"])(_class, "propTypes", {
+    status: _propTypes["default"].oneOf(STATUS),
+    home: _propTypes["default"].bool,
+    onInit: _propTypes["default"].func,
+    onRefreshForHome: _propTypes["default"].func
+  }), _class;
+};
+var _default = exports["default"] = Enhance;

package/lib/Enhance/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+_Object$defineProperty(exports, "EnhanceDialogs", {
+  enumerable: true,
+  get: function get() {
+    return _Dialogs["default"];
+  }
+});
+exports.EnhanceEditDialog = void 0;
+_Object$defineProperty(exports, "EnhanceLoading", {
+  enumerable: true,
+  get: function get() {
+    return _Loading["default"];
+  }
+});
+var _Loading = _interopRequireDefault(require("./Loading"));
+var _Dialogs = _interopRequireDefault(require("./Dialogs"));
+var EnhanceEditDialog = exports.EnhanceEditDialog = function EnhanceEditDialog(Container, EditDialog) {
+  return (0, _Dialogs["default"])(Container, ['edit'], [EditDialog]);
+};

package/lib/Enhance/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Enhance",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Enhance.js"
+}

package/lib/Header/Header.js

@@ -0,0 +1,169 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
+var _badge = _interopRequireDefault(require("antd/lib/badge"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _menu = _interopRequireDefault(require("antd/lib/menu"));
+var _react = _interopRequireDefault(require("react"));
+var _Link = _interopRequireDefault(require("../Link"));
+var _SuperIcon = _interopRequireDefault(require("../SuperIcon"));
+var _helper = _interopRequireDefault(require("../helper"));
+var _Vertical = _interopRequireDefault(require("./Vertical"));
+var _variables = _interopRequireDefault(require("../variables"));
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var MenuItem = _menu["default"].Item;
+var Header = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Header, _React$Component);
+  var _super = _createSuper(Header);
+  function Header(_props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Header);
+    _this = _super.call(this, _props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toLogo", function () {
+      var img = _this.props.logoImg || '/logo.png';
+      var props = _this.getLinkProps('home', _this.state['main'] || _this.props.homeUrl || '/', {
+        role: 'logo'
+      });
+      return /*#__PURE__*/_react["default"].createElement(_Link["default"], props, /*#__PURE__*/_react["default"].createElement("img", {
+        src: img,
+        alt: "logo"
+      }));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toIcon", function (type) {
+      var style = {
+        fontSize: 18,
+        verticalAlign: 'middle'
+      };
+      return /*#__PURE__*/_react["default"].createElement(_SuperIcon["default"], {
+        type: type,
+        style: style
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getLinkProps", function (key, url) {
+      var props = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+      return _objectSpread(_objectSpread({}, props), {}, {
+        to: url,
+        'data-role': 'block',
+        'data-active': _this.props.selectKey === key ? 'true' : null
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toSetting", function (settingUrl) {
+      if (settingUrl) {
+        var props = _this.getLinkProps('setting', _this.state['setting'] || settingUrl);
+        return /*#__PURE__*/_react["default"].createElement(_Link["default"], props, _this.toIcon('pld-setting'));
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toMessage", function (messageUrl) {
+      var count = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+      if (messageUrl) {
+        var props = _this.getLinkProps('message', _this.state['message'] || messageUrl);
+        var msgProps = {
+          overflowCount: 99,
+          title: "\u60A8\u6709".concat(count, "\u6761\u672A\u8BFB\u6D88\u606F"),
+          count: count
+        };
+        return /*#__PURE__*/_react["default"].createElement(_Link["default"], props, /*#__PURE__*/_react["default"].createElement("span", {
+          role: "message"
+        }, /*#__PURE__*/_react["default"].createElement(_badge["default"], msgProps, _this.toIcon('pld-xiaoxi'))));
+      } else {
+        return null;
+      }
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMenuItemClick", function (_ref) {
+      var key = _ref.key;
+      var onMenuClick = _this.props.onMenuClick;
+      onMenuClick && onMenuClick(key);
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "menu", function (hasImport) {
+      return /*#__PURE__*/_react["default"].createElement(_menu["default"], {
+        className: (0, _variables["default"])('Header').menu,
+        onClick: _this.onMenuItemClick
+      }, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+        key: "person"
+      }, "\u4E2A\u4EBA\u4FE1\u606F"), hasImport ? /*#__PURE__*/_react["default"].createElement(MenuItem, {
+        key: "mode"
+      }, "\u5BFC\u5165\u6A21\u677F") : null, /*#__PURE__*/_react["default"].createElement(MenuItem, {
+        key: "modify"
+      }, "\u4FEE\u6539\u5BC6\u7801"));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "avatar", function (hasImport) {
+      return /*#__PURE__*/_react["default"].createElement(_dropdown["default"], {
+        placement: "bottomRight",
+        overlay: _this.menu(hasImport)
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        "data-role": "avatar",
+        style: {
+          cursor: 'pointer'
+        }
+      }, _this.toIcon(_this.props.userIcon)));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toPerson", function () {
+      var hasImport = _this.props.hasImport || true;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        role: "person"
+      }, /*#__PURE__*/_react["default"].createElement("div", null), _this.avatar(hasImport), /*#__PURE__*/_react["default"].createElement("span", null, _this.props.userName));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toLogout", function () {
+      var props = {
+        to: _this.props.loginUrl,
+        'data-role': 'block',
+        onClick: _this.props.onLogout()
+      };
+      return /*#__PURE__*/_react["default"].createElement(_Link["default"], props, _this.toIcon('logout'), /*#__PURE__*/_react["default"].createElement("span", null, "\u9000\u51FA"));
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toTail", function () {
+      var _this$props = _this.props,
+        settingUrl = _this$props.settingUrl,
+        messageUrl = _this$props.messageUrl,
+        messageCount = _this$props.messageCount;
+      return /*#__PURE__*/_react["default"].createElement("span", null, _this.toSetting(settingUrl), _this.toMessage(messageUrl, messageCount), _this.toPerson(), _this.toLogout());
+    });
+    if (_props.selectUrl) {
+      _this.state = (0, _defineProperty2["default"])({}, _props.selectKey, _props.selectUrl);
+    }
+    return _this;
+  }
+  (0, _createClass2["default"])(Header, [{
+    key: "componentWillReceiveProps",
+    value: function componentWillReceiveProps(props) {
+      if (props.selectUrl) {
+        this.setState((0, _defineProperty2["default"])({}, props.selectKey, props.selectUrl));
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react["default"].createElement("header", {
+        className: (0, _variables["default"])('Header')
+      }, this.toLogo(), this.toTail());
+    }
+  }]);
+  return Header;
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Header, "Vertical", _Vertical["default"]);
+var _default = exports["default"] = Header;

package/lib/Header/Header.less

@@ -0,0 +1,95 @@
+@import '../variables.less';
+
+.@{cloudlink-prefix}-Header {
+  height: @header-height;
+  color: @header-color;
+  background-color: #000717;
+  font-size: @header-font-size;
+  line-height: @header-height;
+
+  > * {
+    display: inline-block;
+    text-align: center;
+    vertical-align: top;
+  }
+
+  > div:first-child {
+    margin-left: 20px;
+
+    > img {
+      width: 130px;
+    }
+  }
+
+  > :last-child {
+    float: right;
+    margin-right: 15px;
+  }
+
+  [role='person'] {
+    display: inline-block;
+    height: 40px;
+
+    >:first-child {
+      display: inline-block;
+      border-left: 1px solid white;
+      height: 14px;
+      vertical-align: middle;
+    }
+
+    > i {
+      margin: 8px;
+    }
+
+    > span {
+      font-size: 14px;
+    }
+  }
+
+  [data-role='block'] {
+    display: inline-block;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: @header-color;
+    height: 40px;
+
+    > span:last-child {
+      font-size: 14px;
+      margin-left: 5px;
+    }
+
+    &:hover,
+    &[data-active] {
+      background-color: @header-hover-bg;
+    }
+  }
+
+  [data-role='avatar'] {
+    display: inline-block;
+    padding-left: 15px;
+    padding-right: 15px;
+    color: @header-color;
+  }
+
+  :global {
+    .ant-badge-count {
+      box-shadow: none;
+      padding: 0 6px;
+      top: -2px;
+    }
+  }
+  .menu {
+    :global {
+      .ant-dropdown-menu-item {
+        padding: 8px 20px;
+      }
+
+      .ant-dropdown-menu-item-group-title {
+        padding: 6px 20px;
+        color: #333;
+      }
+    }
+  }
+}
+
+

package/lib/Header/Vertical.js

@@ -0,0 +1,114 @@
+"use strict";
+
+var _Reflect$construct = require("@babel/runtime-corejs3/core-js-stable/reflect/construct");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Link = _interopRequireDefault(require("../Link"));
+var _SuperIcon = _interopRequireDefault(require("../SuperIcon"));
+var _variables = _interopRequireDefault(require("../variables"));
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = _Reflect$construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !_Reflect$construct) return false; if (_Reflect$construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(_Reflect$construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var ITEM_TYPE = {
+  key: _propTypes["default"].string.isRequired,
+  href: _propTypes["default"].string.isRequired,
+  title: _propTypes["default"].string.isRequired,
+  icon: _propTypes["default"].string.isRequired
+};
+
+/**
+ * selectKey: 选中的key
+ * url：url优先级高于item中的href
+ */
+var Vertical = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(Vertical, _React$Component);
+  var _super = _createSuper(Vertical);
+  function Vertical() {
+    var _context;
+    var _this;
+    (0, _classCallCheck2["default"])(this, Vertical);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, (0, _concat["default"])(_context = [this]).call(_context, args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      id: ''
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "isSelect", function (item) {
+      return item.key === _this.props.selectKey;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "getUrl", function (item) {
+      return _this.props.url[item.key] || item.href;
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (selectKey) {
+      _this.props.onSelectKey && _this.props.onSelectKey(selectKey);
+      if (_this.state.id) {
+        clearTimeout(_this.state.id);
+      }
+      _this.setState({
+        id: (0, _setTimeout2["default"])(function () {
+          _this.setState({
+            id: ''
+          });
+        }, 500)
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "toItem", function (item) {
+      if (!item.jumpOut) {
+        var _context2;
+        return /*#__PURE__*/_react["default"].createElement(_Link["default"], {
+          key: item.key,
+          to: _this.getUrl(item),
+          "data-select": _this.isSelect(item),
+          onClick: (0, _bind["default"])(_context2 = _this.onClick).call(_context2, null, item.key)
+        }, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_SuperIcon["default"], {
+          type: item.icon
+        })), /*#__PURE__*/_react["default"].createElement("span", null, item.title));
+      } else {
+        var props = {
+          key: item.key,
+          href: item.href,
+          target: '_blank'
+        };
+        return /*#__PURE__*/_react["default"].createElement("a", props, /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_SuperIcon["default"], {
+          type: item.icon
+        })), /*#__PURE__*/_react["default"].createElement("span", null, item.title));
+      }
+    });
+    return _this;
+  }
+  (0, _createClass2["default"])(Vertical, [{
+    key: "render",
+    value: function render() {
+      var _context3;
+      return /*#__PURE__*/_react["default"].createElement("header", {
+        className: (0, _variables["default"])('Vertical'),
+        "data-click": !!this.state.id
+      }, (0, _map["default"])(_context3 = this.props.items).call(_context3, this.toItem));
+    }
+  }]);
+  return Vertical;
+}(_react["default"].Component);
+(0, _defineProperty2["default"])(Vertical, "propTypes", {
+  selectKey: _propTypes["default"].string,
+  url: _propTypes["default"].object,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape(ITEM_TYPE)),
+  onSelectKey: _propTypes["default"].func
+});
+var _default = exports["default"] = Vertical;

package/lib/Header/Vertical.less

@@ -0,0 +1,60 @@
+@import '../variables.less';
+
+@width: @header-height;
+@height: 40px;
+
+.@{cloudlink-prefix}-Vertical {
+  position: relative;
+  z-index: 100;
+  background: #000717;
+  width: @width;
+  height: ~'calc(100vh - @{header-height})';
+  transition: width 0.4s;
+
+  > a {
+    display: block;
+    height: @height;
+    color: white;
+    overflow: hidden;
+    white-space: nowrap;
+    transition: none;
+
+    > :first-child {
+      display: inline-block;
+      vertical-align: top;
+      width: @width;
+      line-height: @height;
+      text-align: center;
+      font-size: 16px;
+      padding-top: 1px;
+      color: #d3eafd;
+    }
+
+    > :last-child {
+      line-height: @height;
+      font-size: 14px;
+    }
+
+    &:hover > :first-child {
+      color: white;
+    }
+
+    &[data-select='true'] {
+      background: @primary-color;
+      color: white;
+
+      > :first-child {
+        color: white;
+      }
+    }
+  }
+
+  &:hover {
+    width: @width + @sidebar-width;
+  }
+
+  &[data-click='true'] {
+    width: @width;
+    transition: none;
+  }
+}

package/lib/Header/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "Header",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./Header.js"
+}