feat(接口测试): 场景步骤-自定义步骤相关前端组件开发

frontend/src/locale/en-US/common.ts

@@ -140,5 +140,6 @@ export default {
   'common.batchDelete': 'Batch delete',
   'common.batchDebug': 'Batch debug',
   'common.quote': 'Quote',
+  'common.notQuote': 'Not quote',
   'common.execute': '执行',
 };

frontend/src/locale/zh-CN/common.ts

@@ -141,5 +141,6 @@ export default {
   'common.batchDelete': '批量删除',
   'common.batchDebug': '批量调试',
   'common.quote': '引用',
+  'common.notQuote': '不引用',
   'common.execute': '执行',
 };

frontend/src/models/apiTest/scenario.ts

@@ -1,8 +1,8 @@
 import { ApiDefinitionCustomField } from '@/models/apiTest/management';
-import { ApiScenarioStatus, RequestDefinitionStatus, RequestImportFormat, RequestImportType } from '@/enums/apiEnum';
+import { ApiScenarioStatus, RequestComposition, RequestDefinitionStatus, RequestImportFormat } from '@/enums/apiEnum';
 
 import { BatchApiParams, TableQueryParams } from '../common';
-import { ResponseDefinition } from './common';
+import { ExecuteApiRequestFullParams, ResponseDefinition } from './common';
 
 // 场景-更新模块参数
 export interface ApiScenarioModuleUpdateParams {
@@ -171,3 +171,9 @@ export interface ScenarioHistoryItem {
   createUserName: string;
   versionName: string;
 }
+
+export type CustomApiStep = ExecuteApiRequestFullParams & {
+  protocol: string;
+  activeTab: RequestComposition;
+  useEnv: string;
+};

frontend/src/views/api-test/scenario/components/scenarioModuleTree.vue

@@ -6,9 +6,17 @@
         :placeholder="t('apiScenario.tree.selectorPlaceholder')"
         allow-clear
       />
-      <a-button v-permission="['[PROJECT_API_SCENARIO:READ+ADD]']" type="primary" value="newScenario">{{
+      <a-button
-        t('apiScenario.createScenario')
+        v-permission="['[PROJECT_API_SCENARIO:READ+ADD]']"
-      }}</a-button>
+        type="primary"
+        value="newScenario"
+        @click="
+          () => {
+            emit('newScenario');
+          }
+        "
+        >{{ t('apiScenario.createScenario') }}</a-button
+      >
     </div>
     <div class="folder" @click="setActiveFolder('all')">
       <div :class="allFolderClass">
@@ -32,7 +40,7 @@
               />
             </MsButton>
             <template #content>
-              <a-doption value="newScenario">{{ t('apiScenario.createScenario') + '（暂未实现）' }}</a-doption>
+              <a-doption value="newScenario">{{ t('apiScenario.createScenario') }}</a-doption>
               <a-doption value="addModule">{{ t('apiScenario.createSubModule') }}</a-doption>
             </template>
           </a-dropdown>

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

@@ -192,7 +192,13 @@
       </a-button>
     </actionDropdown>
     <importApiDrawer v-model:visible="importApiDrawerVisible" />
-    <customApiDrawer v-model:visible="customApiDrawerVisible" />
+    <!-- todo  执行、上传文件、转存文件等需要传入相关方法； 当前场景环境使用的是假数据； add-step暂时只是将数据传递到当前组件的customDemoStep对象中，用于再次打开的时候测试编辑功能  -->
+    <customApiDrawer
+      v-model:visible="customApiDrawerVisible"
+      :env-detail-item="{ id: 'demp-id-112233', projectId: '123456', name: 'demo环境' }"
+      :request="customDemoStep"
+      @add-step="addCustomApiStep"
+    />
     <scriptOperationDrawer v-model:visible="scriptOperationDrawerVisible" />
   </div>
 </template>
@@ -223,6 +229,7 @@
   import useAppStore from '@/store/modules/app';
   import { deleteNode, findNodeByKey, getGenerateId, insertNode, mapTree } from '@/utils';
 
+  import { CustomApiStep } from '@/models/apiTest/scenario';
   import { RequestMethods, ScenarioAddStepActionType, ScenarioExecuteStatus, ScenarioStepType } from '@/enums/apiEnum';
 
   import { defaultStepItemCommon } from '../config';
@@ -535,6 +542,13 @@
     }
   }
 
+  const customDemoStep = ref<CustomApiStep>();
+
+  function addCustomApiStep(step: CustomApiStep) {
+    // todo: 添加自定义api步骤
+    customDemoStep.value = { ...step };
+  }
+
   defineExpose({
     checkAll,
   });

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

@@ -27,6 +27,7 @@
                 :is-show-scenario="isShowScenario"
                 @folder-node-select="handleNodeSelect"
                 @init="handleModuleInit"
+                @new-scenario="newTab"
               ></scenarioModuleTree>
             </div>
             <div class="flex-1">

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

@@ -1,4 +1,5 @@
 export default {
+  'apiScenario.env': 'Environment: {name}',
   'apiScenario.allScenario': 'All scenarios',
   'apiScenario.createScenario': 'Create scenario',
   'apiScenario.importScenario': 'Import scenario',

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

@@ -1,4 +1,5 @@
 export default {
+  'apiScenario.env': '当前环境：{name}',
   'apiScenario.allScenario': '全部场景',
   'apiScenario.createScenario': '新建场景',
   'apiScenario.importScenario': '导入场景',