refactor(组件): 画笔同屏调试完成

src/app.scss

@@ -161,3 +161,10 @@
     }
   }
 }
+
+[xui_sync_paint] {
+  canvas {
+    top: 0;
+    left: 0;
+  }
+}

src/components/basic/icon/images/index.ts

@@ -0,0 +1,28 @@
+import arrow from './arrow@2x.png'
+import arrows from './arrows@2x.png'
+import brushes_selected from './brushes_selected@2x.png'
+import brushes from './brushes@2x.png'
+import chat_off from './chat_off@2x.png'
+import chat_on from './chat_on@2x.png'
+import cross from './cross@2x.png'
+import invitation from './invitation@2x.png'
+import members from './members@2x.png'
+import mic_off_50 from './mic_off_50@2x.png'
+import mic_off from './mic_off@2x.png'
+import mic_on from './mic_on@2x.png'
+import play from './play.png'
+import pop_up_screen_off from './pop-up_screen_off@2x.png'
+import pop_up_screen_on from './pop-up_screen_on@2x.png'
+import revocation_50 from './revocation_50@2x.png'
+import revocation from './revocation@2x.png'
+import scene from './scene.png'
+import show from './show@2x.png'
+
+const icons = {
+    arrow, arrows, brushes_selected,
+    brushes, chat_off, chat_on, cross,
+    invitation, members, mic_off_50, mic_off,
+    mic_on, play, pop_up_screen_off, pop_up_screen_on,
+    revocation_50, revocation, scene, show
+}
+export { icons }

src/components/basic/icon/index.vue

@@ -6,11 +6,10 @@
 
 <script setup lang="ts">
 import { computed } from "vue";
+import { icons } from "./images";
 
 const props = defineProps({ type: { default: "" } });
-const imageUrl = computed(
-  () => `./images/${props.type}.png`
-);
+const imageUrl = computed(() => icons[props.type]);
 </script>
 
 <style scoped lang="scss">

src/components/chatRoom/chatroom.scss

@@ -86,6 +86,7 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+   
       .saySomething {
         color: #fff;
         // font-size: 0.42rem;
@@ -128,6 +129,9 @@
         }
         span {
           font-size: 0.266667rem;
+          // overflow: hidden;
+          // white-space: nowrap;
+          // text-overflow: ellipsis;
         }
         // &::after {
         //   content: "";
@@ -171,7 +175,7 @@
             background: url(/@/assets/images/rtcLive/brushes@2x.png);
             background-size: 100% 100%;
           }
-          &.brushesed {
+          &.brushed {
             background: url(/@/assets/images/rtcLive/brushes_selected@2_1.png);
             background-size: 100% 100%;
           }
@@ -555,4 +559,5 @@
   .disable {
     opacity: 0.5;
     pointer-events: none;
-  }
+  }
+

src/components/chatRoom/controls/actions.ts

@@ -1,13 +1,16 @@
 import { UserInfoType, useRtcStore } from "/@/store/modules/rtc";
 import type { ChatContentType } from "/@/store/modules/rtc";
+import Dialog from '/@/components/basic/dialog'
+import { getApp, useApp } from "/@/hooks/userApp";
 
 interface ActionDataType {
     type: string;
     data: any,
-    members?: UserInfoType[]
+    members?: UserInfoType[],
+    open?: boolean
 }
 
