feat(接口测试): 下拉单选协议存上次值且分开存

frontend/src/enums/apiEnum.ts

@@ -345,7 +345,11 @@ export enum ReportExecStatus {
 }
 
 export enum ProtocolKeyEnum {
-  API_PROTOCOL = 'API_PROTOCOL',
+  API_MODULE_TREE_PROTOCOL = 'API_MODULE_TREE_PROTOCOL',
   TEST_PLAN_API_CASE_PROTOCOL = 'TEST_PLAN_API_CASE_PROTOCOL',
   ASSOCIATE_CASE_PROTOCOL = 'ASSOCIATE_CASE_PROTOCOL',
+  API_SCENARIO_IMPORT_PROTOCOL = 'API_SCENARIO_IMPORT_PROTOCOL',
+  API_SCENARIO_CUSTOM_PROTOCOL = 'API_SCENARIO_CUSTOM_PROTOCOL',
+  API_NEW_PROTOCOL = 'API_NEW_PROTOCOL',
+  API_DEBUG_NEW_PROTOCOL = 'API_DEBUG_NEW_PROTOCOL',
 }

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

@@ -479,6 +479,7 @@
   import { AddApiCaseParams } from '@/models/apiTest/management';
   import { ModuleTreeNode, TransferFileParams } from '@/models/common';
   import {
+    ProtocolKeyEnum,
     RequestAuthType,
     RequestBodyFormat,
     RequestCaseStatus,
@@ -536,6 +537,7 @@
 
   const props = defineProps<{
     request: RequestParam; // 请求参数集合
+    protocolKey?: ProtocolKeyEnum; // 用于记住协议下拉值
     moduleTree?: ModuleTreeNode[]; // 模块树
     isCase?: boolean; // 是否是用例引用的组件,只显示请求参数和响应内容,响应内容默认为空且折叠
     apiDetail?: RequestParam; // 用例引用的时候需要接口定义的数据
@@ -868,7 +870,9 @@
         requestVModel.value.method = RequestMethods.GET;
       }
     }
-    localStorage.setItem('currentProtocol', requestVModel.value.protocol);
+    if (props.protocolKey) {
+      localStorage.setItem(props.protocolKey, requestVModel.value.protocol);
+    }
     handleActiveDebugChange();
   }
 

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

@@ -40,6 +40,7 @@
               v-model:detail-loading="loading"
               v-model:request="activeDebug"
               :module-tree="folderTree"
+              :protocol-key="ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL"
               :create-api="addDebug"
               :update-api="updateDebug"
               :execute-api="executeDebug"
@@ -131,6 +132,7 @@
 
   import { ModuleTreeNode } from '@/models/common';
   import {
+    ProtocolKeyEnum,
     RequestAuthType,
     RequestComposition,
     RequestContentTypeEnum,
@@ -158,7 +160,7 @@
   }
 
   const initDefaultId = `debug-${Date.now()}`;
