iter(g105): 标签页支持可关闭页签

apps/demo/main.ts

@@ -153,6 +153,13 @@ setInterval(() => percent((percent() + 5) % 105), 400); // 自动推进演示进
 
 // —— 标签页 / 弹窗状态 ——
 const activeTab = signal('a');
+// —— 可关闭页签：数据源为信号数组，onClose 里摘掉元素即复现 ——
+const closableTabs = signal([
+  { value: 'n1', label: '订单 #1024', closable: true },
+  { value: 'n2', label: '订单 #1025', closable: true },
+  { value: 'n3', label: '订单 #1026', closable: true },
+]);
+const closableActive = signal('n1');
 const modalOpen = signal(false);
 const modalPick = signal('a'); // 弹窗内下拉的取值，用于演示 Esc 逐层关闭
 
@@ -447,9 +454,22 @@ const content = h(
   section(
     'sec-tabs-modal',
     '标签页与弹窗',
-    'tabs 滑动指示条 + 方向键切换（←→），禁用页签置灰；modal 支持 Esc / 遮罩 / × 关闭（closeOnOverlay: false 时点遮罩不关、防填一半误触），弹窗内的下拉展开时 Esc 先收下拉、再按才关弹窗（逐层关闭）。',
+    'tabs 滑动指示条 + 方向键切换（←→），禁用页签置灰，closable 页签带 ×（聚焦后 Delete 也能关，关闭只回调、由数据源摘除后重绘）；modal 支持 Esc / 遮罩 / × 关闭（closeOnOverlay: false 时点遮罩不关、防填一半误触），弹窗内的下拉展开时 Esc 先收下拉、再按才关弹窗（逐层关闭）。',
     tabs({ tabs: [{ value: 'a', label: '概览' }, { value: 'b', label: '明细' }, { value: 'c', label: '设置' }, { value: 'd', label: '已停用', disabled: true }], active: activeTab }),
     h('span', { class: 'out' }, () => `当前页签：${activeTab()}`),
+    renderList(h('div', { class: 'row' }), () => {
+      const items = closableTabs();
+      if (!items.length) return [h('span', { class: 'desc' }, '页签全关掉了 —— onClose 里从数据源摘掉，重绘自然只剩空态')];
+      return [tabs({
+        tabs: items,
+        active: closableActive,
+        onClose: (v) => {
+          const left = closableTabs().filter((t) => t.value !== v); // 数据源唯一来源：摘掉即重绘
+          closableTabs(left);
+          if (closableActive() === v) closableActive(left[0]?.value ?? ''); // 关掉的正好是当前页：顺位激活下一个
+        },
+      })];
+    }),
     button({ label: '打开弹窗', onClick: () => modalOpen(true) }),
     button({ label: '打开防误关弹窗', variant: 'ghost', onClick: () => stickyOpen(true) }),
     modal(