style: 断言显示问题&上传附件调整样式
This commit is contained in:
parent
b86e967655
commit
95aa98e29c
|
@ -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>
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue