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

This commit is contained in:
HIsheR
2026-10-27 01:18:12 +08:00
parent 4359f508e5
commit 513304f137
4 changed files with 22 additions and 9 deletions
+3 -2
View File
@@ -1,6 +1,6 @@
# @ui-arch 组件库 Agent 文档(无图形版)
> 自动生成于 2026-10-26T17:03:14.418Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 自动生成于 2026-10-26T17:17:55.311Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。
> 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。
## 快速上手
@@ -527,6 +527,7 @@ avatar({ name: '张三' }); avatar({ name: 'Alice', size: 40, variant: 'success'
2. 有图片就传 src:渲染 img 并用 name 作 alt,读屏语义完整;图片缺失时由浏览器 alt 兜底
3. 尺寸用 size(像素)控制,头像不参与布局拉伸(flex:none),可安全排进 .row 与表格单元格
4. 需要区分类别(在线/告警)时用 variant 换底色档,颜色一律来自令牌
5. src 加载失败(404 / 断网)时自动回退为文字头像:首字占位、role=img 与 aria-label 不变,尺寸与语义底色保持,不会露出浏览器碎图标
现场演示:apps/docs/demo.html#sec-avatar
@@ -2578,7 +2579,7 @@ API 速览:
- card(props, ...children):卡片容器
- badge(props):徽标,variant = default | success | warning | danger
- tag(props):可关闭标签,variant 五档语义色,closable + onClose 支持从数据源移除(纯展示请用 badge)
- avatar(props):头像,有 src 渲染图片(alt 用名称)、无 src 用首字占位,size 可调 + 四档语义底色
- avatar(props):头像,有 src 渲染图片(alt 用名称)、无 src 用首字占位,src 加载失败自动回退文字头像,size 可调 + 四档语义底色
- alert(props):提示条,variant 四档语义色 + 可选 title 与 closable 关闭按钮,role=alert 读屏可播报
- toast.info/success/warning/error(message, duration?):消息提示工厂,右上角堆叠,默认 3s 自动消失(悬停暂停、移出续时),出入场微动画;showToast(props) 为完整入参版本(closable 显示关闭按钮,同屏最多 4 条)
- tooltip(props, trigger):包裹式悬浮提示,hover / 键盘聚焦延迟出场,Esc 收起;触摸屏按下即出、抬手延迟 1.2s 收起,气泡 pointer-events: none 不挡点击