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;
+}