feat(extension): 添加时间戳转换和复制功能

- 新增时间戳与日期互相转换功能
- 实现带反馈的文本复制组件
- 添加时间戳实时更新与控制按钮
- 配置ESLint规则支持React和Web Extensions
- 注册background script处理复制权限
- 更新manifest.json配置文件
- 优化CSS样式支持新功能界面
- 移除用户列表页面相关路由和导入
- 添加输入框和选择器样式
- 实现日期格式化工具函数
This commit is contained in:
雨霖铃
2025-12-18 22:54:16 +08:00
parent 519e53851d
commit e19dff6f79
7 changed files with 295 additions and 106 deletions
+79
View File
@@ -0,0 +1,79 @@
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');
// 2秒后恢复
setTimeout(() => {
resetButton();
}, 2000);
}, [text, resetButton]);
// 复制失败的处理
const handleCopyError = useCallback(() => {
setCopyStatus('error');
// 2秒后恢复
setTimeout(() => {
resetButton();
}, 2000);
}, [resetButton]);
const handleCopy = async () => {
try {
if (chrome && chrome.runtime && chrome.runtime.sendMessage) {
chrome.runtime.sendMessage({
action: 'copy',
text: text
}, (response) => {
if (response && response.success) {
handleCopySuccess();
} else {
handleCopyError();
}
});
} else {
await navigator.clipboard.writeText(text.toString());
handleCopySuccess();
}
} catch (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: '4px',
cursor: 'pointer'
}}
>
{btnText}
</button>
);
};
export default CopyButton;