Files
UI/packages/skin/ui/src/avatar.ts
T
2026-10-23 17:03:49 +08:00

21 lines
897 B
TypeScript

import { h } from '@ui-arch/frame';
import type { AvatarProps } from './types.js';
/*** 头像:有 src 渲染图片(alt 用名称),否则用名称首字做占位;尺寸与语义底色由 props 决定 ***/
export function avatar(props: AvatarProps): HTMLElement {
const size = `${props.size ?? 32}px`;
return h(
'span',
{ class: `ua-avatar ua-avatar-${props.variant ?? 'default'}`, style: `width:${size};height:${size}`, title: props.name },
props.src
? h('img', { class: 'ua-avatar-img', src: props.src, alt: props.name })
: h('span', { class: 'ua-avatar-text', 'aria-label': props.name }, firstChar(props.name)),
);
}
/*** 取首个可见字符(中文取首字、英文取首字母大写) ***/
function firstChar(name: string): string {
const c = name.trim().charAt(0);
return c ? c.toUpperCase() : '?'; // 空名兜底问号,避免空白圆
}