style(接口自动化): 步骤组件样式统一

frontend/src/business/components/api/automation/scenario/component/ApiComponent.vue

@@ -12,10 +12,10 @@
     :title="displayTitle">
 
     <template v-slot:behindHeaderLeft>
-      <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
-      <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
-      <el-tag size="mini" style="margin-left: 20px" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
-      <span style="margin-left: 20px;">{{getProjectName(request.projectId)}}</span>
+      <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
+      <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
+      <el-tag size="mini" class="ms-tag" v-if="request.referenced ==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
+      <span class="ms-tag">{{getProjectName(request.projectId)}}</span>
       <ms-run :debug="true" :reportId="reportId" :run-data="runData" :env-map="envMap"
               @runRefresh="runRefresh" ref="runTest"/>
 
@@ -23,7 +23,7 @@
 
     <template v-slot:button>
       <el-tooltip :content="$t('api_test.run')" placement="top">
-        <el-button @click="run" icon="el-icon-video-play" style="background-color: #409EFF;color: white;" size="mini" circle/>
+        <el-button @click="run" icon="el-icon-video-play" class="ms-btn" size="mini" circle/>
       </el-tooltip>
     </template>
 
@@ -52,7 +52,7 @@
     <api-response-component :currentProtocol="request.protocol" :result="request.requestResult" v-else/>
 
     <!-- 保存操作 -->
-    <el-button type="primary" size="small" style="margin: 20px; float: right" @click="saveTestCase(item)"
+    <el-button type="primary" size="small" class="ms-btn-flot" @click="saveTestCase(item)"
                v-if="!request.referenced">
       {{ $t('commons.save') }}
     </el-button>
@@ -67,7 +67,7 @@
   import MsApiRequestForm from "../../../definition/components/request/http/ApiHttpRequestForm";
   import MsRequestResultTail from "../../../definition/components/response/RequestResultTail";
   import MsRun from "../../../definition/components/Run";
-  import {getUUID,getCurrentProjectID} from "@/common/js/utils";
+  import {getUUID, getCurrentProjectID} from "@/common/js/utils";
   import ApiBaseComponent from "../common/ApiBaseComponent";
   import ApiResponseComponent from "./ApiResponseComponent";
   import CustomizeReqInfo from "@/business/components/api/automation/scenario/common/CustomizeReqInfo";
@@ -333,4 +333,18 @@
     content: "";
 
   }
+
+  .ms-btn {
+    background-color: #409EFF;
+    color: white;
+  }
+
+  .ms-btn-flot {
+    margin: 20px;
+    float: right;
+  }
+
+  .ms-tag {
+    margin-left: 20px;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/component/ApiScenarioComponent.vue

@@ -13,11 +13,11 @@
     :title="$t('api_test.automation.scenario_import')">
 
     <template v-slot:behindHeaderLeft>
-      <el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
-      <el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
-      <el-tag size="mini" style="margin-left: 20px" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
+      <el-tag size="mini" class="ms-tag" v-if="scenario.referenced==='Deleted'" type="danger">{{$t('api_test.automation.reference_deleted')}}</el-tag>
+      <el-tag size="mini" class="ms-tag" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
+      <el-tag size="mini" class="ms-tag" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
 
-      <span style="margin-left: 20px;">{{getProjectName(scenario.projectId)}}</span>
+      <span class="ms-tag">{{getProjectName(scenario.projectId)}}</span>
     </template>
 
   </api-base-component>
@@ -128,7 +128,7 @@
         }
       },
       getProjectName(id) {
-        const project = this.projectList.find(p => p.id === id) ;
+        const project = this.projectList.find(p => p.id === id);
         return project ? project.name : "";
       }
     }
@@ -145,4 +145,7 @@
     transform: rotate(90deg);
   }
 
+  .ms-tag {
+    margin-left: 20px;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/component/IfController.vue

@@ -14,11 +14,11 @@
       <el-input draggable size="small" v-model="controller.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
 
       <el-select v-model="controller.operator" :placeholder="$t('commons.please_select')" size="small"
-                 @change="change" style="width: 10%;margin-left: 10px">
+                 @change="change" class="ms-select">
         <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
       </el-select>
 
-      <el-input draggable size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" style="width: 20%;margin-left: 20px"/>
+      <el-input draggable size="small" v-model="controller.value" :placeholder="$t('api_test.value')" v-if="!hasEmptyOperator" class="ms-btn"/>
     </template>
 
   </api-base-component>
@@ -26,6 +26,7 @@
 
 <script>
   import ApiBaseComponent from "../common/ApiBaseComponent";
+
   export default {
     name: "MsIfController",
     components: {ApiBaseComponent},
@@ -98,4 +99,13 @@
 </script>
 
 <style scoped>
+  .ms-btn {
+    width: 20%;
+    margin-left: 20px;
+  }
+
+  .ms-select {
+    width: 10%;
+    margin-left: 10px;
+  }
 </style>

frontend/src/business/components/api/automation/scenario/component/LoopController.vue

@@ -69,7 +69,6 @@
       </div>
       <div v-else draggable>
         <el-input size="small" v-model="controller.whileController.variable" style="width: 20%" :placeholder="$t('api_test.request.condition_variable')"/>
-
         <el-select v-model="controller.whileController.operator" :placeholder="$t('commons.please_select')" size="small"
                    @change="change" style="width: 10%;margin-left: 10px">
           <el-option v-for="o in operators" :key="o.value" :label="$t(o.label)" :value="o.value"/>
@@ -79,18 +78,6 @@
         <el-input-number size="small" v-model="controller.whileController.timeout" :placeholder="$t('commons.millisecond')" :max="1000*10000000" :min="3000" :step="1000"/>
         <span class="ms-span ms-radio">ms</span>
       </div>
-      <!--<p class="tip">{{$t('api_test.definition.request.res_param')}} </p>-->
-      <!--<div>-->
-      <!--<el-tabs v-model="activeName" closable class="ms-tabs">-->
-      <!--<el-tab-pane :label="item.name" :name="item.name" v-for="(item,index) in requestResult.scenarios" :key="index">-->
-      <!--<div v-for="(result,i) in item.requestResults" :key="i" style="margin-bottom: 5px">-->
-      <!--<api-response-component :result="result"/>-->
-      <!--</div>-->
-      <!--</el-tab-pane>-->
-      <!--</el-tabs>-->
-
-      <!--</div>-->
-
     </api-base-component>
 
   </div>
@@ -344,14 +331,6 @@ export default {
     font-weight: normal;
   }
 
-  .tip {
-    padding: 3px 5px;
-    font-size: 16px;
-    border-radius: 4px;
-    border-left: 4px solid #783887;
-    margin: 20px 0;
-  }
-
   .icon.is-active {
     transform: rotate(90deg);
   }