Merge branch 'pre-release' into amis-saas-7978

2024-12-15 17:31:18 +08:00 · 2022-12-16 16:02:34 +08:00 · 2022-12-16 16:02:34 +08:00 · aca33176e1
commit aca33176e1
parent c61097717a 396024eb45
49 changed files with 561 additions and 188 deletions
--- a/packages/amis-editor/package.json
+++ b/packages/amis-editor/package.json
@ -1,6 +1,6 @@
 {
  "name": "amis-editor",
-  "version": "5.2.1-beta.31",
+  "version": "5.2.2-alpha.5",
  "description": "amis 可视化编辑器",
  "main": "lib/index.js",
  "module": "esm/index.js",
@ -53,10 +53,10 @@
    "@types/sortablejs": "^1.10.7",
    "@types/tinycolor2": "^1.4.3",
    "ajv": "^8.8.2",
-    "amis": "2.5.1",
-    "amis-core": "2.5.1",
-    "amis-formula": "2.5.1",
-    "amis-ui": "2.5.1",
+    "amis": "2.5.3-beta.0",
+    "amis-core": "2.5.3-beta.0",
+    "amis-formula": "2.5.3-beta.0",
+    "amis-ui": "2.5.3-beta.0",
    "axios": "0.21.1",
    "concurrently": "^6.2.0",
    "css-loader": "^6.2.0",
@ -94,4 +94,4 @@
    "react": ">=16.8.6",
    "react-dom": ">=16.8.6"
  }
