fan-standard-comp 3.1.4 → 3.1.6

package/lib/StandardModal/index.js

@@ -0,0 +1,525 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/modal/style");
+
+var _modal = _interopRequireDefault(require("antd/es/modal"));
+
+require("antd/es/row/style");
+
+var _row = _interopRequireDefault(require("antd/es/row"));
+
+require("antd/es/button/style");
+
+var _button = _interopRequireDefault(require("antd/es/button"));
+
+require("antd/es/form/style");
+
+var _form = _interopRequireDefault(require("antd/es/form"));
+
+var _tslib = require("tslib");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _data = require("../data");
+
+var _RenderItemGroup = _interopRequireDefault(require("../FormComp/RenderItemGroup"));
+
+var _ValueFormat = _interopRequireDefault(require("../utils/ValueFormat.js"));
+
+var _IconNode = _interopRequireDefault(require("../components/IconNode"));
+
+var _TabForm = _interopRequireDefault(require("../StandardForm/TabForm"));
+
+var _StepForm = _interopRequireDefault(require("../StandardForm/StepForm"));
+
+var _ActionList = _interopRequireDefault(require("../StandardForm/ActionList.js"));
+
+require("./style/index.less");
+
+var _antDesignDraggableModal = require("ant-design-draggable-modal");
+
+require("ant-design-draggable-modal/dist/index.css");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _typeof(obj) { "@babel/helpers - typeof"; 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var StandardModal = function StandardModal(props) {
+  var children = props.children,
+      className = props.className,
+      style = props.style,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'md' : _props$size,
+      type = props.type,
+      formItemGroup = props.formItemGroup,
+      title = props.title,
+      visible = props.visible,
+      formPrefix = props.formPrefix,
+      formPostfix = props.formPostfix,
+      initialValues = props.initialValues,
+      hideRequiredMark = props.hideRequiredMark,
+      bodyStyle = props.bodyStyle,
+      footer = props.footer,
+      footerButtonGroup = props.footerButtonGroup,
+      hideFooter = props.hideFooter,
+      _getFormFields = props.getFormFields,
+      _props$fieldStatus = props.fieldStatus,
+      fieldStatus = _props$fieldStatus === void 0 ? 'default' : _props$fieldStatus,
+      _props$formLayout = props.formLayout,
+      formLayout = _props$formLayout === void 0 ? 'horizontal' : _props$formLayout,
+      tabsConfig = props.tabsConfig,
+      stepsConfig = props.stepsConfig,
+      displayLayout = props.displayLayout,
+      _props$dragAble = props.dragAble,
+      dragAble = _props$dragAble === void 0 ? false : _props$dragAble,
+      otherProps = (0, _tslib.__rest)(props, ["children", "className", "style", "size", "type", "formItemGroup", "title", "visible", "formPrefix", "formPostfix", "initialValues", "hideRequiredMark", "bodyStyle", "footer", "footerButtonGroup", "hideFooter", "getFormFields", "fieldStatus", "formLayout", "tabsConfig", "stepsConfig", "displayLayout", "dragAble"]);
+
+  var _Form$useForm = _form.default.useForm(),
+      _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
+      modalForm = _Form$useForm2[0];
+
+  var _useState = (0, _react.useState)(),
+      _useState2 = _slicedToArray(_useState, 2),
+      modalFormRef = _useState2[0],
+      setModalFormRef = _useState2[1]; // <---- set the ref when Form Rendered
+
+
+  var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      bodyMaxHeight = _useState4[0],
+      setBodyMaxHeight = _useState4[1]; // setTabFormChild
+
+
+  var _useState5 = (0, _react.useState)(),
+      _useState6 = _slicedToArray(_useState5, 2),
+      formChild = _useState6[0],
+      setFormChild = _useState6[1]; // <---- set the ref when Form Rendered
+  // 按钮栏是否有显示（默认显示）
+
+
+  var hasFooterBar = (0, _react.useMemo)(function () {
+    var _a, _b, _c, _d, _e;
+
+    var openLog = false;
+
+    if (type === 'tabForm' || type === 'stepForm') {
+      if (type === 'tabForm') {
+        var activeTabInfo = formItemGroup.find(function (fItem) {
+          return fItem.key === (tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.activeKey);
+        });
+        openLog && console.log('rule 0-1', ((_a = activeTabInfo === null || activeTabInfo === void 0 ? void 0 : activeTabInfo.actions) === null || _a === void 0 ? void 0 : _a.length) > 0);
+        return ((_b = activeTabInfo === null || activeTabInfo === void 0 ? void 0 : activeTabInfo.actions) === null || _b === void 0 ? void 0 : _b.length) > 0;
+      }
+
+      if (type === 'stepForm') {
+        var currentStepInfo = formItemGroup[stepsConfig.current];
+        openLog && console.log('rule 0-2', ((_c = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _c === void 0 ? void 0 : _c.length) > 0);
+        return ((_d = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _d === void 0 ? void 0 : _d.length) > 0;
+      }
+
+      return true;
+    } else {
+      if (hideFooter) {
+        openLog && console.log('rule 1');
+        return false;
+      }
+
+      if (fieldStatus && fieldStatus !== 'default') {
+        openLog && console.log('rule 2');
+        return false;
+      }
+
+      if (props.hasOwnProperty('footerButtonGroup') && footerButtonGroup) {
+        if (Array.isArray(footerButtonGroup) && footerButtonGroup.length === 0) {
+          openLog && console.log('rule 4'); // 返回为空数组不占用按钮栏
+
+          return false;
+        } else if (typeof footerButtonGroup === 'function' && (!footerButtonGroup() || ((_e = footerButtonGroup()) === null || _e === void 0 ? void 0 : _e.length) === 0)) {
+          openLog && console.log('rule 5'); // 配置类型为Function且返回值为null或者返回数组长度为0时，不显示按钮栏
+
+          return false;
+        }
+
+        openLog && console.log('rule 3');
+        return true;
+      } else if (footerButtonGroup === false) {
+        openLog && console.log('rule 7'); // 显示
+
+        return true;
+      }
+
+      if (props.hasOwnProperty('footer') && !footer) {
+        openLog && console.log('rule 8');
+        return false;
+      }
+
+      openLog && console.log('rule 9');
+      return true;
+    }
+  }, [fieldStatus, hideFooter, footer, footerButtonGroup, type, tabsConfig, stepsConfig, formItemGroup]); // 设置限制弹窗高度
+
+  var initBodyMaxHeight = function initBodyMaxHeight() {
+    var title = props.title;
+    var bodyHeight = document.body.offsetHeight;
+    var baseReduce = 150 + 32; // 默认需要减去的高度（上下空白间距150及内部内容间距16*2
+    // console.log('弹窗是否有按钮：', hasFooterBar ? '是' : '否')
+
+    setBodyMaxHeight("".concat(bodyHeight - (title ? 55 : 0) - (hasFooterBar ? 55 : 0) - baseReduce, "px")); // setBodyMaxHeight(`${bodyHeight - (title ? 55 : 0) - ((footer || footerButtonGroup) ? 55 : 0) - baseReduce +
+    // ((fieldStatus && fieldStatus !== 'default' && !footerButtonGroup) || hideFooter ? 55 : 0)}px`)
+  }; // fill Form when modal open 此处可解决获取  Form.useForm  warning
+
+
+  (0, _react.useEffect)(function () {
+    if (visible && modalFormRef) {
+      // <---- check ref before use the form instance
+      if (initialValues && _typeof(initialValues) === 'object') {
+        initialValues && modalForm.setFieldsValue(Object.assign({}, initialValues));
+        forceUpdateForm();
+      }
+    } // if (!visible && modalFormRef) {
+    //   clearAllFieldsValue() // 清空表单传参数
+    // }
+
+  }, [modalFormRef, visible]);
+  (0, _react.useEffect)(function () {
+    if (visible) {
+      initBodyMaxHeight(); // 让resize事件触发 initBodyMaxHeight
+
+      window.addEventListener('resize', initBodyMaxHeight);
+    } else {
+      window.removeEventListener('resize', initBodyMaxHeight);
+    }
+  }, [fieldStatus, title, visible, hideFooter, footer, footerButtonGroup]);
+
+  var handleSubmit = function handleSubmit() {
+    var type = props.type,
+        formItemGroup = props.formItemGroup,
+        onSubmit = props.onSubmit;
+
+    if (type === 'form') {
+      modalForm.validateFields().then(function (values) {
+        if (Object.prototype.hasOwnProperty.call(values, 'false')) {
+          delete values.false; // 自定义结构会莫名的出来一个false字段
+        }
+
+        var resultValues = (0, _ValueFormat.default)(values, formItemGroup);
+
+        if (onSubmit) {
+          onSubmit(Object.assign({}, resultValues));
+        }
+      }).catch(function () {
+        // 定位到第一条表单异常的
+        var errorCollection = Array.prototype.slice.call(document.getElementsByClassName('ant-form-item-has-error'));
+
+        if (errorCollection[0] && errorCollection[0].getElementsByTagName('input')) {
+          Array.prototype.slice.call(errorCollection[0].getElementsByTagName('input'))[0].focus();
+        } // console.error('表单填写有误', errorInfo, '第一条数据',errorInfo.errorFields[0].name[0])
+
+      });
+    } else if (type === 'stepForm' || type === 'tabForm') {
+      // onSubmit && onSubmit()
+      formChild.validateFields().then(function (values) {
+        // console.log(values)
+        if (Object.prototype.hasOwnProperty.call(values, 'false')) {
+          delete values.false; // 自定义结构会莫名的出来一个false字段
+        }
+
+        var resultValues = (0, _ValueFormat.default)(values, formItemGroup);
+
+        if (onSubmit) {
+          onSubmit(Object.assign({}, resultValues));
+        }
+      }).catch(function () {
+        // 定位到第一条表单异常的
+        var errorCollection = Array.prototype.slice.call(document.getElementsByClassName('ant-form-item-has-error'));
+
+        if (errorCollection[0] && errorCollection[0].getElementsByTagName('input')) {
+          Array.prototype.slice.call(errorCollection[0].getElementsByTagName('input'))[0].focus();
+        } // console.error('表单填写有误', errorInfo, '第一条数据',errorInfo.errorFields[0].name[0])
+
+      });
+    } else {
+      // 没有表单数组 formItemGroup 配置
+      onSubmit && onSubmit();
+    }
+  }; // 重置所有表单
+
+
+  var clearAllFieldsValue = function clearAllFieldsValue() {
+    // let allFields = {}
+    // Object.keys(modalForm.getFieldsValue()).map((item) => allFields[item] = undefined)
+    // modalForm.setFieldsValue(allFields) // 直接清空表单的赋值(initialValues传值如果没有前后赋值没有全部带上所有字段，则会默认又使用之前的部分未传参字段)
+    modalForm.resetFields(); // 直接使用这个无效
+  };
+
+  var onAfterClose = function onAfterClose() {
+    var afterClose = props.afterClose;
+    if (type === 'form') clearAllFieldsValue();
+    if (afterClose) afterClose();
+  };
+
+  var handleCancel = function handleCancel() {
+    var onCancel = props.onCancel;
+    if (onCancel) onCancel();
+  }; // 强制更新表单值，用于赋初始化实例值
+
+
+  var forceUpdateForm = function forceUpdateForm() {
+    _getFormFields && _getFormFields(modalForm.getFieldsValue() || {}, modalForm);
+  };
+
+  var renderFormItemGroup = function renderFormItemGroup() {
+    var fieldStatus = props.fieldStatus,
+        formItemGroup = props.formItemGroup,
+        _props$size2 = props.size,
+        size = _props$size2 === void 0 ? 'md' : _props$size2;
+
+    if (Array.isArray(formItemGroup)) {
+      return /*#__PURE__*/_react.default.createElement(_RenderItemGroup.default, {
+        size: size,
+        layout: formLayout,
+        doUpdateFormFields: function doUpdateFormFields() {
+          return forceUpdateForm();
+        },
+        displayLayout: displayLayout,
+        itemGroup: formItemGroup,
+        fieldStatus: fieldStatus,
+        form: modalForm
+      });
+    }
+
+    return formItemGroup;
+  };
+
+  var handleStepType = function handleStepType(type, extraFunc) {
+    var current = stepsConfig.current;
+
+    switch (type) {
+      case 'submit':
+      case 'next':
+        // 获取当前步骤的表单配置下有 rules 的控件进行校验（自定义的控件则自己有业务层面处理添加校验）
+        // console.log('执行下一步骤，需要优先进行校验')
+        var currentFields = formItemGroup[current].fields;
+        var validatorGroup = currentFields && Array.isArray(currentFields) ? currentFields.map(function (fItem) {
+          return fItem.rules ? fItem.filedName : null;
+        }) : [];
+        formChild.validateFields(validatorGroup).then(function () {
+          // if (stepClick) stepClick(type, formChild, values);
+          extraFunc();
+        }).catch(function () {// console.log('表单校验不通过 ', errorFields.map(err => err))
+        });
+        break;
+
+      case 'prev':
+        // if (stepClick) stepClick(type, formChild);
+        extraFunc();
+        break;
+
+      case 'cancel':
+        // if (stepClick) stepClick(type, formChild);
+        extraFunc();
+        break;
+
+      default:
+        // extraFunc()
+        break;
+    }
+  };
+
+  var renderButtonGroup = function renderButtonGroup() {
+    var footerButtonGroup = props.footerButtonGroup,
+        confirmLoading = props.confirmLoading,
+        cancelText = props.cancelText,
+        confirmText = props.confirmText,
+        okText = props.okText,
+        okButtonProps = props.okButtonProps,
+        confirmButtonProps = props.confirmButtonProps,
+        cancelButtonProps = props.cancelButtonProps;
+
+    if (footerButtonGroup) {
+      if (Array.isArray(footerButtonGroup)) {
+        if (footerButtonGroup.length === 0) return null; // <div>按钮组合配置为空</div>
+
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, footerButtonGroup.map(function (item) {
+          if (_typeof(item) === 'object') {
+            if (item.isHide) return null;
+            var name = item.name,
+                _type = item.type,
+                icon = item.icon,
+                ghost = item.ghost,
+                disabled = item.disabled,
+                loading = item.loading,
+                fn = item.fn,
+                others = (0, _tslib.__rest)(item, ["name", "type", "icon", "ghost", "disabled", "loading", "fn"]);
+            return /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+              key: name,
+              type: _type || 'primary',
+              icon: /*#__PURE__*/_react.default.createElement(_IconNode.default, {
+                icon: icon
+              }),
+              ghost: ghost,
+              disabled: disabled,
+              loading: loading,
+              onClick: fn ? function (e) {
+                return fn(item, modalForm, props, e);
+              } : null
+            }, others), name);
+          } else {
+            return item; // 如果是DOM，则直接渲染
+          }
+        }));
+      }
+
+      if (typeof footerButtonGroup === 'function') {
+        return footerButtonGroup(modalForm, props);
+      }
+
+      return footerButtonGroup;
+    }
+
+    if (footer) return footer;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+      key: "submit",
+      type: "primary",
+      loading: confirmLoading,
+      onClick: handleSubmit
+    }, confirmButtonProps, okButtonProps), confirmText || okText || '确定'), /*#__PURE__*/_react.default.createElement(_button.default, Object.assign({
+      key: "back",
+      onClick: handleCancel
+    }, cancelButtonProps), cancelText || '取消'));
+  };
+
+  var renderFooter = function renderFooter() {
+    var _a, _b;
+
+    if (type === 'stepForm') {
+      var currentStepInfo = formItemGroup[stepsConfig.current];
+      return ((_a = currentStepInfo === null || currentStepInfo === void 0 ? void 0 : currentStepInfo.actions) === null || _a === void 0 ? void 0 : _a.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ActionList.default, {
+        list: currentStepInfo.actions || [],
+        onStep: handleStepType,
+        form: formChild,
+        other: props
+      }) : null;
+    }
+
+    if (type === 'tabForm') {
+      var activeTabInfo = formItemGroup.find(function (fItem) {
+        return fItem.key === (tabsConfig === null || tabsConfig === void 0 ? void 0 : tabsConfig.activeKey);
+      });
+      return ((_b = activeTabInfo === null || activeTabInfo === void 0 ? void 0 : activeTabInfo.actions) === null || _b === void 0 ? void 0 : _b.length) > 0 ? /*#__PURE__*/_react.default.createElement(_ActionList.default, {
+        list: activeTabInfo.actions || [],
+        form: formChild,
+        other: props
+      }) : null;
+    }
+
+    return hasFooterBar ? renderButtonGroup() : null;
+  }; // 内容渲染
+
+
+  var renderChildrenNodes = function renderChildrenNodes() {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, type === 'form' && /*#__PURE__*/_react.default.createElement(_form.default, {
+      layout: formLayout,
+      ref: setModalFormRef,
+      form: modalForm,
+      onFinish: handleSubmit,
+      hideRequiredMark: fieldStatus === 'viewOnly' || hideRequiredMark,
+      // initialValues={{ ...initialValues }}
+      scrollToFirstError: true,
+      className: "modalForm"
+    }, formPrefix && /*#__PURE__*/_react.default.createElement(_row.default, null, formPrefix(modalForm, props, forceUpdateForm)), formItemGroup ? renderFormItemGroup() : null, formPostfix && /*#__PURE__*/_react.default.createElement(_row.default, null, formPostfix(modalForm, props, forceUpdateForm), " ")), type === 'tabForm' && /*#__PURE__*/_react.default.createElement(_TabForm.default, {
+      grid: size,
+      layout: formLayout,
+      fieldStatus: fieldStatus,
+      actionHide: true,
+      // @ts-ignore
+      getFormFields: function getFormFields(fields, form) {
+        setFormChild(form);
+        _getFormFields && _getFormFields(fields, form);
+      },
+      formItemGroup: formItemGroup,
+      tabsConfig: tabsConfig,
+      onSubmit: handleSubmit,
+      initialValues: Object.assign({}, initialValues),
+      displayLayout: displayLayout
+    }), type === 'stepForm' && /*#__PURE__*/_react.default.createElement(_StepForm.default, {
+      grid: size,
+      layout: formLayout,
+      fieldStatus: fieldStatus,
+      actionHide: true,
+      // @ts-ignore
+      getFormFields: function getFormFields(fields, form) {
+        setFormChild(form);
+        _getFormFields && _getFormFields(fields, form);
+      },
+      formItemGroup: formItemGroup,
+      stepsConfig: stepsConfig,
+      onSubmit: handleSubmit,
+      initialValues: Object.assign({}, initialValues),
+      displayLayout: displayLayout
+    }));
+  }; // 可拖动及缩放
+
+
+  if (dragAble) {
+    return /*#__PURE__*/_react.default.createElement(_antDesignDraggableModal.DraggableModalProvider, null, /*#__PURE__*/_react.default.createElement(_antDesignDraggableModal.DraggableModal, Object.assign({
+      destroyOnClose: true,
+      initialWidth: otherProps.width || _data.general.modalSize[size].width,
+      initialHeight: otherProps.height,
+      zIndex: 1001
+    }, otherProps, {
+      visible: visible,
+      className: "standardModal ".concat(className || '', " ").concat(fieldStatus === 'viewOnly' ? 'is-view' : ''),
+      onCancel: handleCancel,
+      afterClose: onAfterClose,
+      onOk: handleSubmit,
+      title: title,
+      footer: renderFooter()
+    }), renderChildrenNodes()));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_modal.default, Object.assign({
+    destroyOnClose: true,
+    maskClosable: false,
+    width: _data.general.modalSize[size].width
+  }, otherProps, {
+    visible: visible,
+    title: title,
+    footer: renderFooter(),
+    className: "standardModal ".concat(className || '', " ").concat(fieldStatus === 'viewOnly' ? 'is-view' : ''),
+    style: Object.assign({
+      top: '80px'
+    }, style),
+    bodyStyle: Object.assign({
+      maxHeight: bodyMaxHeight,
+      overflowY: 'scroll'
+    }, bodyStyle),
+    onCancel: handleCancel,
+    afterClose: onAfterClose,
+    onOk: handleSubmit
+  }), renderChildrenNodes());
+};
+
+var _default = StandardModal;
+exports.default = _default;

