feat(接口测试): 接口测试参数名称和参数值交互调整

frontend/src/components/business/ms-params-input/index.vue

@@ -231,6 +231,11 @@
           class="ms-params-input-suffix-icon"
           @click.stop="openParamSetting"
         />
+        <MsIcon
+          type="icon-icon_full_screen_one"
+          class="ms-params-input-suffix-icon ml-[8px]"
+          @click.stop="emit('setParams')"
+        />
       </template>
       <template #option="{ data }">
         <div class="w-[350px]">
@@ -281,6 +286,7 @@
     (e: 'change', val: string): void;
     (e: 'dblclick'): void;
     (e: 'apply', val: string): void;
+    (e: 'setParams'): void;
   }>();
 
   const { t } = useI18n();

frontend/src/components/pure/ms-json-schema/index.vue

@@ -85,7 +85,7 @@
         v-model:value="record.example"
         size="medium"
         :disabled="props.disabled"
-        @dblclick="() => quickInputParams(record)"
+        @set-params="() => quickInputParams(record)"
         @change="emitChange('exampleInput')"
       />
     </template>

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

@@ -202,4 +202,5 @@ export default {
   'common.gotIt': 'Got it',
   'common.inputPleaseEnterTags': 'Please enter the update tag enter add, not more than 64 characters',
   'common.cutSuccess': 'Cut successfully',
+  'common.copySuccessToClipboard': 'Copied to clipboard',
 };

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

@@ -201,4 +201,5 @@ export default {
   'common.gotIt': '知道了',
   'common.inputPleaseEnterTags': '请输入更新标签回车添加，不得超过64字符',
   'common.cutSuccess': '剪切成功',
+  'common.copySuccessToClipboard': '已复制到剪切板',
 };

frontend/src/views/api-test/components/condition/content.vue

@@ -237,6 +237,7 @@
                 required: false,
               }"
               :selectable="false"
+              :show-quick-copy="props.showQuickCopy"
               @change="() => emit('change')"
             />
             <MsCodeEditor
@@ -323,6 +324,7 @@
             :columns="sqlSourceColumns"
             :selectable="false"
             :default-param-item="defaultKeyValueParamItem"
+            :show-quick-copy="props.showQuickCopy"
             @change="handleSqlSourceParamTableChange"
           />
         </div>
@@ -378,6 +380,7 @@
         :selectable="false"
         :scroll="{ x: '700px' }"
         :response="props.response"
+        :show-quick-copy="props.showQuickCopy"
         @change="handleExtractParamTableChange"
         @more-action-select="(e,r)=> handleExtractParamMoreActionSelect(e,r as ExpressionConfig)"
       >
@@ -537,6 +540,7 @@
       totalList?: ExecuteConditionProcessor[]; // 总列表
       sqlCodeEditorHeight?: string; // sql脚本编辑器高度
       scriptCodeEditorHeight?: string; // 脚本的高度
