fix(接口测试): 修复报告布局问题

api-test/frontend/src/business/automation/report/ApiReportViewHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <header class="report-header">
-    <el-row>
+    <div class="action-row">
-      <el-col>
+      <div>
         <span v-if="!debug">
           <el-input
             v-if="nameIsEdit"
@@ -33,33 +33,21 @@
           <span style="margin-left: 10px">{{ $t('report.test_end_time') }}：</span>
           <span class="time"> {{ report.endTime | datetimeFormat }}</span>
         </span>
-        <div style="float: right">
+      </div>
-          <el-button
+      <div>
-            v-if="!isPlan && (!debug || exportFlag) && !isTemplate"
-            v-permission="['PROJECT_API_REPORT:READ+EXPORT']"
-            :disabled="isReadOnly"
-            class="export-button"
-            plain
-            type="primary"
-            size="mini"
-            @click="handleExport(report.name)"
-            style="margin-right: 10px">
-            {{ $t('test_track.plan_view.export_report') }}
-          </el-button>
-
         <el-popover
           v-if="!isPlan && (!debug || exportFlag) && !isTemplate"
           v-permission="['PROJECT_PERFORMANCE_REPORT:READ+EXPORT']"
-            style="margin-right: 10px"
           placement="bottom"
           trigger="click"
           popperClass="ms-custom-message-class"
-            width="300">
+          width="300"
+          >
           <p>{{ shareUrl }}</p>
-            <span style="color: red; float: left; margin-left: 10px" v-if="application.typeValue">{{
+          <span style="color: red" v-if="application.typeValue">{{
             $t('commons.validity_period') + application.typeValue
           }}</span>
-            <div style="text-align: right; margin: 0">
+          <div>
             <el-button type="primary" size="mini" :disabled="!shareUrl" v-clipboard:copy="shareUrl"
               >{{ $t('commons.copy') }}
             </el-button>
@@ -70,51 +58,54 @@
             </el-button>
           </template>
         </el-popover>
-
+        <el-button class="btn-second" v-if="showCancelButton" size="mini" @click="returnView">
-          <el-button v-if="showRerunButton" class="rerun-button" plain size="mini" @click="rerun">
-            {{ $t('api_test.automation.rerun') }}
-          </el-button>
-
-          <el-button v-if="showCancelButton" class="export-button" plain size="mini" @click="returnView">
           {{ $t('commons.cancel') }}
         </el-button>
+        <el-button
+          v-if="!isPlan && (!debug || exportFlag) && !isTemplate"
+          v-permission="['PROJECT_API_REPORT:READ+EXPORT']"
+          :disabled="isReadOnly"
+          plain
+          type="primary"
+          size="mini"
+          class="btn-second"
+          @click="handleExport(report.name)">
+          {{ $t('test_track.plan_view.export_report') }}
+        </el-button>
+        <el-button class="btn-second" v-if="showRerunButton" plain size="mini" @click="rerun">
+          {{ $t('api_test.automation.rerun') }}
+        </el-button>
       </div>
-      </el-col>
+    </div>
-    </el-row>
+    <div class="content-row">
-    <el-row type="flex" style="margin-top: 5px;">
+      <div v-if="this.mode">
-      <el-col v-if="this.mode">
-        <div style="float: left">
         <span> {{ $t('report.run_model') + ':' }} </span>
-        </div>
+          <span style="color: #61c550">
-        <div style="color: #61c550; margin-left: 10px; float: left">
           {{ getModeName(this.mode) }}
+        </span>
       </div>
-      </el-col>
+      <div v-if="this.poolName">
-      <el-col v-if="this.poolName">
-        <div style="float: left">
         <span> {{ $t('load_test.select_resource_pool') + ':' }} </span>
-        </div>
+        <span style="color: #61c550;">
-        <div style="color: #61c550; margin-left: 10px; float: left">
           {{ this.poolName }}
+        </span>
       </div>
-      </el-col>
+    </div>
-      <el-col></el-col>
+    <div v-if="showProjectEnv" class="content-row">
-    </el-row>
-    <el-row v-if="showProjectEnv" type="flex" style="margin-top: 5px; padding-left: 10px;">
       <span> {{ $t('commons.environment') + ':' }} </span>
-      <div v-for="(values, key) in projectEnvMap" :key="key" style="margin-right: 10px">
+      <span v-for="(values, key) in projectEnvMap" :key="key">
         {{ key + ':' }}
         <ms-tag v-for="(item, index) in values" :key="index" type="success" :content="item" style="margin-left: 2px" />
+      </span>
     </div>
-    </el-row>
   </header>
 </template>
 
 <script>
 import { generateShareInfoWithExpired, getShareRedirectUrl } from '../../../api/share';
-import { getCurrentProjectID, getCurrentWorkspaceId } from 'metersphere-frontend/src/utils/token';
+import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token';
 import MsTag from 'metersphere-frontend/src/components/MsTag';
-import {apiProjectByScenarioId, getProjectApplicationConfig} from '../../../api/project';
+import { apiProjectByScenarioId, getProjectApplicationConfig } from '../../../api/project';
 import { apiTestReRun } from '../../../api/xpack';
 import { getUUID } from 'metersphere-frontend/src/utils';
 import { getApiScenarioIdByPlanScenarioId } from '@/api/test-plan';
@@ -140,8 +131,12 @@ export default {
       default: false,
     },
     isPlan: Boolean,
-    poolName: String,
+    poolName: {
-    mode: String,
+      type: String,
+    },
+    mode: {
+      type: String,
+    },
     isShare: Boolean,
   },
   computed: {
@@ -190,7 +185,7 @@ export default {
       let resourceId = this.scenarioId;
       getApiScenarioIdByPlanScenarioId(this.scenarioId).then((res) => {
         resourceId = res.data;
-          apiProjectByScenarioId(resourceId).then((response) =>{
+        apiProjectByScenarioId(resourceId).then((response) => {
           if (response.data) {
             let projectId = response.data.id;
             let workspaceId = response.data.workspaceId;
@@ -198,7 +193,7 @@ export default {
             let workspaceName = response.data.workspaceName;
             this.showDetails(resourceId, projectId, projectName, workspaceId, workspaceName);
           }
-          })
+        });
       });
     },
     showDetails(resourceId, projectId, projectName, workspaceId, workspaceName) {
@@ -275,24 +270,22 @@ export default {
 };
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
-.export-button {
-  float: right;
-  margin-right: 10px;
-}
-
-.rerun-button {
-  float: right;
-  margin-right: 10px;
-  background-color: #f2f9ef;
-  color: #87c45d;
-}
-
-.report-name {
-  border-bottom: 1px solid var(--primary_color);
-}
-
 .report-header {
   min-width: 1200px;
+  .btn-second {
+    margin-left: 10px;
+  }
+  .action-row{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .report-name {
+      border-bottom: 1px solid var(--primary_color);
+    }
+  }
+  .content-row{
+    margin-top: 5px;
+  }
 }
 </style>