feat: 添加 React Error Boundary 组件防止渲染异常白屏

src/App.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import MainMenu from './components/menu/MainMenu';
 import GameView from './components/game/GameView';
 import ReplayView from './components/replay/ReplayView';
+import ErrorBoundary from './components/common/ErrorBoundary';
 import './App.css';
 
 type Page = 'menu' | 'game' | 'replay';
@@ -13,15 +14,21 @@ function App() {
   const handleReplayStart = () => setPage('replay');
   const handleBackToMenu = () => setPage('menu');
 
-  if (page === 'game') return <GameView onBackToMenu={handleBackToMenu} />;
-  if (page === 'replay') return <ReplayView onBackToMenu={handleBackToMenu} />;
+  let content: React.ReactNode;
+  if (page === 'game') {
+    content = <GameView onBackToMenu={handleBackToMenu} />;
+  } else if (page === 'replay') {
+    content = <ReplayView onBackToMenu={handleBackToMenu} />;
+  } else {
+    content = (
+      <MainMenu
+        onGameStart={handleGameStart}
+        onReplayStart={handleReplayStart}
+      />
+    );
+  }
 
-  return (
-    <MainMenu
-      onGameStart={handleGameStart}
-      onReplayStart={handleReplayStart}
-    />
-  );
+  return <ErrorBoundary>{content}</ErrorBoundary>;
 }
 
 export default App;