fix(接口测试): 请求tab和响应内容吸顶叠加，切换请求tab的时候滚动回来

frontend/src/assets/style/arco-reset.less

@@ -45,6 +45,13 @@
 .arco-tabs-nav-button-right {
   @apply mr-0 !shadow-none;
 }
+.arco-tabs-tab-title {
+  padding: 0 !important;
+  line-height: 22px;
+  & > div {
+    line-height: 22px;
+  }
+}
 
 /** Modal对话框 **/
 .arco-modal-wrapper {
@@ -850,10 +857,11 @@
 
 /*** 徽标 ****/
 .arco-badge-text {
+  min-width: 16px;
   height: 16px !important;
-  line-height: 16px;
   text-align: center;
   background: var(--color-text-brand);
+  line-height: 16px;
 }
 .filter-button {
   display: flex;

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

@@ -193,6 +193,7 @@
         :content-tab-list="contentTabList"
         :get-text-func="getTabBadge"
         class="sticky-content no-content relative top-0 border-b px-[16px]"
+        @tab-click="requestTabClick"
       />
       <div :class="`request-content-and-response ${activeLayout}`">
         <a-spin class="request" :loading="requestVModel.executeLoading || loading">
@@ -544,7 +545,11 @@
       saveASApi?: string;
     };
   }>();
-  const emit = defineEmits(['addDone', 'execute']);
+  const emit = defineEmits<{
+    (e: 'execute', executeType: 'localExec' | 'serverExec'): void;
+    (e: 'addDone'): void;
+    (e: 'requestTabClick'): void;
+  }>();
 
   const appStore = useAppStore();
   const userStore = useUserStore();
@@ -707,6 +712,17 @@
         return '';
     }
   }
+  function requestTabClick() {
+    if (!props.isCase) {
+      const element = document.querySelector('.request-tab-and-response');
+      element?.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      });
+    } else {
+      emit('requestTabClick');
+    }
+  }
 
   const protocolLoading = ref(false);
   const protocolOptions = ref<SelectOptionData[]>([]);
@@ -1647,8 +1663,8 @@
       .response :deep(.response-head) {
         @apply sticky bg-white;
 
-        top: 0;
+        top: 46px; // 请求参数tab高度(不算border-bottom)
-        z-index: 102; // 覆盖请求参数tab
+        z-index: 11;
       }
       .request-tab-pane {
         min-height: 400px;

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

@@ -1,6 +1,7 @@
 <template>
   <MsDrawer
     v-model:visible="innerVisible"
+    class="createAndEditCaseDrawer"
     :title="isEdit ? t('case.updateCase') : t('case.createCase')"
     :width="894"
     no-content-padding
@@ -80,6 +81,7 @@
           :file-save-as-api="transferFileCase"
           is-definition
           @execute="handleExecute"
+          @request-tab-click="requestTabClick"
         />
       </div>
     </div>
@@ -183,6 +185,16 @@
   const detailForm = ref(cloneDeep(defaultDetail.value));
   const isEdit = ref(false);
 
+  function requestTabClick() {
+    const element = document
+      .querySelector('.createAndEditCaseDrawer')
+      ?.querySelectorAll('.request-tab-and-response')[0];
+    element?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
   async function open(apiId: string, record?: ApiCaseDetail | RequestParam, isCopy?: boolean) {
     appStore.showLoading();
     apiDefinitionId.value = apiId;

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

@@ -2,6 +2,7 @@
   <MsDrawer
     v-model:visible="visible"
     :width="960"
+    class="customApiDrawer"
     no-content-padding
     :show-continue="true"
     :footer="requestVModel.isNew === true"
@@ -202,6 +203,7 @@
           :content-tab-list="contentTabList"
           :get-text-func="getTabBadge"
           class="sticky-content no-content relative top-0 mx-[16px] border-b"
+          @tab-click="requestTabClick"
         />
         <div :class="`request-content-and-response ${activeLayout}`">
           <a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
@@ -586,6 +588,14 @@
     }
   );
 
+  function requestTabClick() {
+    const element = document.querySelector('.customApiDrawer')?.querySelectorAll('.request-tab-and-response')[0];
+    element?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
   // 复制 api 只要加载过一次后就会保存，所以 props.request 是不为空的
   const isCopyApiNeedInit = computed(() => _stepType.value.isCopyApi && props.request === undefined);
   // 全可编辑接口
@@ -1340,8 +1350,8 @@
       .response :deep(.response-head) {
         @apply sticky bg-white;
 
-        top: 0;
+        top: 46px; // 请求参数tab高度(不算border-bottom)
-        z-index: 102; // 覆盖请求参数tab
+        z-index: 11;
       }
       .request-tab-pane {
         min-height: 400px;

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

@@ -1,6 +1,7 @@
 <template>
   <MsDrawer
     v-model:visible="visible"
+    class="customCaseDrawer"
     :width="900"
     :footer="false"
     show-full-screen
@@ -122,6 +123,7 @@
           :get-text-func="getTabBadge"
           no-content
           class="sticky-content relative top-0 mx-[16px] border-b"
+          @tab-click="requestTabClick"
         />
         <div :class="`request-content-and-response ${activeLayout}`">
           <a-spin class="request block h-full w-full" :loading="requestVModel.executeLoading || loading">
@@ -443,6 +445,14 @@
     }
   );
 
+  function requestTabClick() {
+    const element = document.querySelector('.customCaseDrawer')?.querySelectorAll('.request-tab-and-response')[0];
+    element?.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+
   // 非引用场景下的复制 case 可更改
   const isEditableApi = computed(() => !activeStep.value?.isQuoteScenarioStep && _stepType.value.isCopyCase);
   const isHttpProtocol = computed(() => requestVModel.value.protocol === 'HTTP');
@@ -1087,8 +1097,8 @@
       .response :deep(.response-head) {
         @apply sticky bg-white;
 
-        top: 0;
+        top: 46px; // 请求参数tab高度(不算border-bottom)
-        z-index: 102; // 覆盖请求参数tab
+        z-index: 11;
       }
       .request-tab-pane {
         min-height: 400px;