fix(布局组件amis-saas-7939): 包裹容器上下追加元素icon位置自适应调整

Change-Id: I16b1710885223ee95ede81a0e21ff6360f3bd65a

packages/amis-editor/package.json

@@ -23,14 +23,6 @@
     "lib",
     "esm"
   ],
-  "lint-staged": {
-    "{src,scss,examples}/**/**/*.{js,jsx,ts,tsx,scss,json}": [
-      "prettier --write"
-    ],
-    "{src,scss,examples}/**/**/*.scss": [
-      "stylelint"
-    ]
-  },
   "dependencies": {
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "amis-editor-core": "*",

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

@@ -3414,5 +3414,10 @@ extendLocale('en-US', {
   '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'
+    'Main size occupied by default before allocating extra space',
+  'dbb93e8f413074ead24b6ed822247d98': 'Insert Layout Container Above',
+  '5b5765b3fd7e72e04a5cd3e2ef6218a4': 'Insert Layout Container Below',
+  'ee466872b9a43e720e296813dbc5adee': '{{@1}} Insert Column Level Container',
+  '14c495b1248756310c75396cd41f4fe9': 'upper',
+  'e33ac3a4c1a95a02a18f1555038804da': 'Below'
 });

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

@@ -3017,5 +3017,10 @@ extendLocale('zh-CN', {
   '2794fe303cf8ad4395fe93271fae7925':
     '布局容器主要用于设计复杂布局的容器组件，基于 CSS Flex 实现的布局效果，比 Grid 和 HBox 对子节点位置的可控性更强，比用 CSS 类的方式更简单易用',
   'abbd790f85282349e2004df9fd494e31':
-    '在分配多余空间之前，其默认占据的主轴空间（main size）'
+    '在分配多余空间之前，其默认占据的主轴空间（main size）',
+  'dbb93e8f413074ead24b6ed822247d98': '上方插入布局容器',
+  '5b5765b3fd7e72e04a5cd3e2ef6218a4': '下方插入布局容器',
+  'ee466872b9a43e720e296813dbc5adee': '{{@1}}插入列级容器',
+  '14c495b1248756310c75396cd41f4fe9': '上方',
+  'e33ac3a4c1a95a02a18f1555038804da': '下方'
 });

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

@@ -88,6 +88,7 @@ export class ContainerPlugin extends BasePlugin {
                 visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")',
               }) : null,
               getSchemaTpl('layout:position'),
+              getSchemaTpl('layout:originPosition'),
               getSchemaTpl('layout:inset', {
                 mode: 'vertical'
               }),

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

@@ -102,10 +102,10 @@ export class FlexPluginBase extends BasePlugin {
                       })
                     : null,
                   getSchemaTpl('layout:position'),
+                  getSchemaTpl('layout:originPosition'),
                   getSchemaTpl('layout:inset', {
                     mode: 'vertical'
                   }),
-                  getSchemaTpl('layout:originPosition'),
                   getSchemaTpl('layout:z-index'),
                   getSchemaTpl('layout:flexDirection', {
                     name: 'direction'
@@ -141,6 +141,7 @@ export class FlexPluginBase extends BasePlugin {
                   !isFlexItem ? getSchemaTpl('layout:margin-center') : null
                 ]
               },
+              getSchemaTpl('status'),
               {
                 title: '子节点管理',
                 body: [
@@ -202,20 +203,22 @@ export class FlexPluginBase extends BasePlugin {
     const parent = store.getSchemaParentById(id);
     const draggableContainer = this.manager.draggableContainer(id);
     const isFlexItem = this.manager?.isFlexItem(id);
+    const isFlexColumnItem = this.manager?.isFlexColumnItem(id);
     const newColumnSchema = defaultFlexColumnSchema('新的一列');
 
     if (
       parent &&
       (info.renderer?.name === 'flex' || info.renderer?.name === 'container') &&
+      !isFlexItem && // 备注：如果是列级元素就不需要显示了
       !draggableContainer
     ) {
       // 非特殊布局元素（fixed、absolute）支持前后插入追加布局元素功能icon
       toolbars.push(
         {
           iconSvg: 'add-btn',
-          tooltip: '向前插入布局容器',
+          tooltip: '上方插入布局容器',
           level: 'special',
-          placement: 'bottom',
+          placement: 'right',
           className: 'ae-InsertBefore is-vertical',
           onClick: () =>
             this.manager.appendSiblingSchema(
@@ -226,9 +229,9 @@ export class FlexPluginBase extends BasePlugin {
         },
         {
           iconSvg: 'add-btn',
-          tooltip: '向后插入布局容器',
+          tooltip: '下方插入布局容器',
           level: 'special',
-          placement: 'bottom',
+          placement: 'right',
           className: 'ae-InsertAfter is-vertical',
           onClick: () =>
             this.manager.appendSiblingSchema(
@@ -259,19 +262,19 @@ export class FlexPluginBase extends BasePlugin {
       toolbars.push(
         {
           iconSvg: 'add-btn',
-          tooltip: '左侧（上侧）插入列级容器',
+          tooltip: `${isFlexColumnItem ? '上方' : '左侧'}插入列级容器`,
           level: 'special',
           placement: 'right',
-          className: 'ae-InsertBefore',
+          className: isFlexColumnItem ? 'ae-InsertBefore is-vertical' : 'ae-InsertBefore',
           onClick: () =>
             this.manager.appendSiblingSchema(newColumnSchema, true, true)
         },
         {
           iconSvg: 'add-btn',
-          tooltip: '右侧（下侧）插入列级容器',
+          tooltip: `${isFlexColumnItem ? '下方' : '右侧'}插入列级容器`,
           level: 'special',
-          placement: 'left',
-          className: 'ae-InsertAfter',
+          placement: isFlexColumnItem ? 'right' : 'left',
+          className: isFlexColumnItem ? 'ae-InsertAfter is-vertical' : 'ae-InsertAfter',
           onClick: () =>
             this.manager.appendSiblingSchema(newColumnSchema, false, true)
         }

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

@@ -58,6 +58,7 @@ export class WrapperPlugin extends BasePlugin {
                     visibleOn: 'data.style && (data.style.position === "static" || data.style.position === "relative")',
                   }) : null,
                   getSchemaTpl('layout:position'),
+                  getSchemaTpl('layout:originPosition'),
                   getSchemaTpl('layout:inset', {
                     mode: 'vertical'
                   }),
@@ -131,6 +132,7 @@ export class WrapperPlugin extends BasePlugin {
                   }
                 ]
               },
+              getSchemaTpl('status'),
               {
                 title: '子节点管理',
                 body: [

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

@@ -882,7 +882,7 @@ setSchemaTpl(
   (config?: {
     label?: string;
     name?: string;
-    value?: string,
+    value?: string;
     visibleOn?: string;
     pipeIn?: (value: any, data: any) => void;
     pipeOut?: (value: any, data: any) => void;