fix(布局能力提升amis-saas-7924): 当wrapper为空插入布局容器时，自动改为置换

Change-Id: Icafb6c50d53ebcb876f82e5f75ca3168ab7989d1

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

@@ -3410,5 +3410,9 @@ extendLocale('en-US', {
   '7d1313925f158b747c094a7f2480e535': 'Reference position',
   '41a7494315a528f0f9618646f7e0dddf':
     'It can be set as upper left corner, upper right corner, lower right corner and lower left corner. The default is lower right corner',
-  '845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)'
+  '845c61ac8f51c6702dd22e5657c07e8d': 'Lower right corner (default)',
+  '2794fe303cf8ad4395fe93271fae7925':
+    'Layout containers are mainly used to design container components with complex layouts. The layout effect implemented based on CSS Flex is more controllable than Grid and HBox for the location of child nodes, and easier to use than using CSS classes',
+  'abbd790f85282349e2004df9fd494e31':
+    'Main size occupied by default before allocating extra space'
 });

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

@@ -3013,5 +3013,9 @@ extendLocale('zh-CN', {
   '7d1313925f158b747c094a7f2480e535': '参考位置',
   '41a7494315a528f0f9618646f7e0dddf':
     '可设置为左上角、右上角、右下角、左下角，默认为右下角',
-  '845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)'
+  '845c61ac8f51c6702dd22e5657c07e8d': '右下角(默认)',
+  '2794fe303cf8ad4395fe93271fae7925':
+    '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用',
+  'abbd790f85282349e2004df9fd494e31':
+    '在分配多余空间之前，其默认占据的主轴空间（main size）'
 });

packages/amis-editor/src/plugin/Container.tsx

@@ -17,12 +17,7 @@ export class ContainerPlugin extends BasePlugin {
   pluginIcon = 'container-plugin';
   scaffold = {
     type: 'container',
-    body: [
+    body: []
-      {
-        type: 'tpl',
-        tpl: '内容'
-      }
-    ]
   };
   previewSchema = {
     ...this.scaffold

packages/amis-editor/src/plugin/Flex.tsx

@@ -8,7 +8,7 @@ export class FlexPlugin extends FlexPluginBase {
   name = '布局容器';
   pluginIcon = 'flex-container-plugin';
   description =
-    '布局容器 是基于 CSS Flex 实现的布局效果，它比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更易用';
+    '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用';
 }
 
 registerEditorPlugin(FlexPlugin);

packages/amis-editor/src/plugin/Layout/FlexPluginBase.tsx

@@ -25,8 +25,7 @@ const defaultFlexColumnSchema = (title: string) => {
       flexBasis: 'auto',
       flexDirection: 'column',
       justifyContent: 'flex-start',
-      alignItems: 'stretch',
+      alignItems: 'stretch'
-      flexWrap: 'wrap'
     },
     isFixedHeight: false,
     isFixedWidth: false
@@ -40,7 +39,9 @@ const defaultFlexContainerSchema = {
     defaultFlexColumnSchema('第一列'),
     defaultFlexColumnSchema('第二列'),
     defaultFlexColumnSchema('第三列')
-  ]
+  ],
+  justify: "flex-start",
+  alignItems: "stretch"
 };
 
 export class FlexPluginBase extends BasePlugin {
@@ -205,7 +206,7 @@ export class FlexPluginBase extends BasePlugin {
 
     if (
       parent &&
-      (info.renderer.name === 'flex' || info.renderer.name === 'container') &&
+      (info.renderer?.name === 'flex' || info.renderer?.name === 'container') &&
       !draggableContainer
     ) {
       // 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon
@@ -214,7 +215,7 @@ export class FlexPluginBase extends BasePlugin {
           iconSvg: 'add-btn',
           tooltip: '向前插入布局容器',
           level: 'special',
-          placement: 'top',
+          placement: 'bottom',
           className: 'ae-InsertBefore is-vertical',
           onClick: () =>
             this.manager.appendSiblingSchema(
@@ -235,16 +236,22 @@ export class FlexPluginBase extends BasePlugin {
               false,
               true
             )
-        },
-        {
-          iconSvg: 'add-btn',
-          tooltip: '新增列级元素',
-          level: 'special',
-          placement: 'bottom',
-          className: 'ae-AppendChild',
-          onClick: () => this.manager.addElem(newColumnSchema)
         }
       );
+
+      // 布局容器 右上角插入子元素
+      if (info.renderer?.name === 'flex') {
+        toolbars.push(
+          {
+            iconSvg: 'add-btn',
+            tooltip: '新增列级元素',
+            level: 'special',
+            placement: 'bottom',
+            className: 'ae-AppendChild',
+            onClick: () => this.manager.addElem(newColumnSchema)
+          }
+        );
+      }
     }
 
     if (isFlexItem && !draggableContainer) {
@@ -254,7 +261,7 @@ export class FlexPluginBase extends BasePlugin {
           iconSvg: 'add-btn',
           tooltip: '左侧（上侧）插入列级容器',
           level: 'special',
-          placement: 'bottom',
+          placement: 'right',
           className: 'ae-InsertBefore',
           onClick: () =>
             this.manager.appendSiblingSchema(newColumnSchema, true, true)
@@ -263,7 +270,7 @@ export class FlexPluginBase extends BasePlugin {
           iconSvg: 'add-btn',
           tooltip: '右侧（下侧）插入列级容器',
           level: 'special',
-          placement: 'bottom',
+          placement: 'left',
           className: 'ae-InsertAfter',
           onClick: () =>
             this.manager.appendSiblingSchema(newColumnSchema, false, true)

packages/amis-editor/src/tpl/layout.tsx

@@ -278,7 +278,7 @@ setSchemaTpl(
       type: 'select',
       label: config?.label || tipedLabel(`水平对齐方式`, '设置子元素在主轴上的对齐方式'),
       name: config?.name || 'style.justifyContent',
-      value: config?.value || 'center',
+      value: config?.value || 'flex-start',
       visibleOn: config?.visibleOn,
       pipeIn: config?.pipeIn,
       pipeOut: config?.pipeOut,
@@ -477,18 +477,18 @@ setSchemaTpl(
       type: 'select',
       label: config?.label || '如何换行',
       name: config?.name || 'style.flexWrap',
-      value: config?.value || 'wrap',
+      value: config?.value || 'nowrap',
       visibleOn: config?.visibleOn,
       pipeIn: config?.pipeIn,
       pipeOut: config?.pipeOut,
       options: [
         {
-          label: '默认（自动换行）',
+          label: '默认（不换行）',
-          value: 'wrap'
+          value: 'nowrap'
         },
         {
-          label: '不换行',
+          label: '自动换行',
-          value: 'nowrap'
+          value: 'wrap'
         },
         {
           label: '自动换行（颠倒）',
@@ -541,7 +541,7 @@ setSchemaTpl(
   }) => {
     return {
       type: 'input-number',
-      label: config?.label || tipedLabel('默认宽度', '定义在分配多余空间之前，项目占据的主轴空间（main size）'),
+      label: config?.label || tipedLabel('默认宽度', '在分配多余空间之前，其默认占据的主轴空间（main size）'),
       name: config?.name || 'style.flexBasis',
       value: config?.value || 'auto',
       visibleOn: config?.visibleOn,