refactor: 用例列表页面优化

frontend/src/business/components/api/automation/scenario/MsInputTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <input-tag v-model="data" placeholder="输入回车添加" class="ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
+  <input-tag v-model="data" placeholder="输入回车添加" class="ms-tag-input ms-input-div ms-input-tag-wrapper ms-input ms-input-remove"></input-tag>
 </template>
 
 <script>

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

@@ -2,10 +2,12 @@
   <el-card class="api-component">
     <div class="header" @click="active(data)">
 
+      <slot name="beforeHeaderLeft">
         <div v-if="data.index" class="el-step__icon is-text" style="margin-right: 10px;" :style="{'color': color, 'background-color': backgroundColor}">
           <div class="el-step__icon-inner">{{data.index}}</div>
         </div>
         <el-button class="ms-left-buttion" size="small" :style="{'color': color, 'background-color': backgroundColor}">{{title}}</el-button>
+      </slot>
 
       <span @click.stop>
         <slot name="headerLeft">

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

@@ -1,5 +1,6 @@
 <template>
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase,$event)">
+    <div @click="active(apiCase)">
       <el-row>
         <el-col :span="4">
 
@@ -14,20 +15,18 @@
             <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id"/>
           </el-select>
         </el-col>
-      <el-col :span="12">
+
-        <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}"
+        <el-col :span="8">
-           @click="active(apiCase)"/>
+          <span @click.stop>
+            <i class="icon el-icon-arrow-right" :class="{'is-active': apiCase.active}" @click="active(apiCase)"/>
             <el-input v-if="!apiCase.id || isShowInput" size="small" v-model="apiCase.name" :name="index" :key="index"
                       class="ms-api-header-select" style="width: 180px"
-                  @blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')"/>
+                      @blur="saveTestCase(apiCase)" :placeholder="$t('commons.input_name')" ref="nameEdit"/>
             <span v-else>
               {{ apiCase.id ? apiCase.name : '' }}
               <i class="el-icon-edit" style="cursor:pointer" @click="showInput(apiCase)" v-tester/>
             </span>
-
+          </span>
-        <label class="ms-api-label" style="padding-left: 20px; padding-right: 20px;">{{ $t('commons.tag') }}</label>
-        <ms-input-tag :currentScenario="apiCase" ref="tag" style="float: right;margin-right: 215px;margin-top: -3px;" @keyup.enter.native="saveTestCase(apiCase)"/>
-
           <div v-if="apiCase.id" style="color: #999999;font-size: 12px">
           <span>
             {{ apiCase.createTime | timestampFormatDate }}
@@ -40,6 +39,11 @@
           </div>
         </el-col>
 
+        <el-col class="tag-item" :span="4">
+          <span class="ms-api-label tag-label">{{ $t('commons.tag') }}</span>
+          <ms-input-tag :currentScenario="apiCase" ref="tag" @keyup.enter.native="saveTestCase(apiCase)"/>
+        </el-col>
+
         <el-col :span="4">
           <ms-tip-button @click="singleRun(apiCase)" :tip="$t('api_test.run')" icon="el-icon-video-play"
                          style="background-color: #409EFF;color: white" size="mini" :disabled="!apiCase.id" circle v-tester/>
@@ -65,6 +69,8 @@
           </div>
         </el-col>
       </el-row>
+    </div>
+
     <!-- 请求参数-->
     <el-collapse-transition>
       <div v-if="apiCase.active">
@@ -241,6 +247,9 @@
         this.isShowInput = true;
         row.active = true;
         this.active(row);
+        this.$nextTick(() => {
+          this.$refs.nameEdit.focus();
+        });
       },
       active(item) {
         item.active = !item.active;
@@ -304,4 +313,20 @@
   .is-selected {
     background: #EFF7FF;
   }
+
+  .ms-tag-input {
+    /*display: inline-block;*/
+    /*height: 32px;*/
+    /*box-sizing: border-box;*/
+  }
+
+  .tag-item {
+    /*height: 30px;*/
+    /*line-height: 30px;*/
+  }
+
+  .tag-label {
+    /*height: 32px;*/
+    /*line-height: 32px;*/
+  }
 </style>