iter(g144): 新增头像组组件 avatarGroup

packages/skin/ui/src/avatarGroup.ts

@@ -0,0 +1,22 @@
+import { h } from '@ui-arch/frame';
+import { avatar } from './avatar.js';
+import type { AvatarGroupProps } from './types.js';
+
+/*** 头像组：横向叠放（负边距 + 底色描边切口），超出 max 折叠成 +N，整组 title 列出全部姓名 ***/
+export function avatarGroup(props: AvatarGroupProps): HTMLElement {
+  const size = props.size ?? 32;             // 直径与单个 avatar 一致
+  const max = Math.max(props.max ?? 4, 1);   // 至少留一个位置，避免传 0 后只剩 +N
+  const shown = props.items.slice(0, max);   // 展示前 max 个
+  const rest = props.items.length - shown.length;
+  const group = h('div', {
+    class: 'ua-avatar-group',
+    title: props.items.map((item) => item.name).join('、'), // 折叠后仍能看到全部成员
+  }, ...shown.map((item) => avatar({ name: item.name, src: item.src, variant: item.variant, size })));
+  if (rest <= 0) return group; // 卫语句：没超上限就不渲染 +N
+  group.append(h('span', {
+    class: 'ua-avatar ua-avatar-more',
+    style: `width:${size}px;height:${size}px;font-size:${Math.round(size * 0.38)}px`,
+    'aria-label': `还有 ${rest} 人`, // 纯文本 +N 读屏会念成「加 3」，补可访问名
+  }, `+${rest}`));
+  return group;
+}

packages/skin/ui/src/index.ts

@@ -66,3 +66,4 @@ export { floatButton } from './floatButton.js';
 export { mentions } from './mentions.js';
 export { treeSelect } from './treeSelect.js';
 export { link } from './link.js';
+export { avatarGroup } from './avatarGroup.js';

packages/skin/ui/src/types.ts

@@ -827,4 +827,18 @@ export interface LinkProps {
   onClick?: (e: Event) => void; // 点击回调（禁用时不触发）
 }
 
+/*** 头像组成员项 ***/
+export interface AvatarItem {
+  name: string;                                            // 姓名：占位首字与悬停标题都用它
+  src?: string;                                            // 头像图片地址；缺省首字占位
+  variant?: 'default' | 'success' | 'warning' | 'danger';  // 首字底色语义档；缺省 default
+}
+
+/*** 头像组入参 ***/
+export interface AvatarGroupProps {
+  items: AvatarItem[]; // 成员列表，按显示顺序排列
+  max?: number;        // 最多展示几个，超出折叠成 +N；缺省 4
+  size?: number;       // 头像直径像素；缺省 32
+}
+
 export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方