refactor: 样式优化

frontend/src/business/components/api/definition/components/ApiList.vue

@@ -32,7 +32,7 @@
             :label="$t('api_test.definition.api_type')"
             show-overflow-tooltip>
             <template v-slot:default="scope" class="request-method">
-              <el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method)}" class="api-el-tag">
+              <el-tag size="mini" :style="{'background-color': getColor(true, scope.row.method), border: getColor(true, scope.row.method)}" class="api-el-tag">
                 {{ scope.row.method}}
               </el-tag>
             </template>
@@ -78,7 +78,8 @@
               <div v-else>
                 <el-button type="text" @click="reductionApi(scope.row)" v-if="currentModule!=undefined && currentModule.id === 'gc'">恢复</el-button>
                 <el-button type="text" @click="editApi(scope.row)" v-else>编辑</el-button>
-                <el-button type="text" @click="handleTestCase(scope.row)">用例</el-button>
+                <el-button v-if="scope.row.caseTotal > 0" type="text" @click="handleTestCase(scope.row)">用例</el-button>
+                <el-button v-else type="text" @click="handleTestCase(scope.row)">+用例</el-button>
                 <el-button type="text" @click="handleDelete(scope.row)" style="color: #F56C6C">删除</el-button>
               </div>
             </template>
@@ -315,7 +316,7 @@
           return this.methodColorMap.get(method);
         }
       },
-    }
+    },
   }
 </script>
 

frontend/src/business/components/api/definition/components/body/ApiBody.vue

@@ -41,7 +41,7 @@
     </div>
 
     <div class="ms-body" v-if="body.type == 'XML'">
-      <ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" ref="codeEdit"/>
+      <ms-code-edit :read-only="isReadOnly" :data.sync="body.raw" :modes="modes" :mode="'xml'" ref="codeEdit"/>
     </div>
 
 
@@ -180,4 +180,9 @@
     border-radius: 5px;
   }
 
+  .el-radio-group {
+    margin: 10px 10px;
+    margin-top: 15px;
+  }
+
 </style>

frontend/src/business/components/api/definition/components/case/ApiCaseHeader.vue

@@ -201,8 +201,9 @@
     min-width: 100px;
   }
 
