fix(chat): 修复消息气泡组件头像加载及位置服务地图链接
- 实现头像加载失败处理机制，添加默认头像回退方案 - 使用 ref 状态追踪头像加载失败情况，避免 watchEffect 重置问题 - 更新位置服务地图链接，从腾讯地图切换到高德地图服务 - 配置 Vue 构建依赖转译，解决 element-plus 兼容性问题 - 移除多个无用的 SVG 图标文件，精简项目资源
@@ -6,8 +6,7 @@
|
||||
<!-- onerror="this.src='https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'"-->
|
||||
<!-- alt=""-->
|
||||
<!-- />-->
|
||||
<img class="avatar" v-if="getSrc(message)" :src="getSrc(message)" alt="" />
|
||||
<img class="avatar" v-else src="@/assets/image/default_avatar.png" alt="" />
|
||||
<img class="avatar" :src="avatarError ? defaultAvatar : (message?.avatar || defaultAvatar)" @error="onAvatarError" alt="" />
|
||||
<main class="message-area">
|
||||
<label class="name" v-if="message.flow === 'in' && message.conversationType === 'GROUP'">
|
||||
{{ message.nameCard || message.nick || message.from }}
|
||||
@@ -86,6 +85,7 @@
|
||||
import MessageReference from './message-reference.vue';
|
||||
import { Message } from '../interface';
|
||||
import { TUIEnv } from '../../../../../TUIKit/TUIPlugin';
|
||||
import defaultAvatar from '@/assets/image/default_avatar.png';
|
||||
import MessageEmojiReact from './message-emoji-react.vue';
|
||||
import TIM from '../../../../TUICore/tim/index';
|
||||
|
||||
@@ -145,6 +145,15 @@
|
||||
needEmojiReact: false,
|
||||
});
|
||||
|
||||
// 追踪头像加载失败状态，避免 watchEffect 重置时覆盖 @error 的修复
|
||||
const avatarError = ref(false);
|
||||
watch(() => (props.data as any)?.ID, () => {
|
||||
avatarError.value = false;
|
||||
});
|
||||
const onAvatarError = () => {
|
||||
avatarError.value = true;
|
||||
};
|
||||
|
||||
watchEffect(() => {
|
||||
data.type = constant;
|
||||
data.messagesList = props.messagesList;
|
||||
@@ -376,6 +385,9 @@
|
||||
|
||||
return {
|
||||
getSrc,
|
||||
defaultAvatar,
|
||||
avatarError,
|
||||
onAvatarError,
|
||||
...toRefs(data),
|
||||
toggleDialog,
|
||||
htmlRefHook,
|
||||
|
||||
@@ -269,14 +269,16 @@ export function handleLocationMessageShowContext(item: any) {
|
||||
};
|
||||
location.lon = item.payload.longitude.toFixed(6);
|
||||
location.lat = item.payload.latitude.toFixed(6);
|
||||
// 跳转高德地图标记点页面
|
||||
location.href =
|
||||
'https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&' +
|
||||
`pointx=${location.lon}&pointy=${location.lat}&name=${item.payload.description}`;
|
||||
'https://uri.amap.com/marker?' +
|
||||
`position=${location.lon},${location.lat}&name=${item.payload.description}&src=mypage&coordinate=gaode&callnative=0`;
|
||||
// 高德静态地图图片
|
||||
location.url =
|
||||
'https://apis.map.qq.com/ws/staticmap/v2/?' +
|
||||
`center=${location.lat},${location.lon}&zoom=10&size=300*150&maptype=roadmap&` +
|
||||
`markers=size:large|color:0xFFCCFF|label:k|${location.lat},${location.lon}&` +
|
||||
'key=UBNBZ-PTP3P-TE7DB-LHRTI-Y4YLE-VWBBD';
|
||||
'https://restapi.amap.com/v3/staticmap?' +
|
||||
`location=${location.lon},${location.lat}&zoom=10&size=300*150&` +
|
||||
`markers=large,,A:${location.lon},${location.lat}&` +
|
||||
'key=8498ba3ba280654a7f6891b617f7d6ef';
|
||||
location.description = item.payload.description;
|
||||
return location;
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ module.exports = {
|
||||
outputDir: '../public/static/im-web',
|
||||
productionSourceMap: false,
|
||||
lintOnSave: false,
|
||||
transpileDependencies: ['element-plus', 'vue-router', '@ctrl/tinycolor'],
|
||||
chainWebpack: (config) => {
|
||||
config.resolve.alias.set('@', resolve('src')).set('tim', resolve('src/tim.js'));
|
||||
// 删除预加载
|
||||
|
||||
|
Before Width: | Height: | Size: 731 B After Width: | Height: | Size: 731 B |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
@@ -1,16 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48px" height="48px" viewBox="0 0 48 48" version="1.1">
|
||||
<title>ic_back_white</title>
|
||||
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="02.-查看信息-示例好友" transform="translate(-32.000000, -200.000000)">
|
||||
<g id="编组-6" transform="translate(0.000000, 176.000000)">
|
||||
<g id="ic_back_white" transform="translate(32.000000, 24.000000)">
|
||||
<g id="ic_back_black" fill="#444444" fill-rule="nonzero">
|
||||
<path d="M9.51231071,24 L23.5198286,38.7290411 C23.785378,39.0082689 23.7753168,39.4496082 23.4973187,39.7164448 L21.6255915,41.5130226 C21.3466827,41.7807332 20.9035602,41.7716553 20.6358496,41.4927466 C20.6351032,41.491969 20.6343586,41.4911896 20.6336157,41.4904085 L4.45876399,24.4823948 C4.2017544,24.2121467 4.2017544,23.7878533 4.45876399,23.5176052 L20.6336157,6.50959152 C20.900035,6.22944906 21.3431109,6.21832422 21.6232533,6.48474351 C21.6240344,6.48548634 21.6248138,6.48623097 21.6255915,6.48697741 L23.4973187,8.28355524 C23.7753168,8.55039175 23.785378,8.99173114 23.5198286,9.27095893 L9.51231071,24 L9.51231071,24 Z" id="Path-2"></path>
|
||||
</g>
|
||||
<rect id="矩形" x="0" y="0" width="48" height="48"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
@@ -1,23 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
|
||||
<title>清除</title>
|
||||
<g id="页面-2备份" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="创建群聊" transform="translate(-1243.000000, -413.000000)">
|
||||
<g id="Group-1364" transform="translate(650.000000, 343.000000)">
|
||||
<g id="Group-1363" transform="translate(290.000000, 46.000000)">
|
||||
<g id="Group-1358" transform="translate(0.000000, 24.000000)">
|
||||
<g id="清除" transform="translate(303.000000, 0.000000)">
|
||||
<path d="M0,0 L16,0 L16,16 L0,16 L0,0 Z" id="矩形"></path>
|
||||
<path d="M1,8 C1,11.8659999 4.13400006,15 8,15 C11.8659999,15 15,11.8659999 15,8 C15,4.13400006 11.8659999,1 8,1 L8,1 C4.13400006,1 1,4.13400006 1,8 Z" fill="#999999"></path>
|
||||
<g id="编组" transform="translate(8.000000, 8.000000) rotate(-315.000000) translate(-8.000000, -8.000000) translate(4.000000, 4.000000)" fill="#FFFFFF">
|
||||
<rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-90.000000) translate(-4.000000, -4.000000) " x="1.8189894e-12" y="3.5" width="8" height="1" rx="0.5"></rect>
|
||||
<rect id="矩形备份" transform="translate(4.000000, 4.000000) rotate(-360.000000) translate(-4.000000, -4.000000) " x="0" y="3.5" width="8" height="1" rx="0.5"></rect>
|
||||
</g>
|
||||
<rect id="矩形" x="0" y="0" width="16" height="16"></rect>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 536 B After Width: | Height: | Size: 536 B |
|
Before Width: | Height: | Size: 520 B After Width: | Height: | Size: 520 B |
|
Before Width: | Height: | Size: 783 B After Width: | Height: | Size: 783 B |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 801 B After Width: | Height: | Size: 801 B |
|
Before Width: | Height: | Size: 711 B After Width: | Height: | Size: 711 B |
|
Before Width: | Height: | Size: 513 B After Width: | Height: | Size: 513 B |
|
Before Width: | Height: | Size: 517 B After Width: | Height: | Size: 517 B |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 937 B After Width: | Height: | Size: 937 B |
|
Before Width: | Height: | Size: 647 B After Width: | Height: | Size: 647 B |
@@ -1,27 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" viewBox="0 0 16 16" version="1.1">
|
||||
<title>编组 14</title>
|
||||
<defs>
|
||||
<filter x="-10.6%" y="-5.4%" width="121.2%" height="110.9%" filterUnits="objectBoundingBox" id="filter-1">
|
||||
<feOffset dx="0" dy="7" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
|
||||
<feGaussianBlur stdDeviation="10" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
|
||||
<feMerge>
|
||||
<feMergeNode in="shadowMatrixOuter1"></feMergeNode>
|
||||
<feMergeNode in="SourceGraphic"></feMergeNode>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<g id="new" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="自定义消息" transform="translate(-458.000000, -318.000000)">
|
||||
<g id="编组-32" filter="url(#filter-1)" transform="translate(44.000000, 60.000000)">
|
||||
<g id="编组-24" transform="translate(30.000000, 250.000000)">
|
||||
<g id="编组-14" transform="translate(384.000000, 8.000000)">
|
||||
<circle id="椭圆形" fill="#006EFF" fill-rule="nonzero" cx="8" cy="8" r="8"></circle>
|
||||
<polyline id="路径-4" stroke="#FFFFFF" stroke-width="2" transform="translate(8.042641, 6.242641) rotate(-315.000000) translate(-8.042641, -6.242641) " points="6.04264069 10.2426407 10.0426407 10.2426407 10.0426407 2.24264069"></polyline>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 281 B After Width: | Height: | Size: 281 B |
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel="icon" href="faviconnew.png"><title>即时通信</title><link href="css/vendors~app.03806786.css" rel="stylesheet"><link href="css/app.0de947d6.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but 腾讯云即时通信 Web-IM doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="./TCaptcha.js"></script><script src="./aegis.min.js"></script><script>/**
|
||||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><link rel="icon" href="faviconnew.png"><title>即时通信</title><link href="css/vendors~app.28a73048.css" rel="stylesheet"><link href="css/app.7113887a.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but 腾讯云即时通信 Web-IM doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="./TCaptcha.js"></script><script src="./aegis.min.js"></script><script>/**
|
||||
* 根据基础字体大小 和 效果图宽度设置 根节点字体大小
|
||||
* @param baseFontSize 浏览器默认字体大小 [注]浏览器最小字体为12像素，所以该值必需大于等于12
|
||||
* @param baseWidth 设计稿的尺寸
|
||||
@@ -53,4 +53,4 @@
|
||||
},
|
||||
false
|
||||
);
|
||||
};</script><script src="js/vendors~app.de88239f.js"></script><script src="js/app.8ff38855.js"></script></body></html>
|
||||
};</script><script src="js/vendors~app.b38bf4ff.js"></script><script src="js/app.2f662ea4.js"></script></body></html>
|
||||