iter: d12 新增可关闭标签 tag 组件

apps/demo/main.ts

@@ -1,4 +1,4 @@
-import { h, mount, signal } from '@ui-arch/frame';
+import { h, mount, renderList, signal } from '@ui-arch/frame';
 import {
   accordion,
   alert,
@@ -23,6 +23,7 @@ import {
   spinner,
   switchButton,
   tabs,
+  tag,
   textarea,
   textField,
   toast,
@@ -98,6 +99,9 @@ const formResult = signal('');
 // —— 分页联动状态：dataTable 与独立 pagination 共用同一页码信号 ——
 const tablePage = signal(1);
 
+// —— 标签列表：关闭即写回信号，容器按信号重渲染 ——
+const tags = signal(['设计', '前端', '组件库']);
+
 // —— 滑块：音量与禁用态演示 ——
 const volume = signal(40);
 
@@ -160,6 +164,24 @@ const content = h(
       radioGroup({ options: [{ value: 'x', label: '静态禁用' }], value: size, disabled: true }),
     ),
   ),
+  section(
+    'sec-tag',
+    '标签',
+    'tag：可关闭标签（badge 的交互版），关闭回调里改信号即从列表移除。',
+    h(
+      'div',
+      { class: 'row' },
+      tag({ label: '纯展示', variant: 'default' }),
+      tag({ label: '通过', variant: 'success' }),
+      tag({ label: '待处理', variant: 'warning' }),
+      tag({ label: '已失效', variant: 'danger' }),
+    ),
+    (() => {
+      const box = h('div', { class: 'row' });
+      renderList(box, () => tags().map((t) => tag({ label: t, variant: 'info', closable: true, onClose: () => tags(tags().filter((x) => x !== t)) })));
+      return box;
+    })(),
+  ),
   section(
     'sec-slider',
     '滑块',