fix(接口测试): 接口报告修改细节

frontend/src/views/api-test/report/component/scenarioCom.vue

@@ -6,7 +6,7 @@
     <!-- 报告分析，报告步骤分析和请求分析开始 -->
     <div class="analyze mb-1">
       <div class="analyze-item">
-        <div class="block-title">{{ t('report.detail.api.stepAnalysis') }}</div>
+        <div class="block-title">{{ t('report.detail.api.reportAnalysis') }}</div>
         <ReportMetricsItem
           v-for="analysisItem in reportAnalysisList"
           :key="analysisItem.name"
@@ -18,8 +18,8 @@
         <div class="block-title">{{ t('report.detail.api.stepAnalysis') }}</div>
         <SetReportChart
           :legend-data="stepAnalysisLegendData"
-          :options="charOptions"
-          :request-total="getIndicators(detail.requestTotal) || 0"
+          :options="stepCharOptions"
+          :request-total="getIndicators(detail.stepTotal) || 0"
         />
       </div>
       <!-- 请求分析 -->
@@ -27,7 +27,7 @@
         <div class="block-title">{{ t('report.detail.api.requestAnalysis') }}</div>
         <SetReportChart
           :legend-data="legendData"
-          :options="charOptions"
+          :options="requestCharOptions"
           :request-total="getIndicators(detail.requestTotal) || 0"
         />
       </div>
@@ -44,6 +44,7 @@
 
 <script setup lang="ts">
   import { ref } from 'vue';
+  import { cloneDeep } from 'lodash-es';
 
   import SetReportChart from './case/setReportChart.vue';
   import ReportDetailHeader from './reportDetailHeader.vue';
@@ -154,7 +155,7 @@
 
   const legendData = ref<LegendData[]>([]);
   const stepAnalysisLegendData = ref<LegendData[]>([]);
-  const charOptions = ref({
+  const defaultCharOptions = {
     tooltip: {
       show: false,
       trigger: 'item',
@@ -212,7 +213,9 @@
         },
       ],
     },
-  });
+  };
+  const stepCharOptions = ref(cloneDeep(defaultCharOptions));
+  const requestCharOptions = ref(cloneDeep(defaultCharOptions));
   const activeTab = ref<'tiled' | 'tab'>('tiled');
 
   function getRote(count: number, countTotal: number) {
@@ -250,7 +253,7 @@
       },
     ];
 
-    charOptions.value.series.data = tempArr.map((item: any) => {
+    requestCharOptions.value.series.data = tempArr.map((item: any) => {
       return {
         value: detail.value[item.value] || 0,
         name: t(item.label),
@@ -269,6 +272,18 @@
         rote: `${detail.value[item.rateKey] || 0}%`,
       };
     });
+    stepCharOptions.value.series.data = tempArr.map((item: any) => {
+      const valueName = `step${item.value.charAt(0).toUpperCase() + item.value.slice(1)}`;
+      return {
+        value: detail.value[valueName] || 0,
+        name: t(item.label),
+        itemStyle: {
+          color: item.color,
+          borderWidth: 2,
+          borderColor: '#ffffff',
+        },
+      };
+    });
     stepAnalysisLegendData.value = tempArr.map((item: any) => {
       const valueName = `step${item.value.charAt(0).toUpperCase() + item.value.slice(1)}`;
       return {

frontend/src/views/api-test/report/locale/en-US.ts

@@ -25,7 +25,8 @@ export default {
   'report.detail.api.resContent': 'Response content',
   'report.detail.api.executionTime': 'Execution time',
   'report.detail.api.executionTimeTo': 'To',
-  'report.detail.api.stepAnalysis': 'step Analysis',
+  'report.detail.api.stepAnalysis': 'Step analysis',
+  'report.detail.api.reportAnalysis': 'Report analysis',
   'report.detail.api.content': 'content',
   'report.detail.api.assertStatus': 'status',
   'report.detail.api.totalTime': 'Total report time',

frontend/src/views/api-test/report/locale/zh-CN.ts

@@ -25,6 +25,7 @@ export default {
   'report.detail.api.executionTime': '执行时间',
   'report.detail.api.executionTimeTo': '至',
   'report.detail.api.stepAnalysis': '步骤分析',
+  'report.detail.api.reportAnalysis': '报告分析',
   'report.detail.api.content': '内容',
   'report.detail.api.assertStatus': '状态',
   'report.detail.api.totalTime': '报告总耗时',

frontend/src/views/test-plan/report/detail/component/ReportMetricsItem.vue

@@ -7,7 +7,7 @@
         <MsIcon
           v-if="props.itemInfo.tip?.length"
           type="icon-icon-maybe_outlined"
-          class="ml-[8px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-5))]"
+          class="ml-[8px] text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
         />
       </a-tooltip>
       <MsTag