From 2c11b8e726056c579492042f7748d4ca3d215e5f Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 16:32:49 +0800
Subject: [PATCH 1/9] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E5=AE=AB=E6=A0=BC?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icon57.png                     | Bin 0 -> 317 bytes
 src/components/SpeakerModeModal/index.tsx |   4 +-
 src/page/Meeting/index.module.scss        | 123 +++++++++++++++++--
 src/page/Meeting/index.tsx                | 136 +++++++++++++++++-----
 src/utils/package/imageUrl.ts             |   4 +-
 5 files changed, 230 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icon57.png

diff --git a/src/assets/icon57.png b/src/assets/icon57.png
new file mode 100644
index 0000000000000000000000000000000000000000..71452a1a1ccade1b5ae029767424c9ae4827847d
GIT binary patch
literal 317
zcmeAS@N?(olHy`uVBq!ia0vp^@*vE?1|rvqSpq4}0*}aI1_o|n5N2eUHAey{$XFcY
z?!>U}oXkrghb7(7*O7r?V?XzwL{=dGlBbJfNCo5DX$N@^DM++7R&7@<$hxHahOO@b
z+pfk!7WEC<7L9io6-*M`#qhw{_J4tL=6`$5B_~h+b~;q;c<%F>RsnU#{@1_jOpe7Q
z_2jx)oB3X@df#t(URG@FlwCnunop<rY@Giw(@WZE27}(GkVTIS<~+RJxO|RvO5PF|
z4YBX{=bv~#?~>AEZm(rGHsA8N@|tmZ<wT_|f!9l$w|?u5_szUm(EMZTGv((ex6ggZ
z6K}ugl}DY!HHkLk8tV`5nT2ldNiEUS)tFK3c+z6ZnWi=Aw)Ve1q}$3TGE4&cj=|H_
K&t;ucLK6V|27dei

literal 0
HcmV?d00001

diff --git a/src/components/SpeakerModeModal/index.tsx b/src/components/SpeakerModeModal/index.tsx
index 73e5351..848aad9 100644
--- a/src/components/SpeakerModeModal/index.tsx
+++ b/src/components/SpeakerModeModal/index.tsx
@@ -53,14 +53,14 @@ const SpeakerModeModal = forwardRef((props: any, ref: any) => {
 })
 
 const FreedomMode: React.FC<Props> = ({ onClick, meetingMode }) => {
-  // 自由者模式
+  // 宫格模式
   return (
     <>
       <div className={styles.freedomMode} onClick={onClick}>
         <div className={`${meetingMode === 'FreedomMode' ? styles.active : ''}`}>
           {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16].map(item => <div key={item}></div>)}
         </div>
-        <span>自由者模式</span>
+        <span>宫格模式</span>
       </div>
     </>
   )
diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index 53680e0..b5bfa47 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -10,7 +10,7 @@
     .meetingContentUserName {
       display: flex;
       align-items: center;
-      background-color: #0000009E;
+      background-color: rgba(0, 0, 0, 0.62);
       border-radius: 6px;
       height: 24px;
       padding: 0 4px;
@@ -285,14 +285,126 @@
           }
         }
 
+        // 宫格模式
+        // 1
+        .meetingContentBodyLeftFreedomModeOne {
+          width: 100%;
+          height: 100%;
 
-        // 自由者模式
-        .meetingContentBodyLeftFreedomMode {
+          .meetingContentSwiperCard {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        // 2
+        .meetingContentBodyLeftFreedomModeTwo {
+          width: 100%;
+          height: 100%;
+          display: flex;
+
+          .meetingContentSwiperCard {
+            width: 50%;
+            height: 100%;
+          }
+        }
+
+        // 3 4
+        .meetingContentBodyLeftFreedomModeThree {
           width: 100%;
           height: 100%;
           display: flex;
           flex-wrap: wrap;
-          overflow-y: auto;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: 50%;
+            height: 50%;
+          }
+        }
+
+        //5 6
+        .meetingContentBodyLeftFreedomModeFour {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 3);
+            height: 50%;
+          }
+        }
+
+        // 7
+        .meetingContentBodyLeftFreedomModeFive {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 4);
+            height: 50%;
+          }
+        }
+
+        //8 9
+        .meetingContentBodyLeftFreedomModeSix {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 3);
+            height: calc(100% / 3);
+          }
+        }
+
+        // 10 11 12
+        .meetingContentBodyLeftFreedomModeSeven {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 4);
+            height: calc(100% / 3);
+          }
+        }
+
+        // 13 14 15 16
+        .meetingContentBodyLeftFreedomModeEight {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 4);
+            height: calc(100% / 4);
+          }
+        }
+
+        // 17 18 19 20
+        .meetingContentBodyLeftFreedomModeNine {
+          width: 100%;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: center;
+
+          .meetingContentSwiperCard {
+            width: calc(100% / 5);
+            height: calc(100% / 4);
+          }
         }
 
         // 标准模式
@@ -309,9 +421,6 @@
 
           .meetingContentSwiperCard {
             width: 100%;
-          }
-
-          .meetingContentSwiperCard {
             height: 160px;
           }
         }
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 0a62747..1cddf82 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -184,7 +184,7 @@ const Meeting: React.FC = () => {
   const [isClickLock, setIsClickLock] = useState(false)
   const [open, setOpen] = useState(false)
   const [modeOpen, setModeOpen] = useState(false)
-  const [meetingMode, setMeetingMode] = useState('')
+  const [meetingMode, setMeetingMode] = useState('FreedomMode')
   const [userSearchValue, setUserSearchValue] = useState('')
   const [noViewChatList, setNoViewChatList] = useState(0)
   const [currentLookUserAccount, setCurrentLookUserAccount] = useState<any>('')
@@ -235,7 +235,6 @@ const Meeting: React.FC = () => {
       }
     })
     setKeyOpenChildWindow('shareScreenWindow', false)
-    setMeetingMode('StandardMode');
     agoraInit()
     storage.setItem('noViewChatList', 0)
     window.addEventListener('customStorageChange', handleCustomStorageChange);
@@ -639,18 +638,23 @@ const Meeting: React.FC = () => {
     if (isShare) {
       const item = roomUserList.find((item: any) => item.screenShareId === String(isShare))
       setIsShareUser(item || null)
+      setMeetingMode('StandardMode')
     }
   }, [isShare, roomUserList]);
 
   useEffect(() => {
     roomUserList.forEach(async (item: any) => {
-      if (item.uid === currentVideoId) {
+      if (meetingMode === "FreedomMode") {
         await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamHigh, true)
       } else {
-        await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamLow, true)
+        if (item.uid === currentVideoId) {
+          await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamHigh, true)
+        } else {
+          await agora.setRemoteVideoStreamType(item.uid, VideoStreamType.VideoStreamLow, true)
+        }
       }
     });
-  }, [currentVideoId, roomUserList]);
+  }, [currentVideoId, roomUserList, meetingMode]);
 
   useEffect(() => {
     let item = roomUserList.find((item: any) => currentVideoId == item.uid)
@@ -739,7 +743,7 @@ const Meeting: React.FC = () => {
           break;
         // 更新视图模式
         case 'RefreshView':
-          setMeetingMode(item.type)
+
           break;
         // 全员看他
         case 'ShowUser':
@@ -752,6 +756,7 @@ const Meeting: React.FC = () => {
               }
             }
           }
+          setMeetingMode('StandardMode')
           getShowUser()
           break;
         // 用户加入频道回调
@@ -990,12 +995,15 @@ const Meeting: React.FC = () => {
                 uid: temp.uid,
                 enableMicr: temp.enableMicr
               })
-            } else {
+            } else if (temp.type === 'video') {
               await PostOpenCamera({
                 roomNum: temp.roomNum,
                 uid: temp.uid,
                 enableCamera: temp.enableCamera
               })
+            } else if (temp.type === 'mode') {
+              message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`)
+              setMeetingMode(temp.mode)
             }
           } catch (error) {
 
@@ -1581,7 +1589,11 @@ const Meeting: React.FC = () => {
           item.isShow = true;
         }
       });
