优化

src/App.vue

@@ -36,7 +36,7 @@
                 </div>
                 <div style="width: 10%;margin-right: 15px;display:flex;align-items: center;justify-content: flex-end;">
                     <el-button :disabled="state" type="primary" size="mini" style="width: 20px;height: 20px;" @click="newAction" id="addButton">
-                        <img style="width: 12px;height: 12px;" src="./assets/add.svg"  id="addImg"> 
+                        <img style="width: 12px;height: 12px;" src="./assets/add.svg" id="addImg">
                     </el-button>
                 </div>
             </div>
@@ -80,7 +80,7 @@
                     </div>
                 </div>
                 <div style="margin-left: 15px;margin-top: 10px;" v-if="activedAction.Alias == 'actions'">
-                    <el-button @click="toActions">进入容器</el-button>
+                    <el-button style="width: 60px !important;height: 20px !important;" @click="toActions">进入容器</el-button>
                 </div>
                 <component :is="dynamicComponent" @dataChanged="handleDataChange" :activedAction="activedAction" :widthResize="widthResize" v-if="activedAction.Alias !== ''">
                 </component>

src/components/collectionForm.vue

 <template>
     <div class="collectionForm">
-        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
+        <div style="display: flex;height: 25px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
             <div style="display: flex;">
-                <el-button style="width: 80px;height: 30px;" size="mini" class="button-new-tag" @click="selectElement" v-if="!isSelectForm">批量选择元素</el-button>
-                <el-button style="width: 60px;height: 30px;margin-left: 10px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button>
+                <el-button style="width: 70px;height: 20px;" size="mini" class="button-new-tag" @click="selectElement" v-if="!isSelectForm">批量选择元素</el-button>
+                <el-button style="width: 70px;height: 20px;" size="small" class="button-new-tag" @click="cancelSelect" v-if="isSelectForm">取消选择</el-button>
             </div>
         </div>
         <!-- 全部表格信息 -->

src/components/collectionTable.vue

 <template>
     <div class="collectionTable">
-        <div style="display: flex;height: 40px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
+        <div style="display: flex;height: 25px;padding-left: 15px;text-align: left;align-items: center;justify-content: space-between;">
             <template v-if="isSelectTable">
                 <el-tooltip class="item" effect="dark" content="点击新增,右击页面元素添加数据" placement="top">
                     <!-- <el-button style="width: 60px;height: 30px;" size="mini" class="button-new-tag"
@@ -26,7 +26,7 @@
         <!-- 全部表格信息 -->
         <div style="overflow: auto;height: 230px;" :style="{ width: widthResize + 'px' }">
             <vxe-table :data="SelectTableData" ref="xTableColumn" border class="mytable-scrollbar" height="220" v-if="isSelectTable" auto-resize style="margin-bottom: 5px;" @current-change="currentChangeEvent" highlight-hover-row highlight-current-row>
-                <vxe-column field="" min-width="150">
+                <vxe-column field="" min-width="170">
                     <template #header>
                         <span style="font-size: 13px;">列名</span>
                     </template>
@@ -36,7 +36,7 @@
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column field="" min-width="150">
+                <vxe-column field="" min-width="170">
                     <template #header>
                         <span style="font-size: 13px;">属性名</span>
                     </template>
@@ -59,7 +59,7 @@
                         </div>
                     </template>
                 </vxe-column>
-                <vxe-column min-width="70" fixed="right">
+                <vxe-column min-width="50" fixed="right">
                     <template #header>
                         <span style="font-size: 13px;">操作</span>
                     </template>
@@ -404,4 +404,11 @@ export default {
 .el-tooltip__popper.is-dark {
     z-index: 99999 !important;
 }
+
+.vxe-cell .vxe-input>.vxe-input--inner,
+.vxe-cell .vxe-textarea>.vxe-textarea--inner,
+.vxe-table--filter-wrapper .vxe-input>.vxe-input--inner,
+.vxe-table--filter-wrapper .vxe-textarea>.vxe-textarea--inner {
+    width: 145px !important;
+}
 </style>
\ No newline at end of file

src/components/elOutput.vue

 <template>
   <div class="elOutput">
     <!-- 操作按钮区域 -->
-    <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-      <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!outputState">选择内容</el-button>
-      <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
+    <div style="display: flex;margin-top: 10px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
+      <el-button style="width: 60px !important;height: 20px !important;" size="small" class="button-new-tag" @click="selectElement" v-if="!outputState">选择内容</el-button>
+      <el-button style="width: 60px !important;height: 20px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="outputState">取消选择</el-button>
     </div>
     <!-- 表单区域 -->
     <el-form label-position="right" :model="actionConfig">

src/components/elclick.vue

@@ -2,9 +2,9 @@
     <!-- 点击菜单组件 -->
     <div class="elClick">
         <!-- 操作按钮区域 -->
-        <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-            <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!clickState">选择点击内容</el-button>
-            <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
+        <div style="display: flex;margin-top: 10px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
+            <el-button style="width: 70px !important;height: 20px !important;" size="small" class="button-new-tag" @click="selectElement" v-if="!clickState">选择点击内容</el-button>
+            <el-button style="width: 70px !important;height: 20px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="clickState">取消选择</el-button>
         </div>
         <!-- 表单区域 -->
         <el-form label-position="left" :model="actionConfig">

src/components/onInput.vue

 <template>
   <div class="onInput">
     <!-- 操作按钮区域 -->
-    <div style="display: flex;height: 50px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
-      <el-button size="small" class="button-new-tag" @click="selectElement" v-if="!inputState">选择输入框</el-button>
-      <el-button size="small" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
+    <div style="display: flex;margin-top: 10px;margin-left: 15px;text-align: left;align-items: center;justify-content: flex-start;">
+      <el-button style="width: 60px !important;height: 20px !important;" size="small" class="button-new-tag" @click="selectElement" v-if="!inputState">选择输入框</el-button>
+      <el-button style="width: 60px !important;height: 20px !important;" size="small" class="button-new-tag" @click="cancelSelect" v-if="inputState">取消选择</el-button>
     </div>
     <!-- 表单区域 -->
     <el-form label-position="right" :model="actionConfig">

src/components/pageNavigates.vue

@@ -4,7 +4,7 @@
         <!-- 按钮区域 -->
         <div style="width: 100%; text-align: right; display: flex; justify-content: space-between;margin-top: 10px;">
             <!-- 获取当前页面地址的按钮 -->
-            <el-button size="small" class="button-new-tag" @click="getCurrentPageUrl" style="margin-left: 15px;">获取当前页面地址</el-button>
+            <el-button style="width: 85px !important;height: 20px !important;margin-left: 15px;" size="small" class="button-new-tag" @click="getCurrentPageUrl">获取当前页面地址</el-button>
         </div>
         <!-- 表单元素，用于配置页面导航 -->
         <el-form label-position="right" :model="actionConfig">