修复观看页白屏与异常状态

frontend/src/App.tsx

@@ -1,6 +1,6 @@
-import { lazy, Suspense, useState, useEffect } from 'react'
+import { Component, lazy, Suspense, useState, useEffect, type ErrorInfo, type ReactNode } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
-import { ConfigProvider } from 'antd'
+import { Button, ConfigProvider, Result } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import theme from './theme/anthropic'
 import { BrandProvider, useBrand } from './brand/BrandContext'
@@ -18,6 +18,32 @@ const ReplayEditor = lazy(() => import('./admin/pages/ReplayEditor'))
 const NodeManager = lazy(() => import('./admin/pages/NodeManager'))
 const SettingsPage = lazy(() => import('./admin/pages/Settings'))
 
+class PageErrorBoundary extends Component<{ children: ReactNode }, { failed: boolean }> {
+  state = { failed: false }
+
+  static getDerivedStateFromError() {
+    return { failed: true }
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('Page render failed', error, info)
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <Result
+          status="error"
+          title="页面加载失败"
+          subTitle="页面遇到异常，请重新加载后再试。"
+          extra={<Button type="primary" onClick={() => window.location.reload()}>重新加载</Button>}
+        />
+      )
+    }
+    return this.props.children
+  }
+}
+
 function AdminGuard({ children }: { children: React.ReactNode }) {
   const [authed, setAuthed] = useState<boolean | null>(null)
 
@@ -37,8 +63,9 @@ function AppRoutes() {
   useEffect(() => { document.title = brand.brand_name }, [brand.brand_name])
   return (
     <BrowserRouter>
-      <Suspense fallback={<div className="route-loading" role="status" aria-label="页面加载中" />}>
-        <Routes>
+      <PageErrorBoundary>
+        <Suspense fallback={<div className="route-loading" role="status" aria-label="页面加载中" />}>
+          <Routes>
         <Route path="/watch/:id" element={<WatchPage />} />
         <Route path="/admin/login" element={<LoginPage />} />
         <Route path="/admin" element={
@@ -54,8 +81,9 @@ function AppRoutes() {
           <Route path="settings" element={<SettingsPage />} />
         </Route>
         <Route path="/" element={<HomePage />} />
-        </Routes>
-      </Suspense>
+          </Routes>
+        </Suspense>
+      </PageErrorBoundary>
     </BrowserRouter>
   )
 }