package/lib/StandardModal/style/index.less

@@ -0,0 +1,50 @@
+@root-entry-name: default;
+@import (reference) '~antd/es/style/themes/index';
+
+.standardModal {
+  .ant-modal-body {
+    &::-webkit-scrollbar-track-piece {
+      background: fade(#c1c1c1, 10%);
+    }
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background: fade(#c1c1c1, 50%);
+      border-radius: 20px;
+    }
+  }
+  .modalForm{
+    &.ant-form-horizontal .ant-form-item-label {
+      white-space: inherit;
+      > label {
+        min-height: @input-height-base;
+        height: auto;
+        &.ant-form-item-required::before {
+          margin-right: 2px;
+        }
+      }
+    }
+  }
+}
+
+.modalPanelTitle {
+  height: 32px;
+  margin: 0 0 @padding-md 0;
+  padding-bottom: @padding-xs;
+  color: @text-color;
+  font-size: @font-size-base + 1;
+  font-weight: bold;
+  line-height: 32px;
+  border-bottom: 1px solid @border-color-base;
+}
+.ant-form-item.form-item-view-only {
+  margin-bottom: 0;
+  .ant-form-item-control-input{
+    color: @text-color-secondary;
+  }
+}
+.ant-picker-range-separator {
+  padding: 0 2px;
+}

package/lib/StandardPanel/index.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import './style/index.less';
+interface StandardPanelProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    className?: string;
+    height?: number;
+    title?: any;
+    badges?: badgesListProps[];
+    cateConfig?: GroupListProps;
+    buttonConfig?: GroupListProps;
+    type?: string;
+    postfix?: React.ReactNode;
+}
+interface GroupListProps {
+    activeKey?: string;
+    list?: string[] | any;
+    onChange?: (value: any, data: any) => void;
+    className?: string;
+    size?: any;
+}
+interface badgesListProps {
+    value?: string;
+    label?: string[] | any;
+    color?: string;
+}
+declare const StandardPanel: (props: StandardPanelProps) => JSX.Element;
+export default StandardPanel;