From 5def31854ba54e283f3971c5d7fdf092106b091a Mon Sep 17 00:00:00 2001 From: yj <1336058017@qq.com> Date: Thu, 18 Jul 2024 17:36:14 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B8=A2=E5=87=BA=E6=88=BF=E9=97=B4&=E7=AE=A1?= =?UTF-8?q?=E7=90=86=E5=91=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/Meeting/index.ts | 20 ++++++++ src/page/Meeting/index.module.scss | 51 ++++++++++++++++++- src/page/Meeting/index.tsx | 82 ++++++++++++++++++++++++++---- src/utils/package/signalr.ts | 8 +++ 4 files changed, 149 insertions(+), 12 deletions(-) diff --git a/src/api/Meeting/index.ts b/src/api/Meeting/index.ts index 2336c38..842cded 100644 --- a/src/api/Meeting/index.ts +++ b/src/api/Meeting/index.ts @@ -60,3 +60,23 @@ export const PostOpenCamera = (data: any) => method: 'get', data }) + +export const PostRoomManager = (roomId: string, data: any) => + request({ + url: `/room/manager?roomId=${roomId}`, + method: 'post', + data + }) + +export const DeleteRoomManager = (roomId: string, data: any) => + request({ + url: `/room/manager?roomId=${roomId}`, + method: 'delete', + data + }) + +export const GetRoomKickout = (roomNum: string, kickUid: string) => + request({ + url: `/room/kickout?roomNum=${roomNum}&kickUid=${kickUid}`, + method: 'get' + }) diff --git a/src/page/Meeting/index.module.scss b/src/page/Meeting/index.module.scss index 014e633..aafd1a3 100644 --- a/src/page/Meeting/index.module.scss +++ b/src/page/Meeting/index.module.scss @@ -279,7 +279,7 @@ .meetingUserList { height: 100%; - padding: 20px; + padding: 20px 0; box-sizing: border-box; background-color: #16191E; display: flex; @@ -291,6 +291,8 @@ align-items: center; justify-content: space-between; margin-bottom: 20px; + padding: 0 20px; + box-sizing: border-box; >span { color: #EEEEEE; @@ -312,7 +314,10 @@ display: flex; align-items: center; justify-content: space-between; - padding-bottom: 20px; + position: relative; + padding: 10px 20px; + box-sizing: border-box; + cursor: pointer; >div:nth-child(1) { display: flex; @@ -347,6 +352,45 @@ margin-left: 4px; } } + + >div:nth-child(3) { + position: absolute; + top: 60px; + left: 50%; + transform: translate(-50%, 0); + width: 200px; + 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; + } + + &::after { + content: ""; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + 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; + } + } } } @@ -355,8 +399,11 @@ display: flex; align-items: center; justify-content: space-between; + padding: 0 20px; + box-sizing: border-box; >div { + font-size: 20px; cursor: pointer; background-color: #31353A; color: #EEEEEE; diff --git a/src/page/Meeting/index.tsx b/src/page/Meeting/index.tsx index 6567173..dd229c1 100644 --- a/src/page/Meeting/index.tsx +++ b/src/page/Meeting/index.tsx @@ -6,11 +6,10 @@ import { DeleteOutlined, ProfileOutlined, ReloadOutlined, SearchOutlined, Vertic import { useLocation, useNavigate } from 'react-router-dom'; import { thumbImageBufferToBase64 } from '@/utils/package/base64' import { storage } from '@/utils'; -import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser, PostOpenMicr, PostOpenCamera } from '@/api/Meeting'; +import { GetRoomFile, PostRoomFile, DeleteRoomFile, GetRoomUpFileurl, GetRoomFileDwUrl, GetRoomUser, PostOpenMicr, PostOpenCamera, PostRoomManager, DeleteRoomManager, GetRoomKickout } from '@/api/Meeting'; import axios from 'axios'; import ImageUrl from '@/utils/package/imageUrl' import agora from '@/utils/package/agora' -import StupWizard from '@/components/StupWizard'; import SpeakerModeModal from '@/components/SpeakerModeModal'; import { onInvoke, onSignalr, offSignalr } from '@/utils/package/signalr'; import dayjs from 'dayjs'; @@ -21,7 +20,6 @@ const { Column } = Table const Meeting: React.FC = () => { const navigate = useNavigate(); const { state } = useLocation(); - const stupWizardRef = useRef(); const speakerModeModalRef = useRef(); const [statusList, setStatusList] = useState({ userList: false, @@ -179,13 +177,22 @@ const Meeting: React.FC = () => { getRoomUser() break; case 'Operation': - // 1: 全员退出会议 + // 1:全员退出会议 + // 2:设置取消管理员 + // 3:踢出房间 switch (item.type) { case 1: leaveChannel() break; + case 2: + case 3: + getRoomUser() + break; } break; + case 'ForceExitRoom': + leaveChannel() + break; } }) return () => { @@ -258,7 +265,7 @@ const Meeting: React.FC = () => { postOpenCamera(true) break; case '设置向导': - stupWizardRef.current.changeIsStupWizard() + break; case '录制': if (currentVideoId === user.account) { @@ -365,7 +372,7 @@ const Meeting: React.FC = () => { case 'isRemotJoin': setTimeout(() => { getRoomUser() - }, 1000) + }, 2000) break; case 'meetingMode': setMeetingMode(e.value) @@ -514,7 +521,13 @@ const Meeting: React.FC = () => { }) }} /> - } /> +
+ } + /> +
{roomUserList.map((item: any, index: number) =>
@@ -522,13 +535,63 @@ const Meeting: React.FC = () => {
{item.userName} - {item.roleId === '1' ? 主持人 : null} + {item.roleId === '1' || item.isManager ? 主持人 : null}
+ {item.account !== user.account && user.roleId === '1' ?
+ {!item.isManager ? : } + + +
: null}
)} @@ -645,7 +708,6 @@ const Meeting: React.FC = () => { - { return ( <>
- {item.roleId === '1' ?
+ {item.roleId === '1' || item.isManager ?
: null}
diff --git a/src/utils/package/signalr.ts b/src/utils/package/signalr.ts index b5af56d..5136e03 100644 --- a/src/utils/package/signalr.ts +++ b/src/utils/package/signalr.ts @@ -35,6 +35,11 @@ export const onSignalr = (callBack: Function) => { type }) }); + connection.on("ForceExitRoom", () => { + callBack({ + key: 'ForceExitRoom', + }) + }); } } export const offSignalr = () => { @@ -42,6 +47,7 @@ export const offSignalr = () => { connection.off('ReceiveMessage'); connection.off('RefreshUserList'); connection.off('Operation'); + connection.off('ForceExitRoom'); } } export const onInvoke = async (str: string, data: any) => { @@ -57,6 +63,8 @@ export const onInvoke = async (str: string, data: any) => { break; case 'sendOper': // 1:全员退出会议 + // 2:设置取消管理员 + // 3:踢出房间 await connection.invoke(str, data.roomNum, data.type) break; }