feat:amis-saas-4880 [Feature] 「容器类优化」WebComponent&Panel组件优化

Change-Id: I3072c89fb3969e31879340fb4153fb41eaa32f77

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

@@ -173,7 +173,8 @@ export class AvatarPlugin extends BasePlugin {
                     }
                   ]
                 },
-                getSchemaTpl('badge')
+                // TODO 临时关闭，目前角标功能还没完善，待完善后再开启
+                // getSchemaTpl('badge')
               ]
             },
             getSchemaTpl('status')

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

@@ -1,15 +1,16 @@
 import {Button} from 'amis';
 import React from 'react';
-import {PluginInterface, registerEditorPlugin} from 'amis-editor-core';
 import {
   BasePlugin,
   BaseEventContext,
   BasicPanelItem,
   RegionConfig,
   RendererInfo,
-  BuildPanelEventContext
+  BuildPanelEventContext,
+  defaultValue,
+  getSchemaTpl,
+  registerEditorPlugin
 } from 'amis-editor-core';
-import {defaultValue, getSchemaTpl} from 'amis-editor-core';
 
 export class PanelPlugin extends BasePlugin {
   // 关联渲染器名字
@@ -78,134 +79,160 @@ export class PanelPlugin extends BasePlugin {
   ];
 
   panelTitle = '面板';
+
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
     const isForm = /(?:^|\/)form$/.test(context.path) || context?.schema?.type === 'form';
 
     return [
       getSchemaTpl('tabs', [
         {
-          title: '常规',
+          title: '属性',
           body: [
-            {
-              label: '标题',
-              name: 'title',
-              type: 'input-text'
-            },
-
-            isForm
-              ? null
-              : {
-                  children: (
-                    <Button
-                      size="sm"
-                      level="info"
-                      className="m-b"
-                      onClick={() => {
-                        // this.manager.showInsertPanel('body')
-                        this.manager.showRendererPanel('');
-                      }}
-                      block
-                    >
-                      内容区新增内容
-                    </Button>
-                  )
-                }
+            getSchemaTpl('collapseGroup', [
+              {
+                className: 'p-none',
+                title: '基本',
+                body: [
+                  {
+                    label: '标题',
+                    name: 'title',
+                    type: 'input-text'
+                  },
+      
+                  isForm
+                    ? null
+                    : {
+                        children: (
+                          <Button
+                            size="sm"
+                            level="info"
+                            className="m-b"
+                            onClick={() => {
+                              // this.manager.showInsertPanel('body')
+                              this.manager.showRendererPanel('');
+                            }}
+                            block
+                          >
+                            内容区新增内容
+                          </Button>
+                        )
+                      }
+                ]
+              },
+              getSchemaTpl('status')
+            ]),
           ]
         },
         {
           title: '外观',
           body: [
-            getSchemaTpl('switch', {
-              name: 'affixFooter',
-              label: '固定底部',
-              value: false
-            }),
-
-            getSchemaTpl('horizontal', {
-              visibleOn:
-                '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
-            }),
-
-            {
-              name: isForm ? 'panelClassName' : 'className',
-              label: '样式',
-              type: 'button-group-select',
-              size: 'sm',
-              pipeIn: (value: any) =>
-                typeof value === 'string' &&
-                /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
-                  ? RegExp.$1
-                  : '',
-              pipeOut: (value: string, origin: string) =>
-                origin
-                  ? `${origin.replace(
-                      /(?:^|\s)(Panel\-\-(\w+))(?=($|\s))/g,
-                      ''
-                    )} ${value}`
-                      .replace(/\s+/g, ' ')
-                      .trim()
-                  : value,
-              options: [
-                {
-                  label: '默认',
-                  value: 'Panel--default'
-                },
-                {
-                  label: '主色',
-                  value: 'Panel--primary'
-                },
-                {
-                  label: '提示',
-                  value: 'Panel--info'
-                },
-                {
-                  label: '成功',
-                  value: 'Panel--success'
-                },
-                {
-                  label: '警告',
-                  value: 'Panel--warning'
-                },
-                {
-                  label: '危险',
-                  value: 'Panel--danger'
-                }
-              ]
-            },
-
-            getSchemaTpl('className', {
-              name: isForm ? 'panelClassName' : 'className',
-              pipeIn: defaultValue('Panel--default')
-            }),
-
-            getSchemaTpl('className', {
-              name: 'headerClassName',
-              label: '头部区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'bodyClassName',
-              label: '内容区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'footerClassName',
-              label: '底部区域 CSS 类名'
-            }),
-
-            getSchemaTpl('className', {
-              name: 'actionsClassName',
-              label: '按钮外层 CSS 类名'
-            }),
-
-            getSchemaTpl('subFormItemMode'),
-            getSchemaTpl('subFormHorizontalMode'),
-            getSchemaTpl('subFormHorizontal')
+            getSchemaTpl('collapseGroup', [
+              {
+                className: 'p-none',
+                title: '基本',
+                body: [
+                  getSchemaTpl('switch', {
+                    name: 'affixFooter',
+                    label: '固定底部',
+                    value: false
+                  }),
+      
+                  getSchemaTpl('horizontal', {
+                    visibleOn:
+                      '(data.mode || data.$$formMode) == "horizontal" && data.$$mode == "form"'
+                  })
+                ]
+              },
+              {
+                className: 'p-none',
+                title: '内容区域展示',
+                body: [
+                  getSchemaTpl('subFormItemMode', {label: '表单展示模式'}),
+                  getSchemaTpl('subFormHorizontalMode', {label: '表单水平占比'}),
+                  getSchemaTpl('subFormHorizontal')
+                ]
+              },
+              {
+                className: 'p-none',
+                title: 'CSS 类名',
+                body: [
+                  {
+                    name: isForm ? 'panelClassName' : 'className',
+                    label: '主题',
+                    type: 'select',
+                    size: 'sm',
+                    pipeIn: (value: any) =>
+                      typeof value === 'string' &&
+                      /(?:^|\s)(Panel\-\-(\w+))(?:$|\s)/.test(value)
+                        ? RegExp.$1
+                        : 'Panel--default',
+                    pipeOut: (value: string, origin: string) =>
+                      origin
+                        ? `${origin.replace(
+                            /(?:^|\s)(Panel\-\-(\w+))(?=($|\s))/g,
+                            ''
+                          )} ${value}`
+                            .replace(/\s+/g, ' ')
+                            .trim()
+                        : value,
+                    options: [
+                      {
+                        label: '默认',
+                        value: 'Panel--default'
+                      },
+                      {
+                        label: '主色',
+                        value: 'Panel--primary'
+                      },
+                      {
+                        label: '提示',
+                        value: 'Panel--info'
+                      },
+                      {
+                        label: '成功',
+                        value: 'Panel--success'
+                      },
+                      {
+                        label: '警告',
+                        value: 'Panel--warning'
+                      },
+                      {
+                        label: '危险',
+                        value: 'Panel--danger'
+                      }
+                    ]
+                  },
+                  getSchemaTpl('className', {
+                    label: '外层',
+                    name: isForm ? 'panelClassName' : 'className',
+                    pipeIn: defaultValue('Panel--default')
+                  }),
+      
+                  getSchemaTpl('className', {
+                    name: 'headerClassName',
+                    label: '头部区域'
+                  }),
+      
+                  getSchemaTpl('className', {
+                    name: 'bodyClassName',
+                    label: '内容区域'
+                  }),
+      
+                  getSchemaTpl('className', {
+                    name: 'footerClassName',
+                    label: '底部区域'
+                  }),
+      
+                  getSchemaTpl('className', {
+                    name: 'actionsClassName',
+                    label: '按钮外层'
+                  })
+                ],
+              },
+            ])
           ]
-        },
-        {
-          title: '显隐',
-          body: [getSchemaTpl('ref'), getSchemaTpl('visible')]
         }
       ])
     ];

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

@@ -1,6 +1,11 @@
-import {registerEditorPlugin} from 'amis-editor-core';
-import {BasePlugin} from 'amis-editor-core';
+import {
+  registerEditorPlugin,
+  BasePlugin,
+  BaseEventContext,
+  getSchemaTpl
+} from 'amis-editor-core';
 import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter';
+import {tipedLabel} from '../component/BaseControl';
 
 // 需要一个示例，不然默认的没有高度都无法选中
 class WebComponentDemo extends HTMLElement {
@@ -36,18 +41,39 @@ export class WebComponentPlugin extends BasePlugin {
   };
 
   panelTitle = '包裹';
-  panelBody = [
-    {
-      type: 'input-text',
-      label: '标签',
-      name: 'tag'
-    },
-    {
-      type: 'input-kv',
-      label: '属性',
-      name: 'props'
-    }
-  ];
+
+  notRenderFormZone = true;
+
+  panelJustify = true;
+
+  panelBodyCreator = (context: BaseEventContext) => {
+    return getSchemaTpl('tabs', [
+      {
+        title: '属性',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            {
+              className: 'p-none',
+              title: '基本',
+              body: [
+                {
+                  type: 'input-text',
+                  label: '标签',
+                  name: 'tag'
+                },
+                getSchemaTpl('combo-container', {
+                  type: 'input-kv',
+                  mode: 'normal',
+                  name: 'props',
+                  label: '属性'
+                }),
+              ]
+            }
+          ])
+        ]
+      }
+    ]);
+  };
 }
 
 registerEditorPlugin(WebComponentPlugin);

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

@@ -552,7 +552,7 @@ setSchemaTpl('className', (schema: any) => {
 setSchemaTpl('combo-container', (config: SchemaObject) => {
   if (isObject(config)) {
     const itemsWrapperClassName =
-      (config as any).type === 'combo' &&
+      ['input-kv', 'combo'].includes((config as any).type) &&
       'ae-Combo-items ' + ((config as any).itemsWrapperClassName ?? '');
     return {
       ...(config as any),