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

packages/skin/ui/src/index.ts

@@ -12,6 +12,7 @@ export { accordion } from './accordion.js';
 export { breadcrumb } from './breadcrumb.js';
 export { card } from './card.js';
 export { badge } from './badge.js';
+export { tag } from './tag.js';
 export { alert } from './alert.js';
 export { toast, showToast } from './toast.js';
 export { tooltip } from './tooltip.js';

packages/skin/ui/src/tag.ts

@@ -0,0 +1,16 @@
+import { h } from '@ui-arch/frame';
+import type { TagProps } from './types.js';
+
+/*** 标签：语义色小胶囊，可选 × 关闭；与 badge 的分工是 tag 可交互（带关闭回调） ***/
+export function tag(props: TagProps): HTMLElement {
+  const label = h('span', { class: 'ua-tag-label' }, props.label);
+  if (!props.closable) {
+    return h('span', { class: `ua-tag ua-tag-${props.variant ?? 'default'}` }, label); // 纯展示形态
+  }
+  return h(
+    'span',
+    { class: `ua-tag is-closable ua-tag-${props.variant ?? 'default'}` },
+    label,
+    h('button', { type: 'button', class: 'ua-tag-close', 'aria-label': `移除 ${props.label}`, onClick: () => props.onClose?.() }, '×'),
+  );
+}

packages/skin/ui/src/types.ts

@@ -163,6 +163,14 @@ export interface BadgeProps {
   variant?: 'default' | 'success' | 'warning' | 'danger'; // 语义色；缺省 default
 }
 
+/*** 标签入参（可关闭，与纯展示的 badge 区分） ***/
+export interface TagProps {
+  label: string;   // 标签文案
+  variant?: 'default' | 'success' | 'warning' | 'danger' | 'info'; // 语义色；缺省 default
+  closable?: boolean; // 显示 × 关闭按钮；缺省 false
+  onClose?: () => void; // 关闭回调（调用方自行从数据源移除该项）
+}
+
 /*** 提示条入参 ***/
 export interface AlertProps {
   message: string; // 提示内容