style(接口测试): 统一场景步骤样式

--bug=1013424 --user=赵勇 【接口测试】场景断言步骤-开关和...显示按钮未居中且按钮间距和其它步骤不同-场景内所有步骤的操作按钮间距、居中显示、步骤高度均显示一致 https://www.tapd.cn/55049933/s/1169441

frontend/src/business/components/api/automation/scenario/common/ApiBaseComponent.vue

@@ -1,12 +1,12 @@
 <template>
-  <el-card :style="{'border-color':colorStyle}">
-    <div class="header" @click="active(data)">
+  <el-card :style="{'border-color':colorStyle}" class="ms-base-card">
+    <div class="ms-base-header" @click="active(data)">
       <slot name="beforeHeaderLeft">
-        <div v-if="data.index" class="el-step__icon is-text enable-switch" :style="{'color': color, 'background-color': backgroundColor}">
+        <div v-if="data.index" class="el-step__icon is-text" :style="{'color': color, 'background-color': backgroundColor}">
           <div class="el-step__icon-inner" :key="$store.state.forceRerenderIndex">{{ data.index }}</div>
         </div>
+        <el-tag class="ms-left-btn" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{ title }}</el-tag>
         <slot name="behindHeaderLeft" v-if="!isMax"></slot>
-        <el-tag class="ms-left-btn" size="mini" :style="{'color': color, 'background-color': backgroundColor}">{{ title }}</el-tag>
       </slot>
 
       <span v-show="!isMax">
@@ -28,7 +28,7 @@
       </span>
       <span v-show="isMax">
         <slot name="headerLeft">
-            <span style="font-size: 12px" class="ms-step-name-width">{{ data.name }}</span>
+            <span class="ms-step-name-width">{{ data.name }}</span>
         </slot>
       </span>
 
@@ -36,18 +36,19 @@
         <slot name="message" v-show="!isMax"></slot>
         <slot name="debugStepCode"></slot>
 
-        <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
-          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="(data.disabled && !data.root) || !showVersion" style="width: 30px"/>
-        </el-tooltip>
-
         <slot name="button" v-if="showVersion"></slot>
 
+        <el-tooltip :content="$t('test_resource_pool.enable_disable')" placement="top" v-if="showBtn">
+          <el-switch v-model="data.enable" class="enable-switch" size="mini" :disabled="(data.disabled && !data.root) || !showVersion"/>
+        </el-tooltip>
+
         <el-button v-if="showVersion && showCopy" size="mini" icon="el-icon-copy-document" circle @click="copyRow"
                    style="padding: 5px"
                    :disabled="(data.disabled && !data.root) || !showVersion "/>
 
         <el-button v-show="isSingleButton" size="mini" icon="el-icon-delete" type="danger" style="padding: 5px" circle @click="remove"
                    :disabled="(data.disabled && !data.root) || !showVersion "/>
+
         <step-extend-btns style="display: contents"
                           :data="data"
                           :environmentType="environmentType"
@@ -63,7 +64,7 @@
 
     </div>
     <!--最大化不显示具体内容-->
-    <div class="header" v-if="!isMax">
+    <div v-if="!isMax">
       <el-collapse-transition>
         <!-- 这里的组件默认不展开时不加载 -->
         <div v-if="data.active && showCollapse" :draggable="draggable">
