linkmore-design 1.1.13-alpha.2 → 1.1.13-alpha.4

package/lib/Descriptions/style/index.css

@@ -665,6 +665,9 @@ p {
   padding-right: 24px;
   padding-bottom: 8px;
 }
+.lm_descriptions .ant-descriptions-item:last-child {
+  padding-right: 0;
+}
 .lm_descriptions .ant-descriptions-item .ant-descriptions-item-container {
   color: var(--color-85);
   font-size: 12px;

package/lib/Descriptions/style/variables.css

@@ -153,6 +153,9 @@
   padding-right: 24px;
   padding-bottom: 8px;
 }
+.lm_descriptions .ant-descriptions-item:last-child {
+  padding-right: 0;
+}
 .lm_descriptions .ant-descriptions-item .ant-descriptions-item-container {
   color: var(--color-85);
   font-size: 12px;

package/lib/Form/Form.js

@@ -49,7 +49,7 @@ var _context = require("./context");
 
 var _useForm3 = _interopRequireDefault(require("./hooks/useForm"));
 
-var _container = _interopRequireDefault(require("./container"));
+var _WrapperItem = _interopRequireDefault(require("./WrapperItem"));
 
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
@@ -96,8 +96,10 @@ var InternalForm = function InternalForm(props, ref) {
       onFinishFailed = props.onFinishFailed,
       name = props.name,
       responsive = props.responsive,
-      restFormProps = __rest(props, ["prefixCls", "className", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "responsive"]);
+      customizeChildren = props.children,
+      restFormProps = __rest(props, ["prefixCls", "className", "size", "disabled", "form", "colon", "labelAlign", "labelWrap", "labelCol", "wrapperCol", "hideRequiredMark", "layout", "scrollToFirstError", "requiredMark", "onFinishFailed", "name", "responsive", "children"]);
 
+  var children = customizeChildren;
   var mergedRequiredMark = (0, React.useMemo)(function () {
     if (requiredMark !== undefined) {
       return requiredMark;
@@ -156,6 +158,12 @@ var InternalForm = function InternalForm(props, ref) {
     }
   };
 
+  if (responsive) {
+    children = /*#__PURE__*/React.createElement(_WrapperItem.default, {
+      children: children
+    });
+  }
+
   var formNode = /*#__PURE__*/React.createElement(_DisabledContext.DisabledContextProvider, {
     disabled: disabled
   }, /*#__PURE__*/React.createElement(_SizeContext.SizeContextProvider, {
@@ -165,6 +173,7 @@ var InternalForm = function InternalForm(props, ref) {
   }, /*#__PURE__*/React.createElement(_rcFieldForm.default, Object.assign({
     id: name
   }, restFormProps, {
+    children: children,
     name: name,
     onFinishFailed: onInternalFinishFailed,
     form: wrapForm,
@@ -172,8 +181,8 @@ var InternalForm = function InternalForm(props, ref) {
   })))));
 
   if (responsive) {
-    return /*#__PURE__*/React.createElement(_container.default, {
-      responsive: true
+    return /*#__PURE__*/React.createElement("div", {
+      className: "lm_form_responsive_box"
     }, formNode);
   }
 

package/lib/Form/FormItem/ItemHolder.js

@@ -145,17 +145,8 @@ function ItemHolder(props) {
   }, [mergedValidateStatus, hasFeedback]); // ======================== Render ========================
 
   var itemClassName = (_itemClassName = {}, (0, _defineProperty2.default)(_itemClassName, itemPrefixCls, true), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-with-help"), hasHelp || debounceErrors.length || debounceWarnings.length), (0, _defineProperty2.default)(_itemClassName, "".concat(className), !!className), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-has-feedback"), mergedValidateStatus && hasFeedback), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-has-success"), mergedValidateStatus === 'success'), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-has-warning"), mergedValidateStatus === 'warning'), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-has-error"), mergedValidateStatus === 'error'), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-is-validating"), mergedValidateStatus === 'validating'), (0, _defineProperty2.default)(_itemClassName, "".concat(itemPrefixCls, "-hidden"), hidden), (0, _defineProperty2.default)(_itemClassName, 'lm_form-item-tip-error lm_form-item-tip-error-top', errorPlacement === 'top'), (0, _defineProperty2.default)(_itemClassName, 'lm_form-item-tip-error lm_form-item-tip-error-left', errorPlacement === 'left'), (0, _defineProperty2.default)(_itemClassName, 'lm_form-item-tip-error lm_form-item-tip-error-right', errorPlacement === 'right'), (0, _defineProperty2.default)(_itemClassName, 'lm_form-item-tip-error lm_form-item-tip-error-bottom', errorPlacement === 'bottom'), (0, _defineProperty2.default)(_itemClassName, 'ant-form-item-responsive', responsive), _itemClassName);
