@zat-design/sisyphus-react 3.14.0-beta.2 → 4.0.0-beta.10

package/lib/ProForm/utils/useShouldUpdate.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _lodash = require("lodash");
-var _index = require("./index");
+var _utils = require("../../utils");
 /** FormList中被删除的行也会再触发一次响应式函数 排除这种场景 */
 var isDeleteLine = (form, namePath) => {
   if (namePath) {
@@ -30,7 +30,8 @@ var useShouldUpdate = props => {
     component = props.component,
     originComponent = props.originComponent,
     type = props.type,
-    desensitization = props.desensitization;
+    desensitization = props.desensitization,
+    shouldUpdateDebounce = props.shouldUpdateDebounce;
   var _shouldUpdate = formItemProps.shouldUpdate,
     name = formItemProps.name,
     clearNotShow = formItemProps.clearNotShow,
@@ -38,22 +39,96 @@ var useShouldUpdate = props => {
     namePath = formItemProps.namePath,
     names = formItemProps.names,
     dependNames = formItemProps.dependNames;
-  var timerRef = (0, _react.useRef)();
-  var needClear = (0, _react.useRef)(); // 是否需要执行清值操作
-  var showRef = (0, _react.useRef)();
-  var disabledRef = (0, _react.useRef)();
-  var requiredRef = (0, _react.useRef)();
-  var rulesRef = (0, _react.useRef)();
-  var fieldPropsRef = (0, _react.useRef)();
-  var originComponentRef = (0, _react.useRef)();
-  var dependNamesRef = (0, _react.useRef)();
-  var desensitizationRef = (0, _react.useRef)();
+  var timerRef = (0, _react.useRef)(null); // 清值防抖
+  var debouncedShouldUpdateRef = (0, _react.useRef)(null); // shouldUpdate防抖函数
+  var pendingValuesRef = (0, _react.useRef)(null); // 待处理的表单值
+
+  var needClear = (0, _react.useRef)(false); // 是否需要执行清值操作
+  var showRef = (0, _react.useRef)(false);
+  var disabledRef = (0, _react.useRef)(false);
+  var requiredRef = (0, _react.useRef)(false);
+  var rulesRef = (0, _react.useRef)([]);
+  var fieldPropsRef = (0, _react.useRef)(null);
+  var originComponentRef = (0, _react.useRef)(null);
+  var dependNamesRef = (0, _react.useRef)([]);
+  var desensitizationRef = (0, _react.useRef)([0, 0]);
   var newComponent = originComponent || component; // 解决component默认赋值污染问题，需要使用originComponent
   var _useState = (0, _react.useState)({}),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     reRender = _useState2[1];
   var values = {};
 
+  // 处理表单值更新的函数
+  var processValuesUpdate = currentValues => {
+    var _currentValues;
+    if (namePath) {
+      _currentValues = form.getFieldValue(namePath) || {};
+    } else {
+      _currentValues = currentValues;
+    }
+    var _show = (0, _lodash.isFunction)(show) ? Boolean(show(_currentValues, {
+      form,
+      index,
+      namePath
+    })) : show;
+    var _disabled = (0, _lodash.isFunction)(disabled) ? disabled(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : disabled;
+    var _required = (0, _lodash.isFunction)(required) ? required(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : required;
+    var _rules = (0, _lodash.isFunction)(rules) ? rules(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : rules;
+    var _fieldProps = (0, _lodash.isFunction)(fieldProps) ? fieldProps(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : fieldProps;
+    var _desensitization = (0, _lodash.isFunction)(desensitization) ? desensitization(_currentValues, {
+      form,
+      index,
+      namePath
+    }) : desensitization;
+    var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _utils.customEqualForFunction);
+    var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _utils.customEqualForFunction);
+    var desensitizationRes = (0, _lodash.isEqualWith)(desensitizationRef.current, _desensitization);
+    if (_show !== showRef.current || !(0, _lodash.isEqualWith)(disabledRef.current, _disabled, _utils.customEqualForFunction) || _required !== requiredRef.current || !equalRes || !proEqualRes || !desensitizationRes || _fieldProps !== null && _fieldProps !== void 0 && _fieldProps.transformResponse) {
+      showRef.current = _show;
+      disabledRef.current = _disabled;
+      requiredRef.current = _required;
+      rulesRef.current = _rules;
+      fieldPropsRef.current = _fieldProps;
+      desensitizationRef.current = _desensitization;
+      reRender({});
+    }
+  };
+
+  // 创建防抖函数
+  (0, _react.useEffect)(() => {
+    if (shouldUpdateDebounce > 0 && (dependNames !== null && dependNames !== void 0 && dependNames.length || (0, _lodash.isFunction)(show) || (0, _lodash.isFunction)(disabled) || (0, _lodash.isFunction)(required) || (0, _lodash.isFunction)(rules) || (0, _lodash.isFunction)(fieldProps) || (0, _lodash.isFunction)(originComponent) || (0, _lodash.isFunction)(desensitization))) {
+      debouncedShouldUpdateRef.current = (0, _lodash.debounce)(() => {
+        if (pendingValuesRef.current) {
+          var currentValues = pendingValuesRef.current;
+          pendingValuesRef.current = null;
+
+          // 使用最新的values重新计算状态
+          processValuesUpdate(currentValues);
+        }
+      }, shouldUpdateDebounce);
+    }
+    return () => {
+      var _debouncedShouldUpdat;
+      (_debouncedShouldUpdat = debouncedShouldUpdateRef.current) === null || _debouncedShouldUpdat === void 0 || _debouncedShouldUpdat.cancel();
+    };
+  }, [shouldUpdateDebounce, dependNames === null || dependNames === void 0 ? void 0 : dependNames.length, show, disabled, required, rules, fieldProps, originComponent, desensitization]);
+
   // 不是动态函数直接返回
   if (!(dependNames !== null && dependNames !== void 0 && dependNames.length) && !(0, _lodash.isFunction)(show) && !(0, _lodash.isFunction)(disabled) && !(0, _lodash.isFunction)(required) && !(0, _lodash.isFunction)(rules) && !(0, _lodash.isFunction)(fieldProps) && !(0, _lodash.isFunction)(originComponent) && !(0, _lodash.isFunction)(desensitization)) {
     return {
@@ -157,10 +232,21 @@ var useShouldUpdate = props => {
       // @ts-ignore formList场景取当前行数据，不取shouldUpdate变更后值
       if (dependNames !== null && dependNames !== void 0 && dependNames.length) {
         var curDependNamesValue = dependNames.map(name => (0, _lodash.get)(currentValues, name));
-        var dependNamesChanged = !(0, _lodash.isEqualWith)(dependNamesRef.current, curDependNamesValue, _index.customEqualForFun);
+        var dependNamesChanged = !(0, _lodash.isEqualWith)(dependNamesRef.current, curDependNamesValue, _utils.customEqualForFunction);
         dependNamesRef.current = curDependNamesValue;
         if (!dependNamesChanged) return false;
       }
+
+      // 如果启用了防抖且存在防抖函数
+      if (shouldUpdateDebounce > 0 && debouncedShouldUpdateRef.current) {
+        // 缓存最新的表单值
+        pendingValuesRef.current = currentValues;
+        // 触发防抖函数
+        debouncedShouldUpdateRef.current();
+        return false; // 暂时不更新，由防抖函数控制
+      }
+
+      // 原有的非防抖逻辑
       var _currentValues;
       if (namePath) {
         // formList场景values取当前行数据
@@ -222,8 +308,8 @@ var useShouldUpdate = props => {
           clearTimeout(timerRef.current);
         }
       }
-      var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _index.customEqualForFun);
-      var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _index.customEqualForFun);
+      var equalRes = (0, _lodash.isEqualWith)(rulesRef.current, _rules, _utils.customEqualForFunction);
+      var proEqualRes = (0, _lodash.isEqualWith)(fieldPropsRef.current, _fieldProps, _utils.customEqualForFunction);
       var desensitizationRes = (0, _lodash.isEqualWith)(desensitizationRef.current, _desensitization);
       if (_show !== showRef.current || _disabled !== disabledRef.current || _required !== requiredRef.current || !equalRes || !proEqualRes || !desensitizationRes || _fieldProps !== null && _fieldProps !== void 0 && _fieldProps.transformResponse // 防止fieldProps变更时，transformResponse根据fieldProps新值无法触发更新
       ) {

package/lib/ProIcon/index.js

@@ -5,16 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/tooltip/style");
-var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
-require("antd/es/space/style");
-var _space = _interopRequireDefault(require("antd/es/space"));
-require("antd/es/button/style");
-var _button = _interopRequireDefault(require("antd/es/button"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _ahooks = require("ahooks");
+var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _lodash = require("lodash");
 var _reactSvg = require("react-svg");
@@ -174,9 +169,9 @@ var ProIcon = props => {
   var RenderIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2.default)((0, _objectSpread2.default)({
     className: "anticon"
   }, reset), {}, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
       title: iconText,
-      children: buttonIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, (0, _objectSpread2.default)({
+      children: buttonIcon ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)({
         style: {
           width: size,
           height: size,
@@ -187,7 +182,7 @@ var ProIcon = props => {
         },
         type: "text",
         icon: icon
-      }, buttonProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_space.default, {
+      }, buttonProps)) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
           style: {
             width: size,
@@ -226,7 +221,8 @@ var ProIcon = props => {
                     theme: {
                       primaryColor,
                       qiankunPrimaryColor: value === null || value === void 0 ? void 0 : value.trim()
-                    }
+                    },
+                    forms: {}
                   }
                 });
               }
@@ -260,7 +256,8 @@ var ProIcon = props => {
             theme: {
               primaryColor,
               qiankunPrimaryColor: extendFromMainColor
-            }
+            },
+            forms: {}
           }
         });
       }
@@ -278,9 +275,9 @@ var ProIcon = props => {
       IconInstance: RenderIcon
     });
   }, [_config, primaryColor, qiankunPrimaryColor, language, svgProps]);
-  return !isExtendButtonMode ? IconInstance : /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+  return !isExtendButtonMode ? IconInstance : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
     title: tooltip,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Button, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
       type: isIconMode ? 'text' : (buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.type) || 'link',
       className: proIconClassNames,
       disabled: disabled,

package/lib/ProIcon/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-icon {
   cursor: pointer;

package/lib/ProLayout/components/Layout/Header/index.js

@@ -22,7 +22,7 @@ var Header = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)({
       'pro-layout-header': true,
-      'pro-layout-header-pure': typeof pure !== 'boolean' ? pure.topMenu : pure
+      'pro-layout-header-pure': typeof pure !== 'boolean' ? pure === null || pure === void 0 ? void 0 : pure.topMenu : pure
     }),
     style: {
       height: headerHeight

package/lib/ProLayout/components/Layout/Menu/FoldMenu/index.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/tooltip/style");
-var _tooltip = _interopRequireDefault(require("antd/es/tooltip"));
-require("antd/es/popover/style");
-var _popover = _interopRequireDefault(require("antd/es/popover"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = require("react");
+var _antd = require("antd");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactRouterDom = require("react-router-dom");
 var _index = require("../../index");
@@ -94,7 +91,7 @@ var FoldMenu = props => {
             })]
           })
         }, `${id}-${name}`);
