ef0eb903a7
1. 在图片消息组件中添加上传进度显示和加载状态 2. 重构图片上传逻辑，先显示本地预览再上传 3. 修复文件消息组件中从文件名获取扩展名改为从文件路径获取 4. 根据消息浮动方向调整提及文本颜色 重构了图片上传流程，现在会先显示本地预览图片，然后在上传过程中显示进度条。同时修复了文件扩展名获取逻辑，现在从文件路径而非文件名获取扩展名。优化了提及文本的颜色显示，使其根据消息浮动方向(左/右)显示不同颜色。
86 lines
1.7 KiB
Vue
86 lines
1.7 KiB
Vue
<script lang="ts" setup>
|
|
import { NImage, NSpin } from 'naive-ui'
|
|
import { getImageInfo } from '@/utils/functions'
|
|
import { ITalkRecordExtraImage, ITalkRecord } from '@/types/chat'
|
|
|
|
const props = defineProps<{
|
|
extra: ITalkRecordExtraImage
|
|
data: ITalkRecord
|
|
maxWidth?: Boolean
|
|
}>()
|
|
|
|
const img = (src: string, width = 200) => {
|
|
const info = getImageInfo(src)
|
|
|
|
if (info.width == 0 || info.height == 0) {
|
|
return {}
|
|
}
|
|
|
|
if (info.width < width) {
|
|
return {
|
|
width: `${info.width}px`,
|
|
height: `${info.height}px`
|
|
}
|
|
}
|
|
|
|
return {
|
|
width: width + 'px',
|
|
height: `${info.height / (info.width / width)}px`
|
|
}
|
|
}
|
|
</script>
|
|
<template>
|
|
<section
|
|
class="im-message-image"
|
|
:class="{ left: data.float === 'left' }"
|
|
:style="img(extra.url, 350)"
|
|
>
|
|
<div class="image-container">
|
|
<n-image class="h-149px" :src="extra.url" />
|
|
<!-- 上传中的loading蒙版 -->
|
|
<div v-if="props.extra.is_uploading" class="loading-overlay">
|
|
<n-spin size="large" />
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.im-message-image {
|
|
overflow: hidden;
|
|
padding: 5px;
|
|
border-radius: 5px;
|
|
background: var(--im-message-left-bg-color);
|
|
height:149px;
|
|
|
|
&.left {
|
|
background: var(--im-message-right-bg-color);
|
|
}
|
|
|
|
.image-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 5px;
|
|
z-index: 1;
|
|
}
|
|
|
|
:deep(.n-image img) {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 5px;
|
|
}
|
|
}
|
|
</style>
|