@teamix/pro 1.4.12 → 1.4.15

package/es/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/es/form/ProForm/index.js

@@ -1,4 +1,4 @@
-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 ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -10,8 +10,8 @@ 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, { memo, useEffect, useMemo } from 'react';
-import { usePrefixCls, cls, getLanguage, getGlobalConfig, isBool } from '@teamix/utils';
+import React, { memo, useEffect, useMemo, useRef } from 'react';
+import { usePrefixCls, cls, getLanguage, getGlobalConfig } from '@teamix/utils';
 import { createForm, onFieldValueChange, onFormValuesChange, registerValidateLocale, setValidateLanguage } from '@formily/core';
 import { toJS } from '@formily/reactive';
 import { Form, Upload, SelectTable, FormLayout, FormItem, ArrayCollapse, ArrayCards, ArrayItems, ArrayTable, Space, FormGrid, FormTab, FormCollapse, FormStep, Editable, FormDialog, FormDrawer, FormButtonGroup, Submit, Reset } from '@teamix/formily';
@@ -22,8 +22,8 @@ import FormGroup from '../Components/FormGroup';
 import LightFilter from '../Components/LightFilter';
 import Text from '../Components/Text/index';
 import SchemaForm from '../SchemaForm';
-import { mergeArrayValue } from '../utils';
 import useAutoSubmit from './useAutoSubmit';
+import useAutoLayout from './useAutoLayout';
 import useInitialRequest from './useInitialRequest';
 import validateLocale from '../locales/validate';
 import './index.scss';
@@ -63,12 +63,6 @@ var ProForm = /*#__PURE__*/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,
@@ -80,7 +74,8 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
       children = _ref.children,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
-  // 获取全局配置
+  var formRef = useRef(); // 获取全局配置
+
   var _ref2 = getGlobalConfig('ProForm') || {},
       globalComponents = _ref2.components,
       globalScope = _ref2.scope;
@@ -98,25 +93,10 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
 
   var mergedComponents = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, globalComponents), components), formilyComponents), ProFieldComponents);
 
