优化

src/page/Home/Index/index.module.scss

@@ -66,7 +66,7 @@
 
       .indexContentListItem {
         border: 1px solid #353741;
-        margin-bottom: 34px;
+        margin-bottom: 24px;
         background-color: #1E1E1F;
         width: calc(98% / 3);
         padding: 20px 16px;

src/page/Home/Index/index.tsx

@@ -139,8 +139,8 @@ const Index: React.FC = () => {
                 </div>
               )
             })}
-            <div style={{ visibility: 'hidden' }} className={`${styles.indexContentListItem} drag`}></div>
-            <div style={{ visibility: 'hidden' }} className={`${styles.indexContentListItem} drag`}></div>
+            <div style={{ display: 'none' }} className={`${styles.indexContentListItem} drag`}></div>
+            <div style={{ display: 'none' }} className={`${styles.indexContentListItem} drag`}></div>
           </div> :
             <div className={styles.indexContentEmpty}>
               <Empty />

src/page/Meeting/index.tsx

@@ -4,7 +4,7 @@ import Operation from '@/components/Operation';
 import SpeakerModeModal from '@/components/SpeakerModeModal';
 import InvitingPersonnelModal from '@/components/InvitingPersonnelModal';
 import { Button, Input, Popover, Modal, Checkbox, message, Popconfirm } from "antd";
-import { SearchOutlined, EllipsisOutlined } from '@ant-design/icons';
+import { SearchOutlined, EllipsisOutlined, ExclamationCircleFilled } from '@ant-design/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { thumbImageBufferToBase64 } from '@/utils/package/base64'
 import { storage } from '@/utils';
@@ -18,6 +18,7 @@ import { VideoSourceType } from 'agora-electron-sdk';
 import Avatar from '@/components/Avatar';
 import SharedFilesModel from '@/components/SharedFilesModel';
 import StupWizard from '@/components/StupWizard';
+const { confirm } = Modal;
 const { exec } = require('child_process');
 const fs = require('fs').promises;
 dayjs.extend(durationPlugin);
@@ -379,7 +380,7 @@ const Meeting: React.FC = () => {
       });
     }
     setRoomUserList((res: any) => {
-      res.forEach((item: any) => {
+      res.forEach(async (item: any) => {
         if (item.roleId === '1') {
           item.role = 'admin'
         } else if (item.isRoomManager) {
@@ -394,8 +395,8 @@ const Meeting: React.FC = () => {
           footerListTemplate[0][1].title = item.enableCamera ? '关闭视频' : '开启视频'
           footerListTemplate[0][1].active = !item.enableCamera
           setFooterList(footerListTemplate)
-          agora.muteLocalAudioStream(!item.enableMicr)
-          agora.muteLocalVideoStream(!item.enableCamera)
+          await agora.muteLocalAudioStream(!item.enableMicr)
+          await agora.muteLocalVideoStream(!item.enableCamera)
         }
         if (userSearchValue) {
           if (item.userName.indexOf(userSearchValue) !== -1) {
@@ -736,9 +737,9 @@ const Meeting: React.FC = () => {
           item.isShow = true;
         })
         setRoomUserList(res.data)
-        changeAgoraDevice()
-        getUserRoomInfo().then(res => {
-          agora.updateChannelMediaOptions(res ? true : false)
+        getUserRoomInfo().then(async (res) => {
+          await agora.updateChannelMediaOptions(res ? true : false)
+          changeAgoraDevice()
         })
       }
     })
@@ -940,6 +941,20 @@ const Meeting: React.FC = () => {
       allUserLook(item.uid)
     }
   }
+  // 移出房间
+  const getRoomKickout = async (channelId: string, uid: string, userName: string): Promise<void> => {
+    confirm({
+      title: '移出会议',
+      icon: <ExclamationCircleFilled />,
+      content: `确定将用户${userName}移出会议？`,
+      centered: true,
+      async onOk() {
+        await GetRoomKickout(channelId, uid)
+      },
+      onCancel() {
+      },
+    });
+  }
   return (
     <>
       <div className={styles.meeting} onClick={() => {
@@ -1034,7 +1049,7 @@ const Meeting: React.FC = () => {
                           size={'small'}
                           onClick={(event) => {
                             event.stopPropagation();
-                            GetRoomKickout(state.channelId, item.uid)
+                            getRoomKickout(state.channelId, item.uid, item.userName)
                           }}
                         >移出会议</Button> : null}
                         {item.uid !== user.uid ? <Button
@@ -1234,7 +1249,7 @@ const Meeting: React.FC = () => {
                                         style={{ width: '100%' }}
                                         size={'small'}
                                         onClick={() => {
-                                          GetRoomKickout(state.channelId, item.uid)
+                                          getRoomKickout(state.channelId, item.uid, item.userName)
                                         }}
                                       >移出会议</Button>
                                     </div>
@@ -1303,7 +1318,7 @@ const Meeting: React.FC = () => {
                                     size={'small'}
                                     onClick={(event) => {
                                       event.stopPropagation();
-                                      GetRoomKickout(state.channelId, roomUserItem.uid)
+                                      getRoomKickout(state.channelId, roomUserItem.uid, roomUserItem.userName)
                                     }}
                                   >移出会议</Button> : null}
                                   {roomUserItem.uid !== user.uid ? <Button

src/utils/package/agora.ts

@@ -226,12 +226,12 @@ const agora = {
     rtcEngine.enableLoopbackRecording(false)
   },
   // 取消或恢复发布本地音频流
-  muteLocalAudioStream: (mute: any) => {
-    rtcEngine.muteLocalAudioStream(mute)
+  muteLocalAudioStream: async (mute: any) => {
+    await rtcEngine.muteLocalAudioStream(mute)
   },
   // 取消或恢复发布本地视频流
-  muteLocalVideoStream: (mute: any) => {
-    rtcEngine.muteLocalVideoStream(mute)
+  muteLocalVideoStream: async (mute: any) => {
+    await rtcEngine.muteLocalVideoStream(mute)
   },
   // 摄像头采集
   startCameraCapture: async () => {

src/utils/styles/App.scss

@@ -286,6 +286,14 @@ $pagination-hover-background-color: #5575F2;
       overflow-y: auto;
     }
   }
+
+  .ant-modal-confirm-title {
+    color: white;
+  }
+
+  .ant-modal-confirm-content {
+    color: white;
+  }
 }
 
 .modal-padding {