-  var nthCls = '';
-
-  if (itemRef.current && itemRef.current.classList) {
-    var list = itemRef.current.classList;
-    if (list.contains('nth-three')) nthCls = 'nth-three';
-    if (list.contains('nth-four')) nthCls = 'nth-four';
-    if (list.contains('nth-five')) nthCls = 'nth-five';
-  }
-
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classnames.default)(itemClassName, nthCls),
+    className: (0, _classnames.default)(itemClassName),
     style: style,
     ref: itemRef
   }, /*#__PURE__*/React.createElement(_Grid.Row, Object.assign({

package/lib/Form/FormWrapper.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.FC<any>;
+export default _default;

package/lib/Form/FormWrapper.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _WrapperItem = _interopRequireDefault(require("./WrapperItem"));
+
+function withComponent(WrappedComponent) {
+  var WithComponent = function WithComponent(props) {
+    return /*#__PURE__*/_react.default.createElement(WrappedComponent, Object.assign({}, props, {
+      with: true
+    }));
+  };
+
+  var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+  WithComponent.displayName = "withComponent(".concat(wrappedComponentName, ")");
+  return WithComponent;
+}
+
+var FormWrapper = function FormWrapper(props) {
+  return /*#__PURE__*/_react.default.createElement(_WrapperItem.default, Object.assign({}, props, {
+    user: true
+  }));
+};
+
+var _default = withComponent(FormWrapper);
+
+exports.default = _default;

package/lib/Form/WrapperItem.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IWrapper } from './interface';
+declare const WrapperItem: React.FC<IWrapper>;
+export default WrapperItem;

package/lib/Form/WrapperItem.js

@@ -0,0 +1,235 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _lodash = require("lodash");
+
+var _Row = _interopRequireDefault(require("../Row"));
+
+var _Col = _interopRequireDefault(require("../Col"));
+
+var icon = require('./images/icon_collapse.svg'); // 行个数 => 在24份中占用的分数
+
+
+var rowMap = new Map([[5, [4, 1]], [4, [5, 1]], [3, [7, 1]]]);
+
+var Title = function Title(props) {
+  var title = props.title,
+      onToggle = props.onToggle;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      visible = _useState2[0],
+      setVisible = _useState2[1];
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "form_responsive_group_title",
+    onClick: function onClick() {
+      setVisible(!visible);
+      onToggle && onToggle(!visible);
+    }
+  }, /*#__PURE__*/_react.default.createElement("h3", null, title), /*#__PURE__*/_react.default.createElement("img", {
+    src: icon,
+    className: !visible ? 'open' : '',
+    alt: ""
+  }));
+};
+
+var List = function List(props) {
+  var customizeChildren = props.children,
+      countPerRow = props.countPerRow,
+      title = props.title,
+      user = props.user;
+
+  var _rowMap$get = rowMap.get(countPerRow),
+      _rowMap$get2 = (0, _slicedToArray2.default)(_rowMap$get, 2),
+      colSpan = _rowMap$get2[0],
+      colSpace = _rowMap$get2[1];
+
+  var _useState3 = (0, _react.useState)(true),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      visible = _useState4[0],
+      setVisible = _useState4[1]; // 最终的结果
+
+
+  var rowlist = (0, _react.useMemo)(function () {
+    var _a;
+
+    var children = []; // 收集(满了就重置)
+
+    var collection = [];
+    var result = [];
+
+    if (!Array.isArray(customizeChildren)) {
+      children = [customizeChildren];
+    }
+
+    children = Array.prototype.slice.call(customizeChildren).flat();
+
+    if (user) {
+      result.push( /*#__PURE__*/_react.default.createElement(Title, {
+        title: title,
+        onToggle: function onToggle(value) {
+          setVisible(value);
+        }
+      }));
+    } // 一行
+
+
+    function generatorRow() {
+      var node = /*#__PURE__*/_react.default.createElement(_Row.default, null, collection.map(function (child, index) {
+        if (index !== collection.length - 1) {
+          return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+            key: index
+          }, /*#__PURE__*/_react.default.createElement(_Col.default, {
+            span: colSpan
+          }, child), /*#__PURE__*/_react.default.createElement(_Col.default, {
+            span: colSpace
+          }));
+        }
+
+        return /*#__PURE__*/_react.default.createElement(_Col.default, {
+          span: colSpan,
+          key: index
+        }, child);
+      }));
+
+      result.push(node);
+      collection.length = 0;
+    }
+
+    for (var i = 0; i < children.length; i += 1) {
+      var child = children[i]; // 过滤掉React.Fragment
+
+      while (child.type === Symbol.for('react.fragment')) {
+        if (Array.isArray(child.props.children)) {
+          var _children;
+
+          (_children = children).splice.apply(_children, [i, 1].concat((0, _toConsumableArray2.default)(child.props.children)));
+
+          child = children[i];
+        } else {
+          child = child.props.children;
+        }
+      }
+
+      if (child) {
+        if ((_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.responsive) {
+          collection.push(child);
+
+          if (collection.length && collection.length === countPerRow) {
+            generatorRow();
+          }
+        } else if (collection.length) {
+          generatorRow();
+          result.push(child);
+        } else {
+          result.push(child);
+        }
+      }
+    }
+
+    if (collection.length) {
+      generatorRow();
+    }
+
+    return result;
+  }, [customizeChildren, countPerRow, user, title]);
+  var needRenderList = rowlist;
+
+  if (!visible && needRenderList.length) {
+    needRenderList = [needRenderList[0]];
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, needRenderList.map(function (child, index) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
+      key: index
+    }, child);
+  }));
+};
+
+var WrapperItem = function WrapperItem(props) {
+  var user = props.user;
+  var targetRef = (0, _react.useRef)(null);
+
+  var _useState5 = (0, _react.useState)({
+    width: '100%',
+    height: '100%'
+  }),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      containerSize = _useState6[0],
+      setContainerSize = _useState6[1]; // 每行的个数
+
+
+  var _useState7 = (0, _react.useState)(5),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      countPerRow = _useState8[0],
+      setCountPerRow = _useState8[1];
+
+  var changeSize = function changeSize() {
+    var _a;
+
+    var maxWidth = 1824;
+
+    var _ref = ((_a = targetRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {},
+        _ref$width = _ref.width,
+        width = _ref$width === void 0 ? '100%' : _ref$width;
+
+    if (width < 990) {
+      setCountPerRow(3);
+    } else if (width < 1390) {
+      setCountPerRow(4);
+    } else {
+      setCountPerRow(5);
+    }
+
+    if (width !== '100%') {
+      width -= 32;
+
+      if (width > maxWidth) {
+        if (user) {
+          width = maxWidth - 64;
+        }
+      }
+    }
+
+    setContainerSize({
+      width: width
+    });
+  };
+
+  var handResize = (0, _lodash.throttle)(changeSize, 600);
+  (0, _react.useEffect)(function () {
+    changeSize();
+    window.addEventListener('resize', handResize);
+    return function () {
+      window.removeEventListener('resize', handResize);
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_container_wrapper",
+    ref: targetRef
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: Object.assign(Object.assign({}, containerSize), {
+      margin: '0 auto'
+    })
+  }, /*#__PURE__*/_react.default.createElement(List, Object.assign({}, props, {
+    countPerRow: countPerRow
+  })))));
+};
+
+var _default = WrapperItem;
+exports.default = _default;

package/lib/Form/container.js

@@ -53,19 +53,7 @@ var LMContainer = function LMContainer(props) {
     var width = containerSize.width,
         height = containerSize.height;
     var responsiveCls = responsive && width !== '100%' ? 'responsive' : '';
-    var lm_col = '';
-
-    if (responsiveCls) {
-      if (parseInt(width) < 990) {
-        lm_col = 'lm_col_3';
-      } else if (parseInt(width) < 1390) {
-        lm_col = 'lm_col_4';
-      } else {
-        lm_col = 'lm_col_5';
-      }
-    }
-
-    var classes = (0, _classnames.default)(className, prefixCls, responsiveCls, lm_col);
+    var classes = (0, _classnames.default)(className, prefixCls, responsiveCls);
     return /*#__PURE__*/_react.default.createElement("div", Object.assign({
       className: classes
     }, others, {

package/lib/Form/images/icon_collapse.svg

@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='none' version='1.1' width='16' height='16' viewBox='0 0 16 16'><defs><clipPath id='master_svg0_sa1497_9860'><rect x='0' y='0' width='16' height='16' rx='0'/></clipPath></defs><g clipPath='url(#master_svg0_sa1497_9860)'><g style='mix-blend-mode:passthrough'><path d='M13.4609,5.384111L9.22915,10.462240000000001Q8.7494,11.03795,8,11.03795Q7.2506,11.03795,6.770849999999999,10.462240000000001L2.539067,5.384111L3.460933,4.615889L7.69271,9.69402Q7.81265,9.83795,8,9.83795Q8.18735,9.83795,8.30729,9.69402L12.53907,4.615889L13.4609,5.384111ZM13.6,5Q13.6,5.0590948000000004,13.5885,5.117054Q13.5769,5.175014,13.5543,5.22961Q13.5317,5.284207,13.4989,5.333342Q13.4661,5.382478,13.4243,5.424264Q13.3825,5.46605,13.3333,5.498882Q13.2842,5.531713,13.2296,5.554328Q13.175,5.576942,13.1171,5.588471Q13.0591,5.6,13,5.6Q12.94091,5.6,12.88295,5.588471Q12.82499,5.576942,12.77039,5.554328Q12.71579,5.531713,12.66666,5.498882Q12.61752,5.46605,12.57573,5.424264Q12.53395,5.382478,12.50112,5.333342Q12.46828,5.284207,12.44567,5.22961Q12.42306,5.175014,12.41153,5.117054Q12.4,5.0590948000000004,12.4,5Q12.4,4.9409051999999996,12.41153,4.882946Q12.42306,4.824986,12.44567,4.77039Q12.46828,4.715793,12.50112,4.666658Q12.53395,4.617522,12.57574,4.575736Q12.61752,4.53395,12.66666,4.501118Q12.71579,4.468287,12.77039,4.445672Q12.82499,4.423058,12.88295,4.411529Q12.94091,4.4,13,4.4Q13.0591,4.4,13.1171,4.411529Q13.175,4.423058,13.2296,4.445672Q13.2842,4.468287,13.3333,4.501118Q13.3825,4.53395,13.4243,4.575736Q13.4661,4.617522,13.4989,4.666658Q13.5317,4.715793,13.5543,4.77039Q13.5769,4.824986,13.5885,4.882946Q13.6,4.9409051999999996,13.6,5ZM3.6,5Q3.6,5.0590948000000004,3.588471,5.117054Q3.576942,5.175014,3.554328,5.22961Q3.531713,5.284207,3.498882,5.333342Q3.46605,5.382478,3.424264,5.424264Q3.382478,5.46605,3.333342,5.498882Q3.284207,5.531713,3.22961,5.554328Q3.175014,5.576942,3.117054,5.588471Q3.0590948,5.6,3,5.6Q2.9409052,5.6,2.882946,5.588471Q2.824986,5.576942,2.77039,5.554328Q2.715793,5.531713,2.666658,5.498882Q2.617522,5.46605,2.575736,5.424264Q2.53395,5.382478,2.501118,5.333342Q2.468287,5.284207,2.445672,5.22961Q2.423058,5.175014,2.411529,5.117054Q2.4,5.0590948000000004,2.4,5Q2.4,4.9409051999999996,2.411529,4.882946Q2.423058,4.824986,2.445672,4.77039Q2.468287,4.715793,2.501118,4.666658Q2.53395,4.617522,2.575736,4.575736Q2.617522,4.53395,2.666658,4.501118Q2.715793,4.468287,2.77039,4.445672Q2.824986,4.423058,2.882946,4.411529Q2.9409052,4.4,3,4.4Q3.0590948,4.4,3.117054,4.411529Q3.175014,4.423058,3.22961,4.445672Q3.284207,4.468287,3.333342,4.501118Q3.382478,4.53395,3.424264,4.575736Q3.46605,4.617522,3.498882,4.666658Q3.531713,4.715793,3.554328,4.77039Q3.576942,4.824986,3.588471,4.882946Q3.6,4.9409051999999996,3.6,5Z' fill='#262626' fillOpacity='1'/></g></g></svg>

package/lib/Form/index.d.ts

@@ -9,6 +9,7 @@ import type { FormItemProps } from './FormItem';
 import List from './FormList';
 import type { FormListFieldData, FormListOperation, FormListProps } from './FormList';
 import useFormInstance from './hooks/useFormInstance';
+import Wrapper from './FormWrapper';
 declare type InternalFormType = typeof InternalForm;
 interface FormInterface extends InternalFormType {
     useForm: typeof useForm;
@@ -18,6 +19,7 @@ interface FormInterface extends InternalFormType {
     List: typeof List;
     ErrorList: typeof ErrorList;
     Provider: typeof FormProvider;
+    Wrapper: typeof Wrapper;
     /** @deprecated Only for warning usage. Do not use. */
     create: () => void;
 }

package/lib/Form/index.js

@@ -23,6 +23,8 @@ var _FormList = _interopRequireDefault(require("./FormList"));
 
 var _useFormInstance = _interopRequireDefault(require("./hooks/useFormInstance"));
 
+var _FormWrapper = _interopRequireDefault(require("./FormWrapper"));
+
 var Form = _Form.default;
 Form.Item = _FormItem.default;
 Form.List = _FormList.default;
@@ -36,5 +38,6 @@ Form.create = function () {
   (0, _warning.default)(false, 'Form', 'antd v4 removed `Form.create`. Please remove or use `@ant-design/compatible` instead.');
 };
 
+Form.Wrapper = _FormWrapper.default;
 var _default = Form;
 exports.default = _default;

package/lib/Form/interface.d.ts

@@ -1,3 +1,15 @@
+import { FormInstance, Store } from 'rc-field-form/lib/interface';
+import React from 'react';
 export { InternalNamePath, NamePath, Store, StoreValue } from 'rc-field-form/lib/interface';
 export { Options as ScrollOptions } from 'scroll-into-view-if-needed';
 export declare type FormLabelAlign = 'left' | 'right';
+export declare type RenderProps = (values: Store, form: FormInstance) => JSX.Element | React.ReactNode;
+export interface ISize {
+    width?: number;
+    height?: number;
+}
+export interface IWrapper {
+    children: React.ReactNode | RenderProps;
+    title?: string;
+    user?: boolean;
+}

package/lib/Form/style/index.css

@@ -6613,58 +6613,48 @@ p {
 .lm_form.ant-form.ant-form-inline .ant-form-item-label {
   text-align: left;
 }
-.lm_container_wrapper {
-  overflow: auto;
-}
-.lm_container_wrapper .lm_container.responsive {
-  min-width: 990px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form {
+  background: #f0f0f0;
 }
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
-  width: 100%;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive {
-  width: calc(33.3333% - 16px);
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form > .lm_container_wrapper {
+  background: #f0f0f0;
+  margin-bottom: 0;
+  border-radius: 0;
+  padding: 16px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive.nth-three {
-  margin-right: 0;
+.lm_container_wrapper {
+  overflow: auto;
+  background: #fff;
+  margin-bottom: 16px;
+  border-radius: 2px;
+  padding: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
+.lm_container_wrapper .ant-cascader {
   width: 100%;
-  margin-right: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive {
-  width: calc(25% - 18px);
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive.nth-four {
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.form_responsive_group_title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 16px;
+  color: var(--color-85);
+  flex-basis: 100%;
+  align-items: center;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive {
-  width: calc(20% - 96px / 5);
-  margin-right: 24px;
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive.nth-five {
-  margin-right: 0;
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
 }
-.lm_container_wrapper .lm_container.responsive .ant-cascader {
-  width: 100%;
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
 }
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;

package/lib/Form/style/variables.css

@@ -6101,58 +6101,48 @@
 .lm_form.ant-form.ant-form-inline .ant-form-item-label {
   text-align: left;
 }
-.lm_container_wrapper {
-  overflow: auto;
-}
-.lm_container_wrapper .lm_container.responsive {
-  min-width: 990px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive {
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive .lm_form.ant-form .ant-form-item-responsive .ant-form-item-control {
-  width: 100%;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.lm_form_responsive_box .lm_form {
+  background: #f0f0f0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive {
-  width: calc(33.3333% - 16px);
-  margin-right: 24px;
+.lm_form_responsive_box .lm_form > .lm_container_wrapper {
+  background: #f0f0f0;
+  margin-bottom: 0;
+  border-radius: 0;
+  padding: 16px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_3 .ant-form-item-responsive.nth-three {
-  margin-right: 0;
+.lm_container_wrapper {
+  overflow: auto;
+  background: #fff;
+  margin-bottom: 16px;
+  border-radius: 2px;
+  padding: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item {
+.lm_container_wrapper .ant-cascader {
   width: 100%;
-  margin-right: 0;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive {
-  width: calc(25% - 18px);
-  margin-right: 24px;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_4 .ant-form-item-responsive.nth-four {
-  margin-right: 0;
-}
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item {
-  width: 100%;
-  margin-right: 0;
+.form_responsive_group_title {
+  display: flex;
+  font-size: 14px;
+  line-height: 22px;
+  margin: 0;
+  padding-top: 16px;
+  color: var(--color-85);
+  flex-basis: 100%;
+  align-items: center;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive {
-  width: calc(20% - 96px / 5);
-  margin-right: 24px;
+.form_responsive_group_title h3 {
+  flex: 1;
+  font-weight: medium;
+  font-size: 14px;
 }
-.lm_container_wrapper .lm_container.responsive.lm_col_5 .ant-form-item-responsive.nth-five {
-  margin-right: 0;
+.form_responsive_group_title img {
+  cursor: pointer;
+  width: 16px;
+  height: 16px;
+  transition: transform 0.24s;
 }
-.lm_container_wrapper .lm_container.responsive .ant-cascader {
-  width: 100%;
+.form_responsive_group_title img.open {
+  transform: rotate(180deg);
 }
 .lm_form-item-tip-error .ant-form-item-explain {
   width: 100%;

package/lib/IconFont/index.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-declare const IconFont: import("react").FC<import("@ant-design/icons/lib/components/IconFont").IconFontProps<string>>;
+declare const IconFont: (props: any) => JSX.Element;
 export default IconFont;