HIsheR
23 lines
1.2 KiB
TypeScript
23 lines
1.2 KiB
TypeScript
import { h } from '@ui-arch/frame';
|
||
import type { AvatarProps } from './types.js';
|
||
|
||
/*** 头像：有 src 渲染图片（alt 用名称），否则用名称首字做占位；src 加载失败就地回退文字头像，尺寸与语义底色不变 ***/
|
||
export function avatar(props: AvatarProps): HTMLElement {
|
||
const size = `${props.size ?? 32}px`;
|
||
const textAvatar = (): HTMLElement =>
|
||
h('span', { class: 'ua-avatar-text', role: 'img', 'aria-label': props.name }, firstChar(props.name)); // 文字头像补 role=img，aria-label 才会被读屏当名称播报
|
||
const img = props.src ? h('img', { class: 'ua-avatar-img', src: props.src, alt: props.name }) : null;
|
||
img?.addEventListener('error', () => img.replaceWith(textAvatar())); // 破图兜底：碎图标比空白更刺眼，回退首字占位
|
||
return h(
|
||
'span',
|
||
{ class: `ua-avatar ua-avatar-${props.variant ?? 'default'}`, style: `width:${size};height:${size}`, title: props.name },
|
||
img ?? textAvatar(),
|
||
);
|
||
}
|
||
|
||
/*** 取首个可见字符（中文取首字、英文取首字母大写） ***/
|
||
function firstChar(name: string): string {
|
||
const c = name.trim().charAt(0);
|
||
return c ? c.toUpperCase() : '?'; // 空名兜底问号，避免空白圆
|
||
}
|