update

package.json

@@ -12,6 +12,7 @@
     "axios": "^1.1.3",
     "clipboard": "^2.0.11",
     "consola": "^2.15.3",
+    "lodash-es": "^4.17.21",
     "pinia": "^2.0.23",
     "trtc-js-sdk": "^4.14.6",
     "uuid": "^9.0.0",

pnpm-lock.yaml

@@ -9,6 +9,7 @@ specifiers:
   commitizen: ^4.2.5
   consola: ^2.15.3
   cz-customizable: ^7.0.0
+  lodash-es: ^4.17.21
   pinia: ^2.0.23
   sass: ^1.55.0
   trtc-js-sdk: ^4.14.6
@@ -28,6 +29,7 @@ dependencies:
   axios: 1.1.3
   clipboard: 2.0.11
   consola: 2.15.3
+  lodash-es: 4.17.21
   pinia: 2.0.23_l7r24p6nevbtlimqmqcwa3ouhu
   trtc-js-sdk: 4.14.6
   uuid: 9.0.0
@@ -1692,6 +1694,10 @@ packages:
     dev: true
     optional: true
 
+  /lodash-es/4.17.21:
+    resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==}
+    dev: false
+
   /lodash.map/4.6.0:
     resolution: {integrity: sha512-worNHGKLDetmcEYDvh2stPCrrQRkP20E4l0iIS7F8EvzMqBBi7ltvFN5m1HvTf1P7Jk1txKhvFcmYsCr8O2F1Q==}
     dev: true

src/App.vue

@@ -26,6 +26,7 @@ const player = computed(() => appStore.player);
 const metadata = computed(() => sceneStore.metadata);
 const mode = computed(() => appStore.mode);
 const isJoined = computed(() => rtcStore.isJoined);
+const isLoaded = computed(() => appStore.isLoaded);
 const controls = computed(() => {
   return metadata.value.controls;
 });
