iter(g284): 新增 progressRing 环形进度组件

apps/demo/main.ts

@@ -69,6 +69,7 @@ import {
   popconfirm,
   popover,
   progress,
+  progressRing,
   radioGroup,
   relativeTime,
   rate,
@@ -1861,6 +1862,28 @@ const content = h(
   ),
 );
 
+// 环形进度：value 传信号，按钮改信号 → 弧长与中心文字一起重绘
+content.append(
+  section(
+    'sec-ring',
+    '环形进度',
+    'progressRing：SVG 双圆靠 stroke-dasharray 画弧（0 从 12 点方向顺时针长），中心文字等宽；value 可传信号，弧长随之重绘。',
+    (() => {
+      const pct = signal(64);
+      const bump = (delta: number): void => pct(Math.min(100, Math.max(0, pct() + delta))); // 夹在 0-100，越界按键不产生负进度
+      return h(
+        'div',
+        { class: 'row' },
+        progressRing({ value: pct }),
+        progressRing({ value: pct, size: 56, thickness: 6, showText: false }), // 无文案小环：适合塞进表格单元格
+        button({ label: '+10%', variant: 'ghost', onClick: () => bump(10) }),
+        button({ label: '-10%', variant: 'ghost', onClick: () => bump(-10) }),
+        button({ label: '清零', variant: 'ghost', onClick: () => pct(0) }),
+      );
+    })(),
+  ),
+);
+
 // 悬浮按钮：fixed 定位，挂 body 不参与页面布局
 document.body.append(
   floatButton({ icon: '+', label: '新建工单', tooltip: '新建工单', position: 'left-bottom', onClick: () => toast.success('已新建工单') }),