feat(接口场景): 场景执行&查看报告

frontend/src/api/modules/api-test/scenario.ts

@@ -13,6 +13,7 @@ import {
   DeleteModuleUrl,
   DeleteScenarioUrl,
   ExecuteHistoryUrl,
+  ExecuteScenarioUrl,
   GetModuleCountUrl,
   GetModuleTreeUrl,
   GetScenarioStepUrl,
@@ -225,3 +226,8 @@ export function uploadTempFile(file: File) {
 export function debugScenario(data: ApiScenarioDebugRequest) {
   return MSR.post({ url: DebugScenarioUrl, data });
 }
+
+// 场景执行
+export function executeScenario(data: ApiScenarioDebugRequest) {
+  return MSR.post({ url: ExecuteScenarioUrl, data });
+}

frontend/src/api/requrls/api-test/scenario.ts

@@ -13,7 +13,8 @@ export const RecycleScenarioUrl = '/api/scenario/delete-to-gc'; // 删除接口
 export const ScenarioUploadTempFileUrl = '/api/scenario/upload/temp/file'; // 接口场景上传临时文件
 export const ScenarioTransferFileUrl = '/api/scenario/transfer'; // 接口场景临时文件转存
 export const ScenarioTransferModuleOptionsUrl = '/api/scenario/transfer/options'; // 接口场景临时文件转存目录
-export const DebugScenarioUrl = '/api/scenario/debug'; // 接口场景调试
+export const DebugScenarioUrl = '/api/scenario/debug'; // 接口场景调试（不保存报告）
+export const ExecuteScenarioUrl = '/api/scenario/run'; // 接口场景执行（保存报告）
 export const BatchRecycleScenarioUrl = '/api/scenario/batch-operation/delete-gc'; // 批量删除接口场景
 export const BatchMoveScenarioUrl = '/api/scenario/batch-operation/move'; // 批量移动接口场景
 export const BatchCopyScenarioUrl = '/api/scenario/batch-operation/copy'; // 批量复制接口场景

frontend/src/views/api-test/components/condition/list.vue

@@ -7,7 +7,7 @@
     item-key-field="id"
     :disabled="props.disabled"
     :item-border="false"
-    class="h-full rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]"
+    class="h-full overflow-hidden rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]"
     item-class="mb-[4px] bg-white !p-[4px_8px]"
     :item-more-actions="moreActions"
     active-item-class="!bg-[rgb(var(--primary-1))] text-[rgb(var(--primary-5))]"

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

@@ -443,13 +443,6 @@
 
     margin-top: 8px;
     height: calc(100% - 88px);
-    .response-header-pre {
-      @apply h-full overflow-auto  bg-white;
-      .ms-scroll-bar();
-
-      padding: 8px 12px;
-      border-radius: var(--border-radius-small);
-    }
   }
   :deep(.arco-table-th) {
     background-color: var(--color-text-n9);

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

@@ -127,13 +127,6 @@
   .response-container {
     margin-top: 8px;
     height: calc(100% - 48px);
-    .response-header-pre {
-      @apply h-full overflow-auto bg-white;
-      .ms-scroll-bar();
-
-      padding: 8px 12px;
-      border-radius: var(--border-radius-small);
-    }
   }
   :deep(.arco-table-th) {
     background-color: var(--color-text-n9);

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="h-full rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]">
+  <div class="h-full overflow-hidden rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]">
     <pre class="response-header-pre">{{ getResponsePreContent(props.activeTab) }}</pre>
   </div>
 </template>
@@ -8,8 +8,6 @@
   /**
    * @description (共用) 请求头 || 提取 || 真实请求
    */
-  import { ref } from 'vue';
-
   import { useI18n } from '@/hooks/useI18n';
 
   import { RequestResult } from '@/models/apiTest/common';
@@ -40,4 +38,12 @@
   }
 </script>
 
-<style scoped></style>
+<style lang="less" scoped>
+  .response-header-pre {
+    @apply h-full overflow-auto bg-white;
+    .ms-scroll-bar();
+
+    padding: 8px 12px;
+    border-radius: var(--border-radius-small);
+  }
+</style>

frontend/src/views/api-test/scenario/components/step/index.vue

@@ -124,11 +124,13 @@
   import stepTree from './stepTree.vue';
 
   import { useI18n } from '@/hooks/useI18n';
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
   import { deleteNodes, filterTree, getGenerateId } from '@/utils';
   import { countNodes } from '@/utils/tree';
 
   import { ApiScenarioDebugRequest, Scenario } from '@/models/apiTest/scenario';
   import { ScenarioExecuteStatus } from '@/enums/apiEnum';
+  import { ApiTestRouteEnum } from '@/enums/routeEnum';
 
   const props = defineProps<{
     isNew?: boolean; // 是否新建
@@ -138,6 +140,7 @@
   }>();
 
   const { t } = useI18n();
+  const { openNewPage } = useOpenNewPage();
 
   const scenario = defineModel<Scenario>('scenario', {
     required: true,
@@ -226,7 +229,9 @@
   }
 
   function checkReport() {
-    console.log('查看报告');
+    openNewPage(ApiTestRouteEnum.API_TEST_REPORT, {
+      reportId: scenario.value.reportId,
+    });
   }
 
   function refreshStepInfo() {

frontend/src/views/api-test/scenario/components/step/stepTree.vue

@@ -179,7 +179,7 @@
               <responseResult
                 :active-tab="ResponseComposition.BODY"
                 :request-result="props.stepResponses?.[step.id]"
-                :console="props.stepResponses?.[step.id].console"
+                :console="props.stepResponses?.[step.id]?.console"
                 :show-empty="false"
                 :is-edit="false"
                 is-definition

frontend/src/views/api-test/scenario/index.vue

@@ -70,11 +70,11 @@
         ref="createRef"
         v-model:scenario="activeScenarioTab"
         :module-tree="folderTree"
-        @batch-debug="realExecute"
+        @batch-debug="realExecute($event, false)"
       ></create>
     </div>
     <div v-else class="pageWrap">
-      <detail v-model:scenario="activeScenarioTab" @batch-debug="realExecute"></detail>
+      <detail v-model:scenario="activeScenarioTab" @batch-debug="realExecute($event, false)"></detail>
     </div>
   </MsCard>
 </template>
@@ -102,6 +102,7 @@
   import {
     addScenario,
     debugScenario,
+    executeScenario,
     getScenarioDetail,
     getTrashModuleCount,
     updateScenario,
@@ -336,6 +337,7 @@
 
   async function realExecute(
     executeParams: Pick<ApiScenarioDebugRequest, 'steps' | 'stepDetails' | 'reportId'>,
+    isExecute?: boolean,
     executeType?: 'localExec' | 'serverExec',
     localExecuteUrl?: string
   ) {
@@ -348,8 +350,10 @@
       activeScenarioTab.value.executeFailCount = 0;
       activeScenarioTab.value.stepResponses = {};
       activeScenarioTab.value.reportId = executeParams.reportId; // 存储报告ID
-      activeScenarioTab.value.isDebug = true;
+      activeScenarioTab.value.isDebug = !isExecute;
-      const res = await debugScenario({
+      let res;
+      if (isExecute && executeType !== 'localExec') {
+        res = await executeScenario({
           id: activeScenarioTab.value.id,
           grouped: false,
           environmentId: currentEnvConfig.value?.id || '',
@@ -359,6 +363,19 @@
           linkFileIds: activeScenarioTab.value.linkFileIds,
           ...executeParams,
         });
+      } else {
+        res = await debugScenario({
+          id: activeScenarioTab.value.id,
+          grouped: false,
+          environmentId: currentEnvConfig.value?.id || '',
+          projectId: appStore.currentProjectId,
+          scenarioConfig: activeScenarioTab.value.scenarioConfig,
+          uploadFileIds: activeScenarioTab.value.uploadFileIds,
+          linkFileIds: activeScenarioTab.value.linkFileIds,
+          frontendDebug: executeType === 'localExec',
+          ...executeParams,
+        });
+      }
       if (executeType === 'localExec' && localExecuteUrl) {
         await localExecuteApiDebug(localExecuteUrl, res);
       }
@@ -385,6 +402,7 @@
         stepDetails: waitingDebugStepDetails,
         reportId: getGenerateId(),
       },
+      true,
       executeType,
       localExecuteUrl
     );