@teamix/pro 1.1.7 → 1.1.8

package/es/form/Components/ProField/index.d.ts

@@ -139,6 +139,14 @@ declare const _default: React.ForwardRefExoticComponent<(Partial<import("@teamix
     type: "search";
 } & {
     children?: React.ReactNode;
+}> | Partial<import("@teamix/pro-field/lib/components/FieldTagFilter").IProFieldTagFilter & {
+    type: "tagFilter";
+} & {
+    children?: React.ReactNode;
+}> | Partial<import("@teamix/pro-field/lib/components/FieldMenuSelect").IProFieldMenuSelect & {
+    type: "menuSelect";
+} & {
+    children?: React.ReactNode;
 }> | Pick<Partial<{
     [key: string]: any;
     type: string;

package/es/form/ProForm/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["form", "initialValues", "schema", "scope", "components", "children", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol", "breakpoints", "onChange", "onSubmit", "onSubmitFailed"];
+var _excluded = ["form", "initialValues", "schema", "scope", "components", "children", "layout", "labelAlign", "wrapperAlign", "labelCol", "wrapperCol", "breakpoints", "onChange", "onSubmit", "onSubmitFailed", "className"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -11,6 +11,7 @@ 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 cls from 'classnames';
 import { createForm, onFormValuesChange } from '@formily/core';
 import { toJS } from '@formily/reactive';
 import { Form, FormLayout } from '@teamix/formily';
@@ -35,11 +36,13 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
       onChange = _ref.onChange,
       onSubmit = _ref.onSubmit,
       onSubmitFailed = _ref.onSubmitFailed,
+      className = _ref.className,
       otherProps = _objectWithoutProperties(_ref, _excluded);
 
   var form = useMemo(function () {
     return outerForm || createForm();
   }, []);
+  var prefix = 'teamix-pro-form';
   var getTeamixLayout = useMemo(function () {
     return breakpoints ? {
       breakpoints: breakpoints,
@@ -83,7 +86,11 @@ var ProForm = /*#__PURE__*/memo(function (_ref) {
   return outerForm === false ?
   /*#__PURE__*/
   // 特殊表单，无需渲染form实例，例如FormDialog等
-  React.createElement(FormLayout, _objectSpread(_objectSpread({}, otherProps), getTeamixLayout), formChildren) : /*#__PURE__*/React.createElement(Form, _objectSpread(_objectSpread(_objectSpread({}, otherProps), getTeamixLayout), {}, {
+  React.createElement(FormLayout, _objectSpread(_objectSpread({
+    className: cls(prefix, className)
+  }, otherProps), getTeamixLayout), formChildren) : /*#__PURE__*/React.createElement(Form, _objectSpread(_objectSpread(_objectSpread({
+    className: cls(prefix, className)
+  }, otherProps), getTeamixLayout), {}, {
     form: form,
     onAutoSubmit: onSubmit,
     onAutoSubmitFailed: onSubmitFailed

package/es/form/ProForm/index.scss

@@ -1,6 +1,13 @@
 @import '~@alifd/next/lib/core/index-noreset.scss';
 
 $form-item-cls: #{$css-prefix}formily-item;
+$teamix-pro-form: teamix-pro-form;
+
+.#{$teamix-pro-form} {
+  .next-affix {
+    top: auto !important; // todo 待pro-page-containe修复后移除
+  }
+}
 
 // FormItem 样式重写
 .#{$form-item-cls} {
@@ -38,6 +45,7 @@ $form-item-cls: #{$css-prefix}formily-item;
         .teamix-pro-field-radio,
         .teamix-pro-field-switch,
         .teamix-pro-field-colorradio,
+        .teamix-pro-field-range,
         .#{$css-prefix}btn-text {
           line-height: var(--form-element-medium-height, 32px);
         }
@@ -91,6 +99,9 @@ $form-item-cls: #{$css-prefix}formily-item;
   .#{$form-item-cls}-extra {
     color: var(--color-text1-8, #848484);
   }
+  .#{$form-item-cls}-error-help {
+    color: var(--color-error-5, #e84738);
+  }
 
   // 前缀 后缀
   .#{$form-item-cls}-control {
@@ -224,14 +235,16 @@ $inset-font-weight-medium: calc(
   }
 }
 
-.#{$css-prefix}formily-button-group-sticky {
-  margin-top: var(--form-element-medium-height, 32px);
-  padding: 12px 16px 12px 24px;
-  border: 0;
-  background: var(--color-fill1-1, #fff);
+.#{$teamix-pro-form}-button-affix.#{$css-prefix}affix {
+  left: 0;
+  right: 0;
+  width: 100% !important;
+  height: 56px !important;
+  padding-left: 24px;
+  background: var(--color-fill1-1, #fff) !important;
   box-shadow: 0 -1px 5px 0 rgba(38, 38, 38, 0.14);
   .#{$css-prefix}formily-button-group {
-    margin-top: 0;
+    margin-bottom: 12px;
   }
 }
 
@@ -252,3 +265,17 @@ $inset-font-weight-medium: calc(
     }
   }
 }
+
+// ArrayItems
+.#{$css-prefix}formily-array-items {
+  .#{$css-prefix}formily-grid-layout {
+    > div:last-child {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+  .#{$css-prefix}formily-array-base-remove {
+    cursor: pointer;
+  }
+}

package/es/form/SchemaForm/adapterType.js

@@ -41,6 +41,8 @@ var typeMap = (_typeMap = {
   ColorRadio: 'string',
   IconPicker: 'string',
   JsonInput: 'object',
+  TagPicker: 'array',
+  Range: 'string',
   Search: 'array',
   ArrayCollapse: 'array',
   ArrayCards: 'array',

package/es/form/SchemaForm/index.js

@@ -24,6 +24,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import React, { memo, useCallback, useMemo } from 'react';
 import { createSchemaField } from '@formily/react';
+import { Affix } from '@alicloudfe/components';
 import { Upload, FormLayout, FormItem, ArrayCollapse, ArrayCards, ArrayItems, ArrayTable, Space, FormGrid, FormTab, FormCollapse, FormStep, Editable, FormDialog, FormDrawer, FormButtonGroup, Submit, Reset } from '@teamix/formily';
 import ProField from '../Components/ProField';
 import { EditableDialog, EditableDrawer, EditablePopover } from '../Components/Editable';
@@ -55,7 +56,6 @@ export default /*#__PURE__*/memo(function (_ref) {
   var SchemaField = useMemo(function () {
     return createSchemaField({
       components: {
-        Upload: Upload,
         ProField: ProField,
         FormLayout: FormLayout,
         FormItem: FormItem,
@@ -79,7 +79,9 @@ export default /*#__PURE__*/memo(function (_ref) {
         EditablePopover: EditablePopover,
         FormGroup: FormGroup,
         Search: Search,
-        QueryFilter: QueryFilter
+        QueryFilter: QueryFilter,
+        Upload: Upload,
+        Affix: Affix
       }
     });
   }, []); // 合并schema中request的scope
@@ -250,7 +252,8 @@ export default /*#__PURE__*/memo(function (_ref) {
       type: 'object',
       properties: formatSchema(schema)
     };
-  }, [formatSchema, schema]);
+  }, [formatSchema, schema]); // console.log(schemaPro);
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SchemaField, {
     schema: schemaPro,
     components: components,

package/es/form/SchemaForm/initializeArrayIcon.js

@@ -1,5 +1,6 @@
 var _excluded = ["component", "props"],
-    _excluded2 = ["icon"];
+    _excluded2 = ["icon"],
+    _excluded3 = ["text", "type"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -44,7 +45,11 @@ var initialize = function initialize(item) {
   return _objectSpread(_objectSpread({}, other), {}, {
     component: component,
     props: _objectSpread({
-      icon: function icon(props) {
+      icon: function icon(_ref) {
+        var text = _ref.text,
+            type = _ref.type,
+            props = _objectWithoutProperties(_ref, _excluded3);
+
         return /*#__PURE__*/React.createElement(TeamixIcon, _objectSpread(_objectSpread({}, props), {}, {
           type: iconType,
           size: "small"

package/es/form/SchemaForm/initializeFormButton.js

@@ -1,5 +1,8 @@
-var _excluded = ["component", "props"],
-    _excluded2 = ["props", "component"];
+var _excluded = ["sticky"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -7,10 +10,6 @@ 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; }
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-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; }
-
 var buttonTextMap = {
   Submit: '提交',
   Reset: '重置'
@@ -18,58 +17,56 @@ var buttonTextMap = {
 
 var initializeButton = function initializeButton(item) {
   var component = item.component,
-      props = item.props,
-      otherProps = _objectWithoutProperties(item, _excluded);
-
-  return _objectSpread({
+      _item$props = item.props,
+      props = _item$props === void 0 ? {} : _item$props;
+  return _objectSpread(_objectSpread({}, item), {}, {
     component: component,
     props: _objectSpread({
       children: buttonTextMap[component]
     }, props)
-  }, otherProps);
+  });
 };
 
 var initialize = function initialize(item) {
-  var _item$props = item.props,
-      props = _item$props === void 0 ? {} : _item$props,
-      component = item.component,
-      otherProps = _objectWithoutProperties(item, _excluded2);
+  var component = item.component,
+      _item$props2 = item.props,
+      props = _item$props2 === void 0 ? {} : _item$props2,
+      _item$decoratorProps = item.decoratorProps,
+      decoratorProps = _item$decoratorProps === void 0 ? {} : _item$decoratorProps;
 
   var sticky = props.sticky,
-      align = props.align,
-      gutter = props.gutter;
-  var alignProps = align ? {
-    align: align
-  } : {};
-  var gutterProps = gutter ? {
-    gutter: gutter
-  } : {};
+      otherProps = _objectWithoutProperties(props, _excluded); // 单个按钮
+
 
   if (component && ['Submit', 'Reset'].includes(component)) {
     return initializeButton(item);
   }
 
-  var decoratorTemp = {
-    title: ' ',
+  var commonMode = _objectSpread(_objectSpread({
+    title: ' '
+  }, item), {}, {
+    component: component,
+    props: otherProps,
     decorator: 'FormButtonGroup.FormItem',
-    decoratorProps: {
+    decoratorProps: _objectSpread({
       inset: false
-    },
-    props: _objectSpread(_objectSpread({}, alignProps), gutterProps)
-  };
+    }, decoratorProps)
+  }); // 吸底模式
+
 
   if (sticky) {
-    decoratorTemp = {
-      title: '',
-      decorator: 'FormButtonGroup.Sticky',
-      decoratorProps: _objectSpread({}, alignProps),
-      props: _objectSpread({}, gutterProps)
+    return {
+      component: 'Affix',
+      props: {
+        offsetBottom: 0,
+        className: 'teamix-pro-form-button-affix'
+      },
+      children: [commonMode]
     };
-  }
+  } // 普通模式
+
 
-  return _objectSpread(_objectSpread({
-    component: component
-  }, decoratorTemp), otherProps);
+  return commonMode;
 };
 
 export default initialize;

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

@@ -1,3 +1,5 @@
 import type { IFormSchemaItem } from '../typing';
-declare const initialize: (item: IFormSchemaItem) => IFormSchemaItem;
+declare const initialize: (item: IFormSchemaItem & {
+    col?: number;
+}) => IFormSchemaItem;
 export default initialize;

package/es/form/SchemaForm/initializeFormStep.js

@@ -1,5 +1,5 @@
 var _excluded = ["props", "children", "title"],
-    _excluded2 = ["props", "children"];
+    _excluded2 = ["col", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -11,6 +11,13 @@ 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; }
 
+var getWidth = function getWidth(col, length) {
+  var newCol = col !== null && col !== void 0 ? col : (length + 1) * 4;
+  newCol = newCol > 24 ? 24 : newCol;
+  var width = 100 / 24 * newCol;
+  return "".concat(width, "%");
+};
+
 var initializeStepPane = function initializeStepPane(item) {
   var _item$props = item.props,
       props = _item$props === void 0 ? {} : _item$props,
@@ -32,17 +39,24 @@ var initialize = function initialize(item) {
   var _item$props2 = item.props,
       props = _item$props2 === void 0 ? {} : _item$props2,
       _item$children2 = item.children,
-      children = _item$children2 === void 0 ? [] : _item$children2,
-      otherProps = _objectWithoutProperties(item, _excluded2);
+      children = _item$children2 === void 0 ? [] : _item$children2;
 
-  return _objectSpread({
+  var col = props.col,
+      style = props.style,
+      otherProps = _objectWithoutProperties(props, _excluded2);
+
+  var width = getWidth(col, children.length);
+  return _objectSpread(_objectSpread({}, item), {}, {
     props: _objectSpread({
-      labelPlacement: 'hoz'
-    }, props),
+      labelPlacement: 'hoz',
+      style: _objectSpread({
+        width: width
+      }, style)
+    }, otherProps),
     children: children.map(function (item) {
       return initializeStepPane(item);
     })
-  }, otherProps);
+  });
 };
 
 export default initialize;

package/es/form/SchemaForm/initializeProField.js

@@ -45,6 +45,8 @@ var proFieldTypeMap = {
   ColorRadio: 'colorRadio',
   IconPicker: 'icon',
   JsonInput: 'json',
+  TagPicker: 'tagFilter',
+  Range: 'range',
   Search: 'search' // Upload: 'upload',
 
 };

package/es/form/index.d.ts

@@ -14,7 +14,8 @@ export * as formilyTeamix from '@teamix/formily';
  */
 import { createForm, registerValidateRules as registerRules, registerValidateFormats as registerFormats, registerValidateLocale, setValidateLanguage } from '@formily/core';
 import { FormConsumer } from '@formily/react';
-export { createForm, FormConsumer, registerRules, registerFormats, registerValidateLocale, setValidateLanguage, };
+import { FormDialog, FormDrawer, FormStep, FormTab, FormCollapse } from '@teamix/formily';
+export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, FormCollapse, registerRules, registerFormats, registerValidateLocale, setValidateLanguage, };
 /**
  * 导出 Filter 组件
  */

package/es/form/index.js

@@ -20,7 +20,8 @@ export { _formilyTeamix as formilyTeamix };
 
 import { createForm, registerValidateRules as registerRules, registerValidateFormats as registerFormats, registerValidateLocale, setValidateLanguage } from '@formily/core';
 import { FormConsumer } from '@formily/react';
-export { createForm, FormConsumer, registerRules, registerFormats, registerValidateLocale, setValidateLanguage };
+import { FormDialog, FormDrawer, FormStep, FormTab, FormCollapse } from '@teamix/formily';
+export { createForm, FormConsumer, FormDialog, FormDrawer, FormStep, FormTab, FormCollapse, registerRules, registerFormats, registerValidateLocale, setValidateLanguage };
 /**
  * 导出 Filter 组件
  */

package/es/form/typing.d.ts

@@ -6,7 +6,7 @@ export interface anyObject {
     [propName: string]: any;
 }
 declare type FieldDisplayTypes = 'none' | 'hidden' | 'visible';
-export declare type IBaseComponent = 'Input' | 'Password' | 'TextArea' | 'NumberPicker' | 'Percent' | 'Money' | 'Select' | 'MultipleSelect' | 'TreeSelect' | 'Cascader' | 'MultipleCascader' | 'ArbitraryCascader' | 'Radio' | 'Checkbox' | 'Switch' | 'DatePicker' | 'TimePicker' | 'DateTimePicker' | 'WeekPicker' | 'MonthPicker' | 'YearPicker' | 'QuarterPicker' | 'DateRangePicker' | 'TimeRangePicker' | 'DateTimeRangePicker' | 'WeekRangePicker' | 'MonthRangePicker' | 'YearRangePicker' | 'QuarterRangePicker' | 'Transfer' | 'Upload' | 'ColorPicker' | 'ColorRadio' | 'IconPicker' | 'JsonInput';
+export declare type IBaseComponent = 'Input' | 'Password' | 'TextArea' | 'NumberPicker' | 'Percent' | 'Money' | 'Select' | 'MultipleSelect' | 'TreeSelect' | 'Cascader' | 'MultipleCascader' | 'ArbitraryCascader' | 'Radio' | 'Checkbox' | 'Switch' | 'DatePicker' | 'TimePicker' | 'DateTimePicker' | 'WeekPicker' | 'MonthPicker' | 'YearPicker' | 'QuarterPicker' | 'DateRangePicker' | 'TimeRangePicker' | 'DateTimeRangePicker' | 'WeekRangePicker' | 'MonthRangePicker' | 'YearRangePicker' | 'QuarterRangePicker' | 'Transfer' | 'Upload' | 'ColorPicker' | 'ColorRadio' | 'IconPicker' | 'JsonInput' | 'TagPicker' | 'Range' | 'Search';
 export declare type IButtonComponent = 'Submit' | 'Reset';
 export declare type IComboComponent = 'ArrayCards' | 'ArrayCards.Addition' | 'ArrayCards.Remove' | 'ArrayCards.MoveUp' | 'ArrayCards.MoveDown' | 'ArrayCards.Index' | 'ArrayCollapse' | 'ArrayCollapse.CollapsePanel' | 'ArrayCollapse.Addition' | 'ArrayCollapse.Remove' | 'ArrayCollapse.MoveUp' | 'ArrayCollapse.MoveDown' | 'ArrayCollapse.Index' | 'ArrayTable' | 'ArrayTable.Column' | 'ArrayTable.SortHandle' | 'ArrayTable.Addition' | 'ArrayTable.Remove' | 'ArrayTable.MoveDown' | 'ArrayTable.MoveUp' | 'ArrayTable.Index' | 'ArrayItems' | 'ArrayItems.Item' | 'ArrayItems.SortHandle' | 'ArrayItems.Addition' | 'ArrayItems.Remove' | 'ArrayItems.MoveDown' | 'ArrayItems.MoveUp' | 'ArrayItems.Index' | 'Editable' | 'Editable.Popover' | 'Editable.Dialog' | 'Editable.Drawer';
 export declare type ILayoutComponent = 'FormFlex' | 'FormGrid' | 'FormGroup' | 'FormGroup.GroupPanel' | 'Search' | 'Search.SearchPanel' | 'FormTab' | 'FormTab.TabPane' | 'FormStep' | 'FormStep.StepPane' | 'FormCollapse' | 'FormCollapse.CollapsePanel' | 'FormButtonGroup' | 'FormDialog' | 'FormDrawer' | 'FormDialog.Footer' | 'FormDrawer.Footer';

package/es/index.d.ts

@@ -1,4 +1,4 @@
-import ProAction from './actions';
+import ProActions from './actions';
 import ProCard from './card';
 import ProField from './field';
 import ProForm from './form';
@@ -20,5 +20,5 @@ export * from './page-container';
 export * from './page-header';
 export * from './skeleton';
 export * from './table';
-declare const version = "1.1.6";
-export { version, ProAction, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, hooks, nocode, templates, utils, };
+declare const version = "1.1.7";
+export { version, ProActions, ProCard, ProField, ProForm, ProInfo, ProPageContainer, ProPageHeader, ProSkeleton, ProTable, hooks, nocode, templates, utils, };

package/es/index.js

@@ -1,4 +1,4 @@
-import ProAction from './actions';
+import ProActions from './actions';
 import ProCard from './card';
 import ProField from './field';
 import ProForm from './form';
@@ -24,6 +24,6 @@ export * from './page-container';
 export * from './page-header';
 export * from './skeleton';
 export * from './table';
-var version = '1.1.6';
-export { version, ProAction, ProCard, ProField, ProForm, ProInfo, // ProLayout,
+var version = '1.1.7';
+export { version, ProActions, ProCard, ProField, ProForm, ProInfo, // ProLayout,
 ProPageContainer, ProPageHeader, ProSkeleton, ProTable, hooks, nocode, templates, utils };

package/es/nocode/index.scss

@@ -17,13 +17,10 @@
     border: 1px solid var(--color-line1-1, #eaeaea);
 
     &-component {
+      position: relative;
       padding: 20px;
       flex-grow: 1;
       border-right: 1px solid var(--color-line1-1, #eaeaea);
-
-      &>.teamix-pro-page-container {
-        padding: 0;
-      }
     }
 
     &-configurator {

package/es/page-header/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { IActionButton } from '../actions';
+import { ProInfoProps } from '../info';
 import './index.scss';
 export interface BreadcrumbItem {
     link?: string;
@@ -38,6 +39,7 @@ export declare type PageHeaderProps = {
     maxActions?: number;
     tags?: TagItem[];
     data?: DataItem[];
+    info?: ProInfoProps | React.ReactNode;
 } & React.HTMLAttributes<HTMLElement>;
 declare const PageHeader: React.FC<PageHeaderProps>;
 export default PageHeader;

package/es/page-header/index.js

@@ -1,13 +1,13 @@
-var _excluded = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "maxActions", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "children", "className", "style"];
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var _excluded = ["title", "description", "icon", "iconColor", "iconBackgroundType", "iconBackgroundColor", "maxActions", "goback", "operation", "extra", "image", "loading", "breadcrumb", "tags", "data", "info", "children", "className", "style"];
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 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 React from 'react';
@@ -18,6 +18,7 @@ import { Breadcrumb, Tag } from '@alicloudfe/components';
 import { baseClass } from '@teamix/utils';
 import { ActionGroup } from '../actions';
 import { BaseSkeleton } from '../skeleton';
+import ProInfo from '../info';
 import './index.scss';
 var cls = baseClass('teamix-pro-page-header');
 
@@ -140,6 +141,18 @@ var renderData = function renderData(data) {
   }));
 };
 
+var renderInfo = function renderInfo(info) {
+  // @ts-ignore
+  if (info === null || info === void 0 ? void 0 : info.columns) {
+    // @ts-ignore
+    return /*#__PURE__*/React.createElement(ProInfo, _objectSpread({
+      type: "header"
+    }, info));
+  }
+
+  return info;
+};
+
 var PageHeader = function PageHeader(props) {
   var title = props.title,
       description = props.description,
@@ -158,6 +171,7 @@ var PageHeader = function PageHeader(props) {
       breadcrumb = props.breadcrumb,
       tags = props.tags,
       data = props.data,
+      info = props.info,
       children = props.children,
       className = props.className,
       style = props.style,
@@ -227,7 +241,9 @@ var PageHeader = function PageHeader(props) {
     className: cls('data')
   }, renderData(data)), /*#__PURE__*/React.createElement("section", {
     className: cls('operation')
-  }, !loading && renderOperations(operation, maxActions)))), children);
+  }, !loading && renderOperations(operation, maxActions)))), info && !loading && /*#__PURE__*/React.createElement("section", {
+    className: classnames(cls('section'), cls('info'))
+  }, renderInfo(info)), children);
 };
 
 export default PageHeader;

package/es/page-header/index.scss

@@ -20,6 +20,10 @@ $prefix: 'teamix-pro-page-header';
     }
   }
 
+  .#{$prefix}-info {
+    padding-top: var(--s-2, 8px);
+  }
+
   .#{$prefix}-title {
     display: flex;
     font-size: var(--font-size-display-1, 24px);