feat(amis-saas-8477): 新增自由容器

Change-Id: Id8e363f4f0718421963bd04c0aea4748786cdf23

packages/amis-editor/package.json

@@ -53,10 +53,10 @@
     "@types/sortablejs": "^1.10.7",
     "@types/tinycolor2": "^1.4.3",
     "ajv": "^8.8.2",
-    "amis": "2.5.2",
+    "amis": "2.5.3-beta.0",
-    "amis-core": "2.5.2",
+    "amis-core": "2.5.3-beta.0",
-    "amis-formula": "2.5.2",
+    "amis-formula": "2.5.3-beta.0",
-    "amis-ui": "2.5.2",
+    "amis-ui": "2.5.3-beta.0",
     "axios": "0.21.1",
     "concurrently": "^6.2.0",
     "css-loader": "^6.2.0",

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}>
+      <div className="ae-TableViewEditor" ref={this.tableViewWrapperRef} style={schema?.style}>
-        {this.props.children}
+        {children}
         {this.renderMergeIcon()}
         {rowLines}
         {colLines}

packages/amis-editor/src/index.tsx

@@ -144,6 +144,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';
 

packages/amis-editor/src/locale/en-US.ts

@@ -3546,5 +3546,30 @@ extendLocale('en-US', {
   '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.',
-  '5d3d48de1ba22368eacdc1c69fb044ce': 'Component inner layer CSS class name'
+  '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'
 });

packages/amis-editor/src/locale/zh-CN.ts

@@ -3133,5 +3133,30 @@ extendLocale('zh-CN', {
   '2bd921d0ea7a73b77ee0fcddb1afcc84': '最小高度',
   'eb7366583485f478e3d8c2b105ea51ff':
     '定义项目的放大比例，如果设置为0，即使父容器存在剩余空间，也不放大。',
-  '5d3d48de1ba22368eacdc1c69fb044ce': '组件内层 CSS 类名'
+  '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': '防重时间'
 });

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', {
+              // 自由容器不需要 display 相关配置项
-                visibleOn: 'data.style && data.style.display === "flex"'
+              ...(!isFreeContainer ? displayTpl : []),
-              }),
-
-              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"'
-              }),
 
               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')

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);
   }
 }
 

packages/amis-editor/src/plugin/Form/Hidden.tsx

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

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

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';
 

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);
   }
 }
 

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')

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: {

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 实现的布局容器）。';
+  description = '悬浮容器: 基于 CSS Flex 实现的特殊布局容器。';
-  tags = ['常见布局'];
   order = 503;
   scaffold: any = {
     type: 'container',
@@ -22,6 +21,7 @@ export default class Layout_fixed extends FlexPluginBase {
     },
     originPosition: 'right-bottom'
   };
+  panelTitle = '悬浮容器';
 }
 
 registerEditorPlugin(Layout_fixed);

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 实现的布局容器）。';
+  description = '吸底容器: 基于 CSS Flex 实现的布局容器。';
-  tags = ['常见布局'];
   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);

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 实现的布局容器）。';
+  description = '吸顶容器: 基于 CSS Flex 实现的布局容器。';
-  tags = ['常见布局'];
   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);

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);

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 实现的布局容器）。';
+  description = 'x轴滚动容器: 基于 CSS Flex 实现的布局容器。';
-  tags = ['常见布局'];
   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: {

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 实现的布局容器）。';
+  description = 'y轴滚动容器: 基于 CSS Flex 实现的布局容器。';
-  tags = ['常见布局'];
   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: {

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')
                 ]
               },
               {