fix(chat): 修复消息气泡组件头像加载及位置服务地图链接

- 实现头像加载失败处理机制,添加默认头像回退方案
- 使用 ref 状态追踪头像加载失败情况,避免 watchEffect 重置问题
- 更新位置服务地图链接,从腾讯地图切换到高德地图服务
- 配置 Vue 构建依赖转译,解决 element-plus 兼容性问题
- 移除多个无用的 SVG 图标文件,精简项目资源
This commit is contained in:
2026-04-10 14:43:08 +08:00
parent c1a56aefd9
commit 7106e99a7b
34 changed files with 152 additions and 204 deletions
@@ -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;
}