雨霖铃
110 lines
3.1 KiB
TypeScript
110 lines
3.1 KiB
TypeScript
import {useState, useCallback} from "react";
|
|
|
|
const CopyButton = ({
|
|
text = '要复制的文本',
|
|
buttonText = '复制文本',
|
|
className = 'action-btn',
|
|
}) => {
|
|
const [btnText, setBtnText] = useState(buttonText);
|
|
const [copyStatus, setCopyStatus] = useState('');
|
|
|
|
// 重置按钮状态的函数
|
|
const resetButton = useCallback(() => {
|
|
setBtnText(buttonText);
|
|
setCopyStatus('');
|
|
}, [buttonText]);
|
|
|
|
// 复制成功的处理
|
|
const handleCopySuccess = useCallback(() => {
|
|
setCopyStatus('success');
|
|
setBtnText('复制成功！');
|
|
|
|
// 2秒后恢复
|
|
setTimeout(() => {
|
|
resetButton();
|
|
}, 2000);
|
|
}, [text, resetButton]);
|
|
|
|
// 复制失败的处理
|
|
const handleCopyError = useCallback(() => {
|
|
setCopyStatus('error');
|
|
|
|
// 2秒后恢复
|
|
setTimeout(() => {
|
|
resetButton();
|
|
}, 2000);
|
|
}, [resetButton]);
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
console.log('开始复制:', text);
|
|
|
|
// 首先尝试直接使用navigator.clipboard（在popup页面中可能可用）
|
|
try {
|
|
console.log('尝试直接使用navigator.clipboard复制');
|
|
await navigator.clipboard.writeText(text.toString());
|
|
console.log('直接复制成功');
|
|
handleCopySuccess();
|
|
return;
|
|
} catch (directError) {
|
|
console.log('直接复制失败，尝试使用Chrome扩展API:', directError);
|
|
}
|
|
|
|
// 如果直接复制失败，尝试使用Chrome扩展API
|
|
if (chrome && chrome.runtime && chrome.runtime.sendMessage) {
|
|
console.log('使用Chrome扩展API复制');
|
|
|
|
// 使用Chrome扩展API复制
|
|
chrome.runtime.sendMessage({
|
|
action: 'copy',
|
|
text: text
|
|
}, (response) => {
|
|
console.log('收到background响应:', response, 'lastError:', chrome.runtime.lastError);
|
|
|
|
// 检查是否有运行时错误
|
|
if (chrome.runtime.lastError) {
|
|
console.error('Chrome运行时错误:', chrome.runtime.lastError.message);
|
|
handleCopyError();
|
|
return;
|
|
}
|
|
|
|
// 检查响应
|
|
if (response && response.success) {
|
|
console.log('通过background复制成功');
|
|
handleCopySuccess();
|
|
} else {
|
|
console.error('通过background复制失败:', response?.error);
|
|
handleCopyError();
|
|
}
|
|
});
|
|
} else {
|
|
console.error('没有可用的复制方法');
|
|
handleCopyError();
|
|
}
|
|
} catch (err) {
|
|
console.error('复制过程中发生错误:', err);
|
|
handleCopyError();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
onClick={handleCopy}
|
|
className={className}
|
|
style={{
|
|
backgroundColor: copyStatus === 'success' ? '#4CAF50' :
|
|
copyStatus === 'error' ? '#f44336' : '',
|
|
color: copyStatus ? 'white' : '',
|
|
transition: 'all 0.3s ease',
|
|
padding: '8px 16px',
|
|
border: 'none',
|
|
borderRadius: '8px',
|
|
cursor: 'pointer'
|
|
}}
|
|
>
|
|
{btnText}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default CopyButton; |