@zat-design/sisyphus-react 3.0.13

package/lib/ProLayout/components/ProHeader/index.js

@@ -0,0 +1,371 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _antd = require("antd");
+var _react = _interopRequireWildcard(require("react"));
+var _utils = require("@zat-design-pro-component/utils");
+var _classnames2 = _interopRequireDefault(require("classnames"));
+var _moment3 = _interopRequireDefault(require("moment"));
+var _ahooks = require("ahooks");
+var _lodash = require("lodash");
+var _reactSvg = require("react-svg");
+var _arrow = _interopRequireDefault(require("../../../assets/arrow.svg"));
+var _components = require("./components");
+var _getEnumLabel = _interopRequireDefault(require("../../../ProEnum/getEnumLabel"));
+var _index = require("../../../index");
+/* eslint-disable react/no-array-index-key */
+
+var formatAmount = _utils.tools.formatAmount;
+var ProHeader = function ProHeader(props) {
+  var _props$breadcrumbList = props.breadcrumbList,
+    breadcrumbList = _props$breadcrumbList === void 0 ? [] : _props$breadcrumbList,
+    breadcrumbColumns = props.breadcrumbColumns,
+    actionRender = props.actionRender,
+    _props$describeList = props.describeList,
+    describeList = _props$describeList === void 0 ? [] : _props$describeList,
+    describeColumns = props.describeColumns,
+    subDescribeColumns = props.subDescribeColumns,
+    onBack = props.onBack,
+    className = props.className,
+    _props$bodyOverFlowHi = props.bodyOverFlowHidden,
+    bodyOverFlowHidden = _props$bodyOverFlowHi === void 0 ? false : _props$bodyOverFlowHi,
+    fixedTop = props.fixedTop,
+    _props$showBack = props.showBack,
+    showBack = _props$showBack === void 0 ? true : _props$showBack,
+    _props$showShadow = props.showShadow,
+    showShadow = _props$showShadow === void 0 ? false : _props$showShadow,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 100 : _props$zIndex,
+    title = props.title,
+    _props$autoBack = props.autoBack,
+    autoBack = _props$autoBack === void 0 ? 2 : _props$autoBack,
+    _props$collapsed = props.collapsed,
+    collapsed = _props$collapsed === void 0 ? true : _props$collapsed,
+    style = props.style;
+  var _useState = (0, _react.useState)(showBack),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    backState = _useState2[0],
+    setBackState = _useState2[1];
+  var _useToggle = (0, _ahooks.useToggle)(collapsed),
+    _useToggle2 = (0, _slicedToArray2.default)(_useToggle, 2),
+    fold = _useToggle2[0],
+    toggle = _useToggle2[1].toggle;
+  var _title = title;
+  // 面包屑配置数据源
+  var _breadcrumbColumns = breadcrumbColumns || breadcrumbList;
+  // 次级配置数据源
+  var _subDescribeColumns = subDescribeColumns || describeList;
+  (0, _react.useEffect)(function () {
+    if (bodyOverFlowHidden) {
+      var bodyElement = document.querySelector('body');
+      bodyElement.style.overflow = 'hidden';
+    }
+    return function () {
+      var bodyElement = document.querySelector('body');
+      bodyElement.style.overflow = '';
+    };
+  }, [bodyOverFlowHidden]);
+  (0, _react.useEffect)(function () {
+    var isNewPage = window.history.length;
+    // history的记录，默认2，代办新开页面
+    if (isNewPage <= autoBack) {
+      setBackState(false);
+    }
+  }, []);
+  /**
+   * 主级描述数据渲染
+   */
+  var describeRender = function describeRender(describeData) {
+    if (!Array.isArray(describeData)) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: "pro-header-describe"
+    }, describeData.map(function (item, index) {
+      var value = item.value,
+        copyable = item.copyable,
+        _item$show = item.show,
+        show = _item$show === void 0 ? true : _item$show,
+        tag = item.tag,
+        label = item.label,
+        link = item.link;
+      // show为false直接隐藏¸
+      if (show === false || !show) {
+        return null;
+      }
+      var valueRender = function valueRender() {
+        return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+          size: 4,
+          align: tag ? 'baseline' : 'center'
+        }, link ? /*#__PURE__*/_react.default.createElement("a", {
+          href: link,
+          rel: "noopener noreferrer",
+          target: "_blank"
+        }, value) : value, copyable && (0, _lodash.isString)(value) ? /*#__PURE__*/_react.default.createElement(_components.Copy, {
+          text: value
+        }) : null, tag ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "pro-header-tag"
+        }, tag) : null);
+      };
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement("span", null, label), /*#__PURE__*/_react.default.createElement("span", null, valueRender()));
+    }));
+  };
+  /**
+   * 次级描述数据渲染
+   */
+  var subDescribeRender = function subDescribeRender(describeData) {
+    var _moment, _moment2;
+    var value = describeData.value,
+      type = describeData.type,
+      valueType = describeData.valueType,
+      label = describeData.label,
+      _describeData$show = describeData.show,
+      show = _describeData$show === void 0 ? true : _describeData$show,
+      _describeData$precisi = describeData.precision,
+      precision = _describeData$precisi === void 0 ? 2 : _describeData$precisi,
+      code = describeData.code;
+    // show为false直接隐藏
+    if (!show) {
+      return '';
+    }
+    var result;
+    switch (valueType || type) {
+      case 'thousandth':
+      case 'money':
+        // 千分位
+        result = value || (0, _lodash.isNumber)(value) ? formatAmount(value, precision) : '-';
+        break;
+      case 'enumName':
+        // 枚举-展示name
+        result = (0, _getEnumLabel.default)(code, value);
+        break;
+      case 'enumCodeName':
+        // 枚举-展示code-name
+        result = (0, _getEnumLabel.default)(code, value, true);
+        break;
+      case 'date':
+        // 年月日
+        result = value ? (_moment = (0, _moment3.default)(value)) === null || _moment === void 0 ? void 0 : _moment.format('YYYY-MM-DD') : '-';
+        break;
+      case 'dateTime':
+        // 年月日 时分秒
+        result = value ? (_moment2 = (0, _moment3.default)(value)) === null || _moment2 === void 0 ? void 0 : _moment2.format('YYYY-MM-DD HH:mm:ss') : '-';
+        break;
+      default:
+        result = String(value).includes('undefined') || !value ? '-' : value;
+        break;
+    }
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, label), /*#__PURE__*/_react.default.createElement("span", {
+      className: "describe-value"
+    }, result));
+  };
+  /**
+   * 头部右侧按钮面板渲染
+   */
+  var actionsRender = function actionsRender() {
+    if (Array.isArray(actionRender) && actionRender.length) {
+      return /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        split: /*#__PURE__*/_react.default.createElement(_antd.Divider, {
+          type: "vertical"
+        })
+      }, actionRender.map(function (item, index) {
+        var _item$props;
+        if ((0, _lodash.isFunction)(item === null || item === void 0 ? void 0 : item.type)) {
+          return /*#__PURE__*/_react.default.createElement("div", {
+            key: index
+          }, item);
+        }
+        // 判断第一层dom节点为空
+        if ((item === null || item === void 0 ? void 0 : item.type) && !(item === null || item === void 0 ? void 0 : (_item$props = item.props) === null || _item$props === void 0 ? void 0 : _item$props.children)) {
+          return null;
+        }
+        return /*#__PURE__*/_react.default.createElement("div", {
+          key: index
+        }, item);
+      }));
+    }
+    return actionRender;
+  };
+  /**
+   * 总结信息面板渲染
+   */
+  var breadcrumbRender = function breadcrumbRender() {
+    if (Array.isArray(_breadcrumbColumns) && !_breadcrumbColumns.length) {
+      return '';
+    }
+    var list = _breadcrumbColumns === null || _breadcrumbColumns === void 0 ? void 0 : _breadcrumbColumns.filter(function (item) {
+      return item.type === 'breadcrumb';
+    });
+    return list.map(function (item, index) {
+      var _value$props;
+      var value = item.value,
+        _item$show2 = item.show,
+        show = _item$show2 === void 0 ? true : _item$show2,
+        tag = item.tag;
+      // show或者值不存在为false直接隐藏¸
+      if (!show || !value) {
+        return '';
+      }
+      // 判断第一层dom节点为空
+      if ((value === null || value === void 0 ? void 0 : value.type) && !(value === null || value === void 0 ? void 0 : (_value$props = value.props) === null || _value$props === void 0 ? void 0 : _value$props.children)) {
+        return '';
+      }
+      return /*#__PURE__*/_react.default.createElement(_antd.Breadcrumb.Item, {
+        key: index
+      }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+        size: 4
+      }, value, " ", tag ? /*#__PURE__*/_react.default.createElement("div", {
+        className: "pro-header-tag"
+      }, tag) : null));
+    });
+  };
+  /**
+   * 头部左侧导航栏后业务信息
+   */
+  var infoRender = function infoRender() {
+    if (!Array.isArray(_breadcrumbColumns)) {
+      return '';
+    }
+    var list = _breadcrumbColumns === null || _breadcrumbColumns === void 0 ? void 0 : _breadcrumbColumns.filter(function (item) {
+      return item.type !== 'breadcrumb';
+    });
+    if (!list.length) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement("ul", {
+      className: "pro-header-info"
+    }, list.map(function (item, index) {
+      var _value$props2;
+      var value = item.value,
+        _item$type = item.type,
+        type = _item$type === void 0 ? 'info' : _item$type,
+        _item$show3 = item.show,
+        show = _item$show3 === void 0 ? true : _item$show3,
+        width = item.width,
+        tag = item.tag;
+      // show或者值不存在为false直接隐藏¸
+      if (!show || !value) {
+        return '';
+      }
+      // 判断第一层dom节点为空
+      if ((value === null || value === void 0 ? void 0 : value.type) && !(value === null || value === void 0 ? void 0 : (_value$props2 = value.props) === null || _value$props2 === void 0 ? void 0 : _value$props2.children)) {
+        return '';
+      }
+      // value为null或者undefined返回'-'
+      var val = String(value).includes('undefined') || !value ? '-' : value;
+      if (type === 'version' && val) {
+        val = "\u7248\u672C\u53F7".concat(val);
+      }
+      // 面包屑样式
+      var breadcrumbCls = (0, _classnames2.default)({
+        'breadcrumb-value': true,
+        omit: width
+      });
+      var valueRender = function valueRender(type) {
+        var valRender = /*#__PURE__*/_react.default.createElement("div", {
+          className: breadcrumbCls,
+          style: {
+            width: width
+          }
+        }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+          size: 4
+        }, val, " ", tag ? /*#__PURE__*/_react.default.createElement("div", {
+          className: "pro-header-tag"
+        }, tag) : null));
+        if (type === 'copy') {
+          return valRender = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, width ? /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+            title: val
+          }, valRender) : valRender, /*#__PURE__*/_react.default.createElement(_components.Copy, {
+            text: val
+          }));
+        }
+        if (width) {
+          return /*#__PURE__*/_react.default.createElement(_antd.Tooltip, {
+            title: val
+          }, valRender);
+        }
+        return valRender;
+      };
+      return /*#__PURE__*/_react.default.createElement("li", {
+        key: index,
+        className: (0, _classnames2.default)({
+          version: ['version', 'tag'].includes(type),
+          hidden: ['version', 'tag'].includes(type) && !val
+        })
+      }, type === 'copy' ? valueRender('copy') : valueRender());
+    }));
+  };
+  var cls = (0, _classnames2.default)((0, _defineProperty2.default)({
+    'pro-header': true,
+    'pro-header-fixed': fixedTop,
+    'pro-header-shadow': showShadow,
+    'pro-header-no-back': !backState,
+    'pro-header-no-describe': (0, _lodash.isEmpty)(_subDescribeColumns) && (0, _lodash.isEmpty)(describeColumns) || (0, _lodash.isEmpty)(describeColumns)
+  }, "".concat(className), className));
+  if (title && !(0, _lodash.isEmpty)(_breadcrumbColumns)) {
+    console.error('warning: The title and the breadcrumbList cannot be used together');
+  }
+  // title默认不显示返回按钮，只有showBack设置为true时才显示
+  if (title && props.showBack) {
+    _title = null;
+    _breadcrumbColumns.push({
+      type: 'breadcrumb',
+      value: title
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: cls,
+    style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, style), {}, {
+      top: fixedTop,
+      zIndex: zIndex
+    })
+  }, _title ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-title"
+  }, _title) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-top"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-left",
+    style: {
+      marginLeft: backState ? 0 : 16
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.Space, {
+    size: backState ? 4 : 0
+  }, backState ? /*#__PURE__*/_react.default.createElement(_index.ProBackBtn, {
+    onBack: onBack
+  }) : null, /*#__PURE__*/_react.default.createElement(_antd.Breadcrumb, {
+    separator: ">"
+  }, breadcrumbRender()), infoRender())), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-right"
+  }, actionsRender())), describeRender(describeColumns), !(0, _lodash.isEmpty)(_subDescribeColumns) ? /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames2.default)({
+      'pro-header-nav': true,
+      'pro-header-nav-open': fold,
+      'pro-header-nav-hidden': !fold
+    })
+  }, /*#__PURE__*/_react.default.createElement("ul", null, _subDescribeColumns.map(function (item, index) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: index
+    }, subDescribeRender(item));
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-fold"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pro-header-fold-bg",
+    onClick: toggle
+  }, /*#__PURE__*/_react.default.createElement(_reactSvg.ReactSVG, {
+    key: "copy-icon",
+    className: "fold-icon",
+    src: _arrow.default
+  })))) : null));
+};
+var _default = /*#__PURE__*/(0, _react.memo)(ProHeader);
+exports.default = _default;