-  var onAutoSubmit = useAutoSubmit(onSubmit, context); // todo 需要formily支持断点下的属性更新
-
-  var getTeamixLayout = useMemo(function () {
-    return breakpoints === true ? {
-      breakpoints: [480],
-      layout: mergeArrayValue(['vertical'], layout),
-      labelAlign: mergeArrayValue(['left'], labelAlign),
-      wrapperAlign: mergeArrayValue(['left'], wrapperAlign),
-      labelCol: mergeArrayValue([24], labelCol),
-      wrapperCol: mergeArrayValue([24], wrapperCol)
-    } : {
-      breakpoints: isBool(breakpoints) ? undefined : breakpoints,
-      layout: layout,
-      labelAlign: labelAlign,
-      wrapperAlign: wrapperAlign,
-      labelCol: labelCol,
-      wrapperCol: wrapperCol
-    };
-  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  var onAutoSubmit = useAutoSubmit(onSubmit, context);
+  var autoTeamixLayout = useAutoLayout(_objectSpread(_objectSpread({}, otherProps), {}, {
+    schema: schema
+  }), formRef);
   useMemo(function () {
     // 配置表单默认值
     if (initialValues) {
@@ -157,7 +137,7 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(Form, _objectSpread(_objectSpread(_objectSpread({
     className: cls(prefixCls(), className)
-  }, otherProps), getTeamixLayout), {}, {
+  }, otherProps), autoTeamixLayout), {}, {
     form: form,
     onAutoSubmit: onAutoSubmit,
     onAutoSubmitFailed: onSubmitFailed
@@ -165,7 +145,9 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
     schema: schema,
     scope: mergedScope,
     components: mergedComponents
-  }) : null, children);
+  }) : null, /*#__PURE__*/React.createElement("div", {
+    ref: formRef
+  }), children);
 });
 ProForm.defaultProps = {
   colon: false,

package/es/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/es/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/es/form/ProForm/useAutoLayout.js

@@ -0,0 +1,114 @@
+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; }
+
+import { useEffect, useMemo, useState } from 'react';
+import { isPlainObj, isBool, autoWidthBySpace, getWidthByCharacterMap, isStr } from '@teamix/utils';
+import { mergeArrayValue } from '../utils';
+
+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 = isPlainObj(autoLayout) ? autoLayout : {
+    autoLabel: autoLayout
+  },
+      autoLabel = _ref2.autoLabel;
+
+  var breakpoints = useMemo(function () {
+    return autoLabel ? false : breakpoints;
+  }, []); // 当前断点不支持Col更新
+
+  var _useState = useState({
+    labelCol: outLabelCol,
+    wrapperCol: outWrapperCol
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      autoCol = _useState2[0],
+      setAutoCol = _useState2[1];
+
+  var labelCol = autoCol.labelCol,
+      wrapperCol = autoCol.wrapperCol;
+  useEffect(function () {
+    /**
+     * autolayout
+     */
+    if (autoLabel) {
+      var formWidth = formRef.current.getBoundingClientRect().width; // 表单宽度
+
+      var labelArray = schema.map(function (item) {
+        var text = item.title;
+
+        if (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 = getWidthByCharacterMap(labelArray); // 标题宽度集合
+
+      var _autoWidthBySpace = 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 = useMemo(function () {
+    return breakpoints === true ? {
+      breakpoints: [480],
+      layout: mergeArrayValue(['vertical'], layout),
+      labelAlign: mergeArrayValue(['left'], labelAlign),
+      wrapperAlign: mergeArrayValue(['left'], wrapperAlign),
+      labelCol: mergeArrayValue([24], labelCol),
+      wrapperCol: mergeArrayValue([24], wrapperCol)
+    } : {
+      breakpoints: isBool(breakpoints) ? undefined : breakpoints,
+      layout: layout,
+      labelAlign: labelAlign,
+      wrapperAlign: wrapperAlign,
+      labelCol: labelCol,
+      wrapperCol: wrapperCol
+    };
+  }, [breakpoints, layout, labelAlign, wrapperAlign, labelCol, wrapperCol]);
+  return autoTeamixLayout;
+};
+
+export default useAutoLayout;

package/es/form/SchemaForm/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["component", "type", "name", "decorator", "decoratorProps", "dataSource", "reactions", "rules", "children", "items", "tooltip", "request", "data"];
+var _excluded = ["type", "name", "component", "props", "decorator", "decoratorProps", "dataSource", "reactions", "rules", "children", "items", "tooltip", "request", "data"];
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
@@ -32,7 +32,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import React, { memo, useCallback, useRef, useMemo } from 'react';
 import { createSchemaField } from '@formily/react';
-import { isUsable } from '@teamix/utils';
+import { cls, isUsable } from '@teamix/utils';
 import adapterType from './adapterType';
 import adapterComponent from './adapterComponent';
 import adapterDecorator from './adapterDecorator';
@@ -134,9 +134,10 @@ export default /*#__PURE__*/memo(function (_ref) {
       }
 
       var _newItem2 = newItem,
-          component = _newItem2.component,
           type = _newItem2.type,
           name = _newItem2.name,
+          component = _newItem2.component,
+          props = _newItem2.props,
           decorator = _newItem2.decorator,
           decoratorProps = _newItem2.decoratorProps,
           dataSource = _newItem2.dataSource,
@@ -172,7 +173,8 @@ export default /*#__PURE__*/memo(function (_ref) {
           defaultDataSource = _initializeDataSource.dataSource,
           dataSourceReactions = _initializeDataSource.reactions,
           dataSourceScope = _initializeDataSource.scope,
-          dataSourceData = _initializeDataSource.data; // 初始化rules validator
+          dataSourceData = _initializeDataSource.data,
+          dataSourceProps = _initializeDataSource.props; // 初始化rules validator
 
 
       var _initializeRules = initializeRules(rules, "".concat(suffix, "v")),
@@ -188,10 +190,16 @@ export default /*#__PURE__*/memo(function (_ref) {
             v = _ref3[1];
 
         schemaScopeRef.current[k] = v;
+      }); // 合并字段属性
+
+      var defaultProps = _objectSpread(_objectSpread(_objectSpread({}, props), dataSourceProps), {}, {
+        className: cls(props === null || props === void 0 ? void 0 : props.className, dataSourceProps === null || dataSourceProps === void 0 ? void 0 : dataSourceProps.className)
       });
+
       var formatParam = mapSchemaName(_objectSpread(_objectSpread({}, otherProps), {}, {
         type: defaultType,
         component: component,
+        props: defaultProps,
         decorator: defaultDecorator,
         decoratorProps: defaultDecoratorProps,
         rules: defaultRules,

package/es/form/SchemaForm/initializeDataSource.d.ts

@@ -6,6 +6,9 @@ interface IInitializeDataSource {
             [x: string]: any;
         };
         data?: any;
+        props?: {
+            [x: string]: any;
+        };
     };
 }
 declare const initializeDataSource: IInitializeDataSource;

package/es/form/SchemaForm/initializeDataSource.js

@@ -1,3 +1,4 @@
+import { getTestRequestParams, getTestRequestData } from '@teamix/utils';
 import { initializeRequestExpression } from '../utils';
 
 var initializeDataSource = function initializeDataSource(dataSource, suffix) {
@@ -12,6 +13,12 @@ var initializeDataSource = function initializeDataSource(dataSource, suffix) {
     scope: scope,
     data: {
       readOnlyOnLoading: (dataSource === null || dataSource === void 0 ? void 0 : (_dataSource$extraConf = dataSource.extraConfig) === null || _dataSource$extraConf === void 0 ? void 0 : _dataSource$extraConf.readOnly) !== false
+    },
+    props: {
+      className: 'teamix-test-request',
+      'data-teamix-test-request': "url=".concat(dataSource === null || dataSource === void 0 ? void 0 : dataSource.url, "&formatResult=").concat(!!(dataSource === null || dataSource === void 0 ? void 0 : dataSource.formatResult)),
+      'data-teamix-test-params': getTestRequestParams(dataSource === null || dataSource === void 0 ? void 0 : dataSource.params),
+      'data-teamix-test-data': getTestRequestData('dataSource')
     }
   } : {
     reactions: [],

package/es/form/SchemaForm/initializeFormButton.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import { getMessage } from '@teamix/utils';
+import { getMessage, cls } from '@teamix/utils';
 
 var initializeButton = function initializeButton(item) {
   var component = item.component,
@@ -45,15 +45,14 @@ var initialize = function initialize(item) {
     return initializeButton(item);
   }
 
-  var commonMode = _objectSpread(_objectSpread({
-    title: ' '
-  }, item), {}, {
+  var commonMode = _objectSpread(_objectSpread({}, item), {}, {
     component: component,
     props: otherProps,
     decorator: 'FormButtonGroup.FormItem',
     decoratorProps: _objectSpread({
       inset: false,
-      fullness: true
+      fullness: true,
+      className: cls('teamix-button-group-item', decoratorProps === null || decoratorProps === void 0 ? void 0 : decoratorProps.className)
     }, decoratorProps)
   }); // 吸底模式
 

package/es/form/typing.d.ts

@@ -59,6 +59,9 @@ export interface ProFormSchemaItem {
     data?: AnyObject;
 }
 export declare type ProFormSchema = ProFormSchemaItem[];
+interface AutoLayout {
+    autoLabel?: boolean;
+}
 export interface ProFormProps extends Omit<IFormLayoutProps, 'breakpoints'> {
     form?: FormType | false;
     schema?: ProFormSchema;
@@ -78,6 +81,7 @@ export interface ProFormProps extends Omit<IFormLayoutProps, 'breakpoints'> {
     onSubmitFailed?: (feedbacks: IFormFeedback[]) => void;
     onInitialComplete?: (form: FormType) => void;
     breakpoints?: number[] | boolean;
+    autoLayout?: AutoLayout | boolean;
 }
 export interface FilterProps extends ProFormProps {
     form: FormType;

package/es/index.d.ts

@@ -28,5 +28,5 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-declare const version = "1.4.12";
+declare const version = "1.4.15";
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, hooks, nocode, templates, utils, };

package/es/index.js

@@ -36,6 +36,6 @@ export * from './table';
 export * from './sidebar';
 export * from './utils';
 export * from './timeline';
-var version = '1.4.12';
+var version = '1.4.15';
 export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, ProSidebar, ProTimeline, TeamixIcon, hooks, nocode, templates, utils };

package/es/info/components/ProInfoItem/index.js

@@ -4,7 +4,7 @@ import { usePrefixCls } from '@teamix/utils';
 import React from 'react';
 import { Ellipsis, LabelIconTip } from '../../../field';
 import './index.scss';
-var cls = usePrefixCls('teamix-pro-field-info-form-item');
+var cls = usePrefixCls('teamix-pro-info-item');
 var Row = Grid.Row,
     Col = Grid.Col;
 
@@ -15,7 +15,26 @@ var ProInfoItem = function ProInfoItem(prop) {
       headerInfoLayout = prop.headerInfoLayout,
       loading = prop.loading,
       tooltip = prop.tooltip,
-      tooltipIcon = prop.tooltipIcon;
+      tooltipIcon = prop.tooltipIcon,
+      valueType = prop.valueType,
+      render = prop.render,
+      alignItems = prop.alignItems; // 判断是否需要居中
+
+  var isAlignItemsCenter = function isAlignItemsCenter() {
+    if (typeof render !== 'function') {
+      var type = render === null || render === void 0 ? void 0 : render.type;
+
+      if (valueType === 'selectGroup') {
+        return true;
+      }
+
+      if (type === 'tag' || type === 'statusIconTag' || type === 'eventLevelTag' || type === 'warningLevelTag') {
+        return true;
+      }
+    }
+
+    return false;
+  };
 
   if (baseInfoLayout) {
     var labelCol = baseInfoLayout.labelCol,
@@ -24,7 +43,13 @@ var ProInfoItem = function ProInfoItem(prop) {
       className: cls('')
     }, /*#__PURE__*/React.createElement(Row, {
       gutter: 10,
-      className: cls('base-row')
+      className: cls({
+        'base-row': true,
+        'base-row-center': isAlignItemsCenter()
+      }),
+      style: alignItems ? {
+        alignItems: alignItems
+      } : {}
     }, /*#__PURE__*/React.createElement(Col, {
       span: labelCol === null || labelCol === void 0 ? void 0 : labelCol.span,
       className: cls('label')
@@ -48,7 +73,11 @@ var ProInfoItem = function ProInfoItem(prop) {
     return /*#__PURE__*/React.createElement("div", {
       className: cls()
     }, /*#__PURE__*/React.createElement(Row, {
-      className: cls('header-row')
+      className: cls({
+        'header-row': true,
+        'header-row-center': isAlignItemsCenter()
+      }),
+      style: {}
     }, /*#__PURE__*/React.createElement("div", {
       className: cls('header-label')
     }, /*#__PURE__*/React.createElement(LabelIconTip, {

package/es/info/components/ProInfoItem/index.scss

@@ -14,43 +14,50 @@ $header-text-size: var(--font-size-body-1, 12px);
 
 $item-padding-bottom: 8px;
 
-.teamix-pro-field-info-form-item {
+.teamix-pro-info-item {
   width: 100%;
   padding-bottom: $item-padding-bottom;
   &-header-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+
+    &-center {
+      align-items: center;
+    }
   }
   &-base-row {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    &-center {
+      align-items: center;
+    }
   }
 }
 
-.teamix-pro-field-info-form-item-label {
+.teamix-pro-info-item-label {
   color: $label-color;
   font-size: $label-size;
   // font-weight: $label-weight;
   display: unset;
 }
 
-.teamix-pro-field-info-form-item-value {
+.teamix-pro-info-item-value {
   color: $text-color;
   font-size: $text-size;
-  display: unset;
+  //display: unset;
   width: 100%;
   padding-right: 20px;
 }
 
-.teamix-pro-field-info-form-item-header-label {
+.teamix-pro-info-item-header-label {
   color: $header-label-color;
   font-size: $header-label-size;
   // font-weight: $header-label-weight;
   display: inline-block;
-  white-space:nowrap;
+  white-space: nowrap;
 }
 
-.teamix-pro-field-info-form-item-header-value {
+.teamix-pro-info-item-header-value {
   color: $header-text-color;
   font-size: $header-text-size;
   display: inline-block;
@@ -58,9 +65,9 @@ $item-padding-bottom: 8px;
   padding-right: 20px;
 }
 
-.teamix-pro-field-info-form-item-base-skeleton-box {
+.teamix-pro-info-item-base-skeleton-box {
   width: 100%;
-  height: 100%;
+  height: 18px;
   display: flex;
   align-items: center;
   span {

package/es/info/components/baseInfo/index.js

@@ -78,7 +78,10 @@ var ProBaseInfo = function ProBaseInfo(props) {
         }),
         baseInfoLayout: getFormItemLayout((_item$colSpan = item === null || item === void 0 ? void 0 : item.colSpan) !== null && _item$colSpan !== void 0 ? _item$colSpan : 0),
         tooltip: item.tooltip,
-        tooltipIcon: item.tooltipIcon
+        tooltipIcon: item.tooltipIcon,
+        render: item.render,
+        valueType: item.valueType,
+        alignItems: item.alignItems
       }));
     });
   };

package/es/info/components/baseInfo/index.scss

@@ -1,3 +1,6 @@
 .teamix-pro-info {
   width: 100%;
-}
+}
+.teamix-pro-info-content-row {
+  align-items: flex-start;
+}

package/es/info/components/headerInfo/index.js

@@ -55,7 +55,10 @@ var ProHeaderInfo = function ProHeaderInfo(props) {
         }),
         headerInfoLayout: layout !== null && layout !== void 0 ? layout : defaultLayout,
         tooltip: item.tooltip,
-        tooltipIcon: item.tooltipIcon
+        tooltipIcon: item.tooltipIcon,
+        render: item.render,
+        valueType: item.valueType,
+        alignItems: item.alignItems
       }));
     });
   };

package/es/info/components/headerInfo/index.scss

@@ -0,0 +1,3 @@
+.teamix-pro-info-content-row {
+  align-items: flex-start;
+}

package/es/info/components/tableInfo/index.js

@@ -24,6 +24,7 @@ import { LabelIconTip } from '../../../field';
 import InfoValueItem from '../InfoValueItem';
 import { ProSkeletonRaw } from '../../..';
 import { getDataIndexValue } from '../../utils';
+import cloneDeep from 'lodash.clonedeep';
 
 var ProTableInfo = function ProTableInfo(props) {
   var columns = props.columns,
@@ -72,7 +73,7 @@ var ProTableInfo = function ProTableInfo(props) {
 
   var newDataSource = useMemo(function () {
     var nResult = [];
-    var columnsCopy = JSON.parse(JSON.stringify(columns)); // 取当前行的数据。直到取完
+    var columnsCopy = cloneDeep(columns); // 取当前行的数据。直到取完
 
     while (columnsCopy.length > 0) {
       var filterColumns = [];

package/es/info/index.js

@@ -30,7 +30,7 @@ import ProBaseInfo from './components/baseInfo';
 import ProInfoGroup from './components/InfoGroup';
 import './index.scss';
 import { ProInfoGroupContext, useActionType } from './utils';
-import { doCommonRequest } from '@teamix/utils';
+import { doCommonRequest, cls, getTestRequestData, getTestRequestParams } from '@teamix/utils';
 import { useSize } from '@teamix/hooks';
 import { ProCard } from '..';
 export * from './typing';
@@ -162,8 +162,11 @@ var ProInfo = function ProInfo(props) {
 
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    className: "teamix-pro-info ".concat(className !== null && className !== void 0 ? className : ''),
-    style: style
+    style: style,
+    className: cls('teamix-pro-info', className, 'teamix-test-request'),
+    "data-teamix-test-request": "url=".concat(url, "&formatResult=").concat(!!formatResult),
+    "data-teamix-test-params": getTestRequestParams(params),
+    "data-teamix-test-data": getTestRequestData(columns)
   }, /*#__PURE__*/React.createElement(ProCard, _objectSpread(_objectSpread(_objectSpread({
     compacted: true,
     hoveredShadow: false,

package/es/info/typing.d.ts

@@ -96,6 +96,8 @@ export interface ProInfoColumnsProps {
     extra?: React.ReactNode;
     /** 其他 ProField 配置 */
     props?: any;
+    /** 对齐方式 **/
+    alignItems?: 'center' | 'flex-start' | 'flex-end' | string;
 }
 export declare type ProInfoActionType = {
     /** 刷新Info */
@@ -113,7 +115,7 @@ export declare type IProProInfoItem = {
     headerInfoLayout?: ProHeaderInfoLayoutProps;
     /** loading 状态 */
     loading?: boolean;
-} & Pick<ProInfoColumnsProps, 'tooltip' | 'tooltipIcon'>;
+} & Pick<ProInfoColumnsProps, 'tooltip' | 'tooltipIcon' | 'render' | 'valueType' | 'alignItems'>;
 /** header info 定义 */
 export declare type IProHeaderInfo = {
     /** 布局值 */

package/es/nocode/index.scss

@@ -1,4 +1,4 @@
-.teamix-nocode {
+.teamix-pro-nocode {
   &-empty {
     display: flex;
     flex-direction: column;
@@ -75,7 +75,7 @@
       right: 20px;
       bottom: 20px;
 
-      &>i {
+      & > i {
         cursor: pointer;
         color: var(--color-text1-8, #848484);
         background-color: rgba(0, 0, 0, 0.06);

package/es/nocode/pages/playground.js

@@ -26,7 +26,7 @@ import { useAction } from '../../actions';
 import { initConfigurator } from '../configurators';
 import { ComponentConfiguratorMap } from '../configurators/map';
 import { PlayGroundLayout } from '../playground';
-var cls = usePrefixCls('teamix-nocode');
+var cls = usePrefixCls('teamix-pro-nocode');
 export var PagePlayground = function PagePlayground(props) {
   var _useState = useState(undefined),
       _useState2 = _slicedToArray(_useState, 2),