@zat-design/sisyphus-react 3.4.2-beta.1 → 3.4.2-beta.3

package/es/style/theme/tokens.less

@@ -56,8 +56,8 @@
 @zaui-form-required-after: var(--zaui-form-required-after; inline);
 @zaui-form-required-before: var(--zaui-form-required-before; none);
 @zaui-form-label-width: var(--zaui-form-label-width; 130px);
-@zaui-border-radius: var(--zaui-border-radius; 4px);
-@zaui-border-radius-card: var(--zaui-border-radius-card; 2px);
+@zaui-border-radius: var(--zaui-border-radius; 8px);
+@zaui-border-radius-card: var(--zaui-border-radius-card; 4px);
 @zaui-font-size-title:
   calc(var(--zaui-font-size-title; 16px) + var(--zaui-base-font-size; 0px));
 @zaui-font-size-card-title:

package/es/tokens.js

@@ -53,8 +53,8 @@ var tokens = {
   '@zaui-form-required-after': 'var(--zaui-form-required-after, inline)',
   '@zaui-form-required-before': 'var(--zaui-form-required-before, none)',
   '@zaui-form-label-width': 'var(--zaui-form-label-width, 130px)',
-  '@zaui-border-radius': 'var(--zaui-border-radius, 4px)',
-  '@zaui-border-radius-card': 'var(--zaui-border-radius-card, 2px)',
+  '@zaui-border-radius': 'var(--zaui-border-radius, 8px)',
+  '@zaui-border-radius-card': 'var(--zaui-border-radius-card, 4px)',
   '@zaui-font-size-title': 'calc(var(--zaui-font-size-title, 16px) + var(--zaui-base-font-size, 0px))',
   '@zaui-font-size-card-title': 'calc(var(--zaui-font-size-card-title, 16px) + var(--zaui-base-font-size, 0px))',
   '@zaui-font-size': 'calc(var(--zaui-font-size, 14px) + var(--zaui-base-font-size, 0px))',

package/lib/ProEditLabel/style/index.less

@@ -39,7 +39,7 @@
 
     &:active {
       background   : #E3E8F0;
-      border-radius: var(--zaui-border-radius-card, 2px);
+      border-radius: var(--zaui-border-radius-card, 4px);
     }
   }
 

package/lib/ProEditTable/components/RenderField/index.js

@@ -28,12 +28,11 @@ var _useFieldProps = require("../../../ProForm/utils/useFieldProps");
 var _useListChanged3 = require("../../../ProForm/utils/useListChanged");
 var _useRules = _interopRequireDefault(require("../../../ProForm/utils/useRules"));
 var _utils = require("../../../ProForm/utils");
-var _locale = _interopRequireDefault(require("../../../locale"));
 var _excluded = ["type", "valueType", "names", "fieldProps", "labelRequired", "editRender", "component", "viewRender", "title", "originTitle", "label", "dataIndex", "formItemProps", "isEditable", "required", "rules", "equalWith", "className"];
 /* eslint-disable prefer-destructuring */
 /* eslint-disable prefer-const */
 var RenderField = function RenderField(_ref) {
-  var _type, _type$replace, _fieldProps2, _fieldProps3, _fieldProps4, _names, _formItemChildProps$p, _TargetComponent4;
+  var _type, _type$replace, _fieldProps2, _fieldProps3, _fieldProps4, _names, _TargetComponent4;
   var value = _ref.text,
     record = _ref.record,
     index = _ref.index,
@@ -144,7 +143,7 @@ var RenderField = function RenderField(_ref) {
   var formItemChildProps = (0, _objectSpread2.default)({}, _fieldProps);
   // 允许formItem的属性放在column最外层
   var _formItemProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, resetProps), internalRule);
-  if (['Switch', 'Checkbox'].includes(type)) {
+  if (['Switch', 'SwitchCheckbox'].includes(type)) {
     _formItemProps.valuePropName = 'checked';
     valueType = 'switch';
   }
@@ -244,8 +243,6 @@ var RenderField = function RenderField(_ref) {
       TargetComponent = viewRender;
     }
   }
