refactor: 统一扩展消息机制并优化组件结构

1、统一消息系统：将 background、content 和 popup 的通信方式从原生的 chrome.runtime 迁移至 @webext-core/messaging，修复了消息回调返回 undefined 的问题。 2、优化组件结构：将通用组件从 entrypoints/popup/components 迁移至根目录 components，并使用 MUI 重构了 Navbar。 3、同步更新：调整了录制工具 (useRecorder) 和各页面组件（RecordeReplayPage, TestPage等），以适配新的消息协议和组件路径。
2026-02-13 20:38:15 +08:00
parent 22985f4c18
commit 50034331bc
16 changed files with 252 additions and 271 deletions
@@ -0,0 +1,134 @@
+import { useState, useCallback, FC, ReactNode, useEffect } from 'react';
+import Button, { ButtonProps } from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
+import Alert, { AlertColor } from '@mui/material/Alert';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+
+type CopyStatus = 'idle' | 'copying' | 'success' | 'error';
+
+interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'variant'> {
+  textToCopy: string | number;
+  buttonText?: ReactNode;
+  successMessage?: string;
+  errorMessage?: string;
+  variant?: ButtonProps['variant'];
+}
+
+const CopyButton: FC<CopyButtonProps> = ({
+  textToCopy,
+  buttonText = '复制',
+  successMessage = '复制成功！',
+  errorMessage = '复制失败，请手动复制。',
+  variant = 'contained',
+  ...buttonProps
+}) => {
+  const [status, setStatus] = useState<CopyStatus>('idle');
+  const [openSnackbar, setOpenSnackbar] = useState(false);
+  const [snackbarContent, setSnackbarContent] = useState<{
+    message: string;
+    severity: AlertColor;
+  } | null>(null);
+
+  useEffect(() => {
+    if (status === 'success' || status === 'error') {
+      const timer = setTimeout(() => setStatus('idle'), 2000);
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [status]);
+
+  const performCopy = useCallback(async () => {
+    if (!textToCopy) {
+      console.warn('没有提供要复制的文本');
+      return false;
+    }
+    const safeText = String(textToCopy);
+    try {
+      await navigator.clipboard.writeText(safeText);
+      return true;
+    } catch (err) {
+      console.error('使用 Clipboard API 复制失败:', err);
+      return false;
+    }
+  }, [textToCopy]);
+
+  const handleClick = useCallback(async () => {
+    if (status !== 'idle') return;
+
+    setStatus('copying');
+    let isSuccess = false;
+    try {
+      [isSuccess] = await Promise.all([
+        performCopy(),
+        new Promise((resolve) => setTimeout(resolve, 300)),
+      ]);
+    } catch (error) {
+      console.error('复制时出错:', error);
+      isSuccess = false;
+    } finally {
+      const newStatus = isSuccess ? 'success' : 'error';
+      setStatus(newStatus);
+      setSnackbarContent({
+        message: isSuccess ? successMessage : errorMessage,
+        severity: newStatus,
+      });
+      setOpenSnackbar(true);
+    }
+  }, [performCopy, status, successMessage, errorMessage]);
+
+  const handleCloseSnackbar = (_event?: Event | React.SyntheticEvent, reason?: string) => {
+    if (reason === 'clickaway') return;
+    setOpenSnackbar(false);
+  };
+
+  const renderButtonIcon = () => {
+    if (status === 'success') {
+      return <CheckIcon sx={{ mr: 1 }} fontSize="small" />;
+    }
+    return <ContentCopyIcon sx={{ mr: 1 }} fontSize="small" />;
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        disabled={status !== 'idle'}
+        variant={variant}
+        {...buttonProps}
+        sx={{
+          ...buttonProps.sx,
+          transition: 'background-color 0.3s',
+          ...(status === 'success' && {
+            bgcolor: 'success.main',
+            '&:hover': {
+              bgcolor: 'success.dark',
+            },
+          }),
+        }}
+      >
+        {renderButtonIcon()}
+        {buttonText}
+      </Button>
+      <Snackbar
+        open={openSnackbar}
+        autoHideDuration={2000}
+        onClose={handleCloseSnackbar}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      >
+        {snackbarContent ? (
+          <Alert
+            onClose={handleCloseSnackbar}
+            severity={snackbarContent.severity}
+            variant="filled"
+            sx={{ width: '100%' }}
+          >
+            {snackbarContent.message}
+          </Alert>
+        ) : undefined}
+      </Snackbar>
+    </>
+  );
+};
+
+export default CopyButton;