-  .el-row {
+  .el-col {
-    /*vertical-align: center;*/
+    height: 32px;
+    line-height: 32px;
   }
 
 

frontend/src/business/components/api/definition/components/complete/EditCompleteHTTPApi.vue

@@ -11,53 +11,69 @@
         </div>
         <br/>
         <p class="tip">{{$t('test_track.plan_view.base_info')}} </p>
+
         <!-- 基础信息 -->
-        <el-form-item :label="$t('commons.name')" prop="name">
+        <div class="base-info">
-          <el-input class="ms-http-input" size="small" v-model="httpForm.name"/>
+          <el-row>
-        </el-form-item>
+            <el-col :span="8">
-        <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
+              <el-form-item :label="$t('commons.name')" prop="name">
-          <el-select class="ms-http-input" size="small" v-model="httpForm.moduleId">
+                <el-input class="ms-http-input" size="small" v-model="httpForm.name"/>
-            <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
+              </el-form-item>
-          </el-select>
+            </el-col>
-        </el-form-item>
+            <el-col :span="16">
+              <el-form-item :label="$t('api_report.request')" prop="path">
+                <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="httpForm.path"
+                          class="ms-http-input" size="small" style="margin-top: 5px">
+                  <el-select v-model="httpForm.method" slot="prepend" style="width: 100px" size="small">
+                    <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+                  </el-select>
+                </el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
 
-        <el-form-item :label="$t('api_report.request')" prop="path">
+          <el-row>
-          <el-input :placeholder="$t('api_test.definition.request.path_info')" v-model="httpForm.path"
+            <el-col :span="8">
-                    class="ms-http-input" size="small" style="margin-top: 5px">
+              <el-form-item :label="$t('test_track.module.module')" prop="moduleId">
-            <el-select v-model="httpForm.method" slot="prepend" style="width: 100px" size="small">
+                <el-select class="ms-http-select" size="small" v-model="httpForm.moduleId">
-              <el-option v-for="item in reqOptions" :key="item.id" :label="item.label" :value="item.id"/>
+                  <el-option v-for="item in moduleOptions" :key="item.id" :label="item.path" :value="item.id"/>
-            </el-select>
+                </el-select>
-          </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
+                <el-select v-model="httpForm.userId"
+                           :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
+                           class="ms-http-select">
+                  <el-option
+                    v-for="item in maintainerOptions"
+                    :key="item.id"
+                    :label="item.id + ' (' + item.name + ')'"
+                    :value="item.id">
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </el-col>
+            <el-col :span="8">
+              <el-form-item :label="$t('commons.status')" prop="status">
+                <el-select class="ms-http-select" size="small" v-model="httpForm.status">
+                  <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
 
-        </el-form-item>
+          <el-row>
+            <el-form-item :label="$t('commons.description')" prop="description">
+              <el-input class="ms-http-textarea"
+                        v-model="httpForm.description"
+                        type="textarea"
+                        :autosize="{ minRows: 2, maxRows: 10}"
+                        :rows="2" size="small"/>
+            </el-form-item>
+          </el-row>
+        </div>
 
-        <el-form-item :label="$t('commons.status')" prop="status">
-          <el-select class="ms-http-input" size="small" v-model="httpForm.status">
-            <el-option v-for="item in options" :key="item.id" :label="item.label" :value="item.id"/>
-          </el-select>
-        </el-form-item>
-
-        <el-form-item :label="$t('api_test.definition.request.responsible')" prop="userId">
-          <el-select v-model="httpForm.userId"
-                     :placeholder="$t('api_test.definition.request.responsible')" filterable size="small"
-                     class="ms-http-input">
-            <el-option
-              v-for="item in maintainerOptions"
-              :key="item.id"
-              :label="item.id + ' (' + item.name + ')'"
-              :value="item.id">
-            </el-option>
-          </el-select>
-
-        </el-form-item>
-
-        <el-form-item :label="$t('commons.description')" prop="description">
-          <el-input class="ms-http-textarea"
-                    v-model="httpForm.description"
-                    type="textarea"
-                    :autosize="{ minRows: 2, maxRows: 10}"
-                    :rows="2" size="small"/>
-        </el-form-item>
         <!-- 请求参数 -->
         <div>
           <p class="tip">{{$t('api_test.definition.request.req_param')}} </p>
@@ -157,8 +173,17 @@
 </script>
 
 <style scoped>
-  .ms-http-input {
+
-    width: 400px;
+  .base-info .el-form-item {
+    width: 100%;
+  }
+
+  .base-info .el-form-item >>> .el-form-item__content {
+    width: 80%;
+  }
+
+  .base-info .ms-http-select {
+    width: 100%;
   }
 
   .tip {

frontend/src/business/components/api/definition/components/response/ResponseText.vue

@@ -15,13 +15,6 @@
             <ms-api-key-value :isShowEnable="false" :suggestions="headerSuggestions"
                               :items="response.statusCode"/>
           </el-tab-pane>
-
-          <el-tab-pane v-if="activeName == 'body'" :disabled="true" name="mode" class="pane cookie">
-            <template v-slot:label>
-              <ms-dropdown :commands="modes" :default-command="mode" @command="modeChange"/>
-            </template>
-          </el-tab-pane>
-
         </el-tabs>
       </el-collapse-transition>
     </el-form>
@@ -32,7 +25,6 @@
   import MsAssertionResults from "./AssertionResults";
   import MsCodeEdit from "../../../../common/components/MsCodeEdit";
   import MsDropdown from "../../../../common/components/MsDropdown";
-  import {BODY_FORMAT} from "../../model/ApiTestModel";
   import MsApiKeyValue from "../ApiKeyValue";
   import {REQUEST_HEADERS} from "@/common/js/constants";
   import MsApiBody from "../body/ApiBody";
@@ -55,8 +47,6 @@
       return {
         isActive: true,
         activeName: "headers",
-        modes: ['text', 'json', 'xml', 'html'],
-        mode: BODY_FORMAT.TEXT,
         headerSuggestions: REQUEST_HEADERS
 
       }
@@ -66,18 +56,12 @@
       active() {
         this.isActive = !this.isActive;
       },
-      modeChange(mode) {
-        this.mode = mode;
-      }
     },
 
     mounted() {
       if (!this.response.headers) {
         return;
       }
-      if (this.response.headers.indexOf("Content-Type: application/json") > 0) {
-        this.mode = BODY_FORMAT.JSON;
-      }
     }
   }
 </script>