feat(组件): 其他问题修复

src/components/chatRoom/controls/actions.ts

@@ -1,18 +1,22 @@
-import { UserInfoType, useRtcStore } from "/@/store/modules/rtc";
-import type { ChatContentType } from "/@/store/modules/rtc";
+import { useRtcStore } from "/@/store/modules/rtc";
+import type { ChatContentType, UserInfoType } from "/@/store/modules/rtc";
 import Dialog from '/@/components/basic/dialog'
 import { getApp, useApp } from "/@/hooks/userApp";
+import consola from 'consola'
+import { useSocket } from "/@/hooks/userSocket";
 
 interface ActionDataType {
     type: string;
     data: any,
     members?: UserInfoType[],
-    open?: boolean
+    open?: boolean,
+    user?: UserInfoType
 }
 
-export function handleActions({ data, type, members, open }: ActionDataType) {
+export function handleActions({ data, type, members, open, user }: ActionDataType) {
     switch (type) {
         case 'user-init':
+            handleUserInit()
             break;
         case 'danmumsg':
             handleDanMumSg(data)
@@ -22,11 +26,14 @@ export function handleActions({ data, type, members, open }: ActionDataType) {
             break;
 
         case 'user-join':
-            handleUserJoin(members)
+            handleUserJoin(members, user)
             break;
         case "user-leave":
             break;
 
+        case "users-muted":
+            break
+
         case "users-words":
             break;
         case "leader-dismiss":
@@ -49,6 +56,40 @@ export function handleActions({ data, type, members, open }: ActionDataType) {
 
 }
 
+//被动处理初始化
+async function handleUserInit() {
+    const rtcStore = useRtcStore();
+    if (rtcStore.role === 'leader') {
+        const app = await useApp();
+        app.Connect.follow.sync();
+        // setTimeout(() => {
+        //     socket.value.emit("action", {
+        //       type: "leader-avatar",
+        //       data: { avatar: leaderAvatar.value },
+        //     });
+        //     if (tagclick.value && tagclick.value.type == "goodlist") {
+        //       socket.value.emit("action", {
+        //         type: "tagclick",
+        //         data: {
+        //           sid: tagclick.value.data.sid,
+        //         },
+        //       });
+        //       if (tagImageIndex.value != null) {
+        //         setTimeout(() => {
+        //           socket.value.emit("action", {
+        //             type: "tag-image-index",
+        //             data: {
+        //               index: tagImageIndex.value,
+        //             },
+        //           });
+        //         }, 200);
+        //       }
+        //     }
+        //   }, 200);
+    }
+
+}
+
 // 被动处理弹幕
 function handleDanMumSg(data: ChatContentType) {
     const rtcStore = useRtcStore();
@@ -58,14 +99,40 @@ function handleDanMumSg(data: ChatContentType) {
     rtcStore.addToChatList(data)
 }
 // 其他用户进入
-function handleUserJoin(members?: UserInfoType[]) {
+function handleUserJoin(members?: UserInfoType[], user?: UserInfoType) {
+
+    consola.info({
+        tag: 'socket',
+        message: '有人进来了'
+    })
     const rtcStore = useRtcStore();
+
     members && rtcStore.setMemberList(members)
+    if (user) {
+        let name = user.Nickname;
+        if (user.Role === 'leader') {
+            const socket = useSocket()
+            name = "主持人";
+            Dialog.toast({ content: `主持人进入房间` });
+            socket.emit("action", { type: "user-init" });
+        }
+        let data: ChatContentType = {
+            role: user?.Role,
+            mode: rtcStore.mode,
+            Nickname: name,
+            UserId: user?.UserId,
+            text: "进入房间",
+        };
+        if (rtcStore.isLeader) {
+            rtcStore.addToChatList(data)
+        }
+    }
+
 }
 
 // 其他用户开起画笔通知
 
-async function handleUserPaint(open: boolean) {
+async function handleUserPaint(open: boolean | undefined) {
     const app = await useApp();
     const rtcStore = useRtcStore();
     if (!rtcStore.isLeader) {

src/components/chatRoom/controls/join.ts

@@ -1,10 +1,23 @@
 import { getApp } from "/@/hooks/userApp";
+import { useSocket } from "/@/hooks/userSocket";
 import { useRtcStore } from "/@/store/modules/rtc";
 
 // 自已join的方法
 export function handleJoin(data: any) {
     const app = getApp();
-    console.log(app, data);
+    const socket = useSocket()
+    console.log("memberList-1", data);
     const rtcStore = useRtcStore();
     rtcStore.setIsJoined(true)
+    // 
+    if (!rtcStore.isLeader) {
+        setTimeout(() => {
+            socket.emit("action", {
+                type: "user-init",
+            });
+        }, 1500);
+    }
+
+
+
 }

src/components/chatRoom/controls/sync.ts

@@ -2,11 +2,18 @@ import { getApp } from "/@/hooks/userApp";
 import { useRtcStore } from "/@/store/modules/rtc";
 
 // 同屏帶看
-export function handleSync(data: any) {
-    const app = getApp();
-    const rtcStore = useRtcStore();
-    if (!rtcStore.isLeader) {
-        app.Connect.follow.receive(data);
+export async function handleSync(data: any) {
+    try {
+        const app = getApp();
+        const rtcStore = useRtcStore();
+        if (!rtcStore.isLeader) {
+            // app.Connect.follow.start({ follow: false });
+            // console.log('app.Connect.follow', app.Connect.follow.started)
+            app.Connect.follow.receive(data);
+        }
+    } catch (error) {
+
     }
 
+
 }

src/components/chatRoom/index.vue

@@ -74,7 +74,7 @@
     <!-- 输入框 end-->
     <!-- 用户列表 start -->
     <memberList
-      :data="[]"
+      :data="members"
       :show="showMember"
       :animateActive="animateActive"
       @close-member="closeMember"
@@ -123,6 +123,7 @@ const role = computed(() => rtcStore.role);
 const text = ref<string>("");
 const chatList = computed(() => rtcStore.chatList);
 const currentUser = computed(() => rtcStore.userId);
+const members = computed(() => rtcStore.memberList);
 
 //设置socket 参数
 const initParams: SocketParams = {

src/components/chatRoom/memberList.vue

@@ -75,9 +75,10 @@
 import { propTypes } from "/@/utils/propTypes";
 import { UserInfoType } from "/@/store/modules/rtc";
 import avatarSmall from "/@/assets/images/rtcLive/avatar_small@2x.png";
+import { watchEffect } from "vue";
 
 // const animateActive = ref(false);
-defineProps({
+const props = defineProps({
   show: propTypes.bool.def(false),
   animateActive: propTypes.bool.def(false),
   data: {
@@ -89,6 +90,10 @@ defineProps({
     default: () => {},
   },
 });
+
+watchEffect(() => {
+  console.log("memberList", props.data);
+});
 const emit = defineEmits(["openMember", "closeMember"]);
 
 function closeMember(): void {

src/components/chatRoom/roomControl.ts

@@ -40,6 +40,14 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
         socket.on('onAny', (event: any) => {
             console.error('onAny:-->', event)
         })
+        socket.on('error', (error: any) => {
+            const actionLog: ConsolaLogObject = {
+                message: error,
+                tag: 'socket',
+                level: 0
+            }
+            consola.error(actionLog)
+        })
     } else {
         throw new Error('socket没有初始化！')
     }

src/components/registerComponent.ts

@@ -14,7 +14,7 @@ function setup(...Components) {
 }
 // 注册带install与use hook
 const registerComponent = setup(Dialog, Window, Toast, Alert, DialogContent)
-console.log('registerComponent', registerComponent)
+// console.log('registerComponent', registerComponent)
 export default {
     install: (app: App) => {
         registerComponent.forEach(component => {

src/hooks/useRoom.ts

@@ -0,0 +1,75 @@
+import browser from "/@/utils/browser";
+import axios from "axios";
+import { ref, computed, unref } from 'vue'
+
+const roomParam = browser.getURLParam("roomId")
+
+interface roomDataType {
+    sceneData: any[]
+}
+
+export const room = ref<Nullable<roomDataType>>(null)
+export const roomId = roomParam && roomParam.substr(7)
+export const sceneList = computed(() => unref(room)?.sceneData || [])
+export const isLeader = browser.getURLParam("role") === 'leader'
+
+
+export function useRoom() {
+    return {
+        currentScene,
+        changeScene,
+        initialRoom,
+        enterRoom,
+    }
+}
+
+export const currentScene = computed(() => {
+    const num = browser.getURLParam("m")
+    return sceneList.value.find(scene => scene.num === num)
+})
+
+export const changeScene = (scene) => {
+    if (currentScene.value?.num !== scene.num) {
+        console.log(scene, currentScene.value)
+        const params = new URLSearchParams(location.search)
+        params.set('m', scene.num)
+        const url = new URL(location.href)
+        url.search = `?` + params.toString()
+        location.replace(url)
+    }
+}
+
+
+const shopAxios = axios.create({ baseURL: !import.meta.env.DEV ? 'https://v4-test.4dkankan.com' : '' })
+
+export const initialRoom = async () => {
+    const res = await shopAxios.get('/takelook/roomInfo', { params: { roomId } })
+    room.value = res.data.data
+    console.log(room.value)
+}
+
+export const enterRoom = async () => {
+    if (!isLeader) return;
+    await shopAxios.get('/takelook/inOrOutRoom', {
+        params: {
+            type: 0,
+            role: 'leader',
+            roomId
+        }
+    })
+}
+
+export const leaveRoom = async () => {
+    if (!isLeader) return;
+    await shopAxios.get('/takelook/inOrOutRoom', {
+        params: {
+            type: 1,
+            role: 'leader',
+            roomId
+        }
+    })
+}
+
+if (roomId) {
+    shopAxios.get('/takelook/roomAddView', { params: { roomId } })
+}

src/hooks/useTRTC.ts

@@ -24,7 +24,6 @@ const checkoutIsExistAudioInput = async () => {
 async function createRTCSocket(): Promise<void> {
     try {
         console.log('Dialog', Dialog)
-        // Dialog.alert("该场景正在计算中，请稍后再试");
         const rtcStore = useRtcStore()
         await checkoutIsExistAudioInput();
         const microphoneItems = await TRTC.getMicrophones();

src/hooks/userSocket.ts

@@ -5,7 +5,7 @@ let socket: SocketIOClient.Socket
 
 export function createSocket() {
     const rtcStore = useRtcStore()
-    console.log('rtcStore', rtcStore)
+    // console.log('rtcStore', rtcStore)
     const address = import.meta.env.VITE_APP_SOCKET_URL
     socket = io(address, {
         path: "/ws-sync",

src/store/modules/rtc.ts

@@ -48,7 +48,7 @@ export interface UserInfoType {
     IsWords: string
     JoinTime: string
     Nickname: string
-    Role: string
+    Role: RoleType
     RoomId: string
     UserId: string
     text?: string