样式优化&代码优化

magic-editor/src/console/src/components/common/magic-json-tree.vue

@@ -6,18 +6,18 @@
       <div class="item-inline"  :class="item.selected ? 'tree-item item-selected' : 'tree-item'">
         <magic-json-tree-format :item="item" :index="index" :dataLength="jsonData.length" :indentLevel="indentLevel"/>
         <div class="item-inline">
-          <template  v-if="item.dataType == 'Object' || item.dataType == 'Array'" >
-            <img :src="imgObject" v-if="item.dataType == 'Object'"/>
+          <template  v-if="item.dataType === 'Object' || item.dataType === 'Array'" >
+            <img :src="imgObject" v-if="item.dataType === 'Object'"/>
             <img :src="imgArray" v-else/>
           </template>
 
-          {{item.level > 0 ? item.name : ''}}{{item.dataType != 'Object' && item.dataType != 'Array' ? ':' : ''}}
+          {{item.level > 0 ? item.name : ''}}{{item.dataType !== 'Object' && item.dataType !== 'Array' ? ':' : ''}}
           <span :style="item.dataType | color">
-              {{item.dataType == 'String' ? (item.value == 'null' || item.value == null ? 'null' : '"' + item.value + '"') : item.value}}
+              {{item.dataType === 'String' ? (item.value === 'null' || item.value == null ? 'null' : '"' + item.value + '"') : item.value}}
             </span>
         </div>
       </div>
-      <template  v-if="item.dataType == 'Object' || item.dataType == 'Array'" >
+      <template  v-if="item.dataType === 'Object' || item.dataType === 'Array'" >
         <magic-json-tree :jsonData="item.children" :indentLevel="indentLevel | createLevel(jsonData, item, index)" :forceUpdate="forceUpdate" v-on="$listeners"/>
       </template>
     </li>
@@ -49,7 +49,7 @@
         if (!indentLevel) {
           indentLevel = []
         }
