@teamix/pro 1.4.12 → 1.4.15

package/es/nocode/pages/renderer.js

@@ -40,7 +40,7 @@ import PageHeader from '../../page-header';
 import { ProSkeletonRaw } from '../../skeleton';
 import { usePrefixCls } from '@teamix/utils';
 import { PageMap } from '.';
-var cls = usePrefixCls('teamix-nocode');
+var cls = usePrefixCls('teamix-pro-nocode');
 
 var Loading = function Loading(props) {
   return /*#__PURE__*/React.createElement(PageContainer, _objectSpread({

package/es/nocode/playground.js

@@ -20,7 +20,7 @@ import React, { useMemo } from 'react';
 import { usePrefixCls } from '@teamix/utils';
 import { useDebounceFn } from '@teamix/hooks';
 import { initConfigurator } from './configurators';
-var cls = usePrefixCls('teamix-nocode-playground');
+var cls = usePrefixCls('teamix-pro-nocode-playground');
 export var PlayGroundLayout = function PlayGroundLayout(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: cls()

package/es/table/components/Layout/index.js

@@ -122,14 +122,18 @@ var Layout = function Layout(props) {
       }
     } else if (mainAction) {
       // 没传 dataFilter 但是传了 mainAction
-      return /*#__PURE__*/React.createElement(QueryFilterLayout, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QueryFilterLayout, {
         addonBefore: renderMainAction(),
         addonAfter: renderAddonAfter()
-      });
+      }), afterDataFilter && /*#__PURE__*/React.createElement("div", {
+        className: "mb8 ".concat(cls('after-data-filter-wrapper'))
+      }, afterDataFilter));
     } else {
-      return /*#__PURE__*/React.createElement(QueryFilterLayout, {
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QueryFilterLayout, {
         addonAfter: renderAddonAfter()
-      });
+      }), ' ', afterDataFilter && /*#__PURE__*/React.createElement("div", {
+        className: "mb8 ".concat(cls('after-data-filter-wrapper'))
+      }, afterDataFilter));
     }
   }; // 区域组合渲染
 

package/es/table/components/QuickAction/index.js

