优化

src/components/InvitingPersonnelModal/index.tsx

@@ -77,7 +77,6 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
       })
     ]).then(res => {
       if (res[0].code === 200 && res[1].code === 200) {
-        res[1].data.items.splice(res[1].data.items.findIndex((item: any) => item.uid === userInfo.uid), 1)
         setList({
           ...list,
           total: res[1].data.total,
@@ -149,7 +148,7 @@ const InvitingPersonnelModal = forwardRef((props: any, ref: any) => {
                       })
                     }} disabled={!item.isOnline || item.account === userInfo.account || item.disabled} checked={item.checked}></Checkbox>
                     <div><Avatar name={item.userName} /></div>
-                    <span>{item.userName}{item.disabled ? '(已入会)' : ''}</span>
+                    <span>{item.userName}{item.account === userInfo.account ? '(我)' : ''}{item.disabled ? '(已入会)' : ''}</span>
                   </div>
                   <div style={{ color: item.isOnline ? '#02B188' : 'rgb(221 11 11)' }}>{item.isOnline ? '在线' : '离线'}</div>
                 </div>) : <span style={{ display: 'block', textAlign: 'center', color: 'white', padding: '30px 0' }}>暂无数据</span>}

src/page/Meeting/index.module.scss

@@ -349,7 +349,6 @@
               position: relative;
               padding: 10px 20px;
               box-sizing: border-box;
-              cursor: pointer;
 
               >div:nth-child(1) {
                 display: flex;
@@ -370,49 +369,26 @@
                 display: flex;
                 align-items: center;
 
-                >img {
-                  width: 20px;
-                  margin-left: 4px;
-                }
-              }
-
-              >div:nth-child(3) {
-                position: absolute;
-                top: 50px;
-                left: 50%;
-                transform: translate(-50%, 0);
-                width: 160px;
-                z-index: 1;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                flex-direction: column;
-                display: none;
-                background-color: rgb(16, 19, 23);
-                padding: 20px 0;
-
                 >div {
-                  margin: 0 auto;
+                  height: 30px;
-                }
+                  width: 30px;
+                  cursor: pointer;
+                  display: flex;
+                  justify-content: center;
+                  align-items: center;
 
-                &::after {
+                  >img {
-                  content: "";
+                    width: 20px;
-                  position: absolute;
+                  }
-                  top: 0;
+
-                  left: 50%;
+                  &:hover {
-                  transform: translateX(-50%);
+                    background-color: rgba(0, 0, 0, 0.5);
-                  border-width: 0 10px 10px;
+                  }
-                  border-style: solid;
-                  border-color: transparent transparent #333;
                 }
               }
 
               &:hover {
                 background-color: rgb(52, 52, 52);
-
-                >div:nth-child(3) {
-                  display: flex;
-                }
               }
             }
           }
@@ -710,6 +686,20 @@
       }
     }
   }
+
+}
+
+.meetingContentSwiperCardPopover {
+  display: flex;
+  flex-direction: column;
+
+  >button {
+    margin-bottom: 4px;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
 }
 
 // 共享屏幕

src/page/Meeting/index.tsx

@@ -546,14 +546,12 @@ const Meeting: React.FC = () => {
         footerListTemplate[itemIndex][rowIndex].active = true
         setFooterList(footerListTemplate)
         await postOpenCamera(false, user.uid)
-        await agora.stopCameraCapture();
         break;
       case '开启视频':
         footerListTemplate[itemIndex][rowIndex].title = '关闭视频'
         footerListTemplate[itemIndex][rowIndex].active = false
         setFooterList(footerListTemplate)
         await postOpenCamera(true, user.uid)
-        await agora.startCameraCapture()
         break;
       case '设置':
         stupWizardRef.current.changeModal()
@@ -732,6 +730,11 @@ const Meeting: React.FC = () => {
   }
   // 开关视频
   const postOpenCamera = async (enableCamera: boolean, uid: string): Promise<void> => {
+    if (enableCamera) {
+      await agora.startCameraCapture()
+    } else {
+      await agora.stopCameraCapture();
+    }
     await PostOpenCamera({
       roomNum: state.channelId,
       uid,
@@ -889,13 +892,72 @@ const Meeting: React.FC = () => {
                     {String(isShare) === item.screenShareId ? <div className={styles.meetingContentSwiperCardShare}>
                       屏幕分享中
                     </div> : null}
-                    <Popover placement="top" title={''} content={
+                    <Popover placement="bottom" title={''} content={
-                      <div>
+                      <div className={styles.meetingContentSwiperCardPopover}>
                         <Button
                           type="primary"
                           className='m-ant-btn'
-                          onClick={() => setAllUserLook(item)}
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            setAllUserLook(item)
+                          }}
                         >全员看Ta</Button>
+                        {item.uid !== user.uid ? <Button
+                          type="primary"
+                          className='m-ant-btn'
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            GetRoomKickout(state.channelId, item.id).then(res => {
+                              if (res.code === 200) {
+                                onInvoke('sendOper', {
+                                  roomNum: state.channelId,
+                                  type: 3,
+                                })
+                              }
+                            })
+                          }}
+                        >踢出房间</Button> : null}
+                        {item.uid !== user.uid && user.roleId === '1' ? <Button
+                          type="primary"
+                          className='m-ant-btn'
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            if (item.isRoomManager) {
+                              DeleteRoomManager({
+                                roomId: state.roomId,
+                                roomNum: state.channelId,
+                                userId: item.uid
+                              })
+                            } else {
+                              PostRoomManager({
+                                roomId: state.roomId,
+                                roomNum: state.channelId,
+                                userId: item.uid
+                              })
+                            }
+                          }}
+                        >{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button> : null}
+                        <Button
+                          type="primary"
+                          className='m-ant-btn'
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            postOpenMicr(!item.enableMicr, item.uid)
+                          }}
+                        >{item.enableMicr ? '静音' : '解除静音'}</Button>
+                        <Button
+                          type="primary"
+                          className='m-ant-btn'
+                          size={'small'}
+                          onClick={(event) => {
+                            event.stopPropagation();
+                            postOpenCamera(!item.enableCamera, item.uid)
+                          }}
+                        >{item.enableCamera ? '关闭视频' : '打开视频'}</Button>
                       </div>
                     }>
                       <div className={styles.meetingContentOperation}>
