更换使用wxt框架搭建testing tool

2026-01-27 23:09:57 +08:00
parent 9c84b7adc0
commit b33194bd2d
54 changed files with 4146 additions and 16436 deletions
@@ -0,0 +1,110 @@
+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;