From fa853e230fc75bccb93854abc24603a6f5965308 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Fri, 23 Feb 2024 18:59:16 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95):=20?=
 =?UTF-8?q?=2099%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/ms-add-attachment/index.vue      |  16 +-
 .../ms-assertion/comp/ResponseBodyTab.vue     |  22 +--
 frontend/src/models/apiTest/debug.ts          |   8 +-
 .../api-test/components/batchAddKeyVal.vue    |   4 +-
 .../api-test/components/condition/content.vue |  52 +++---
 .../api-test/components/condition/index.vue   |   8 +-
 .../views/api-test/components/paramTable.vue  | 149 +++++++-----------
 .../components/requestComposition/body.vue    |  13 +-
 .../components/requestComposition/index.vue   |   3 +-
 .../components/requestComposition/setting.vue |   8 +-
 10 files changed, 143 insertions(+), 140 deletions(-)

diff --git a/frontend/src/components/business/ms-add-attachment/index.vue b/frontend/src/components/business/ms-add-attachment/index.vue
index 3f554b7bbe..467e6c459e 100644
--- a/frontend/src/components/business/ms-add-attachment/index.vue
+++ b/frontend/src/components/business/ms-add-attachment/index.vue
@@ -152,7 +152,7 @@
       inputSize?: 'small' | 'medium' | 'large' | 'mini';
       tagSize?: Size;
       fields?: {
-        id: string;
+        id: string; // 自定义文件的 id 字段名，用于详情展示，接口返回的字段名
         name: string;
       };
     }>(),
@@ -193,11 +193,11 @@
         inputFiles.value = defaultFiles.map((item) => ({
           ...item,
           // 这里取自定义的字段名，因为存在查看的场景时不会与刚选择的文件信息一样
-          value: item?.[props.fields.id] || '',
-          label: item?.[props.fields.name] || '',
+          value: item?.[props.fields.id] || item.uid || '', // 取uid是因为有可能是本地上传然后组件卸载然后重新挂载，这时候取自定义 id 会是空的
+          label: item?.[props.fields.name] || item?.name || '',
         }));
       } else {
-        inputFileName.value = defaultFiles[0]?.[props.fields.name] || '';
+        inputFileName.value = defaultFiles[0]?.[props.fields.name] || defaultFiles[0]?.name || '';
       }
       getListFunParams.value.combine.hiddenIds = defaultFiles
         .filter((item) => !item?.local)
