mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-08 01:48:56 +08:00
refactor(im): 重构聊天面板UI组件并修复多处交互问题
- 将头像组件从 dicebear 外链改为本地首字+底色生成,新增 avatarColor 工具函数 - 重构订单卡片(footPrint.vue)布局,优化商品与订单信息展示结构 - 重构店铺详情卡片(storeDetail.vue),统一信息行与评分行样式 - 移除消息气泡中的昵称时间行,调整气泡背景色与头像内边距 - 修复 face 变量名与全局组件 <face> 冲突导致头像URL被当作标签渲染 - 将 unload 事件监听替换为 pagehide,兼容 Chrome 弃用策略 - 修复搜索关键词未转义正则元字符导致输入特殊字符时抛异常 - 修复 WebSocket onMessage 对无 text 字段的推送消息误调用 JSON.parse - 将 setup 中同步调用全局 mixin 方法移至 onMounted,避免代理未就绪 - 商品/订单图片统一添加 onerror 默认图兜底 - 聊天列表消息预览支持 emoji 图片渲染(textReplaceEmoji) - 搜索框增加 clearable 属性及"没有找到相关好友"空态提示 - 锁定 element-plus 版本为 2.14.1 防止自动升级引入兼容问题 - 日期格式化分隔符由斜杠改为横杠 - 提现设置页新增提现规则说明字段,满足微信审核公示要求
This commit is contained in:
@@ -1,20 +1,53 @@
|
||||
<template>
|
||||
<img :src="text || 'https://avatars.dicebear.com/api/initials/'+name+'.svg?fontSize=38'" alt=""/>
|
||||
<span class="face-wrap">
|
||||
<img v-if="text" :src="text" :onerror="onError" alt="" />
|
||||
<i v-else class="face-initial" :style="{ backgroundColor: color }">{{ initial }}</i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: null,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: null,
|
||||
default: ''
|
||||
},
|
||||
});
|
||||
import { computed } from "vue";
|
||||
import { avatarColor } from "@/utils/functions";
|
||||
import { defaultAvatar } from "@/assets/images";
|
||||
|
||||
const props = defineProps({
|
||||
text: {
|
||||
type: null,
|
||||
default: ''
|
||||
},
|
||||
name: {
|
||||
type: null,
|
||||
default: ''
|
||||
},
|
||||
});
|
||||
|
||||
// 无头像时用「底色 + 首字」本地生成,替代原来的 dicebear 外链
|
||||
const initial = computed(() => String(props.name || "").slice(0, 1) || "?");
|
||||
const color = computed(() => avatarColor(String(props.name || "")));
|
||||
const onError = "this.src='" + defaultAvatar + "'";
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
<style lang="less" scoped>
|
||||
.face-wrap {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
</style>
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.face-initial {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-style: normal;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user