iter(g325): avatar 破图自动回退文字头像，不再露浏览器碎图标

packages/skin/ui/src/avatar.ts

@@ -1,15 +1,17 @@
 import { h } from '@ui-arch/frame';
 import type { AvatarProps } from './types.js';
 
-/*** 头像：有 src 渲染图片（alt 用名称），否则用名称首字做占位；尺寸与语义底色由 props 决定 ***/
+/*** 头像：有 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 },
-    props.src
-      ? h('img', { class: 'ua-avatar-img', src: props.src, alt: props.name })
-      : h('span', { class: 'ua-avatar-text', role: 'img', 'aria-label': props.name }, firstChar(props.name)), // 文字头像补 role=img，aria-label 才会被读屏当名称播报
+    img ?? textAvatar(),
   );
 }