From 03c608f3c9eceab07205f60140256d75aeaa16fc Mon Sep 17 00:00:00 2001
From: OrangeRoll <zzy_dada@Outlook.com>
Date: Fri, 7 Aug 2026 14:31:04 +0800
Subject: [PATCH] =?UTF-8?q?tag(=E5=8A=9F=E8=83=BD):=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=BD=91=E9=A1=B5=E5=85=A8=E5=B1=8F=E7=9A=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/ScreenShareWeb/src/App.css |  8 ++++++
 apps/ScreenShareWeb/src/App.tsx | 49 ++++++++++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/apps/ScreenShareWeb/src/App.css b/apps/ScreenShareWeb/src/App.css
index 5763ba7..bf2403e 100644
--- a/apps/ScreenShareWeb/src/App.css
+++ b/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);
diff --git a/apps/ScreenShareWeb/src/App.tsx b/apps/ScreenShareWeb/src/App.tsx
index 3a5ff8f..9602d47 100644
--- a/apps/ScreenShareWeb/src/App.tsx
+++ b/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>}