feat(接口测试): 接口场景创建参数tab

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

@@ -721,7 +721,7 @@
           if (!item) {
             // 批量添加过来的数据最后一行会是 undefined
             return {
-              ...props.defaultParamItem,
+              ...cloneDeep(props.defaultParamItem),
               id: new Date().getTime() + i,
             };
           }
@@ -743,7 +743,7 @@
         paramsData.value = [
           {
             id, // 默认给时间戳 id，若 props.defaultParamItem 有 id，则覆盖
-            ...props.defaultParamItem,
+            ...cloneDeep(props.defaultParamItem),
             enable: true, // 是否勾选
           },
         ] as any[];

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

@@ -1,7 +1,157 @@
 <template>
-  <div> params </div>
+  <div class="history-container">
+    <a-alert v-if="isShowTip" :show-icon="true" class="mb-[16px]" type="info">
+      {{ t('apiScenario.params.priority') }}
+    </a-alert>
+  </div>
+  <div class="mb-[16px]">
+    <a-radio-group v-model="activeRadio" type="button" size="medium">
+      <a-radio value="convention">{{ t('apiScenario.params.convention') }}</a-radio>
+    </a-radio-group>
+  </div>
+  <div class="mb-[16px] flex items-center justify-between">
+    <a-input-search
+      v-model="searchValue"
+      :placeholder="t('apiScenario.params.searchPlaceholder')"
+      allow-clear
+      class="mr-[8px] w-[240px]"
+      @search="handleSearch"
+      @press-enter="handleSearch"
+    />
+    <batchAddKeyVal
+      :params="innerParams"
+      :default-param-item="defaultHeaderParamsItem"
+      no-param-type
+      @apply="handleBatchParamApply"
+    />
+  </div>
+  <paramTable
+    v-model:params="innerParams"
+    :columns="columns"
+    :default-param-item="defaultParamItem"
+    draggable
+    @change="handleParamTableChange"
+  />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { useI18n } from 'vue-i18n';
+  import { useVModel } from '@vueuse/core';
+
+  import batchAddKeyVal from '@/views/api-test/components/batchAddKeyVal.vue';
+  import paramTable, { ParamTableColumn } from '@/views/api-test/components/paramTable.vue';
+
+  import { defaultHeaderParamsItem } from '@/views/api-test/components/config';
+  import { filterKeyValParams } from '@/views/api-test/components/utils';
+
+  const props = defineProps<{
+    activeKey?: string;
+    params: any[];
+  }>();
+  const emit = defineEmits<{
+    (e: 'update:params', value: any[]): void;
+    (e: 'change'): void; //  数据发生变化
+  }>();
+  const innerParams = useVModel(props, 'params', emit);
+  const isShowTip = ref<boolean>(true);
+  const { t } = useI18n();
+  const activeRadio = ref('convention');
+  const searchValue = ref('');
+  const firstSearch = ref(true);
+  const backupParams = ref(props.params);
+
+  const defaultParamItem = {
+    key: '',
+    paramType: 'CONSTANT',
+    value: '',
+    description: '',
+    tags: [],
+    enable: true,
+  };
+
+  const columns: ParamTableColumn[] = [
+    {
+      title: 'apiScenario.params.name',
+      dataIndex: 'key',
+      slotName: 'key',
+    },
+    {
+      title: 'apiScenario.params.type',
+      dataIndex: 'paramType',
+      slotName: 'paramType',
+      typeOptions: [
+        {
+          label: t('common.constant'),
+          value: 'CONSTANT',
+        },
+        {
+          label: t('common.list'),
+          value: 'LIST',
+        },
+      ],
+      titleSlotName: 'typeTitle',
+    },
+    {
+      title: 'apiScenario.params.paramValue',
+      dataIndex: 'value',
+      slotName: 'value',
+    },
+    {
+      title: 'apiScenario.params.tag',
+      dataIndex: 'tags',
+      slotName: 'tag',
+      width: 200,
+    },
+    {
+      title: 'apiScenario.params.desc',
+      dataIndex: 'description',
+      slotName: 'description',
+    },
+    {
+      title: '',
+      slotName: 'operation',
+      dataIndex: 'operation',
+      width: 50,
+    },
+  ];
+
+  function handleParamTableChange(resultArr: any[], isInit?: boolean) {
+    innerParams.value = [...resultArr];
+    if (!isInit) {
+      emit('change');
+      firstSearch.value = true;
+    }
+  }
+
+  // 搜索
+  function handleSearch() {
+    if (firstSearch.value) {
+      backupParams.value = [...innerParams.value];
+      firstSearch.value = false;
+    }
+    if (!searchValue.value) {
+      innerParams.value = [...backupParams.value];
+    } else {
+      const result = backupParams.value.filter(
+        (item) => item.key.includes(searchValue.value) || item.tags.includes(searchValue.value)
+      );
+      innerParams.value = [...result];
+    }
+  }
+
+  /**
+   * 批量参数代码转换为参数表格数据
+   */
+  function handleBatchParamApply(resultArr: any[]) {
+    const filterResult = filterKeyValParams(innerParams.value, defaultHeaderParamsItem);
+    if (filterResult.lastDataIsDefault) {
+      innerParams.value = [...resultArr, innerParams.value[innerParams.value.length - 1]].filter(Boolean);
+    } else {
+      innerParams.value = resultArr.filter(Boolean);
+    }
+    emit('change');
+  }
+</script>
 
 <style lang="less" scoped></style>

