diff --git a/src/views/talk/TalkAvatar.vue b/src/views/talk/TalkAvatar.vue index 626ebbf..20e7e1e 100644 --- a/src/views/talk/TalkAvatar.vue +++ b/src/views/talk/TalkAvatar.vue @@ -2,8 +2,12 @@ /** * Talk 头像 —— 统一使用 GERP 系统头像 * - * 传入 UserUUID 时以系统头像(/Query/GetELTUserAvatar)呈现; - * 群聊等无对应用户的场景(UserUUID 为空)或头像加载失败时,回退为首字母色块。 + * 传入 userUUID 时以系统头像(/Query/GetELTUserAvatar)呈现; + * 群聊等无对应用户的场景(userUUID 为空)或头像加载失败时,回退为首字母色块。 + * + * 注意:prop 名必须为 camelCase(与仓库其它组件一致),否则模板中用 kebab-case + * 绑定时 Vue 只会按 camelize(key)(user-uuid → userUuid)匹配声明键,PascalCase + * 声明将永远取不到值。 */ import { computed, ref, watch } from 'vue' import { buildTalkAvatarUrl } from '@/api/talk' @@ -11,32 +15,32 @@ import { buildTalkAvatarUrl } from '@/api/talk' const props = withDefaults( defineProps<{ /** 对应用户 UUID;为空时直接使用首字母回退(如群聊头像) */ - UserUUID?: string + userUUID?: string /** 显示名(首字母回退与 img alt 用) */ - Name?: string + name?: string /** 尺寸:normal=会话列表/大号,small=消息与成员列表 */ - Size?: 'normal' | 'small' - /** 首字母回退的配色种子(缺省用 UserUUID / Name) */ - Seed?: string + size?: 'normal' | 'small' + /** 首字母回退的配色种子(缺省用 userUUID / name) */ + seed?: string }>(), - { UserUUID: '', Name: '', Size: 'normal', Seed: '' }, + { userUUID: '', name: '', size: 'normal', seed: '' }, ) /** 系统头像是否加载失败(失败即回退首字母,避免破图) */ const LoadFailed = ref(false) -const Src = computed(() => (LoadFailed.value ? '' : buildTalkAvatarUrl(props.UserUUID || ''))) +const Src = computed(() => (LoadFailed.value ? '' : buildTalkAvatarUrl(props.userUUID || ''))) /** 头像首字母 */ const FallbackText = computed(() => { - const text = (props.Name || '').trim() + const text = (props.name || '').trim() return text ? text.slice(0, 1).toUpperCase() : '?' }) /** 回退底色:由种子稳定散列到克制色板 */ const FallbackColor = computed(() => { const palette = ['#2563eb', '#0891b2', '#16a34a', '#ca8a04', '#dc2626', '#7c3aed', '#db2777', '#475569'] - const seed = props.Seed || props.UserUUID || props.Name || '' + const seed = props.seed || props.userUUID || props.name || '' let hash = 0 for (let i = 0; i < seed.length; i++) hash = (hash * 31 + seed.charCodeAt(i)) >>> 0 return palette[hash % palette.length] @@ -44,7 +48,7 @@ const FallbackColor = computed(() => { // 复用同一组件实例渲染不同用户(如切换会话)时重置失败标记 watch( - () => props.UserUUID, + () => props.userUUID, () => { LoadFailed.value = false }, @@ -54,10 +58,10 @@ watch(