diff --git a/.ua/backlog.json b/.ua/backlog.json index f64ffac..aebe92f 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1148,6 +1148,14 @@ "acceptance": "ModalProps / DrawerProps 新增 closeOnOverlay(缺省 true);传 false 时点遮罩不关闭,× 与 Esc 行为不变;文档参数表与演示(防误关弹窗实例)同步;npm run check 全绿", "notes": "自补:可用性;遮罩点击处理改成显式卫语句,语义比一长串 && 更清楚", "status": "done" + }, + { + "id": "g99", + "title": "加载指示器补可定制播报文案", + "motivation": "spinner 的 aria-label 写死「加载中」,页面里同时有三处加载时读屏念三次一样的话,用户不知道在等什么;组件没有出口让调用方说明加载对象", + "acceptance": "SpinnerProps 新增可选 label,缺省仍是「加载中」(不传即旧行为);role=status 保持不变;文档参数与手把手步骤、演示(带 label 的实例)同步;npm run check 全绿", + "notes": "自补:无障碍;纯透传一个可选参数,行为向后兼容", + "status": "open" } ] } diff --git a/.ua/index.json b/.ua/index.json index 980cd77..1210853 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T05:15:56.401Z", + "generatedAt": "2026-10-26T05:16:55.417Z", "repoRoot": ".", "packages": [ { @@ -1248,13 +1248,19 @@ "t": "number", "d": "直径像素;缺省 18", "df": "18" + }, + { + "n": "label", + "t": "string", + "d": "读屏播报文案,如「正在加载订单」;缺省「加载中」" } ], "example": "spinner(); spinner({ size: 26 })", "steps": [ "数据加载时插入 spinner(),加载完成移除", "用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)", - "与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner" + "与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner", + "区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 626b760..d57d59f 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -375,7 +375,7 @@ const content = h( badge({ dot: true, label: '有未读消息' }), alert({ message: '信息提示:这是一条 info 提示条。' }), alert({ message: '警告提示:操作可能存在风险。', variant: 'warning' }), - h('div', { class: 'row' }, spinner(), spinner({ size: 26 })), + h('div', { class: 'row' }, spinner(), spinner({ size: 26 }), spinner({ size: 22, label: '正在加载订单列表' })), progress({ value: percent, label: '上传进度' }), h('div', { class: 'row' }, h('span', { class: 'out' }, '语义色:'), progress({ value: percent, variant: 'danger', label: '同步失败重试进度' })), h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态:'), progress({ label: '正在连接' })), diff --git a/llms-full.txt b/llms-full.txt index e79fed2..7cbf642 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T05:15:56.401Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T05:16:55.417Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -628,6 +628,7 @@ popover({ title: '筛选条件', content: h('div', null, '任意可交互内容' 参数: - size(默认 18):number —— 直径像素;缺省 18 +- label:string —— 读屏播报文案,如「正在加载订单」;缺省「加载中」 示例: @@ -640,6 +641,7 @@ spinner(); spinner({ size: 26 }) 1. 数据加载时插入 spinner(),加载完成移除 2. 用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号) 3. 与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner +4. 区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」 现场演示:apps/docs/demo.html#sec-feedback diff --git a/packages/skin/ui/src/spinner.ts b/packages/skin/ui/src/spinner.ts index 190bf0f..071e900 100644 --- a/packages/skin/ui/src/spinner.ts +++ b/packages/skin/ui/src/spinner.ts @@ -4,7 +4,7 @@ import type { SpinnerProps } from './types.js'; /*** 加载指示器:纯 CSS 旋转动画,size 控制直径 ***/ export function spinner(props: SpinnerProps = {}): HTMLElement { const size = `${props.size ?? 18}px`; - const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': '加载中' }); // 读屏播报加载状态 + const el = h('span', { class: 'ua-spinner', role: 'status', 'aria-label': props.label ?? '加载中' }); // 读屏播报加载状态,label 可写明在加载什么 el.style.width = size; el.style.height = size; return el; diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 2d1a4ad..b748b95 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -312,7 +312,8 @@ export interface ToastProps { /*** 加载指示器入参 ***/ export interface SpinnerProps { - size?: number; // 直径像素;缺省 18 + size?: number; // 直径像素;缺省 18 + label?: string; // 读屏播报文案,如「正在加载订单」;缺省「加载中」 } /*** 进度条入参 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index d14916b..396352d 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1119,13 +1119,19 @@ "t": "number", "d": "直径像素;缺省 18", "df": "18" + }, + { + "n": "label", + "t": "string", + "d": "读屏播报文案,如「正在加载订单」;缺省「加载中」" } ], "example": "spinner(); spinner({ size: 26 })", "steps": [ "数据加载时插入 spinner(),加载完成移除", "用 size 匹配上下文尺寸(按钮内用小号,整页 loading 用大号)", - "与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner" + "与 skeleton 分工:已知内容结构用 skeleton 占位,只有『在跑』的短等待用 spinner", + "区块级加载给 spinner 传 label 说明在加载什么,读屏才不会只念一句「加载中」" ] }, {