iter: d20 progress 支持不确定态

packages/skin/ui/src/progress.ts

@@ -1,18 +1,37 @@
 import { effect, h } from '@ui-arch/frame';
 import type { ProgressProps } from './types.js';
 
-/*** 进度条：轨道 + 渐变流动填充，value 信号驱动 0-100；满格切换 success 色并停止条纹 ***/
-export function progress(props: ProgressProps): HTMLElement {
+/*** 进度条：value 信号驱动 0-100 定量态，缺省 value 则退化为不确定态（无限往复）；满格切 success 色并停条纹 ***/
+export function progress(props: ProgressProps = {}): HTMLElement {
+  // —— 状态集中声明 ——
+  const value = props.value;                 // 可选：不传即不确定态
   const fill = h('div', { class: 'ua-progress-fill' });
   const track = h('div', { class: 'ua-progress-track' }, fill);
   const text = h('span', { class: 'ua-progress-text' });
+  const withText = props.showText !== false && !!value; // 不确定态没有百分比可显示
+
+  if (!value) {
+    fill.classList.add('ua-indeterminate');  // 宽度与往复动画交给 CSS
+    return h('div', { class: 'ua-progress', role: 'progressbar', 'aria-label': '进行中' }, track);
+  }
   effect(() => {
-    const v = clamp(props.value()); // 依赖收集：信号变化自动写回
+    const v = clamp(value()); // 依赖收集：信号变化自动写回
     fill.style.width = `${v}%`;
     fill.classList.toggle('ua-done', v >= 100); // 满格切语义色
     text.textContent = `${Math.round(v)}%`;
   });
-  return h('div', { class: 'ua-progress' }, track, props.showText === false ? null : text);
+  return h(
+    'div',
+    {
+      class: 'ua-progress',
+      role: 'progressbar',
+      'aria-valuemin': '0',
+      'aria-valuemax': '100',
+      'aria-valuenow': () => String(Math.round(clamp(value()))),
+    },
+    track,
+    withText ? text : null,
+  );
 }
 
 /*** 进度钳制到 0-100 ***/

packages/skin/ui/src/types.ts

@@ -213,8 +213,8 @@ export interface SpinnerProps {
 
 /*** 进度条入参 ***/
 export interface ProgressProps {
-  value: Signal<number>; // 当前进度 0-100 的信号
-  showText?: boolean;    // 是否右侧显示百分比；缺省 true
+  value?: Signal<number>; // 当前进度 0-100 的信号；不传即不确定态（未知时长的加载）
+  showText?: boolean;     // 是否右侧显示百分比；缺省 true（不确定态忽略）
 }
 
 /*** 标签页入参 ***/

packages/skin/ui/ua.manifest.json

@@ -34,7 +34,7 @@
       "skeleton(props)：骨架屏占位，variant = text | rect | circle，text 支持 rows 多行，扫光微动画",
       "pagination(props)：独立分页器，page 信号双向绑定，页码过多折叠省略号，首末页禁用翻页，键盘可达",
       "spinner(props)：加载指示器，size 控制直径",
-      "progress(props)：进度条，轨道 + 渐变流动填充，value 信号驱动 0-100，满格切 success 色",
+      "progress(props)：进度条，value 信号驱动 0-100（满格切 success 色）；不传 value 退化为不确定态无限往复",
       "tabs(props)：标签页，active 信号双向绑定，滑动指示条 + 方向键环形导航，支持禁用页签",
       "modal(props, ...children)：弹窗，open 信号驱动显隐，Esc / 遮罩 / × 关闭，size 三档宽度，footer 提供底部操作区",
       "drawer(props, ...children)：抽屉，open 信号驱动侧滑面板，placement 左右可配、width 可调、footer 操作区，遮罩 / × / Esc 关闭",
@@ -821,8 +821,7 @@
           {
             "n": "value",
             "t": "Signal<number>",
-            "r": 1,
-            "d": "进度 0-100 信号，变化自动平滑过渡"
+            "d": "当前进度 0-100 信号，变化自动平滑过渡（越界钳制）"
           },
           {
             "n": "showText",
@@ -833,10 +832,12 @@
         ],
         "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"
+          "不需要百分比文字时传 showText: false",
+          "定量进度用 value 信号：满格自动切 success 色并停止条纹，role=progressbar + aria-valuenow 同步"
         ]
       },
       {

packages/skin/ui/ui.css

@@ -893,6 +893,23 @@
   animation: none;
   opacity: 0;
 }
+/* 不确定态：固定比例填充块匀速往复，宽度与位移都由动画控制 */
+.ua-progress-fill.ua-indeterminate {
+  width: 35%;
+  transition: none;
+  animation: ua-indeterminate 1.2s ease-in-out infinite;
+}
+.ua-progress-fill.ua-indeterminate::after {
+  animation: none;
+}
+@keyframes ua-indeterminate {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(285%);
+  }
+}
 @keyframes ua-stripe {
   to {
     background-position: 17px 0;