src/page/Meeting/index.module.scss

@@ -1029,28 +1029,33 @@
   }
 
   .modePopover {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
     >div {
-      width: 140px;
-      height: 30px;
+      display: flex;
+      align-items: center;
+
+      >div {
+        width: 100px;
+        padding: 10px 0;
         line-height: 30px;
         border-radius: 5px;
-      margin-bottom: 8px;
         cursor: pointer;
         display: flex;
         align-items: center;
+        flex-direction: column;
         justify-content: center;
+        margin-right: 20px;
 
         >span {
           color: #EEEEEE;
         }
 
         >img {
-        height: 16px;
-        margin-right: 10px;
-      }
-
-      &:last-child {
-        margin: 0;
+          height: 30px;
+          margin-bottom: 4px;
         }
       }
 
@@ -1065,6 +1070,33 @@
           background-color: darken(#101418, 4%);
         }
       }
+
+      .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;
+      }
+    }
+
+    >span {
+      margin-top: 4px;
+      color: white;
+
+      >span {
+        margin-left: 4px;
+      }
+    }
   }
 
 }

src/page/Meeting/index.tsx

@@ -2642,18 +2642,19 @@ const Meeting: React.FC = () => {
   }
   // 设置模式
   const setSyncView = (mode: string) => {
+    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') {
-      message.error('共享中，无法切换模式')
-    } else {
-      confirm({
-        title: '提示',
-        icon: <ExclamationCircleFilled />,
-        content: `是否将当前房间切换为${getMeetingContentBodyLeftModeText(mode)}?`,
-        centered: true,
-        okText: '确定',
-        cancelText: '取消',
-        async onOk() {
-          await window.electron.onInvoke('sendOper', {
+      setModeOpen(false)
+      return message.error('共享中，无法切换模式')
+    }
+    window.electron.onInvoke('sendOper', {
       roomNum: state.channelId,
       contentString: JSON.stringify({
         mode,
@@ -2663,13 +2664,6 @@ const Meeting: React.FC = () => {
     })
     setModeOpen(false)
     storage.setItem('meetingMode', mode)
-        },
-        onCancel() {
-          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>
+                    <div className={meetingMode === 'FreedomMode' ? 'active' : ''} onClick={() => {
                       setSyncView('FreedomMode')
                     }}>
                       <img src={ImageUrl.icon57} alt="" />
                       <span>宫格模式</span>
                     </div>
-                  <div onClick={() => {
+                    <div className={meetingMode === 'StandardMode' ? 'active' : ''} onClick={() => {
                       setSyncView('StandardMode')
                     }}>
                       <img src={ImageUrl.icon43} alt="" />
                       <span>标准模式</span>
                     </div>
-                  <div onClick={() => {
+                    <div className={meetingMode === 'SpeakerMode' ? 'active' : ''} onClick={() => {
                       setSyncView('SpeakerMode')
                     }}>
                       <img src={ImageUrl.icon44} alt="" />
                       <span>演讲模式</span>
                     </div>
-                  <div onClick={() => {
-                    setModeOpen(false)
-                  }}>
-                    <span>取消</span>
                   </div>
+                  <span>
+                    <ExclamationCircleFilled />
+                    <span>改变布局将对所有成员生效</span>
+                  </span>
                 </div>
               }
               title=""