feat: 添加内置回放界面和错误修复

entrypoints/popup/App.tsx

@@ -1,8 +1,10 @@
 // App.js
 import { HashRouter as Router, Routes, Route } from 'react-router-dom';
 import TimestampPage from './pages/TimestampPage';
-import RecordeReplayPage from './pages/RecordeReplayPage';
+import RecordReplayPage from './pages/RecordReplayPage';
 import TestPage from './pages/TestPage';
+import ReplayListPage from './pages/ReplayListPage';
+import ReplayPlayerPage from './pages/ReplayPlayerPage';
 import Navbar from '../../components/Navbar';
 import RoutePersistence from '../../components/RoutePersistence';
 import './App.css';
@@ -11,7 +13,8 @@ import './App.css';
 const navItems = [
   { path: '/test', label: '测试页面', element: <TestPage /> },
   { path: '/', label: '时间戳', element: <TimestampPage /> },
-  { path: '/recorde-replay', label: '录制与回放', element: <RecordeReplayPage /> },
+  { path: '/record-replay', label: '录制', element: <RecordReplayPage /> },
+  { path: '/replay-list', label: '历史回放', element: <ReplayListPage /> },
 ];
 
 function App() {
@@ -25,6 +28,7 @@ function App() {
           {navItems.map((item) => (
             <Route key={item.path} path={item.path} element={item.element} />
           ))}
+          <Route path="/replay/:id" element={<ReplayPlayerPage />} />
         </Routes>
       </div>
     </Router>

entrypoints/popup/pages/RecordReplayPage.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useState, useMemo } from 'react';
+import { AppState } from '../types';
+import { sendMessage, onMessage } from '@/utils/messages';
+import { Button, Container, Stack, Typography, Alert } from '@mui/material';
+import { CircularProgress } from '@mui/material';
+
+const RecordReplayPage = () => {
+  const [status, setStatus] = useState<AppState>(AppState.READ);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
+
+  useEffect(() => {
+    const unlistenStarted = onMessage('popup:started', () => {
+      console.log('[popup] Received started message');
+      setStatus(AppState.RECORDING);
+      setIsLoading(false);
+      setError(null);
+    });
+
+    const unlistenStopped = onMessage('popup:stopped', () => {
+      setStatus(AppState.READ);
+      setIsLoading(false);
+      setError(null);
+    });
+
+    const unlistenReady = onMessage('popup:ready', () => {
+      setStatus(AppState.READ);
+      setIsLoading(false);
+      setError(null);
+    });
+
+    sendMessage('popup:check-status', undefined)
+      .then((res) => {
+        if (res?.active) {
+          setStatus(AppState.RECORDING);
+        } else {
+          setStatus(AppState.READ);
+        }
+      })
+      .catch((err) => {
+        console.error(err);
+        setError('检查录制状态失败');
+      });
+
+    return () => {
+      unlistenStarted();
+      unlistenStopped();
+      unlistenReady();
+    };
+  }, []);
+
+  const toggleRecording = async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (isRecording) {
+        const result = await sendMessage('popup:stop', undefined);
+        if (!result?.ok) {
+          setError(result?.error || '停止录制失败');
+          setIsLoading(false);
+          return;
+        }
+      } else {
+        const result = await sendMessage('popup:start', undefined);
+        if (!result?.ok) {
+          setError(result?.error || '开始录制失败');
+          setIsLoading(false);
+          return;
+        }
+      }
+    } catch (error) {
+      console.error('Error toggling recording:', error);
+      setError('操作失败，请重试');
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Container maxWidth={false} sx={{ py: 2.5 }}>
+      <Stack direction="column" spacing={2} sx={{ mb: 2.5 }}>
+        {error && (
+          <Alert severity="error" sx={{ fontSize: '0.875rem' }}>
+            {error}
+          </Alert>
+        )}
+
+        <Stack direction="row" spacing={1.25} justifyContent="center">
+          <Button
+            variant="contained"
+            size="medium"
+            color={isRecording ? 'error' : 'primary'}
+            onClick={toggleRecording}
+            disabled={isLoading}
+            sx={{ minWidth: 120 }}
+          >
+            {isLoading ? (
+              <CircularProgress size={20} color="inherit" />
+            ) : isRecording ? (
+              '停止录制'
+            ) : (
+              '开始录制'
+            )}
+          </Button>
+        </Stack>
+
+        <Typography
+          variant="body2"
+          color="text.secondary"
+          textAlign="center"
+          sx={{ mt: 1 }}
+        >
+          {isRecording ? '正在录制用户操作...' : '点击开始录制用户操作'}
+        </Typography>
+      </Stack>
+    </Container>
+  );
+};
+
+export default RecordReplayPage;

