style(接口测试): 协议为空时弹出气泡

This commit is contained in:
teukkk 2024-08-20 16:44:16 +08:00 committed by Craftsman
parent c5c8717878
commit 4a7c429048
4 changed files with 36 additions and 11 deletions

View File

@ -182,6 +182,11 @@
@apply hidden; @apply hidden;
} }
} }
.ms-pop-confirm--hidden-confirm {
.arco-btn-primary {
@apply hidden;
}
}
.ms-pop-confirm--hidden-icon { .ms-pop-confirm--hidden-icon {
.arco-popconfirm-icon { .arco-popconfirm-icon {
@apply !hidden; @apply !hidden;

View File

@ -21,6 +21,13 @@
</a-tooltip> </a-tooltip>
<!-- 协议icon --> <!-- 协议icon -->
<a-dropdown v-model:popup-visible="visible" :hide-on-select="false"> <a-dropdown v-model:popup-visible="visible" :hide-on-select="false">
<a-popconfirm
:popup-visible="protocolIsEmptyVisible"
class="ms-pop-confirm--hidden-confirm"
:cancel-text="t('common.gotIt')"
position="bottom"
@cancel="protocolIsEmptyVisible = false"
>
<a-tooltip :content="t('ms.paramsInput.protocol')"> <a-tooltip :content="t('ms.paramsInput.protocol')">
<MsButton <MsButton
v-show="!props.notShowOperation" v-show="!props.notShowOperation"
@ -32,6 +39,13 @@
<MsIcon type="icon-icon_protocol" /> <MsIcon type="icon-icon_protocol" />
</MsButton> </MsButton>
</a-tooltip> </a-tooltip>
<template #content>
<div class="flex flex-col gap-[8px]">
<div class="font-medium">{{ t('apiTestManagement.protocolIsEmpty') }}</div>
<div class="text-[var(--color-text-2)]">{{ t('apiTestManagement.protocolEmptyTip') }}</div>
</div>
</template>
</a-popconfirm>
<template #content> <template #content>
<a-checkbox <a-checkbox
class="checkbox-all" class="checkbox-all"
@ -93,6 +107,7 @@
const appStore = useAppStore(); const appStore = useAppStore();
const visible = ref(false); const visible = ref(false);
const protocolIsEmptyVisible = ref(false);
const allProtocolList = ref<string[]>([]); // const allProtocolList = ref<string[]>([]); //
const isCheckedAll = computed(() => { const isCheckedAll = computed(() => {
return selectedProtocols.value.length === allProtocolList.value.length; return selectedProtocols.value.length === allProtocolList.value.length;
@ -134,6 +149,7 @@
(val) => { (val) => {
setLocalStorage(props.protocolKey, val); setLocalStorage(props.protocolKey, val);
emit('selectedProtocolsChange'); emit('selectedProtocolsChange');
protocolIsEmptyVisible.value = !val.length;
} }
); );

View File

@ -166,6 +166,8 @@ export default {
'apiTestManagement.requestTypeTip': 'Note: Batch request type changes apply only to HTTP requests.', 'apiTestManagement.requestTypeTip': 'Note: Batch request type changes apply only to HTTP requests.',
'apiTestManagement.autoMake': 'Auto Generate', 'apiTestManagement.autoMake': 'Auto Generate',
'apiTestManagement.pleaseInputJsonSchema': 'Please enter Schema first before automatically generating it.', 'apiTestManagement.pleaseInputJsonSchema': 'Please enter Schema first before automatically generating it.',
'apiTestManagement.protocolIsEmpty': 'The protocol is empty',
'apiTestManagement.protocolEmptyTip': 'List display data is empty, please select protocol',
'case.execute.selectEnv': 'Select Environment', 'case.execute.selectEnv': 'Select Environment',
'case.execute.defaultEnv': 'Default Environment', 'case.execute.defaultEnv': 'Default Environment',
'case.execute.newEnv': 'New Environment', 'case.execute.newEnv': 'New Environment',

View File

@ -159,6 +159,8 @@ export default {
'apiTestManagement.requestTypeTip': '注批量修改请求类型仅对HTTP协议的请求生效', 'apiTestManagement.requestTypeTip': '注批量修改请求类型仅对HTTP协议的请求生效',
'apiTestManagement.autoMake': '自动生成', 'apiTestManagement.autoMake': '自动生成',
'apiTestManagement.pleaseInputJsonSchema': '请先输入 Schema 后再进行自动生成', 'apiTestManagement.pleaseInputJsonSchema': '请先输入 Schema 后再进行自动生成',
'apiTestManagement.protocolIsEmpty': '接口协议为空',
'apiTestManagement.protocolEmptyTip': '列表展示数据为空,请选择协议',
'case.execute.selectEnv': '环境选择', 'case.execute.selectEnv': '环境选择',
'case.execute.defaultEnv': '默认环境', 'case.execute.defaultEnv': '默认环境',
'case.execute.newEnv': '新环境', 'case.execute.newEnv': '新环境',