feat(接口测试): Mock调整

frontend/src/components/business/ms-menu/index.vue

@@ -394,17 +394,18 @@
               class={['flex w-full items-center justify-between', collapsed.value ? 'h-[56px] w-[56px]' : '']}
               key="personalInfo"
             >
-              {collapsed.value ? (
+              {
-                <div class="relative flex h-full items-center justify-center hover:!bg-transparent">
+                <div
-                  <MsAvatar avatar={userStore.avatar} size={30} class="hover:!bg-transparent" />
+                  class={[
+                    collapsed.value
+                      ? 'relative flex h-full items-center justify-center hover:!bg-transparent'
+                      : 'relative flex items-center gap-[8px] hover:!bg-transparent',
+                  ]}
+                >
+                  <MsAvatar is-user size={20} class="!mr-0 hover:!bg-transparent" />
+                  {collapsed.value ? null : userStore.name}
                 </div>
-              ) : (
+              }
-                <div class="relative flex items-center gap-[8px] hover:!bg-transparent">
-                  <MsAvatar avatar={userStore.avatar} size={20} />
-                  {userStore.name}
-                </div>
-              )}
-
               {collapsed.value ? null : <icon-caret-down class="!m-0" />}
             </a-menu-item>
           </a-trigger>

frontend/src/components/pure/ms-avatar/index.vue

@@ -1,6 +1,6 @@
 <template>
   <MsIcon
-    v-if="props.avatar === 'default' || props.avatar === null"
+    v-if="innerAvatar === 'default' || innerAvatar === null"
     type="icon-icon_that_person"
     :size="props.size"
     class="text-[var(--color-text-4)]"
@@ -9,13 +9,13 @@
     }"
   />
   <a-avatar
-    v-else-if="props.avatar === 'word'"
+    v-else-if="innerAvatar === 'word'"
     :size="props.size"
     class="bg-[rgb(var(--primary-1))] text-[rgb(var(--primary-6))]"
   >
     <slot>{{ props.word?.substring(0, 4) || userStore.name?.substring(0, 4) }}</slot>
   </a-avatar>
-  <a-avatar v-else :image-url="avatar" :size="props.size"></a-avatar>
+  <a-avatar v-else :image-url="innerAvatar" :size="props.size"></a-avatar>
 </template>
 
 <script setup lang="ts">
@@ -30,12 +30,23 @@
       avatar?: 'default' | 'word' | string;
       size?: number;
       word?: string; // 用于显示文字头像
+      isUser?: boolean; // 是否是登录用户头像
     }>(),
     {
       avatar: 'default',
       size: 40,
     }
   );
+
+  const innerAvatar = ref(props.avatar);
+
+  watchEffect(() => {
+    if (props.isUser) {
+      innerAvatar.value = userStore.avatar || 'default';
+    } else {
+      innerAvatar.value = props.avatar;
+    }
+  });
 </script>
 
 <style lang="less" scoped></style>

frontend/src/models/apiTest/mock.ts

@@ -35,6 +35,7 @@ export interface MockResponse {
   useApiResponse: boolean;
   apiResponseId?: string; // useApiResponse 为 true 时必填
   body: ResponseDefinitionBody;
+  delay: number;
 }
 // mock 信息-请求通用匹配规则
 export interface MockMatchRuleCommon {

frontend/src/views/api-test/components/config.ts

@@ -342,6 +342,7 @@ export const mockDefaultParams: MockParams = {
         sendAsBody: false,
       },
     },
+    delay: 0,
   },
   apiDefinitionId: '',
   uploadFileIds: [],

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

@@ -112,6 +112,9 @@
         </a-select>
         <apiMethodName v-else :method="record.method" is-tag />
       </template>
+      <template #caseTotal="{ record }">
+        {{ record.caseTotal }}
+      </template>
       <template #status="{ record }">
         <a-select
           v-if="hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE'])"
@@ -449,6 +452,21 @@
       width: 200,
       showDrag: true,
     },