-  const localProtocol = localStorage.getItem('currentProtocol');
+  const localProtocol = localStorage.getItem(ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL);
   const defaultDebugParams: RequestParam = {
     type: 'api',
     id: initDefaultId,
@@ -233,7 +235,7 @@
 
   function addDebugTab(defaultProps?: Partial<TabItem>) {
     const id = `debug-${Date.now()}`;
-    const protocol = localStorage.getItem('currentProtocol');
+    const protocol = localStorage.getItem(ProtocolKeyEnum.API_DEBUG_NEW_PROTOCOL);
     debugTabs.value.push({
       ...cloneDeep(defaultDebugParams),
       id,

frontend/src/views/api-test/management/components/management/api/index.vue

@@ -71,6 +71,7 @@
             ref="requestCompositionRef"
             v-model:detail-loading="loading"
             v-model:request="activeApiTab"
+            :protocol-key="ProtocolKeyEnum.API_NEW_PROTOCOL"
             :module-tree="props.moduleTree"
             :create-api="addDefinition"
             :update-api="updateDefinition"
@@ -157,6 +158,7 @@
   import { MockDetail } from '@/models/apiTest/mock';
   import { ModuleTreeNode } from '@/models/common';
   import {
+    ProtocolKeyEnum,
     RequestAuthType,
     RequestBodyFormat,
     RequestComposition,
@@ -226,7 +228,7 @@
   });
 
   const initDefaultId = `definition-${Date.now()}`;
-  const localProtocol = localStorage.getItem('currentProtocol');
+  const localProtocol = localStorage.getItem(ProtocolKeyEnum.API_NEW_PROTOCOL);
   const defaultDefinitionParams: RequestParam = {
     type: 'api',
     definitionActiveKey: 'definition',
@@ -300,7 +302,7 @@
 
   function addApiTab(defaultProps?: Partial<TabItem>) {
     const id = `definition-${Date.now()}`;
-    const protocol = localStorage.getItem('currentProtocol');
+    const protocol = localStorage.getItem(ProtocolKeyEnum.API_NEW_PROTOCOL);
     apiTabs.value.push({
       ...cloneDeep(defaultDefinitionParams),
       moduleId: props.activeModule === 'all' ? 'root' : props.activeModule,

frontend/src/views/api-test/management/components/moduleTree.vue

@@ -48,7 +48,7 @@
         ref="treeFolderAllRef"
         v-model:isExpandApi="isExpandApi"
         v-model:isExpandAll="isExpandAll"
-        :protocol-key="ProtocolKeyEnum.API_PROTOCOL"
+        :protocol-key="ProtocolKeyEnum.API_MODULE_TREE_PROTOCOL"
         :folder-name="t('apiTestManagement.allApi')"
         :all-count="allFileCount"
         :active-folder="selectedKeys[0] as string"

frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue

@@ -110,7 +110,6 @@
             :loading="protocolLoading"
             :disabled="_stepType.isQuoteApi || props.step?.isQuoteScenarioStep"
             class="w-[90px]"
-            @change="(val) => handleActiveDebugProtocolChange(val as string)"
           >
             <a-tooltip
               v-for="item of protocolOptions"
@@ -370,6 +369,7 @@
   import { useAppStore } from '@/store';
   import { getGenerateId, parseQueryParams } from '@/utils';
   import { scrollIntoView } from '@/utils/dom';
+  import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
 
   import {
     EnableKeyValueParam,
@@ -385,6 +385,7 @@
   import { ScenarioStepFileParams, ScenarioStepItem } from '@/models/apiTest/scenario';
   import type { EnvConfig } from '@/models/projectManagement/environmental';
   import {
+    ProtocolKeyEnum,
     RequestAuthType,
     RequestBodyFormat,
     RequestComposition,
@@ -1272,6 +1273,16 @@
     }
   );
 
+  watch(
+    () => requestVModel.value.protocol,
+    (val) => {
+      if (requestVModel.value.isNew) {
+        setLocalStorage(ProtocolKeyEnum.API_SCENARIO_CUSTOM_PROTOCOL, val);
+      }
+      handleActiveDebugProtocolChange(val);
+    }
+  );
+
   watch(
     () => visible.value,
     async (val) => {
@@ -1304,11 +1315,16 @@
           handleActiveDebugProtocolChange(requestVModel.value.protocol);
         } else {
           // 新建自定义请求
+          const localProtocol = getLocalStorage<string>(ProtocolKeyEnum.API_SCENARIO_CUSTOM_PROTOCOL);
           const id = getGenerateId();
           requestVModel.value = cloneDeep({
             ...defaultApiParams,
             stepId: id,
             uniqueId: id,
+            protocol:
+              localProtocol?.length && protocolOptions.value.some((item) => item.value === localProtocol)
+                ? localProtocol
+                : 'HTTP',
           });
         }
         requestVModel.value.activeTab = contentTabList.value[0].value;

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

@@ -18,12 +18,7 @@
           <div class="flex flex-col">
             <div class="mb-[12px] flex items-center gap-[8px]">
               <MsProjectSelect v-model:project="currentProject" @change="resetModule" />
-              <a-select
+              <a-select v-if="activeKey !== 'scenario'" v-model:model-value="protocol" class="w-[90px]">
-                v-if="activeKey !== 'scenario'"
-                v-model:model-value="protocol"
-                class="w-[90px]"
-                @change="resetModule"
-              >
                 <a-tooltip
                   v-for="item of protocolOptions"
                   :key="item.value as string"
@@ -123,10 +118,11 @@
   import { useI18n } from '@/hooks/useI18n';
   import useAppStore from '@/store/modules/app';
   import { getGenerateId, mapTree } from '@/utils';
+  import { getLocalStorage, setLocalStorage } from '@/utils/local-storage';
 
   import type { ApiCaseDetail, ApiDefinitionDetail } from '@/models/apiTest/management';
   import type { ApiScenarioTableItem } from '@/models/apiTest/scenario';
-  import { ScenarioStepRefType, ScenarioStepType } from '@/enums/apiEnum';
+  import { ProtocolKeyEnum, ScenarioStepRefType, ScenarioStepType } from '@/enums/apiEnum';
 
   export interface ImportData {
     api: MsTableDataItem<ApiDefinitionDetail>[];
@@ -178,7 +174,7 @@
 
   const activeModule = ref<MsTreeNodeData>({});
   const currentProject = ref(appStore.currentProjectId);
-  const protocol = ref('HTTP');
+  const protocol = ref('');
   const protocolOptions = ref<SelectOptionData[]>([]);
   const protocolLoading = ref(false);
 
@@ -204,6 +200,16 @@
   const apiTableRef = ref<InstanceType<typeof apiTable>>();
   const moduleIds = ref<(string | number)[]>([]);
 
+  watch(
+    () => protocol.value,
+    (val) => {
+      setLocalStorage(ProtocolKeyEnum.API_SCENARIO_IMPORT_PROTOCOL, val);
+      nextTick(() => {
+        moduleTreeRef.value?.init(activeKey.value);
+      });
+    }
+  );
+
   function resetModule() {
     nextTick(() => {
       moduleTreeRef.value?.init(activeKey.value);
@@ -398,16 +404,14 @@
     }
   }
 
-  onBeforeMount(() => {
+  onBeforeMount(async () => {
-    initProtocolList();
+    await initProtocolList();
-  });
+    const localProtocol = getLocalStorage<string>(ProtocolKeyEnum.API_SCENARIO_IMPORT_PROTOCOL);
-
+    if (localProtocol?.length && protocolOptions.value.some((item) => item.value === localProtocol)) {
-  // 外面需要使用 v-if 动态渲染
+      protocol.value = localProtocol;
-  onMounted(() => {
+    } else {
-    nextTick(() => {
+      protocol.value = 'HTTP';
-      // 外面使用 v-if 动态渲染时，需要在 nextTick 中执行初始化数据，因为子组件 ref 引用需要在渲染后才能获取到
+    }
-      moduleTreeRef.value?.init(activeKey.value);
-    });
   });
 </script>