重做观众端衬线体直播界面

frontend/src/App.tsx

@@ -1,21 +1,22 @@
-import { useState, useEffect } from 'react'
+import { lazy, Suspense, useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { ConfigProvider } from 'antd'
 import zhCN from 'antd/locale/zh_CN'
 import theme from './theme/anthropic'
 import { BrandProvider, useBrand } from './brand/BrandContext'
-import AdminLayout from './admin/AdminLayout'
-import LoginPage from './admin/LoginPage'
-import Dashboard from './admin/pages/Dashboard'
-import StreamList from './admin/pages/StreamList'
-import StreamForm from './admin/pages/StreamForm'
-import NodeManager from './admin/pages/NodeManager'
-import SettingsPage from './admin/pages/Settings'
-import HomePage from './viewer/pages/HomePage'
-import WatchPage from './viewer/pages/WatchPage'
 import { verifyToken } from './api/auth'
 import { getToken } from './api/client'
 
+const HomePage = lazy(() => import('./viewer/pages/HomePage'))
+const WatchPage = lazy(() => import('./viewer/pages/WatchPage'))
+const AdminLayout = lazy(() => import('./admin/AdminLayout'))
+const LoginPage = lazy(() => import('./admin/LoginPage'))
+const Dashboard = lazy(() => import('./admin/pages/Dashboard'))
+const StreamList = lazy(() => import('./admin/pages/StreamList'))
+const StreamForm = lazy(() => import('./admin/pages/StreamForm'))
+const NodeManager = lazy(() => import('./admin/pages/NodeManager'))
+const SettingsPage = lazy(() => import('./admin/pages/Settings'))
+
 function AdminGuard({ children }: { children: React.ReactNode }) {
   const [authed, setAuthed] = useState<boolean | null>(null)
 
@@ -35,7 +36,8 @@ function AppRoutes() {
   useEffect(() => { document.title = brand.brand_name }, [brand.brand_name])
   return (
     <BrowserRouter>
-      <Routes>
+      <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={
@@ -50,7 +52,8 @@ function AppRoutes() {
           <Route path="settings" element={<SettingsPage />} />
         </Route>
         <Route path="/" element={<HomePage />} />
-      </Routes>
+        </Routes>
+      </Suspense>
     </BrowserRouter>
   )
 }