tag(功能):添加网页全屏的功能

apps/ScreenShareWeb/src/App.css

@@ -278,6 +278,14 @@ button:disabled {
   background: #10111b;
 }
 
+.screen-stage:fullscreen {
+  width: 100vw;
+  height: 100vh;
+  min-height: 100vh;
+  border: 0;
+  border-radius: 0;
+}
+
 .screen-stage .screen-frame {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);

apps/ScreenShareWeb/src/App.tsx

@@ -71,6 +71,7 @@ async function apiRequest<T>(path: string, options: RequestInit = {}, token?: st
 
 function App() {
   const roomRef = useRef<Room | null>(null)
+  const screenStageRef = useRef<HTMLElement>(null)
   const [session, setSession] = useState<Session | null>(null)
   const [authMode, setAuthMode] = useState<'login' | 'register'>('login')
   const [username, setUsername] = useState('')
@@ -93,6 +94,7 @@ function App() {
   const [localScreen, setLocalScreen] = useState<ScreenFeed | null>(null)
   const [remoteScreens, setRemoteScreens] = useState<ScreenFeed[]>([])
   const [activeScreenId, setActiveScreenId] = useState<string | null>(null)
+  const [fullscreenMode, setFullscreenMode] = useState<'none' | 'page' | 'stage'>('none')
   const [createdInvite, setCreatedInvite] = useState('')
   const [error, setError] = useState('')
 
@@ -109,6 +111,20 @@ function App() {
     void roomRef.current?.disconnect()
   }, [])
 
+  useEffect(() => {
+    function syncFullscreenMode() {
+      if (document.fullscreenElement === screenStageRef.current) {
+        setFullscreenMode('stage')
+      } else if (document.fullscreenElement === document.documentElement) {
+        setFullscreenMode('page')
+      } else {
+        setFullscreenMode('none')
+      }
+    }
+    document.addEventListener('fullscreenchange', syncFullscreenMode)
+    return () => document.removeEventListener('fullscreenchange', syncFullscreenMode)
+  }, [])
+
   function saveSession(next: Session) {
     localStorage.setItem('screen-share-session', JSON.stringify(next))
     setSession(next)
@@ -289,6 +305,31 @@ function App() {
     roomRef.current = null
   }
 
+  async function togglePageFullscreen() {
+    try {
+      if (fullscreenMode === 'page') {
+        await document.exitFullscreen()
+      } else {
+        await document.documentElement.requestFullscreen()
+      }
+    } catch {
+      setError('浏览器不允许进入全屏模式。')
+    }
+  }
+
+  async function toggleStageFullscreen() {
+    if (!screenStageRef.current) return
+    try {
+      if (fullscreenMode === 'stage') {
+        await document.exitFullscreen()
+      } else {
+        await screenStageRef.current.requestFullscreen()
+      }
+    } catch {
+      setError('浏览器不允许将主画面全屏显示。')
+    }
+  }
+
   function logout() {
     leaveRoom()
     localStorage.removeItem('screen-share-session')
@@ -382,11 +423,17 @@ function App() {
       {connected && (
         <>
           <section className="room-toolbar" aria-label="房间控制">
+            <button type="button" className="secondary" onClick={() => void togglePageFullscreen()}>
+              {fullscreenMode === 'page' ? '退出网页全屏' : '网页全屏'}
+            </button>
+            <button type="button" className="secondary" onClick={() => void toggleStageFullscreen()} disabled={!activeScreen}>
+              {fullscreenMode === 'stage' ? '退出全屏显示' : '全屏显示'}
+            </button>
             {canShare && <button type="button" className="share-button" onClick={() => void toggleScreenShare()}>{isSharing ? '停止共享屏幕' : '共享屏幕'}</button>}
             <button type="button" className="secondary" onClick={leaveRoom}>离开房间</button>
           </section>
 
-          <section className="screen-stage">
+          <section className="screen-stage" ref={screenStageRef}>
             {activeScreen
               ? <ScreenTrack {...activeScreen} variant="main" />
               : <p className="empty stage-empty">等待参与者共享屏幕</p>}