diff --git a/frontend/src/components/pure/ms-code-editor/index.vue b/frontend/src/components/pure/ms-code-editor/index.vue
index 970729beba..80462e4910 100644
--- a/frontend/src/components/pure/ms-code-editor/index.vue
+++ b/frontend/src/components/pure/ms-code-editor/index.vue
@@ -364,9 +364,10 @@
diff --git a/frontend/src/views/api-test/components/requestComposition/postcondition.vue b/frontend/src/views/api-test/components/requestComposition/postcondition.vue
index 3e22887f16..9a418595d6 100644
--- a/frontend/src/views/api-test/components/requestComposition/postcondition.vue
+++ b/frontend/src/views/api-test/components/requestComposition/postcondition.vue
@@ -6,7 +6,6 @@
add-text="apiTestDebug.postCondition"
:response="props.response"
:disabled="props.disabled"
- :height-used="heightUsed"
:sql-code-editor-height="props.sqlCodeEditorHeight"
@change="emit('change')"
>
@@ -43,8 +42,6 @@
const props = defineProps<{
config: ExecuteConditionConfig;
- secondBoxHeight?: number;
- layout: 'horizontal' | 'vertical';
response?: string; // 响应内容
isDefinition?: boolean; // 是否是定义页面
isScenario?: boolean; // 是否是场景页面
@@ -59,12 +56,6 @@
const { t } = useI18n();
const innerConfig = useVModel(props, 'config', emit);
- const heightUsed = computed(() => {
- if (props.layout === 'horizontal') {
- return 328;
- }
- return 328 + (props.secondBoxHeight || 0);
- });
const conditionTypes = computed(() => {
if (props.isDefinition) {
diff --git a/frontend/src/views/api-test/components/requestComposition/query.vue b/frontend/src/views/api-test/components/requestComposition/query.vue
index e6d00ee1cd..e921ee2600 100644
--- a/frontend/src/views/api-test/components/requestComposition/query.vue
+++ b/frontend/src/views/api-test/components/requestComposition/query.vue
@@ -15,7 +15,6 @@
:disabled-param-value="props.disabledParamValue"
:disabled-except-param="props.disabledExceptParam"
:columns="columns"
- :height-used="heightUsed"
:scroll="{ minWidth: 1160 }"
:show-setting="true"
:table-key="TableKeyEnum.API_TEST_DEBUG_QUERY"
@@ -51,11 +50,8 @@
const props = defineProps<{
params: ExecuteRequestCommonParam[];
- layout: 'horizontal' | 'vertical';
disabledParamValue?: boolean; // 参数值禁用
disabledExceptParam?: boolean; // 除了可以修改参数值其他都禁用
- secondBoxHeight: number;
- isDrawer?: boolean;
}>();
const emit = defineEmits<{
(e: 'update:params', value: any[]): void;
@@ -124,30 +120,6 @@
]);
const batchAddKeyValVisible = ref(false);
- const heightUsed = ref(undefined);
-
- watch(
- () => props.layout,
- (val) => {
- const otherHeight = props.isDrawer ? 328 : 372;
- heightUsed.value = val === 'horizontal' ? otherHeight : otherHeight + props.secondBoxHeight;
- },
- {
- immediate: true,
- }
- );
-
- watch(
- () => props.secondBoxHeight,
- (val) => {
- if (props.layout === 'vertical') {
- heightUsed.value = (props.isDrawer ? 328 : 372) + val;
- }
- },
- {
- immediate: true,
- }
- );
/**
* 批量参数代码转换为参数表格数据
diff --git a/frontend/src/views/api-test/components/requestComposition/response/edit.vue b/frontend/src/views/api-test/components/requestComposition/response/edit.vue
index 07acfe649e..3252202be8 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/edit.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/edit.vue
@@ -117,7 +117,6 @@
activeResponse.body.bodyType
)
"
- class="h-[calc(100%-35px)]"
>
@@ -368,7 +335,6 @@
import MsDrawer from '@/components/pure/ms-drawer/index.vue';
import MsFormCreate from '@/components/pure/ms-form-create/formCreate.vue';
import MsIcon from '@/components/pure/ms-icon-font/index.vue';
- import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
import MsTab from '@/components/pure/ms-tab/index.vue';
import assertion from '@/components/business/ms-assertion/index.vue';
import loopPagination from './loopPagination.vue';
@@ -936,47 +902,13 @@
const showResponse = computed(
() => isHttpProtocol.value || requestVModel.value.response?.requestResults[0]?.responseResult.responseCode
);
- const splitBoxSize = ref(!showResponse.value ? 1 : 0.6);
const activeLayout = ref<'horizontal' | 'vertical'>('vertical');
- const splitContainerRef = ref();
- const secondBoxHeight = ref(0);
-
- watch(
- () => splitBoxSize.value,
- debounce((val) => {
- // 动画 300ms
- if (splitContainerRef.value) {
- if (typeof val === 'string' && val.includes('px')) {
- val = Number(val.split('px')[0]);
- secondBoxHeight.value = splitContainerRef.value.clientHeight - val;
- } else {
- secondBoxHeight.value = splitContainerRef.value.clientHeight * (1 - val);
- }
- }
- }, 300),
- {
- immediate: true,
- }
- );
-
- const verticalSplitBoxRef = ref>();
- const isVerticalExpanded = ref(true);
-
- function handleVerticalExpandChange(val: boolean) {
- isVerticalExpanded.value = val;
- }
+ const isVerticalExpanded = computed(() => activeLayout.value === 'vertical');
+ const responseRef = ref>();
function changeVerticalExpand(val: boolean) {
- isVerticalExpanded.value = val;
- if (val) {
- verticalSplitBoxRef.value?.expand(0.6);
- } else {
- verticalSplitBoxRef.value?.collapse(
- splitContainerRef.value ? `${splitContainerRef.value.clientHeight - 42}px` : 0
- );
- }
+ responseRef.value?.changeExpand(val);
}
-
watch(
() => showResponse.value,
(val) => {
@@ -984,19 +916,12 @@
if (val) {
changeVerticalExpand(true);
} else {
- isVerticalExpanded.value = false;
- verticalSplitBoxRef.value?.collapse(1);
+ changeVerticalExpand(false);
}
});
}
);
- function handleActiveLayoutChange() {
- isVerticalExpanded.value = true;
- splitBoxSize.value = 0.6;
- verticalSplitBoxRef.value?.expand(0.6);
- }
-
/**
* 生成请求参数
* @param executeType 执行类型，执行时传入
@@ -1373,10 +1298,6 @@
.btn-base-primary-disabled();
}
}
- .tab-pane-container {
- @apply flex-1 overflow-y-auto;
- .ms-scroll-bar();
- }
:deep(.no-content) {
.arco-tabs-content {
display: none;
@@ -1388,4 +1309,29 @@
:deep(.arco-tabs-tab) {
@apply leading-none;
}
+ .request-tab-and-response {
+ overflow-x: hidden;
+ overflow-y: auto;
+ .ms-scroll-bar();
+ }
+ .sticky-content {
+ @apply sticky bg-white;
+
+ z-index: 101;
+ }
+ .request-content-and-response {
+ display: flex;
+ &.vertical {
+ flex-direction: column;
+ .response :deep(.response-head) {
+ @apply sticky bg-white;
+
+ top: 48px; // 请求参数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 1b2f6a92b1..62d8f8c35f 100644
--- a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
@@ -114,161 +114,131 @@
-
+
-
-
-
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+