test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

style(接口测试): 定义预览-tab样式

This commit is contained in:
teukkk 2024-08-06 18:29:35 +08:00 committed by Craftsman
parent dd2f6500ff
commit 8cb6b1b94a
3 changed files with 105 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/pure/ms-tag/ms-tag.vue
View File

@ -138,7 +138,6 @@
<style lang="less">
.arco-tag {
display: flex;
.arco-icon {
font-size: 14px !important;
}

1
frontend/src/views/api-test/components/apiMethodName.vue
View File

@ -6,6 +6,7 @@
border: `1px solid ${props.tagBackgroundColor || methodColor}`,
color: props.tagTextColor || methodColor,
backgroundColor: props.tagBackgroundColor || 'white',
display: 'flex',
}"
:size="props.tagSize"
>

235
frontend/src/views/api-test/management/components/management/api/index.vue
View File

@ -15,115 +15,92 @@
/>
</div>
<div v-else-if="activeApiTab.id !== 'all'" class="flex-1 overflow-hidden">
<a-tabs
v-model:active-key="activeApiTab.definitionActiveKey"
animation
lazy-load
class="ms-api-tab-nav"
@change="changeDefinitionActiveKey"
>
<template v-if="activeApiTab.definitionActiveKey === 'preview'" #extra>
<div class="flex gap-[12px] pr-[16px]">
<a-button
v-permission="['PROJECT_API_DEFINITION:READ+DELETE']"
type="outline"
class="arco-btn-outline--secondary"
size="small"
@click="handleDelete"
>
{{ t('common.delete') }}
</a-button>
<a-button
v-permission="['PROJECT_API_DEFINITION:READ+UPDATE']"
type="outline"
size="small"
@click="toEditDefinition"
>
{{ t('common.edit') }}
</a-button>
<executeButton
v-permission="['PROJECT_API_DEFINITION:READ+EXECUTE']"
size="small"
@execute="toExecuteDefinition"
/>
</div>
</template>
<a-tab-pane
v-if="!activeApiTab.isNew"
key="preview"
:title="t('apiTestManagement.preview')"
class="ms-api-tab-pane"
>
<preview
v-if="activeApiTab.definitionActiveKey === 'preview'"
:detail="activeApiTab"
:protocols="protocols"
@update-follow="activeApiTab.follow = !activeApiTab.follow"
<div class="mt-[8px] flex items-center justify-between px-[16px]">
<MsTab
v-model:activeKey="activeApiTab.definitionActiveKey"
:content-tab-list="contentTabList"
mode="button"
class="ms-api-tab-nav"
button-size="small"
@change="changeDefinitionActiveKey"
/>
<div v-if="activeApiTab.definitionActiveKey === 'preview'" class="flex gap-[12px]">
<a-button
v-permission="['PROJECT_API_DEFINITION:READ+DELETE']"
type="outline"
class="arco-btn-outline--secondary"
size="small"
@click="handleDelete"
>
{{ t('common.delete') }}
</a-button>
<a-button
v-permission="['PROJECT_API_DEFINITION:READ+UPDATE']"
type="outline"
size="small"
@click="toEditDefinition"
>
{{ t('common.edit') }}
</a-button>
<executeButton
v-permission="['PROJECT_API_DEFINITION:READ+EXECUTE']"
size="small"
@execute="toExecuteDefinition"
/>
</a-tab-pane>
<a-tab-pane
v-if="hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE', 'PROJECT_API_DEFINITION:READ+ADD'])"
key="definition"
:title="t('apiTestManagement.definition')"
class="ms-api-tab-pane"
>
<requestComposition
ref="requestCompositionRef"
v-model:detail-loading="loading"
v-model:request="activeApiTab"
:protocol-key="ProtocolKeyEnum.API_NEW_PROTOCOL"
:module-tree="props.moduleTree"
:create-api="addDefinition"
:update-api="updateDefinition"
:execute-api="debugDefinition"
:local-execute-api="localExecuteApiDebug"
:permission-map="{
execute: 'PROJECT_API_DEFINITION:READ+EXECUTE',
update: 'PROJECT_API_DEFINITION:READ+UPDATE',
create: 'PROJECT_API_DEFINITION:READ+ADD',
}"
:upload-temp-file-api="uploadTempFile"
:file-save-as-source-id="activeApiTab.id"
:file-module-options-api="getTransferOptions"
:file-save-as-api="transferFile"
is-definition
@add-done="handleAddDone"
/>
</a-tab-pane>
<a-tab-pane
v-if="!activeApiTab.isNew && hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ'])"
key="case"
:title="t('apiTestManagement.case')"
class="ms-api-tab-pane"
>
<caseTable
ref="caseTableRef"
:is-api="true"
:active-module="props.activeModule"
:selected-protocols="[activeApiTab.protocol]"
:api-detail="activeApiTab"
:offspring-ids="props.offspringIds"
:member-options="memberOptions"
:height-used="48"
/>
</a-tab-pane>
<a-tab-pane
v-if="!activeApiTab.isNew && activeApiTab.protocol === 'HTTP'"
key="mock"
title="MOCK"
class="ms-api-tab-pane"
>
<mockTable
:active-module="props.activeModule"
:offspring-ids="props.offspringIds"
:definition-detail="activeApiTab"
:selected-protocols="[activeApiTab.protocol]"
:height-used="48"
is-api
@debug="openApiTabAndDebugMock"
/>
</a-tab-pane>
</a-tabs>
</div>
</div>
<div class="h-[calc(100%-32px)]">
<preview
v-if="activeApiTab.definitionActiveKey === 'preview'"
:detail="activeApiTab"
:protocols="protocols"
@update-follow="activeApiTab.follow = !activeApiTab.follow"
/>
<requestComposition
v-if="activeApiTab.definitionActiveKey === 'definition'"
ref="requestCompositionRef"
v-model:detail-loading="loading"
v-model:request="activeApiTab"
:protocol-key="ProtocolKeyEnum.API_NEW_PROTOCOL"
:module-tree="props.moduleTree"
:create-api="addDefinition"
:update-api="updateDefinition"
:execute-api="debugDefinition"
:local-execute-api="localExecuteApiDebug"
:permission-map="{
execute: 'PROJECT_API_DEFINITION:READ+EXECUTE',
update: 'PROJECT_API_DEFINITION:READ+UPDATE',
create: 'PROJECT_API_DEFINITION:READ+ADD',
}"
:upload-temp-file-api="uploadTempFile"
:file-save-as-source-id="activeApiTab.id"
:file-module-options-api="getTransferOptions"
:file-save-as-api="transferFile"
is-definition
@add-done="handleAddDone"
/>
<caseTable
v-if="activeApiTab.definitionActiveKey === 'case'"
ref="caseTableRef"
:is-api="true"
:active-module="props.activeModule"
:selected-protocols="[activeApiTab.protocol]"
:api-detail="activeApiTab"
:offspring-ids="props.offspringIds"
:member-options="memberOptions"
:height-used="32"
/>
<mockTable
v-if="activeApiTab.definitionActiveKey === 'mock'"
:active-module="props.activeModule"
:offspring-ids="props.offspringIds"
:definition-detail="activeApiTab"
:selected-protocols="[activeApiTab.protocol]"
:height-used="32"
is-api
@debug="openApiTabAndDebugMock"
/>
</div>
</div>
</div>
</template>
@ -132,6 +109,7 @@
import { cloneDeep } from 'lodash-es';
import { TabItem } from '@/components/pure/ms-editable-tab/types';
import MsTab from '@/components/pure/ms-tab/index.vue';
// import MsFormCreate from '@/components/pure/ms-form-create/formCreate.vue';
import apiTable from './apiTable.vue';
import executeButton from '@/views/api-test/components/executeButton.vue';
@ -516,6 +494,24 @@
refreshTableTimeStamp.value = Date.now();
}
const contentTabList = computed(() => {
const { isNew, protocol } = activeApiTab.value;
const tabs = [
{ condition: !isNew, value: 'preview', label: t('apiTestManagement.preview') },
{
condition: hasAnyPermission(['PROJECT_API_DEFINITION:READ+UPDATE', 'PROJECT_API_DEFINITION:READ+ADD']),
value: 'definition',
label: t('apiTestManagement.definition'),
},
{
condition: !isNew && hasAnyPermission(['PROJECT_API_DEFINITION_CASE:READ']),
value: 'case',
label: t('apiTestManagement.case'),
},
{ condition: !isNew && protocol === 'HTTP', value: 'mock', label: 'MOCK' },
];
return tabs.filter((tab) => tab.condition).map((tab) => ({ value: tab.value, label: tab.label }));
});
function changeDefinitionActiveKey(val: string | number) {
// 在定义可以添加用例，故需要切换到case时刷新数据
if (val === 'case') {
@ -568,26 +564,3 @@
refreshTable,
});
</script>
<style lang="less" scoped>
.error-6 {
color: rgb(var(--danger-6));
&:hover {
color: rgb(var(--danger-6));
}
}
:deep(.ms-api-tab-nav) {
@apply h-full;
.arco-tabs-content {
@apply pt-0;
height: calc(100% - 48px);
.arco-tabs-content-list {
@apply h-full;
.arco-tabs-pane {
@apply h-full;
}
}
}
}
</style>