From bd64e437b1c1eebdf9ca1a475e0f18873516c8e8 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 13:03:43 +0800 Subject: [PATCH] =?UTF-8?q?iter(g85):=20=E8=BF=9B=E5=BA=A6=E6=9D=A1?= =?UTF-8?q?=E8=A1=A5=E5=8F=AF=E8=AE=BF=E9=97=AE=E5=90=8D=E4=B8=8E=E8=AF=AD?= =?UTF-8?q?=E4=B9=89=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 ++++++++ .ua/index.json | 26 ++++++++++++++++---------- apps/demo/main.ts | 5 +++-- llms-full.txt | 17 ++++++++--------- packages/skin/ui/src/progress.ts | 8 ++++++-- packages/skin/ui/src/types.ts | 2 ++ packages/skin/ui/ua.manifest.json | 24 +++++++++++++++--------- packages/skin/ui/ui.css | 10 ++++++++++ 8 files changed, 68 insertions(+), 32 deletions(-) diff --git a/.ua/backlog.json b/.ua/backlog.json index 7492447..7064d4b 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -1036,6 +1036,14 @@ "acceptance": "width 为数字的列在表头右缘出现手柄：拖动实时改对应 宽度（下限 56px，拖出表头仍跟手），聚焦手柄后 ← → 每次 ±8px，双击复位到声明宽度；拖拽/双击不触发排序；拖拽期间全局禁选文本；样式走令牌且有 reduced-motion 兜底；dataTable ≤ 200 行；npm run check 全绿", "notes": "自补：可用性；拖拽与键盘共用 apply 单一写宽入口，逻辑拆到 columnResize.ts 免撑大 dataTable", "status": "done" + }, + { + "id": "g85", + "title": "进度条补可访问名与语义色", + "motivation": "定量态只有 aria-valuenow，没有名称——读屏只念「50%」，不知道是什么在 50%；且除 accent/success 外没有失败告警色，同步失败也只能显示成一片蓝", + "acceptance": "新增 label（可访问名，不确定态缺省「进行中」兜底）与 variant（default/success/warning/danger）；语义色规则置于 .ua-done 之后同特异性胜出，满格不回退 success；样式只消费 --ua-* 令牌；文档 props/steps 与演示同步；npm run check 全绿", + "notes": "自补：无障碍 + 视觉语义；CSS 层用特异性解决 variant 与满格 success 的冲突，不加 JS 分支", + "status": "open" } ] } diff --git a/.ua/index.json b/.ua/index.json index 29ecd33..549db7a 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T05:00:45.858Z", + "generatedAt": "2026-10-26T05:03:25.043Z", "repoRoot": ".", "packages": [ { @@ -1252,23 +1252,29 @@ { "n": "value", "t": "Signal", - "d": "当前进度 0-100 信号，变化自动平滑过渡（越界钳制）" + "d": "当前进度 0-100 的信号；不传即不确定态（未知时长的加载）" }, { "n": "showText", "t": "boolean", - "d": "是否显示百分比文字；缺省 true", - "df": "true" + "d": "是否右侧显示百分比；缺省 true（不确定态忽略）" + }, + { + "n": "label", + "t": "string", + "d": "可访问名，如「上传进度」；缺省不确定态念「进行中」" + }, + { + "n": "variant", + "t": "'default' | 'success' | 'warning' | 'danger'", + "d": "填充语义色；缺省 default（满格自动切 success）" } ], "example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)", "steps": [ - "时长未知的加载直接 progress() 不传 value：填充块匀速往复，不显示百分比，读屏读作进行中", - "创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制）", - "传入 value，填充宽度与百分比文字随信号平滑过渡", - "进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹", - "不需要百分比文字时传 showText: false", - "定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步" + "传 value 信号给定量进度，不传则退化为往复的不确定态", + "label 写清这是什么进度，读屏会把名称与百分比一起念出来", + "失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖" ] }, { diff --git a/apps/demo/main.ts b/apps/demo/main.ts index 0b033d6..55c44c0 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -364,8 +364,9 @@ const content = h( alert({ message: '信息提示：这是一条 info 提示条。' }), alert({ message: '警告提示：操作可能存在风险。', variant: 'warning' }), h('div', { class: 'row' }, spinner(), spinner({ size: 26 })), - progress({ value: percent }), - h('div', { class: 'row' }, h('span', { class: 'out' }, '不确定态：'), progress()), + 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: '正在连接' })), ), section( 'sec-alert', diff --git a/llms-full.txt b/llms-full.txt index 1465a9b..6007b03 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T05:00:45.858Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T05:03:25.043Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -644,8 +644,10 @@ spinner(); spinner({ size: 26 }) 参数： -- value：Signal —— 当前进度 0-100 信号，变化自动平滑过渡（越界钳制） -- showText（默认 true）：boolean —— 是否显示百分比文字；缺省 true +- value：Signal —— 当前进度 0-100 的信号；不传即不确定态（未知时长的加载） +- showText：boolean —— 是否右侧显示百分比；缺省 true（不确定态忽略） +- label：string —— 可访问名，如「上传进度」；缺省不确定态念「进行中」 +- variant：'default' | 'success' | 'warning' | 'danger' —— 填充语义色；缺省 default（满格自动切 success） 示例： @@ -655,12 +657,9 @@ const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 手把手： -1. 时长未知的加载直接 progress() 不传 value：填充块匀速往复，不显示百分比，读屏读作进行中 -2. 创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制） -3. 传入 value，填充宽度与百分比文字随信号平滑过渡 -4. 进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹 -5. 不需要百分比文字时传 showText: false -6. 定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步 +1. 传 value 信号给定量进度，不传则退化为往复的不确定态 +2. label 写清这是什么进度，读屏会把名称与百分比一起念出来 +3. 失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖 现场演示：apps/docs/demo.html#sec-feedback diff --git a/packages/skin/ui/src/progress.ts b/packages/skin/ui/src/progress.ts index 3dfe25c..18fd126 100644 --- a/packages/skin/ui/src/progress.ts +++ b/packages/skin/ui/src/progress.ts @@ -9,10 +9,13 @@ export function progress(props: ProgressProps = {}): HTMLElement { const track = h('div', { class: 'ua-progress-track' }, fill); const text = h('span', { class: 'ua-progress-text' }); const withText = props.showText !== false && !!value; // 不确定态没有百分比可显示 + const label = props.label; // 可访问名：读屏念「上传进度 50%」而不是干巴巴的百分比 + const variant = props.variant ?? 'default'; // 语义色：default 之外都带类名，满格时仍以 variant 为准 + const cls = `ua-progress${variant === 'default' ? '' : ` ua-progress-${variant}`}`; if (!value) { fill.classList.add('ua-indeterminate'); // 宽度与往复动画交给 CSS - return h('div', { class: 'ua-progress', role: 'progressbar', 'aria-label': '进行中' }, track); + return h('div', { class: cls, role: 'progressbar', 'aria-label': label ?? '进行中' }, track); } effect(() => { const v = clamp(value()); // 依赖收集：信号变化自动写回 @@ -23,8 +26,9 @@ export function progress(props: ProgressProps = {}): HTMLElement { return h( 'div', { - class: 'ua-progress', + class: cls, role: 'progressbar', + 'aria-label': label, 'aria-valuemin': '0', 'aria-valuemax': '100', 'aria-valuenow': () => String(Math.round(clamp(value()))), diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 8e8c989..26a54f9 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -314,6 +314,8 @@ export interface SpinnerProps { export interface ProgressProps { value?: Signal; // 当前进度 0-100 的信号；不传即不确定态（未知时长的加载） showText?: boolean; // 是否右侧显示百分比；缺省 true（不确定态忽略） + label?: string; // 可访问名，如「上传进度」；缺省不确定态念「进行中」，定量态无名称 + variant?: 'default' | 'success' | 'warning' | 'danger'; // 填充语义色；缺省 default（满格自动切 success） } /*** 标签页入参 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 9cad106..7e42430 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1123,23 +1123,29 @@ { "n": "value", "t": "Signal", - "d": "当前进度 0-100 信号，变化自动平滑过渡（越界钳制）" + "d": "当前进度 0-100 的信号；不传即不确定态（未知时长的加载）" }, { "n": "showText", "t": "boolean", - "d": "是否显示百分比文字；缺省 true", - "df": "true" + "d": "是否右侧显示百分比；缺省 true（不确定态忽略）" + }, + { + "n": "label", + "t": "string", + "d": "可访问名，如「上传进度」；缺省不确定态念「进行中」" + }, + { + "n": "variant", + "t": "'default' | 'success' | 'warning' | 'danger'", + "d": "填充语义色；缺省 default（满格自动切 success）" } ], "example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)", "steps": [ - "时长未知的加载直接 progress() 不传 value：填充块匀速往复，不显示百分比，读屏读作进行中", - "创建数值信号 pct = signal(0)，范围 0-100（越界自动钳制）", - "传入 value，填充宽度与百分比文字随信号平滑过渡", - "进行中填充带流动条纹，到 100% 自动变 success 色并停止条纹", - "不需要百分比文字时传 showText: false", - "定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步" + "传 value 信号给定量进度，不传则退化为往复的不确定态", + "label 写清这是什么进度，读屏会把名称与百分比一起念出来", + "失败或告警用 variant: 'danger' / 'warning'，该颜色在满格时也不被 success 覆盖" ] }, { diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 7fda853..fd217b3 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -1364,6 +1364,16 @@ button.ua-step-dot:hover { animation: none; opacity: 0; } +/* 语义色：显式声明在 ua-done 之后，同特异性以调用方 variant 为准（满格不回退 success） */ +.ua-progress-success .ua-progress-fill { + background: var(--ua-color-success); +} +.ua-progress-warning .ua-progress-fill { + background: var(--ua-color-warning); +} +.ua-progress-danger .ua-progress-fill { + background: var(--ua-color-danger); +} /* 不确定态：固定比例填充块匀速往复，宽度与位移都由动画控制 */ .ua-progress-fill.ua-indeterminate { width: 35%;