组件
Copy Field 复制文本
保留真实文本选择，并明确反馈剪贴板操作结果。
用于地址、标识、命令和少量代码。CopyField 呈现单行值，CodeBlock 保留多行结构；已有布局只需要复制动作时使用 CopyButton。
安装
pnpm dlx shadcn@4.22.1 add http://127.0.0.1:3040/r/v0.3.0/copy-field.json首次使用请先完成 Registry 与主题接入。
变体与状态
普通字段可直接选择内容；masked 隐藏显示值，并通过显示切换查看。复制仍写入原始 value。复制成功显示短暂完成状态；权限失败应提供可理解反馈，不能假报成功。
Props
| 组件 / 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
CopyField.label | string | 必填 | 对值的说明 |
CopyField.value | string | 必填 | 展示与复制的原值 |
CopyField.masked | boolean | false | 默认隐藏展示值 |
CopyField.className | string | — | 容器样式 |
CopyButton.onCopy | () => void | — | 复制成功后的应用侧反馈 |
CopyButton.onCopyError | (error: unknown) => void | — | 剪贴板不可用或权限失败 |
CodeBlock.label / value | string | 必填 | 多行代码标题与内容 |
CopyButton 同样要求 label 与 value，支持 className；CodeBlock 也支持 className。
键盘与约束
Tab 到复制按钮后用 Enter 或 Space 激活。浏览器 Clipboard API 受安全上下文和权限限制；需要在实际部署 origin 验证。值使用真实 code / pre 元素，保留鼠标选择与原生复制。
避免这样使用
masked 是显示保护，不是加密或权限边界。不要把密钥误当公开示例；不要在只有复制成功时才显示的消息中包含敏感原值。
来源与版本
0.1.0，来自 Subtic apps/web/components/ui/copy-field.tsx。去除业务翻译与通知耦合，明确复制回调和失败路径。
查看由当前源码生成的类型参考
只展示 Kitseed 自身定义的属性，原生 HTML 与 Base UI 透传属性请参阅对应上游说明。
CopyButton
| 属性 | 类型 | 默认值 |
|---|---|---|
value | string | — |
label | string | — |
className? | string | — |
onCopy? | () => void | — |
onCopyError? | (error: unknown) => void | — |
render? | (state: { copied: boolean; failed: boolean; copy: () => Promise<void> }) => ReactNode | — |
CopyValue
| 属性 | 类型 | 默认值 |
|---|---|---|
label | string | — |
value | ReactNode | — |
action? | ReactNode | — |
className? | string | — |
labelClassName? | string | "mb-1.5 text-2xs font-medium text-fg-muted" |
rowClassName? | string | "flex items-start gap-2" |
contentClassName? | string | "min-w-0 flex-1 overflow-x-auto whitespace-nowrap rounded-control border border-line bg-hover px-2.5 py-[7px] font-mono text-xs leading-4 text-fg" |
id? | string | — |
CopyField
| 属性 | 类型 | 默认值 |
|---|---|---|
label | string | — |
value | string | — |
masked? | boolean | false |
className? | string | — |
CodeBlock
| 属性 | 类型 | 默认值 |
|---|---|---|
label | string | — |
value | string | — |
className? | string | — |
labelClassName? | string | "mb-1.5 text-2xs font-medium text-fg-muted" |
contentClassName? | string | "overflow-x-auto rounded-control border border-line bg-hover p-3 pr-14 font-mono text-xs leading-6 text-fg outline-none focus-visible:ring-2 focus-visible:ring-brand" |
focusable? | boolean | true |
renderValue? | (value: string) => ReactNode | — |
action? | ReactNode | — |