复制按钮

与 behaviors/copy 配套：命中 .copy-btn[data-copy] 写入剪贴板，成功后文本变「已复制」1.4s 还原；图标变体加 data-copy-icon 仅切 .done 类。与 toast 的区别——copy 是原地反馈，toast 是全局通知。

<div class="demo-row">  <button class="copy-btn" data-copy="npm i @icen.ai/ui">复制安装命令</button>  <button class="copy-btn copy-btn--ghost" data-copy="https://ui.icen.ai">复制链接</button>  <button class="copy-btn copy-btn--icon" data-copy="ABCD-1234-EFGH-5678" data-copy-icon aria-label="复制密钥">    <svg class="copy-icon-clipboard" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>    <svg class="copy-icon-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>  </button></div>

安装

bun add @icen.ai/ui

pnpm add @icen.ai/ui

npm install @icen.ai/ui

yarn add @icen.ai/ui

一行引入该组件（CSS 与 behavior 自动带上，无需关心内部 CSS 文件名）：

import { initCopy } from '@icen.ai/ui/kit/copy';initCopy();

也可以用脚手架直接打印引入行：

bunx --bun @icen.ai/ui add copy

Astro 项目注意：kit 入口里的 CSS import 在页面 <script> 里会被 Astro 的 client bundle 摇掉——请改在布局 frontmatter 里引 CSS（import '@icen.ai/ui/components/copy.css';），JS 行为仍可走 kit。Vite SPA / webpack 项目无此问题。

用法

import { initCopy } from '@icen.ai/ui/behaviors/copy';initCopy(); // 委托监听，自动处理所有 .copy-btn[data-copy]