@@ -15,7 +15,7 @@ var QuickAction = function QuickAction(props) {
       actionRef = props.actionRef,
       rowSelection = props.rowSelection; // 如果传对象的话，默认为主要文字类型的 ProActionButton
 
-  if (_typeof(quickAction) === 'object') {
+  if (_typeof(quickAction) === 'object' && (quickAction === null || quickAction === void 0 ? void 0 : quickAction.config)) {
     // 默认 context
     var defaultContext = {
       action: actionRef.current,

package/es/table/index.js

@@ -32,11 +32,11 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { Table, Checkbox } from '@alicloudfe/components';
 import Pagination from './components/Pagination';
 import genProColumnToColumn from './utils/genProColumnToColumn';
-import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls } from '@teamix/utils';
+import { getGlobalConfig, useRequest, request as utilResquest, getDeepValue, getMessage, pickProps, usePrefixCls, getTestRequestData, getTestRequestParams } from '@teamix/utils';
 import { ProSkeletonRaw as Skeleton } from '../skeleton';
 import './index.scss';
 import Layout from './components/Layout';
@@ -49,6 +49,7 @@ import EmptyContent from './components/EmptyContent';
 import { ProActionGroup } from '../actions';
 import classNames from 'classnames';
 import ProPageContainer from '../page-container';
+import debounce from 'lodash.debounce';
 export * from './typing';
 var cls = usePrefixCls('teamix-pro-table');
 /**
@@ -214,7 +215,7 @@ var ProTable = function ProTable(props) {
   var skeletonDataSource = new Array(skeletonSize).fill({});
   var requestDataKey = method.toLowerCase() === 'get' ? 'params' : 'data'; // 如果使用 customRequest 的话，内置 loading
 
-  var _useState13 = useState(true),
+  var _useState13 = useState(requestWhenMount),
       _useState14 = _slicedToArray(_useState13, 2),
       customTableLoading = _useState14[0],
       setCustomTableLoading = _useState14[1];
@@ -258,21 +259,45 @@ var ProTable = function ProTable(props) {
   var autoRefreshTimerRef = useRef();
   var onResize = null;
   useEffect(function () {
+    var _propsDataFilter$sche, _propsDataFilter$sche2;
+
     getHeaderHeight(fullscreenState);
+    getFooterSuctionState();
 
     if (window.onresize) {
       onResize = window.onresize;
-
-      window.onresize = function () {
+      window.onresize = debounce(function () {
         var _onResize;
 
         (_onResize = onResize) === null || _onResize === void 0 ? void 0 : _onResize();
-        getHeaderHeight(fullscreenState);
-      };
+
+        if (footerSuction) {
+          getFooterSuctionState();
+        }
+
+        if (fixedTableBody) {
+          getHeaderHeight(fullscreenState);
+        }
+      }, 500);
     } else {
-      window.onresize = function () {
-        getHeaderHeight(fullscreenState);
-      };
+      window.onresize = debounce(function () {
+        if (footerSuction) {
+          getFooterSuctionState();
+        }
+
+        if (fixedTableBody) {
+          getHeaderHeight(fullscreenState);
+        }
+      }, 500);
+    } // 如果不传 dataFilter，则在这里初始化请求
+
+
+    var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
+
+    if (requestWhenMount && !hasDataFilter) {
+      processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
+
+      _request();
     }
 
     return function () {
@@ -281,11 +306,21 @@ var ProTable = function ProTable(props) {
       } else {
         window.onresize = null;
       }
+
+      if (autoRefreshTimerRef.current) {
+        clearTimeout(autoRefreshTimerRef.current);
+      }
+
+      actionRef.current = undefined;
     };
   }, []); // 获取header高度，用作全屏吸底吸底高度计算以及固定body高度计算（滚动条在底部）
 
   var getHeaderHeight = function getHeaderHeight(isFullscreen, offset) {
-    var _tableDom$getElements, _tableDom$getElements2;
+    var _tableDom$getElements, _tableDom$getElements2, _document$querySelect, _document$querySelect2, _document$querySelect3;
+
+    if (!fixedTableBody) {
+      return;
+    }
 
     var tableDom = tableRef.current;
     var headerDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements = tableDom.getElementsByClassName('teamix-pro-table-layout')) === null || _tableDom$getElements === void 0 ? void 0 : _tableDom$getElements[0];
@@ -295,7 +330,10 @@ var ProTable = function ProTable(props) {
     var tableHeaderDom = tableDom === null || tableDom === void 0 ? void 0 : (_tableDom$getElements2 = tableDom.getElementsByClassName(basePrefix('table-header-inner'))) === null || _tableDom$getElements2 === void 0 ? void 0 : _tableDom$getElements2[0];
     var pageContainerDom = document.querySelector('.teamix-pro-page-container-header');
     var teamixNavDom = document.querySelector('.teamix-nav-console');
-    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer');
+    var footerRowSelectionDom = document.querySelector('.teamix-pro-page-container-footer'); // 这边不能直接取 next-table-body
+
+    var tableBodyDom = (_document$querySelect = document.querySelector('.teamix-pro-table')) === null || _document$querySelect === void 0 ? void 0 : (_document$querySelect2 = _document$querySelect.getElementsByTagName('table')) === null || _document$querySelect2 === void 0 ? void 0 : (_document$querySelect3 = _document$querySelect2[1]) === null || _document$querySelect3 === void 0 ? void 0 : _document$querySelect3.parentNode;
+    var headerFixedTopSectionDom = document.querySelector('.teamix-pro-page-container-fixed-top');
     setTimeout(function () {
       var _headerDom$offsetHeig, _tableHeaderDom$offse;
 
@@ -309,11 +347,31 @@ var ProTable = function ProTable(props) {
 
         // 16px 为 padding
         var pageHeaderHeight = ((_pageContainerDom$off = pageContainerDom === null || pageContainerDom === void 0 ? void 0 : pageContainerDom.offsetHeight) !== null && _pageContainerDom$off !== void 0 ? _pageContainerDom$off : 0) + 16;
-        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0;
-        setHeaderHeight(headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0));
+        var teamixNavHeight = (_teamixNavDom$offsetH = teamixNavDom === null || teamixNavDom === void 0 ? void 0 : teamixNavDom.offsetHeight) !== null && _teamixNavDom$offsetH !== void 0 ? _teamixNavDom$offsetH : 0; // 1 为预留值，js无法取出精确高度，会被四舍五入
+
+        var offsetHeaderHeight = headerHeight + tableHeaderHeight + pageHeaderHeight + teamixNavHeight + footerRowSelectionHeight + 16 + (offset !== null && offset !== void 0 ? offset : 0) + 1;
+
+        if (tableBodyDom.clientHeight < tableBodyDom.scrollHeight) {
+          setFooterSuctionState(true);
+        } else {
+          setFooterSuctionState(false);
+        } // 如果有切换区tab，那么重新计算
+
+
+        if (headerFixedTopSectionDom.clientHeight) {
+          var _headerFixedTopSectio;
+
+          var headerFixedTopSectionHeight = (_headerFixedTopSectio = headerFixedTopSectionDom.clientHeight) !== null && _headerFixedTopSectio !== void 0 ? _headerFixedTopSectio : 0; // const clientTableBodyHeight =
+          //   document.body.clientHeight - offsetHeaderHeight;
+
+          setHeaderHeight(headerFixedTopSectionHeight + teamixNavHeight + footerRowSelectionHeight + tableHeaderHeight + 1);
+          return;
+        }
+
+        setHeaderHeight(offsetHeaderHeight);
       } else {
         // 24px 为 padding
-        setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0));
+        setHeaderHeight(headerHeight + tableHeaderHeight + footerRowSelectionHeight + 24 + (offset !== null && offset !== void 0 ? offset : 0) + 1);
       }
     }, 50);
   }; // header 区域高度。用作全屏计算吸顶吸底高度。默认不做计算
@@ -351,6 +409,10 @@ var ProTable = function ProTable(props) {
 
 
   var getFooterSuctionState = function getFooterSuctionState() {
+    if (!footerSuction) {
+      return;
+    }
+
     var containerDom = document.querySelector('.teamix-pro-page-container-scroll-container');
 
     if (containerDom) {
@@ -652,6 +714,10 @@ var ProTable = function ProTable(props) {
       if (footerSuction) {
         getFooterSuctionState();
       }
+
+      if (fixedTableBody) {
+        getHeaderHeight(fullscreenState);
+      }
     },
     onError: function onError(error) {
       setShowSkeleton(false);
@@ -665,6 +731,10 @@ var ProTable = function ProTable(props) {
       if (footerSuction) {
         getFooterSuctionState();
       }
+
+      if (fixedTableBody) {
+        getHeaderHeight(fullscreenState);
+      }
     }
   }); // 请求函数
 
@@ -730,6 +800,20 @@ var ProTable = function ProTable(props) {
           if (footerSuction) {
             getFooterSuctionState();
           }
+
+          if (fixedTableBody) {
+            getHeaderHeight(fullscreenState);
+          } // customRequest 中支持 autoRefresh
+
+
+          var time = autoRefresh ? autoRefresh(data) : false;
+
+          if (Number.isInteger(time) && time >= 1000) {
+            autoRefreshTimerRef.current = setTimeout(function () {
+              // 自动刷新不显示 loading
+              _request(requestData, true);
+            }, Number(time));
+          }
         });
       } else {
         getData.run(requestData);
@@ -737,40 +821,6 @@ var ProTable = function ProTable(props) {
     }
   }
 
-  useEffect(function () {
-    var _propsDataFilter$sche, _propsDataFilter$sche2;
-
-    // 监听 浏览器变化 更吸底状态
-    if (footerSuction) {
-      getFooterSuctionState();
-
-      window.onresize = function () {
-        getFooterSuctionState();
-      };
-    } // 如果不传 dataFilter，则在这里初始化请求
-
-
-    var hasDataFilter = (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche = propsDataFilter.schema) === null || _propsDataFilter$sche === void 0 ? void 0 : _propsDataFilter$sche.length) && (propsDataFilter === null || propsDataFilter === void 0 ? void 0 : (_propsDataFilter$sche2 = propsDataFilter.schema) === null || _propsDataFilter$sche2 === void 0 ? void 0 : _propsDataFilter$sche2.length) > 0;
-
-    if (requestWhenMount && !hasDataFilter) {
-      processDefaultFilter(propsColumns, actionRef, defaultFilterParams);
-
-      _request();
-    }
-
-    return function () {
-      if (autoRefreshTimerRef.current) {
-        clearTimeout(autoRefreshTimerRef.current);
-      }
-
-      if (window.onresize) {
-        window.onresize = null;
-      }
-
-      actionRef.current = undefined;
-    };
-  }, []);
-
   function onSort(dataIndex, order) {
     var nextSort = _defineProperty({}, dataIndex, order);
 
@@ -836,7 +886,10 @@ var ProTable = function ProTable(props) {
   var renderTable = function renderTable(isFullScreen) {
     if (propsColumns) {
       return /*#__PURE__*/React.createElement("div", {
-        className: classNames('teamix-pro-table-container', className)
+        className: classNames('teamix-pro-table-container', className, 'teamix-test-request'),
+        "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
+        "data-teamix-test-params": getTestRequestParams(propsParams),
+        "data-teamix-test-data": getTestRequestData(propsColumns)
       }, /*#__PURE__*/React.createElement(Layout, {
         header: header,
         mainAction: mainAction,
@@ -962,7 +1015,7 @@ var ProTable = function ProTable(props) {
         })
       }, renderRowSelection(), /*#__PURE__*/React.createElement("div", {
         className: cls('footer-right-wrapper')
-      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(Pagination, _objectSpread({
+      }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : /*#__PURE__*/React.createElement(React.Fragment, null, data.length > 0 && /*#__PURE__*/React.createElement(Pagination, _objectSpread({
         className: cls('pagination'),
         onChange: function onChange(number) {
           return onChangePagination(number);
@@ -984,7 +1037,7 @@ var ProTable = function ProTable(props) {
         onPageSizeChange: function onPageSizeChange(number) {
           return onChangePaginationSize(number);
         }
-      }, props.paginationProps))));
+      }, props.paginationProps)))));
     } else if (!showPagination) {
       return /*#__PURE__*/React.createElement("div", {
         className: cls('footer', {
@@ -994,8 +1047,22 @@ var ProTable = function ProTable(props) {
         className: cls('footer-right-wrapper')
       }, showSkeleton ? /*#__PURE__*/React.createElement(Skeleton.Footer.Pagination, null) : footer));
     }
-  };
+  }; // 判断是否需要吸底
 
+
+  var fixFooterState = useMemo(function () {
+    if (fullscreenState) {
+      return true;
+    }
+
+    if (fixedTableBody || footerSuction) {
+      if (footerSuctionState) {
+        return true;
+      }
+    }
+
+    return false;
+  }, [fullscreenState, fixedTableBody, footerSuction, footerSuctionState]);
   return /*#__PURE__*/React.createElement(FullScreen, {
     visible: fullscreenState,
     actionRef: actionRef
@@ -1007,7 +1074,7 @@ var ProTable = function ProTable(props) {
 
       }),
       ref: tableRef
-    }, renderTable(isFullScreen), (footerSuctionState && footerSuction && !fullscreenState || fixedTableBody) && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !(footerSuctionState && footerSuction) && !fullscreenState && !fixedTableBody && renderFooter(), fullscreenState && renderFooter());
+    }, renderTable(isFullScreen), fixFooterState && /*#__PURE__*/React.createElement(ProPageContainer.FixedFooter, null, renderFooter()), !fixFooterState && renderFooter());
   });
 };
 