-export function handleActions({ data, type, members }: ActionDataType) {
+export function handleActions({ data, type, members, open }: ActionDataType) {
     switch (type) {
         case 'user-init':
             break;
@@ -28,7 +31,9 @@ export function handleActions({ data, type, members }: ActionDataType) {
             break;
         case "leader-dismiss":
             break;
-
+        case "user-paint":
+            handleUserPaint(open)
+            break;
         case 'tagclick':
             break;
         case 'tagclose':
@@ -44,7 +49,7 @@ export function handleActions({ data, type, members }: ActionDataType) {
 
 }
 
-// 处理弹幕
+// 被动处理弹幕
 function handleDanMumSg(data: ChatContentType) {
     const rtcStore = useRtcStore();
     if (data.role == "leader") {
@@ -52,8 +57,29 @@ function handleDanMumSg(data: ChatContentType) {
     }
     rtcStore.addToChatList(data)
 }
-// 
+// 其他用户进入
 function handleUserJoin(members?: UserInfoType[]) {
     const rtcStore = useRtcStore();
     members && rtcStore.setMemberList(members)
+}
+
+// 其他用户开起画笔通知
+
+async function handleUserPaint(open: boolean) {
+    const app = await useApp();
+    const rtcStore = useRtcStore();
+    if (!rtcStore.isLeader) {
+        if (open) {
+            console.log(open)
+            app.Connect.paint.show({
+                role: rtcStore.role,
+                paint: false,
+            })
+            Dialog.toast({ content: `主持人开启画笔` });
+        } else {
+            // Dialog.toast({ content: `主持人关闭画笔` });
+            app.Connect.paint.hide();
+        }
+    }
+
 }

src/components/chatRoom/controls/index.ts

@@ -1,3 +1,4 @@
 export * from './actions'
 export * from './sync'
-export * from './paint'
+export * from './paint'
+export * from './join'

src/components/chatRoom/controls/join.ts

@@ -0,0 +1,10 @@
+import { getApp } from "/@/hooks/userApp";
+import { useRtcStore } from "/@/store/modules/rtc";
+
+// 自已join的方法
+export function handleJoin(data: any) {
+    const app = getApp();
+    console.log(app, data);
+    const rtcStore = useRtcStore();
+    rtcStore.setIsJoined(true)
+}

src/components/chatRoom/controls/paint.ts

@@ -2,7 +2,7 @@ import { getApp } from "/@/hooks/userApp";
 import { useRtcStore } from "/@/store/modules/rtc";
 
 // 畫筆
-export function handlePaint(data: any) {
+export function handleReceivePaint(data: any) {
     const app = getApp();
     const rtcStore = useRtcStore();
     if (!rtcStore.isLeader) {

src/components/chatRoom/index.vue

@@ -25,11 +25,13 @@
         <div
           class="brushesBack"
           @click="onDrawUndo"
+          :class="{ disabled: !canUndo }"
           v-if="unref(isBrushes) && isNativeLeader"
         ></div>
         <div
           class="brushes"
           v-if="isNativeLeader"
+          :class="{ brushed: isBrushes }"
           @click="onDraw(!isBrushes)"
         ></div>
 
@@ -82,12 +84,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, nextTick, ref, unref } from "vue";
+import { computed, nextTick, onMounted, onUnmounted, ref, unref } from "vue";
 import { getApp, useApp } from "/@/hooks/userApp";
 import { initSocketEvent } from "./roomControl";
 import { createSocket } from "/@/hooks/userSocket";
 import { useRtcSdk } from "/@/hooks/useTRTC";
-
+import { useDraw } from "/@/hooks/useDraw";
 import browser from "/@/utils/browser";
 import ImageIcon from "/@/components/basic/icon/index.vue";
 import { useRtcStore } from "/@/store/modules/rtc";
@@ -97,15 +99,18 @@ import memberList from "./memberList.vue";
 
 import consola from "consola";
 
+const { isDrawing, setDraw, setCloseDraw } = useDraw();
+
 const rtcStore = useRtcStore();
 const isNativeLeader = computed(() => rtcStore.role == "leader");
 const showInput = ref(false);
 const chatShow = ref(true);
-const isBrushes = ref(false);
+const isBrushes = isDrawing;
 const canUndo = ref(false);
 const animateActive = ref(false);
 const showMember = ref(false);
 const disableMic = ref(false);
+const isJoined = computed(() => rtcStore.isJoined);
 const role = computed(() => rtcStore.role);
 const text = ref<string>("");
 const chatList = computed(() => rtcStore.chatList);
@@ -135,14 +140,38 @@ rtcStore.setSocketParams(initParams);
 const socket = createSocket();
 initSocketEvent(socket);
 const { createRTCSocket } = useRtcSdk();
+
 (async () => {
   await createRTCSocket();
 })();
-// onMounted(() => {
-//   const app = getApp();
-// });
+
+onMounted(async () => {
+  const app = await useApp();
+  app.Connect.follow.start({ follow: !unref(isNativeLeader) });
+  app.Connect.follow.on("data", leaderSync);
+  app.Connect.paint.on("data", leaderPaint);
+});
+onUnmounted(async () => {
+  const app = await useApp();
+  app.Connect.follow.off("data", leaderSync);
+  app.Connect.paint.off("data", leaderPaint);
+});
 
 /* method */
+
+const leaderSync = (data) => {
+  if (unref(isNativeLeader) && unref(isJoined)) {
+    socket.emit("sync", data);
+  }
+};
+const leaderPaint = (data) => {
+  if (unref(isNativeLeader) && unref(isJoined)) {
+    const records = getApp().Connect.paint.records;
+    canUndo.value = records?.length;
+    socket.emit("paint", data);
+  }
+};
+
 const onDrawUndo = async () => {
   let app = getApp();
   app.Connect.paint.undo();
@@ -151,11 +180,13 @@ const onDrawUndo = async () => {
   console.log(app.Connect.paint.records, "app.Connect.paint.records");
 };
 
-const onDraw = async (status) => {
-  isBrushes.value = status;
-
+const onDraw = async (status: boolean) => {
+  // isBrushes.value = status;
+  status && setDraw();
+  !status && setCloseDraw();
   if (unref(isBrushes)) {
     const app = await useApp();
+    console.log("app", app.Connect.paint);
     app.Connect.paint.show({
       role: unref(role),
       paint: isNativeLeader ? true : false,

src/components/chatRoom/roomControl.ts

@@ -1,7 +1,7 @@
 import { useRtcStore } from "/@/store/modules/rtc";
 import consola from 'consola'
 import type { ConsolaLogObject } from 'consola'
-import { handleActions, handleSync, handlePaint } from './controls'
+import { handleActions, handleSync, handleReceivePaint, handleJoin } from './controls'
 
 // 所有socket业务事件集中点
 
@@ -17,6 +17,7 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
                 nickname: rtcStore.nickname,
             };
             socket.emit('join', params)
+            rtcStore.setIsJoined(true)
         })
 
 
@@ -29,10 +30,12 @@ export function initSocketEvent(socket: SocketIOClient.Socket): void {
             consola.info(actionLog)
             handleActions(data)
         })
+        // 自已进入逻辑
+        socket.on('join', handleJoin)
         // 同屏帶看
         socket.on('sync', handleSync)
         // 畫筆
-        socket.on('paint', handlePaint)
+        socket.on('paint', handleReceivePaint)
 
         socket.on('onAny', (event: any) => {
             console.error('onAny:-->', event)

src/components/registerComponent.ts

@@ -1,5 +1,5 @@
 
-import Dialog from '/@/components/basic/dialog'
+import Dialog, { Toast, Alert } from '/@/components/basic/dialog'
 import type { App } from 'vue'
 
 function setup(...Components) {
@@ -12,7 +12,7 @@ function setup(...Components) {
     return Components
 }
 
-const registerComponent = setup(Dialog)
+const registerComponent = setup(Dialog, Toast, Alert)
 console.log('registerComponent', registerComponent)
 export default {
     install: (app: App) => {

src/hooks/useDraw.ts

@@ -0,0 +1,19 @@
+import { ref, unref } from 'vue'
+
+const isDrawing = ref(false)
+
+function setDraw() {
+    isDrawing.value = true
+}
+
+function setCloseDraw() {
+    isDrawing.value = false
+}
+
+export function useDraw() {
+    return {
+        isDrawing,
+        setDraw,
+        setCloseDraw
+    }
+}

src/hooks/useTRTC.ts

@@ -15,7 +15,6 @@ export const updateDevice = async () => {
 const checkoutIsExistAudioInput = async () => {
     const result = await TRTC.checkSystemRequirements()
     console.log('result', result)
-
 }
 
 // interface UseRtcSdkType {

src/store/modules/rtc.ts

@@ -23,7 +23,7 @@ interface RtcState {
     nickname: Nullable<string>,
     mode: string,
     chatList: ChatContentType[],
-    memberList: UserInfoType[]
+    memberList: UserInfoType[],
 }
 
 interface DeviceListParams {
@@ -171,7 +171,7 @@ export const useRtcStore = defineStore({
                 return prev;
             }, []);
             this.memberList = memberList
-        }
+        },
     }
 
 })

src/store/modules/scene.ts

@@ -47,6 +47,7 @@ export const useSceneStore = defineStore({
     actions: {
         load(metadata: KankanMetaDataType): void {
             this.metadata = metadata
+            document.title = metadata.title
         },
         loadFloorData(floors: FloorsType[]) {
             if (floors?.length) {