-  var defaultPlaceholder = ['Select', 'EnumSelect', 'DatePicker', 'RangePicker', 'Cascader', 'ProSelect', 'ProEnum', 'ProTimeLimit'].includes(type) ? "".concat(_locale.default.ProEditTable.select).concat((0, _lodash.isString)(label) ? label || title : '') : "".concat(_locale.default.ProEditTable.enter).concat((0, _lodash.isString)(label) ? label || title : '');
-  var _placeholder = (_formItemChildProps$p = formItemChildProps === null || formItemChildProps === void 0 ? void 0 : formItemChildProps.placeholder) !== null && _formItemChildProps$p !== void 0 ? _formItemChildProps$p : defaultPlaceholder;
   var onChange = formItemChildProps === null || formItemChildProps === void 0 ? void 0 : formItemChildProps.onChange;
   var onFieldChange = formItemChildProps === null || formItemChildProps === void 0 ? void 0 : formItemChildProps.onFieldChange;
   var onBlur = formItemChildProps === null || formItemChildProps === void 0 ? void 0 : formItemChildProps.onBlur;
@@ -306,7 +303,7 @@ var RenderField = function RenderField(_ref) {
           }
           _args = [].concat(args);
           rowPath = [].concat((0, _toConsumableArray2.default)(namePath), [index]);