entrypoints/popup/pages/RecordeReplayPage.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState, useMemo } from 'react';
-import { AppState } from '../types';
-import { sendMessage, onMessage } from '@/utils/messages';
-import { Button, Container, Stack } from '@mui/material';
-
-const RecordeReplayPage = () => {
-  const [status, setStatus] = useState<AppState>(AppState.READ);
-  const isRecording = useMemo(() => status === AppState.RECORDING, [status]);
-
-  useEffect(() => {
-    const unlistenStarted = onMessage('popup:started', () => {
-      console.log('[popup] Received started message');
-      setStatus(AppState.RECORDING);
-    });
-
-    const unlistenStopped = onMessage('popup:stopped', () => {
-      setStatus(AppState.READ);
-    });
-
-    const unlistenReady = onMessage('popup:ready', () => {
-      setStatus(AppState.READ);
-    });
-
-    sendMessage('popup:check-status', undefined)
-      .then((res) => {
-        if (res?.active) {
-          setStatus(AppState.RECORDING);
-        } else {
-          setStatus(AppState.READ);
-        }
-      })
-      .catch((err) => {
-        console.error(err);
-      });
-
-    return () => {
-      unlistenStarted();
-      unlistenStopped();
-      unlistenReady();
-    };
-  }, []);
-
-  const toggleRecording = async () => {
-    try {
-      if (isRecording) {
-        const result = await sendMessage('popup:stop', undefined);
-        if (!result?.ok) {
-          return;
-        }
-      } else {
-        const result = await sendMessage('popup:start', undefined);
-        if (!result?.ok) {
-          return;
-        }
-      }
-    } catch (error) {
-      console.error('Error toggling recording:', error);
-    }
-  };
-
-  return (
-    <Container maxWidth={false} sx={{ py: 2.5 }}>
-      <Stack direction="row" spacing={1.25} sx={{ mb: 2.5 }}>
-        <Button
-          variant="contained"
-          size="medium"
-          color={isRecording ? 'error' : 'primary'}
-          onClick={toggleRecording}
-        >
-          {isRecording ? '停止录制' : '开始录制'}
-        </Button>
-      </Stack>
-    </Container>
-  );
-};
-
-export default RecordeReplayPage;

entrypoints/popup/pages/ReplayListPage.tsx

@@ -0,0 +1,181 @@
+import { useEffect, useState } from 'react';
+import {
+  Container,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemText,
+  ListItemSecondaryAction,
+  IconButton,
+  Typography,
+  Box,
+  CircularProgress,
+  Alert,
+  Button,
+} from '@mui/material';
+import {
+  PlayArrow as PlayIcon,
+  Download as DownloadIcon,
+  Delete as DeleteIcon,
+} from '@mui/icons-material';
+import { useNavigate } from 'react-router-dom';
+import { sendMessage } from '@/utils/messages';
+
+interface Session {
+  id: string;
+  startTime: number;
+  tabId: number;
+  chunkCount: number;
+  totalEvents: number;
+}
+
+const ReplayListPage = () => {
+  const [sessions, setSessions] = useState<Session[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    fetchSessions();
+  }, []);
+
+  const fetchSessions = async () => {
+    try {
+      const data = await sendMessage('popup:get-sessions');
+      setSessions(data || []);
+    } catch (err) {
+      console.error(err);
+      setError('获取录制历史失败');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handlePlay = (sessionId: string) => {
+    navigate(`/replay/${sessionId}`);
+  };
+
+  const handleDownload = async (sessionId: string) => {
+    try {
+      await sendMessage('popup:download-session', sessionId);
+    } catch (err) {
+      console.error(err);
+      setError('下载失败');
+    }
+  };
+
+  const handleDelete = async (sessionId: string) => {
+    if (window.confirm('确定要删除这个录制吗？')) {
+      try {
+        await sendMessage('popup:delete-session', sessionId);
+        fetchSessions();
+      } catch (err) {
+        console.error(err);
+        setError('删除失败');
+      }
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container maxWidth={false} sx={{ py: 2.5 }}>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+        <Button variant="contained" onClick={fetchSessions}>
+          重试
+        </Button>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth={false} sx={{ py: 2.5 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        录制历史
+      </Typography>
+
+      {sessions.length === 0 ? (
+        <Box textAlign="center" sx={{ py: 4 }}>
+          <Typography variant="body2" color="text.secondary">
+            暂无录制历史
+          </Typography>
+          <Typography variant="caption" color="text.secondary" sx={{ mt: 1, display: 'block' }}>
+            点击"录制与回放"页面的开始按钮进行录制
+          </Typography>
+        </Box>
+      ) : (
+        <List sx={{ width: '100%', maxWidth: 500, margin: '0 auto' }}>
+          {sessions.map((session) => (
+            <ListItem
+              key={session.id}
+              disablePadding
+              sx={{ mb: 1, borderRadius: 1, overflow: 'hidden' }}
+            >
+              <ListItemButton
+                sx={{ borderRadius: 1 }}
+                onClick={() => handlePlay(session.id)}
+              >
+                <ListItemText
+                  primary={
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <PlayIcon fontSize="small" />
+                      <Typography variant="body1">
+                        {new Date(session.startTime).toLocaleString()}
+                      </Typography>
+                    </Box>
+                  }
+                  secondary={
+                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                      <Typography variant="caption" color="text.secondary">
+                        事件数: {session.chunkCount * 100}
+                      </Typography>
+                      <Typography variant="caption" color="text.secondary">
+                        Tab: {session.tabId}
+                      </Typography>
+                    </Box>
+                  }
+                />
+                <ListItemSecondaryAction>
+                  <IconButton
+                    edge="end"
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDownload(session.id);
+                    }}
+                    title="下载"
+                  >
+                    <DownloadIcon fontSize="small" />
+                  </IconButton>
+                  <IconButton
+                    edge="end"
+                    size="small"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      handleDelete(session.id);
+                    }}
+                    title="删除"
+                    sx={{ color: 'error.main' }}
+                  >
+                    <DeleteIcon fontSize="small" />
+                  </IconButton>
+                </ListItemSecondaryAction>
+              </ListItemButton>
+            </ListItem>
+          ))}
+        </List>
+      )}
+    </Container>
+  );
+};
+
+export default ReplayListPage;