-}
+}
--- a/packages/amis-editor/src/component/TableViewEditor.tsx
+++ b/packages/amis-editor/src/component/TableViewEditor.tsx
@ -16,6 +16,7 @@ import {autobind, JSONGetById, EditorStoreType} from 'amis-editor-core';
 interface TableViewEditorProps {
  schema: TableViewSchema;
  manager: EditorManager;
+  children?: any;
 }

 interface TableViewEditorState {
@ -517,6 +518,7 @@ export class TableViewEditor extends React.Component<
  }

  render() {
+    const {children, schema} = this.props;
    let rowLines = this.state.trIds.map((id: string) => (
      <div
        className="ae-TableViewEditor-rowLine"
@ -536,8 +538,8 @@ export class TableViewEditor extends React.Component<
    ));

    return (
-      <div className="ae-TableViewEditor" ref={this.tableViewWrapperRef}>
-        {this.props.children}
+      <div className="ae-TableViewEditor" ref={this.tableViewWrapperRef} style={schema?.style}>
+        {children}
        {this.renderMergeIcon()}
        {rowLines}
        {colLines}
--- a/packages/amis-editor/src/index.tsx
+++ b/packages/amis-editor/src/index.tsx
@ -145,6 +145,7 @@ import './plugin/Layout/Layout_fixed';
 import './plugin/Layout/Layout_scroll_x';
 import './plugin/Layout/Layout_scroll_y';
 import './plugin/Layout/Layout1_2_v4';
+import './plugin/Layout/Layout_free_container';

 import {GridPlugin} from './plugin/Grid';

--- a/packages/amis-editor/src/locale/en-US.ts
+++ b/packages/amis-editor/src/locale/en-US.ts
@ -3545,5 +3545,31 @@ extendLocale('en-US', {
  'a2b62974f4d7564bb68b570116f25a10': 'Minimum width',
  '2bd921d0ea7a73b77ee0fcddb1afcc84': 'Minimum height',
  'eb7366583485f478e3d8c2b105ea51ff':
-    'Defines the magnification of the item. If it is set to 0, it will not be magnified even if there is space left in the parent container.'
+    'Defines the magnification of the item. If it is set to 0, it will not be magnified even if there is space left in the parent container.',
+  '5d3d48de1ba22368eacdc1c69fb044ce': 'Component inner layer CSS class name',
+  '72c32b47c5e4dcd58ddabdb8fde761a0':
+    'Suspended container: a special layout container based on CSS Flex implementation.',
+  'a03384e93b62e3110aa92c9e345111ba':
+    'Bottom suction container: a layout container based on CSS Flex.',
+  'f564e3e66dd2aca0e080cb6484c95a5e':
+    'Ceiling container: a layout container based on CSS Flex.',
+  'db805d4e361ac2d3fc6047eaea1a7c69': 'Free container',
+  '9ccbfde404798593fa6fdeac9dbef200':
+    'Free container: its direct child elements support dragging to adjust the position.',
+  'f20ca09e513399510ce34ba2cb05b7d9':
+    'X axis rolling container: a layout container based on CSS Flex implementation.',
+  '47ef0cec2c3436377a42390e10de4567':
+    'Y-axis rolling container: a layout container based on CSS Flex.',
+  '8c2bb89f516205027b9ed6609fb17726': 'Blocking condition',
+  '46a3c6ab94da0b16a707bdd3b74c9e09':
+    'When the conditions are met, the execution of subsequent actions of the current event will be blocked',
+  '6e6d4269d0dc3324d551062350a2ae9f': 'Silent request',
+  '56e13c39822a814ab39b0d5a0867d7dc':
+    'When enabled, the service request will be sent in a silent mode, that is, no success or error message will pop up.',
+  '7f019b96ffb7d72ec8d6ce8d76e5362f': 'Expression configured',
+  '699829ed5bab67dfb360764c3bbaed4e': '{{@1}} - Event Configuration',
+  '5ba999eb762f60324033b735e55d989c': 'Event weight prevention',
+  '7fe94616be0e8fb5ef5ab40a7397f0aa':
+    'After event anti duplication is enabled, only the last event will be executed when triggered multiple times within the anti duplication time',
+  '91b72e901f1663637157cda638ac4dcc': 'Anti gravity time'
 });
--- a/packages/amis-editor/src/locale/zh-CN.ts
+++ b/packages/amis-editor/src/locale/zh-CN.ts
@ -3132,5 +3132,31 @@ extendLocale('zh-CN', {
  'a2b62974f4d7564bb68b570116f25a10': '最小宽度',
  '2bd921d0ea7a73b77ee0fcddb1afcc84': '最小高度',
  'eb7366583485f478e3d8c2b105ea51ff':
-    '定义项目的放大比例，如果设置为0，即使父容器存在剩余空间，也不放大。'
+    '定义项目的放大比例，如果设置为0，即使父容器存在剩余空间，也不放大。',
+  '5d3d48de1ba22368eacdc1c69fb044ce': '组件内层 CSS 类名',
+  '72c32b47c5e4dcd58ddabdb8fde761a0':
+    '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。',
+  'a03384e93b62e3110aa92c9e345111ba':
+    '吸底容器: 基于 CSS Flex 实现的布局容器。',
+  'f564e3e66dd2aca0e080cb6484c95a5e':
+    '吸顶容器: 基于 CSS Flex 实现的布局容器。',
+  'db805d4e361ac2d3fc6047eaea1a7c69': '自由容器',
+  '9ccbfde404798593fa6fdeac9dbef200':
+    '自由容器: 其直接子元素支持拖拽调整位置。',
+  'f20ca09e513399510ce34ba2cb05b7d9':
+    'x轴滚动容器: 基于 CSS Flex 实现的布局容器。',
+  '47ef0cec2c3436377a42390e10de4567':
+    'y轴滚动容器: 基于 CSS Flex 实现的布局容器。',
+  '8c2bb89f516205027b9ed6609fb17726': '阻断条件',
+  '46a3c6ab94da0b16a707bdd3b74c9e09':
+    '满足条件时，将会阻断当前事件的后续动作的执行',
+  '6e6d4269d0dc3324d551062350a2ae9f': '静默请求',
+  '56e13c39822a814ab39b0d5a0867d7dc':
+    '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。',
+  '7f019b96ffb7d72ec8d6ce8d76e5362f': '表达式已配置',
+  '699829ed5bab67dfb360764c3bbaed4e': '{{@1}}-事件配置',
+  '5ba999eb762f60324033b735e55d989c': '事件防重',
+  '7fe94616be0e8fb5ef5ab40a7397f0aa':
+    '开启事件防重后，防重时间内多次触发事件只会执行最后一次',
+  '91b72e901f1663637157cda638ac4dcc': '防重时间'
 });
--- a/packages/amis-editor/src/plugin/CRUD.tsx
+++ b/packages/amis-editor/src/plugin/CRUD.tsx
@ -899,6 +899,12 @@ export class CRUDPlugin extends BasePlugin {
            type: 'divider'
          },

+          getSchemaTpl('loadingConfig', {}, {context}),
+
+          {
+            type: 'divider'
+          },
+
          {
            label: '默认消息提示',
            type: 'combo',
--- a/packages/amis-editor/src/plugin/Cards.tsx
+++ b/packages/amis-editor/src/plugin/Cards.tsx
@ -106,6 +106,7 @@ export class CardsPlugin extends BasePlugin {
              type: 'input-text',
              label: '打开外部链接'
            },
+
            isCRUDBody
              ? null
              : {
@ -116,6 +117,7 @@ export class CardsPlugin extends BasePlugin {
                  description: '绑定当前环境变量',
                  test: !isCRUDBody
                },
+
            {
              name: 'placeholder',
              value: '暂无数据',
--- a/packages/amis-editor/src/plugin/Container.tsx
+++ b/packages/amis-editor/src/plugin/Container.tsx
@ -43,9 +43,40 @@ export class ContainerPlugin extends BasePlugin {
    const isRowContent =
      curRendererSchema?.direction === 'row' ||
      curRendererSchema?.direction === 'row-reverse';
+    const isFreeContainer = curRendererSchema?.isFreeContainer || false;
    const isFlexItem = this.manager?.isFlexItem(context?.id);
    const isFlexColumnItem = this.manager?.isFlexColumnItem(context?.id);

+    const displayTpl = [
+      getSchemaTpl('layout:display'),
+      getSchemaTpl('layout:flexDirection', {
+        visibleOn: 'data.style && data.style.display === "flex"'
+      }),
+      getSchemaTpl('layout:justifyContent', {
+        label: '水平对齐方式',
+        visibleOn:
+          'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"'
+      }),
+      getSchemaTpl('layout:justifyContent', {
+        label: '垂直对齐方式',
+        visibleOn:
+          'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
+      }),
+      getSchemaTpl('layout:alignItems', {
+        label: '水平对齐方式',
+        visibleOn:
+          'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
+      }),
+      getSchemaTpl('layout:alignItems', {
+        label: '垂直对齐方式',
+        visibleOn:
+          'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")'
+      }),
+      getSchemaTpl('layout:flex-wrap', {
+        visibleOn: 'data.style && data.style.display === "flex"'
+      }),
+    ];
+
    return getSchemaTpl('tabs', [
      {
        title: '属性',
@ -117,37 +148,9 @@ export class ContainerPlugin extends BasePlugin {
              getSchemaTpl('layout:inset', {
                mode: 'vertical'
              }),
-              getSchemaTpl('layout:z-index'),
-              getSchemaTpl('layout:display'),

-              getSchemaTpl('layout:flexDirection', {
-                visibleOn: 'data.style && data.style.display === "flex"'
-              }),
-
-              getSchemaTpl('layout:justifyContent', {
-                label: '水平对齐方式',
-                visibleOn:
-                  'data.style && data.style.display === "flex" && data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse"'
-              }),
-              getSchemaTpl('layout:justifyContent', {
-                label: '垂直对齐方式',
-                visibleOn:
-                  'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
-              }),
-              getSchemaTpl('layout:alignItems', {
-                label: '水平对齐方式',
-                visibleOn:
-                  'data.style && data.style.display === "flex" && (data.style.flexDirection === "column" || data.style.flexDirection === "column-reverse")'
-              }),
-              getSchemaTpl('layout:alignItems', {
-                label: '垂直对齐方式',
-                visibleOn:
-                  'data.style && data.style.display === "flex" && (data.style.flexDirection === "row" || data.style.flexDirection === "row-reverse")'
-              }),
-
-              getSchemaTpl('layout:flex-wrap', {
-                visibleOn: 'data.style && data.style.display === "flex"'
-              }),
+              // 自由容器不需要 display 相关配置项
+              ...(!isFreeContainer ? displayTpl : []),

              getSchemaTpl('layout:isFixedHeight', {
                visibleOn: `${!isFlexItem || !isFlexColumnItem}`
@ -188,8 +191,8 @@ export class ContainerPlugin extends BasePlugin {
                  isFlexItem && !isFlexColumnItem
                } && data.style.flex === '0 0 auto')`
              }),
-
-              !isFlexItem ? getSchemaTpl('layout:margin-center') : null
+              !isFlexItem ? getSchemaTpl('layout:margin-center') : null,
+              getSchemaTpl('layout:z-index')
            ]
          },
          getSchemaTpl('status')
--- a/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ButtonGroupSelect.tsx
@ -124,7 +124,16 @@ export class ButtonGroupControlPlugin extends BasePlugin {
            },
            {
              title: '按钮管理',
-              body: [getSchemaTpl('optionControlV2')]
+              body: [
+                getSchemaTpl('optionControlV2'),
+                getSchemaTpl(
+                  'loadingConfig',
+                  {
+                    visibleOn: 'this.source || !this.options'
+                  },
+                  {context}
+                )
+              ]
            },
            getSchemaTpl('status', {
              isFormItem: true
--- a/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ChainedSelect.tsx
@ -158,6 +158,14 @@ export class ChainedSelectControlPlugin extends BasePlugin {
                )
              }),

+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
+
              {
                type: 'input-text',
                name: 'labelField',
--- a/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
+++ b/packages/amis-editor/src/plugin/Form/Checkboxes.tsx
@ -195,7 +195,14 @@ export class CheckboxesControlPlugin extends BasePlugin {
                form: {
                  body: [getSchemaTpl('deleteApi')]
                }
-              })
+              }),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              )
            ]
          },
          getSchemaTpl('status', {isFormItem: true}),
--- a/packages/amis-editor/src/plugin/Form/Form.tsx
+++ b/packages/amis-editor/src/plugin/Form/Form.tsx
@ -724,6 +724,18 @@ export class FormPlugin extends BasePlugin {
                  type: 'divider'
                },

+                getSchemaTpl(
+                  'loadingConfig',
+                  {
+                    label: '加载设置'
+                  },
+                  {context}
+                ),
+
+                {
+                  type: 'divider'
+                },
+
                isCRUDFilter
                  ? {
                      name: 'messages',
--- a/packages/amis-editor/src/plugin/Form/Formula.tsx
+++ b/packages/amis-editor/src/plugin/Form/Formula.tsx
@ -67,7 +67,7 @@ export class FormulaControlPlugin extends BasePlugin {
  ];

  renderRenderer(props: any) {
-    return this.renderPlaceholder('功能组件（公式）', props.key);
+    return this.renderPlaceholder('功能组件（公式）', props.key, props.style);
  }
 }

--- a/packages/amis-editor/src/plugin/Form/Hidden.tsx
+++ b/packages/amis-editor/src/plugin/Form/Hidden.tsx
@ -34,11 +34,8 @@ export class HiddenControlPlugin extends BasePlugin {
  ];

  renderRenderer(props: any) {
-    return (
-      <div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
-        <span className="text-muted">功能组件（隐藏字段）</span>
-      </div>
-    );
+    console.log('props:', props);
+    return this.renderPlaceholder('功能组件（隐藏字段）', props.key, props.style);
  }
 }

--- a/packages/amis-editor/src/plugin/Form/InputCity.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputCity.tsx
@ -120,7 +120,9 @@ export class CityControlPlugin extends BasePlugin {
                name: 'searchable',
                label: '是否出搜索框',
                pipeIn: defaultValue(false)
-              })
+              }),
+
+              getSchemaTpl('loadingConfig', {}, {context})
            ]
          },
          getSchemaTpl('status', {isFormItem: true}),
--- a/packages/amis-editor/src/plugin/Form/InputTree.tsx
+++ b/packages/amis-editor/src/plugin/Form/InputTree.tsx
@ -349,6 +349,13 @@ export class TreeControlPlugin extends BasePlugin {
                label: '数据',
                showIconField: true
              }),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
              getSchemaTpl('switch', {
                label: '只可选择叶子节点',
                name: 'onlyLeaf'
--- a/packages/amis-editor/src/plugin/Form/ListSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/ListSelect.tsx
@ -122,7 +122,14 @@ export class ListControlPlugin extends BasePlugin {
          body: [
            getSchemaTpl('optionControlV2', {
              description: '设置选项后，输入时会下拉这些选项供用户参考。'
-            })
+            }),
+            getSchemaTpl(
+              'loadingConfig',
+              {
+                visibleOn: 'this.source'
+              },
+              {context}
+            )
          ]
        },
        status: {}
--- a/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
+++ b/packages/amis-editor/src/plugin/Form/MatrixCheckboxes.tsx
@ -202,7 +202,8 @@ export class MatrixControlPlugin extends BasePlugin {
                label: tipedLabel('接口', '获取矩阵数据接口'),
                name: 'source',
                mode: 'normal'
-              })
+              }),
+              getSchemaTpl('loadingConfig', {}, {context})
              // getSchemaTpl('value')
            ]
          },
--- a/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/NestedSelect.tsx
@ -305,7 +305,16 @@ export class NestedSelectControlPlugin extends BasePlugin {
          },
          {
            title: '选项',
-            body: [getSchemaTpl('treeOptionControl')]
+            body: [
+              getSchemaTpl('treeOptionControl'),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              )
+            ]
          },
          getSchemaTpl('status', {isFormItem: true}),
          getSchemaTpl('validation', {
--- a/packages/amis-editor/src/plugin/Form/Radios.tsx
+++ b/packages/amis-editor/src/plugin/Form/Radios.tsx
@ -140,7 +140,14 @@ export class RadiosControlPlugin extends BasePlugin {
                name: 'selectFirst',
                horizontal: {justify: true, left: 5},
                visibleOn: '!this.options'
-              })
+              }),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              )
            ]
          },
          getSchemaTpl('status', {isFormItem: true}),
--- a/packages/amis-editor/src/plugin/Form/Select.tsx
+++ b/packages/amis-editor/src/plugin/Form/Select.tsx
@ -251,6 +251,13 @@ export class SelectControlPlugin extends BasePlugin {
            title: '选项',
            body: [
              getSchemaTpl('optionControlV2'),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
              // 模板
              getSchemaTpl('optionsMenuTpl', {
                manager: this.manager,
--- a/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
+++ b/packages/amis-editor/src/plugin/Form/TabsTransfer.tsx
@ -324,6 +324,13 @@ export class TabsTransferPlugin extends BasePlugin {
                name: 'options'
              },
              getSchemaTpl('source'),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
              getSchemaTpl('joinValues'),
              getSchemaTpl('delimiter'),
              getSchemaTpl('extractValue'),
--- a/packages/amis-editor/src/plugin/Form/Transfer.tsx
+++ b/packages/amis-editor/src/plugin/Form/Transfer.tsx
@ -234,6 +234,14 @@ export class TransferPlugin extends BasePlugin {
                multiple: true
              }),

+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
+
              {
                type: 'ae-transferTableControl',
                label: '数据',
--- a/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
+++ b/packages/amis-editor/src/plugin/Form/TreeSelect.tsx
@ -345,6 +345,13 @@ export class TreeSelectControlPlugin extends BasePlugin {
                label: '数据',
                showIconField: true
              }),
+              getSchemaTpl(
+                'loadingConfig',
+                {
+                  visibleOn: 'this.source || !this.options'
+                },
+                {context}
+              ),
              getSchemaTpl('switch', {
                label: '只可选择叶子节点',
                name: 'onlyLeaf'
--- a/packages/amis-editor/src/plugin/Form/UUID.tsx
+++ b/packages/amis-editor/src/plugin/Form/UUID.tsx
@ -38,11 +38,7 @@ export class UUIDControlPlugin extends BasePlugin {
  panelBody = [{type: 'static', value: '自动按 UUID v4 格式生成，无需配置'}];

  renderRenderer(props: any) {
-    return (
-      <div key={props.key} className="wrapper-sm b-a b-light m-b-sm">
-        <span className="text-muted">UUID（展现将隐藏）</span>
-      </div>
-    );
+    return this.renderPlaceholder('UUID（展现将隐藏）', props.key, props.style);
  }
 }

--- a/packages/amis-editor/src/plugin/Grid.tsx
+++ b/packages/amis-editor/src/plugin/Grid.tsx
@ -29,7 +29,7 @@ export class GridPlugin extends BasePlugin {
  isBaseComponent = true;
  description = '分栏布局';
  docLink = '/amis/zh-CN/components/grid';
-  tags = ['容器'];
+  tags = ['布局'];
  icon = 'fa fa-th';
  pluginIcon = 'grid-plugin';

--- a/packages/amis-editor/src/plugin/IFrame.tsx
+++ b/packages/amis-editor/src/plugin/IFrame.tsx
@ -87,7 +87,7 @@ export class IFramePlugin extends BasePlugin {
  };

  renderRenderer(props: any) {
-    return this.renderPlaceholder(`IFrame 页面（${props.src}）`);
+    return this.renderPlaceholder(`IFrame 页面（${props.src}）`, props.key, props.style);
  }
 }

--- a/packages/amis-editor/src/plugin/Image.tsx
+++ b/packages/amis-editor/src/plugin/Image.tsx
@ -173,6 +173,11 @@ export class ImagePlugin extends BasePlugin {
              autoComplete: false
            }),

+            getSchemaTpl('className', {
+              name: 'innerClassName',
+              label: '组件内层 CSS 类名'
+            }),
+
            getSchemaTpl('className', {
              name: 'imageClassName',
              label: '图片 CSS 类名'
--- a/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
+++ b/packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx
@ -15,7 +15,7 @@ import type {
 // 默认的列容器Schema
 export const defaultFlexColumnSchema = (title?: string) => {
  return {
-    type: 'wrapper',
+    type: 'container',
    body: [],
    size: 'xs',
    style: {
@ -59,13 +59,13 @@ export class FlexPluginBase extends BasePlugin {
  description =
    '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用';
  docLink = '/amis/zh-CN/components/flex';
-  tags = ['常见布局'];
+  tags = ['布局'];
  scaffold: any = defaultFlexContainerSchema;
  previewSchema = {
    ...this.scaffold
  };

-  panelTitle = 'Flex';
+  panelTitle = '布局容器';

  panelJustify = true; // 右侧配置项默认左右展示

@ -121,7 +121,6 @@ export class FlexPluginBase extends BasePlugin {
                  getSchemaTpl('layout:inset', {
                    mode: 'vertical'
                  }),
-                  getSchemaTpl('layout:z-index'),
                  getSchemaTpl('layout:flexDirection', {
                    name: 'direction'
                  }),
@ -192,8 +191,8 @@ export class FlexPluginBase extends BasePlugin {
                      isFlexItem && !isFlexColumnItem
                    } && data.style.flex === '0 0 auto')`
                  }),
-
-                  !isFlexItem ? getSchemaTpl('layout:margin-center') : null
+                  !isFlexItem ? getSchemaTpl('layout:margin-center') : null,
+                  getSchemaTpl('layout:z-index')
                ]
              },
              getSchemaTpl('status')
--- a/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout1_2_v4.tsx
@ -6,14 +6,13 @@ export default class Layout1_2_v4 extends FlexPluginBase {
  isBaseComponent = true;
  pluginIcon = 'layout-3-1-plugin';
  description = '常见布局：经典布局（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
  order = 307;
  scaffold: any = {
    type: 'flex',
    className: 'p-1',
    items: [
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -25,7 +24,7 @@ export default class Layout1_2_v4 extends FlexPluginBase {
        type: 'flex',
        items: [
          {
-            type: 'wrapper',
+            type: 'container',
            size: 'xs',
            body: [],
            style: {
@ -38,7 +37,7 @@ export default class Layout1_2_v4 extends FlexPluginBase {
            type: 'flex',
            items: [
              {
-                type: 'wrapper',
+                type: 'container',
                size: 'xs',
                body: [],
                style: {
@ -49,7 +48,7 @@ export default class Layout1_2_v4 extends FlexPluginBase {
                }
              },
              {
-                type: 'wrapper',
+                type: 'container',
                size: 'xs',
                body: [],
                style: {
--- a/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed.tsx
@ -5,8 +5,7 @@ export default class Layout_fixed extends FlexPluginBase {
  name = '悬浮容器';
  isBaseComponent = true;
  pluginIcon = 'layout-fixed-plugin';
-  description = '常见布局：悬浮容器（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
+  description = '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。';
  order = 503;
  scaffold: any = {
    type: 'container',
@ -22,6 +21,7 @@ export default class Layout_fixed extends FlexPluginBase {
    },
    originPosition: 'right-bottom'
  };
+  panelTitle = '悬浮容器';
 }

 registerEditorPlugin(Layout_fixed);
--- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_bottom.tsx
@ -5,11 +5,11 @@ export default class Layout_fixed_bottom extends FlexPluginBase {
  name = '吸底容器';
  isBaseComponent = true;
  pluginIcon = 'flex-container-plugin';
-  description = '常见布局：吸底容器（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
+  description = '吸底容器: 基于 CSS Flex 实现的布局容器。';
  order = 501;
  scaffold: any = {
    type: 'flex',
+    title: '吸底容器',
    className: 'p-1',
    items: [
      defaultFlexColumnSchema(),
@ -34,6 +34,7 @@ export default class Layout_fixed_bottom extends FlexPluginBase {
    isFixedHeight: false,
    originPosition: 'right-bottom'
  };
+  panelTitle = '吸底容器';
 }

 registerEditorPlugin(Layout_fixed_bottom);
--- a/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_fixed_top.tsx
@ -5,11 +5,11 @@ export default class Layout_fixed_top extends FlexPluginBase {
  name = '吸顶容器';
  isBaseComponent = true;
  pluginIcon = 'flex-container-plugin';
-  description = '常见布局：吸顶容器（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
+  description = '吸顶容器: 基于 CSS Flex 实现的布局容器。';
  order = 502;
  scaffold: any = {
    type: 'flex',
+    title: '吸顶容器',
    className: 'p-1',
    items: [
      defaultFlexColumnSchema(),
@ -32,6 +32,7 @@ export default class Layout_fixed_top extends FlexPluginBase {
    isFixedHeight: false,
    originPosition: 'right-bottom'
  };
+  panelTitle = '吸顶容器';
 }

 registerEditorPlugin(Layout_fixed_top);
--- a/packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_free_container.tsx
@ -0,0 +1,27 @@
+import type {BaseEventContext} from 'amis-editor-core';
+import {registerEditorPlugin, getSchemaTpl} from 'amis-editor-core';
+import {ContainerPlugin} from '../Container';
+
+export default class Layout_free_container extends ContainerPlugin {
+  name = '自由容器';
+  isBaseComponent = true;
+  pluginIcon = 'layout-fixed-plugin';
+  description = '自由容器: 其直接子元素支持拖拽调整位置。';
+  order = 503;
+  tags = ['布局'];
+  scaffold: any = {
+    type: 'container',
+    title: '自由容器',
+    isFreeContainer: true,
+    size: 'xs',
+    body: [],
+    style: {
+      position: 'static',
+      minHeight: '200px'
+    },
+  };
+
+  panelTitle = '自由容器';
+}
+
+registerEditorPlugin(Layout_free_container);
--- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_x.tsx
@ -5,15 +5,14 @@ export default class Layout_scroll_x extends FlexPluginBase {
  name = 'x轴滚动容器';
  isBaseComponent = true;
  pluginIcon = 'layout-3cols-plugin';
-  description = '常见布局：x轴滚动容器（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
+  description = 'x轴滚动容器: 基于 CSS Flex 实现的布局容器。';
  order = 505;
  scaffold: any = {
    type: 'flex',
    className: 'p-1',
    items: [
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -26,7 +25,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -39,7 +38,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -52,7 +51,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -65,7 +64,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -78,7 +77,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -91,7 +90,7 @@ export default class Layout_scroll_x extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
--- a/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx
+++ b/packages/amis-editor/src/plugin/Layout/Layout_scroll_y.tsx
@ -5,15 +5,14 @@ export default class Layout_scroll_y extends FlexPluginBase {
  name = 'y轴滚动容器';
  isBaseComponent = true;
  pluginIcon = 'layout-3row-plugin';
-  description = '常见布局：y轴滚动容器（基于 CSS Flex 实现的布局容器）。';
-  tags = ['常见布局'];
+  description = 'y轴滚动容器: 基于 CSS Flex 实现的布局容器。';
  order = 504;
  scaffold: any = {
    type: 'flex',
    className: 'p-1',
    items: [
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -25,7 +24,7 @@ export default class Layout_scroll_y extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -38,7 +37,7 @@ export default class Layout_scroll_y extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -51,7 +50,7 @@ export default class Layout_scroll_y extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -64,7 +63,7 @@ export default class Layout_scroll_y extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
@ -77,7 +76,7 @@ export default class Layout_scroll_y extends FlexPluginBase {
        }
      },
      {
-        type: 'wrapper',
+        type: 'container',
        size: 'xs',
        body: [],
        style: {
--- a/packages/amis-editor/src/plugin/Nav.tsx
+++ b/packages/amis-editor/src/plugin/Nav.tsx
@ -1,4 +1,4 @@
-import {registerEditorPlugin} from 'amis-editor-core';
+import {BaseEventContext, registerEditorPlugin} from 'amis-editor-core';
 import {BasePlugin} from 'amis-editor-core';
 import {getSchemaTpl} from 'amis-editor-core';

@ -140,8 +140,8 @@ export class NavPlugin extends BasePlugin {
      ]
    }
  };
-  panelBody = [
-    getSchemaTpl('tabs', [
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
      {
        title: '常规',
        body: [
@ -156,7 +156,8 @@ export class NavPlugin extends BasePlugin {
            name: 'source',
            label: '获取菜单接口',
            description: '如果菜单地址希望可以动态设置，请在此填入接口地址'
-          })
+          }),
+          getSchemaTpl('loadingConfig', {}, {context})
        ]
      },
      {
@ -174,8 +175,8 @@ export class NavPlugin extends BasePlugin {
        title: '显隐',
        body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
      }
-    ])
-  ];
+    ]);
+  };
 }

 registerEditorPlugin(NavPlugin);
--- a/packages/amis-editor/src/plugin/Service.tsx
+++ b/packages/amis-editor/src/plugin/Service.tsx
@ -97,6 +97,9 @@ export class ServicePlugin extends BasePlugin {
  panelTitle = '服务';

  panelBodyCreator = (context: BaseEventContext) => {
+    console.log(context);
+    console.log(context.node.parent);
+    console.log(context.node.parent.getComponent());
    return getSchemaTpl('tabs', [
      {
        title: '属性',
@ -186,6 +189,7 @@ export class ServicePlugin extends BasePlugin {
            {
              title: '全局配置',
              body: [
+                getSchemaTpl('loadingConfig', {}, {context}),
                getSchemaTpl('data'),
                {
                  type: 'js-editor',
--- a/packages/amis-editor/src/plugin/Table.tsx
+++ b/packages/amis-editor/src/plugin/Table.tsx
@ -364,7 +364,13 @@ export class TablePlugin extends BasePlugin {
            placeholder: '设置列数',
            description:
              '设置从左到右多少列内启用自动合并单元格，根据字段值是否相同来决定是否合并。'
-          }
+          },
+
+          isCRUDBody
+            ? null
+            : {
+                type: 'divider'
+              }

          // {
          //   children: (
--- a/packages/amis-editor/src/plugin/Table2.tsx
+++ b/packages/amis-editor/src/plugin/Table2.tsx
@ -741,7 +741,13 @@ export class Table2Plugin extends BasePlugin {
                })
              ]
            }
-          ])
+          ]),
+
+          isCRUDBody
+            ? null
+            : {
+                type: 'divider'
+              }
        ]
      },
      {
--- a/packages/amis-editor/src/plugin/Tasks.tsx
+++ b/packages/amis-editor/src/plugin/Tasks.tsx
@ -1,4 +1,4 @@
-import {registerEditorPlugin} from 'amis-editor-core';
+import {BaseEventContext, registerEditorPlugin} from 'amis-editor-core';
 import {BasePlugin} from 'amis-editor-core';
 import {defaultValue, getSchemaTpl} from 'amis-editor-core';

@ -43,8 +43,8 @@ export class TasksPlugin extends BasePlugin {
  };

  panelTitle = '异步任务';
-  panelBody = [
-    getSchemaTpl('tabs', [
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
      {
        title: '常规',
        body: [
@ -111,6 +111,12 @@ export class TasksPlugin extends BasePlugin {
            label: '重试接口'
          }),

+          getSchemaTpl('loadingConfig', {}, {context}),
+
+          {
+            type: 'divider'
+          },
+
          {
            name: 'taskNameLabel',
            type: 'input-text',
@ -268,8 +274,8 @@ export class TasksPlugin extends BasePlugin {
        title: '显隐',
        body: [getSchemaTpl('visible')]
      }
-    ])
-  ];
+    ]);
+  };
 }

 registerEditorPlugin(TasksPlugin);
--- a/packages/amis-editor/src/plugin/Wizard.tsx
+++ b/packages/amis-editor/src/plugin/Wizard.tsx
@ -544,7 +544,13 @@ export class WizardPlugin extends BasePlugin {
              visibleOn: 'data.asyncApi != null',
              description:
                '设置此属性后，表单提交发送保存接口后，还会继续轮训请求该接口，直到返回 finished 属性为 true 才 结束'
-            })
+            }),
+
+            {
+              type: 'divider'
+            },
+
+            getSchemaTpl('loadingConfig', {}, {context})
          ]
        },

--- a/packages/amis-editor/src/plugin/Wrapper.tsx
+++ b/packages/amis-editor/src/plugin/Wrapper.tsx
@ -83,7 +83,6 @@ export class WrapperPlugin extends BasePlugin {
                  getSchemaTpl('layout:inset', {
                    mode: 'vertical'
                  }),
-                  getSchemaTpl('layout:z-index'),
                  getSchemaTpl('layout:display'),
                  getSchemaTpl('layout:flexDirection', {
                    visibleOn: 'data.style && data.style.display === "flex"'
@ -153,8 +152,8 @@ export class WrapperPlugin extends BasePlugin {
                      isFlexItem && !isFlexColumnItem
                    } && data.style.flex === '0 0 auto')`
                  }),
-
-                  !isFlexItem ? getSchemaTpl('layout:margin-center') : null
+                  !isFlexItem ? getSchemaTpl('layout:margin-center') : null,
+                  getSchemaTpl('layout:z-index')
                ]
              },
              {
--- a/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
+++ b/packages/amis-editor/src/renderer/event-control/action-config-dialog.tsx
@ -2,7 +2,7 @@
 * 动作配置面板
 */

-import {PluginActions, RendererPluginAction} from 'amis-editor-core';
+import {PluginActions, RendererPluginAction, tipedLabel} from 'amis-editor-core';
 import React from 'react';
 import {ActionConfig, ComponentInfo} from './types';
 import ActionConfigPanel from './action-config-panel';
@ -109,14 +109,13 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
        ) {
          groupType = 'closeDialog';
        }
-
-        if (value === 'visibility' && !['show', 'hidden'].includes(groupType)) {
+        if (value === 'visibility' && !['show', 'hidden', 'visibility'].includes(groupType)) {
          groupType = 'show';
        }

        if (
          value === 'usability' &&
-          !['enabled', 'disabled'].includes(groupType)
+          !['enabled', 'disabled', 'usability'].includes(groupType)
        ) {
          groupType = 'enabled';
        }
@ -280,18 +279,16 @@ export default class ActionDialog extends React.Component<ActionDialogProp> {
                            className: 'action-panel-title',
                            visibleOn: 'data.actionType'
                          },
-                          // {
-                          //   name: 'stopPropagation',
-                          //   label: '阻断条件',
-                          //   type: 'ae-expressionFormulaControl',
-                          //   evalMode: true,
-                          //   variables: '${variables}',
-                          //   mode: 'horizontal',
-                          //   size: 'lg',
-                          //   visibleOn: 'data.actionType',
-                          //   description:
-                          //     '满足条件时，将会阻断当前事件的后续动作的执行'
-                          // },
+                          {
+                            name: 'stopPropagation',
+                            label: tipedLabel('阻断条件', '满足条件时，将会阻断当前事件的后续动作的执行'),
+                            type: 'ae-expressionFormulaControl',
+                            evalMode: true,
+                            variables: '${variables}',
+                            mode: 'horizontal',
+                            size: 'lg',
+                            visibleOn: 'data.actionType'
+                          },
                          {
                            name: 'expression',
                            label: '执行条件',
--- a/packages/amis-editor/src/renderer/event-control/actions.tsx
+++ b/packages/amis-editor/src/renderer/event-control/actions.tsx
@ -2,8 +2,10 @@ import {Button} from 'amis';
 import {
  defaultValue,
  getSchemaTpl,
-  RendererPluginAction
+  RendererPluginAction,
+  tipedLabel
 } from 'amis-editor-core';
+
 import React from 'react';
 import {normalizeApi} from 'amis-core';
 import {
@ -511,24 +513,17 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                  {
                    name: 'options',
                    type: 'combo',
-                    label: false,
+                    label: tipedLabel('静默请求', '开启后，服务请求将以静默模式发送，即不会弹出成功或报错提示。'),
                    mode: 'horizontal',
                    items: [
                      {
-                        type: 'checkbox',
+                        type: 'switch',
                        name: 'silent',
-                        option: '静默模式',
-                        mode: 'inline',
-                        className: 'm-r-none',
-                        value: false,
-                        remark: {
-                          className: 'ae-BaseRemark',
-                          icon: 'fa fa-question-circle',
-                          shape: 'circle',
-                          placement: 'left',
-                          content:
-                            '勾选后，服务请求将以静默模式发送，即不会弹出成功或报错提示。'
-                        }
+                        label: false,
+                        onText: '开启',
+                        offText: '关闭',
+                        mode: 'horizontal',
+                        pipeIn: defaultValue(false)
                      }
                    ]
                  }
@ -637,6 +632,20 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                  </div>
                );
              }
+            },
+            {
+              actionType: 'visibility',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    组件
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel || '-'}
+                    </span>
+                    表达式已配置
+                  </div>
+                );
+              }
            }
          ],
          supportComponents: '*',
@ -644,13 +653,33 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            ...renderCmptSelect('目标组件', true),
            {
              type: 'radios',
-              label: '显示/隐藏',
+              label: '条件',
              name: 'groupType',
              mode: 'horizontal',
+              value: 'static',
+              required: true,
+              inputClassName: 'event-action-radio',
+              options: [
+                {
+                  label: '静态',
+                  value: 'static'
+                },
+                {
+                  label: '表达式',
+                  value: 'visibility'
+                }
+              ]
+            },
+            {
+              type: 'radios',
+              label: '显示/隐藏',
+              name: '__statusType',
+              mode: 'horizontal',
              value: 'show',
              required: true,
              pipeIn: defaultValue('show'),
              inputClassName: 'event-action-radio',
+              visibleOn: "this.groupType === 'static'",
              options: [
                {
                  label: '显示',
@ -661,6 +690,17 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                  value: 'hidden'
                }
              ]
+            },
+            {
+              type: 'ae-expressionFormulaControl',
+              mode: 'horizontal',
+              label: '表达式',
+              required: true,
+              size: 'lg',
+              variables: '${variables}',
+              evalMode: true,
+              name: '__actionExpression',
+              visibleOn: "this.groupType === 'visibility'"
            }
          ]
        },
@ -696,6 +736,20 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                  </div>
                );
              }
+            },
+            {
+              actionType: 'usability',
+              descDetail: (info: any) => {
+                return (
+                  <div>
+                    组件
+                    <span className="variable-left variable-right">
+                      {info?.rendererLabel || '-'}
+                    </span>
+                    表达式已配置
+                  </div>
+                );
+              }
            }
          ],
          supportComponents: [
@ -707,13 +761,33 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            ...renderCmptSelect('目标组件', true),
            {
              type: 'radios',
-              label: '启用/禁用',
+              label: '条件',
              name: 'groupType',
              mode: 'horizontal',
              inputClassName: 'event-action-radio',
+              value: 'static',
+              required: true,
+              options: [
+                {
+                  label: '静态',
+                  value: 'static'
+                },
+                {
+                  label: '表达式',
+                  value: 'usability'
+                }
+              ]
+            },
+            {
+              type: 'radios',
+              label: '启用/禁用',
+              name: '__statusType',
+              mode: 'horizontal',
+              inputClassName: 'event-action-radio',
              value: 'enabled',
              required: true,
              pipeIn: defaultValue('enabled'),
+              visibleOn: "this.groupType === 'static'",
              options: [
                {
                  label: '启用',
@ -724,6 +798,16 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
                  value: 'disabled'
                }
              ]
+            },
+            {
+              type: 'ae-expressionFormulaControl',
+              mode: 'horizontal',
+              label: '表达式',
+              required: true,
+              size: 'lg',
+              evalMode: true,
+              name: '__actionExpression',
+              visibleOn: "this.groupType === 'usability'"
            }
          ]
        },
@ -737,7 +821,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
              descDetail: (info: any) => {
                return (
                  <div>
-                    <span className="variable-left variable-right">
+                    <span className="variable-right">
                      {info?.rendererLabel}
                    </span>
                    组件切换为静态
@ -750,7 +834,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
              descDetail: (info: any) => {
                return (
                  <div>
-                    <span className="variable-left variable-right">
+                    <span className="variable-right">
                      {info?.rendererLabel}
                    </span>
                    组件切换为输入态
@ -815,14 +899,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            {
              type: 'switch',
              name: '__resetPage',
-              label: '重置页码',
-              labelRemark: {
-                className: 'm-l-xs',
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: '选择“是”时，将重新请求第一页数据。',
-                placement: 'top'
-              },
+              label: tipedLabel('重置页码', '选择“是”时，将重新请求第一页数据。'),
              onText: '是',
              offText: '否',
              mode: 'horizontal',
@ -832,14 +909,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            {
              type: 'switch',
              name: '__addParam',
-              label: '追加数据',
-              labelRemark: {
-                className: 'm-l-xs',
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: `当选择“是”，且目标组件是增删改查组件时，数据接口请求时将带上这些数据，其他类型的目标组件只有在数据接口是post请求时才会带上这些数据。`,
-                placement: 'top'
-              },
+              label: tipedLabel('追加数据', '当选择“是”，且目标组件是增删改查组件时，数据接口请求时将带上这些数据，其他类型的目标组件只有在数据接口是post请求时才会带上这些数据。'),
              onText: '是',
              offText: '否',
              mode: 'horizontal',
@ -849,14 +919,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
            {
              type: 'switch',
              name: '__customData',
-              label: '自定义数据',
-              labelRemark: {
-                className: 'm-l-xs',
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: `数据默认为源组件所在数据域，开启“自定义”可以定制所需数据`,
-                placement: 'top'
-              },
+              label: tipedLabel('自定义数据', '数据默认为源组件所在数据域，开启“自定义”可以定制所需数据'),
              onText: '是',
              offText: '否',
              mode: 'horizontal',
@ -957,14 +1020,7 @@ const ACTION_TYPE_TREE = (manager: any): RendererPluginAction[] => {
              type: 'radios',
              name: 'dataMergeMode',
              mode: 'horizontal',
-              label: '追加方式',
-              labelRemark: {
-                className: 'm-l-xs',
-                icon: 'fa fa-question-circle',
-                rootClose: true,
-                content: `选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。`,
-                placement: 'top'
-              },
+              label: tipedLabel('追加方式', '选择“合并”时，会将数据合并到目标组件的数据域。<br/>选择“覆盖”时，数据会直接覆盖目标组件的数据域。'),
              pipeIn: defaultValue('merge'),
              visibleOn: `data.__addParam && data.actionType === "reload" && ${IS_DATA_CONTAINER}`,
              options: [
--- a/packages/amis-editor/src/renderer/event-control/helper.tsx
+++ b/packages/amis-editor/src/renderer/event-control/helper.tsx
@ -1200,6 +1200,17 @@ export const getEventControlConfig = (
        }
      }

+      if (['show', 'hidden', 'enabled', 'disabled'].includes(action.actionType)) {
+        // 兼容老逻辑，初始化actionType
+        config.__statusType = action.actionType;
+        config.__actionType = 'static';
+      }
+
+      if (['usability', 'visibility'].includes(action.actionType)) {
+        // 初始化条件参数
+        config.__actionExpression = action.args?.value;
+      }
+
      if (
        action.actionType === 'ajax' &&
        typeof action?.args?.api === 'string'
@ -1415,6 +1426,19 @@ export const getEventControlConfig = (
        }
      }

+      // 转换下格式
+      if (['visibility', 'usability'].includes(config.actionType)) {
+        action.args =
+          action.actionType !== 'static'
+            ? {
+                value: action.__actionExpression
+              }
+            : undefined;
+        action.actionType === 'static' && (action.actionType = config.__statusType);
+        delete action.__actionExpression;
+        delete action.__statusType;
+      };
+
      delete action.config;

      return action;
--- a/packages/amis-editor/src/renderer/event-control/index.tsx
+++ b/packages/amis-editor/src/renderer/event-control/index.tsx
@ -607,7 +607,7 @@ export class EventControl extends React.Component<
        getContextSchemas,
        rawVariables,
        ...actionConfig,
-        groupType: action.actionType,
+        groupType: actionConfig?.__actionType || action.actionType,
        __actionDesc: actionNode!.description!, // 树节点描述
        __actionSchema: actionNode!.schema, // 树节点schema
        __subActions: hasSubActionNode?.actions, // 树节点子动作
@ -810,7 +810,7 @@ export class EventControl extends React.Component<
                      <div onClick={this.delEvent.bind(this, eventKey)}>
                        <Icon className="icon" icon="delete-bold-btn" />
                      </div>
-                      {/* <div
+                      <div
                        onClick={this.activeEventDialog.bind(this, {
                          eventName: eventKey,
                          eventLabel:
@ -818,8 +818,8 @@ export class EventControl extends React.Component<
                          ...eventSnapshot[eventKey]
                        })}
                      >
-                        <Icon className="icon" icon="edit-full-btn" />
-                      </div> */}
+                        <Icon className="icon" icon="event-setting" />
+                      </div>
                      <div
                        onClick={this.toggleActivePanel.bind(this, eventKey)}
                      >
@ -943,14 +943,14 @@ export class EventControl extends React.Component<
                    },
                    body: [
                      {
-                        label: '设置触发频率',
+                        label: '事件防重',
                        type: 'switch',
                        name: 'debounce.open',
                        description:
-                          '设置触发频率后，单位时间内多次触发事件只会执行最后一次'
+                          '开启事件防重后，防重时间内多次触发事件只会执行最后一次'
                      },
                      {
-                        label: '触发频率',
+                        label: '防重时间',
                        required: true,
                        hiddenOn: '!debounce.open',
                        name: 'debounce.wait',
--- a/packages/amis-editor/src/tpl/api.tsx
+++ b/packages/amis-editor/src/tpl/api.tsx
@ -1,4 +1,9 @@
-import {setSchemaTpl, getSchemaTpl, tipedLabel} from 'amis-editor-core';
+import {
+  setSchemaTpl,
+  getSchemaTpl,
+  tipedLabel,
+  BaseEventContext
+} from 'amis-editor-core';
 import React from 'react';
 import {buildApi, Html} from 'amis';
 import {get} from 'lodash';
@ -535,3 +540,78 @@ setSchemaTpl('actionApiControl', (patch: any = {}) => {
    ...rest
  };
 });
+
+const enum LoadingOption {
+  HIDDEN,
+  MERGE,
+  GLOBAL
+}
+
+setSchemaTpl(
+  'loadingConfig',
+  (patch: any, {context}: {context: BaseEventContext}) => {
+    let globalSelector = '';
+    let parent = context.node.parent;
+
+    while (parent && !globalSelector) {
+      const parentNodeType = parent.type;
+
+      if (parentNodeType === 'dialog' || parentNodeType === 'drawer') {
+        globalSelector = '[role=dialog-body]';
+      } else if (parentNodeType === 'page') {
+        globalSelector = '[role=page-body]';
+      }
+
+      parent = parent.parent;
+    }
+
+    return {
+      name: 'loadingConfig',
+      type: 'select',
+      label: '加载设置',
+      options: [
+        {
+          label: '合并到上层loading',
+          value: LoadingOption.MERGE
+        },
+        {
+          label: '不展示loading',
+          value: LoadingOption.HIDDEN
+        },
+        {
+          label: '使用页面全局loading',
+          value: LoadingOption.GLOBAL
+        }
+      ],
+      ...patch,
+      pipeOut: (value: LoadingOption) => {
+        switch (value) {
+          case LoadingOption.HIDDEN:
+            return {
+              show: false
+            };
+          case LoadingOption.GLOBAL:
+            return {
+              show: true,
+              root: globalSelector
+            };
+          case LoadingOption.MERGE:
+            return {
+              show: true
+            };
+          default:
+            return {};
+        }
+      },
+      pipeIn: (value: any = {}) => {
+        if (value.root) {
+          return LoadingOption.GLOBAL;
+        }
+        if (value.show === false) {
+          return LoadingOption.HIDDEN;
+        }
+        return LoadingOption.MERGE;
+      }
+    };
+  }
+);
--- a/packages/amis-editor/src/tpl/layout.tsx
+++ b/packages/amis-editor/src/tpl/layout.tsx
@ -270,6 +270,7 @@ setSchemaTpl(
          form.setValueByName('style.flexDirection', undefined);
          form.setValueByName('style.justifyContent', undefined);
          form.setValueByName('style.alignItems', undefined);
+          form.setValueByName('style.flexWrap', undefined);
        }
      },
    };