用 Composition API 抽离剪贴板逻辑，封装 useClipboard 和 usePaste 两个组合式函数，统一处理复制粘贴、响应式状态、错误兜底及浏览器兼容性。
用 Composition API 抽离剪贴板逻辑，核心是把复制、粘贴行为封装成可复用的组合式函数（composable），配合响应式状态和错误处理，避免在每个组件里重复写 navigator.clipboard 调用。
封装 useClipboard 复制逻辑
定义一个 useClipboard() 函数，返回复制方法和状态（如 loading、success、error）：
- 内部调用
navigator.clipboard.writeText()，自动处理 Promise 链和 reject 情况 - 用
ref管理isCopying、copyResult（"success" / "failed"）等状态，便于模板绑定提示 - 支持传入动态文本或 getter 函数，比如
useClipboard(() => inputRef.value) - 可选添加防抖或节流，防止用户快速连点触发多次请求
统一处理粘贴逻辑
粘贴通常需要监听事件 + 权限校验，usePaste() 可这样设计：
- 接收目标元素 ref（如 textarea 或 contenteditable 区域），自动绑定
@paste事件 - 在事件回调中调用
navigator.clipboard.readText()，兼容失败时降级尝试event.clipboardData?.getData('text/plain') - 返回粘贴内容、是否成功、以及手动触发粘贴的函数（用于按钮点击场景）
- 对富文本粘贴，可额外判断
readHTML()是否可用，或解析 event.clipboardData.items 中的 HTML blob
错误与兼容性兜底
现代 Clipboard API 要求安全上下文（HTTPS 或 localhost），且 Safari/iOS 限制严格：
立即学习“前端免费学习笔记（深入）”；
- 检测
navigator.clipboard是否存在，不存在则回退到document.execCommand（仅作降级，不推荐主用） - 捕获常见错误类型：
"NotAllowedError"（权限拒绝）、"NotFoundError"（API 不可用）、"SecurityError"（非安全上下文） - 对移动端，监听长按事件模拟复制入口；对 Safari，提示“请手动复制”并聚焦 textarea 后
select()
在组件中使用示例
逻辑完全解耦，组件只需调用、绑定、响应：
const { copy, isCopying, copyResult } = useClipboard(() => props.content)<button :disabled="isCopying">{{ isCopying ? '复制中...' : '复制' }}</button>const { paste, onPaste } = usePaste(); onPaste((text) => emit('pasted', text));- 模板中直接用
@paste="onPaste"或通过按钮触发paste()