package/es/table/index.scss

@@ -32,6 +32,11 @@ $fullscreenPadding: 24px;
     display: flex;
     justify-content: flex-end;
     width: 100%;
+    & > span {
+      display: flex;
+      justify-content: flex-end;
+      width: 100%;
+    }
   }
   &-footer-action {
     margin-left: 16px;

package/es/table/typing.d.ts

@@ -69,7 +69,9 @@ export declare type ProTableProps = {
     /** 请求方法 */
     method?: Method;
     /** 请求参数 */
-    params?: object;
+    params?: {
+        [propName: string]: any;
+    };
     /** sort 排序请求参数处理函数 */
     formatSort?: (sort: object) => object;
     /** 如需自定义调用参数格式，则可以设定此值在请求前对 params 进行自定义，如果返回false则可以阻止请求 */

package/es/table/utils/columnRender.js

@@ -39,8 +39,9 @@ import Filter from '../components/Filter';
 export var renderColumnsTitle = function renderColumnsTitle(item, actionRef) {
   var filterMode = item.filterMode,
       filters = item.filters,
+      dataSource = item.dataSource,
       dataIndex = item.dataIndex,
-      dataSource = item.dataSource; // 为列过滤添加状态标题
+      valueType = item.valueType; // 为列过滤添加状态标题
 
   var getItemLabel = function getItemLabel() {
     if (filters && filterMode !== 'multiple') {

package/lib/actions/index.scss

@@ -114,7 +114,7 @@
       margin-top: 10px;
       padding-bottom: 10px;
       .next-col.next-col-24:last-child {
-        .teamix-pro-field-info-form-item:last-child {
+        .teamix-pro-info-item:last-child {
           padding-bottom: 0px;
         }
       }

package/lib/form/ProForm/index.js

@@ -31,17 +31,17 @@ var _index = _interopRequireDefault(require("../Components/Text/index"));
 
 var _SchemaForm = _interopRequireDefault(require("../SchemaForm"));
 
-var _utils2 = require("../utils");
-
 var _useAutoSubmit = _interopRequireDefault(require("./useAutoSubmit"));
 
+var _useAutoLayout = _interopRequireDefault(require("./useAutoLayout"));
+
 var _useInitialRequest = _interopRequireDefault(require("./useInitialRequest"));
 
 var _validate = _interopRequireDefault(require("../locales/validate"));
 
 require("./index.scss");
 
-var _excluded = ["form", "initialValues", "initialRequest", "scope", "context", "components", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol", "breakpoints", "onChange", "onChangeType", "onSubmit", "onSubmitFailed", "onInitialComplete", "className", "validateFirst", "schema", "children"];
+var _excluded = ["form", "initialValues", "initialRequest", "scope", "context", "components", "onChange", "onChangeType", "onSubmit", "onSubmitFailed", "onInitialComplete", "className", "validateFirst", "schema", "children"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -95,12 +95,6 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       scope = _ref.scope,
       context = _ref.context,
       components = _ref.components,
-      layout = _ref.layout,
-      labelAlign = _ref.labelAlign,
-      wrapperAlign = _ref.wrapperAlign,
-      labelCol = _ref.labelCol,
-      wrapperCol = _ref.wrapperCol,
-      breakpoints = _ref.breakpoints,
       onChange = _ref.onChange,
       onChangeType = _ref.onChangeType,
       onSubmit = _ref.onSubmit,
@@ -112,7 +106,8 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       children = _ref.children,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  // 获取全局配置
+  var formRef = (0, _react.useRef)(); // 获取全局配置
+
   var _ref2 = (0, _utils.getGlobalConfig)('ProForm') || {},
       globalComponents = _ref2.components,
       globalScope = _ref2.scope;
@@ -130,25 +125,10 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
 
   var mergedComponents = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, globalComponents), components), formilyComponents), _ProField.default);
 
-  var onAutoSubmit = (0, _useAutoSubmit.default)(onSubmit, context); // todo 需要formily支持断点下的属性更新
-
-  var getTeamixLayout = (0, _react.useMemo)(function () {
-    return breakpoints === true ? {
-      breakpoints: [480],
-      layout: (0, _utils2.mergeArrayValue)(['vertical'], layout),
-      labelAlign: (0, _utils2.mergeArrayValue)(['left'], labelAlign),
-      wrapperAlign: (0, _utils2.mergeArrayValue)(['left'], wrapperAlign),
-      labelCol: (0, _utils2.mergeArrayValue)([24], labelCol),
-      wrapperCol: (0, _utils2.mergeArrayValue)([24], wrapperCol)
-    } : {
-      breakpoints: (0, _utils.isBool)(breakpoints) ? undefined : breakpoints,
-      layout: layout,
-      labelAlign: labelAlign,
-      wrapperAlign: wrapperAlign,
-      labelCol: labelCol,
-      wrapperCol: wrapperCol
-    };
-  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  var onAutoSubmit = (0, _useAutoSubmit.default)(onSubmit, context);
+  var autoTeamixLayout = (0, _useAutoLayout.default)(_objectSpread(_objectSpread({}, otherProps), {}, {
+    schema: schema
+  }), formRef);
   (0, _react.useMemo)(function () {
     // 配置表单默认值
     if (initialValues) {
@@ -189,7 +169,7 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }, []);
   return /*#__PURE__*/_react.default.createElement(_formily.Form, _objectSpread(_objectSpread(_objectSpread({
     className: (0, _utils.cls)(prefixCls(), className)
-  }, otherProps), getTeamixLayout), {}, {
+  }, otherProps), autoTeamixLayout), {}, {
     form: form,
     onAutoSubmit: onAutoSubmit,
     onAutoSubmitFailed: onSubmitFailed
@@ -197,7 +177,9 @@ var ProForm = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     schema: schema,
     scope: mergedScope,
     components: mergedComponents
-  }) : null, children);
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    ref: formRef
+  }), children);
 });
 ProForm.defaultProps = {
   colon: false,

package/lib/form/ProForm/index.scss

@@ -236,6 +236,11 @@
 }
 
 // 按钮样式