frontend/src/views/api-test/scenario/detail/index.vue

@@ -51,7 +51,7 @@
           :title="t('apiScenario.params')"
           class="px-[24px] py-[16px]"
         >
-          <params v-if="activeKey === ScenarioCreateComposition.PARAMS" />
+          <params v-if="activeKey === ScenarioCreateComposition.PARAMS" v-model:params="allParams" />
         </a-tab-pane>
         <a-tab-pane
           :key="ScenarioCreateComposition.PRE_POST"
@@ -124,6 +124,7 @@
   const quote = defineAsyncComponent(() => import('../components/quote.vue'));
   const setting = defineAsyncComponent(() => import('../components/setting.vue'));
 
+  const allParams = ref<any[]>([]);
   const props = defineProps<{
     detail: RequestParam;
   }>();

frontend/src/views/api-test/scenario/locale/en-US.ts

@@ -23,4 +23,13 @@ export default {
   'apiScenario.changeHistory': 'Change history',
   'apiScenario.dependency': 'Dependencies',
   'apiScenario.quote': 'Reference',
+  'apiScenario.params.convention': 'Convention parameter',
+  'apiScenario.params.searchPlaceholder': 'Search by name or tag',
+  'apiScenario.params.priority':
+    'Variable priority: Temporary parameters>Scene parameters>Environment parameters>Global parameters; Note: Avoid using variables with the same name. When using variables with the same name, scene level CSV has the highest priority',
+  'apiScenario.params.name': 'Variable name',
+  'apiScenario.params.type': 'Type',
+  'apiScenario.params.paramValue': 'Parameter value',
+  'apiScenario.params.tag': 'Tag',
+  'apiScenario.params.desc': 'Description',
 };

frontend/src/views/api-test/scenario/locale/zh-CN.ts

@@ -22,4 +22,13 @@ export default {
   'apiScenario.changeHistory': '变更历史',
   'apiScenario.dependency': '依赖关系',
   'apiScenario.quote': '引用关系',
+  'apiScenario.params.convention': '常规参数',
+  'apiScenario.params.searchPlaceholder': '通过名称或标签搜索',
+  'apiScenario.params.priority':
+    '变量优先级：临时参数>场景参数 >环境参数>全局参数；注: 避免使用同名变量，同名变量时场景级 CSV 优先级最高',
+  'apiScenario.params.name': '变量名称',
+  'apiScenario.params.type': '类型',
+  'apiScenario.params.paramValue': '参数值',
+  'apiScenario.params.tag': '标签',
+  'apiScenario.params.desc': '描述',
 };