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

This commit is contained in:
HIsheR
2026-10-26 15:40:01 +08:00
parent 9b1c068ead
commit 1009c891d9
13 changed files with 173 additions and 10 deletions
+26 -1
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T07:38:33.907Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T07:39:42.119Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -1861,6 +1861,30 @@ link({ href: '/docs', label: '查看文档' }); link({ href: 'https://example.co
现场演示:apps/docs/demo.html#sec-link
### avatarGroup — 头像组 AvatarGroup
参数:
- items(必填):AvatarItem[] —— 成员列表:每项含 name(姓名)、src(图片地址)、variant(首字底色语义档)
- max(默认 4):number —— 最多展示几个,超出折叠成 +N(至少展示 1 个)
- size(默认 32):number —— 头像直径像素,与 avatar 的 size 同义
示例:
```
avatarGroup({ items: [{ name: '张三' }, { name: '李四', variant: 'success' }, { name: '王五' }], max: 4 })
```
手把手:
1. 协作列表 / 评论头部展示参与人用它,比并排 avatar 省横向空间:叠放用负边距 + 底色描边切出入口
2. 成员多时设 max:前 max 个照常显示,其余折叠成一个 +N,悬停任意头像都能看到全部姓名
3. 只传 name 即首字占位,有图片就传 src;底色语义档用 variant(default / success / warning / danger)
4. 整组是展示型元素:要有点击行为就在外面包 button 或 link,不要给单个头像加交互
5. size 与单个 avatar 一致,混排时把并排 avatar 与 avatarGroup 传同一个 size,视觉才对得上
现场演示:apps/docs/demo.html#sec-avatar
API 速览:
- button(props):按钮,variant = primary | ghost | danger,disabled 支持布尔或信号禁用;type 缺省 button(表单内不隐式提交)
@@ -1931,6 +1955,7 @@ API 速览:
- mentions(props):@提及输入,textarea 内键入 @ 弹候选(名字 / 关键词过滤),↑↓ 环形移动、Enter/Tab 选中、Esc 只收本层,选中按光标替换并写回 value
- treeSelect(props):树形选择,按钮触发弹层并复用 tree(搜索 / 多选 / 级联),单选选中即收起、多选保持展开,Esc 与点外收起
- link(props):链接,站内跳转与站外跳转统一入口,external 自动补 ↗ 与 rel=noopener noreferrer 并给读屏播报
- avatarGroup(props):头像组,横向叠放并在超出 max 时折叠成 +N,整组 title 列出全部姓名
一行用法: