@teamix-evo/ui 0.1.1

package/src/components/table/table.meta.md

@@ -0,0 +1,95 @@
+---
+id: table
+name: Table
+type: component
+category: data-display
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Table
+
+基础表格 — 原生 HTML 元素薄包装。**仅视觉与可访问性骨架**(列宽 / 边框 / hover / 选中态);**无排序 / 筛选 / 分页 / 数据流**(那是 `DataTable` 的范畴)。
+
+## When to use
+
+- 简单数据展示(< 50 行,无交互)
+- 静态信息表(键值对 / 配置项)
+- 自定义"业务表"的视觉骨架(自己写排序/筛选/选择)
+
+## When NOT to use
+
+- 大量数据 / 排序 / 筛选 / 分页 → `DataTable`(基于 TanStack Table)
+- 键值对详情 → `Descriptions`(antd 风格,v0.x)
+- 树结构 → `Tree`(v0.x)
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
+
+<!-- auto:props:begin -->
+_(组件无 `<Name>Props` interface — props 详见 [`table.tsx`](./table.tsx))_
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add table` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+_无 — 本组件不依赖任何 npm 包。_
+<!-- auto:deps:end -->
+
+> 子组件:`Table` / `TableHeader`(thead)/ `TableBody`(tbody)/ `TableFooter`(tfoot)/ `TableHead`(th)/ `TableRow`(tr)/ `TableCell`(td)/ `TableCaption`(caption)。
+
+## AI 生成纪律
+
+- **行选中态**:配 `data-state="selected"` 在 `<TableRow>`,自动套高亮样式
+- **列宽自适应**:不要硬编码 `width: 100px`,用 `<col>` 或 className 控制
+- **数字列右对齐**:数字 / 金额 / 时长用 `className="text-right tabular-nums"`
+- **不嵌套 Table**:嵌套表格语义破碎;改用展开行(`expandable`,DataTable 提供)
+- **大数据集 → DataTable**:Table 不做虚拟滚动;> 200 行用 DataTable + virtualizer
+
+## Examples
+
+```tsx
+import {
+  Table, TableHeader, TableBody, TableHead, TableRow, TableCell, TableCaption,
+} from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+
+<Table>
+  <TableCaption>近期发票</TableCaption>
+  <TableHeader>
+    <TableRow>
+      <TableHead className="w-32">编号</TableHead>
+      <TableHead>状态</TableHead>
+      <TableHead>方式</TableHead>
+      <TableHead className="text-right">金额</TableHead>
+    </TableRow>
+  </TableHeader>
+  <TableBody>
+    <TableRow>
+      <TableCell className="font-medium">INV001</TableCell>
+      <TableCell><Badge variant="success">已支付</Badge></TableCell>
+      <TableCell>信用卡</TableCell>
+      <TableCell className="text-right">¥250.00</TableCell>
+    </TableRow>
+    <TableRow data-state="selected">
+      <TableCell className="font-medium">INV002</TableCell>
+      <TableCell><Badge>待支付</Badge></TableCell>
+      <TableCell>转账</TableCell>
+      <TableCell className="text-right">¥150.00</TableCell>
+    </TableRow>
+  </TableBody>
+</Table>
+```

package/src/components/table/table.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Table,
+  TableHeader,
+  TableBody,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+  TableFooter,
+} from './table';
+import { Badge } from '@/components/badge/badge';
+
+const meta: Meta<typeof Table> = {
+  title: '数据展示 · Data Display/Table',
+  component: Table,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Table>;
+
+const invoices = [
+  { id: 'INV001', status: 'paid', method: '信用卡', amount: 250 },
+  { id: 'INV002', status: 'pending', method: '转账', amount: 150 },
+  { id: 'INV003', status: 'paid', method: '支付宝', amount: 350 },
+  { id: 'INV004', status: 'failed', method: '信用卡', amount: 450 },
+];
+
+export const Default: Story = {
+  render: () => (
+    <Table>
+      <TableCaption>近期发票</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead className="w-32">编号</TableHead>
+          <TableHead>状态</TableHead>
+          <TableHead>方式</TableHead>
+          <TableHead className="text-right">金额</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {invoices.map((inv) => (
+          <TableRow key={inv.id}>
+            <TableCell className="font-medium">{inv.id}</TableCell>
+            <TableCell>
+              {inv.status === 'paid' ? (
+                <Badge variant="success">已支付</Badge>
+              ) : inv.status === 'failed' ? (
+                <Badge variant="destructive">失败</Badge>
+              ) : (
+                <Badge>待支付</Badge>
+              )}
+            </TableCell>
+            <TableCell>{inv.method}</TableCell>
+            <TableCell className="text-right tabular-nums">
+              ¥{inv.amount.toFixed(2)}
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+      <TableFooter>
+        <TableRow>
+          <TableCell colSpan={3}>合计</TableCell>
+          <TableCell className="text-right tabular-nums">
+            ¥
+            {invoices
+              .reduce((sum, x) => sum + x.amount, 0)
+              .toFixed(2)}
+          </TableCell>
+        </TableRow>
+      </TableFooter>
+    </Table>
+  ),
+};

package/src/components/table/table.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+
+import { cn } from '@/utils/cn';
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn('w-full caption-bottom text-sm', className)}
+      {...props}
+    />
+  </div>
+));
+Table.displayName = 'Table';
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn('[&_tr:last-child]:border-0', className)}
+    {...props}
+  />
+));
+TableBody.displayName = 'TableBody';
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = 'TableFooter';
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
+      className,
+    )}
+    {...props}
+  />
+));
+TableRow.displayName = 'TableRow';
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      'h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = 'TableHead';
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn(
+      'p-3 align-middle [&:has([role=checkbox])]:pr-0',
+      className,
+    )}
+    {...props}
+  />
+));
+TableCell.displayName = 'TableCell';
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn('mt-4 text-sm text-muted-foreground', className)}
+    {...props}
+  />
+));
+TableCaption.displayName = 'TableCaption';
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};
+
+export type TableProps = React.HTMLAttributes<HTMLTableElement>;

package/src/components/tabs/tabs.meta.md

@@ -0,0 +1,98 @@
+---
+id: tabs
+name: Tabs
+type: component
+category: navigation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Tabs
+
+标签页 — Radix Tabs + antd `type` (line/card) + `tabBarExtraContent`(`extra`) 并集。
+两种风格切换:`type="card"`(shadcn 默认胶囊),`type="line"`(antd 默认下划线)。
+
+## When to use
+
+- 平级内容切换(详情页的 Overview / Logs / Settings 多视图)
+- 表单分组(基本信息 / 高级配置)
+- 工具栏顶部多视图
+
+## When NOT to use
+
+- 多步流程 → `Steps`(v0.x)
+- 内容互斥但需对照 → `RadioGroup` + 切换内容区
+- 折叠展开 → `Accordion` / `Collapsible`
+
+## Props
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `TabsList` 的 props;`Tabs`(Root)透传 Radix `value / defaultValue / onValueChange / orientation / activationMode`。
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `type` | `'line' \| 'card'` | `"card"` | – | 视觉风格(antd `type` 并集)。`card` 是 shadcn 默认胶囊;`line` 是 antd 默认下划线。 |
+| `extra` | `React.ReactNode` | – | – | 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `type="line"` 显式支持(布局灵活)。 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。 |
+<!-- auto:props:end -->
+
+## 依赖
+
+> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add tabs` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add @radix-ui/react-tabs@^1.1.0 class-variance-authority@^0.7.0
+```
+<!-- auto:deps:end -->
+
+> 子组件:`Tabs` / `TabsList` / `TabsTrigger` / `TabsContent`。
+
+## AI 生成纪律
+
+- **`type="card"` 默认**:用于嵌入卡片内 / 紧凑场景(shadcn 胶囊视觉)
+- **`type="line"` 用于页面级**:大区块切换、主导航(antd 风格)
+- **`extra` 仅 `type="line"` 视觉对齐**:右侧附加按钮(刷新 / 新建)
+- **value 必稳定**:切换 tab 间不改变 value 字符串
+- **orientation="vertical"** 罕用,改用 Sidebar 模式
+
+## Examples
+
+```tsx
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
+
+// shadcn 胶囊风格
+<Tabs defaultValue="overview" className="w-96">
+  <TabsList>
+    <TabsTrigger value="overview">概览</TabsTrigger>
+    <TabsTrigger value="logs">日志</TabsTrigger>
+    <TabsTrigger value="settings">设置</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">...</TabsContent>
+  <TabsContent value="logs">...</TabsContent>
+  <TabsContent value="settings">...</TabsContent>
+</Tabs>
+
+// antd 下划线风格 + extra
+<Tabs defaultValue="all">
+  <TabsList type="line" extra={<Button size="sm" icon={<RefreshCw />}>刷新</Button>}>
+    <TabsTrigger value="all">全部</TabsTrigger>
+    <TabsTrigger value="active">活跃</TabsTrigger>
+    <TabsTrigger value="archived">已归档</TabsTrigger>
+  </TabsList>
+  <TabsContent value="all">...</TabsContent>
+</Tabs>
+```

package/src/components/tabs/tabs.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { RefreshCw } from 'lucide-react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs';
+import { Button } from '@/components/button/button';
+
+const meta: Meta<typeof TabsList> = {
+  title: '导航 · Navigation/Tabs',
+  component: TabsList,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'inline-radio', options: ['card', 'line'] },
+  },
+  args: { type: 'card' },
+};
+
+export default meta;
+type Story = StoryObj<typeof TabsList>;
+
+export const Card: Story = {
+  args: { type: 'card' },
+  render: (args) => (
+    <Tabs defaultValue="overview" className="w-96">
+      <TabsList {...args}>
+        <TabsTrigger value="overview">概览</TabsTrigger>
+        <TabsTrigger value="logs">日志</TabsTrigger>
+        <TabsTrigger value="settings">设置</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">概览内容</TabsContent>
+      <TabsContent value="logs">日志内容</TabsContent>
+      <TabsContent value="settings">设置内容</TabsContent>
+    </Tabs>
+  ),
+};
+
+export const Line: Story = {
+  args: { type: 'line' },
+  render: (args) => (
+    <Tabs defaultValue="all" className="w-96">
+      <TabsList {...args}>
+        <TabsTrigger value="all">全部</TabsTrigger>
+        <TabsTrigger value="active">活跃</TabsTrigger>
+        <TabsTrigger value="archived">已归档</TabsTrigger>
+      </TabsList>
+      <TabsContent value="all">全部内容</TabsContent>
+      <TabsContent value="active">活跃内容</TabsContent>
+      <TabsContent value="archived">已归档</TabsContent>
+    </Tabs>
+  ),
+};
+
+export const WithExtra: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Tabs defaultValue="all" className="w-[480px]">
+      <TabsList
+        type="line"
+        extra={
+          <Button size="sm" variant="outline" icon={<RefreshCw />}>
+            刷新
+          </Button>
+        }
+      >
+        <TabsTrigger value="all">全部</TabsTrigger>
+        <TabsTrigger value="active">活跃</TabsTrigger>
+        <TabsTrigger value="archived">已归档</TabsTrigger>
+      </TabsList>
+      <TabsContent value="all">全部内容...</TabsContent>
+    </Tabs>
+  ),
+};

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/utils/cn';
+
+const Tabs = TabsPrimitive.Root;
+
+const tabsListVariants = cva('inline-flex items-center justify-center', {
+  variants: {
+    type: {
+      line: 'border-b border-border w-full justify-start gap-4',
+      card: 'h-9 rounded-md bg-muted p-1 text-muted-foreground',
+    },
+  },
+  defaultVariants: { type: 'card' },
+});
+
+const tabsTriggerVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      type: {
+        line: 'relative px-1 py-2 -mb-px border-b-2 border-transparent text-muted-foreground hover:text-foreground data-[state=active]:border-primary data-[state=active]:text-foreground',
+        card: 'rounded-sm px-3 py-1 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm',
+      },
+    },
+    defaultVariants: { type: 'card' },
+  },
+);
+
+export interface TabsListProps
+  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>,
+    VariantProps<typeof tabsListVariants> {
+  /**
+   * 视觉风格(antd `type` 并集)。`card` 是 shadcn 默认胶囊;`line` 是 antd 默认下划线。
+   * @default "card"
+   */
+  type?: 'line' | 'card';
+  /**
+   * 右侧附加内容(antd `tabBarExtraContent` 并集);仅 `type="line"` 显式支持(布局灵活)。
+   * 用法:把节点放进来即可,组件用 `flex justify-between` 自动撑开。
+   */
+  extra?: React.ReactNode;
+}
+
+const TabsListContext = React.createContext<{ type: 'line' | 'card' }>({
+  type: 'card',
+});
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  TabsListProps
+>(({ className, type = 'card', extra, children, ...props }, ref) => {
+  const list = (
+    <TabsPrimitive.List
+      ref={ref}
+      className={cn(tabsListVariants({ type }), className)}
+      {...props}
+    >
+      <TabsListContext.Provider value={{ type }}>
+        {children}
+      </TabsListContext.Provider>
+    </TabsPrimitive.List>
+  );
+  if (extra) {
+    return (
+      <div
+        className={cn(
+          'flex items-center justify-between',
+          type === 'line' && 'border-b border-border',
+        )}
+      >
+        {React.cloneElement(list, {
+          className: cn(
+            tabsListVariants({ type }),
+            type === 'line' && 'border-b-0',
+            className,
+          ),
+        })}
+        <div className="shrink-0">{extra}</div>
+      </div>
+    );
+  }
+  return list;
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+  const { type } = React.useContext(TabsListContext);
+  return (
+    <TabsPrimitive.Trigger
+      ref={ref}
+      className={cn(tabsTriggerVariants({ type }), className)}
+      {...props}
+    />
+  );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      'mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+      className,
+    )}
+    {...props}
+  />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/components/tag/tag.meta.md

@@ -0,0 +1,94 @@
+---
+id: tag
+name: Tag
+type: component
+category: foundation
+since: 0.1.0
+package: "@teamix-evo/ui"
+---
+
+# Tag
+
+标签 — antd 独有补足。**与 Badge 区别**:Tag 偏向**用户可关闭的关键词标签**(分类 / 标签 / 筛选条件),支持 `closable` + 6 种语义色;Badge 偏向**状态徽标**(数字 / 红点 / 状态条)。
+
+## When to use
+
+- 关键词 / 标签 / 分类(博客标签、用户兴趣)
+- 当前筛选条件展示(可关闭以移除条件)
+- 列表项的次级标签(优先级 / 类型)
+
+## When NOT to use
+
+- 状态指示 → `Badge`
+- 切换按钮 → `Toggle` / `ToggleGroup`
+- 选择类输入 → `Combobox` / `Select`
+
+<!-- auto:props:begin -->
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `color` | `'default' \| 'primary' \| 'success' \| 'warning' \| 'error' \| 'info'` | `"default"` | – | 语义颜色(antd `color` 并集) — 与 Badge 不同,Tag 偏向**用户可关闭的标签**(关键词 / 分类),Badge 偏向状态徽标。 |
+| `closable` | `boolean` | `false` | – | 显示关闭按钮(antd `closable` 并集)。 |
+| `onClose` | `() => void` | – | – | 关闭回调。 |
+<!-- auto:props:end -->
+
+<!-- auto:deps:begin -->
+### 同库依赖
+
+> `teamix-evo ui add tag` 时,以下 entry 会被自动连带安装(无需手动 add)。
+
+| Entry | 类型 | 描述 |
+| --- | --- | --- |
+| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
+
+### npm 依赖
+
+> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
+
+```bash
+pnpm add class-variance-authority@^0.7.0 lucide-react@^0.460.0
+```
+<!-- auto:deps:end -->
+
+## AI 生成纪律
+
+- **`color` 反映语义**:不要随便选 — `error` 仅用于真错误,`success` 仅用于已通过
+- **`closable` 必配 `onClose`**:让父组件知道哪个 tag 被移除,业务侧维护数组
+- **文字 ≤ 4 个汉字 / 8 字符**:过长的标签视觉破碎
+- **不要嵌套交互**:Tag 内不要放 Button / Link
+- **筛选条件场景**:配 `closable` 让用户一键移除条件
+
+## Examples
+
+```tsx
+import { Tag } from '@/components/ui/tag';
+import * as React from 'react';
+
+// 基础
+<Tag>React</Tag>
+<Tag color="primary">Vue</Tag>
+<Tag color="success">已通过</Tag>
+<Tag color="warning">待审核</Tag>
+<Tag color="error">失败</Tag>
+
+// 可关闭
+const [tags, setTags] = React.useState(['React', 'Vue', 'Angular']);
+<div className="flex gap-2">
+  {tags.map((t) => (
+    <Tag
+      key={t}
+      color="primary"
+      closable
+      onClose={() => setTags(tags.filter((x) => x !== t))}
+    >
+      {t}
+    </Tag>
+  ))}
+</div>
+
+// 筛选条件
+<div className="flex flex-wrap gap-2">
+  <Tag closable>状态: 运行中</Tag>
+  <Tag closable>类型: 服务</Tag>
+  <Tag closable>地区: 杭州</Tag>
+</div>
+```