+      showQuickCopy?: boolean; // 显示快捷复制icon
     }>(),
     {
       showAssociatedScene: false,

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

@@ -43,6 +43,7 @@
       :show-pre-post-request="props.showPrePostRequest"
       :request-radio-text-props="props.requestRadioTextProps"
       :sql-code-editor-height="props.sqlCodeEditorHeight"
+      :show-quick-copy="props.showQuickCopy"
       @copy="copyListItem"
       @delete="deleteListItem"
       @change="changeHandler"
@@ -73,6 +74,7 @@
       showAssociatedScene?: boolean;
       showPrePostRequest?: boolean; // 是否展示前后置请求忽略选项
       sqlCodeEditorHeight?: string;
+      showQuickCopy?: boolean; // 显示快捷复制icon
     }>(),
     {
       showAssociatedScene: false,

frontend/src/views/api-test/components/paramTable.vue

@@ -124,9 +124,17 @@
           v-model:model-value="record[columnConfig.dataIndex as string]"
           :disabled="props.disabledExceptParam || columnConfig.disabledColumn"
           :placeholder="t('apiTestDebug.commonPlaceholder')"
-          class="ms-form-table-input ms-form-table-input--hasPlaceholder"
+          class="ms-form-table-input ms-params-input ms-form-table-input--hasPlaceholder"
           @input="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
-        />
+        >
+          <template v-if="props.showQuickCopy" #suffix>
+            <MsIcon
+              type="icon-icon_copy_outlined"
+              class="ms-params-input-suffix-icon"
+              @click="copyParamsName(record[columnConfig.dataIndex as string])"
+            />
+          </template>
+        </a-input>
       </a-popover>
     </template>
     <template #name="{ record, columnConfig, rowIndex }">
@@ -149,7 +157,15 @@
           :placeholder="t('apiTestDebug.commonPlaceholder')"
           class="ms-form-table-input ms-form-table-input--hasPlaceholder"
           @input="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
-        />
+        >
+          <template v-if="props.showQuickCopy" #suffix>
+            <MsIcon
+              type="icon-icon_copy_outlined"
+              class="ms-params-input-suffix-icon"
+              @click="copyParamsName(record[columnConfig.dataIndex as string])"
+            />
+          </template>
+        </a-input>
       </a-popover>
     </template>
     <!-- 参数类型 -->
@@ -268,8 +284,8 @@
         v-model:value="record.value"
         :disabled="props.disabledParamValue"
         @change="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
-        @dblclick="() => quickInputParams(record)"
         @apply="() => addTableLine(rowIndex, columnConfig.addLineDisabled)"
+        @set-params="() => quickInputParams(record)"
       />
     </template>
     <!-- 文件 -->
@@ -588,7 +604,8 @@
 </template>
 
 <script async setup lang="ts">
-  import { TableColumnData, TableData } from '@arco-design/web-vue';
+  import { useClipboard } from '@vueuse/core';
+  import { Message, TableColumnData, TableData } from '@arco-design/web-vue';
   import { cloneDeep } from 'lodash-es';
 
   import { NO_CHECK } from '@/components/pure/ms-advance-filter/index';
@@ -624,6 +641,7 @@
   // 异步加载组件
   const MsAddAttachment = defineAsyncComponent(() => import('@/components/business/ms-add-attachment/index.vue'));
   const MsParamsInput = defineAsyncComponent(() => import('@/components/business/ms-params-input/index.vue'));
+  const { copy, isSupported } = useClipboard({ legacy: true });
 
   export interface ParamTableColumn extends FormTableColumn {
     isAutoComplete?: boolean; // 用于 key 列区分是否是请求/响应头联想输入
@@ -674,6 +692,7 @@
       deleteIntercept?: (record: any, deleteCall: () => void) => void; // 删除行拦截器
       typeChangeIntercept?: (record: any, doChange: () => void) => void; // type 列切换拦截
       enableChangeIntercept?: (record: any, val: string | number | boolean) => boolean | Promise<boolean>; // enable 列切换拦截
+      showQuickCopy?: boolean; // 显示快捷复制icon
     }>(),
     {
       params: () => [],
@@ -1206,6 +1225,14 @@
     record[item.dataIndex as string] = val;
   }
 
+  function copyParamsName(value: string) {
+    const copyValue = `\${${value}}`;
+    if (isSupported) {
+      copy(copyValue);
+      Message.info(t('common.copySuccessToClipboard'));
+    }
+  }
+
   const isDisabledCondition = ref([NO_CHECK.value]);
 
   defineExpose({

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

@@ -7,6 +7,7 @@
     :response="props.response"
     :disabled="props.disabled"
     :sql-code-editor-height="props.sqlCodeEditorHeight"
+    show-quick-copy
     @change="emit('change')"
   >
     <template v-if="$slots.dropdownAppend" #dropdownAppend>

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

@@ -6,6 +6,7 @@
     :condition-types="conditionTypes"
     :sql-code-editor-height="props.sqlCodeEditorHeight"
     add-text="apiTestDebug.precondition"
+    show-quick-copy
     @change="emit('change')"
   >
     <template v-if="$slots.dropdownAppend" #dropdownAppend>

frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue

@@ -74,7 +74,7 @@
                   set-default-class
                   :disabled="props.disabled"
                   @change="() => addMatchRule(idx)"
-                  @dblclick="quickInputParams(item)"
+                  @set-params="quickInputParams(item)"
                   @apply="() => addMatchRule(idx)"
                 />
               </a-form-item>

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

@@ -27,6 +27,7 @@
     :default-param-item="defaultNormalParamItem"
     :draggable="false"
     :selectable="false"
+    show-quick-copy
     @change="handleCommonVariablesChange"
     @batch-add="() => (batchAddKeyValVisible = true)"
   />

frontend/src/views/project-management/environmental/components/allParams/index.vue

@@ -19,6 +19,7 @@
     show-setting
     :selectable="true"
     :default-param-item="defaultParamItem"
+    show-quick-copy
     @change="handleParamTableChange"
     @batch-add="batchAddKeyValVisible = true"
   />

frontend/src/views/project-management/environmental/components/envParams/PostTab.vue

@@ -7,6 +7,7 @@
     :show-associated-scene="props.showAssociatedScene"
     :show-pre-post-request="props.showPrePostRequest"
     :request-radio-text-props="props.requestRadioTextProps"
+    show-quick-copy
   >
   </condition>
 </template>

frontend/src/views/project-management/environmental/components/envParams/PreTab.vue

@@ -7,6 +7,7 @@
     :show-associated-scene="props.showAssociatedScene"
     :show-pre-post-request="props.showPrePostRequest"
     :request-radio-text-props="props.requestRadioTextProps"
+    show-quick-copy
   >
   </condition>
 </template>