+    {
+      title: 'apiTestManagement.belongModule',
+      dataIndex: 'moduleName',
+      showTooltip: true,
+      width: 200,
+      showDrag: true,
+    },
+    {
+      title: 'apiTestManagement.caseTotal',
+      dataIndex: 'caseTotal',
+      showTooltip: true,
+      width: 100,
+      showDrag: true,
+      slotName: 'caseTotal',
+    },
     {
       title: 'common.tag',
       dataIndex: 'tags',

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

@@ -339,6 +339,12 @@
       const preActiveApiTabId = activeApiTab.value.id;
       let loadedApiTab = apiTabs.value[isLoadedTabIndex] as RequestParam;
       if (isDebugMock) {
+        const mockEnvId = appStore.envList.find((e) => e.mock)?.id;
+        if (mockEnvId) {
+          appStore.showLoading();
+          await appStore.setEnvConfig(mockEnvId);
+          appStore.hideLoading();
+        }
         loadedApiTab = {
           ...loadedApiTab,
           ...(apiInfo as ApiDefinitionDetail).request,
@@ -372,6 +378,10 @@
       }
       let { request } = res;
       if (isDebugMock) {
+        const mockEnvId = appStore.envList.find((e) => e.mock)?.id;
+        if (mockEnvId) {
+          await appStore.setEnvConfig(mockEnvId);
+        }
         request = {
           ...res.request,
           ...(apiInfo as ApiDefinitionDetail).request,

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

@@ -10,6 +10,7 @@
     :ok-loading="loading"
     no-content-padding
     unmount-on-close
+    @continue="() => handleSave(true)"
     @confirm="handleSave"
     @cancel="handleCancel"
     @close="handleCancel"
@@ -227,7 +228,7 @@
 
   import { ResponseDefinition } from '@/models/apiTest/common';
   import { MockParams } from '@/models/apiTest/mock';
-  import { RequestBodyFormat, RequestComposition } from '@/enums/apiEnum';
+  import { RequestBodyFormat, RequestComposition, RequestParamsType } from '@/enums/apiEnum';
 
   import {
     defaultHeaderParamsItem,
@@ -499,7 +500,9 @@
       // form-data 的匹配规则含有文件类型，特殊处理
       const formDataMatch = res.mockMatchRule.body.formDataBody.matchRules.map((item) => {
         const newParamType =
-          currentBodyKeyOptions.value.find((e) => e.value === item.key)?.paramType || defaultMatchRuleItem.paramType;
+          currentBodyKeyOptions.value.find((e) => e.value === item.key)?.paramType || item.files
+            ? RequestParamsType.FILE
+            : defaultMatchRuleItem.paramType;
         item.paramType = newParamType;
         item.files = item.files || [];
         return item;
@@ -535,6 +538,15 @@
         appendDefaultMatchRuleItem();
       }
       isEdit.value = !!props.isEditMode;
+      if (mockDetail.value.mockMatchRule.body.bodyType !== RequestBodyFormat.NONE) {
+        activeTab.value = RequestComposition.BODY;
+      } else if (mockDetail.value.mockMatchRule.header.matchRules.length > 0) {
+        activeTab.value = RequestComposition.HEADER;
+      } else if (mockDetail.value.mockMatchRule.query) {
+        activeTab.value = RequestComposition.QUERY;
+      } else if (mockDetail.value.mockMatchRule.rest) {
+        activeTab.value = RequestComposition.REST;
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -612,7 +624,7 @@
     handleCancel();
   }
 
-  async function handleSave() {
+  async function handleSave(isContinue = false) {
     try {
       loading.value = true;
       const { body } = mockDetail.value.mockMatchRule;
@@ -696,7 +708,11 @@
         Message.success(t('common.createSuccess'));
       }
       emit('addDone');
-      handleCancel();
+      if (isContinue) {
+        mockDetail.value = makeDefaultParams();
+      } else {
+        handleCancel();
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);

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

@@ -2,7 +2,7 @@
   <a-form ref="formRef" :model="formModel" layout="vertical">
     <a-spin :loading="loading" class="block">
       <div
-        v-if="matchRules.length > 0"
+        v-if="matchRules.length > 0 || !disabled"
         :class="`flex ${
           matchRules.length > 1 ? 'items-stretch' : 'items-center'
         } gap-[16px] bg-[var(--color-text-n9)] p-[12px]`"
@@ -30,6 +30,7 @@
                   :placeholder="t('apiTestDebug.paramName')"
                   :options="props.keyOptions"
                   allow-search
+                  allow-create
                   @change="(val) => selectedKey(item, idx)"
                 >
                 </a-select>

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

@@ -1,9 +1,23 @@
 <template>
   <a-spin :loading="loading" class="block">
     <div class="mt-[16px] font-medium">{{ t('apiTestManagement.responseContent') }}</div>
-    <div class="mt-[8px] flex items-center gap-[4px]">
+    <div class="mt-[8px] flex items-center gap-[16px]">
-      <a-switch v-model:model-value="mockResponse.useApiResponse" size="small" :disabled="props.disabled"></a-switch>
+      <div class="flex items-center gap-[4px]">
-      {{ t('mockManagement.followDefinition') }}
+        <a-switch
+          v-model:model-value="mockResponse.useApiResponse"
+          size="small"
+          :disabled="props.disabled"
+          @change="handleUseApiResponseChange"
+        ></a-switch>
+        {{ t('mockManagement.followDefinition') }}
+      </div>
+      <a-select
+        v-if="mockResponse.useApiResponse"
+        v-model:model-value="mockResponse.apiResponseId"
+        :options="mockResponseOptions"
+        class="w-[150px]"
+        :disabled="props.disabled"
+      ></a-select>
     </div>
     <template v-if="!mockResponse.useApiResponse">
       <MsTab
@@ -59,7 +73,6 @@
           :columns="jsonSchemaColumns"
         /> -->
             <MsCodeEditor
-              ref="responseEditorRef"
               v-model:model-value="currentBodyCode"
               :language="currentCodeLanguage"
               theme="vs"
@@ -125,23 +138,156 @@
           @change="handleResponseTableChange"
         />
         <a-select
-          v-else
+          v-else-if="activeTab === ResponseComposition.CODE"
           v-model:model-value="mockResponse.statusCode"
           :options="statusCodeOptions"
           class="w-[200px]"
           :disabled="props.disabled"
           @change="() => emit('change')"
         />
+        <a-input-number
+          v-else
+          v-model:model-value="mockResponse.delay"
+          :disabled="props.disabled"
+          mode="button"
+          :step="100"
+          :precision="0"
+          :max="600000"
+          :min="0"
+          class="w-[200px]"
+        >
+          <template #suffix> ms </template>
+        </a-input-number>
+      </div>
+    </template>
+    <template v-else-if="currentSelectedDefinitionResponse">
+      <MsTab
+        v-model:active-key="definitionActiveTab"
+        :content-tab-list="responseCompositionTabList.filter((e) => e.value !== 'DELAY')"
+        class="no-content relative my-[8px] border-b"
+        :show-badge="false"
+      />
+      <div class="mt-[8px]">
+        <template v-if="definitionActiveTab === ResponseComposition.BODY">
+          <div class="mb-[8px] flex items-center justify-between">
+            <a-radio-group
+              v-model:model-value="currentSelectedDefinitionResponse.body.bodyType"
+              type="button"
+              size="small"
+              disabled
+              @change="(val) => emit('change')"
+            >
+              <a-radio
+                v-for="item of ResponseBodyFormat"
+                v-show="item !== ResponseBodyFormat.NONE"
+                :key="item"
+                :value="item"
+              >
+                {{ ResponseBodyFormat[item].toLowerCase() }}
+              </a-radio>
+            </a-radio-group>
+            <!-- <div v-if="currentSelectedDefinitionResponse.body.bodyType === ResponseBodyFormat.JSON" class="ml-auto flex items-center">
+          <a-radio-group
+            v-model:model-value="currentSelectedDefinitionResponse.body.jsonBody.enableJsonSchema"
+            size="mini"
+            @change="emit('change')"
+          >
+            <a-radio :value="false">Json</a-radio>
+            <a-radio class="mr-0" :value="true"> Json Schema </a-radio>
+          </a-radio-group>
+          <div class="flex items-center gap-[8px]">
+            <a-switch v-model:model-value="currentSelectedDefinitionResponse.body.jsonBody.enableTransition" size="small" type="line" />
+            {{ t('apiTestManagement.dynamicConversion') }}
+          </div>
+        </div> -->
+          </div>
+          <div
+            v-if="
+              [ResponseBodyFormat.JSON, ResponseBodyFormat.XML, ResponseBodyFormat.RAW].includes(
+                currentSelectedDefinitionResponse.body.bodyType
+              )
+            "
+          >
+            <!-- <MsJsonSchema
+          v-if="currentSelectedDefinitionResponse.body.jsonBody.enableJsonSchema"
+          :data="currentSelectedDefinitionResponse.body.jsonBody.jsonSchema"
+          :columns="jsonSchemaColumns"
+        /> -->
+            <MsCodeEditor
+              v-model:model-value="currentSelectedDefinitionBodyCode"
+              :language="currentSelectedDefinitionCodeLanguage"
+              theme="vs"
+              :show-full-screen="false"
+              :show-theme-change="false"
+              :show-language-change="false"
+              :show-charset-change="false"
+              show-code-format
+              read-only
+            >
+            </MsCodeEditor>
+          </div>
+          <div v-else>
+            <div class="mb-[16px] flex justify-between gap-[8px] bg-[var(--color-text-n9)] p-[12px]">
+              <a-input
+                v-model:model-value="currentSelectedDefinitionResponse.body.binaryBody.description"
+                :placeholder="t('common.desc')"
+                :max-length="255"
+                disabled
+              />
+              <MsAddAttachment
+                v-model:file-list="fileList"
+                mode="input"
+                :multiple="false"
+                :fields="{
+                  id: 'fileId',
+                  name: 'fileName',
+                }"
+                disabled
+                @change="handleFileChange"
+              />
+            </div>
+            <div class="flex items-center">
+              <a-switch
+                v-model:model-value="currentSelectedDefinitionResponse.body.binaryBody.sendAsBody"
+                class="mr-[8px]"
+                size="small"
+                type="line"
+                disabled
+              ></a-switch>
+              <span>{{ t('apiTestDebug.sendAsMainText') }}</span>
+              <a-tooltip position="right">
+                <template #content>
+                  <div>{{ t('apiTestDebug.sendAsMainTextTip1') }}</div>
+                  <div>{{ t('apiTestDebug.sendAsMainTextTip2') }}</div>
+                </template>
+                <icon-question-circle
+                  class="ml-[4px] text-[var(--color-text-4)] hover:text-[rgb(var(--primary-5))]"
+                  size="16"
+                />
+              </a-tooltip>
+            </div>
+          </div>
+        </template>
+        <paramTable
+          v-else-if="definitionActiveTab === ResponseComposition.HEADER"
+          :params="filterKeyValParams(currentSelectedDefinitionResponse.headers, defaultKeyValueParamItem).validParams"
+          :columns="columns"
+          :default-param-item="defaultKeyValueParamItem"
+          :selectable="false"
+          disabled-param-value
+          disabled-except-param
+          @change="handleResponseTableChange"
+        />
+        <a-select
+          v-else-if="definitionActiveTab === ResponseComposition.CODE"
+          v-model:model-value="currentSelectedDefinitionResponse.statusCode"
+          :options="statusCodeOptions"
+          class="w-[200px]"
+          disabled
+          @change="() => emit('change')"
+        />
       </div>
     </template>
-    <div v-else class="mt-[8px]">
-      <a-select
-        v-model:model-value="mockResponse.apiResponseId"
-        :options="mockResponseOptions"
-        class="w-[150px]"
-        :disabled="props.disabled"
-      ></a-select>
-    </div>
   </a-spin>
 </template>
 
@@ -162,6 +308,7 @@
   import { ResponseBodyFormat, ResponseComposition } from '@/enums/apiEnum';
 
   import { defaultKeyValueParamItem, statusCodes } from '@/views/api-test/components/config';
+  import { filterKeyValParams } from '@/views/api-test/components/utils';
 
   const props = defineProps<{
     definitionResponses: ResponseItem[];
@@ -182,6 +329,7 @@
     props.definitionResponses.map((item) => ({
       label: `${t(item.label || item.name)}(${item.statusCode})`,
       value: item.id,
+      defaultFlag: item.defaultFlag,
     }))
   );
 
@@ -198,6 +346,10 @@
       label: t('apiTestManagement.responseCode'),
       value: ResponseComposition.CODE,
     },
+    {
+      label: t('mockManagement.responseDelay'),
+      value: 'DELAY',
+    },
   ];
 
   const statusCodeOptions = statusCodes.map((e) => ({
@@ -300,6 +452,12 @@
     }
   }
 
+  function handleUseApiResponseChange(val: string | number | boolean) {
+    if (val) {
+      mockResponse.value.apiResponseId = (mockResponseOptions.value.find((e) => e.defaultFlag)?.value as string) || '';
+    }
+  }
+
   watch(
     () => mockResponse.value.body.binaryBody.file?.fileId,
     () => {
@@ -312,6 +470,48 @@
       immediate: true,
     }
   );
+
+  const currentSelectedDefinitionResponse = computed(() =>
+    props.definitionResponses.find((e) => e.id === mockResponse.value.apiResponseId)
+  );
+  const definitionActiveTab = ref(ResponseComposition.BODY);
+  // 当前显示的代码
+  const currentSelectedDefinitionBodyCode = computed({
+    get() {
+      if (currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.JSON) {
+        return currentSelectedDefinitionResponse.value.body.jsonBody.jsonValue;
+      }
+      if (currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.XML) {
+        return currentSelectedDefinitionResponse.value.body.xmlBody.value;
+      }
+      return currentSelectedDefinitionResponse.value?.body.rawBody.value;
+    },
+    set(val) {
+      if (
+        currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.JSON &&
+        currentSelectedDefinitionResponse.value.body.jsonBody
+      ) {
+        currentSelectedDefinitionResponse.value.body.jsonBody.jsonValue = val || '';
+      } else if (
+        currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.XML &&
+        currentSelectedDefinitionResponse.value.body.xmlBody
+      ) {
+        currentSelectedDefinitionResponse.value.body.xmlBody.value = val || '';
+      } else if (currentSelectedDefinitionResponse.value) {
+        currentSelectedDefinitionResponse.value.body.rawBody.value = val || '';
+      }
+    },
+  });
+  // 当前代码编辑器的语言
+  const currentSelectedDefinitionCodeLanguage = computed(() => {
+    if (currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.JSON) {
+      return LanguageEnum.JSON;
+    }
+    if (currentSelectedDefinitionResponse.value?.body.bodyType === ResponseBodyFormat.XML) {
+      return LanguageEnum.XML;
+    }
+    return LanguageEnum.PLAINTEXT;
+  });
 </script>
 
 <style lang="less" scoped>

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

@@ -163,6 +163,7 @@ export default {
   'apiTestManagement.script': 'Script',
   'apiTestManagement.variable': 'Variable',
   'apiTestManagement.regex': 'Regular Expression',
+  'apiTestManagement.caseTotal': 'Case total',
   'case.execute.selectEnv': 'Select Environment',
   'case.execute.defaultEnv': 'Default Environment',
   'case.execute.newEnv': 'New Environment',
@@ -248,4 +249,5 @@ export default {
   'mockManagement.batchEdit': 'Batch Edit',
   'mockManagement.batchDelete': 'Batch Delete',
   'mockManagement.noMatchRules': 'No matching rules found',
+  'mockManagement.responseDelay': 'Response delay',
 };

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

@@ -156,6 +156,7 @@ export default {
   'apiTestManagement.script': '脚本',
   'apiTestManagement.variable': '变量',
   'apiTestManagement.regex': '正则表达式',
+  'apiTestManagement.caseTotal': '用例数',
   'case.execute.selectEnv': '环境选择',
   'case.execute.defaultEnv': '默认环境',
   'case.execute.newEnv': '新环境',
@@ -238,4 +239,5 @@ export default {
   'mockManagement.batchEdit': '批量编辑',
   'mockManagement.batchDelete': '批量删除',
   'mockManagement.noMatchRules': '无该类匹配规则',
+  'mockManagement.responseDelay': '响应延时',
 };

frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue

@@ -1161,7 +1161,7 @@
         url: res.path,
         name: res.name, // request里面还有个name但是是null
         resourceId: res.id,
-        stepId: props.step?.uniqueId || '',
+        stepId: props.step?.id || '',
         responseActiveTab: ResponseComposition.BODY,
         ...parseRequestBodyResult,
       };

frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue

@@ -985,7 +985,7 @@
         stepName: activeStep.value?.name || res.name,
         name: res.name, // request里面还有个name但是是null
         resourceId: res.id,
-        stepId: props.request?.stepId || '',
+        stepId: activeStep.value?.id || '',
         ...parseRequestBodyResult,
       };
       nextTick(() => {