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

@@ -169,264 +169,141 @@
     </div>
     <div ref="splitContainerRef" class="request-and-response h-[calc(100%-100px)]">
       <MsSplitBox
-        ref="horizontalSplitBoxRef"
+        ref="verticalSplitBoxRef"
-        :size="!props.isCase && props.isDefinition ? 0.7 : 1"
+        v-model:size="splitBoxSize"
-        :max="props.isDefinition && !props.isCase ? 0.9 : 1"
+        :max="!showResponse ? 1 : 0.98"
-        :min="props.isDefinition && !props.isCase ? 0.7 : 1"
+        min="10px"
-        :disabled="props.isCase && !props.isDefinition"
+        :direction="activeLayout"
-        :class="props.isCase && !props.isDefinition ? 'hidden-second' : ''"
+        second-container-class="!overflow-y-hidden"
-        :first-container-class="props.isCase && !props.isDefinition ? 'border-r-0' : ''"
+        :class="!showResponse ? 'hidden-second' : 'show-second'"
-        direction="horizontal"
+        @expand-change="handleVerticalExpandChange"
-        expand-direction="right"
       >
         <template #first>
-          <MsSplitBox
+          <a-spin class="block h-full w-full" :loading="requestVModel.executeLoading || loading">
-            ref="verticalSplitBoxRef"
+            <div
-            v-model:size="splitBoxSize"
+              :class="`flex h-full min-w-[800px] flex-col p-[16px] ${
-            :max="!showResponse ? 1 : 0.98"
+                activeLayout === 'horizontal' ? ' pr-[16px]' : ''
-            min="10px"
+              }`"
-            :direction="activeLayout"
+            >
-            second-container-class="!overflow-y-hidden"
+              <div class="tab-pane-container">
-            :class="!showResponse ? 'hidden-second' : 'show-second'"
+                <apiBaseForm
-            @expand-change="handleVerticalExpandChange"
+                  v-if="!props.isCase && props.isDefinition"
-          >
+                  v-show="requestVModel.activeTab === RequestComposition.BASE_INFO"
-            <template #first>
+                  ref="apiBaseFormRef"
-              <a-spin class="block h-full w-full" :loading="requestVModel.executeLoading || loading">
+                  v-model:requestVModel="requestVModel"
-                <div
+                  :select-tree="selectTree"
-                  :class="`flex h-full min-w-[800px] flex-col p-[16px] ${
+                />
-                    activeLayout === 'horizontal' ? ' pr-[16px]' : ''
+                <a-spin
-                  }`"
+                  v-show="requestVModel.activeTab === RequestComposition.PLUGIN"
+                  :loading="pluginLoading"
+                  class="min-h-[100px] w-full"
                 >
-                  <div class="tab-pane-container">
+                  <MsFormCreate
-                    <a-spin
+                    v-model:api="fApi"
-                      v-show="requestVModel.activeTab === RequestComposition.PLUGIN"
+                    :rule="currentPluginScript"
-                      :loading="pluginLoading"
+                    :option="currentPluginOptions"
-                      class="min-h-[100px] w-full"
+                    @change="
-                    >
+                      () => {
-                      <MsFormCreate
+                        if (isInitPluginForm) {
-                        v-model:api="fApi"
+                          handlePluginFormChange();
-                        :rule="currentPluginScript"
+                        }
-                        :option="currentPluginOptions"
+                      }
-                        @change="
+                    "
-                          () => {
+                  />
-                            if (isInitPluginForm) {
+                </a-spin>
-                              handlePluginFormChange();
+                <httpHeader
-                            }
+                  v-if="requestVModel.activeTab === RequestComposition.HEADER"
-                          }
+                  v-model:params="requestVModel.headers"
-                        "
+                  :layout="activeLayout"
-                      />
+                  :second-box-height="secondBoxHeight"
-                    </a-spin>
+                  @change="handleActiveDebugChange"
-                    <httpHeader
+                />
-                      v-if="requestVModel.activeTab === RequestComposition.HEADER"
+                <httpBody
-                      v-model:params="requestVModel.headers"
+                  v-else-if="requestVModel.activeTab === RequestComposition.BODY"
-                      :layout="activeLayout"
+                  v-model:params="requestVModel.body"
-                      :second-box-height="secondBoxHeight"
+                  :layout="activeLayout"
-                      @change="handleActiveDebugChange"
+                  :second-box-height="secondBoxHeight"
-                    />
+                  :upload-temp-file-api="props.uploadTempFileApi"
-                    <httpBody
+                  :file-save-as-source-id="props.fileSaveAsSourceId"
-                      v-else-if="requestVModel.activeTab === RequestComposition.BODY"
+                  :file-save-as-api="props.fileSaveAsApi"
-                      v-model:params="requestVModel.body"
+                  :file-module-options-api="props.fileModuleOptionsApi"
-                      :layout="activeLayout"
+                  @change="handleActiveDebugChange"
-                      :second-box-height="secondBoxHeight"
+                />
-                      :upload-temp-file-api="props.uploadTempFileApi"
+                <httpQuery
-                      :file-save-as-source-id="props.fileSaveAsSourceId"
+                  v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
-                      :file-save-as-api="props.fileSaveAsApi"
+                  v-model:params="requestVModel.query"
-                      :file-module-options-api="props.fileModuleOptionsApi"
+                  :layout="activeLayout"
-                      @change="handleActiveDebugChange"
+                  :second-box-height="secondBoxHeight"
-                    />
+                  @change="handleActiveDebugChange"
-                    <httpQuery
+                />
-                      v-else-if="requestVModel.activeTab === RequestComposition.QUERY"
+                <httpRest
-                      v-model:params="requestVModel.query"
+                  v-else-if="requestVModel.activeTab === RequestComposition.REST"
-                      :layout="activeLayout"
+                  v-model:params="requestVModel.rest"
-                      :second-box-height="secondBoxHeight"
+                  :layout="activeLayout"
-                      @change="handleActiveDebugChange"
+                  :second-box-height="secondBoxHeight"
-                    />
+                  @change="handleActiveDebugChange"
-                    <httpRest
+                />
-                      v-else-if="requestVModel.activeTab === RequestComposition.REST"
+                <precondition
-                      v-model:params="requestVModel.rest"
+                  v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
-                      :layout="activeLayout"
+                  v-model:config="requestVModel.children[0].preProcessorConfig"
-                      :second-box-height="secondBoxHeight"
+                  :is-definition="props.isDefinition"
-                      @change="handleActiveDebugChange"
+                  @change="handleActiveDebugChange"
-                    />
+                />
-                    <precondition
+                <postcondition
-                      v-else-if="requestVModel.activeTab === RequestComposition.PRECONDITION"
+                  v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
-                      v-model:config="requestVModel.children[0].preProcessorConfig"
+                  v-model:config="requestVModel.children[0].postProcessorConfig"
-                      :is-definition="props.isDefinition"
+                  :response="requestVModel.response?.requestResults[0]?.responseResult.body"
-                      @change="handleActiveDebugChange"
+                  :layout="activeLayout"
-                    />
+                  :second-box-height="secondBoxHeight"
-                    <postcondition
+                  :is-definition="props.isDefinition"
-                      v-else-if="requestVModel.activeTab === RequestComposition.POST_CONDITION"
+                  @change="handleActiveDebugChange"
-                      v-model:config="requestVModel.children[0].postProcessorConfig"
+                />
-                      :response="requestVModel.response?.requestResults[0]?.responseResult.body"
+                <assertion
-                      :layout="activeLayout"
+                  v-else-if="requestVModel.activeTab === RequestComposition.ASSERTION"
-                      :second-box-height="secondBoxHeight"
+                  v-model:params="requestVModel.children[0].assertionConfig.assertions"
-                      :is-definition="props.isDefinition"
+                  :is-definition="props.isDefinition"
-                      @change="handleActiveDebugChange"
+                  :response="requestVModel.response?.requestResults[0]?.responseResult.body"
-                    />
+                  :assertion-config="requestVModel.children[0].assertionConfig"
-                    <assertion
+                  :show-extraction="true"
-                      v-else-if="requestVModel.activeTab === RequestComposition.ASSERTION"
+                />
-                      v-model:params="requestVModel.children[0].assertionConfig.assertions"
+                <auth
-                      :is-definition="props.isDefinition"
+                  v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
-                      :response="requestVModel.response?.requestResults[0]?.responseResult.body"
+                  v-model:params="requestVModel.authConfig"
-                      :assertion-config="requestVModel.children[0].assertionConfig"
+                  @change="handleActiveDebugChange"
-                      :show-extraction="true"
+                />
-                    />
+                <setting
-                    <auth
+                  v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
-                      v-else-if="requestVModel.activeTab === RequestComposition.AUTH"
+                  v-model:params="requestVModel.otherConfig"
-                      v-model:params="requestVModel.authConfig"
+                  @change="handleActiveDebugChange"
-                      @change="handleActiveDebugChange"
+                />
-                    />
+              </div>
-                    <setting
+            </div>
-                      v-else-if="requestVModel.activeTab === RequestComposition.SETTING"
+          </a-spin>
-                      v-model:params="requestVModel.otherConfig"
-                      @change="handleActiveDebugChange"
-                    />
-                  </div>
-                </div>
-              </a-spin>
-            </template>
-            <template #second>
-              <response
-                v-show="showResponse"
-                ref="responseRef"
-                v-model:active-layout="activeLayout"
-                v-model:active-tab="requestVModel.responseActiveTab"
-                v-model:response-definition="requestVModel.responseDefinition"
-                :show-response-result-button="requestVModel.mode === 'debug'"
-                :is-http-protocol="isHttpProtocol"
-                :is-priority-local-exec="isPriorityLocalExec"
-                :request-url="requestVModel.url"
-                :is-expanded="isVerticalExpanded"
-                :hide-layout-switch="props.hideResponseLayoutSwitch"
-                :request-result="requestVModel.response?.requestResults[0]"
-                :console="requestVModel.response?.console"
-                :is-edit="props.isDefinition && isHttpProtocol && !props.isCase"
-                :upload-temp-file-api="props.uploadTempFileApi"
-                :loading="requestVModel.executeLoading || loading"
-                :is-definition="props.isDefinition"
-                @change-expand="changeVerticalExpand"
-                @change-layout="handleActiveLayoutChange"
-                @change="handleActiveDebugChange"
-                @execute="(executeType) => (props.isCase ? emit('execute', executeType) : execute(executeType))"
-              />
-            </template>
-          </MsSplitBox>
         </template>
-        <template v-if="!props.isCase && props.isDefinition" #second>
+        <template #second>
-          <div class="p-[16px]">
+          <response
-            <!-- TODO:第一版没有模板 -->
+            v-show="showResponse"
-            <!-- <MsFormCreate v-model:api="fApi" :rule="currentApiTemplateRules" :option="options" /> -->
+            ref="responseRef"
-            <a-form ref="activeApiTabFormRef" :model="requestVModel" layout="vertical">
+            v-model:active-layout="activeLayout"
-              <a-form-item
+            v-model:active-tab="requestVModel.responseActiveTab"
-                field="name"
+            v-model:response-definition="requestVModel.responseDefinition"
-                :label="t('apiTestManagement.apiName')"
+            :show-response-result-button="requestVModel.mode === 'debug'"
-                class="mb-[16px]"
+            :is-http-protocol="isHttpProtocol"
-                :rules="[{ required: true, message: t('apiTestManagement.apiNameRequired') }]"
+            :is-priority-local-exec="isPriorityLocalExec"
-              >
+            :request-url="requestVModel.url"
-                <a-input
+            :is-expanded="isVerticalExpanded"
-                  v-model:model-value="requestVModel.name"
+            :hide-layout-switch="props.hideResponseLayoutSwitch"
-                  :max-length="255"
+            :request-result="requestVModel.response?.requestResults[0]"
-                  :placeholder="t('apiTestManagement.apiNamePlaceholder')"
+            :console="requestVModel.response?.console"
-                  allow-clear
+            :is-edit="props.isDefinition && isHttpProtocol && !props.isCase"
-                  @change="handleActiveApiChange"
+            :upload-temp-file-api="props.uploadTempFileApi"
-                />
+            :loading="requestVModel.executeLoading || loading"
-              </a-form-item>
+            :is-definition="props.isDefinition"
-              <a-form-item :label="t('apiTestManagement.belongModule')" class="mb-[16px]">
+            @change-expand="changeVerticalExpand"
-                <a-tree-select
+            @change-layout="handleActiveLayoutChange"
-                  v-model:modelValue="requestVModel.moduleId"
+            @change="handleActiveDebugChange"
-                  :data="selectTree as ModuleTreeNode[]"
+            @execute="(executeType) => (props.isCase ? emit('execute', executeType) : execute(executeType))"
-                  :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>
@@ -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"