@@ -1013,57 +1075,65 @@ const Meeting: React.FC = () => {
                                 </span>
                               </div>
                               <div>
-                                <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" onClick={() => {
+                                <div>
-                                  postOpenMicr(!item.enableMicr, item.uid)
+                                  <img src={item.enableMicr ? ImageUrl.icon22 : ImageUrl.icon22Active} alt="" onClick={() => {
-                                }} title={item.enableMicr ? '静音' : '解除声音'} />
+                                    postOpenMicr(!item.enableMicr, item.uid)
-                                <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" onClick={() => {
+                                  }} title={item.enableMicr ? '静音' : '解除声音'} />
-                                  postOpenCamera(!item.enableCamera, item.uid)
+                                </div>
-                                }} title={item.enableCamera ? '关闭视频' : '开启视频'} />
+                                <div>
+                                  <img src={item.enableCamera ? ImageUrl.icon23 : ImageUrl.icon23Active} alt="" onClick={() => {
+                                    postOpenCamera(!item.enableCamera, item.uid)
+                                  }} title={item.enableCamera ? '关闭视频' : '开启视频'} />
+                                </div>
+                                {item.uid !== user.uid && user.roleId === '1' ? <div>
+                                  <Popover placement="left" title={''} content={
+                                    <div className='drag'>
+                                      <Button
+                                        type="primary"
+                                        className='m-ant-btn'
+                                        style={{ marginBottom: '10px', width: '100%' }}
+                                        size={'small'}
+                                        onClick={() => {
+                                          if (item.isRoomManager) {
+                                            DeleteRoomManager({
+                                              roomId: state.roomId,
+                                              roomNum: state.channelId,
+                                              userId: item.uid
+                                            })
+                                          } else {
+                                            PostRoomManager({
+                                              roomId: state.roomId,
+                                              roomNum: state.channelId,
+                                              userId: item.uid
+                                            })
+                                          }
+                                        }}
+                                      >{item.isRoomManager ? '取消房间管理员' : '设为房间管理员'}</Button>
+                                      <Button
+                                        type="primary"
+                                        className='m-ant-btn'
+                                        style={{ width: '100%' }}
+                                        size={'small'}
+                                        onClick={() => {
+                                          GetRoomKickout(state.channelId, item.id).then(res => {
+                                            if (res.code === 200) {
+                                              onInvoke('sendOper', {
+                                                roomNum: state.channelId,
+                                                type: 3,
+                                              })
+                                            }
+                                          })
+                                        }}
+                                      >踢出房间</Button>
+                                    </div>
+                                  }>
+                                    <EllipsisOutlined style={{
+                                      color: '#fff',
+                                      fontSize: '20px'
+                                    }} />
+                                  </Popover>
+                                </div> : null}
                               </div>
-                              {item.uid !== user.uid && user.roleId === '1' ? <div className='drag'>
-                                {!item.isRoomManager ? <Button
-                                  type="primary"
-                                  className='m-ant-btn'
-                                  style={{ marginBottom: '10px', width: '80%' }}
-                                  size={'small'}
-                                  onClick={() => {
-                                    PostRoomManager({
-                                      roomId: state.roomId,
-                                      roomNum: state.channelId,
-                                      userId: item.uid
-                                    })
-                                  }}
-                                >设为管理员</Button> : <Button
-                                  type="primary"
-                                  className='m-ant-btn'
-                                  style={{ marginBottom: '10px', width: '80%' }}
-                                  size={'small'}
-                                  onClick={() => {
-                                    DeleteRoomManager({
-                                      roomId: state.roomId,
-                                      roomNum: state.channelId,
-                                      userId: item.uid
-                                    })
-                                  }}
-                                >取消管理员</Button>}
-
-                                <Button
-                                  type="primary"
-                                  className='m-ant-btn'
-                                  style={{ width: '80%' }}
-                                  size={'small'}
-                                  onClick={() => {
-                                    GetRoomKickout(state.channelId, item.id).then(res => {
-                                      if (res.code === 200) {
-                                        onInvoke('sendOper', {
-                                          roomNum: state.channelId,
-                                          type: 3,
-                                        })
-                                      }
-                                    })
-                                  }}
-                                >踢出房间</Button>
-                              </div> : null}
                             </div> : null
                           )
                         }