feat(接口测试): 关闭 tab 释放内存

frontend/src/components/pure/ms-editable-tab/index.vue

@@ -80,7 +80,7 @@
 
 <script setup lang="ts">
   import { nextTick, onMounted, ref, watch } from 'vue';
-  import { useScroll, useVModel } from '@vueuse/core';
+  import { useScroll } from '@vueuse/core';
   import { useDraggable } from 'vue-draggable-plus';
 
   import MsButton from '@/components/pure/ms-button/index.vue';

frontend/src/store/modules/api/requestComposition.ts

@@ -15,6 +15,11 @@ const useRequestCompositionStore = defineStore('visit', {
     setPluginFormMap(id: string | number, pluginForm?: Record<string, any>) {
       this.temporaryPluginFormMap[id] = pluginForm ? cloneDeep(pluginForm) : {};
     },
+    removePluginFormMapItem(id: string | number) {
+      if (this.temporaryPluginFormMap[id]) {
+        delete this.temporaryPluginFormMap[id];
+      }
+    },
   },
 });
 

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

@@ -23,6 +23,7 @@
               :readonly="!hasAnyPermission(['PROJECT_API_DEBUG:READ+ADD'])"
               at-least-one
               @add="addDebugTab"
+              @close="handleDebugTabClose"
             >
               <template #label="{ tab }">
                 <apiMethodName :method="tab.protocol === 'HTTP' ? tab.method : tab.protocol" class="mr-[4px]" />
@@ -124,6 +125,7 @@
   } from '@/api/modules/api-test/debug';
   import { useI18n } from '@/hooks/useI18n';
   import useLeaveTabUnSaveCheck from '@/hooks/useLeaveTabUnSaveCheck';
+  import useRequestCompositionStore from '@/store/modules/api/requestComposition';
   import { parseCurlScript } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
@@ -142,6 +144,7 @@
 
   const route = useRoute();
   const { t } = useI18n();
+  const requestCompositionStore = useRequestCompositionStore();
 
   const moduleTreeRef = ref<InstanceType<typeof moduleTree>>();
   const folderTree = ref<ModuleTreeNode[]>([]);
@@ -358,23 +361,14 @@
     }
   }
 
-  /**
-  async function openSaveAsApiModal(node: MsTreeNodeData) {
-    try {
-      const [modules] = await getModuleTreeOnlyModules({
-        keyword: '',
-        protocol: '',
-        projectId: appStore.currentProjectId,
-        moduleIds: [],
-      });
-      apiModules.value = modules;
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.log(error);
-    } finally {
+  function handleDebugTabClose(item: TabItem) {
+    requestCompositionStore.removePluginFormMapItem(item.id);
+    const closingIndex = debugTabs.value.findIndex((e) => e.id === item.id);
+    if (closingIndex > -1) {
+      debugTabs.value.splice(closingIndex, 1);
     }
   }
-  */
+
   onMounted(() => {
     if (route.query.id) {
       openApiTab(route.query.id as string);

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

@@ -7,6 +7,7 @@
       class="flex-1 overflow-hidden"
       :show-add="currentTab === 'api' && hasAnyPermission(['PROJECT_API_DEFINITION:READ+ADD'])"
       @add="newTab"
+      @close="handleTabClose"
     >
       <template #label="{ tab }">
         <apiMethodName
@@ -75,6 +76,7 @@
   import { cloneDeep } from 'lodash-es';
 
   import MsEditableTab from '@/components/pure/ms-editable-tab/index.vue';
+  import { TabItem } from '@/components/pure/ms-editable-tab/types';
   import MsEnvironmentSelect from '@/components/business/ms-environment-select/index.vue';
   import api from './api/index.vue';
   import apiCase from './case/index.vue';
@@ -85,6 +87,7 @@
   import { getProjectOptions } from '@/api/modules/project-management/projectMember';
   import { useI18n } from '@/hooks/useI18n';
   import useLeaveTabUnSaveCheck from '@/hooks/useLeaveTabUnSaveCheck';
+  import useRequestCompositionStore from '@/store/modules/api/requestComposition';
   import useAppStore from '@/store/modules/app';
   import { hasAnyPermission } from '@/utils/permission';
 
@@ -116,6 +119,7 @@
   }>();
   const appStore = useAppStore();
   const { t } = useI18n();
+  const requestCompositionStore = useRequestCompositionStore();
 
   const setActiveApi: ((params: RequestParam) => void) | undefined = inject('setActiveApi');
   const memberOptions = ref<{ label: string; value: string }[]>([]);
@@ -335,6 +339,14 @@
     apiRef.value?.openApiTabAndDebugMock(mock);
   }
 
+  function handleTabClose(item: TabItem) {
+    requestCompositionStore.removePluginFormMapItem(item.id);
+    const closingIndex = apiTabs.value.findIndex((e) => e.id === item.id);
+    if (closingIndex > -1) {
+      apiTabs.value.splice(closingIndex, 1);
+    }
+  }
+
   onBeforeMount(() => {
     initMemberOptions();
     initProtocolList();