refactor：

1、添加全局toast
2、将CopyButton拆分为useCopy hook

entrypoints/popup/components/CopyButton.tsx

@@ -1,134 +0,0 @@
-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;

entrypoints/popup/components/TimestampExecution.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState, useCallback } from 'react';
-import CopyButton from './CopyButton';
 import { Button, Paper, Typography, Stack, Box } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import CheckIcon from '@mui/icons-material/Check';
+import { useCopy } from './useCopy';
 
 /**
  * 时间戳显示和执行组件
@@ -14,9 +16,7 @@ import { Button, Paper, Typography, Stack, Box } from '@mui/material';
  * @returns {JSX.Element} 时间戳组件
  */
 export function TimestampExecution() {
-  const [currentTimestamp, setCurrentTimestamp] = useState(() =>
-    Math.floor(Date.now()),
-  );
+  const [currentTimestamp, setCurrentTimestamp] = useState(() => Math.floor(Date.now()));
   const [showMilliseconds, setShowMilliseconds] = useState(true);
   const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
 
@@ -45,19 +45,14 @@ export function TimestampExecution() {
     setIsRunningTimestamp((prev) => !prev);
   }, []);
 
-  const unitButtonLabel = showMilliseconds
-    ? '切换为秒显示'
-    : '切换为毫秒显示';
-  const toggleButtonLabel = isRunningTimestamp
-    ? '停止时间戳自动更新'
-    : '开始时间戳自动更新';
+  const unitButtonLabel = showMilliseconds ? '切换为秒显示' : '切换为毫秒显示';
+  const toggleButtonLabel = isRunningTimestamp ? '停止时间戳自动更新' : '开始时间戳自动更新';
   const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
 
+  const { isCopied, copy } = useCopy();
+
   return (
-    <Paper
-      elevation={3}
-      sx={{ p: 2, my: 2, borderRadius: 2, minWidth: 320, textAlign: 'center' }}
-    >
+    <Paper elevation={3} sx={{ p: 2, my: 2, borderRadius: 2, minWidth: 320, textAlign: 'center' }}>
       <Box
         sx={{
           display: 'flex',
@@ -101,12 +96,21 @@ export function TimestampExecution() {
           切换单位
         </Button>
 
-        <CopyButton
+        {/* <CopyButton
           textToCopy={String(currentTimestamp)}
           buttonText="复制"
           aria-label="复制当前时间戳到剪贴板"
           color="primary"
-        />
+        /> */}
+
+        <Button
+          variant="contained"
+          onClick={() => copy(String(currentTimestamp))}
+          startIcon={isCopied ? <CheckIcon /> : <ContentCopyIcon />}
+          color={isCopied ? 'success' : 'primary'}
+        >
+          {isCopied ? '已复制' : '复制'}
+        </Button>
 
         <Button
           variant="contained"

entrypoints/popup/components/useCopy.ts

@@ -0,0 +1,39 @@
+import { useState, useCallback } from 'react';
+import { useSnackbar } from 'notistack'; // 1. 引入 hook
+
+export const useCopy = (resetInterval = 2000) => {
+  const [isCopied, setIsCopied] = useState(false);
+  const { enqueueSnackbar } = useSnackbar(); // 2. 获取触发函数
+
+  const copy = useCallback(
+    async (text: string | number) => {
+      if (!text) {
+        enqueueSnackbar('没有可复制的内容', { variant: 'warning' });
+        return false;
+      }
+
+      try {
+        await navigator.clipboard.writeText(String(text));
+        setIsCopied(true);
+
+        // 3. 触发成功通知
+        enqueueSnackbar('复制成功！', { variant: 'success' });
+
+        // 自动重置状态
+        setTimeout(() => setIsCopied(false), resetInterval);
+        return true;
+      } catch (error) {
+        console.error('Copy failed:', error);
+
+        // 4. 触发错误通知
+        enqueueSnackbar('复制失败，请手动复制', { variant: 'error' });
+
+        setIsCopied(false);
+        return false;
+      }
+    },
+    [enqueueSnackbar, resetInterval],
+  );
+
+  return { isCopied, copy };
+};