@@ -261,7 +262,7 @@ export default {
 }
 
 .el-icon-arrow-right {
-  margin-right: 5px;
+  margin-right: 3px;
 }
 
 .ms-left-btn {
@@ -269,14 +270,19 @@ export default {
   margin-left: 0px;
 }
 
+.ms-base-header{
+  min-height: 26px;
+}
 .header-right {
-  margin-top: 0px;
+  margin-top: 1px;
   float: right;
   z-index: 1;
 }
 
 .enable-switch {
-  margin-right: 10px;
+  margin: 0px 5px 0px;
+  padding-bottom: 2px;
+  width: 30px;
 }
 
 .scenario-version {
@@ -321,7 +327,7 @@ export default {
 .scenario-name {
   display: inline-block;
   font-size: 13px;
-  margin: 0 5px;
+  margin: 0 0px;
   /*overflow-x: hidden;*/
   overflow-x: auto;
   overflow-y: hidden;
@@ -364,7 +370,7 @@ export default {
 .scenario-unscroll {
   display: inline-block;
   font-size: 13px;
-  margin: 0 5px;
+  margin: 0 0px;
   overflow-x: hidden;
   /*overflow-x: auto;*/
   overflow-y: hidden;
@@ -395,6 +401,7 @@ fieldset {
 }
 
 .ms-step-name-width {
+  font-size: 12px;
   display: inline-block;
   margin: 0 0px;
   overflow-x: hidden;
@@ -404,5 +411,10 @@ fieldset {
   white-space: nowrap;
   width: 60px;
 }
-
+.ms-base-card{
+  min-height: 36px;
+}
+.is-text{
+  margin-right: 5px;
+}
 </style>

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

@@ -30,11 +30,11 @@
       </template>
 
       <template v-slot:behindHeaderLeft>
-        <el-tag size="mini" class="ms-tag" v-if="request.referenced==='Deleted'" type="danger">
+        <el-tag size="small" 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'">{{
+        <el-tag size="small" class="ms-tag" v-if="request.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
+        <el-tag size="small" class="ms-tag" v-if="request.referenced ==='REF'">{{
             $t('api_test.scenario.reference')
           }}
         </el-tag>
@@ -59,7 +59,7 @@
       </template>
       <template v-slot:button v-if="!ifFromVariableAdvance">
         <el-tooltip :content="$t('api_test.run')" placement="top" v-if="!loading">
-          <el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" style="padding: 5px" class="ms-btn" size="mini" circle/>
+          <el-button :disabled="!request.enable" @click="run" icon="el-icon-video-play" class="ms-btn" size="mini" circle/>
         </el-tooltip>
         <el-tooltip :content="$t('report.stop_btn')" placement="top" :enterable="false" v-else>
           <el-button @click.once="stop" size="mini" style="color:white;padding: 0 0.1px;width: 24px;height: 24px;"
@@ -706,10 +706,6 @@ export default {
   color: #409EFF;
 }
 
-/deep/ .el-card__body {
-  padding: 6px 10px;
-}
-
 .icon.is-active {
   transform: rotate(90deg);
 }
@@ -720,17 +716,18 @@ export default {
 }
 
 .ms-btn {
+  padding: 5px;
   background-color: #409EFF;
   color: white;
 }
 
-.ms-btn-flot {
+.ms-btn-float {
   margin: 20px;
   float: right;
 }
 
 .ms-step-name-api {
-  padding-left: 10px;
+  padding-left: 5px;
 }
 
 .ms-tag {

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

@@ -31,9 +31,9 @@
     </template>
 
     <template v-slot:behindHeaderLeft>
-      <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>
+      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Deleted'" type="danger">{{ $t('api_test.automation.reference_deleted') }}</el-tag>
+      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='Copy'">{{ $t('commons.copy') }}</el-tag>
+      <el-tag size="small" class="ms-tag" v-if="scenario.referenced==='REF'">{{ $t('api_test.scenario.reference') }}</el-tag>
       <span class="ms-tag ms-step-name-api">{{ getProjectName(scenario.projectId) }}</span>
     </template>
     <template v-slot:debugStepCode>
@@ -339,7 +339,7 @@ export default {
 }
 
 .ms-step-name-api {
-  padding-left: 10px;
+  padding-left: 5px;
 }
 
 .ms-tag {

frontend/src/business/components/api/definition/components/assertion/ScenarioAssertions.vue

@@ -15,7 +15,6 @@
     background-color="#F7E6E9"
     :title="$t('api_test.definition.request.scenario_assertions')">
 
-    <el-card :draggable="true">
     <el-row>
       <span>{{ $t('api_test.request.assertions.description') }}</span>
       <span style="float: right">
@@ -106,7 +105,6 @@
       @addSuggest="addJsonPathSuggest"
       ref="jsonpathSuggest"/>
 
-    </el-card>
   </api-base-component>
 </template>
 
@@ -278,8 +276,12 @@ export default {
   .icon.is-active {
     transform: rotate(90deg);
   }
-
-/deep/ .el-card__body {
-  padding: 6px 10px;
+  /deep/ .header-right{
+    margin-top: 4px;
+  }
+  /deep/.enable-switch{
+    margin: 0px 0px 0px;
+    padding-bottom: 3px;
+    width: 30px;
   }
 </style>