-        indentLevel[item.level] = jsonData.length == index + 1 ? 1 : 0
+        indentLevel[item.level] = jsonData.length === index + 1 ? 1 : 0
         return deepClone(indentLevel)
       },
       color(dataType) {

magic-editor/src/console/src/components/common/magic-json.vue

@@ -8,7 +8,7 @@
     </div>
     <div class="json-panel f_c">
       <div class="header">属性</div>
-      <div class="panel-box f_c" v-if="fieldObj.dataType && fieldObj.dataType != 'Object' && fieldObj.dataType != 'Array'">
+      <div class="panel-box f_c" v-if="fieldObj.dataType && fieldObj.dataType !== 'Object' && fieldObj.dataType !== 'Array'">
         <div class="box-item">
           <div class="item-title">Key</div>
           <div class="item-content">{{fieldObj.name}}</div>
@@ -20,8 +20,7 @@
         <div class="box-item">
           <div class="item-title">参数类型</div>
           <div class="item-content">
-            <magic-select :border="false" :options="bodyTypes"
-                          :value.sync="fieldObj.dataType" default-value="String" style="width: 100%"/>
+            <magic-select :options="bodyTypes" :value.sync="fieldObj.dataType" default-value="String" style="width: 100%"/>
           </div>
         </div>
         <div class="box-item">
@@ -39,8 +38,7 @@
         <div class="box-item">
           <div class="item-title">验证方式</div>
           <div class="item-content">
-            <magic-select :border="false" :options="validates"
-                          :value.sync="fieldObj.validateType" default-value="pass" style="width: 100%"/>
+            <magic-select :options="validates" :value.sync="fieldObj.validateType" default-value="pass" style="width: 100%"/>
           </div>
         </div>
         <div class="box-item">
@@ -166,6 +164,7 @@
   .ma-json-container {
     display: flex;
     flex-direction: row;
+    height: 100%;
   }
 
   .f_c {
@@ -176,25 +175,25 @@
   .json-view {
     width: 55%;
     margin: 0px 10px;
-    background-color: var(--input-background);
     border: 1px solid var(--border-color);
+    border-top: none;
   }
 
   .json-view .view-box {
-    padding: 15px 20px;
-    height: 335px;
-    overflow: scroll;
+    padding: 5px 0;
+    height: 100%;
+    overflow: auto;
   }
 
   .json-panel {
     flex: 1;
     margin: 0px 10px;
-    background-color: var(--input-background);
     border: 1px solid var(--border-color);
+    border-top: none;
   }
 
   .json-panel .panel-box {
-    padding: 5px 20px;
+    padding: 5px;
   }
 
   .json-panel .panel-box .box-item {
@@ -202,10 +201,10 @@
     display: flex;
     flex-direction: row;
     align-items: center;
-    border-bottom: 1px solid #E3E3E3;
+    border-bottom: 1px solid var(--border-color);
   }
   .json-panel .panel-box .box-item .item-title {
-    width: 150px;
+    width: 125px;
   }
   .json-panel .panel-box .box-item .item-content {
     flex: 1;
@@ -216,7 +215,8 @@
     font-size: 14px;
     text-align: left;
     padding-left: 20px;
-    background-color: var(--selected-background);
+    background-color: var(--background);
+    border-bottom: 1px solid var(--border-color);
     width: 100%;
   }
 </style>

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

@@ -152,7 +152,7 @@
 
         <div v-show="showIndex === 3" class="ma-layout-container">
 
-          <div style="display: flex; flex-direction: row; height: 100%;">
+          <div style="display: flex; flex-direction: row; height: calc(100% - 24px);">
             <div style="width: 40%">
               <div class="header">编辑器（停止编辑2s后同步更新视图属性）</div>
               <div ref="bodyEditor" class="ma-body-editor"></div>
@@ -298,10 +298,10 @@
       buildBodyEditorData(o) {
         let requestBody = o
         let newBody = {}
-        if ('Object' == requestBody.dataType) {
+        if ('Object' === requestBody.dataType) {
           let body = {}
           newBody = this.createJsonData(body, requestBody.children)
-        } else if ('Array' == requestBody.dataType) {
+        } else if ('Array' === requestBody.dataType) {
           let body = []
           newBody = this.createJsonData(body, requestBody.children, true)
         }
@@ -315,14 +315,14 @@
           if (!arrayFlag) {
             key = item.name
           }
-          if ('Object' == item.dataType) {
+          if ('Object' === item.dataType) {
             value = {}
             newBody[key] = this.createJsonData(value, item.children)
-          } else if ('Array' == item.dataType) {
+          } else if ('Array' === item.dataType) {
             value = []
             newBody[key] = this.createJsonData(value, item.children, true)
           } else {
-            newBody[key] = (value == 'null' || value == 'undefined') ? null : value
+            newBody[key] = (value === 'null' || value === 'undefined') ? null : value
           }
           if (arrayFlag) {
             newBody.push(value)
@@ -424,7 +424,7 @@
         }
       },
       updateRequestBody(bodyStr) {
-        if (this.bodyEditor.getValue().replace(/\s/g,"") == '{}') {
+        if (this.bodyEditor.getValue().replace(/\s/g,"") === '{}') {
           this.requestBody = []
           return false
         }
@@ -441,7 +441,7 @@
             description: '',
             children: this.processBody(body, 0),
             level: 0,
-            selected: this.requestBody.length > 0 ? false : true
+            selected: this.requestBody.length <= 0
           })
 
           this.requestBody = this.valueCopy(reqBody, this.requestBody)
@@ -454,8 +454,8 @@
         let arr = [], that = this
         Object.keys(body).forEach((key) => {
           let param = {
-            name: 'Array' != this.getType(body) ? key : '',
-            value: 'Object' != that.getType(body[key]) && 'Array' != that.getType(body[key]) ? body[key] : '',
+            name: 'Array' !== this.getType(body) ? key : '',
+            value: 'Object' !== that.getType(body[key]) && 'Array' !== that.getType(body[key]) ? body[key] : '',
             dataType: this.getType(body[key]),
             validateType: '',
             expression: '',
@@ -465,7 +465,7 @@
             level: level + 1,
             selected: false
           }
-          if ('Object' == that.getType(body[key]) || 'Array' == that.getType(body[key])) {
+          if ('Object' === that.getType(body[key]) || 'Array' === that.getType(body[key])) {
             let children = that.processBody(body[key], level + 1);
             param.children = children;
           }
@@ -475,19 +475,19 @@
         return arr;
       },
       getType(object) {
-        if (Object.prototype.toString.call(object) == '[object Number]') {
+        if (Object.prototype.toString.call(object) === '[object Number]') {
           return "Integer";
         }
-        if (Object.prototype.toString.call(object) == '[object String]') {
+        if (Object.prototype.toString.call(object) === '[object String]') {
           return "String";
         }
-        if (Object.prototype.toString.call(object) == '[object Boolean]') {
+        if (Object.prototype.toString.call(object) === '[object Boolean]') {
           return "Boolean";
         }
-        if (Object.prototype.toString.call(object) == '[object Array]') {
+        if (Object.prototype.toString.call(object) === '[object Array]') {
           return "Array";
         }
-        if (Object.prototype.toString.call(object) == '[object Object]') {
+        if (Object.prototype.toString.call(object) === '[object Object]') {
           return "Object";
         }
         return "String";
@@ -496,14 +496,14 @@
         let that = this;
         newBody.map(item => {
           let oldItemArr = oldBody.filter(old => {
-            if (old.level == 0 || arrayFlag) {
+            if (old.level === 0 || arrayFlag) {
               return old
             }
-            return old.name == item.name
+            return old.name === item.name
           })
           if (oldItemArr.length > 0) {
-            if (item.dataType == 'Object' || item.dataType == 'Array') {
-              item.children = that.valueCopy(item.children, oldItemArr[0].children, item.dataType == 'Array' ? true : false)
+            if (item.dataType === 'Object' || item.dataType === 'Array') {
+              item.children = that.valueCopy(item.children, oldItemArr[0].children, item.dataType === 'Array' ? true : false)
             } else {
               item.validateType = oldItemArr[0].validateType
               item.expression = oldItemArr[0].expression