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 {
+      >div {
-        color: #EEEEEE;
+        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 {
+      >div {
-        height: 16px;
+        background-color: #101418;
-        margin-right: 10px;
+
+        &:hover {
+          background-color: lighten(#101418, 4%);
+        }
+
+        &:active {
+          background-color: darken(#101418, 4%);
+        }
       }
 
-      &:last-child {
+      .active {
-        margin: 0;
+        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 {
+    >span {
-      background-color: #101418;
+      margin-top: 4px;
+      color: white;
 
-      &:hover {
+      >span {
-        background-color: lighten(#101418, 4%);
+        margin-left: 4px;
-      }
-
-      &:active {
-        background-color: darken(#101418, 4%);
       }
     }
   }

src/page/Meeting/index.tsx

@@ -2642,34 +2642,28 @@ const Meeting: React.FC = () => {
   }
   // 设置模式
   const setSyncView = (mode: string) => {
-    if (isShare && mode === 'FreedomMode') {
+    if (meetingMode === mode) {
-      message.error('共享中，无法切换模式')
+      setModeOpen(false)
-    } else {
+      return message.error(`${getMeetingContentBodyLeftModeText(mode)}已开启，请勿重复操作!`)
-      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 (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={() => {
+                  <div>
-                    setSyncView('FreedomMode')
+                    <div className={meetingMode === 'FreedomMode' ? 'active' : ''} onClick={() => {
-                  }}>
+                      setSyncView('FreedomMode')
-                    <img src={ImageUrl.icon57} alt="" />
+                    }}>
-                    <span>宫格模式</span>
+                      <img src={ImageUrl.icon57} alt="" />
-                  </div>
+                      <span>宫格模式</span>
-                  <div onClick={() => {
+                    </div>
-                    setSyncView('StandardMode')
+                    <div className={meetingMode === 'StandardMode' ? 'active' : ''} onClick={() => {
-                  }}>
+                      setSyncView('StandardMode')
-                    <img src={ImageUrl.icon43} alt="" />
+                    }}>
-                    <span>标准模式</span>
+                      <img src={ImageUrl.icon43} alt="" />
-                  </div>
+                      <span>标准模式</span>
-                  <div onClick={() => {
+                    </div>
-                    setSyncView('SpeakerMode')
+                    <div className={meetingMode === 'SpeakerMode' ? 'active' : ''} onClick={() => {
-                  }}>
+                      setSyncView('SpeakerMode')
-                    <img src={ImageUrl.icon44} alt="" />
+                    }}>
-                    <span>演讲模式</span>
+                      <img src={ImageUrl.icon44} alt="" />
-                  </div>
+                      <span>演讲模式</span>
-                  <div onClick={() => {
+                    </div>
-                    setModeOpen(false)
-                  }}>
-                    <span>取消</span>
                   </div>
+                  <span>
+                    <ExclamationCircleFilled />
+                    <span>改变布局将对所有成员生效</span>
+                  </span>
                 </div>
               }
               title=""