iter: d22 新增头像 avatar 组件

packages/skin/ui/src/avatar.ts

@@ -0,0 +1,20 @@
+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() : '?'; // 空名兜底问号，避免空白圆
+}

packages/skin/ui/src/index.ts

@@ -13,6 +13,7 @@ export { breadcrumb } from './breadcrumb.js';
 export { card } from './card.js';
 export { badge } from './badge.js';
 export { tag } from './tag.js';
+export { avatar } from './avatar.js';
 export { alert } from './alert.js';
 export { toast, showToast } from './toast.js';
 export { tooltip } from './tooltip.js';

packages/skin/ui/src/types.ts

@@ -170,6 +170,14 @@ export interface BadgeProps {
   variant?: 'default' | 'success' | 'warning' | 'danger'; // 语义色；缺省 default
 }
 
+/*** 头像入参 ***/
+export interface AvatarProps {
+  name: string;   // 名称：生成占位首字，并作为图片 alt 与悬停标题
+  src?: string;   // 图片地址；缺省用首字占位
+  size?: number;  // 直径像素；缺省 32
+  variant?: 'default' | 'success' | 'warning' | 'danger'; // 占位底色语义档；缺省 default
+}
+
 /*** 标签入参（可关闭，与纯展示的 badge 区分） ***/
 export interface TagProps {
   label: string;   // 标签文案