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,123 @@
+import { useEffect, useState, useCallback } from 'react';
+import CopyButton from './CopyButton';
+import { Button, Paper, Typography, Stack, Box } from '@mui/material';
+
+/**
+ * 时间戳显示和执行组件
+ *
+ * @component
+ * @example
+ * ```jsx
+ * <TimestampExecution />
+ * ```
+ *
+ * @returns {JSX.Element} 时间戳组件
+ */
+export function TimestampExecution() {
+  const [currentTimestamp, setCurrentTimestamp] = useState(() =>
+    Math.floor(Date.now()),
+  );
+  const [showMilliseconds, setShowMilliseconds] = useState(true);
+  const [isRunningTimestamp, setIsRunningTimestamp] = useState(true);
+
+  const displayTimestamp = showMilliseconds
+    ? currentTimestamp
+    : Math.floor(currentTimestamp / 1000);
+
+  const unitText = showMilliseconds ? '毫秒' : '秒';
+
+  useEffect(() => {
+    let timer: number;
+    if (isRunningTimestamp) {
+      const interval = showMilliseconds ? 100 : 1000;
+      timer = window.setInterval(() => {
+        setCurrentTimestamp(Math.floor(Date.now()));
+      }, interval);
+    }
+    return () => clearInterval(timer);
+  }, [isRunningTimestamp, showMilliseconds]);
+
+  const toggleUnit = useCallback(() => {
+    setShowMilliseconds((prev) => !prev);
+  }, []);
+
+  const toggleTimestamp = useCallback(() => {
+    setIsRunningTimestamp((prev) => !prev);
+  }, []);
+
+  const unitButtonLabel = showMilliseconds
+    ? '切换为秒显示'
+    : '切换为毫秒显示';
+  const toggleButtonLabel = isRunningTimestamp
+    ? '停止时间戳自动更新'
+    : '开始时间戳自动更新';
+  const toggleButtonText = isRunningTimestamp ? '停止' : '开始';
+
+  return (
+    <Paper
+      elevation={3}
+      sx={{ p: 2, my: 2, borderRadius: 2, minWidth: 320, textAlign: 'center' }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'baseline',
+          justifyContent: 'center',
+          gap: 1,
+          mb: 2,
+          overflowX: 'auto',
+          pb: 1,
+        }}
+      >
+        <Typography
+          variant="h4"
+          component="span"
+          sx={{
+            fontFamily: 'monospace',
+            fontWeight: 'bold',
+            color: 'primary.main',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {displayTimestamp}
+        </Typography>
+        <Typography
+          variant="h6"
+          component="span"
+          sx={{ color: 'text.secondary', whiteSpace: 'nowrap' }}
+        >
+          {unitText}
+        </Typography>
+      </Box>
+
+      <Stack direction="row" spacing={2} justifyContent="center" flexWrap="wrap">
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={toggleUnit}
+          aria-label={unitButtonLabel}
+          title={unitButtonLabel}
+        >
+          切换单位
+        </Button>
+
+        <CopyButton
+          textToCopy={String(currentTimestamp)}
+          buttonText="复制"
+          aria-label="复制当前时间戳到剪贴板"
+          color="primary"
+        />
+
+        <Button
+          variant="contained"
+          color={isRunningTimestamp ? 'error' : 'primary'}
+          onClick={toggleTimestamp}
+          aria-label={toggleButtonLabel}
+          title={toggleButtonLabel}
+        >
+          {toggleButtonText}
+        </Button>
+      </Stack>
+    </Paper>
+  );
+}