@@ -214,6 +214,7 @@
     innerFileList.value = _fileList.map((item) => ({ ...item, local: true }));
     if (props.multiple) {
       inputFiles.value = _fileList.map((item) => ({
+        ...item,
         value: item?.uid || '',
         label: item?.name || '',
       }));
@@ -252,6 +253,7 @@
       innerFileList.value.push(...fileResultList);
       inputFiles.value.push(
         ...fileResultList.map((item) => ({
+          ...item,
           value: item?.uid || '',
           label: item?.name || '',
         }))
@@ -278,8 +280,10 @@
 
   function handleClose(data: TagData) {
     inputFiles.value = inputFiles.value.filter((item) => item.value !== data.value);
-    innerFileList.value = innerFileList.value.filter((item) => item[props.fields.id] !== data.value);
-    if (innerFileList.value.length === 0) {
+    innerFileList.value = innerFileList.value.filter(
+      (item) => (item[props.fields.id] || item.uid) !== (data[props.fields.id] || data.value)
+    );
+    if (inputFiles.value.length === 0) {
       inputFilesPopoverVisible.value = false;
     }
     emit('deleteFile', data.value);
diff --git a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
index 8f3d2245e1..22fc16b208 100644
--- a/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ResponseBodyTab.vue
@@ -17,7 +17,7 @@
         @change="handleChange"
         @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
       >
-        <template #expression="{ record }">
+        <template #expression="{ record, rowIndex }">
           <a-popover
             position="tl"
             :disabled="!record.expression || record.expression.trim() === ''"
@@ -35,8 +35,8 @@
               v-model:model-value="record.expression"
               class="ms-params-input"
               :max-length="255"
-              @input="handleExpressionChange"
-              @change="handleExpressionChange"
+              @input="() => handleExpressionChange(rowIndex)"
+              @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
                 <a-tooltip :disabled="!disabledExpressionSuffix">
@@ -102,7 +102,7 @@
         @change="handleChange"
         @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
       >
-        <template #expression="{ record }">
+        <template #expression="{ record, rowIndex }">
           <a-popover
             position="tl"
             :disabled="!record.expression || record.expression.trim() === ''"
@@ -120,8 +120,8 @@
               v-model:model-value="record.expression"
               class="ms-params-input"
               :max-length="255"
-              @input="handleExpressionChange"
-              @change="handleExpressionChange"
+              @input="() => handleExpressionChange(rowIndex)"
+              @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
                 <a-tooltip :disabled="!disabledExpressionSuffix">
@@ -209,7 +209,7 @@
         @change="handleChange"
         @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
       >
-        <template #expression="{ record }">
+        <template #expression="{ record, rowIndex }">
           <a-popover
             position="tl"
             :disabled="!record.expression || record.expression.trim() === ''"
@@ -227,8 +227,8 @@
               v-model:model-value="record.expression"
               class="ms-params-input"
               :max-length="255"
-              @input="handleExpressionChange"
-              @change="handleExpressionChange"
+              @input="() => handleExpressionChange(rowIndex)"
+              @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
                 <a-tooltip :disabled="!disabledExpressionSuffix">
@@ -434,8 +434,8 @@
   const handleChange = () => {
     emit('change');
   };
-  function handleExpressionChange(val: string) {
-    extractParamsTableRef.value?.addTableLine(val, 'expression');
+  function handleExpressionChange(rowIndex: number) {
+    extractParamsTableRef.value?.addTableLine(rowIndex);
   }
 
   const xPathColumns: ParamTableColumn[] = [
diff --git a/frontend/src/models/apiTest/debug.ts b/frontend/src/models/apiTest/debug.ts
index a6b1467464..cba6f98e80 100644
--- a/frontend/src/models/apiTest/debug.ts
+++ b/frontend/src/models/apiTest/debug.ts
@@ -157,7 +157,13 @@ export interface ScriptCommonConfig {
   scriptId: string; // 脚本id
   scriptName: string; // 脚本名称
   scriptLanguage: Language; // 脚本语言
-  params: KeyValueParam[]; // 公共脚本参数
+  commonScriptInfo: {
+    id: string; // 公共脚本id
+    name: string; // 公共脚本名称
+    script: string; // 公共脚本内容
+    params: KeyValueParam[]; // 公共脚本参数
+    scriptLanguage: Language; // 脚本语言
+  }; // 公共脚本信息
 }
 // 断言-响应体断言
 export interface ResponseBodyAssertion {
diff --git a/frontend/src/views/api-test/components/batchAddKeyVal.vue b/frontend/src/views/api-test/components/batchAddKeyVal.vue
index 082e2ef01b..af562cdf03 100644
--- a/frontend/src/views/api-test/components/batchAddKeyVal.vue
+++ b/frontend/src/views/api-test/components/batchAddKeyVal.vue
@@ -41,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-  import { isEmpty } from 'lodash-es';
+  import { cloneDeep, isEmpty } from 'lodash-es';
 
   import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
@@ -87,7 +87,7 @@
       if (key || value) {
         tempObj[key.trim()] = {
           id: new Date().getTime() + i,
-          ...props.defaultParamItem,
+          ...cloneDeep(props.defaultParamItem), // 深拷贝，避免有嵌套引用类型，数据隔离
           key: key.trim(),
           value: value?.trim(),
         };
diff --git a/frontend/src/views/api-test/components/condition/content.vue b/frontend/src/views/api-test/components/condition/content.vue
index b4d4765d21..c3a30be70b 100644
--- a/frontend/src/views/api-test/components/condition/content.vue
+++ b/frontend/src/views/api-test/components/condition/content.vue
@@ -23,10 +23,10 @@
         </div>
         <div class="flex items-center justify-between">
           <div class="flex items-center">
-            <a-tooltip :content="condition.scriptName">
+            <a-tooltip :content="condition.commonScriptInfo?.name">
               <div class="script-name-container">
                 <div class="one-line-text mr-[4px] max-w-[110px] font-medium text-[var(--color-text-1)]">
-                  {{ condition.scriptName }}
+                  {{ condition.commonScriptInfo?.name }}
                 </div>
                 <MsIcon type="icon-icon_edit_outlined" class="edit-script-name-icon" @click="showEditScriptNameInput" />
               </div>
@@ -127,9 +127,11 @@
         </MsBaseTable>
         <div v-show="commonScriptShowType === 'scriptContent'" class="h-[calc(100%-76px)]">
           <MsCodeEditor
-            v-model:model-value="condition.script"
+            v-if="condition.commonScriptInfo"
+            v-model:model-value="condition.commonScriptInfo.script"
             theme="vs"
             height="100%"
+            :language="condition.commonScriptInfo.scriptLanguage || LanguageEnum.BEANSHELL"
             :show-full-screen="false"
             :show-theme-change="false"
             read-only
@@ -240,7 +242,7 @@
         @change="handleExtractParamTableChange"
         @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
       >
-        <template #expression="{ record }">
+        <template #expression="{ record, rowIndex }">
           <a-popover
             position="tl"
             :disabled="!record.expression || record.expression.trim() === ''"
@@ -258,8 +260,8 @@
               v-model:model-value="record.expression"
               class="ms-params-input"
               :max-length="255"
-              @input="handleExpressionChange"
-              @change="handleExpressionChange"
+              @input="() => handleExpressionChange(rowIndex)"
+              @change="() => handleExpressionChange(rowIndex)"
             >
               <template #suffix>
                 <a-tooltip :disabled="!disabledExpressionSuffix">
@@ -451,24 +453,28 @@ if (!result){
   });
 
   watch(
-    () => condition.value.params,
-    (arr) => {
-      propsRes.value.data = arr as any[]; // 查看详情的时候需要赋值一下
+    () => condition.value.commonScriptInfo,
+    (info) => {
+      propsRes.value.data = info?.params as any[]; // 查看详情的时候需要赋值一下
     }
   );
 
   const showQuoteDrawer = ref(false);
   function saveQuoteScriptHandler(item: any) {
-    condition.value.script = item.script;
-    condition.value.scriptId = item.id;
-    condition.value.scriptName = item.name; // TODO:详情接口未返回该字段
-    condition.value.params = (JSON.parse(item.params) || []).map((e: any) => {
-      return {
-        key: e.name,
-        ...e,
-      };
-    });
-    propsRes.value.data = condition.value.params as any[];
+    // TODO:any
+    condition.value.commonScriptInfo = {
+      id: item.id,
+      script: item.script,
+      name: item.name,
+      scriptLanguage: item.type,
+      params: (JSON.parse(item.params) || []).map((e: any) => {
+        return {
+          key: e.name,
+          ...e,
+        };
+      }),
+    };
+    propsRes.value.data = (condition.value.commonScriptInfo?.params as any[]) || [];
     showQuoteDrawer.value = false;
   }
 
@@ -645,8 +651,8 @@ if (!result){
     fastExtractionVisible.value = true;
   }
 
-  function handleExpressionChange(val: string) {
-    extractParamsTableRef.value?.addTableLine(val, 'expression');
+  function handleExpressionChange(rowIndex: number) {
+    extractParamsTableRef.value?.addTableLine(rowIndex);
   }
 
   /**
@@ -693,7 +699,9 @@ if (!result){
     });
     fastExtractionVisible.value = false;
     nextTick(() => {
-      extractParamsTableRef.value?.addTableLine();
+      extractParamsTableRef.value?.addTableLine(
+        condition.value.extractParams?.findIndex((e) => e.id === activeRecord.value.id) || 0
+      );
     });
     emit('change');
   }
diff --git a/frontend/src/views/api-test/components/condition/index.vue b/frontend/src/views/api-test/components/condition/index.vue
index fc9a30aaea..86b2c12a0e 100644
--- a/frontend/src/views/api-test/components/condition/index.vue
+++ b/frontend/src/views/api-test/components/condition/index.vue
@@ -111,7 +111,13 @@
           script: '',
           scriptId: '',
           scriptLanguage: LanguageEnum.BEANSHELL,
-          params: [],
+          commonScriptInfo: {
+            id: '',
+            name: '',
+            script: '',
+            params: [],
+            scriptLanguage: LanguageEnum.BEANSHELL,
+          },
         });
         break;
       // case RequestConditionProcessor.SQL:
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index a2c54f344d..24cc41851d 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -48,7 +48,7 @@
       </div>
     </template>
     <!-- 表格列 slot -->
-    <template #key="{ record, columnConfig }">
+    <template #key="{ record, columnConfig, rowIndex }">
       <a-popover
         position="tl"
         :disabled="!record[columnConfig.dataIndex as string] || record[columnConfig.dataIndex as string].trim() === ''"
@@ -67,11 +67,11 @@
           :placeholder="t('apiTestDebug.paramNamePlaceholder')"
           class="param-input"
           :max-length="255"
-          @input="(val) => addTableLine(val, 'key')"
+          @input="() => addTableLine(rowIndex)"
         />
       </a-popover>
     </template>
-    <template #paramType="{ record, columnConfig }">
+    <template #paramType="{ record, columnConfig, rowIndex }">
       <a-tooltip
         v-if="columnConfig.hasRequired"
         :content="t(record.required ? 'apiTestDebug.paramRequired' : 'apiTestDebug.paramNotRequired')"
@@ -82,7 +82,7 @@
             record.required ? '!text-[rgb(var(--danger-5))]' : '!text-[var(--color-text-brand)]',
             '!mr-[4px] !p-[4px]',
           ]"
-          @click="toggleRequired(record)"
+          @click="toggleRequired(record, rowIndex)"
         >
           <div>*</div>
         </MsButton>
@@ -91,37 +91,37 @@
         v-model:model-value="record.paramType"
         :options="columnConfig.typeOptions || []"
         class="param-input w-full"
-        @change="(val) => handleTypeChange(val, record)"
+        @change="(val) => handleTypeChange(val, record, rowIndex)"
       />
     </template>
-    <template #expressionType="{ record, columnConfig }">
+    <template #expressionType="{ record, columnConfig, rowIndex }">
       <a-select
         v-model:model-value="record.expressionType"
         :options="columnConfig.typeOptions || []"
         class="param-input w-[110px]"
-        @change="(val) => handleExpressionTypeChange(val)"
+        @change="() => addTableLine(rowIndex)"
       />
     </template>
-    <template #variableType="{ record, columnConfig }">
+    <template #variableType="{ record, columnConfig, rowIndex }">
       <a-select
         v-model:model-value="record.variableType"
         :options="columnConfig.typeOptions || []"
         class="param-input w-[110px]"
-        @change="(val) => handleVariableTypeChange(val)"
+        @change="() => addTableLine(rowIndex)"
       />
     </template>
-    <template #extractScope="{ record, columnConfig }">
+    <template #extractScope="{ record, columnConfig, rowIndex }">
       <a-select
         v-model:model-value="record.extractScope"
         :options="columnConfig.typeOptions || []"
         class="param-input w-[180px]"
-        @change="(val) => handleRangeChange(val)"
+        @change="() => addTableLine(rowIndex)"
       />
     </template>
     <template #expression="{ record, rowIndex, columnConfig }">
       <slot name="expression" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot>
     </template>
-    <template #value="{ record, columnConfig }">
+    <template #value="{ record, columnConfig, rowIndex }">
       <a-popover
         v-if="columnConfig.isNormal"
         position="tl"
@@ -141,7 +141,7 @@
           class="param-input"
           :placeholder="t('apiTestDebug.commonPlaceholder')"
           :max-length="255"
-          @input="(val) => addTableLine(val, 'value')"
+          @input="() => addTableLine(rowIndex)"
         />
       </a-popover>
       <MsAddAttachment
@@ -156,24 +156,24 @@
         input-class="param-input h-[24px]"
         input-size="small"
         tag-size="small"
-        @change="(files) => handleFileChange(files, record)"
+        @change="(files) => handleFileChange(files, record, rowIndex)"
       />
       <MsParamsInput
         v-else
         v-model:value="record.value"
-        @change="(val) => addTableLine(val, 'value')"
+        @change="() => addTableLine(rowIndex)"
         @dblclick="quickInputParams(record)"
-        @apply="handleParamSettingApply"
+        @apply="() => addTableLine(rowIndex)"
       />
     </template>
-    <template #lengthRange="{ record }">
+    <template #lengthRange="{ record, rowIndex }">
       <div class="flex items-center justify-between">
         <a-input-number
           v-model:model-value="record.minLength"
           :placeholder="t('apiTestDebug.paramMin')"
           :min="0"
           class="param-input param-input-number"
-          @change="(val) => addTableLine(val, 'minLength')"
+          @change="() => addTableLine(rowIndex)"
         />
         <div class="mx-[4px]">{{ t('common.to') }}</div>
         <a-input-number
@@ -181,11 +181,11 @@
           :placeholder="t('apiTestDebug.paramMax')"
           :min="0"
           class="param-input"
-          @change="(val) => addTableLine(val, 'maxLength')"
+          @change="() => addTableLine(rowIndex)"
         />
       </div>
     </template>
-    <template #tag="{ record, columnConfig }">
+    <template #tag="{ record, columnConfig, rowIndex }">
       <a-popover
         position="tl"
         :disabled="record[columnConfig.dataIndex as string].length === 0"
@@ -203,29 +203,32 @@
           v-model:model-value="record[columnConfig.dataIndex as string]"
           :max-tag-count="1"
           input-class="param-input"
-          @change="(val) => addTableLine(val, 'tag')"
+          @change="() => addTableLine(rowIndex)"
         />
       </a-popover>
     </template>
-    <template #description="{ record, columnConfig }">
+    <template #description="{ record, columnConfig, rowIndex }">
       <paramDescInput
         v-model:desc="record[columnConfig.dataIndex as string]"
-        @input="(val) => addTableLine(val, 'description')"
+        @input="() => addTableLine(rowIndex)"
         @dblclick="quickInputDesc(record)"
         @change="handleDescChange"
       />
     </template>
-    <template #encode="{ record }">
+    <template #encode="{ record, rowIndex }">
       <a-switch
         v-model:model-value="record.encode"
         size="small"
         class="param-input-switch"
         type="line"
-        @change="(val) => addTableLine(val.toString(), 'encode')"
+        @change="() => addTableLine(rowIndex)"
       />
     </template>
-    <template #mustContain="{ record, columnConfig }">
-      <a-checkbox v-model:model-value="record[columnConfig.dataIndex as string]" @change="(val) => addTableLine(val)" />
+    <template #mustContain="{ record, columnConfig, rowIndex }">
+      <a-checkbox
+        v-model:model-value="record[columnConfig.dataIndex as string]"
+        @change="() => addTableLine(rowIndex)"
+      />
     </template>
     <template #operation="{ record, rowIndex, columnConfig }">
       <a-switch
@@ -234,7 +237,7 @@
         size="small"
         type="line"
         class="mr-[8px]"
-        @change="(val) => addTableLine(val, 'disable')"
+        @change="() => addTableLine(rowIndex)"
       />
       <slot name="operationPre" :record="record" :row-index="rowIndex" :column-config="columnConfig"></slot>
       <MsTableMoreAction
@@ -251,7 +254,7 @@
               v-model:model-value="record.contentType"
               :options="Object.values(RequestContentTypeEnum).map((e) => ({ label: e, value: e }))"
               allow-create
-              @change="(val) => addTableLine(val as string, 'contentType')"
+              @change="() => addTableLine(rowIndex)"
             />
           </div>
         </template>
@@ -265,24 +268,24 @@
         />
       </div>
     </template>
-    <template #responseHeader="{ record, columnConfig }">
-      <a-select v-model="record.responseHeader" class="param-input" @change="(val) => addTableLine(val as string)">
+    <template #responseHeader="{ record, columnConfig, rowIndex }">
+      <a-select v-model="record.responseHeader" class="param-input" @change="() => addTableLine(rowIndex)">
         <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
       </a-select>
     </template>
-    <template #matchCondition="{ record, columnConfig }">
-      <a-select v-model="record.condition" class="param-input" @change="(val) => addTableLine(val as string)">
+    <template #matchCondition="{ record, columnConfig, rowIndex }">
+      <a-select v-model="record.condition" class="param-input" @change="() => addTableLine(rowIndex)">
         <a-option v-for="item in columnConfig.options" :key="item.value">{{ t(item.label) }}</a-option>
       </a-select>
     </template>
-    <template #matchValue="{ record }">
-      <a-input v-model="record.matchValue" class="param-input" @change="(val) => addTableLine(val)" />
+    <template #matchValue="{ record, rowIndex }">
+      <a-input v-model="record.matchValue" class="param-input" @change="() => addTableLine(rowIndex)" />
     </template>
-    <template #project="{ record, columnConfig }">
+    <template #project="{ record, columnConfig, rowIndex }">
       <a-select
         v-model="record.projectId"
         class="param-input"
-        @change="(val) => handelProjectChange(val as string, record.projectId)"
+        @change="(val) => handelProjectChange(val as string, record.projectId, rowIndex)"
       >
         <a-option v-for="item in columnConfig.options" :key="item.id">{{ item.name }}</a-option>
       </a-select>
@@ -343,7 +346,7 @@
 </template>
 
 <script async setup lang="ts">
-  import { isEqual } from 'lodash-es';
+  import { cloneDeep } from 'lodash-es';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
@@ -359,6 +362,7 @@
 
   import { useI18n } from '@/hooks/useI18n';
   import useTableStore from '@/hooks/useTableStore';
+  import useAppStore from '@/store/modules/app';
 
   import { RequestBodyFormat, RequestContentTypeEnum, RequestParamsType } from '@/enums/apiEnum';
   import { SelectAllEnum, TableKeyEnum } from '@/enums/tableEnum';
@@ -426,6 +430,7 @@
     (e: 'projectChange', projectId: string): void;
   }>();
 
+  const appStore = useAppStore();
   const { t } = useI18n();
 
   const tableStore = useTableStore();
@@ -497,24 +502,13 @@
    * @param key 当前列的 key
    * @param isForce 是否强制添加
    */
-  function addTableLine(
-    val?: string | number | boolean | (string | number | boolean)[],
-    key?: string,
-    isForce?: boolean
-  ) {
-    const lastData = { ...propsRes.value.data[propsRes.value.data.length - 1] };
-    delete lastData.id; // 删除 id 属性，避免影响判断是否有变化
-    lastData.enable = props.defaultParamItem.enable; // enable 是用于判断表格行是否勾选的属性，不参与判断是否有变化
-    // 当不传入输入值或对应列的 key 时，遍历整个数据对象判断是否有变化；当传入输入值或对应列的 key 时，判断对应列的值是否有变化
-    const isNotChange =
-      val === undefined || key === undefined
-        ? isEqual(lastData, props.defaultParamItem)
-        : isEqual(lastData[key], props.defaultParamItem[key]);
-    if (isForce || (val !== '' && !isNotChange)) {
+  function addTableLine(rowIndex: number) {
+    if (rowIndex === propsRes.value.data.length - 1) {
+      // 最后一行的更改才会触发添加新一行
       const id = new Date().getTime().toString();
       propsRes.value.data.push({
         id,
-        ...props.defaultParamItem,
+        ...cloneDeep(props.defaultParamItem), // 深拷贝，避免有嵌套引用类型，数据隔离
         enable: true, // 是否勾选
       } as any);
       emit('change', propsRes.value.data);
@@ -525,14 +519,7 @@
     () => props.params,
     (val) => {
       if (val.length > 0) {
-        const lastData = { ...val[val.length - 1] };
-        delete lastData.id; // 删除 id 属性，避免影响判断是否有变化
-        delete lastData.enable; // 删除 enable 属性，避免影响判断是否有变化
-        const isNotChange = isEqual(lastData, props.defaultParamItem);
         propsRes.value.data = val;
-        if (!isNotChange) {
-          addTableLine();
-        }
       } else {
         const id = new Date().getTime().toString();
         propsRes.value.data = [
@@ -550,16 +537,18 @@
     }
   );
 
-  function toggleRequired(record: Record<string, any>) {
+  function toggleRequired(record: Record<string, any>, rowIndex: number) {
     record.required = !record.required;
+    addTableLine(rowIndex);
     emit('change', propsRes.value.data);
   }
 
-  async function handleFileChange(files: MsFileItem[], record: Record<string, any>) {
+  async function handleFileChange(files: MsFileItem[], record: Record<string, any>, rowIndex: number) {
     try {
       if (props.uploadTempFileApi && files.length === 1) {
         // 本地上传单次只能选一个文件
         const fileItem = files[0];
+        appStore.showLoading();
         const res = await props.uploadTempFileApi(fileItem.file);
         record.files = [
           {
@@ -576,10 +565,13 @@
           fileName: e.name || e.fileName || '',
         }));
       }
+      addTableLine(rowIndex);
       emit('change', propsRes.value.data);
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
+    } finally {
+      appStore.hideLoading();
     }
   }
 
@@ -601,14 +593,11 @@
   function applyQuickInputParam() {
     activeQuickInputRecord.value.value = quickInputParamValue.value;
     showQuickInputParam.value = false;
+    addTableLine(propsRes.value.data.findIndex((e) => e.id === activeQuickInputRecord.value.id));
     clearQuickInputParam();
     emit('change', propsRes.value.data);
   }
 
-  function handleParamSettingApply(val: string | number) {
-    addTableLine(val, 'value');
-  }
-
   const showQuickInputDesc = ref(false);
   const quickInputDescValue = ref('');
 
@@ -626,6 +615,7 @@
   function applyQuickInputDesc() {
     activeQuickInputRecord.value.description = quickInputDescValue.value;
     showQuickInputDesc.value = false;
+    addTableLine(propsRes.value.data.findIndex((e) => e.id === activeQuickInputRecord.value.id));
     clearQuickInputDesc();
     emit('change', propsRes.value.data);
   }
@@ -636,9 +626,10 @@
 
   function handleTypeChange(
     val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[],
-    record: Record<string, any>
+    record: Record<string, any>,
+    rowIndex: number
   ) {
-    addTableLine(val as string, 'paramType');
+    addTableLine(rowIndex);
     // 根据参数类型自动推断 Content-Type 类型
     if (record.contentType) {
       if (val === 'file') {
@@ -651,24 +642,6 @@
     }
   }
 
-  function handleExpressionTypeChange(
-    val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
-  ) {
-    addTableLine(val as string, 'expressionType');
-  }
-
-  function handleVariableTypeChange(
-    val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
-  ) {
-    addTableLine(val as string, 'variableType');
-  }
-
-  function handleRangeChange(
-    val: string | number | boolean | Record<string, any> | (string | number | boolean | Record<string, any>)[]
-  ) {
-    addTableLine(val as string, 'extractScope');
-  }
-
   /**
    * 获取更多操作按钮列表
    * @param actions 按钮列表
@@ -689,9 +662,9 @@
     emit('moreActionSelect', event, record);
   }
 
-  function handelProjectChange(val: string, projectId: string) {
+  function handelProjectChange(val: string, projectId: string, rowIndex: number) {
     emit('projectChange', projectId);
-    addTableLine(val as string, 'projectId');
+    addTableLine(rowIndex);
   }
 
   /** 断言-文档-Begin */
diff --git a/frontend/src/views/api-test/components/requestComposition/body.vue b/frontend/src/views/api-test/components/requestComposition/body.vue
index 5b526b5a6b..a1ca8c60f0 100644
--- a/frontend/src/views/api-test/components/requestComposition/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/body.vue
@@ -252,7 +252,7 @@
   watch(
     () => props.layout,
     (val) => {
-      heightUsed.value = val === 'horizontal' ? 428 : 428 + props.secondBoxHeight;
+      heightUsed.value = val === 'horizontal' ? 428 : 430 + props.secondBoxHeight;
     },
     {
       immediate: true,
@@ -263,7 +263,7 @@
     () => props.secondBoxHeight,
     (val) => {
       if (props.layout === 'vertical') {
-        heightUsed.value = 428 + val;
+        heightUsed.value = 430 + val;
       }
     },
     {
@@ -327,10 +327,15 @@
    * 批量参数代码转换为参数表格数据
    */
   function handleBatchParamApply(resultArr: any[]) {
+    const files = currentTableParams.value.filter((item) => item.paramType === RequestParamsType.FILE);
     if (resultArr.length < currentTableParams.value.length) {
-      currentTableParams.value.splice(0, currentTableParams.value.length - 1, ...resultArr);
+      currentTableParams.value.splice(0, currentTableParams.value.length - 1, ...files, ...resultArr);
     } else {
-      currentTableParams.value = [...resultArr, currentTableParams.value[currentTableParams.value.length - 1]];
+      currentTableParams.value = [
+        ...files,
+        ...resultArr,
+        currentTableParams.value[currentTableParams.value.length - 1],
+      ];
     }
     emit('change');
   }
diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index 72ed487c1d..2c87ccc28e 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/frontend/src/views/api-test/components/requestComposition/index.vue
@@ -676,7 +676,7 @@
         headers: requestVModel.value.headers.filter((e, i) => i !== requestVModel.value.headers.length - 1), // 去掉最后一行空行
         method: requestVModel.value.method,
         otherConfig: requestVModel.value.otherConfig,
-        path: requestVModel.value.url,
+        path: requestVModel.value.url || requestVModel.value.path,
         query: requestVModel.value.query.filter((e, i) => i !== requestVModel.value.query.length - 1), // 去掉最后一行空行
         rest: requestVModel.value.rest.filter((e, i) => i !== requestVModel.value.rest.length - 1), // 去掉最后一行空行
         url: requestVModel.value.url,
@@ -762,6 +762,7 @@
         ...makeRequestParams(),
         protocol: requestVModel.value.protocol,
         method: isHttpProtocol.value ? requestVModel.value.method : requestVModel.value.protocol,
+        path: isHttpProtocol.value ? requestVModel.value.url || requestVModel.value.path : undefined,
       });
       Message.success(t('common.updateSuccess'));
       requestVModel.value.unSaved = false;
diff --git a/frontend/src/views/api-test/components/requestComposition/setting.vue b/frontend/src/views/api-test/components/requestComposition/setting.vue
index 7fc1ecd470..4a8e681d80 100644
--- a/frontend/src/views/api-test/components/requestComposition/setting.vue
+++ b/frontend/src/views/api-test/components/requestComposition/setting.vue
@@ -42,19 +42,19 @@
         />
       </a-form-item> -->
       <a-form-item :label="t('apiTestDebug.redirect')">
-        <a-radio
+        <a-checkbox
           v-model:model-value="settingForm.followRedirects"
           @change="(val) => handleFollowRedirectsChange(val as boolean)"
         >
           {{ t('apiTestDebug.follow') }}
-        </a-radio>
-        <a-radio
+        </a-checkbox>
+        <a-checkbox
           v-model:model-value="settingForm.autoRedirects"
           class="ml-[24px]"
           @change="val => handleAutoRedirectsChange(val as boolean)"
         >
           {{ t('apiTestDebug.auto') }}
-        </a-radio>
+        </a-checkbox>
       </a-form-item>
     </a-form>
   </div>