SecretField
secret-field密钥掩码字段 · sk-abc…wxyz 掩码(full/prefix-suffix) + 眼睛 toggle 显形 + 一键复制原值(同 Snippet idiom·1.5s 反馈) + 尾部动作槽(重置/吊销) + 受控 revealed(API key 管理刚需·复用 _icons Eye/Copy)
用法
基础用法
默认掩码 sk-xxx…xxxx，点眼睛显形、点复制取原值。
sk-han…ab78tsx
<SecretField value="sk-hanhub-7f3a9c2e1b8d4056af12cd34ef56ab78" />全掩码
maskStrategy="full" 完全隐藏，不泄露首尾结构。
••••••••••••••••tsx
<SecretField value={apiKey} maskStrategy="full" />只读不可复制
去掉交互描边、隐藏复制按钮，纯展示场景。
sk-han…ab78tsx
<SecretField value={apiKey} readOnly copyable={false} />尾部动作槽
actions 槽位挂吊销/重置按钮，与显示/复制并排。
sk-han…ab78tsx
<SecretField
value={apiKey}
actions={
<button type="button" className="px-1.5 text-xs text-danger">
吊销
</button>
}
/>尺寸
size="sm" 适配密集表格行内。
sk-han…ab78tsx
<SecretField value={apiKey} size="sm" />何时用
展示已存在的敏感值（API key、token、密钥）——默认掩码、点眼睛显形、一键复制原值，并可挂重置/吊销动作。用于「展示+复制已有密钥」而非录入；录入密码用普通 Input（type=password）；多选输入挑选用 Combobox。
导入
ts
import { SecretField, maskSecret } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value * | string | — | 密钥原值 |
| revealed | boolean | — | 受控显形态；不传则组件自管 |
| maskStrategy | "full"｜"prefix-suffix" | "prefix-suffix" | full 全掩 / prefix-suffix 保留首尾 |
| copyable | boolean | true | 是否显示复制按钮 |
| readOnly | boolean | false | 只读外观（去掉交互态描边） |
| size | "sm"｜"md" | "md" | — |
| className | string | — | — |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onRevealedChange | (revealed: boolean) => void | 显形态变化回调（受控时用） |
| onCopy | (value: string) => void | 复制回调（拿到原值） |
Slots
| 插槽 | 类型 | 说明 |
|---|---|---|
| actions | ReactNode | 尾部动作槽（重置 / 吊销等） |
另导出 maskSecret(value, strategy) 工具函数，单独按策略生成掩码串。
禁忌 / 坑
value是必填的原值（明文）——掩码只是展示层，组件内部持有真实值用于复制，别把已掩码的串喂进来。- 不传
revealed时组件自管显形态；要外部控制（如统一收起）才传revealed+onRevealedChange，二者配套。 copyable默认 true，敏感场景按需copyable={false}关掉复制。
相关
Playground
sk-han…ab78<SecretField value={apiKey} maskStrategy="prefix-suffix" />