chore: button组件样式选择支持可视化选择类型 (#7858)

* chore: button组件样式选择支持可视化选择类型

* 修改命名空间

---------

Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>

packages/amis-editor-core/scss/components/_button.scss

@@ -0,0 +1,5 @@
+.ae-ButtonLevel-MenuTpl {
+  height: 40px;
+  display: flex;
+  align-items: center;
+}

packages/amis-editor-core/scss/editor.scss

@@ -52,6 +52,9 @@
 @import './style-control/style-common';
 @import './style-control/theme-css-code';
 
+/* 组件样式 */
+@import './components/button';
+
 @keyframes growing {
   0% {
     box-shadow: 0 0 10px rgba(#23b7e5, 0) inset;

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

@@ -1071,6 +1071,8 @@ setSchemaTpl('buttonLevel', {
   label: '按钮样式',
   type: 'select',
   name: 'level',
+  menuTpl:
+    '<div class="ae-ButtonLevel-MenuTpl"><button type="button" class="cxd-Button cxd-Button--${value} cxd-Button--size-sm cxd-Button--block">${label}</button></div>',
   options: [
     {
       label: '默认',