From 9910dd666c53dc3d69a6e48b966bbbab1d3e1f8e Mon Sep 17 00:00:00 2001
From: Mercutio <mercutio_john@foxmail.com>
Date: Mon, 10 Apr 2023 13:47:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=93=8D=E4=BD=9C=E6=A0=8F=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |  2 +-
 .../form-designer/toolbar-panel/index.vue     | 22 ++++++++++++-------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index b256e9a..71488b7 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
   <div id="app">
     <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig" :global-dsv="globalDsv">
       <template #customToolButtons>
-        <el-button type="text" @click="printFormJson">测试按钮</el-button>
+        <el-button type="primary" @click="printFormJson">测试按钮</el-button>
       </template>
     </VFormDesigner>
   </div>
diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue
index b10ed00..9265887 100644
--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@@ -23,7 +23,7 @@
                icon-class="el-icon-arrow-right" @node-click="onNodeTreeClick"></el-tree>
     </el-drawer>
 
-    <div class="right-toolbar" :style="{width: toolbarWidth + 'px'}">
+    <div class="right-toolbar">
       <div class="right-toolbar-con">
         <el-button v-if="showToolButton('clearDesignerButton')" type="text" @click="clearFormWidget">
           <i class="el-icon-delete" />{{i18nt('designer.toolbar.clear')}}</el-button>
@@ -695,24 +695,30 @@
 
 <style lang="scss" scoped>
   div.toolbar-container {
-    //min-width: 728px;  /* 解决工具按钮栏换行的问题 */
-    /* 上一行css有问题，当窗口宽度不足时会把按钮挤出到右边的属性设置区，弃之！ */
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    overflow: hidden;
+    height: 100%;
   }
 
   .left-toolbar {
-    float: left;
+    display: flex;
+    flex-shrink: 1;
     font-size: 16px;
   }
 
   .right-toolbar {
-    float: right;
-    //width: 420px;
+    margin-left: 10px;
+    flex-shrink: 0;
     text-align: right;
     overflow: hidden;
 
     .right-toolbar-con {
-      text-align: left;
-      width: 600px;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      // min-width: 600px;
     }
 
     ::v-deep .el-button--text {