fix(接口测试): api定义的基本信息放到tab里&响应内容可以切换布局

frontend/src/enums/apiEnum.ts

@@ -11,6 +11,7 @@ export enum RequestMethods {
 }
 // 接口组成部分
 export enum RequestComposition {
+  BASE_INFO = 'BASE_INFO',
   PLUGIN = 'PLUGIN',
   HEADER = 'HEADER',
   BODY = 'BODY',

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

@@ -168,18 +168,6 @@
       />
     </div>
     <div ref="splitContainerRef" class="request-and-response h-[calc(100%-100px)]">
-      <MsSplitBox
-        ref="horizontalSplitBoxRef"
-        :size="!props.isCase && props.isDefinition ? 0.7 : 1"
-        :max="props.isDefinition && !props.isCase ? 0.9 : 1"
-        :min="props.isDefinition && !props.isCase ? 0.7 : 1"
-        :disabled="props.isCase && !props.isDefinition"
-        :class="props.isCase && !props.isDefinition ? 'hidden-second' : ''"
-        :first-container-class="props.isCase && !props.isDefinition ? 'border-r-0' : ''"
-        direction="horizontal"
-        expand-direction="right"
-      >
-        <template #first>
       <MsSplitBox
         ref="verticalSplitBoxRef"
         v-model:size="splitBoxSize"
@@ -198,6 +186,13 @@
               }`"
             >
               <div class="tab-pane-container">
+                <apiBaseForm
+                  v-if="!props.isCase && props.isDefinition"
+                  v-show="requestVModel.activeTab === RequestComposition.BASE_INFO"
+                  ref="apiBaseFormRef"
+                  v-model:requestVModel="requestVModel"
+                  :select-tree="selectTree"
+                />
                 <a-spin
                   v-show="requestVModel.activeTab === RequestComposition.PLUGIN"
                   :loading="pluginLoading"
@@ -311,124 +306,6 @@
           />
         </template>
       </MsSplitBox>
-        </template>
-        <template v-if="!props.isCase && props.isDefinition" #second>
-          <div class="p-[16px]">
-            <!-- TODO:第一版没有模板 -->
-            <!-- <MsFormCreate v-model:api="fApi" :rule="currentApiTemplateRules" :option="options" /> -->
-            <a-form ref="activeApiTabFormRef" :model="requestVModel" layout="vertical">
-              <a-form-item
-                field="name"
-                :label="t('apiTestManagement.apiName')"
-                class="mb-[16px]"
-                :rules="[{ required: true, message: t('apiTestManagement.apiNameRequired') }]"
-              >
-                <a-input
-                  v-model:model-value="requestVModel.name"
-                  :max-length="255"
-                  :placeholder="t('apiTestManagement.apiNamePlaceholder')"
-                  allow-clear
-                  @change="handleActiveApiChange"
-                />
-              </a-form-item>
-              <a-form-item :label="t('apiTestManagement.belongModule')" class="mb-[16px]">
-                <a-tree-select
-                  v-model:modelValue="requestVModel.moduleId"
-                  :data="selectTree as ModuleTreeNode[]"
-                  :field-names="{ title: 'name', key: 'id', children: 'children' }"
-                  :tree-props="{
-                    virtualListProps: {
-                      height: 200,
-                      threshold: 200,
-                    },
-                  }"
-                  allow-search
-                  :filter-tree-node="filterTreeNode"
-                  @change="handleActiveApiChange"
-                >
-                  <template #tree-slot-title="node">
-                    <a-tooltip :content="`${node.name}`" position="tl">
-                      <div class="inline-flex w-full">
-                        <div class="one-line-text w-[240px] text-[var(--color-text-1)]">
-                          {{ node.name }}
-                        </div>
-                      </div>
-                    </a-tooltip>
-                  </template>
-                </a-tree-select>
-              </a-form-item>
-              <a-form-item :label="t('apiTestManagement.apiStatus')" class="mb-[16px]">
-                <a-select
-                  v-model:model-value="requestVModel.status"
-                  :placeholder="t('common.pleaseSelect')"
-                  class="param-input w-full"
-                  @change="handleActiveApiChange"
-                >
-                  <template #label>
-                    <apiStatus :status="requestVModel.status" />
-                  </template>
-                  <a-option v-for="item of Object.values(RequestDefinitionStatus)" :key="item" :value="item">
-                    <apiStatus :status="item" />
-                  </a-option>
-                </a-select>
-              </a-form-item>
-              <a-form-item :label="t('common.tag')" class="mb-[16px]">
-                <MsTagsInput v-model:model-value="requestVModel.tags" @change="handleActiveApiChange" />
-              </a-form-item>
-              <a-form-item :label="t('common.desc')" class="mb-[16px]">
-                <a-textarea
-                  v-model:model-value="requestVModel.description"
-                  :max-length="1000"
-                  @change="handleActiveApiChange"
-                />
-              </a-form-item>
-            </a-form>
-            <!-- TODO:第一版先不做依赖 -->
-            <!-- <div class="mb-[8px] flex items-center">
-                  <div class="text-[var(--color-text-2)]">
-                    {{ t('apiTestManagement.addDependency') }}
-                  </div>
-                  <a-divider margin="4px" direction="vertical" />
-                  <MsButton
-                    type="text"
-                    class="font-medium"
-                    :disabled="requestVModel.preDependency.length === 0 && requestVModel.postDependency.length === 0"
-                    @click="clearAllDependency"
-                  >
-                    {{ t('apiTestManagement.clearSelected') }}
-                  </MsButton>
-                </div>
-                <div class="rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]">
-                  <div class="flex items-center">
-                    <div class="flex items-center gap-[4px] text-[var(--color-text-2)]">
-                      {{ t('apiTestManagement.preDependency') }}
-                      <div class="text-[rgb(var(--primary-5))]">
-                        {{ requestVModel.preDependency.length }}
-                      </div>
-                      {{ t('apiTestManagement.dependencyUnit') }}
-                    </div>
-                    <a-divider margin="8px" direction="vertical" />
-                    <MsButton type="text" class="font-medium" @click="handleDddDependency('pre')">
-                      {{ t('apiTestManagement.addPreDependency') }}
-                    </MsButton>
-                  </div>
-                  <div class="mt-[8px] flex items-center">
-                    <div class="flex items-center gap-[4px] text-[var(--color-text-2)]">
-                      {{ t('apiTestManagement.postDependency') }}
-                      <div class="text-[rgb(var(--primary-5))]">
-                        {{ requestVModel.postDependency.length }}
-                      </div>
-                      {{ t('apiTestManagement.dependencyUnit') }}
-                    </div>
-                    <a-divider margin="8px" direction="vertical" />
-                    <MsButton type="text" class="font-medium" @click="handleDddDependency('post')">
-                      {{ t('apiTestManagement.addPostDependency') }}
-                    </MsButton>
-                  </div>
-                </div> -->
-          </div>
-        </template>
-      </MsSplitBox>
     </div>
   </div>
   <a-modal
@@ -551,7 +428,7 @@
   import setting from './setting.vue';
   import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import apiMethodSelect from '@/views/api-test/components/apiMethodSelect.vue';
-  import apiStatus from '@/views/api-test/components/apiStatus.vue';
+  import apiBaseForm from '@/views/api-test/management/components/management/api/apiBaseForm.vue';
 
   import { getPluginScript, getProtocolList } from '@/api/modules/api-test/common';
   import { addCase } from '@/api/modules/api-test/management';
@@ -580,7 +457,6 @@
     RequestCaseStatus,
     RequestComposition,
     RequestConditionProcessor,
-    RequestDefinitionStatus,
     RequestMethods,
   } from '@/enums/apiEnum';
 
@@ -668,6 +544,13 @@
     }
   }
 
+  // 基本信息tab
+  const baseInfoContentTab = [
+    {
+      value: RequestComposition.BASE_INFO,
+      label: t('apiScenario.baseInfo'),
+    },
+  ];
   // 请求内容公共tabKey
   const commonContentTabKey = [
     RequestComposition.PRECONDITION,
@@ -743,18 +626,22 @@
       if (props.isDefinition) {
         // 接口定义，定义模式隐藏前后置、断言
         return requestVModel.value.mode === 'debug'
-          ? httpContentTabList
+          ? [...baseInfoContentTab, ...httpContentTabList]
-          : httpContentTabList.filter((e) => !commonContentTabKey.includes(e.value));
+          : [...baseInfoContentTab, ...httpContentTabList.filter((e) => !commonContentTabKey.includes(e.value))];
       }
       // 接口调试无断言
       return httpContentTabList.filter((e) => e.value !== RequestComposition.ASSERTION);
     }
     // 插件 tabs
-    if (props.isDefinition) {
+    if (props.isDefinition && !props.isCase) {
       // 接口定义，定义模式隐藏前后置、断言
       return requestVModel.value.mode === 'definition'
-        ? pluginContentTab
+        ? [...baseInfoContentTab, ...pluginContentTab]
-        : [...pluginContentTab, ...httpContentTabList.filter((e) => commonContentTabKey.includes(e.value))];
+        : [
+            ...baseInfoContentTab,
+            ...pluginContentTab,
+            ...httpContentTabList.filter((e) => commonContentTabKey.includes(e.value)),
+          ];
     }
     return [...pluginContentTab, ...httpContentTabList.filter((e) => commonContentTabKey.includes(e.value))];
   });
@@ -1007,7 +894,6 @@
     }
   );
 
-  const horizontalSplitBoxRef = ref<InstanceType<typeof MsSplitBox>>();
   const verticalSplitBoxRef = ref<InstanceType<typeof MsSplitBox>>();
   const isVerticalExpanded = ref(true);
   function handleVerticalExpandChange(val: boolean) {
@@ -1043,16 +929,6 @@
     verticalSplitBoxRef.value?.expand(0.6);
   }
 
-  function handleActiveApiChange() {
-    if (requestVModel.value) {
-      requestVModel.value.unSaved = true;
-    }
-  }
-
-  function filterTreeNode(searchValue, nodeData) {
-    return nodeData.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
-  }
-
   const saveModalVisible = ref(false);
   const saveModalForm = ref({
     name: '',
@@ -1582,7 +1458,7 @@
     }
   }
 
-  const activeApiTabFormRef = ref<FormInstance>();
+  const apiBaseFormRef = ref<InstanceType<typeof apiBaseForm>>();
   const isUrlError = ref(false);
   function handleSelect(value: string | number | Record<string, any> | undefined) {
     if (requestVModel.value.url === '' && requestVModel.value.protocol === 'HTTP') {
@@ -1590,10 +1466,9 @@
       return;
     }
     isUrlError.value = false;
-    activeApiTabFormRef.value?.validate(async (errors) => {
+    apiBaseFormRef.value?.formRef?.validate(async (errors) => {
-      console.log('validate');
       if (errors) {
-        horizontalSplitBoxRef.value?.expand();
+        requestVModel.value.activeTab = RequestComposition.BASE_INFO;
       } else {
         switch (value) {
           case 'save':

frontend/src/views/api-test/components/requestComposition/response/index.vue

@@ -24,7 +24,7 @@
               <icon-right :size="8" />
             </MsButton>
           </template>
-          <div v-if="props.isEdit && props.showResponseResultButton" class="ml-[4px] flex items-center">
+          <div v-if="props.isEdit && props.showResponseResultButton" class="ml-[4px] mr-[24px] flex items-center">
             <MsButton
               type="text"
               :class="['font-medium', activeResponseType === 'content' ? '' : '!text-[var(--color-text-n4)]', '!mr-0']"

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

@@ -0,0 +1,145 @@
+<template>
+  <!-- TODO:第一版没有模板 -->
+  <!-- <MsFormCreate v-model:api="fApi" :rule="currentApiTemplateRules" :option="options" /> -->
+  <a-form ref="formRef" :model="requestVModel" layout="vertical">
+    <a-form-item
+      field="name"
+      :label="t('apiTestManagement.apiName')"
+      class="mb-[16px] w-[80%]"
+      :rules="[{ required: true, message: t('apiTestManagement.apiNameRequired') }]"
+    >
+      <a-input
+        v-model:model-value="requestVModel.name"
+        :max-length="255"
+        :placeholder="t('apiTestManagement.apiNamePlaceholder')"
+        allow-clear
+        @change="handleActiveApiChange"
+      />
+    </a-form-item>
+    <a-form-item :label="t('common.desc')" class="mb-[16px] w-[80%]">
+      <a-textarea v-model:model-value="requestVModel.description" :max-length="1000" @change="handleActiveApiChange" />
+    </a-form-item>
+    <a-form-item :label="t('apiTestManagement.belongModule')" class="mb-[16px] w-[436px]">
+      <a-tree-select
+        v-model:modelValue="requestVModel.moduleId"
+        :data="props.selectTree as ModuleTreeNode[]"
+        :field-names="{ title: 'name', key: 'id', children: 'children' }"
+        :tree-props="{
+          virtualListProps: {
+            height: 200,
+            threshold: 200,
+          },
+        }"
+        allow-search
+        :filter-tree-node="filterTreeNode"
+        @change="handleActiveApiChange"
+      >
+        <template #tree-slot-title="node">
+          <a-tooltip :content="`${node.name}`" position="tl">
+            <div class="inline-flex w-full">
+              <div class="one-line-text w-[240px] text-[var(--color-text-1)]">
+                {{ node.name }}
+              </div>
+            </div>
+          </a-tooltip>
+        </template>
+      </a-tree-select>
+    </a-form-item>
+    <a-form-item :label="t('common.tag')" class="mb-[16px] w-[436px]">
+      <MsTagsInput v-model:model-value="requestVModel.tags" @change="handleActiveApiChange" />
+    </a-form-item>
+    <a-form-item :label="t('apiTestManagement.apiStatus')" class="mb-[16px] w-[240px]">
+      <a-select
+        v-model:model-value="requestVModel.status"
+        :placeholder="t('common.pleaseSelect')"
+        @change="handleActiveApiChange"
+      >
+        <template #label>
+          <apiStatus :status="requestVModel.status" />
+        </template>
+        <a-option v-for="item of Object.values(RequestDefinitionStatus)" :key="item" :value="item">
+          <apiStatus :status="item" />
+        </a-option>
+      </a-select>
+    </a-form-item>
+  </a-form>
+  <!-- TODO:第一版先不做依赖 -->
+  <!-- <div class="mb-[8px] flex items-center">
+          <div class="text-[var(--color-text-2)]">
+            {{ t('apiTestManagement.addDependency') }}
+          </div>
+          <a-divider margin="4px" direction="vertical" />
+          <MsButton
+            type="text"
+            class="font-medium"
+            :disabled="requestVModel.preDependency.length === 0 && requestVModel.postDependency.length === 0"
+            @click="clearAllDependency"
+          >
+            {{ t('apiTestManagement.clearSelected') }}
+          </MsButton>
+        </div>
+        <div class="rounded-[var(--border-radius-small)] bg-[var(--color-text-n9)] p-[12px]">
+          <div class="flex items-center">
+            <div class="flex items-center gap-[4px] text-[var(--color-text-2)]">
+              {{ t('apiTestManagement.preDependency') }}
+              <div class="text-[rgb(var(--primary-5))]">
+                {{ requestVModel.preDependency.length }}
+              </div>
+              {{ t('apiTestManagement.dependencyUnit') }}
+            </div>
+            <a-divider margin="8px" direction="vertical" />
+            <MsButton type="text" class="font-medium" @click="handleDddDependency('pre')">
+              {{ t('apiTestManagement.addPreDependency') }}
+            </MsButton>
+          </div>
+          <div class="mt-[8px] flex items-center">
+            <div class="flex items-center gap-[4px] text-[var(--color-text-2)]">
+              {{ t('apiTestManagement.postDependency') }}
+              <div class="text-[rgb(var(--primary-5))]">
+                {{ requestVModel.postDependency.length }}
+              </div>
+              {{ t('apiTestManagement.dependencyUnit') }}
+            </div>
+            <a-divider margin="8px" direction="vertical" />
+            <MsButton type="text" class="font-medium" @click="handleDddDependency('post')">
+              {{ t('apiTestManagement.addPostDependency') }}
+            </MsButton>
+          </div>
+        </div> -->
+</template>
+
+<script setup lang="ts">
+  import { FormInstance } from '@arco-design/web-vue';
+
+  import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
+  import apiStatus from '@/views/api-test/components/apiStatus.vue';
+  import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  import { ModuleTreeNode } from '@/models/common';
+  import { RequestDefinitionStatus } from '@/enums/apiEnum';
+
+  const props = defineProps<{
+    selectTree?: ModuleTreeNode[];
+  }>();
+  const requestVModel = defineModel<RequestParam>('requestVModel', { required: true });
+
+  const { t } = useI18n();
+
+  const formRef = ref<FormInstance>();
+
+  function handleActiveApiChange() {
+    if (requestVModel.value) {
+      requestVModel.value.unSaved = true;
+    }
+  }
+
+  function filterTreeNode(searchValue, nodeData) {
+    return nodeData.name.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
+  }
+
+  defineExpose({
+    formRef,
+  });
+</script>

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

@@ -78,7 +78,6 @@
             v-model:detail-loading="loading"
             v-model:request="activeApiTab"
             :module-tree="props.moduleTree"
-            hide-response-layout-switch
             :create-api="addDefinition"
             :update-api="updateDefinition"
             :execute-api="debugDefinition"

frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue

@@ -78,7 +78,6 @@
           v-model:request="detailForm"
           :is-case="true"
           :api-detail="apiDetailInfo as RequestParam"
-          hide-response-layout-switch
           :upload-temp-file-api="uploadTempFileCase"
           :file-save-as-source-id="detailForm.id"
           :file-module-options-api="getTransferOptionsCase"