diff --git a/.ua/backlog.json b/.ua/backlog.json index 0baf2f3..23c26e9 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1308,6 +1308,14 @@ "acceptance": "npm run changelog 重新生成(309 提交),与提交史一致;npm run check 全绿", "notes": "自补:发版前刷新步骤;本次唤起收尾轮", "status": "done" + }, + { + "id": "g119", + "title": "空状态支持自定义图标", + "motivation": "empty 的图标位写死成 ⌀,业务方几乎都会换成自己的插图(搜索无结果用放大镜、空订单用纸箱);现在只能在外面再包一层插画 div,既影响居中节奏又和组件内置图标同屏", + "acceptance": "EmptyProps 新增 icon(unknown):字符串或图标 DOM 直接进图标位,缺省仍是 ⌀;图标位保持 aria-hidden,语义由 title / description 承担;文档参数表 / 手把手与演示(搜索无结果换成 🔍)同步;npm run check 全绿", + "notes": "自补:可用性;一个可选参数透传,行为向后兼容", + "status": "open" } ] } diff --git a/.ua/index.json b/.ua/index.json index 6644e85..8d6e6a6 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T06:10:04.137Z", + "generatedAt": "2026-10-26T06:12:21.011Z", "repoRoot": ".", "packages": [ { @@ -1456,6 +1456,11 @@ "t": "string", "d": "补充说明;缺省不渲染" }, + { + "n": "icon", + "t": "unknown", + "d": "图标区内容(字符串或图标 DOM);缺省渲染 ⌀ 占位符号,装饰性元素不进无障碍树" + }, { "n": "action", "t": "unknown", @@ -1466,7 +1471,8 @@ "steps": [ "在列表 / 表格 / 筛选结果为空时渲染 empty 占位", "title 一句话说明状态,description 补充原因或建议", - "action 传入 DOM(如 ghost 按钮)引导用户下一步操作" + "action 传入 DOM(如 ghost 按钮)引导用户下一步操作", + "要换成自家插图就传 icon(字符串或 SVG 节点):它固定 aria-hidden,文案仍由 title / description 承担" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 55ee5f2..c5420d1 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -577,7 +577,7 @@ const content = h( button({ label: '切换数据态', onClick: () => noResult(!noResult()) }), ), () => (noResult() - ? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) }) + ? empty({ title: '暂无匹配结果', description: '试试放宽筛选条件,或清空关键词重新搜索。', icon: '🔍', action: button({ label: '重置筛选', variant: 'ghost', onClick: () => noResult(false) }) }) : card({ title: '搜索结果' }, h('p', null, '这里展示命中的数据列表。'))), ), section( diff --git a/llms-full.txt b/llms-full.txt index 99f928c..e0bfb32 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T06:10:04.137Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T06:12:21.011Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -752,6 +752,7 @@ const score = signal(0); rate({ value: score, max: 5, onChange: (v) => console.l - title:string —— 主标题;缺省不渲染 - description:string —— 补充说明;缺省不渲染 +- icon:unknown —— 图标区内容(字符串或图标 DOM);缺省渲染 ⌀ 占位符号,装饰性元素不进无障碍树 - action:unknown —— 操作区内容(常见为按钮);缺省不渲染 示例: @@ -765,6 +766,7 @@ empty({ title: '暂无数据', description: '调整筛选条件后再试', actio 1. 在列表 / 表格 / 筛选结果为空时渲染 empty 占位 2. title 一句话说明状态,description 补充原因或建议 3. action 传入 DOM(如 ghost 按钮)引导用户下一步操作 +4. 要换成自家插图就传 icon(字符串或 SVG 节点):它固定 aria-hidden,文案仍由 title / description 承担 现场演示:apps/docs/demo.html#sec-empty diff --git a/packages/skin/ui/src/empty.ts b/packages/skin/ui/src/empty.ts index cdbbb9e..3d03cbf 100644 --- a/packages/skin/ui/src/empty.ts +++ b/packages/skin/ui/src/empty.ts @@ -1,12 +1,12 @@ import { h } from '@ui-arch/frame'; import type { EmptyProps } from './types.js'; -/*** 空状态:居中占位提示,title/description 可选,action 放操作区(常见为按钮) ***/ +/*** 空状态:居中占位提示,title/description 可选,action 放操作区(常见为按钮),icon 可换成自家插图 ***/ export function empty(props: EmptyProps): HTMLDivElement { return h( 'div', { class: 'ua-empty', role: 'status' }, // role=status 由读屏播报 - h('div', { class: 'ua-empty-icon', 'aria-hidden': 'true' }, '⌀'), // 装饰符号,读屏跳过 + h('div', { class: 'ua-empty-icon', 'aria-hidden': 'true' }, props.icon ?? '⌀'), // 装饰符号默认 ⌀,读屏跳过 props.title ? h('div', { class: 'ua-empty-title' }, props.title) : null, props.description ? h('div', { class: 'ua-empty-desc' }, props.description) : null, props.action ? h('div', { class: 'ua-empty-action' }, props.action) : null, diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index d78b602..8332c68 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -230,6 +230,7 @@ export interface RateProps { export interface EmptyProps { title?: string; // 主标题;缺省不渲染 description?: string; // 补充说明;缺省不渲染 + icon?: unknown; // 图标区内容(字符串 / 图标 DOM);缺省渲染 ⌀ 占位符号 action?: unknown; // 操作区内容(常见为按钮);缺省不渲染 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 84835bd..7c4f7fa 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1327,6 +1327,11 @@ "t": "string", "d": "补充说明;缺省不渲染" }, + { + "n": "icon", + "t": "unknown", + "d": "图标区内容(字符串或图标 DOM);缺省渲染 ⌀ 占位符号,装饰性元素不进无障碍树" + }, { "n": "action", "t": "unknown", @@ -1337,7 +1342,8 @@ "steps": [ "在列表 / 表格 / 筛选结果为空时渲染 empty 占位", "title 一句话说明状态,description 补充原因或建议", - "action 传入 DOM(如 ghost 按钮)引导用户下一步操作" + "action 传入 DOM(如 ghost 按钮)引导用户下一步操作", + "要换成自家插图就传 icon(字符串或 SVG 节点):它固定 aria-hidden,文案仍由 title / description 承担" ] }, {