diff --git a/frontend/src/assets/style/arco-reset.less b/frontend/src/assets/style/arco-reset.less
index 67c55d0ea7..22c3bde434 100644
--- a/frontend/src/assets/style/arco-reset.less
+++ b/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;
diff --git a/frontend/src/views/api-test/components/requestComposition/index.vue b/frontend/src/views/api-test/components/requestComposition/index.vue
index 4acf4341fa..a5b6649ac4 100644
--- a/frontend/src/views/api-test/components/requestComposition/index.vue
+++ b/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"
/>
@@ -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([]);
@@ -1647,8 +1663,8 @@
.response :deep(.response-head) {
@apply sticky bg-white;
- top: 0;
- z-index: 102; // 覆盖请求参数tab
+ top: 46px; // 请求参数tab高度(不算border-bottom)
+ z-index: 11;
}
.request-tab-pane {
min-height: 400px;
diff --git a/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue b/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
index e2738cb54b..46e8089bc9 100644
--- a/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
+++ b/frontend/src/views/api-test/management/components/management/case/createAndEditCaseDrawer.vue
@@ -1,6 +1,7 @@
@@ -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;
diff --git a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
index 0a4263387e..e81758b428 100644
--- a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
@@ -2,6 +2,7 @@
@@ -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;
- z-index: 102; // 覆盖请求参数tab
+ top: 46px; // 请求参数tab高度(不算border-bottom)
+ z-index: 11;
}
.request-tab-pane {
min-height: 400px;
diff --git a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
index ebc5188097..1b519ed7fb 100644
--- a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
@@ -1,6 +1,7 @@
@@ -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;
- z-index: 102; // 覆盖请求参数tab
+ top: 46px; // 请求参数tab高度(不算border-bottom)
+ z-index: 11;
}
.request-tab-pane {
min-height: 400px;