fan-standard-comp 3.2.1 → 4.0.1

package/es/FormComp/FieldComponent/style/index.less

@@ -1,8 +1,13 @@
-@root-entry-name: default;
-@import (reference) '~antd/es/style/themes/index';
+//@root-entry-name: default;
+//@import (reference) '~antd/es/style/themes/index';
 
 .refactor-tree-select {
   position: relative;
+  width: 100%;
+  & * {
+    box-sizing: border-box;
+  }
+
   &.refactor-tree-select-sm {
     .refactor-tree-select-extra {
       height: 22px;
@@ -26,17 +31,17 @@
     //}
   }
   &.refactor-disabled .refactor-tree-select-extra {
-    background: @disabled-bg;
-    color: @disabled-color;
+    //background: @disabled-bg;
+    //color: @disabled-color;
   }
   .refactor-tree-select-extra {
     width: 100%;
-    background: @component-background;
+    //background: @component-background;
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
-    height: @input-height-base;
+    //height: @input-height-base;
     z-index: 1;
     padding: 1px 22px 1px 8px;
     line-height: 30px;
@@ -45,7 +50,7 @@
     white-space: nowrap;
   }
 }
-
+//
 .spec-uploader-viewonly {
   display: inline-block;
   width: 100%;
@@ -58,11 +63,11 @@
     float: left;
     width: 100px;
     height: 100px;
-    padding: @padding-xs;
-    margin-right: @padding-xs;
-    margin-bottom: @padding-xs;
-    border: 1px solid @border-color-base;
-    border-radius: @border-radius-sm;
+    //padding: @padding-xs;
+    //margin-right: @padding-xs;
+    //margin-bottom: @padding-xs;
+    //border: 1px solid @border-color-base;
+    //border-radius: @border-radius-sm;
     line-height: 88px;
     text-align: center;
     background: transparent;
@@ -80,9 +85,9 @@
 .tree-select-viewonly-list {
   position: relative;
   width: 100%;
-  border: 1px solid fade(@border-color-split, 60%);
-  border-radius: @border-radius-sm;
-  padding: @padding-xs @padding-sm;
+  //border: 1px solid fade(@border-color-split, 60%);
+  //border-radius: @border-radius-sm;
+  //padding: @padding-xs @padding-sm;
   &.collapsed {
     padding-bottom: 28px;
   }
@@ -97,15 +102,15 @@
     height: 28px;
     line-height: 28px;
     text-align: center;
-    font-size: @font-size-sm;
+    //font-size: @font-size-sm;
     cursor: pointer;
-    color: @text-color-secondary;
+    //color: @text-color-secondary;
     //color:  color(~`colorPalette('@{text-color-secondary}', 3) `);
-    background-image: -webkit-gradient(linear, left top, left bottom, from(fade(@component-background, 0)), to(@component-background));
-    background-image: -webkit-linear-gradient(top, fade(@component-background, 0), @component-background);
-    background-image: linear-gradient(-180deg, fade(@component-background, 0), @component-background);
+    //background-image: -webkit-gradient(linear, left top, left bottom, from(fade(@component-background, 0)), to(@component-background));
+    //background-image: -webkit-linear-gradient(top, fade(@component-background, 0), @component-background);
+    //background-image: linear-gradient(-180deg, fade(@component-background, 0), @component-background);
     &:hover {
-      color: @primary-color;
+      //color: @primary-color;
     }
   }
 }

package/es/FormComp/RenderItemGroup/index.d.ts

@@ -14,6 +14,7 @@ export interface FieldsItemProps extends FieldComponentProps {
     fieldOptions?: any;
     size?: 'large' | 'middle' | 'small' | string;
     componentStyle?: React.CSSProperties;
+    [k: string]: any;
 }
 interface layoutProps {
     labelCol?: any;
@@ -32,6 +33,9 @@ interface ItemGroupProps {
     form?: any;
     layout?: string;
     doUpdateFormFields?: () => void;
+    className?: string;
+    columnCount?: 1 | 2 | 3 | 4;
+    [k: string]: any;
 }
 declare const RenderItemGroup: (props: ItemGroupProps) => any;
 export default RenderItemGroup;

package/es/FormComp/RenderItemGroup/index.js

@@ -1,17 +1,28 @@
-import "antd/es/row/style";
-import _Row from "antd/es/row";
-import "antd/es/tooltip/style";
-import _Tooltip from "antd/es/tooltip";
-import "antd/es/col/style";
-import _Col from "antd/es/col";
-import "antd/es/form/style";
-import _Form from "antd/es/form";
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-import React from "react";
-import { general } from '../../data';
-import Field from '../FieldComponent';
-import SpecIcon from '../../SpecIcon';
-var FormItem = _Form.Item;
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable */
+import React, { useCallback } from "react";
+import { Row, Col, Tooltip, Form, Space } from "antd";
+import { general } from "../../data";
+import Field from "../FieldComponent";
+import SpecIcon from "../../SpecIcon";
+import useStyle from "./style";
+import classNames from "classnames";
+var FormItem = Form.Item;
+
+// 单个控件配置参数
+
 var RenderItemGroup = function RenderItemGroup(props) {
   var itemGroup = props.itemGroup,
     _props$size = props.size,
@@ -24,23 +35,51 @@ var RenderItemGroup = function RenderItemGroup(props) {
     form = props.form,
     doUpdateFormFields = props.doUpdateFormFields,
     _props$layout = props.layout,
-    layout = _props$layout === void 0 ? "horizontal" : _props$layout;
-  var setColSpan = function setColSpan(display, modalSize) {
-    if (_typeof(display) === 'object' || display === 'block' || modalSize === 'xs' || modalSize === 'sm') {
+    layout = _props$layout === void 0 ? "horizontal" : _props$layout,
+    gutter = props.gutter,
+    columnCount = props.columnCount;
+  var componentName = 'spec-item-group';
+  var _useStyle = useStyle(componentName),
+    _useStyle2 = _slicedToArray(_useStyle, 2),
+    wrapSSR = _useStyle2[0],
+    hashId = _useStyle2[1];
+  // 栅格数量
+  // const columnNumber: number = useMemo(() => {
+  //   // @ts-ignore
+  //   return general.modalSize[size].columnNumber || 1
+  // }, [size, columnCount])
+
+  var setColSpan = function setColSpan(display, modalSize, columnCount) {
+    if (_typeof(display) === 'object' || display === 'block') {
+      // 栅格数量为：1
       return 24;
     }
-    if (modalSize === 'lg' || modalSize === 'xlg') {
-      return 8;
+    if (columnCount) {
+      return 24 / columnCount; // 2, 3, 4, 6, 8, 12
     }
+    if (modalSize === 'xs' || modalSize === 'sm' || modalSize === 'md' || modalSize === 'lg' || modalSize === 'xlg' || modalSize === 'xxlg') {
+      return 24 / general.modalSize[modalSize].columnNumber;
+    }
+    // if (modalSize === 'xs' || modalSize === 'sm') {
+    //   // 栅格数量为：1
+    //   return 24
+    // }
+    // if (modalSize === 'lg' || modalSize === 'xlg' || modalSize === 'xxlg') {
+    //   // 栅格数量为：3
+    //   return 8
+    // }
+    // 栅格数量为：2
     return 12;
   };
   var updateFormFields = function updateFormFields() {
     // if (newVal) form && form.setFieldsValue({ ...newVal })
     if (doUpdateFormFields) doUpdateFormFields(); // 用于触发更新表单实例赋值
   };
+
   // useEffect(() => {
   //   // updateFormFields()
   // }, [form])
+
   // 渲染隐藏指定控件
   var itemIsHide = function itemIsHide(isHide, getFieldsValue, FormInstance) {
     if (typeof isHide === 'function') {
@@ -48,6 +87,73 @@ var RenderItemGroup = function RenderItemGroup(props) {
     }
     return isHide || false;
   };
+
+  // 计算表单栅格数排版
+  // 优先级 displayLayout.side > displayLayout > general
+  // 优先级：若有displayLayout.block 则直接使用 general > displayLayout
+  // 还需要判断 layout为vertical还是horizontal
+  var calculateFormLayout = useCallback(function (itemData) {
+    var formLayout = {};
+    // 当布局为 'inline' 时，不配置栅格结构
+    if (layout === 'inline') {
+      formLayout = {};
+    } else if (layout === 'vertical') {
+      formLayout = {
+        labelCol: {
+          span: 24
+        },
+        wrapperCol: {
+          span: 24
+        }
+      };
+    } else {
+      var _general$modalSize;
+      // @ts-ignore
+      var sizeFormLayout = (_general$modalSize = general.modalSize) === null || _general$modalSize === void 0 ? void 0 : _general$modalSize[size].formLayout;
+      // @ts-ignore
+      var sizeFormBlockLayout = general.modalSize[size].formBlockLayout;
+      // 优先级 displayLayout.side > displayLayout > general
+      // 优先级：若有displayLayout.block 则直接使用 general > displayLayout
+      // 还需要判断 layout为vertical还是horizontal
+      if (columnCount) {
+        // 有配置栅格数 1,2,3,4
+        switch (columnCount) {
+          case 1:
+            sizeFormLayout = general.modalSize.sm.formLayout;
+            sizeFormBlockLayout = general.modalSize.sm.formBlockLayout;
+            break;
+          case 2:
+            sizeFormLayout = general.modalSize.md.formLayout;
+            sizeFormBlockLayout = general.modalSize.md.formBlockLayout;
+            break;
+          case 3:
+            sizeFormLayout = general.modalSize.lg.formLayout;
+            sizeFormBlockLayout = general.modalSize.lg.formBlockLayout;
+            break;
+          case 4:
+            sizeFormLayout = general.modalSize.xxlg.formLayout;
+            sizeFormBlockLayout = general.modalSize.xxlg.formBlockLayout;
+            break;
+        }
+      }
+      formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.side) || (displayLayout !== null && displayLayout !== void 0 && displayLayout.block ? sizeFormLayout : !displayLayout || JSON.stringify(displayLayout) === '{}' ? sizeFormLayout : displayLayout);
+      if (itemData.hasOwnProperty('display')) {
+        if ((itemData === null || itemData === void 0 ? void 0 : itemData.display) === 'block') {
+          // @ts-ignore
+          formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.block) || sizeFormBlockLayout;
+        } else if ((itemData === null || itemData === void 0 ? void 0 : itemData.display) === 'side') {
+          // 使用默认
+          // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : displayLayout) || general.modalSize[size].formLayout
+          // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : ((!displayLayout || JSON.stringify(displayLayout) === '{}') ? general.modalSize[size].formLayout : displayLayout))
+        } else {
+          // 对象格式
+          formLayout = itemData === null || itemData === void 0 ? void 0 : itemData.display; // 对象类型传值如： {labelCol: {span: 3},wrapperCol: {span: 8}} 优先级最高
+        }
+      }
+    }
+    return formLayout;
+  }, [size, layout, columnCount]);
+
   // 渲染表单控件
   var renderFormField = function renderFormField(field) {
     var componentStyle = field.componentStyle,
@@ -55,11 +161,11 @@ var RenderItemGroup = function RenderItemGroup(props) {
       preExtra = field.preExtra; // 当前可传参的配置值
     // 带前缀或后缀控件渲染
     if (preExtra || extra) {
-      return /*#__PURE__*/React.createElement(React.Fragment, null, preExtra ? preExtra(field, form) : '', /*#__PURE__*/React.createElement(FormItem, {
+      return /*#__PURE__*/React.createElement(Space, null, preExtra ? preExtra(field, form) : '', /*#__PURE__*/React.createElement(FormItem, {
         noStyle: true,
         rules: field.rules || (field.fieldOptions ? field.fieldOptions.rules : []),
         name: field.filedName
-      }, /*#__PURE__*/React.createElement(Field, Object.assign({}, field, {
+      }, /*#__PURE__*/React.createElement(Field, _extends({}, field, {
         onChange: function onChange(eOrValue) {
           updateFormFields();
           for (var _len = arguments.length, otherParams = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
@@ -69,10 +175,10 @@ var RenderItemGroup = function RenderItemGroup(props) {
         },
         fieldStatus: field.fieldStatus || fieldStatus,
         size: field.protoConfig && field.protoConfig.size || field.size || fieldSize,
-        style: componentStyle || Object.assign({}, general.formItemStyle.wide)
+        style: componentStyle || _objectSpread({}, general.formItemStyle.wide)
       }))), extra ? extra(field, form) : '');
     } else {
-      return /*#__PURE__*/React.createElement(Field, Object.assign({}, field, {
+      return /*#__PURE__*/React.createElement(Field, _extends({}, field, {
         onChange: function onChange(eOrValue) {
           // let updateValue = val
           // if (field.type === 'input' || field.type === 'textarea' || field.type === 'radio' || field.type === 'password') {
@@ -88,7 +194,7 @@ var RenderItemGroup = function RenderItemGroup(props) {
         },
         fieldStatus: field.fieldStatus || fieldStatus,
         size: field.protoConfig && field.protoConfig.size || field.size || fieldSize,
-        style: componentStyle || Object.assign({}, general.formItemStyle.wide)
+        style: componentStyle || _objectSpread({}, general.formItemStyle.wide)
       }));
     }
   };
@@ -98,14 +204,14 @@ var RenderItemGroup = function RenderItemGroup(props) {
       type = item.type,
       customRender = item.customRender,
       filedName = item.filedName; // 当前可传参的配置值
-    if (layout === "horizontal") {
-      return /*#__PURE__*/React.createElement(_Col, {
+    if (layout === "horizontal" || layout === "vertical") {
+      return /*#__PURE__*/React.createElement(Col, {
         key: index,
-        span: item.colSpan || setColSpan(item.display, size)
-      }, /*#__PURE__*/React.createElement(FormItem, Object.assign({
+        span: item.colSpan || setColSpan(item.display, size, columnCount)
+      }, /*#__PURE__*/React.createElement(FormItem, _extends({
         name: type !== 'custom' && filedName,
-        className: fieldStatus === 'viewOnly' ? 'form-item-view-only' : '',
-        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(_Tooltip, {
+        className: classNames(fieldStatus === 'viewOnly' ? 'form-item-view-only' : '', 'spec-item-group-form-item'),
+        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(Tooltip, {
           title: description
         }, /*#__PURE__*/React.createElement(SpecIcon, {
           name: "info"
@@ -114,21 +220,22 @@ var RenderItemGroup = function RenderItemGroup(props) {
         required: item.rules && item.rules.filter(function (rItem) {
           return rItem.required;
         }).length > 0
-      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, Object.assign({}, item), fieldStatus) : renderFormField(Object.assign({}, item))));
+      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item))));
     } else {
-      return /*#__PURE__*/React.createElement(FormItem, Object.assign({
+      return /*#__PURE__*/React.createElement(FormItem, _extends({
         key: index,
         name: type !== 'custom' && filedName,
-        className: fieldStatus === 'viewOnly' ? 'form-item-view-only' : '',
-        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(_Tooltip, {
+        className: classNames(fieldStatus === 'viewOnly' ? 'form-item-view-only' : '', 'spec-item-group-form-item'),
+        label: description ? /*#__PURE__*/React.createElement("span", null, label, /*#__PURE__*/React.createElement(Tooltip, {
           title: description
         }, /*#__PURE__*/React.createElement(SpecIcon, {
           name: "info"
         }))) : label,
         rules: item.rules || (item.fieldOptions ? item.fieldOptions.rules : [])
-      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, Object.assign({}, item), fieldStatus) : renderFormField(Object.assign({}, item)));
+      }, formLayout, item.protoFormItem), type === 'custom' && customRender ? customRender(form, _objectSpread({}, item), fieldStatus) : renderFormField(_objectSpread({}, item)));
     }
   };
+
   // 渲染表单控件列表
   var renderItemGroupNode = function renderItemGroupNode() {
     return itemGroup.map(function (item, index) {
@@ -137,30 +244,34 @@ var RenderItemGroup = function RenderItemGroup(props) {
         type = item.type,
         _item$display = item.display,
         display = _item$display === void 0 ? 'side' : _item$display; // 当前可传参的配置值
-      var formLayout = {};
+
+      var formLayout = calculateFormLayout(item);
       // if (displayLayout) {
       //   // 如果未配置，则使用以下配置值
       //   formLayout = { ...displayLayout }
       // }
       // 优先级 displayLayout.side > displayLayout > general
       // 优先级：若有displayLayout.block 则直接使用 general > displayLayout
-      formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.side) || ((displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.block) ? general.modalSize[size].formLayout : !displayLayout || JSON.stringify(displayLayout) === '{}' ? general.modalSize[size].formLayout : displayLayout);
-      if (item.hasOwnProperty('display')) {
-        if (typeof display === 'string') {
-          if (display === 'block') {
-            formLayout = (displayLayout === null || displayLayout === void 0 ? void 0 : displayLayout.block) || general.modalSize[size].formBlockLayout;
-          } else {
-            // 使用默认
-            // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : displayLayout) || general.modalSize[size].formLayout
-          }
-        } else {
-          formLayout = item.display; // 对象类型传值如： {labelCol: {span: 3},wrapperCol: {span: 8}} 优先级最高
-        }
-      }
-      // 当布局为 'vertical'或'inline'时，不配置栅格结构
-      if (layout !== 'horizontal') {
-        formLayout = {};
-      }
+      // 还需要判断 layout为vertical还是horizontal
+      // @ts-ignore
+      // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : ((!displayLayout || JSON.stringify(displayLayout) === '{}') ? general.modalSize[size].formLayout : displayLayout))
+      // if (item.hasOwnProperty('display')) {
+      //   if (typeof display === 'string') {
+      //     if (display === 'block') {
+      //       // @ts-ignore
+      //       formLayout = displayLayout?.block || general.modalSize[size].formBlockLayout
+      //     } else {
+      //       // 使用默认
+      //       // formLayout = displayLayout?.side || (displayLayout?.block ? general.modalSize[size].formLayout : displayLayout) || general.modalSize[size].formLayout
+      //     }
+      //   } else {
+      //     formLayout = item.display // 对象类型传值如： {labelCol: {span: 3},wrapperCol: {span: 8}} 优先级最高
+      //   }
+      // }
+      // // 当布局为 'inline' 时，不配置栅格结构
+      // if (layout === 'inline') {
+      //   formLayout = {}
+      // }
       // title标题或html渲染
       if (type === 'title' || type === 'html') {
         return /*#__PURE__*/React.createElement(FormItem, {
@@ -168,12 +279,12 @@ var RenderItemGroup = function RenderItemGroup(props) {
           noStyle: true,
           shouldUpdate: true
         }, function (FormInstance) {
-          var _a;
+          var _item$protoConfig;
           // isHide 返回为true则隐藏当前控件
-          return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? /*#__PURE__*/React.createElement(_Col, {
+          return !itemIsHide(isHide, FormInstance.getFieldValue(), FormInstance) ? /*#__PURE__*/React.createElement(Col, {
             span: item.colSpan || 24
-          }, type === 'title' ? /*#__PURE__*/React.createElement("h3", Object.assign({}, item.protoConfig, {
-            className: "modalPanelTitle ".concat(((_a = item === null || item === void 0 ? void 0 : item.protoConfig) === null || _a === void 0 ? void 0 : _a.className) || '')
+          }, type === 'title' ? /*#__PURE__*/React.createElement("h3", _extends({}, item.protoConfig, {
+            className: "modalPanelTitle ".concat((item === null || item === void 0 || (_item$protoConfig = item.protoConfig) === null || _item$protoConfig === void 0 ? void 0 : _item$protoConfig.className) || '')
           }), label) : label) : /*#__PURE__*/React.createElement(React.Fragment, null, null);
         });
       }
@@ -191,16 +302,22 @@ var RenderItemGroup = function RenderItemGroup(props) {
       return renderColFormItem(item, index, formLayout);
     });
   };
+  var itemGroupCls = classNames(componentName, componentName + '-' + layout, props === null || props === void 0 ? void 0 : props.className, hashId);
+  return wrapSSR( /*#__PURE__*/React.createElement(React.Fragment, null,
   // itemGroup = Array 则按以下结构渲染
-  if (itemGroup && Array.isArray(itemGroup)) {
-    // 布局配置为'vertical或inline'
-    if (layout !== 'horizontal') {
-      return renderItemGroupNode();
-    }
-    // 布局配置为horizontal
-    return /*#__PURE__*/React.createElement(_Row, null, renderItemGroupNode());
-  }
-  /* itemGroup = ReactNode则直接返回 */
-  return itemGroup;
+  itemGroup && Array.isArray(itemGroup) ? layout === 'inline' ?
+  /*#__PURE__*/
+  // renderItemGroupNode() // 不带标签
+  React.createElement("div", {
+    className: itemGroupCls
+  }, renderItemGroupNode())
+  // 布局配置为horizontal或vertical
+  : /*#__PURE__*/React.createElement(Row, {
+    className: itemGroupCls,
+    gutter: layout === 'vertical' ? gutter || [20, 20] : gutter
+  }, renderItemGroupNode())
+  /* itemGroup = ReactNode则直接返回 */ : /*#__PURE__*/React.createElement("div", {
+    className: itemGroupCls
+  }, itemGroup)));
 };
 export default RenderItemGroup;

package/es/FormComp/RenderItemGroup/style/index.d.ts

@@ -0,0 +1,6 @@
+import { GlobalToken } from "antd";
+export interface ItemGroupTokenType extends GlobalToken {
+    [k: string]: any;
+}
+declare const ItemGroupStyleFunc: (prefix: string) => any;
+export default ItemGroupStyleFunc;

package/es/FormComp/RenderItemGroup/style/index.js

@@ -0,0 +1,40 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { createStyleHook } from "../../../theme/utils/genStyleHook";
+var ItemGroupStyleFunc = function ItemGroupStyleFunc(prefix) {
+  var prepareComponentToken = function prepareComponentToken(token) {
+    return {
+      // fontWeight: 400,
+    };
+  };
+  return createStyleHook(prefix, function (token) {
+    var prefixCls = ".".concat(prefix);
+    return [_defineProperty({}, prefixCls, {
+      '&.spec-item-group-inline': {
+        display: 'flex',
+        flexWrap: 'wrap',
+        '.spec-item-group-form-item': {
+          marginBottom: token.marginMD
+        }
+      },
+      '&.spec-item-group-vertical': {
+        '.spec-item-group-form-item': {
+          marginBottom: 0
+        },
+        '.modalPanelTitle, .modal-grid-title': {
+          marginBottom: 0
+        }
+      },
+      '.modalPanelTitle, .modal-grid-title': {
+        margin: "0 0 ".concat(token.marginMD, "px 0"),
+        // paddingBottom: token.paddingXS,
+        borderBottom: "1px solid ".concat(token.colorBorder),
+        fontSize: token.fontSize
+      }
+    }), {}];
+  }, prepareComponentToken // 当前组件扩展的变量
+  );
+};
+export default ItemGroupStyleFunc;