+.teamix-button-group-item.#{$form-item-cls}-layout-vertical {
+  > .#{$css-prefix}formily-item-label {
+    display: none;
+  }
+}
 .#{$css-prefix}formily-button-group {
   margin-top: var(--form-element-medium-height, 32px);
 }

package/lib/form/ProForm/useAutoLayout.d.ts

@@ -0,0 +1,9 @@
+declare const useAutoLayout: ({ breakpoints: outBreakpoints, layout, labelAlign, wrapperAlign, labelCol: outLabelCol, wrapperCol: outWrapperCol, autoLayout, schema, }: any, formRef: any) => {
+    breakpoints: any;
+    layout: any;
+    labelAlign: any;
+    wrapperAlign: any;
+    labelCol: any;
+    wrapperCol: any;
+};
+export default useAutoLayout;

package/lib/form/ProForm/useAutoLayout.js

@@ -0,0 +1,124 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _utils = require("@teamix/utils");
+
+var _utils2 = require("../utils");
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var useAutoLayout = function useAutoLayout(_ref, formRef) {
+  var outBreakpoints = _ref.breakpoints,
+      layout = _ref.layout,
+      labelAlign = _ref.labelAlign,
+      wrapperAlign = _ref.wrapperAlign,
+      outLabelCol = _ref.labelCol,
+      outWrapperCol = _ref.wrapperCol,
+      autoLayout = _ref.autoLayout,
+      schema = _ref.schema;
+
+  var _ref2 = (0, _utils.isPlainObj)(autoLayout) ? autoLayout : {
+    autoLabel: autoLayout
+  },
+      autoLabel = _ref2.autoLabel;
+
+  var breakpoints = (0, _react.useMemo)(function () {
+    return autoLabel ? false : breakpoints;
+  }, []); // 当前断点不支持Col更新
+
+  var _useState = (0, _react.useState)({
+    labelCol: outLabelCol,
+    wrapperCol: outWrapperCol
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      autoCol = _useState2[0],
+      setAutoCol = _useState2[1];
+
+  var labelCol = autoCol.labelCol,
+      wrapperCol = autoCol.wrapperCol;
+  (0, _react.useEffect)(function () {
+    /**
+     * autolayout
+     */
+    if (autoLabel) {
+      var formWidth = formRef.current.getBoundingClientRect().width; // 表单宽度
+
+      var labelArray = schema.map(function (item) {
+        var text = item.title;
+
+        if ((0, _utils.isStr)(text)) {
+          var _item$decoratorProps;
+
+          if (item.required) {
+            text += '一'; // 必填 + 12
+          }
+
+          if ((_item$decoratorProps = item.decoratorProps) === null || _item$decoratorProps === void 0 ? void 0 : _item$decoratorProps.tooltip) {
+            text += '一'; // 提示 + 18
+          }
+
+          return text;
+        }
+
+        return '';
+      }); // 标题内容集合
+
+      var labelWidthArray = (0, _utils.getWidthByCharacterMap)(labelArray); // 标题宽度集合
+
+      var _autoWidthBySpace = (0, _utils.autoWidthBySpace)(labelWidthArray),
+          expectedWidth = _autoWidthBySpace.expectedWidth,
+          consoleArray = _autoWidthBySpace.consoleArray; // 智能计算预期宽度
+
+
+      var expectedCol = Math.ceil(expectedWidth / formWidth * 24); // 预期宽度转换为 Col 值
+
+      setAutoCol({
+        labelCol: expectedCol,
+        wrapperCol: wrapperCol
+      });
+    } else {
+      setAutoCol({
+        labelCol: outLabelCol,
+        wrapperCol: outWrapperCol
+      });
+    }
+  }, [outLabelCol, outWrapperCol]); // Layout配置By断点（配置断点后，目前不支持 Col 更新）
+
+  var autoTeamixLayout = (0, _react.useMemo)(function () {
+    return breakpoints === true ? {
+      breakpoints: [480],
+      layout: (0, _utils2.mergeArrayValue)(['vertical'], layout),
+      labelAlign: (0, _utils2.mergeArrayValue)(['left'], labelAlign),
+      wrapperAlign: (0, _utils2.mergeArrayValue)(['left'], wrapperAlign),
+      labelCol: (0, _utils2.mergeArrayValue)([24], labelCol),
+      wrapperCol: (0, _utils2.mergeArrayValue)([24], wrapperCol)
+    } : {
+      breakpoints: (0, _utils.isBool)(breakpoints) ? undefined : breakpoints,
+      layout: layout,
+      labelAlign: labelAlign,
+      wrapperAlign: wrapperAlign,
+      labelCol: labelCol,
+      wrapperCol: wrapperCol
+    };
+  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  return autoTeamixLayout;
+};
+
+var _default = useAutoLayout;
+exports.default = _default;