优化`UI`布局

magic-editor/src/console/src/components/layout/magic-event.vue

@@ -73,10 +73,6 @@ export default {
 .ma-event .ma-layout .ma-content .content-bg:hover {
   background: var(--toolbox-list-hover-background);
 }
-.ma-layout .ma-sider {
-  border: none;
-  border-right: 1px solid var(--tab-bar-border-color);
-}
 .ma-layout .ma-table-row{
   display: flex;
 }

magic-editor/src/console/src/components/layout/magic-function.vue

@@ -15,6 +15,10 @@
         </li>
       </ul>
       <div class="ma-layout">
+        <div v-show="showIndex < 1" class="not-select ma-sider">
+          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
+          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
+        </div>
         <div v-show="showIndex === 0" class="ma-layout-container">
           <div class="ma-header ma-table-row">
             <div>参数名</div>
@@ -41,10 +45,6 @@
         <div v-show="showIndex === 1" class="ma-layout-container" style="overflow: hidden; right: 0">
           <magic-textarea :value.sync="info.description" style="width: 100%; height: 100%; margin: 2px"/>
         </div>
-        <div v-show="showIndex < 1" class="not-select ma-sider">
-          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
-          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
-        </div>
       </div>
     </div>
   </div>

magic-editor/src/console/src/components/layout/magic-group.vue

@@ -13,6 +13,10 @@
         </li>
       </ul>
       <div class="ma-layout">
+        <div class="not-select ma-sider">
+          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
+          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
+        </div>
         <div v-show="showIndex === 0" class="ma-layout-container">
           <div class="ma-header ma-table-row ma-table-request-row">
             <div style="flex: 1">Key</div>
@@ -76,10 +80,6 @@
             </div>
           </div>
         </div>
-        <div class="not-select ma-sider">
-          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
-          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
-        </div>
       </div>
     </div>
   </div>

magic-editor/src/console/src/components/layout/magic-options.vue

@@ -261,7 +261,7 @@ export default {
 }
 
 .ma-layout .ma-sider {
-  border-left: 1px solid var(--tab-bar-border-color);
+  border-right: 1px solid var(--tab-bar-border-color);
 }
 
 .ma-layout .ma-sider > * {

magic-editor/src/console/src/components/layout/magic-request.vue

@@ -15,6 +15,10 @@
         </li>
       </ul>
       <div class="ma-layout">
+        <div v-show="showIndex < 3" class="not-select ma-sider">
+          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
+          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
+        </div>
         <div v-show="showIndex === 0" class="ma-layout-container">
           <div class="ma-header ma-table-row ma-table-request-row">
             <div style="width: 32px">必填</div>
@@ -166,10 +170,6 @@
         <div v-show="showIndex === 4" class="ma-layout-container" style="overflow: hidden; right: 0">
           <magic-textarea :value.sync="info.description" style="width: 100%; height: 100%; margin: 2px"/>
         </div>
-        <div v-show="showIndex < 3" class="not-select ma-sider">
-          <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
-          <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
-        </div>
       </div>
     </div>
   </div>

magic-editor/src/console/src/components/layout/magic-settings.vue

@@ -7,7 +7,11 @@
       </li>
     </ul>
     <div class="ma-layout">
-      <div v-if="showIndex == 0" class="ma-layout-container">
+      <div v-if="showIndex < 2" class="not-select ma-sider">
+        <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
+        <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
+      </div>
+      <div v-if="showIndex === 0" class="ma-layout-container">
         <div class="ma-header ma-table-row">
           <div>键</div>
           <div>值</div>
@@ -15,7 +19,7 @@
         </div>
         <div class="ma-content">
           <div v-for="(item, key) in parameters" :key="'request_parameter_' + key" class="ma-table-row">
-            <div :class="{ focus: parameterIndex == key && !item.name }">
+            <div :class="{ focus: parameterIndex === key && !item.name }">
               <magic-input :focus="() => (parameterIndex = key)" :value.sync="item.name" style="width: 100%"/>
             </div>
             <div>
@@ -27,7 +31,7 @@
           </div>
         </div>
       </div>
-      <div v-if="showIndex == 1" class="ma-layout-container">
+      <div v-if="showIndex === 1" class="ma-layout-container">
         <div class="ma-header ma-table-row">
           <div>键</div>
           <div>值</div>
@@ -35,7 +39,7 @@
         </div>
         <div class="ma-content">
           <div v-for="(item, key) in headers" :key="'request_header_' + key" class="ma-table-row">
-            <div :class="{ focus: headerIndex == key && !item.name }">
+            <div :class="{ focus: headerIndex === key && !item.name }">
               <magic-input :focus="() => (headerIndex = key)" :value.sync="item.name" style="width: 100%"/>
             </div>
             <div>
@@ -47,10 +51,6 @@
           </div>
         </div>
       </div>
-      <div v-if="showIndex < 2" class="not-select ma-sider">
-        <div @click="addRow"><i class="ma-icon ma-icon-plus"/></div>
-        <div @click="removeRow"><i class="ma-icon ma-icon-minus"/></div>
-      </div>
     </div>
   </div>
 </template>

magic-editor/src/console/src/components/layout/magic-todo.vue

@@ -113,10 +113,6 @@ export default {
 .ma-todo .ma-layout .ma-content .content-bg:hover {
   background: var(--toolbox-list-hover-background);
 }
-.ma-layout .ma-sider {
-  border: none;
-  border-right: 1px solid var(--tab-bar-border-color);
-}
 
 .ma-layout .ma-table-row > * {
   width: 30% !important;