优化

优化

web/src/components/DanmakuStage.tsx

@@ -109,6 +109,14 @@ export function DanmakuStage({
     // 弹幕层不拦截播放器控制栏的点击。
     holder.style.pointerEvents = 'none'
 
+    // 监听 holder 尺寸变化（全屏/退出全屏/窗口缩放），实时重置弹道与容器边界
+    const ro = new ResizeObserver(() => {
+      if (!disposed && managerRef.current) {
+        managerRef.current.format()
+      }
+    })
+    ro.observe(holder)
+
     const applyLiveSettings = () => {
       const { opacity: liveOpacity, area: liveArea } = liveRef.current
       manager.setOpacity(liveOpacity)
@@ -215,6 +223,7 @@ export function DanmakuStage({
 
     return () => {
       disposed = true
+      ro.disconnect()
       cancelAnimationFrame(raf)
       video.removeEventListener('play', onPlay)
       video.removeEventListener('playing', onPlay)

web/src/components/Layout.tsx

@@ -50,6 +50,7 @@ export function Layout() {
 
   const showSidebar = !isMediaView(location.pathname, location.search)
   const hideSearch = location.pathname.startsWith('/settings')
+  const isPlayPage = location.pathname.startsWith('/play')
 
   return (
     <div className="flex h-screen w-screen overflow-hidden bg-[var(--app-bg)] text-[var(--app-text)] font-body select-none">
@@ -60,17 +61,19 @@ export function Layout() {
         showSidebar={showSidebar}
       />
       <div className="flex flex-1 flex-col min-w-0 overflow-hidden">
-        <LayoutHeader
-          permissions={permissions}
-          theme={theme}
-          onOpenMobileDrawer={() => sidebar.setIsMobileDrawerOpen(true)}
-          user={user}
-          activeProfileId={activeProfileId}
-          profile={profile}
-          onLogout={closeProfileAndLogout}
-          showSidebar={showSidebar}
-          hideSearch={hideSearch}
-        />
+        {!isPlayPage && (
+          <LayoutHeader
+            permissions={permissions}
+            theme={theme}
+            onOpenMobileDrawer={() => sidebar.setIsMobileDrawerOpen(true)}
+            user={user}
+            activeProfileId={activeProfileId}
+            profile={profile}
+            onLogout={closeProfileAndLogout}
+            showSidebar={showSidebar}
+            hideSearch={hideSearch}
+          />
+        )}
         <LayoutWorkspace routeKey={location.pathname} />
       </div>
     </div>

web/src/components/LayoutSections.tsx

@@ -117,6 +117,16 @@ export function LayoutSidebars({
 }
 
 export function LayoutWorkspace({ routeKey }: LayoutWorkspaceProps) {
+  if (routeKey.startsWith('/play')) {
+    return (
+      <main className="flex flex-1 h-full w-full overflow-hidden">
+        <RouteErrorBoundary>
+          <Outlet />
+        </RouteErrorBoundary>
+      </main>
+    )
+  }
+
   return (
     <main className="flex-1 overflow-y-auto px-4 py-6 md:px-8 md:py-10">
       <div className="max-w-7xl mx-auto">

web/src/components/PlayerControls.tsx

@@ -50,7 +50,10 @@ export function PlayerControls({
   onToggleDanmaku,
 }: PlayerControlsProps) {
   const video = () => videoRef.current
-  const container = () => videoRef.current?.parentElement ?? null
+  const container = () =>
+    videoRef.current?.closest<HTMLElement>('[data-player-stage]') ??
+    videoRef.current?.parentElement ??
+    null
 
   const [playing, setPlaying] = useState(false)
   const [currentTime, setCurrentTime] = useState(0)