-      setIsAdmin(res.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length)
+      const peoPleLength = res.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length
+      setIsAdmin(peoPleLength)
+      if (peoPleLength >= 6) {
+        setMeetingMode('StandardMode')
+      }
       return res
     })
   }
@@ -2236,6 +2248,9 @@ const Meeting: React.FC = () => {
   const handleCustomStorageChange = async (e: any): Promise<void> => {
     switch (e.key) {
       case 'meetingMode':
+        if (e.value !== 'FreedomMode') {
+          await getShowUser()
+        }
         setMeetingMode(e.value)
         break;
       case 'quitMeeting':
@@ -2456,10 +2471,37 @@ const Meeting: React.FC = () => {
     })
   }
   // 获取当前模式样式
-  const getMeetingContentBodyLeftModeClass = (): string => {
+  const getMeetingContentBodyLeftModeClass = (people: Number): string => {
     switch (meetingMode) {
       case 'FreedomMode':
-        return styles.meetingContentBodyLeftFreedomMode
+        switch (people) {
+          case 1:
+            return styles.meetingContentBodyLeftFreedomModeOne;
+          case 2:
+            return styles.meetingContentBodyLeftFreedomModeTwo;
+          case 3:
+          case 4:
+            return styles.meetingContentBodyLeftFreedomModeThree;
+          case 5:
+          case 6:
+            return styles.meetingContentBodyLeftFreedomModeFour;
+          case 7:
+            return styles.meetingContentBodyLeftFreedomModeFive;
+          case 8:
+          case 9:
+            return styles.meetingContentBodyLeftFreedomModeSix;
+          case 10:
+          case 11:
+          case 12:
+            return styles.meetingContentBodyLeftFreedomModeSeven;
+          case 13:
+          case 14:
+          case 15:
+          case 16:
+            return styles.meetingContentBodyLeftFreedomModeEight;
+          default:
+            return styles.meetingContentBodyLeftFreedomModeNine;
+        }
       case 'StandardMode':
         return styles.meetingContentBodyLeftStandardMode
       case 'SpeakerMode':
@@ -2474,10 +2516,10 @@ const Meeting: React.FC = () => {
     return ''
   }
   // 获取当前模式文字
-  const getMeetingContentBodyLeftModeText = (): string => {
-    switch (meetingMode) {
+  const getMeetingContentBodyLeftModeText = (mode?: string): string => {
+    switch (mode || meetingMode) {
       case 'FreedomMode':
-        return '自由者模式'
+        return '宫格模式'
       case 'StandardMode':
         return '标准模式'
       case 'SpeakerMode':
@@ -2575,6 +2617,32 @@ const Meeting: React.FC = () => {
     }
     message.success('操作成功')
   }
+  // 设置模式
+  const setSyncView = (mode: string) => {
+    confirm({
+      title: '提示',
+      icon: <ExclamationCircleFilled />,
+      content: `是否将当前房间切换为${getMeetingContentBodyLeftModeText(mode)}?`,
+      centered: true,
+      okText: '确定',
+      cancelText: '取消',
+      async onOk() {
+        await window.electron.onInvoke('sendOper2User', {
+          uid: userInfo.uid,
+          contentString: JSON.stringify({
+            mode,
+            type: 'mode'
+          })
+        })
+        setModeOpen(false)
+        storage.setItem('meetingMode', mode)
+      },
+      onCancel() {
+        setModeOpen(false)
+        storage.setItem('meetingMode', mode)
+      }
+    })
+  }
   // 判断是否出现滚动条
   const hasScrollbar = () => {
     let element = document.getElementById('videoView') as HTMLDivElement
@@ -2773,19 +2841,23 @@ const Meeting: React.FC = () => {
             <span className='drag' style={{ marginTop: '2px', marginLeft: '4px' }}><Code roomNum={state.channelId}></Code></span>
           </div>
           <div className='drag'>
-            <Popover
+            {role.ID.includes(userInfo.roleId) ? <Popover
               content={
                 <div className='modePopover'>
                   <div onClick={() => {
-                    setModeOpen(false)
-                    storage.setItem('meetingMode', 'StandardMode')
+                    setSyncView('FreedomMode')
+                  }}>
+                    <img src={ImageUrl.icon57} alt="" />
+                    <span>宫格模式</span>
+                  </div>
+                  <div onClick={() => {
+                    setSyncView('StandardMode')
                   }}>
                     <img src={ImageUrl.icon43} alt="" />
                     <span>标准模式</span>
                   </div>
                   <div onClick={() => {
-                    setModeOpen(false)
-                    storage.setItem('meetingMode', 'SpeakerMode')
+                    setSyncView('SpeakerMode')
                   }}>
                     <img src={ImageUrl.icon44} alt="" />
                     <span>演讲模式</span>
@@ -2803,10 +2875,14 @@ const Meeting: React.FC = () => {
               onOpenChange={() => setModeOpen(true)}
             >
               <div className={styles.meetingGrayButton}>
-                {meetingMode === 'StandardMode' ? <img src={ImageUrl.icon43} alt="" /> : <img src={ImageUrl.icon44} alt="" />}
+                {meetingMode === 'StandardMode' ?
+                  <img src={ImageUrl.icon43} alt="" /> :
+                  meetingMode === 'FreedomMode' ?
+                    <img src={ImageUrl.icon57} alt="" /> :
+                    <img src={ImageUrl.icon44} alt="" />}
                 <span>{getMeetingContentBodyLeftModeText()}</span>
               </div>
-            </Popover>
+            </Popover> : null}
             <Operation></Operation>
           </div>
         </div>
@@ -2814,7 +2890,7 @@ const Meeting: React.FC = () => {
           <div className={styles.meetingContentBody}>
             <div className={`${styles.meetingContentBodyLeft} drag`}>
               {isAdmin && currentLookUserAccount ? getSettingIcon() : null}
-              <div className={getMeetingContentBodyLeftModeClass()} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
+              <div className={getMeetingContentBodyLeftModeClass(isAdmin)} id='videoView' style={meetingMode === 'SpeakerMode' && isVideoFullScreen ? { width: '0' } : {}}>
                 {roomUserList.map((item: any, index: number) => {
                   return (item.isRoom && item.isAdmin ? <div
                     id={item.uid}
@@ -2939,7 +3015,13 @@ const Meeting: React.FC = () => {
                   </div> : null)
                 }
                 )}
-                {hasScrollbar() ? <div>
+                {/* <div className={`${styles.meetingContentSwiperCard}`}>
+                  <div className={`${styles.meetingContentSwiperCardVdeio}`}>
+                    <div className={styles.meetingContentSwiperCardVdeioLoading}>
+                    </div>
+                  </div>
+                </div> */}
+                {meetingMode !== "FreedomMode" && hasScrollbar() ? <div>
                   {meetingMode === "StandardMode" ? <div className={`${styles.meetingContentSwiperCaret}`} style={{ left: '20px', top: '66px' }} onClick={() => {
                     const container = document.getElementById('videoView') as HTMLElement;
                     container.scrollLeft -= 100
@@ -2963,7 +3045,7 @@ const Meeting: React.FC = () => {
                     <CaretDownOutlined />
                   </div>}
                 </div> : null}
-                {currentLookUserStatus === 0 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 0 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                       {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@@ -2974,7 +3056,7 @@ const Meeting: React.FC = () => {
                       <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
-                {currentLookUserStatus === 1 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 1 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-camera-primary'>
                       {<div className={styles.meetingContentSwiperCardVdeioLoading}>
@@ -2986,7 +3068,7 @@ const Meeting: React.FC = () => {
                     {meetingContentUser(currentLookUserAccount, true)}
                     {currentLookUserAccount.enableCamera ? null : meetingContentError(currentLookUserAccount)}
                   </div> : null}
-                {currentLookUserStatus === 2 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 2 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-screen'>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
@@ -2997,7 +3079,7 @@ const Meeting: React.FC = () => {
                       <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
-                {currentLookUserStatus === 3 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 3 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-screen'>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
@@ -3008,7 +3090,7 @@ const Meeting: React.FC = () => {
                       <FullscreenOutlined className={styles.meetingContentSwiperCardFullScreenIcon} title='全屏' onClick={() => setIsVideoFullScreen(true)} />}
                     {meetingContentUser(currentLookUserAccount, true)}
                   </div> : null}
-                {currentLookUserStatus === 4 ?
+                {meetingMode !== "FreedomMode" && currentLookUserStatus === 4 ?
                   <div className={`${styles.meetingContentSwiperCard} ${setMeetingContentSwiperCardClass()} ${setMeetingContentSwiperCardFullScreenClass()}`}>
                     <div className={`${styles.meetingContentSwiperCardVdeio}`} id='video-source-remote-camera'>
                       <div className={styles.meetingContentSwiperCardVdeioLoading}>
diff --git a/src/utils/package/imageUrl.ts b/src/utils/package/imageUrl.ts
index 2c349a4..7cbd15c 100644
--- a/src/utils/package/imageUrl.ts
+++ b/src/utils/package/imageUrl.ts
@@ -86,6 +86,7 @@ import icon54 from '@/assets/icon54.png'
 import icon55 from '@/assets/icon55.png'
 import icon56 from '@/assets/icon56.png'
 import icon56Active from '@/assets/icon56-active.png'
+import icon57 from '@/assets/icon57.png'
 export default {
   loading,
   icon,
@@ -174,5 +175,6 @@ export default {
   icon54,
   icon55,
   icon56,
-  icon56Active
+  icon56Active,
+  icon57,
 }
\ No newline at end of file

From 621ef06abab8f8b45ceb41fb96a6ef206ea6859f Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 16:50:10 +0800
Subject: [PATCH 2/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 50 ++++++++++++++++++++------------------
 1 file changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 1cddf82..cbf62bf 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -1591,7 +1591,7 @@ const Meeting: React.FC = () => {
       });
       const peoPleLength = res.filter((item: any) => (role.ID.includes(item.roleId) || item.isRoomManager) && item.isRoom).length
       setIsAdmin(peoPleLength)
-      if (peoPleLength >= 6) {
+      if (peoPleLength > 6) {
         setMeetingMode('StandardMode')
       }
       return res
@@ -2619,29 +2619,33 @@ const Meeting: React.FC = () => {
   }
   // 设置模式
   const setSyncView = (mode: string) => {
-    confirm({
-      title: '提示',
-      icon: <ExclamationCircleFilled />,
-      content: `是否将当前房间切换为${getMeetingContentBodyLeftModeText(mode)}?`,
-      centered: true,
-      okText: '确定',
-      cancelText: '取消',
-      async onOk() {
-        await window.electron.onInvoke('sendOper2User', {
-          uid: userInfo.uid,
-          contentString: JSON.stringify({
-            mode,
-            type: 'mode'
+    if (isShare && mode === 'FreedomMode') {
+      message.error('共享中，无法切换模式')
+    } else {
+      confirm({
+        title: '提示',
+        icon: <ExclamationCircleFilled />,
+        content: `是否将当前房间切换为${getMeetingContentBodyLeftModeText(mode)}?`,
+        centered: true,
+        okText: '确定',
+        cancelText: '取消',
+        async onOk() {
+          await window.electron.onInvoke('sendOper2User', {
+            uid: userInfo.uid,
+            contentString: JSON.stringify({
+              mode,
+              type: 'mode'
+            })
           })
-        })
-        setModeOpen(false)
-        storage.setItem('meetingMode', mode)
-      },
-      onCancel() {
-        setModeOpen(false)
-        storage.setItem('meetingMode', mode)
-      }
-    })
+          setModeOpen(false)
+          storage.setItem('meetingMode', mode)
+        },
+        onCancel() {
+          setModeOpen(false)
+          storage.setItem('meetingMode', mode)
+        }
+      })
+    }
   }
   // 判断是否出现滚动条
   const hasScrollbar = () => {

From 15233cf8de5e43145edb25b864ccdba4acd49ac3 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 16:56:35 +0800
Subject: [PATCH 3/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index cbf62bf..aedd97b 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -727,7 +727,13 @@ const Meeting: React.FC = () => {
           break;
         // 扩展操作
         case 'Operation':
-          switch (item.contentString) {
+          try {
+            const temp = JSON.parse(item.contentString)
+            if (temp.type === 'mode') {
+              message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`)
+              setMeetingMode(temp.mode)
+            }
+          } catch (error) {
 
           }
           break;
@@ -1001,9 +1007,6 @@ const Meeting: React.FC = () => {
                 uid: temp.uid,
                 enableCamera: temp.enableCamera
               })
-            } else if (temp.type === 'mode') {
-              message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`)
-              setMeetingMode(temp.mode)
             }
           } catch (error) {
 
@@ -2630,8 +2633,8 @@ const Meeting: React.FC = () => {
         okText: '确定',
         cancelText: '取消',
         async onOk() {
-          await window.electron.onInvoke('sendOper2User', {
-            uid: userInfo.uid,
+          await window.electron.onInvoke('sendOper', {
+            roomNum: state.channelId,
             contentString: JSON.stringify({
               mode,
               type: 'mode'

From c2ce66ed0d552dbc29c5626117a8e9dadf48f7ba Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 17:09:09 +0800
Subject: [PATCH 4/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index aedd97b..14813b0 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -224,6 +224,7 @@ const Meeting: React.FC = () => {
   const channel = new BroadcastChannel('meeting_channel');
   let storeDevice: any;
   let agoraTime: NodeJS.Timeout;
+  let FreedomModeStatus = false
   useEffect(() => {
     window.electron.createChildWindow('hide')
     let time: NodeJS.Timeout;
@@ -642,6 +643,17 @@ const Meeting: React.FC = () => {
     }
   }, [isShare, roomUserList]);
 
+  useEffect(() => {
+    if (meetingMode === 'FreedomMode') {
+      FreedomModeStatus = true;
+    } else {
+      if (FreedomModeStatus) {
+        FreedomModeStatus = false;
+        getShowUser()
+      }
+    }
+  }, [meetingMode]);
+
   useEffect(() => {
     roomUserList.forEach(async (item: any) => {
       if (meetingMode === "FreedomMode") {
@@ -2251,9 +2263,6 @@ const Meeting: React.FC = () => {
   const handleCustomStorageChange = async (e: any): Promise<void> => {
     switch (e.key) {
       case 'meetingMode':
-        if (e.value !== 'FreedomMode') {
-          await getShowUser()
-        }
         setMeetingMode(e.value)
         break;
       case 'quitMeeting':

From 58542e80b309c7d353eb9933008b424a75e34ca5 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 17:31:16 +0800
Subject: [PATCH 5/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 40 +++++++++++++++++++++-----------------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 14813b0..0af3e37 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -217,6 +217,7 @@ const Meeting: React.FC = () => {
     }
   });
   const [isVideoFullScreen, setIsVideoFullScreen] = useState<boolean>(false)
+  const [freedomModeStatus, setFreedomModeStatus] = useState<boolean>(false)
   const [observer, setObserver] = useState<IntersectionObserver>()
   const [_activeSpeaker, setActiveSpeaker] = useState('')
   let userInfo = JSON.parse(storage.getItem('user') as string)
@@ -224,7 +225,6 @@ const Meeting: React.FC = () => {
   const channel = new BroadcastChannel('meeting_channel');
   let storeDevice: any;
   let agoraTime: NodeJS.Timeout;
-  let FreedomModeStatus = false
   useEffect(() => {
     window.electron.createChildWindow('hide')
     let time: NodeJS.Timeout;
@@ -644,14 +644,16 @@ const Meeting: React.FC = () => {
   }, [isShare, roomUserList]);
 
   useEffect(() => {
-    if (meetingMode === 'FreedomMode') {
-      FreedomModeStatus = true;
-    } else {
-      if (FreedomModeStatus) {
-        FreedomModeStatus = false;
-        getShowUser()
+    setFreedomModeStatus((res: boolean) => {
+      if (meetingMode === 'FreedomMode') {
+        return true
+      } else {
+        if (res) {
+          getShowUser(true)
+        }
+        return false
       }
-    }
+    })
   }, [meetingMode]);
 
   useEffect(() => {
@@ -1740,16 +1742,18 @@ const Meeting: React.FC = () => {
     })
   }
   // 渲染视频
-  const renderVideo = async (uid: string = ''): Promise<void> => {
-    if (isClickLock) {
-      return
-    }
-    if (uid) {
-      if (currentVideoId === uid || currentVideoUid === uid) {
+  const renderVideo = async (uid: string = '', bool: boolean = false): Promise<void> => {
+    if (!bool) {
+      if (isClickLock) {
         return
       }
-    } else {
-      uid = userInfo.uid
+      if (uid) {
+        if (currentVideoId === uid || currentVideoUid === uid) {
+          return
+        }
+      } else {
+        uid = userInfo.uid
+      }
     }
     await agora.destroyRendererByView(`video-source-camera-primary`)
     await agora.destroyRendererByView(`video-source-screen`)
@@ -1787,11 +1791,11 @@ const Meeting: React.FC = () => {
     }, 500);
   }
   // 全员观看
-  const getShowUser = async (): Promise<void> => {
+  const getShowUser = async (bool: boolean = false): Promise<void> => {
     if (location.href.indexOf('/meeting') !== -1) {
       await GetShowUser(state.channelId).then(async (res) => {
         if (res.code === 200 && res.data) {
-          renderVideo(res.data)
+          renderVideo(res.data, bool)
         }
       })
     }

From 883525787d3c4622c7ab2ef61b10e7e0fad5b473 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 17:45:57 +0800
Subject: [PATCH 6/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 0af3e37..b31755e 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -743,7 +743,7 @@ const Meeting: React.FC = () => {
         case 'Operation':
           try {
             const temp = JSON.parse(item.contentString)
-            if (temp.type === 'mode') {
+            if (temp.type === 'mode' && temp.msg) {
               message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`)
               setMeetingMode(temp.mode)
             }
@@ -776,7 +776,6 @@ const Meeting: React.FC = () => {
               }
             }
           }
-          setMeetingMode('StandardMode')
           getShowUser()
           break;
         // 用户加入频道回调
@@ -2175,6 +2174,14 @@ const Meeting: React.FC = () => {
       await PostStopSharedScreen(state.channelId)
     } else {
       await PostShowUser(state.channelId, uid, name)
+      await window.electron.onInvoke('sendOper', {
+        roomNum: state.channelId,
+        contentString: JSON.stringify({
+          mode: 'StandardMode',
+          type: 'mode',
+          msg: false
+        })
+      })
     }
   }
   // 设置发言人
@@ -2650,7 +2657,8 @@ const Meeting: React.FC = () => {
             roomNum: state.channelId,
             contentString: JSON.stringify({
               mode,
-              type: 'mode'
+              type: 'mode',
+              msg: true,
             })
           })
           setModeOpen(false)

From 76e37eff1df94e6b62220304e947a8e778d66f6d Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Mon, 17 Mar 2025 17:50:33 +0800
Subject: [PATCH 7/9] =?UTF-8?q?=E5=8E=BB=E9=99=A4=E5=A4=9A=E4=BD=99?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index b31755e..4dd3251 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -217,7 +217,7 @@ const Meeting: React.FC = () => {
     }
   });
   const [isVideoFullScreen, setIsVideoFullScreen] = useState<boolean>(false)
-  const [freedomModeStatus, setFreedomModeStatus] = useState<boolean>(false)
+  const [_freedomModeStatus, setFreedomModeStatus] = useState<boolean>(false)
   const [observer, setObserver] = useState<IntersectionObserver>()
   const [_activeSpeaker, setActiveSpeaker] = useState('')
   let userInfo = JSON.parse(storage.getItem('user') as string)

From 26ae33e0aaee1c859b892b86201e2ec23cde7eb9 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Tue, 18 Mar 2025 10:37:17 +0800
Subject: [PATCH 8/9] =?UTF-8?q?bug=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 4dd3251..3123734 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -743,8 +743,8 @@ const Meeting: React.FC = () => {
         case 'Operation':
           try {
             const temp = JSON.parse(item.contentString)
-            if (temp.type === 'mode' && temp.msg) {
-              message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`)
+            if (temp.type === 'mode') {
+              temp.msg ? message.success(`管理员已将会议室显示模式更新为${getMeetingContentBodyLeftModeText(temp.mode)}`) : null;
               setMeetingMode(temp.mode)
             }
           } catch (error) {

From 2faafe86477ddb6bf048316cb92b646bde2879c2 Mon Sep 17 00:00:00 2001
From: yj <1336058017@qq.com>
Date: Wed, 19 Mar 2025 17:17:18 +0800
Subject: [PATCH 9/9] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/page/Meeting/index.module.scss | 76 ++++++++++++++++-------
 src/page/Meeting/index.tsx         | 96 +++++++++++++++---------------
 2 files changed, 101 insertions(+), 71 deletions(-)

diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss
index b5bfa47..1f2409d 100644
--- a/src/page/Meeting/index.module.scss
+++ b/src/page/Meeting/index.module.scss
@@ -1029,40 +1029,72 @@
   }
 
   .modePopover {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     >div {
-      width: 140px;
-      height: 30px;
-      line-height: 30px;
-      border-radius: 5px;
-      margin-bottom: 8px;
-      cursor: pointer;
       display: flex;
       align-items: center;
-      justify-content: center;
 
-      >span {
-        color: #EEEEEE;
+      >div {
+        width: 100px;
+        padding: 10px 0;
+        line-height: 30px;
+        border-radius: 5px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        margin-right: 20px;
+
+        >span {
+          color: #EEEEEE;
+        }
+
+        >img {
+          height: 30px;
+          margin-bottom: 4px;
+        }
       }
 
-      >img {
-        height: 16px;
-        margin-right: 10px;
+      >div {
+        background-color: #101418;
+
+        &:hover {
+          background-color: lighten(#101418, 4%);
+        }
+
+        &:active {
+          background-color: darken(#101418, 4%);
+        }
       }
 
-      &:last-child {
-        margin: 0;
+      .active {
+        background-color: lighten(#101418, 8%);
+        cursor: not-allowed;
+
+        &:hover {
+          background-color: lighten(#101418, 8%);
+        }
+
+        &:active {
+          background-color: lighten(#101418, 8%);
+        }
+      }
+
+      :last-child {
+        margin-right: 0px;
       }
     }
 
-    >div {
-      background-color: #101418;
+    >span {
+      margin-top: 4px;
+      color: white;
 
-      &:hover {
-        background-color: lighten(#101418, 4%);
-      }
-
-      &:active {
-        background-color: darken(#101418, 4%);
+      >span {
+        margin-left: 4px;
       }
     }
   }
diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx
index 3123734..75e7f91 100644
--- a/src/page/Meeting/index.tsx
+++ b/src/page/Meeting/index.tsx
@@ -2642,34 +2642,28 @@ const Meeting: React.FC = () => {
   }
   // 设置模式
   const setSyncView = (mode: string) => {
-    if (isShare && mode === 'FreedomMode') {
-      message.error('共享中，无法切换模式')
-    } else {
-      confirm({
-        title: '提示',
-        icon: <ExclamationCircleFilled />,
-        content: `是否将当前房间切换为${getMeetingContentBodyLeftModeText(mode)}?`,
-        centered: true,
-        okText: '确定',
-        cancelText: '取消',
-        async onOk() {
-          await window.electron.onInvoke('sendOper', {
-            roomNum: state.channelId,
-            contentString: JSON.stringify({
-              mode,
-              type: 'mode',
-              msg: true,
-            })
-          })
-          setModeOpen(false)
-          storage.setItem('meetingMode', mode)
-        },
-        onCancel() {
-          setModeOpen(false)
-          storage.setItem('meetingMode', mode)
-        }
-      })
+    if (meetingMode === mode) {
+      setModeOpen(false)
+      return message.error(`${getMeetingContentBodyLeftModeText(mode)}已开启，请勿重复操作!`)
     }
+    if (isAdmin > 6 && mode === 'FreedomMode') {
+      setModeOpen(false)
+      return message.error('发言人数超过6人,无法使用宫格模式!')
+    }
+    if (isShare && mode === 'FreedomMode') {
+      setModeOpen(false)
+      return message.error('共享中，无法切换模式')
+    }
+    window.electron.onInvoke('sendOper', {
+      roomNum: state.channelId,
+      contentString: JSON.stringify({
+        mode,
+        type: 'mode',
+        msg: true,
+      })
+    })
+    setModeOpen(false)
+    storage.setItem('meetingMode', mode)
   }
   // 判断是否出现滚动条
   const hasScrollbar = () => {
@@ -2700,6 +2694,9 @@ const Meeting: React.FC = () => {
     <>
       <div className={styles.meeting} onClick={() => {
         setContextMenu('')
+        if (modeOpen) {
+          setModeOpen(false)
+        }
         setIsNetworkQuality(false)
       }}>
         {isScreenCapture ? <div className={`${styles.meetingAbsolute}`} id='meetingAbsoluteVideo'>
@@ -2872,29 +2869,30 @@ const Meeting: React.FC = () => {
             {role.ID.includes(userInfo.roleId) ? <Popover
               content={
                 <div className='modePopover'>
-                  <div onClick={() => {
-                    setSyncView('FreedomMode')
-                  }}>
-                    <img src={ImageUrl.icon57} alt="" />
-                    <span>宫格模式</span>
-                  </div>
-                  <div onClick={() => {
-                    setSyncView('StandardMode')
-                  }}>
-                    <img src={ImageUrl.icon43} alt="" />
-                    <span>标准模式</span>
-                  </div>
-                  <div onClick={() => {
-                    setSyncView('SpeakerMode')
-                  }}>
-                    <img src={ImageUrl.icon44} alt="" />
-                    <span>演讲模式</span>
-                  </div>
-                  <div onClick={() => {
-                    setModeOpen(false)
-                  }}>
-                    <span>取消</span>
+                  <div>
+                    <div className={meetingMode === 'FreedomMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('FreedomMode')
+                    }}>
+                      <img src={ImageUrl.icon57} alt="" />
+                      <span>宫格模式</span>
+                    </div>
+                    <div className={meetingMode === 'StandardMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('StandardMode')
+                    }}>
+                      <img src={ImageUrl.icon43} alt="" />
+                      <span>标准模式</span>
+                    </div>
+                    <div className={meetingMode === 'SpeakerMode' ? 'active' : ''} onClick={() => {
+                      setSyncView('SpeakerMode')
+                    }}>
+                      <img src={ImageUrl.icon44} alt="" />
+                      <span>演讲模式</span>
+                    </div>
                   </div>
+                  <span>
+                    <ExclamationCircleFilled />
+                    <span>改变布局将对所有成员生效</span>
+                  </span>
                 </div>
               }
               title=""