a791248752
- 移除多处 console.log 语句，清理无用代码 - 在消息组件中添加 info 类型配置并实现 info 消息显示功能 - 优化 WebSocket 消息处理逻辑，提高代码可读性
117 lines
2.4 KiB
Vue
117 lines
2.4 KiB
Vue
<script setup>
|
|
|
|
import error from '../images/error.png'
|
|
import success from '../images/success.png'
|
|
import warning from '../images/warning.png'
|
|
import info from '../images/info.png'
|
|
|
|
const props = defineProps({
|
|
type: {
|
|
type: String,
|
|
default: 'success'
|
|
},
|
|
message: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
title: {
|
|
type: Object,
|
|
default: () => ({
|
|
text: '',
|
|
color: '',
|
|
align: 'left'
|
|
})
|
|
},
|
|
subTitle: {
|
|
type: Object,
|
|
default: () => ({
|
|
text: '',
|
|
color: '',
|
|
align: 'left'
|
|
})
|
|
},
|
|
showIcon: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
customStyle: {
|
|
type: Object,
|
|
default: () => ({})
|
|
}
|
|
})
|
|
|
|
const typeConfig = {
|
|
info: {
|
|
imgSrc: info,
|
|
borderColor: '#C6DFFB',
|
|
bgColor: '#ECF5FE',
|
|
},
|
|
success: {
|
|
imgSrc: success,
|
|
borderColor: '#C5E7D5',
|
|
bgColor: '#EDF7F2',
|
|
},
|
|
error: {
|
|
imgSrc: error,
|
|
borderColor: '#FFD4D4',
|
|
bgColor: '#FFF0F0',
|
|
},
|
|
warning: {
|
|
imgSrc: warning,
|
|
borderColor: '#FFE2BA',
|
|
bgColor: '#FFF7EC',
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:class="`box-border flex items-center border rounded-[4px] px-[15px] shadow-sm py-8px ${!message?'justify-center':''}`"
|
|
:style="{
|
|
borderColor: typeConfig[type].borderColor,
|
|
backgroundColor: typeConfig[type].bgColor,
|
|
width: customStyle.width || '343px',
|
|
height: customStyle.height || 'auto',
|
|
minHeight: '46px'
|
|
}"
|
|
>
|
|
<div v-if="showIcon" class="mr-[12px]">
|
|
<img
|
|
:src="typeConfig[type].imgSrc"
|
|
class="w-20px h-20px"
|
|
style="object-fit: contain"
|
|
alt=""
|
|
>
|
|
</div>
|
|
<div class="flex flex-col justify-center">
|
|
<!-- 如果是简单文本模式 -->
|
|
<div v-if="message" class="text-[14px] line-height-none">
|
|
{{ message }}
|
|
</div>
|
|
<!-- 如果是标题+副标题模式 -->
|
|
<template v-else>
|
|
<div
|
|
v-if="title.text"
|
|
class="text-[14px] line-height-20px"
|
|
:style="{
|
|
color: title.color || 'inherit',
|
|
textAlign: title.align || 'left'
|
|
}"
|
|
>
|
|
{{ title.text }}
|
|
</div>
|
|
<div
|
|
v-if="subTitle.text"
|
|
class="text-[12px] leading-normal mt-1 line-height-17px"
|
|
:style="{
|
|
color: subTitle.color || '#939393',
|
|
textAlign: subTitle.align || 'left'
|
|
}"
|
|
>
|
|
{{ subTitle.text }}
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|