diff --git a/.ua/index.json b/.ua/index.json index 342f784..8ff7e1f 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T11:16:26.554Z", + "generatedAt": "2026-10-26T11:17:54.464Z", "repoRoot": ".", "packages": [ { @@ -1412,6 +1412,12 @@ "n": "variant", "t": "'default' | 'success' | 'warning' | 'danger'", "d": "填充语义色;缺省 default(满格自动切 success)" + }, + { + "n": "format", + "t": "(v: number) => string", + "k": 1, + "d": "文本自定义:传入则线/环形的进度文本用其返回值替代默认「N%」;缺省取整百分比" } ], "example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)", diff --git a/llms-full.txt b/llms-full.txt index 32668db..6737ac1 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档(无图形版) -> 自动生成于 2026-10-26T11:16:26.554Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 +> 自动生成于 2026-10-26T11:17:54.464Z,数据源:各包 ua.manifest.json,勿手改。人类版文档站:apps/docs/index.html。 > 组件 = 普通函数,传 props 返回 DOM;状态用 signal 双向绑定:读 signal() 写 signal(v)。 ## 快速上手 @@ -685,6 +685,7 @@ spinner(); spinner({ size: 26 }) - showText:boolean —— 是否右侧显示百分比;缺省 true(不确定态忽略) - label:string —— 可访问名,如「上传进度」;缺省不确定态念「进行中」 - variant:'default' | 'success' | 'warning' | 'danger' —— 填充语义色;缺省 default(满格自动切 success) +- format(回调):(v: number) => string —— 文本自定义:传入则线/环形的进度文本用其返回值替代默认「N%」;缺省取整百分比 示例: diff --git a/packages/skin/ui/src/progress.ts b/packages/skin/ui/src/progress.ts index 28999be..7c750b0 100644 --- a/packages/skin/ui/src/progress.ts +++ b/packages/skin/ui/src/progress.ts @@ -2,7 +2,7 @@ import { effect, h } from '@ui-arch/frame'; import type { Signal } from '@ui-arch/frame'; import type { ProgressProps } from './types.js'; -/*** 进度条:value 信号驱动 0-100 定量态(缺省则不确定态),type='circle' 且传 value 时出环形;满格切 success 色 ***/ +/*** 进度条:value 信号驱动 0-100 定量态(缺省则不确定态),type='circle' 且传 value 时出环形;满格切 success 色,format 可自定义文本 ***/ export function progress(props: ProgressProps = {}): HTMLElement { // —— 状态集中声明 —— const value = props.value; // 可选:不传即不确定态 @@ -13,17 +13,18 @@ export function progress(props: ProgressProps = {}): HTMLElement { const label = props.label; // 可访问名:读屏念「上传进度 50%」而不是干巴巴的百分比 const variant = props.variant ?? 'default'; // 语义色:default 之外都带类名,满格时仍以 variant 为准 const cls = `ua-progress${variant === 'default' ? '' : ` ua-progress-${variant}`}`; + const textOf = (v: number): string => (props.format ? props.format(v) : `${Math.round(v)}%`); // 进度文本统一出口:format 优先 if (!value) { fill.classList.add('ua-indeterminate'); // 宽度与往复动画交给 CSS return h('div', { class: cls, role: 'progressbar', 'aria-label': label ?? '进行中' }, track); } - if (props.type === 'circle') return ring(value, label, variant, withText); // 环形:SVG 版 + if (props.type === 'circle') return ring(value, label, variant, withText, textOf); // 环形:SVG 版 effect(() => { const v = clamp(value()); // 依赖收集:信号变化自动写回 fill.style.width = `${v}%`; fill.classList.toggle('ua-done', v >= 100); // 满格切语义色 - text.textContent = `${Math.round(v)}%`; + text.textContent = textOf(v); }); return h( 'div', @@ -47,7 +48,7 @@ function clamp(v: number): number { } /*** 环形进度:SVG 双圆用 dashoffset 表达弧长(必须 createElementNS,h() 造不出可渲染的 SVG) ***/ -function ring(value: Signal, label: string | undefined, variant: string, withText: boolean): HTMLElement { +function ring(value: Signal, label: string | undefined, variant: string, withText: boolean, textOf: (v: number) => string): HTMLElement { const NS = 'http://www.w3.org/2000/svg'; // SVG 命名空间 const R = 26; // 半径:viewBox 64 两侧留出线宽 const C = 2 * Math.PI * R; // 周长:dasharray 的基准长度 @@ -70,8 +71,8 @@ function ring(value: Signal, label: string | undefined, variant: string, effect(() => { const v = clamp(value()); arc.setAttribute('stroke-dashoffset', String(C * (1 - v / 100))); // 弧长按比例收缩 - txt.textContent = `${Math.round(v)}%`; - svg.setAttribute('aria-label', `${label ?? '进度'} ${Math.round(v)}%`); // 环形没有原生 progressbar,名称自己拼 + txt.textContent = textOf(v); + svg.setAttribute('aria-label', `${label ?? '进度'} ${textOf(v)}`); // 环形没有原生 progressbar,名称自己拼 }); return h('div', { class: 'ua-progress ua-progress-circle' }, svg as unknown as HTMLElement) as HTMLElement; } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index 395d90f..cf267a9 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -350,6 +350,7 @@ export interface ProgressProps { showText?: boolean; // 是否右侧显示百分比;缺省 true(不确定态忽略) label?: string; // 可访问名,如「上传进度」;缺省不确定态念「进行中」,定量态无名称 variant?: 'default' | 'success' | 'warning' | 'danger'; // 填充语义色;缺省 default(满格自动切 success) + format?: (v: number) => string; // 文本自定义:传入则线/环形的进度文本用其返回值替代默认「N%」;缺省取整百分比 } /*** 页签项:通用选项 + 可关闭开关 ***/ diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 8a5103d..e584b96 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -1283,6 +1283,12 @@ "n": "variant", "t": "'default' | 'success' | 'warning' | 'danger'", "d": "填充语义色;缺省 default(满格自动切 success)" + }, + { + "n": "format", + "t": "(v: number) => string", + "k": 1, + "d": "文本自定义:传入则线/环形的进度文本用其返回值替代默认「N%」;缺省取整百分比" } ], "example": "const pct = signal(0); progress({ value: pct }); setInterval(() => pct((pct() + 5) % 105), 400)",