fix(接口测试): case编辑页面-创建人被遮挡且这行操作未对齐

--bug=1029021 --user=白奇 【接口测试】case编辑页面-创建人被遮挡且这行操作未对齐 https://www.tapd.cn/55049933/s/1408479

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

@@ -2,11 +2,8 @@
   <el-card style="margin-top: 5px" @click.native="selectTestCase(apiCase, $event)" v-loading="saveLoading">
     <el-container>
       <el-header style="margin-bottom: 20px">
-        <div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader">
+        <div @click="active(apiCase)" v-if="type !== 'detail'" ref="elementHeader" class="case-header">
-          <el-row>
+          <div v-loading="loading && !(apiCase.active || type === 'detail')">
-            <el-col
-              :span="api.protocol === 'HTTP' ? 4 : 8"
-              v-loading="loading && !(apiCase.active || type === 'detail')">
             <span @click.stop>
               <i class="icon el-icon-arrow-right" :class="{ 'is-active': apiCase.active }" @click="active(apiCase)" />
               <el-input
@@ -33,20 +30,16 @@
 
                 <i class="el-icon-edit" style="cursor: pointer" @click="showInput(apiCase)" />
               </span>
-
-                <el-link type="primary" style="margin-left: 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
-                  $t('operating_log.change_history')
-                }}</el-link>
             </span>
-              <div v-if="apiCase.id" style="color: #999999; font-size: 12px">
+            <div v-if="apiCase.id" style="color: #999999; font-size: 12px;margin-top: 8px;">
               <span style="margin-left: 10px">
                 {{ apiCase.updateTime | datetimeFormat }}
                 {{ apiCase.updateUser }}
                 {{ $t('api_test.definition.request.update_info') }}
               </span>
             </div>
-            </el-col>
+          </div>
-            <el-col :span="2">
+          <div class="flex-item">
             <el-select
               size="mini"
               v-model="apiCase.priority"
@@ -55,37 +48,17 @@
               :disabled="readonly">
               <el-option v-for="grd in priorities" :key="grd.id" :label="grd.name" :value="grd.id" />
             </el-select>
-            </el-col>
-            <el-col :span="api.protocol === 'HTTP' ? 4 : 0">
-              <span v-if="api.protocol === 'HTTP'">
-                <el-tag
-                  size="mini"
-                  :style="{
-                    'background-color': getColor(true, apiCase.request.method),
-                    border: getColor(true, apiCase.request.method),
-                  }"
-                  class="api-el-tag">
-                  {{ apiCase.request.method }}
-                </el-tag>
-                <el-tooltip :content="apiCase.request.path">
-                  <span class="ms-col-name">{{ apiCase.request.path }}</span>
-                </el-tooltip>
-              </span>
-            </el-col>
-            <el-col :span="5">
-              <el-row>
-                <el-col :span="8">
             <el-select
-                    size="small"
+              size="mini"
               v-model="apiCase.caseStatus"
-                    style="margin-right: 5px"
+              style="margin: 0 12px; width: 100px"
               @change="saveTestCase(apiCase, true)"
               :disabled="readonly">
               <el-option v-for="item in options" :key="item.id" :label="$t(item.label)" :value="item.id" />
             </el-select>
-                </el-col>
+          </div>
-                <el-col :span="16">
+          <div class="flex-item">
-                  <div class="tag-item" @click.stop>
+            <div @click.stop>
               <el-tooltip
                 :content="$t('commons.follow')"
                 placement="bottom"
@@ -116,20 +89,7 @@
                   v-if="showFollow" />
               </el-tooltip>
             </div>
-                </el-col>
+            <div class="flex-item">
-              </el-row>
-              <el-row style="margin-top: 5px">
-                <div class="tag-item" @click.stop>
-                  <ms-input-tag
-                    :currentScenario="apiCase"
-                    ref="tag"
-                    @keyup.enter.native="saveTestCase(apiCase, true)"
-                    :read-only="readonly" />
-                </div>
-              </el-row>
-            </el-col>
-
-            <el-col :span="3">
               <span @click.stop v-if="!loaded">
                 <ms-tip-button
                   @click="singleRun(apiCase)"
@@ -155,24 +115,35 @@
                   </el-button>
                 </el-tooltip>
               </span>
-              <span @click.stop>
+              <span style="margin-right: 12px" @click.stop>
                 <ms-api-extend-btns :is-case-edit="isCaseEdit" :environment="environment" :row="apiCase" />
               </span>
-            </el-col>
-
-            <el-col :span="4">
               <ms-api-report-status :status="apiCase.execResult" />
-              <div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px">
+            </div>
+            <div v-if="apiCase.id" style="color: #999999; font-size: 12px; padding: 5px; margin-left: 12px">
               <span> {{ apiCase.execTime | datetimeFormat }}</span>
               {{ apiCase.updateUser }}
             </div>
-            </el-col>
+          </div>
-            <el-col :span="2">
+          <div class="flex-item">
+            <el-link type="primary" style="margin: 0 10px" @click="openHis(apiCase)" v-if="apiCase.id">{{
+              $t('operating_log.change_history')
+            }}</el-link>
             <el-link style="float: right" type="primary" @click.stop @click="showHistory(apiCase.id)">
               {{ $t('commons.execute_history') }}
             </el-link>
-            </el-col>
+          </div>
-          </el-row>
+          <div class="flex-item" style="margin-top: 12px; width: 100%">
+            <div class="tag-item" style="width: 100%" @click.stop>
+              <ms-input-tag
+                :currentScenario="apiCase"
+                ref="tag"
+                style="width: 100%"
+                @keyup.enter.native="saveTestCase(apiCase, true)"
+                :maxShowTagLength="10"
+                :read-only="readonly" />
+            </div>
+          </div>
         </div>
       </el-header>
       <el-main :style="{ height: componentHeight + 'px' }">
@@ -1011,7 +982,16 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.flex-item {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+.case-header {
+  @extend .flex-item;
+}
 .ms-api-select {
   margin-left: 10px;
   width: 65px;