fix(接口测试): 用例详情的响应结果展示状态码、响应时间、响应大小

--bug=1038129 --user=吕梦园【接口测试】定义-用例列表-操作点击执行-响应结果未展示状态码、响应时间、响应大小
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001038129

frontend/src/views/api-test/components/requestComposition/response/index.vue

@@ -58,65 +58,7 @@
         </div>
       </slot>
       <slot name="titleRight"></slot>
-      <div
+      <responseCodeTimeSize :request-result="props.requestResult" />
-        v-if="props.requestResult?.responseResult?.responseCode"
-        class="flex items-center justify-between gap-[24px] text-[14px]"
-      >
-        <a-popover position="left" content-class="response-popover-content">
-          <div class="one-line-text max-w-[200px]" :style="{ color: statusCodeColor }">
-            {{ props.requestResult.responseResult.responseCode }}
-          </div>
-          <template #content>
-            <div class="flex items-center gap-[8px] text-[14px]">
-              <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.statusCode') }}</div>
-              <div :style="{ color: statusCodeColor }">
-                {{ props.requestResult.responseResult.responseCode }}
-              </div>
-            </div>
-          </template>
-        </a-popover>
-        <a-popover position="left" content-class="w-[400px]">
-          <div class="one-line-text text-[rgb(var(--success-7))]"> {{ timingInfo?.responseTime }} ms </div>
-          <template #content>
-            <div class="mb-[8px] flex items-center gap-[8px] text-[14px]">
-              <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.responseTime') }}</div>
-              <div class="text-[rgb(var(--success-7))]"> {{ timingInfo?.responseTime }} ms </div>
-            </div>
-            <responseTimeLine v-if="timingInfo" :response-timing="timingInfo" />
-          </template>
-        </a-popover>
-        <a-popover position="left" content-class="response-popover-content">
-          <div class="one-line-text text-[rgb(var(--success-7))]">
-            {{ props.requestResult.responseResult.responseSize }} bytes
-          </div>
-          <template #content>
-            <div class="flex items-center gap-[8px] text-[14px]">
-              <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.responseSize') }}</div>
-              <div class="one-line-text text-[rgb(var(--success-7))]">
-                {{ props.requestResult.responseResult.responseSize }} bytes
-              </div>
-            </div>
-          </template>
-        </a-popover>
-        <!-- <a-popover position="left" content-class="response-popover-content">
-          <div class="text-[var(--color-text-1)]">{{ props.request.response.env }}</div>
-          <template #content>
-            <div class="flex items-center gap-[8px] text-[14px]">
-              <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.runningEnv') }}</div>
-              <div class="text-[var(--color-text-1)]">{{ props.request.response.env }}</div>
-            </div>
-          </template>
-        </a-popover>
-        <a-popover position="left" content-class="response-popover-content">
-          <div class="text-[var(--color-text-1)]">{{ props.request.response.resource }}</div>
-          <template #content>
-            <div class="flex items-center gap-[8px] text-[14px]">
-              <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.resourcePool') }}</div>
-              <div class="text-[var(--color-text-1)]">{{ props.request.response.resource }}</div>
-            </div>
-          </template>
-        </a-popover> -->
-      </div>
     </div>
     <a-spin
       :loading="props.loading"
@@ -148,8 +90,8 @@
   import MsButton from '@/components/pure/ms-button/index.vue';
   import type { Direction } from '@/components/pure/ms-split-box/index.vue';
   import edit, { ResponseItem } from './edit.vue';
+  import responseCodeTimeSize from './responseCodeTimeSize.vue';
   import result from './result.vue';
-  import responseTimeLine from '@/views/api-test/components/responseTimeLine.vue';
 
   import { useI18n } from '@/hooks/useI18n';
 
@@ -200,46 +142,6 @@
   const innerResponseDefinition = defineModel<ResponseItem[]>('responseDefinition', {
     default: [],
   });