-          row = form.getFieldValue(rowPath);
+          row = form.getFieldValue(rowPath, true);
           orgRow = (0, _lodash.cloneDeep)(row);
           if (!onFieldChange) {
             _context.next = 18;
@@ -358,7 +355,9 @@ var RenderField = function RenderField(_ref) {
               return [].concat((0, _toConsumableArray2.default)(rowPath), [key]);
             });
             if (validateFieldKeys === null || validateFieldKeys === void 0 ? void 0 : validateFieldKeys.length) {
-              form.validateFields(validateFieldKeys);
+              setTimeout(function () {
+                form.validateFields(validateFieldKeys);
+              }, 100);
             }
           }
           setState({
@@ -471,8 +470,7 @@ var RenderField = function RenderField(_ref) {
     originalValue = _useListChanged2[1];
   var componentProps = (0, _objectSpread2.default)((0, _objectSpread2.default)((0, _objectSpread2.default)({
     form: form,
-    name: cellName,
-    placeholder: _placeholder
+    name: cellName
   }, _fieldProps), (_TargetComponent4 = TargetComponent) === null || _TargetComponent4 === void 0 ? void 0 : _TargetComponent4.props), {}, {
     disabled: _disabled,
     onChange: _onchange,
@@ -490,7 +488,7 @@ var RenderField = function RenderField(_ref) {
   if (isCell) {
     record["".concat(dataIndex, "-Disabled")] = _disabled;
   }
-  if (['Switch', 'Checkbox'].includes(type)) {
+  if (['Switch', 'SwitchCheckbox'].includes(type)) {
     _formItemProps.valuePropName = 'checked';
   }
   (0, _react.useEffect)(function () {

package/lib/ProEditTable/style/index.less

@@ -55,7 +55,7 @@
 
     &:hover {
       border       : 1px solid #DEE0E3;
-      border-radius: var(--zaui-border-radius, 4px);
+      border-radius: var(--zaui-border-radius, 8px);
       text-indent  : 5px;
     }
   }

package/lib/ProEditTable/utils/tools.js

@@ -12,7 +12,9 @@ var getRandom = exports.getRandom = function getRandom() {
 var difference = exports.difference = function difference(object, base) {
   var changes = function changes(object, base) {
     return (0, _lodash.transform)(object, function (result, value, key) {
-      if (!(0, _lodash.isEqual)(value, base[key])) {
+      if (key.indexOf('-') > -1) {
+        result[key] = true;
+      } else if (!(0, _lodash.isEqual)(value, base[key])) {
         result[key] = (0, _lodash.isObject)(value) && (0, _lodash.isObject)(base[key]) ? changes(value, base[key]) : value;
       }
     });

package/lib/ProForm/components/base/DatePicker/index.js

@@ -36,7 +36,7 @@ var DatePicker = function DatePicker(props) {
     var viewChildren = null;
     if (!value) {
       viewChildren = null;
-    } else if (typeof format === 'string' && _moment.default.isMoment(value)) {
+    } else if (typeof format === 'string' && (0, _lodash.isObject)(value)) {
       viewChildren = value.format(format);
     } else if ((0, _lodash.isFunction)(format)) {
       viewChildren = format(value);

package/lib/ProForm/components/combination/Group/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _antd = require("antd");
 var _react = require("react");
@@ -28,10 +27,6 @@ var Group = function Group(props) {
     id = props.id,
     value = props.value,
     onFieldChange = props.onFieldChange;
-  var _useCounter = (0, _ahooks.useCounter)(0),
-    _useCounter2 = (0, _slicedToArray2.default)(_useCounter, 2),
-    num = _useCounter2[0],
-    inc = _useCounter2[1].inc;
   var _ref = _ProForm.default.useFieldProps() || {},
     names = _ref.names,
     name = _ref.name,
@@ -69,13 +64,15 @@ var Group = function Group(props) {
     })
   }, "".concat(className), className));
   (0, _ahooks.useDeepCompareEffect)(function () {
+    var _document, _document$activeEleme;
+    // 焦点激活的表单
+    var touchName = ((_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.id) || '';
     // 模拟change,初始化不执行onFieldChange
-    if ((0, _lodash.isFunction)(onFieldChange) && num >= 1) {
+    if ((0, _lodash.isFunction)(onFieldChange) && form.isFieldsTouched(names) && (0, _utils.transformNamesString)(names).includes(touchName)) {
       onFieldChange(value, form.getFieldsValue(), {
         form: form
       });
     }
-    inc();
   }, [value]);
   return (0, _jsxRuntime.jsx)("div", {
     className: _className,

package/lib/ProForm/components/combination/Group/style/index.less

@@ -9,13 +9,13 @@
 }
 
 .start-radius() {
-  border-start-start-radius: var(--zaui-border-radius, 4px);
-  border-end-start-radius: var(--zaui-border-radius, 4px);
+  border-start-start-radius: 4px;
+  border-end-start-radius: 4px;
 }
 
 .end-radius() {
-  border-start-end-radius: var(--zaui-border-radius, 4px);
-  border-end-end-radius: var(--zaui-border-radius, 4px);
+  border-start-end-radius: 4px;
+  border-end-end-radius: 4px;
 }
 
 .pro-group {

package/lib/ProForm/components/combination/Group/utils.d.ts

@@ -6,3 +6,5 @@ import { SpaceType } from './propsType';
 * @returns
 */
 export declare const insertSeparator: (columns: any, space?: SpaceType, separatorNode?: ReactNode, otherProps?: any) => any;
+/** 转换names */
+export declare const transformNamesString: (arr: (string | string[])[]) => (string | string[])[];

package/lib/ProForm/components/combination/Group/utils.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.insertSeparator = void 0;
+exports.transformNamesString = exports.insertSeparator = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 /**
 * 插入间隔符
@@ -40,4 +40,14 @@ var insertSeparator = exports.insertSeparator = function insertSeparator(columns
     }
     return result;
   }, []);
+};
+/** 转换names */
+var transformNamesString = exports.transformNamesString = function transformNamesString(arr) {
+  var result = arr.map(function (subArr) {
+    if (Array.isArray(subArr)) {
+      return subArr.join('_');
+    }
+    return subArr;
+  });
+  return result;
 };

package/lib/ProForm/components/combination/ProTimeLimit/index.js

@@ -55,7 +55,7 @@ var ProTimeLimit = exports.ProTimeLimit = function ProTimeLimit(props) {
     onChange = _useControlled2[1];
   var initialConfig = (0, _ProConfigProvider.useProConfig)('ProTimeLimit');
   var isForever = (0, _react.useMemo)(function () {
-    if (_moment.default.isMoment(value)) {
+    if ((0, _lodash.isObject)(value)) {
       return foreverMoment.format(format) === value.format(format);
     }
     return false;
@@ -75,6 +75,12 @@ var ProTimeLimit = exports.ProTimeLimit = function ProTimeLimit(props) {
         children: foreverText
       });
     }
+    if ((0, _lodash.isObject)(value)) {
+      return (0, _jsxRuntime.jsx)(_Container.default, {
+        viewEmpty: viewEmpty,
+        children: value.format(format)
+      });
+    }
     return (0, _jsxRuntime.jsx)(_Container.default, {
       viewEmpty: viewEmpty,
       children: props.value

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

@@ -7,33 +7,36 @@
   .@{ant-prefix}-menu-root {
     overflow-y: auto !important;
 
-    &>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
-    &>.@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
+    & > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
+    & > .@{ant-prefix}-menu-item.@{ant-prefix}-menu-item-only-child {
       padding-left: 16px !important;
     }
 
-    &>.@{ant-prefix}-menu-submenu {
+    & > .@{ant-prefix}-menu-submenu {
       .@{ant-prefix}-menu-sub {
-        background: #1A202D;
+        background: #1a202d;
       }
 
-      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-submenu>.@{ant-prefix}-menu-submenu-title,
-      &>.@{ant-prefix}-menu-item-only-child,
-      &>.@{ant-prefix}-menu-sub>.@{ant-prefix}-menu-item-only-child {
+      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-submenu > .@{ant-prefix}-menu-submenu-title,
+      & > .@{ant-prefix}-menu-item-only-child,
+      & > .@{ant-prefix}-menu-sub > .@{ant-prefix}-menu-item-only-child {
         padding-left: 16px !important;
       }
     }
 
-    &>.@{ant-prefix}-menu-item-only-child {
-      min-height    : 48px;
-      padding-top   : 12px;
-      padding-bottom: calc(var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) * var(--zaui-size; 1));
-      margin        : 0;
-      height        : auto;
+    & > .@{ant-prefix}-menu-item-only-child {
+      height: auto;
+      min-height: 48px;
+      margin: 0;
+      padding-top: 12px;
+      padding-bottom: calc(
+        var(--zaui-space-size-md; 16px) * var(--zaui-size; 1) - var(--zaui-space-size-xs; 4px) *
+          var(--zaui-size; 1)
+      );
 
       h2 {
+        height: auto !important;
         line-height: initial !important;
-        height     : auto !important;
         white-space: pre-wrap;
       }
     }
@@ -45,7 +48,6 @@
         display: none;
       }
     }
-
   }
 
   .@{ant-prefix}-menu-inline {
@@ -62,14 +64,12 @@
       h2 {
         color: #fff;
       }
-
     }
   }
 
-
   .@{ant-prefix}-menu.@{ant-prefix}-menu-dark {
-    background: #1A202D;
     overflow-x: hidden;
+    background: #1a202d;
 
     .@{ant-prefix}-menu-item-only-child {
       &:hover {
@@ -90,104 +90,108 @@
     }
   }
 
-  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline>.@{ant-prefix}-menu-item,
+  .@{ant-prefix}-menu-sub.@{ant-prefix}-menu-inline > .@{ant-prefix}-menu-item,
   .@{ant-prefix}-menu-submenu-title {
-    white-space: pre-wrap;
-    line-height: initial !important;
-    height     : auto !important;
-    margin     : 0;
+    height: auto !important;
+    min-height: 48px;
+    margin: 0;
     padding: 12px 0;
-    min-height : 48px;
+    line-height: initial !important;
+    white-space: pre-wrap;
   }
 
   .@{ant-prefix}-menu-title-content {
-
-
     div {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: left;
 
       .pro-layout-icon {
-        flex  : 0 0 20px;
-        width : 20px;
+        flex: 0 0 20px;
+        width: 20px;
         height: 20px;
-        color : #CACACA;
+        color: #cacaca;
       }
 
       h2 {
-        flex-grow    : 1;
+        display: inline-block;
+        flex-grow: 1;
         margin-bottom: 0;
-        opacity      : 1;
-        transition   : opacity .3s cubic-bezier(.645, .045, .355, 1), margin .3s, color .3s;
-        display      : inline-block;
-        padding-left : 12px;
-        color        : #CACACA;
-        font-weight  : 400;
-        font-size    : var(--zaui-font-size-md, 14px);
+        padding-left: 12px;
+        color: #cacaca;
+        font-weight: 400;
+        font-size: var(--zaui-font-size-md, 14px);
+        opacity: 1;
+        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
       }
     }
-
-
   }
 
   .anticon-caret-down {
-    color     : #CACACA;
-    transform : rotateZ(0deg);
-    top       : auto;
+    top: auto;
+    color: #cacaca;
+    transform: rotateZ(0deg);
     transition: all 0.1s ease-in;
   }
 
   .@{ant-prefix}-menu-submenu-open {
     .anticon-caret-down {
+      color: #fff;
       transform: rotateZ(180deg);
-      color    : #fff;
     }
 
     .@{ant-prefix}-menu-submenu-inline {
       .anticon-caret-down {
+        color: #cacaca;
         transform: rotateZ(0deg);
-        color    : #CACACA;
       }
 
       &.@{ant-prefix}-menu-submenu-open {
         .anticon-caret-down {
+          color: #fff;
           transform: rotateZ(180deg);
-          color    : #fff;
         }
       }
     }
   }
 
-  .@{ant-prefix}-menu-submenu:hover>.@{ant-prefix}-menu-submenu-title>.@{ant-prefix}-menu-submenu-expand-icon {
+  .@{ant-prefix}-menu-submenu:hover
+    > .@{ant-prefix}-menu-submenu-title
+    > .@{ant-prefix}-menu-submenu-expand-icon {
     color: #fff;
   }
 
+ .@{ant-prefix}-menu-item-selected{
+  background: #000 !important;
+  .@{ant-prefix}-menu-title-content{
+    h2{
+      font-weight: bold !important;
+    }
+  }
+ }
+
   .@{ant-prefix}-menu-submenu-selected {
-    &>.@{ant-prefix}-menu-submenu-title {
+    & > .@{ant-prefix}-menu-submenu-title {
       .@{ant-prefix}-menu-title-content div {
         .pro-layout-icon {
           color: #fff;
         }
 
         h2 {
-          font-weight: bold;
-          color      : #fff;
+          color: #fff;
         }
       }
-
     }
 
     .@{ant-prefix}-menu-item-only-child .@{ant-prefix}-menu-title-content div {
       .pro-layout-icon {
-        color: #CACACA;
+        color: #cacaca;
       }
 
       h2 {
+        color: #cacaca;
         font-weight: 400;
-        color      : #CACACA;
       }
     }
-
   }
 }

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

@@ -1,36 +1,35 @@
 @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";
+@import '../FoldMenu/style/index.less';
+@import '../OpenMenu/style/index.less';
+@import '../SideMenu/style/index.less';
 
 /** 侧边栏 + 内容区 */
 .pro-layout-row {
   flex-direction: column;
 
-
   .pro-layout-menu-open {
-    .pro-layout-arrow  {
+    .pro-layout-arrow {
       transform: rotate(225deg);
     }
   }
 
   .pro-layout-arrow {
-    width           : 10px;
-    height          : 10px;
+    width: 10px;
+    height: 10px;
+    margin-left: -5px;
     background-color: transparent;
     /* 模块背景为透明 */
-    border-color    : #fff;
-    border-style    : solid;
-    border-width    : 2px 2px 0 0;
-    margin-left     : -5px;
-    transform       : rotate(45deg);
+    border-color: #fff;
+    border-style: solid;
+    border-width: 2px 2px 0 0;
+    transform: rotate(45deg);
   }
 
   &.pro-layout-menu-no-collapsed {
     .pro-layout-menu-fold-li {
-      display        : flex;
-      align-items    : center;
+      display: flex;
+      align-items: center;
       justify-content: center;
 
       div {
@@ -42,11 +41,10 @@
       }
 
       h2 {
-        display    : inline-block;
+        display: inline-block;
         white-space: nowrap;
-        opacity    : 0;
-        transition : opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1),
-          color 0.5s;
+        opacity: 0;
+        transition: opacity 0.5s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.5s;
       }
     }
   }
@@ -81,18 +79,18 @@
   }
 
   .pro-layout-menu {
-    position        : fixed;
-    top             : 48px;
-    left            : 0;
-    z-index         : 1;
-    width           : 48px;
-    height          : 100vh;
-    min-height      : 100%;
-    padding         : 0;
-    overflow-x      : hidden;
-    overflow-y      : auto;
+    position: fixed;
+    top: 48px;
+    left: 0;
+    z-index: 99;
+    width: 48px;
+    height: 100vh;
+    min-height: 100%;
+    padding: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
     background-color: #1a202d;
-    transition      : background .3s, width .3s cubic-bezier(.2, 0, 0, 1) 0s;
+    transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
 
     &.pro-layout-menu-open {
       width: 220px;
@@ -101,52 +99,50 @@
 
   /** 内容区 */
   .pro-layout-content {
-    flex       : auto;
+    z-index: 1;
+    flex: auto;
+    flex: auto;
+    min-height: calc(100vh - 48px);
+    margin-top: 48px;
     margin-left: 48px;
-    padding    : 0 var(--zaui-space-size-md, 16px);
-    transition : all 0.3s ease-in-out;
-    z-index    : 1;
-    flex       : auto;
-    min-height : calc(100vh - 48px);
-    margin-top : 48px;
+    padding: 0 var(--zaui-space-size-md, 16px);
+    transition: all 0.3s ease-in-out;
   }
 
-
-
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed {
-    left : 0;
-    width: 220px
+    left: 0;
+    width: 220px;
   }
 
   .pro-layout-menu.pro-layout-menu-open .pro-layout-menu-collapsed img {
-    transform: rotate(-180deg)
+    transform: rotate(-180deg);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed {
-    position       : fixed;
-    bottom         : 0;
-    left           : 0;
-    z-index        : 2;
-    display        : flex;
-    align-items    : center;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    z-index: 2;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    width          : 48px;
-    height         : 48px;
-    transition     : all .25s ease;
-    background     : #292f3b
+    width: 48px;
+    height: 48px;
+    background: #292f3b;
+    transition: all 0.25s ease;
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed:hover {
-    background-color: rgba(185, 185, 189, .1)
+    background-color: rgba(185, 185, 189, 0.1);
   }
 
   .pro-layout-menu .pro-layout-menu-collapsed img {
     display: inline-block;
-    width  : 20px;
-    height : 20px
+    width: 20px;
+    height: 20px;
   }
 
-  .pro-layout-menu-open~.pro-layout-content {
-    margin-left: 220px !important
+  .pro-layout-menu-open ~ .pro-layout-content {
+    margin-left: 220px !important;
   }
 }

package/lib/ProLayout/components/ProCollapse/PropTypes.d.ts

@@ -15,6 +15,11 @@ export interface TitleListProps {
 }
 export interface ProCollapseProps {
     /**
+   * @description       折叠头部模式
+   * @default           default
+   */
+    mode?: 'default' | 'card';
+    /**
     * @description       折叠头部标题
     * @default           -
     */

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

@@ -30,10 +30,13 @@ var ProCollapse = function ProCollapse(props) {
     _props$folding = props.folding,
     folding = _props$folding === void 0 ? false : _props$folding,
     collapseProps = props.collapseProps,
+    _props$mode = props.mode,
+    mode = _props$mode === void 0 ? 'default' : _props$mode,
     collapsePanelProps = props.collapsePanelProps,
     className = props.className;
   var cls = (0, _classnames.default)((0, _defineProperty2.default)({
     'pro-collapse': true,
+    'pro-collapse-card': mode === 'card',
     'pro-collapse-level2': level === '2',
     'pro-collapse-list': titleList === null || titleList === void 0 ? void 0 : titleList.length,
     'pro-collapse-no-title': !title