From ecae5a4d99d483c0948553ca600015456fc5d1ee Mon Sep 17 00:00:00 2001 From: teukkk Date: Mon, 6 May 2024 20:11:39 +0800 Subject: [PATCH] =?UTF-8?q?style:=20=E6=8E=A5=E5=8F=A3=E8=B0=83=E8=AF=95/?= =?UTF-8?q?=E7=94=A8=E4=BE=8B/=E5=AE=9A=E4=B9=89/=E5=9C=BA=E6=99=AF?= =?UTF-8?q?=E5=B1=95=E7=A4=BA=E5=B8=83=E5=B1=80=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/pure/ms-code-editor/index.vue | 3 +- .../src/components/pure/ms-drawer/index.vue | 2 +- .../api-test/components/condition/content.vue | 3 - .../api-test/components/condition/index.vue | 2 - .../components/requestComposition/body.vue | 30 - .../components/requestComposition/header.vue | 9 - .../components/requestComposition/index.vue | 367 +++++------- .../requestComposition/postcondition.vue | 9 - .../components/requestComposition/query.vue | 28 - .../requestComposition/response/edit.vue | 6 - .../requestComposition/response/index.vue | 34 +- .../requestComposition/response/result.vue | 2 - .../components/requestComposition/rest.vue | 28 - .../case/createAndEditCaseDrawer.vue | 122 ++-- .../components/common/customApiDrawer.vue | 524 ++++++++---------- .../components/common/customCaseDrawer.vue | 345 +++++------- .../api-test/scenario/components/prePost.vue | 2 - .../components/envParams/PostTab.vue | 1 - .../components/envParams/PreTab.vue | 1 - .../envParams/popUp/AddHttpDrawer.vue | 2 - .../components/requestHeader/index.vue | 2 - 21 files changed, 626 insertions(+), 896 deletions(-) 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 @@ -
+
-
-
- - - - + + + + + + + + + + + +
+ + + + +
@@ -282,7 +252,6 @@ import MsButton from '@/components/pure/ms-button/index.vue'; import MsDrawer from '@/components/pure/ms-drawer/index.vue'; import MsFormCreate from '@/components/pure/ms-form-create/formCreate.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'; @@ -772,47 +741,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) => { @@ -820,19 +755,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 执行类型，执行时传入 @@ -1132,14 +1060,35 @@ .btn-base-primary-disabled(); } } - .tab-pane-container { - @apply flex-1 overflow-y-auto; - .ms-scroll-bar(); - } :deep(.arco-tabs-tab:first-child) { margin-left: 0; } :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/prePost.vue b/frontend/src/views/api-test/scenario/components/prePost.vue index f526dda96b..b1c2749961 100644 --- a/frontend/src/views/api-test/scenario/components/prePost.vue +++ b/frontend/src/views/api-test/scenario/components/prePost.vue @@ -24,7 +24,6 @@ ('vertical'); const preProcessorConfig = defineModel('preProcessorConfig', { required: true, }); diff --git a/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue b/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue index 78f5f6aa4a..708f50d248 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/PostTab.vue @@ -4,7 +4,6 @@ :condition-types="[RequestConditionProcessor.SCRIPT, RequestConditionProcessor.SQL]" add-text="apiTestDebug.postCondition" response="" - :height-used="600" :show-associated-scene="props.showAssociatedScene" :show-pre-post-request="props.showPrePostRequest" :request-radio-text-props="props.requestRadioTextProps" diff --git a/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue b/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue index ce79eb907b..060561fcba 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/PreTab.vue @@ -4,7 +4,6 @@ :condition-types="[RequestConditionProcessor.SCRIPT, RequestConditionProcessor.SQL]" add-text="apiTestDebug.precondition" response="" - :height-used="600" :show-associated-scene="props.showAssociatedScene" :show-pre-post-request="props.showPrePostRequest" :request-radio-text-props="props.requestRadioTextProps" diff --git a/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue b/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue index b906fcd20a..bff5d280a3 100644 --- a/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue +++ b/frontend/src/views/project-management/environmental/components/envParams/popUp/AddHttpDrawer.vue @@ -175,7 +175,6 @@ :layout="activeLayout" :disabled-param-value="false" :disabled-except-param="false" - :second-box-height="secondBoxHeight" :type-title="t('project.environmental.requestHeader')" /> @@ -303,7 +302,6 @@ const form = ref({ ...initForm }); const hostType = ref('http://'); - const secondBoxHeight = ref(0); const activeLayout = ref<'horizontal' | 'vertical'>('vertical'); const httpRef = ref(); diff --git a/frontend/src/views/project-management/environmental/components/requestHeader/index.vue b/frontend/src/views/project-management/environmental/components/requestHeader/index.vue index 4ce80d9acd..a9c549d133 100644 --- a/frontend/src/views/project-management/environmental/components/requestHeader/index.vue +++ b/frontend/src/views/project-management/environmental/components/requestHeader/index.vue @@ -4,7 +4,6 @@ :layout="activeLayout" :disabled-param-value="props.disabledParamValue" :disabled-except-param="props.disabledExceptParam" - :second-box-height="secondBoxHeight" @change="emit('change')" /> @@ -32,7 +31,6 @@ }>(); const innerParams = useVModel(props, 'params', emit); - const secondBoxHeight = ref(0); const activeLayout = ref<'horizontal' | 'vertical'>('vertical');