entrypoints/popup/pages/ReplayPlayerPage.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import {
+  Container,
+  Typography,
+  Box,
+  CircularProgress,
+  Alert,
+  IconButton,
+  Button,
+} from '@mui/material';
+import {
+  ArrowBack as ArrowBackIcon,
+  Download as DownloadIcon,
+  Delete as DeleteIcon,
+} from '@mui/icons-material';
+import { sendMessage } from '@/utils/messages';
+
+const ReplayPlayerPage = () => {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [eventsData, setEventsData] = useState<unknown[] | null>(null);
+
+  const fetchSessionEvents = useCallback(async (sessionId: string) => {
+    try {
+      const data = await sendMessage('popup:get-session-events', sessionId);
+      setEventsData(data || []);
+    } catch (err) {
+      console.error(err);
+      setError('加载录制内容失败');
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (id) {
+      fetchSessionEvents(id);
+    }
+  }, [id, fetchSessionEvents]);
+
+  const handleDownload = async () => {
+    if (!id) return;
+    try {
+      await sendMessage('popup:download-session', id);
+    } catch (err) {
+      console.error(err);
+      setError('下载失败');
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!id) return;
+    if (window.confirm('确定要删除这个录制吗？')) {
+      try {
+        await sendMessage('popup:delete-session', id);
+        navigate('/record-replay');
+      } catch (err) {
+        console.error(err);
+        setError('删除失败');
+      }
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <Container maxWidth={false} sx={{ py: 2.5, display: 'flex', justifyContent: 'center' }}>
+        <CircularProgress />
+      </Container>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container maxWidth={false} sx={{ py: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+          <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Typography variant="h6">回放</Typography>
+        </Box>
+        <Alert severity="error" sx={{ mb: 2 }}>
+          {error}
+        </Alert>
+        <Button variant="contained" onClick={() => fetchSessionEvents(id!)}>
+          重试
+        </Button>
+      </Container>
+    );
+  }
+
+  if (!eventsData || eventsData.length === 0) {
+    return (
+      <Container maxWidth={false} sx={{ py: 2.5 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+          <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
+            <ArrowBackIcon />
+          </IconButton>
+          <Typography variant="h6">回放</Typography>
+        </Box>
+        <Alert severity="warning">
+          此会话没有事件数据，请尝试重新录制。
+        </Alert>
+      </Container>
+    );
+  }
+
+  return (
+    <Container maxWidth={false} sx={{ py: 2.5 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+        <IconButton onClick={() => navigate('/record-replay')} sx={{ mr: 1 }}>
+          <ArrowBackIcon />
+        </IconButton>
+        <Typography variant="h6">回放</Typography>
+        <Box sx={{ ml: 'auto', display: 'flex', gap: 1 }}>
+          <IconButton onClick={handleDownload} title="下载">
+            <DownloadIcon />
+          </IconButton>
+          <IconButton onClick={handleDelete} title="删除" sx={{ color: 'error.main' }}>
+            <DeleteIcon />
+          </IconButton>
+        </Box>
+      </Box>
+
+      <Box sx={{ borderRadius: 1, overflow: 'hidden', border: 1, borderColor: 'divider' }}>
+        <Box sx={{ p: 2, textAlign: 'center' }}>
+          <Typography variant="body1" color="text.secondary">
+            由于浏览器安全策略限制，无法在内联 iframe 中直接回放。
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+            请点击右上角的"下载"按钮，下载完整的回放 HTML 文件到本地查看。
+          </Typography>
+          <Button
+            variant="contained"
+            onClick={handleDownload}
+            sx={{ mt: 2 }}
+            startIcon={<DownloadIcon />}
+          >
+            下载回放文件
+          </Button>
+        </Box>
+      </Box>
+
+      <Box sx={{ mt: 2 }}>
+        <Alert severity="info">
+          <Typography variant="body2">
+            <strong>安全提示：</strong>浏览器扩展有严格的 Content Security Policy (CSP)
+            限制，禁止内联脚本执行，因此无法在扩展 popup 中直接显示回放内容。
+            下载的 HTML 文件包含了完整的回放代码，可以在任何现代浏览器中直接打开。
+          </Typography>
+        </Alert>
+      </Box>
+    </Container>
+  );
+};
+
+export default ReplayPlayerPage;