-  // 响应时间信息
-  const timingInfo = computed(() => {
-    if (props.requestResult) {
-      const {
-        dnsLookupTime,
-        downloadTime,
-        latency,
-        responseTime,
-        socketInitTime,
-        sslHandshakeTime,
-        tcpHandshakeTime,
-        transferStartTime,
-      } = props.requestResult.responseResult;
-      return {
-        dnsLookupTime,
-        tcpHandshakeTime,
-        sslHandshakeTime,
-        socketInitTime,
-        latency,
-        downloadTime,
-        transferStartTime,
-        responseTime,
-      };
-    }
-    return null;
-  });
-  // 响应状态码对应颜色
-  const statusCodeColor = computed(() => {
-    if (props.requestResult) {
-      const code = props.requestResult.responseResult.responseCode;
-      if (code >= 200 && code < 300) {
-        return 'rgb(var(--success-7)';
-      }
-      if (code >= 300 && code < 400) {
-        return 'rgb(var(--warning-7)';
-      }
-      return 'rgb(var(--danger-7)';
-    }
-    return '';
-  });
   watchEffect(() => {
     // 过滤无效数据后的有效响应数据；当接口导入时会存在部分字段为 null 的数据，需要设置默认值
     let hasInvalid = false;
@@ -312,18 +214,6 @@
   );
 </script>
 
-<style lang="less">
-  .response-popover-content {
-    padding: 4px 8px;
-    .arco-popover-content {
-      @apply mt-0;
-
-      font-size: 14px;
-      line-height: 22px;
-    }
-  }
-</style>
-
 <style lang="less" scoped>
   .response-head {
     @apply flex flex-wrap items-center justify-between border-b;

frontend/src/views/api-test/components/requestComposition/response/responseCodeTimeSize.vue

@@ -0,0 +1,110 @@
+<template>
+  <div
+    v-if="props.requestResult?.responseResult?.responseCode"
+    class="flex items-center justify-between gap-[24px] text-[14px]"
+  >
+    <a-popover position="left" content-class="response-popover-content">
+      <div class="one-line-text max-w-[200px]" :style="{ color: statusCodeColor }">
+        {{ props.requestResult.responseResult.responseCode }}
+      </div>
+      <template #content>
+        <div class="flex items-center gap-[8px] text-[14px]">
+          <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.statusCode') }}</div>
+          <div :style="{ color: statusCodeColor }">
+            {{ props.requestResult.responseResult.responseCode }}
+          </div>
+        </div>
+      </template>
+    </a-popover>
+    <a-popover position="left" content-class="w-[400px]">
+      <div class="one-line-text text-[rgb(var(--success-7))]"> {{ timingInfo?.responseTime }} ms </div>
+      <template #content>
+        <div class="mb-[8px] flex items-center gap-[8px] text-[14px]">
+          <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.responseTime') }}</div>
+          <div class="text-[rgb(var(--success-7))]"> {{ timingInfo?.responseTime }} ms </div>
+        </div>
+        <responseTimeLine v-if="timingInfo" :response-timing="timingInfo" />
+      </template>
+    </a-popover>
+    <a-popover position="left" content-class="response-popover-content">
+      <div class="one-line-text text-[rgb(var(--success-7))]">
+        {{ props.requestResult.responseResult.responseSize }} bytes
+      </div>
+      <template #content>
+        <div class="flex items-center gap-[8px] text-[14px]">
+          <div class="text-[var(--color-text-4)]">{{ t('apiTestDebug.responseSize') }}</div>
+          <div class="one-line-text text-[rgb(var(--success-7))]">
+            {{ props.requestResult.responseResult.responseSize }} bytes
+          </div>
+        </div>
+      </template>
+    </a-popover>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import responseTimeLine from '@/views/api-test/components/responseTimeLine.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { RequestResult } from '@/models/apiTest/common';
+
+  const props = defineProps<{
+    requestResult?: RequestResult;
+  }>();
+
+  const { t } = useI18n();
+
+  // 响应时间信息
+  const timingInfo = computed(() => {
+    if (props.requestResult) {
+      const {
+        dnsLookupTime,
+        downloadTime,
+        latency,
+        responseTime,
+        socketInitTime,
+        sslHandshakeTime,
+        tcpHandshakeTime,
+        transferStartTime,
+      } = props.requestResult.responseResult;
+      return {
+        dnsLookupTime,
+        tcpHandshakeTime,
+        sslHandshakeTime,
+        socketInitTime,
+        latency,
+        downloadTime,
+        transferStartTime,
+        responseTime,
+      };
+    }
+    return null;
+  });
+  // 响应状态码对应颜色
+  const statusCodeColor = computed(() => {
+    if (props.requestResult) {
+      const code = props.requestResult.responseResult.responseCode;
+      if (code >= 200 && code < 300) {
+        return 'rgb(var(--success-7)';
+      }
+      if (code >= 300 && code < 400) {
+        return 'rgb(var(--warning-7)';
+      }
+      return 'rgb(var(--danger-7)';
+    }
+    return '';
+  });
+</script>
+
+<style lang="less">
+  .response-popover-content {
+    padding: 4px 8px;
+    .arco-popover-content {
+      @apply mt-0;
+
+      font-size: 14px;
+      line-height: 22px;
+    }
+  }
+</style>

frontend/src/views/api-test/management/components/management/api/preview/detail.vue

@@ -244,6 +244,7 @@
       key="response"
     >
       <template #header>
+        <div class="flex items-center justify-between">
           <div class="flex items-center gap-[4px]">
             <div v-if="activeDetailKey.includes('response')" class="down-icon">
               <icon-down :size="10" class="block" />
@@ -253,6 +254,8 @@
             </div>
             <div class="font-medium">{{ t('apiTestManagement.responseContent') }}</div>
           </div>
+          <responseCodeTimeSize v-if="props.isCase" :request-result="previewDetail.response?.requestResults[0]" />
+        </div>
       </template>
       <template v-if="!props.isCase">
         <MsEditableTab
@@ -346,6 +349,7 @@
   import MsFormTable, { FormTableColumn } from '@/components/pure/ms-form-table/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import { ResponseItem } from '@/views/api-test/components/requestComposition/response/edit.vue';
+  import responseCodeTimeSize from '@/views/api-test/components/requestComposition/response/responseCodeTimeSize.vue';
   import result from '@/views/api-test/components/requestComposition/response/result.vue';
 
   import { getPluginScript } from '@/api/modules/api-test/common';