-        return hasChildrenMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_popover.default, {
+        return hasChildrenMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
           mouseEnterDelay: 0,
           content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideMenu.default, {
             dataSource: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, dataSource), {}, {
@@ -126,7 +123,7 @@ var FoldMenu = props => {
             },
             children: LiNode
           })
-        }, `${id}-${name}`) : !collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
+        }, `${id}-${name}`) : !collapsed ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
           placement: "right",
           title: name,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {

package/lib/ProLayout/components/Layout/Menu/FoldMenu/style/index.less

@@ -1,38 +1,35 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-layout-menu-fold-list {
   padding-top: 4px;
-  overflow-y : auto;
+  overflow-y: auto;
 
   li {
-    width        : 100%;
-    min-height   : 48px;
-    padding      : 12px;
-    overflow     : hidden;
+    width: 100%;
+    min-height: 48px;
+    padding: 12px;
+    overflow: hidden;
     text-overflow: ellipsis;
 
     div {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: center;
-      color          : var(--zaui-text, #343434);
+      color: var(--zaui-text, #343434);
 
       .pro-layout-icon {
-        flex     : 0 0 20px;
-        width    : 20px;
-        height   : 20px;
+        flex: 0 0 20px;
+        width: 20px;
         min-width: 20px;
-        color    : #fff;
+        height: 20px;
+        color: #fff;
       }
 
       h2 {
-        flex-grow    : 1;
-        margin-bottom: 0;
-        opacity      : 1;
-        transition   : opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
-          margin 0.3s, color 0.3s;
         display: none;
+        flex-grow: 1;
+        margin-bottom: 0;
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
       }
     }
 
@@ -42,20 +39,20 @@
 
     i {
       display: inline-block;
-      width  : 19px;
-      color  : #909090;
+      width: 19px;
+      color: #909090;
     }
 
     h2 {
-      display     : inline-block;
+      display: inline-block;
       padding-left: var(--zaui-space-size-sm, 8px);
-      color       : var(--zaui-base-bg, #ffffff);
-      font-weight : normal;
-      font-size   : var(--zaui-font-size-md, 14px);
+      color: var(--zaui-base-bg, #ffffff);
+      font-weight: normal;
+      font-size: var(--zaui-font-size-md, 14px);
     }
 
     &.active {
-      background-color: var(--zaui-brand, #006AFF);
+      background-color: var(--zaui-brand, #006aff);
 
       a {
         h2 {
@@ -67,37 +64,41 @@
 }
 
 .pro-layout-menu-tooltip {
-  top       : 48px !important;
-  transform : none !important;
-  transition: none !important
+  top: 48px !important;
+  transform: none !important;
+  transition: none !important;
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-has-notice {
-  top: 80px !important
+  top: 80px !important;
 }
 
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.pro-layout-menu-tooltip-nav-open.@{ant-prefix}-popover-placement-rightTop {
-  left: 220px !important
+  left: 220px !important;
 }
 
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightBottom,
 .pro-layout-menu-tooltip.@{ant-prefix}-popover-placement-rightTop {
-  position    : fixed;
-  z-index     : 1001;
-  left        : 49px !important;
-  padding-left: 0
+  position: fixed;
+  left: 49px !important;
+  z-index: 99;
+  padding-left: 0;
+
+  .@{ant-prefix}-popover-arrow {
+    display: none;
+  }
 }
 
 .pro-layout-menu-tooltip .@{ant-prefix}-popover-inner-content {
-  padding: 0
+  padding: 0;
 }
 
-.pro-layout-menu-tooltip .@{ant-prefix}-popover-content>.@{ant-prefix}-popover-arrow {
-  display: none
+.pro-layout-menu-tooltip .@{ant-prefix}-popover-content > .@{ant-prefix}-popover-arrow {
+  display: none;
 }
 
 .pro-layout-menu-tooltip .@{ant-prefix}-popover-content .@{ant-prefix}-popover-inner {
-  padding   : 0;
+  padding: 0;
   box-shadow: 2px 0px 5px 0px rgba(0, 55, 93, 0.1);
 }

package/lib/ProLayout/components/Layout/Menu/OpenMenu/index.js

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/menu/style");
-var _menu = _interopRequireDefault(require("antd/es/menu"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
+var _antd = require("antd");
 var _ahooks = require("ahooks");
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -137,7 +136,7 @@ var OpenMenu = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: cls,
     style: style,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_menu.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Menu, {
       mode: "inline"
       // @ts-ignore
       ,

package/lib/ProLayout/components/Layout/Menu/OpenMenu/style/index.less

@@ -1,6 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
-
 .pro-layout-open-menu {
   color: #fff;
 

package/lib/ProLayout/components/Layout/Menu/SideMenu/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
 .pro-layout-sider-menu {
   width: 220px;
@@ -61,7 +59,7 @@
             display: none;
 
             & ~ h2 {
-              margin-left: var(--zaui-space-size-md, 16px);
+              margin-left: 32px;
             }
           }
         }
@@ -93,12 +91,16 @@
           color: #909090;
         }
 
+ 
+
         .@{ant-prefix}-menu-submenu-title,
         &.@{ant-prefix}-menu-root > .@{ant-prefix}-menu-item-only-child,
         &.@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item {
           min-height: 40px;
-          padding-top: 10px;
-          padding-bottom: 10px;
+          padding-top: 8px;
+          padding-bottom: 8px;
+          width: 100%;
+          border-radius: 0;
         }
       }
     }

package/lib/ProLayout/components/Layout/Menu/index.js

@@ -34,7 +34,7 @@ var Menu = props => {
   } else if (dataSource) {
     menus = dataSource === null || dataSource === void 0 ? void 0 : dataSource.menus;
   }
-  if (pure.leftMenu || pure === true) {
+  if (pure !== null && pure !== void 0 && pure.leftMenu || pure === true) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

package/lib/ProLayout/components/Layout/Menu/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 @import '../FoldMenu/style/index.less';
 @import '../OpenMenu/style/index.less';
 @import '../SideMenu/style/index.less';

package/lib/ProLayout/components/Layout/Notice/style/index.less

@@ -1,5 +1,3 @@
-@root-entry-name: 'default';
-@import (reference) '~antd/es/style/themes/index.less';
 
   /** 告知区 */
   .pro-layout-header-notice {

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

@@ -5,20 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-require("antd/es/descriptions/style");
-var _descriptions = _interopRequireDefault(require("antd/es/descriptions"));
-require("antd/es/space/style");
-var _space = _interopRequireDefault(require("antd/es/space"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-require("antd/es/collapse/style");
-var _collapse = _interopRequireDefault(require("antd/es/collapse"));
 var _react = require("react");
+var _antd = require("antd");
 var _icons = require("@ant-design/icons");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _fold = _interopRequireDefault(require("../../../assets/fold.svg"));
 var _index = _interopRequireDefault(require("../../../ProIcon/index"));
 var _jsxRuntime = require("react/jsx-runtime");
-var Panel = _collapse.default.Panel;
 var ProCollapse = props => {
   var title = props.title,
     id = props.id,
@@ -68,29 +62,21 @@ var ProCollapse = props => {
     style: contentStyle,
     children: children
   });
-  var renderPanel = () => {
+
+  // 生成 Collapse items 配置
+  var getCollapseItems = () => {
     var _title = title;
+    var panelClassName = 'pro-collapse-panel';
+    var panelProps = {};
     if (level === '2') {
-      var level2Panel = (0, _classnames.default)({
+      panelClassName = (0, _classnames.default)({
         'pro-collapse-level2-collapse': towCollapse,
         'pro-collapse-level2-no-collapse': !towCollapse,
         'pro-collapse-panel': true
       });
-      var hasCollapse = {};
       if (!towCollapse) {
-        hasCollapse.collapsible = 'disabled';
+        panelProps.collapsible = 'disabled';
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
-        header: _title,
-        className: level2Panel,
-        extra: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: "extra-info",
-          children: extra
-        }),
-        forceRender: true
-      }, hasCollapse), collapsePanelProps), {}, {
-        children: content
-      }), "1");
     }
     if (level === '3') {
       var level3Panel = (0, _classnames.default)({
@@ -98,24 +84,24 @@ var ProCollapse = props => {
         'pro-collapse-level3-no-collapse': !threeCollapse,
         'pro-collapse-panel': true
       });
-      var _hasCollapse = {};
+      var hasCollapse = {};
       if (!threeCollapse) {
-        _hasCollapse.collapsible = 'disabled';
+        hasCollapse.collapsible = 'disabled';
       }
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
-        header: _title,
-        className: level3Panel,
+      return [(0, _objectSpread2.default)((0, _objectSpread2.default)({
+        key: '1',
+        label: _title,
+        children: content,
         extra: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
           className: "extra-info",
           children: extra
         }),
+        className: level3Panel,
         forceRender: true
-      }, _hasCollapse), collapsePanelProps), {}, {
-        children: content
-      }), "1");
+      }, hasCollapse), collapsePanelProps)];
     }
     if (icon) {
-      _title = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_space.default, {
+      _title = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_antd.Space, {
         size: 8,
         align: "center",
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -129,25 +115,25 @@ var ProCollapse = props => {
         }), title]
       });
     }
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Panel, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-      header: _title,
-      className: "pro-collapse-panel",
+    return [(0, _objectSpread2.default)((0, _objectSpread2.default)({
+      key: '1',
+      label: _title,
+      children: content,
       extra: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "extra-info",
         children: extra
       }),
+      className: panelClassName,
       forceRender: true
-    }, collapsePanelProps), {}, {
-      children: content
-    }), "1");
+    }, panelProps), collapsePanelProps)];
   };
   var renderTitleList = () => {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: cls,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_descriptions.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions, {
         column: column,
         children: titleList === null || titleList === void 0 ? void 0 : titleList.map(item => {
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_descriptions.default.Item, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Descriptions.Item, {
             label: item.label,
             children: item.value || '-'
           }, item.label);
@@ -188,7 +174,7 @@ var ProCollapse = props => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     id: id,
     style: style,
-    children: Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.default, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    children: Array.isArray(titleList) && titleList.length ? renderTitleList() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Collapse, (0, _objectSpread2.default)({
       className: cls,
       bordered: false,
       expandIcon: _ref => {
@@ -199,10 +185,9 @@ var ProCollapse = props => {
       },
       expandIconPosition: "end",
       defaultActiveKey: folding ? [] : ['1'],
-      onChange: onChange
-    }, finalCollapseProps), {}, {
-      children: renderPanel()
-    }))
+      onChange: onChange,
+      items: getCollapseItems()
+    }, finalCollapseProps))
   });
 };
 var _default = exports.default = ProCollapse;