package/lib/ProLayout/components/ProHeader/style/index.less

@@ -0,0 +1,337 @@
+.pro-header {
+  background-color: var(--zaui-base-bg, #ffffff);
+  padding         : var(--zaui-space-size-lg, 32px) 0 0 0;
+  box-shadow      : 0px 2px 4px 0px rgba(0, 55, 93, 0.06);
+
+  &.pro-header-no-back {
+    .pro-header-top {
+      padding-left: 0;
+    }
+  }
+
+  &.pro-header-no-describe {
+    box-shadow: none;
+
+    .pro-header-title,
+    .pro-header-top {
+      padding: 0;
+      margin : 0;
+    }
+  }
+
+  &.pro-header-fixed.pro-header-no-describe {
+    .pro-header-top {
+      padding-bottom: 12px;
+    }
+  }
+
+  .pro-header-describe {
+    a {
+      color: var(--zaui-link, #006AFF);
+    }
+  }
+
+  .pro-header-copy {
+    margin-bottom: 0;
+    width        : 14px;
+    display      : flex;
+    align-items  : center;
+
+    .ant-typography-copy-success {
+      svg {
+        width  : 14px;
+        height : 14px;
+        fill   : var(--zaui-success, #00AE4D);
+        display: inline-block;
+      }
+    }
+
+    .drag-icon {
+      div {
+        display: flex;
+      }
+
+      svg {
+        width  : 14px;
+        height : 14px;
+        fill   : #3F3F3F;
+        display: inline-block;
+      }
+    }
+  }
+
+  .pro-header-tag {
+    background   : var(--ant-primary-1, #e6f4ff);
+    color        : var(--zaui-brand, #006AFF);
+    padding      : 4px 8px;
+    border-radius: var(--zaui-border-radius-card, 2px);
+    font-size    : 12px;
+    font-weight  : normal;
+    line-height  : 17px;
+    display      : inline-block;
+    white-space  : pre;
+  }
+
+  .pro-header-title {
+    font-weight: 500;
+    font-size  : var(--zaui-font-size-xl, 18px);
+    padding    : 0 var(--zaui-space-size-md, 16px);
+  }
+
+  &.pro-header-fixed {
+    position  : sticky;
+    z-index   : 999;
+    box-shadow: 0 6px 10px -11px #888;
+  }
+
+  &.pro-header-shadow {
+    box-shadow: 0 6px 10px -11px #888;
+  }
+
+  .ant-breadcrumb {
+    li {
+      font-weight: 500;
+      color      : #1D2129;
+    }
+
+    .ant-breadcrumb-link {
+      font-size: var(--zaui-font-size-xl, 18px);
+    }
+
+    .ant-breadcrumb-separator {
+      font-weight: 500;
+      color      : #1D2129;
+      font-size  : var(--zaui-font-size-xl, 18px);
+      margin     : 0 var(--zaui-space-size-xs, 4px);
+    }
+  }
+
+  .pro-header-top {
+    display        : flex;
+    justify-content: space-between;
+    align-items    : center;
+    margin-bottom  : var(--zaui-space-size-sm, 8px);
+    padding        : 0 var(--zaui-space-size-md, 16px);
+
+    .pro-header-left {
+      display     : flex;
+      align-items : center;
+      margin-right: var(--zaui-space-size-md, 16px);
+      margin-left : var(--zaui-space-size-md, 16px);
+
+      ul {
+        display    : flex;
+        align-items: center;
+
+        li {
+          color      : #1D2129;
+          font-size  : var(--zaui-font-size-xl, 18px);
+          font-weight: 500;
+          display    : flex;
+
+          .breadcrumb-value {
+            display: inline-block;
+          }
+
+          &>span {
+            display: flex;
+          }
+
+          .omit {
+            overflow     : hidden;
+            white-space  : nowrap;
+            text-overflow: ellipsis;
+          }
+
+          b {
+            font-size: var(--zaui-font-size-lg, 16px);
+          }
+
+          .ant-typography {
+            display      : flex;
+            margin-bottom: 0;
+          }
+
+          &.version {
+            background   : var(--ant-primary-1, #e6f4ff);
+            border-radius: 4px;
+            color        : var(--zaui-brand, #006AFF);
+            font-style   : initial;
+            padding      : 0 8px;
+            font-size    : 12px;
+            height       : 24px;
+            line-height  : 24px;
+          }
+
+          &.hidden {
+            display: none;
+          }
+        }
+      }
+
+    }
+
+    .pro-header-right {
+      .ant-btn {
+        color: #616161;
+      }
+
+      .ant-btn-primary {
+        color: #ffffff;
+      }
+
+      .ant-btn-link {
+        padding: var(--zaui-space-size-xs, 4px), var(--zaui-space-size-sm, 8px);
+      }
+
+      .ant-divider-vertical {
+        margin: 0;
+      }
+    }
+
+  }
+
+  .pro-header-nav {
+    display   : flex;
+    background: #F7F9FC;
+    border-top: 1px solid #F2F2F2;
+    position  : relative;
+
+    &.pro-header-nav-open {
+      .pro-header-fold {
+        .pro-header-fold-bg {
+          transform: rotate(180deg);
+        }
+      }
+
+    }
+
+    &.pro-header-nav-hidden {
+      padding: 0;
+      border : none;
+
+      ul {
+        height     : 0;
+        // padding : 0;
+        overflow   : hidden;
+      }
+    }
+
+    .pro-header-fold {
+      position : absolute;
+      bottom   : -13px;
+      left     : 50%;
+      transform: translateX(-50%);
+      cursor   : pointer;
+
+      .pro-header-fold-bg {
+        background      : #fff;
+        position        : relative;
+        z-index         : 2;
+        height          : 26px;
+        transform       : rotate(0deg);
+        transform-origin: center;
+      }
+
+      &::before {
+        content   : '';
+        z-index   : 1;
+        position  : absolute;
+        bottom    : 13px;
+        left      : 50%;
+        transform : translateX(-50%);
+        width     : 140px;
+        height    : 1px;
+        background: linear-gradient(90deg, rgba(238, 238, 238, 0) 0%, var(--zaui-brand, #006AFF) 37%, var(--zaui-brand, #006AFF)57%, rgba(216, 216, 216, 0) 100%);
+      }
+
+      svg {
+        fill: var(--zaui-brand, #006AFF);
+      }
+    }
+
+    ul {
+      display   : flex;
+      flex-wrap : wrap;
+      padding   : 0 16px;
+      transition: height 0.2s ease-in-out;
+      height    : 60px;
+      overflow  : hidden;
+
+      li {
+        margin-right : 52px;
+        margin-top   : 4px;
+        margin-bottom: 12px;
+
+        &:last-child {
+          margin-right: 0;
+        }
+
+        span {
+          font-weight: 400;
+          font-size  : var(--zaui-font-size, 14px);
+
+          &:first-child {
+            display    : block;
+            font-weight: 500;
+          }
+        }
+
+        .describe-value {
+          color      : var(--zaui-text, #343434);
+          font-weight: 400;
+
+          &>* {
+            color      : var(--zaui-text, #343434);
+            font-weight: 400 !important;
+          }
+        }
+      }
+    }
+  }
+
+  .pro-header-info {
+    li {
+      margin-right: var(--zaui-space-size-sm, 8px);
+    }
+  }
+
+  .pro-header-describe {
+    display       : flex;
+    flex-wrap     : wrap;
+    font-size     : 14px;
+    padding       : 0 var(--zaui-space-size-md, 16px);
+    padding-bottom: 12px;
+
+    li {
+      margin-right: var(--zaui-space-card, 32px);
+
+      span {
+        font-weight: 400;
+        color      : #0A0A0A;
+
+        &:first-child {
+
+          margin-right: 12px;
+        }
+
+        &:last-child {
+          font-weight: 600;
+          display    : inline-grid;
+
+          .pro-header-tag {
+            margin-left: 4px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 1366px) {
+  .pro-header-describe {
+    li span:last-child {
+      max-width: 350px;
+    }
+  }
+}

package/lib/ProLayout/components/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ProCollapse } from './ProCollapse';
+export { default as ProFooter } from './ProFooter';
+export { default as ProHeader } from './ProHeader';