iter(g08): 新增 segmented 分段控制器组件

apps/demo/main.ts

@@ -31,6 +31,7 @@ import {
   progress,
   radioGroup,
   rate,
+  segmented,
   select,
   showToast,
   skeleton,
@@ -152,6 +153,9 @@ const menuPick = signal('');
 // —— 禁用态演示：开关信号同时绑定 switch 的 checked 与 checkbox 的 disabled ——
 const locked = signal(true);
 
+// —— 分段控制器：两个实例共用同一信号，演示信号驱动同步与整组禁用 ——
+const range = signal('week');
+
 // —— 时间线：false 时末尾显示「进行中」虚线节点，true 表示流程已结束 ——
 const flowDone = signal(false);
 
@@ -444,6 +448,32 @@ const content = h(
       button({ label: '导出', variant: 'ghost' }),
     ),
   ),
+  section(
+    'sec-segmented',
+    '分段控制器',
+    'segmented：胶囊分段 + 滑动滑块，value 信号双向绑定；两个实例共用信号即自动同步，整组禁用走信号。',
+    h(
+      'div',
+      { class: 'row' },
+      segmented({
+        options: [
+          { value: 'day', label: '日' },
+          { value: 'week', label: '周' },
+          { value: 'month', label: '月' },
+          { value: 'year', label: '年', disabled: true },
+        ],
+        value: range,
+      }),
+      h('span', { class: 'out' }, () => `当前粒度：${range()}`),
+    ),
+    h(
+      'div',
+      { class: 'row' },
+      segmented({ options: [{ value: 'day', label: '日' }, { value: 'week', label: '周' }, { value: 'month', label: '月' }], value: range, size: 'sm' }),
+      segmented({ options: [{ value: 'day', label: '日' }, { value: 'week', label: '周' }], value: range, size: 'sm', disabled: locked }),
+      h('span', { class: 'out' }, () => (locked() ? '第二个分段已禁用（同上「锁定」开关）' : '第二个分段可用')),
+    ),
+  ),
   section(
     'sec-timeline',
     '时间线',