@@ -90,6 +91,7 @@ onMounted(async () => {
       app.MinMap.hide(true);
     }
     dataLoaded.value = true;
+    appStore.isLoad();
   });
   app.store.on("floorcad", ({ floors }: { floors: FloorsType[] }) => {
     if (floors?.length) {
@@ -131,7 +133,7 @@ const changeMode = (name: string) => {
 <template>
   <LoadingLogo :thumb="true" />
   <!-- 引导页 -->
-  <Title v-if="!isJoined" />
+  <Title v-if="!isJoined && isLoaded" />
   <Guideline />
   <div class="ui-view-layout" :class="{ show: show }">
     <div class="scene" ref="scene$"></div>

src/components/basic/button/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <button class="ui-button" :class="className" :style="style">
+    <!-- <UIIcon :type="icon" v-if="icon" class="ui-button-icon" /> -->
+    <slot></slot>
+  </button>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed } from "vue";
+// import { normalizeUnitToStyle } from '../../utils/index'
+// import UIIcon from '../icon'
+
+const props = defineProps({
+  type: {
+    type: String,
+    default: "normal",
+  },
+  color: {
+    type: String,
+  },
+  width: {
+    type: [String, Number],
+  },
+  icon: {
+    type: String,
+  },
+});
+
+const custom = `customize`;
+const className = computed(() => (props.color ? custom : props.type));
+
+const style = computed(() => {
+  const style = {
+    width: props.width + "px",
+  };
+
+  if (className.value === custom) {
+    style["--color"] = props.color;
+  }
+  return style;
+});
+</script>
+
+<script>
+export default { name: "ui-button" };
+</script>

src/components/chatRoom/index.vue

@@ -140,6 +140,7 @@ const { initialRoom } = useRoom();
 
 const rtcStore = useRtcStore();
 const isNativeLeader = computed(() => rtcStore.role == "leader");
+
 const showInput = ref(false);
 const chatShow = ref(true);
 const isBrushes = isDrawing;
@@ -184,7 +185,7 @@ rtcStore.setSocketParams(initParams);
 
 const socket = createSocket();
 initSocketEvent(socket);
-const { createRTCSocket, localStream } = useRtcSdk();
+const { createRTCSocket, handleLeave } = useRtcSdk();
 
 (async () => {
   await createRTCSocket();
@@ -205,6 +206,7 @@ onUnmounted(async () => {
   const app = await useApp();
   app.Connect.follow.off("data", leaderSync);
   app.Connect.paint.off("data", leaderPaint);
+  handleLeave();
 });
 
 /* method 方法*/

src/hooks/useRoom.ts

@@ -21,6 +21,7 @@ export function useRoom() {
         changeScene,
         initialRoom,
         enterRoom,
+        leaveRoom
     }
 }
 

src/hooks/useTRTC.ts

@@ -14,18 +14,23 @@ const muteVideoLeader = ref(false);
 
 
 export const updateDevice = async () => {
-    console.log("updateDevice");
-    const rtcStore = useRtcStore()
-    const microphoneItems = await TRTC.getMicrophones();
-    microphoneItems.forEach((item) => {
-        item['value'] = item.deviceId;
-    });
-    if (microphoneItems?.length) {
-        rtcStore.setAudioDeviceId(microphoneItems[0].deviceId)
-    } else {
-        rtcStore.setAudioDeviceId('')
+    try {
+        console.log("updateDevice");
+        const rtcStore = useRtcStore()
+        const microphoneItems = await TRTC.getMicrophones();
+        microphoneItems.forEach((item) => {
+            item['value'] = item.deviceId;
+        });
+        if (microphoneItems?.length) {
+            rtcStore.setAudioDeviceId(microphoneItems[0].deviceId)
+        } else {
+            rtcStore.setAudioDeviceId('')
+        }
+    } catch (error) {
+
     }
 
+
 }
 
 
@@ -62,7 +67,6 @@ async function createRTCSocket(): Promise<void> {
     try {
         const rtcStore = useRtcStore()
         await checkoutIsExistAudioInput();
-
         await updateDevice()
         // const microphoneItems = await TRTC.getMicrophones();
 
@@ -355,7 +359,7 @@ async function handleStreamSubscribed(event) {
             })
 
         } catch (error) {
-          
+
             Dialog.confirm({
                 showCloseIcon: false,
                 okText: "确定",

src/hooks/userSocket.ts

@@ -1,5 +1,8 @@
+import { getApp } from "./userApp";
+import { useRoom } from "./useRoom";
 import { useRtcStore } from "/@/store/modules/rtc";
 
+
 const io = (window as any).io as SocketIOClientStatic
 let socket: SocketIOClient.Socket
 
@@ -14,6 +17,20 @@ export function createSocket() {
     rtcStore.setSocket(socket)
     return socket
 }
+
+async function closeSocket() {
+    const { leaveRoom } = useRoom()
+    const rtcStore = useRtcStore()
+    await getApp().Connect.follow.exit();
+    await leaveRoom()
+    if (rtcStore.isLeader) {
+        socket.emit('action', { type: 'leader-dismiss' });
+    }
+    setTimeout(() => {
+
+    })
+}
+
 export function useSocket(): SocketIOClient.Socket {
     return socket
 }

src/store/modules/app.ts

@@ -5,6 +5,7 @@ import { getApp, useApp } from '/@/hooks/userApp';
 
 interface AppState {
     panoId: Nullable<string>,
+    isLoaded: boolean,
     mode: string,
     flying: boolean,
     floorId: Nullable<string>,
@@ -27,6 +28,7 @@ interface AppState {
 export const useAppStore = defineStore({
     id: 'app',
     state: (): AppState => ({
+        isLoaded: false,
         panoId: null,
         mode: 'panorama',
         flying: false,
@@ -113,6 +115,12 @@ export const useAppStore = defineStore({
                 // this.commit('tour/setData', { showTours: false })
                 // tourStore.setData({ showTours: false })
             }
+        },
+        isLoad() {
+            this.isLoaded = true
+        },
+        unLoad() {
+            this.isLoaded = true
         }
     }