优化：amis-saas-5350 [Feature] 「组件配置」组件 - button-toolbar 按钮工具栏

Change-Id: I7b8465c30ee3baa0bda541c34c48d3a9f0a50ad3

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

@@ -59,58 +59,90 @@ export class ButtonToolbarControlPlugin extends BasePlugin {
 
   panelTitle = '工具栏';
 
+  panelJustify = true;
+
   panelBodyCreator = (context: BaseEventContext) => {
-    return formItemControl(
+    return getSchemaTpl('tabs', [
       {
-        common: {
+        title: '属性',
-          replace: true,
+        body: [
-          body: [
+          getSchemaTpl('collapseGroup', [
-            getSchemaTpl('formItemName', {
-              required: true
-            }),
-            getSchemaTpl('label'),
-            getSchemaTpl('remark'),
-            getSchemaTpl('labelRemark'),
-            getSchemaTpl('description')
-          ]
-        },
-        option: {
-          title: '按钮管理',
-          replace: true,
-          body: [
             {
-              name: 'buttons',
+              title: '基本',
-              type: 'combo',
+              body: [
-              label: '',
+                getSchemaTpl('formItemName', {
-              multiple: true,
+                  required: true
-              addable: true,
+                }),
-              minLength: 1,
+                getSchemaTpl('label'),
-              draggable: true,
+                getSchemaTpl('valueFormula', {
-              draggableTip: '',
+                  rendererSchema: {
-              editable: false,
+                    type: 'input-text'
-              visibleOn: 'this.buttons && this.buttons.length',
+                  }
-              items: [
+                }),
-                {
+                getSchemaTpl('labelRemark'),
-                  type: 'tpl',
+                getSchemaTpl('remark'),
-                  inline: false,
+                getSchemaTpl('description'),
-                  tpl:
+                getSchemaTpl('combo-container', {
-                    '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+                  type: 'combo',
-                }
+                  label: '按钮管理',
-              ],
+                  name: 'buttons',
-              addButtonText: '新增按钮',
+                  mode: 'normal',
-              scaffold: {
+                  multiple: true,
-                type: 'button',
+                  addable: true,
-                label: '按钮'
+                  minLength: 1,
-              }
+                  draggable: true,
-            }
+                  editable: false,
-          ]
+                  items: [
-        },
+                    {
-        event: {
+                      type: 'tpl',
-          hidden: false
+                      inline: false,
-        }
+                      className: 'p-t-xs',
+                      tpl: '<span class="label label-default"><% if (data.type === "button-group") { %> 按钮组 <% } else { %><%= data.label %><% if (data.icon) { %><i class="<%= data.icon %>"/><% }%><% } %></span>'
+                    }
+                  ],
+                  addButtonText: '新增按钮',
+                  scaffold: {
+                    type: 'button',
+                    label: '按钮'
+                  }
+                }),
+              ]
+            },
+            getSchemaTpl('status', {
+              isFormItem: true,
+            })
+          ]),
+        ]
       },
-      context
+      {
-    );
+        title: '外观',
+        body: [
+          getSchemaTpl('collapseGroup', [
+            {
+              title: '基本',
+              body: [
+                getSchemaTpl('formItemMode'),
+                getSchemaTpl('horizontal', {
+                  label: '',
+                  visibleOn:
+                    'data.mode == "horizontal" && data.label !== false && data.horizontal'
+                }),
+              ]
+            },
+            getSchemaTpl('style:classNames', {
+              isFormItem: true,
+              schema: [
+                getSchemaTpl('className', {
+                  label: '描述',
+                  name: 'descriptionClassName',
+                  visibleOn: "this.description"
+                })
+              ]
+            }),
+          ])
+        ]
+      }
+    ]);
   };
 }