iter: e02 新增 stepper 步骤条组件（三态流转 + active 信号双向绑定 + clickable 回跳）

apps/demo/main.ts

@@ -1,4 +1,4 @@
-import { h, mount, renderList, signal } from '@ui-arch/frame';
+import { computed, h, mount, renderList, signal } from '@ui-arch/frame';
 import {
   accordion,
   alert,
@@ -24,6 +24,7 @@ import {
   skeleton,
   slider,
   spinner,
+  stepper,
   switchButton,
   tabs,
   tag,
@@ -115,6 +116,9 @@ const volume = signal(40);
 // —— 数字输入：购买数量演示，与禁用态实例共用同一信号 ——
 const qty = signal(1);
 
+// —— 步骤条：下单流程演示，按钮推进、点已完成步骤回跳 ——
+const stepIdx = signal(0);
+
 // —— 受控选中：dataTable 内部勾选实时写回，外部可清空 ——
 const picked = signal<RowKey[]>([]);
 
@@ -342,6 +346,23 @@ const content = h(
       h('div', { class: 'row' }, badge({ label: 'modal', variant: 'success' }), badge({ label: 'footer', variant: 'default' })),
     ),
   ),
+  section(
+    'sec-stepper',
+    '步骤条',
+    'stepper：done/current/upcoming 三态随 active 信号流转，clickable 时点已完成步骤回跳。',
+    stepper({
+      steps: [{ label: '确认订单', description: '收货信息与商品清单' }, { label: '支付', description: '选择支付方式' }, { label: '完成', description: '等待发货' }],
+      active: stepIdx,
+      clickable: true,
+      onChange: (i) => toast.info(`回到第 ${i + 1} 步`),
+    }),
+    h(
+      'div',
+      { class: 'row' },
+      button({ label: '上一步', variant: 'ghost', disabled: computed(() => stepIdx() === 0), onClick: () => stepIdx(Math.max(0, stepIdx() - 1)) }),
+      button({ label: '下一步', disabled: computed(() => stepIdx() === 2), onClick: () => stepIdx(Math.min(2, stepIdx() + 1)) }),
+    ),
+  ),
   section(
     'sec-menu',
     '下拉菜单',