style: 断言显示问题&上传附件调整样式

This commit is contained in:
xinxin.wu 2024-04-16 11:14:17 +08:00 committed by Craftsman
parent b86e967655
commit 95aa98e29c
4 changed files with 35 additions and 20 deletions

View File

@ -12,7 +12,7 @@
:disabled="props.disabled" :disabled="props.disabled"
:class="getAllScreenClass" :class="getAllScreenClass"
:style="{ :style="{
width: props.isAllScreen ? `calc(100% - 32px)` : '', width: props.isAllScreen ? `calc(100% - 0px)` : '',
}" }"
@change="handleChange" @change="handleChange"
@before-upload="beforeUpload" @before-upload="beforeUpload"
@ -20,7 +20,12 @@
> >
<template #upload-button> <template #upload-button>
<slot> <slot>
<div class="ms-upload-area"> <div
class="ms-upload-area"
:class="[
props.isAllScreen ? 'ms-upload-area-dotted-border h-[100vh]' : 'ms-upload-area-thin-border h-[154px]',
]"
>
<div class="ms-upload-icon-box"> <div class="ms-upload-icon-box">
<MsIcon <MsIcon
v-if="props.accept !== UploadAcceptEnum.none" v-if="props.accept !== UploadAcceptEnum.none"
@ -92,7 +97,6 @@
isLimit: boolean; // isLimit: boolean; //
draggable: boolean; // draggable: boolean; //
isAllScreen?: boolean; // isAllScreen?: boolean; //
cutHeight: number; //
fileTypeTip?: string; // fileTypeTip?: string; //
limit: number; // limit: number; //
allowRepeat?: boolean; // allowRepeat?: boolean; //
@ -161,29 +165,19 @@
emit('change', _fileList, fileItem); emit('change', _fileList, fileItem);
} }
const total = ref(''); //
const other = ref(''); //
const showDropArea = ref(!props.isAllScreen); const showDropArea = ref(!props.isAllScreen);
watch( watch(
() => props.isAllScreen, () => props.isAllScreen,
(val) => { (val) => {
if (val) { showDropArea.value = !val;
total.value = '100vh';
other.value = `32px`;
showDropArea.value = false;
} else {
total.value = '154px';
other.value = '0px';
showDropArea.value = true;
}
}, },
{ immediate: true } { immediate: true }
); );
const getAllScreenClass = computed(() => { const getAllScreenClass = computed(() => {
return props.isAllScreen return props.isAllScreen
? ['!fixed', 'right-0', 'left-0', 'bottom-0', 'top-4', 'm-auto', 'z-[999]', 'opacity-90'] ? ['!fixed', 'right-0', 'left-0', 'bottom-0', 'top-0', 'm-auto', 'z-[999]', 'opacity-90']
: []; : [];
}); });
@ -254,8 +248,6 @@
<style lang="less" scoped> <style lang="less" scoped>
.ms-upload-area { .ms-upload-area {
height: calc(v-bind(total) - v-bind(other));
border: 1px dashed var(--color-text-input-border);
border-color: rgb(var(--primary-5)) !important; border-color: rgb(var(--primary-5)) !important;
border-radius: var(--border-radius-small); border-radius: var(--border-radius-small);
background-color: var(--color-text-n9); background-color: var(--color-text-n9);
@ -287,4 +279,10 @@
line-height: 16px; line-height: 16px;
} }
} }
.ms-upload-area-thin-border {
border: 1px dashed var(--color-text-input-border);
}
.ms-upload-area-dotted-border {
border: 4px dashed var(--color-text-input-border);
}
</style> </style>

View File

@ -15,7 +15,11 @@
:active-tab="activeTab" :active-tab="activeTab"
:request-result="props.requestResult" :request-result="props.requestResult"
/> />
<ResAssertion v-else-if="activeTab === 'ASSERTION'" :request-result="props.requestResult" /> <ResAssertion
v-else-if="activeTab === 'ASSERTION'"
:request-result="props.requestResult"
:scroll="{ x: '100%' }"
/>
</div> </div>
</div> </div>
<a-empty <a-empty

View File

@ -1,6 +1,11 @@
<template> <template>
<a-scrollbar class="overflow-y-auto" :style="{ height: '300px' }"> <a-scrollbar class="overflow-y-auto" :style="{ height: '300px' }">
<MsFormTable :data="props.requestResult?.responseResult.assertions" :columns="columns" :selectable="false"> <MsFormTable
:data="props.requestResult?.responseResult.assertions"
:columns="columns"
:selectable="false"
:scroll="props.scroll"
>
<template #status="{ record }"> <template #status="{ record }">
<MsTag :type="record.pass === true ? 'success' : 'danger'" theme="light"> <MsTag :type="record.pass === true ? 'success' : 'danger'" theme="light">
{{ record.pass === true ? t('common.success') : t('common.fail') }} {{ record.pass === true ? t('common.success') : t('common.fail') }}
@ -22,6 +27,12 @@
const { t } = useI18n(); const { t } = useI18n();
const props = defineProps<{ const props = defineProps<{
requestResult?: RequestResult; requestResult?: RequestResult;
scroll?: {
x?: number | string;
y?: number | string;
maxHeight?: number | string;
minWidth?: number | string;
};
}>(); }>();
const columns: MsTableColumn = [ const columns: MsTableColumn = [
@ -29,6 +40,7 @@
title: 'apiTestDebug.content', title: 'apiTestDebug.content',
dataIndex: 'content', dataIndex: 'content',
showTooltip: true, showTooltip: true,
width: 300,
}, },
{ {
title: 'apiTestDebug.status', title: 'apiTestDebug.status',
@ -40,6 +52,7 @@
title: 'apiTestDebug.reason', title: 'apiTestDebug.reason',
dataIndex: 'message', dataIndex: 'message',
showTooltip: true, showTooltip: true,
width: 300,
}, },
]; ];
</script> </script>

View File

@ -22,7 +22,7 @@
@click="showDetail(record)" @click="showDetail(record)"
>{{ record.name }} >{{ record.name }}
</div> </div>
<a-popover :title="t('project.commonScript.publicScriptName')" position="right"> <a-popover :title="characterLimit(record.name)" position="right">
<a-button type="text" class="ml-2 px-0">{{ t('project.commonScript.preview') }}</a-button> <a-button type="text" class="ml-2 px-0">{{ t('project.commonScript.preview') }}</a-button>
<template #content> <template #content>
<div class="w-[436px] bg-[var(--color-bg-3)] px-2 pb-2"> <div class="w-[436px] bg-[var(--color-bg-3)] px-2 pb-2">