From 4ed3cf4ee2b60a9ac2e270f92e14f0319e16b871 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 9 Jul 2024 11:55:27 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=E6=8F=92=E4=BB=B6=E6=95=B0=E6=8D=AE=E7=BC=93=E5=AD=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../store/modules/api/requestComposition.ts   | 21 +++++++++++++++++++
 frontend/src/store/modules/api/types.ts       |  7 +++++++
 .../components/requestComposition/index.vue   |  7 ++++---
 .../components/management/api/index.vue       |  2 +-
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/store/modules/api/requestComposition.ts
 create mode 100644 frontend/src/store/modules/api/types.ts

diff --git a/frontend/src/store/modules/api/requestComposition.ts b/frontend/src/store/modules/api/requestComposition.ts
new file mode 100644
index 0000000000..72aa385fbb
--- /dev/null
+++ b/frontend/src/store/modules/api/requestComposition.ts
@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia';
+import { cloneDeep } from 'lodash-es';
+
+import type { RequestCompositionState } from './types';
+
+// 用于记录请求组合的临时插件表单数据
+const useRequestCompositionStore = defineStore('visit', {
+  state: (): RequestCompositionState => ({
+    temporaryPluginFormMap: {},
+  }),
+  getters: {
+    pluginFormMap: (state) => state.temporaryPluginFormMap,
+  },
+  actions: {
+    setPluginFormMap(id: string | number, pluginForm?: Record<string, any>) {
+      this.temporaryPluginFormMap[id] = pluginForm ? cloneDeep(pluginForm) : {};
+    },
+  },
+});
+
+export default useRequestCompositionStore;
diff --git a/frontend/src/store/modules/api/types.ts b/frontend/src/store/modules/api/types.ts
new file mode 100644
index 0000000000..727f317d80
--- /dev/null
+++ b/frontend/src/store/modules/api/types.ts
@@ -0,0 +1,7 @@
+export interface TemporaryPluginForm {
+  [key: string]: any;
+}
+
+export interface RequestCompositionState {
+  temporaryPluginFormMap: TemporaryPluginForm;
+}
diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index 01cacf7c77..ab06cb276a 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@@ -451,6 +451,7 @@
   import { getSocket } from '@/api/modules/project-management/commonScript';
   import { getProjectOptions } from '@/api/modules/project-management/projectMember';
   import { useI18n } from '@/hooks/useI18n';
+  import useRequestCompositionStore from '@/store/modules/api/requestComposition';
   import useAppStore from '@/store/modules/app';
   import useUserStore from '@/store/modules/user';
   import { filterTree, filterTreeNode, getGenerateId, parseQueryParams } from '@/utils';
@@ -556,6 +557,7 @@
   const appStore = useAppStore();
   const userStore = useUserStore();
   const { t } = useI18n();
+  const requestCompositionStore = useRequestCompositionStore();
 
   const loading = defineModel<boolean>('detailLoading', { default: false });
   const requestVModel = defineModel<RequestParam>('request', { required: true });
@@ -738,7 +740,6 @@
   const localExecuteUrl = computed(() => userStore.localExecuteUrl); // 本地执行地址
 
   const pluginScriptMap = ref<Record<string, PluginConfig>>({}); // 存储初始化过后的插件配置
-  const temporaryPluginFormMap: Record<string, any> = {}; // 缓存插件表单，避免切换tab导致动态表单数据丢失
   const pluginLoading = ref(false);
   const fApi = ref<Api>();
   const currentPluginOptions = computed<Record<string, any>>(
@@ -750,7 +751,7 @@
 
   // 处理插件表单输入框变化
   const handlePluginFormChange = debounce(() => {
-    temporaryPluginFormMap[requestVModel.value.id] = fApi.value?.formData();
+    requestCompositionStore.setPluginFormMap(requestVModel.value.id, fApi.value?.formData());
     handleActiveDebugChange();
   }, 300);
 
@@ -783,7 +784,7 @@
    * 设置插件表单数据
    */
   async function setPluginFormData() {
-    const tempForm = temporaryPluginFormMap[requestVModel.value.id];
+    const tempForm = requestCompositionStore.pluginFormMap[requestVModel.value.id];
     if (tempForm || !requestVModel.value.isNew || requestVModel.value.isCopy) {
       // 如果缓存的表单数据存在或者是编辑状态，则需要将之前的输入数据填充
       const formData = tempForm || requestVModel.value;
diff --git a/frontend/src/views/api-test/management/components/management/api/index.vue b/frontend/src/views/api-test/management/components/management/api/index.vue
index 03b31183a6..c636e37ac3 100644
--- a/frontend/src/views/api-test/management/components/management/api/index.vue
+++ b/frontend/src/views/api-test/management/components/management/api/index.vue
@@ -14,7 +14,7 @@
         @open-edit-api-tab="openApiTab"
       />
     </div>
-    <div v-if="activeApiTab.id !== 'all'" class="flex-1 overflow-hidden">
+    <div v-else-if="activeApiTab.id !== 'all'" class="flex-1 overflow-hidden">
       <a-tabs
         v-model:active-key="activeApiTab.definitionActiveKey"
         animation