update

.env.development

@@ -5,8 +5,8 @@ VITE_APP_CDN_URL=https://4dkk.4dage.com/v4/www/
 # sdk文件地址
 # VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4/sdk/4.9.0
 VITE_APP_SDK_DIR=https://4dkk.4dage.com/v4-test/www/sdk
-VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
-# VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
+# VITE_APP_SOCKET_URL=ws://127.0.0.1:8889
+VITE_APP_SOCKET_URL=wss://testws.4dkankan.com
 # VITE_APP_SOCKET_URL=wss://221.4.210.172:16666
 # 静态资源目录
 VITE_APP_STATIC_DIR=viewer

src/App.vue

@@ -7,7 +7,7 @@
   import MiniMap from '/@/components/basic/miniMap.vue';
   import FloorplanView from '/@/components/basic/floorplan.vue';
   import { useSceneStore } from '/@/store/modules/scene';
-  import type { FloorsType } from '/@/store/modules/scene';
+  import type { FloorsType, tagType } from '/@/store/modules/scene';
   import { useAppStore } from './store/modules/app';
   import Guideline from '/@/components/basic/guide.vue';
   import ChatRoom from '/@/components/chatRoom/index.vue';
@@ -30,6 +30,7 @@
   import dayjs from 'dayjs';
   import Dialog from './components/basic/dialog';
   import 'kankan-components/theme-chalk/index.css';
+  import { useSocket } from './hooks/userSocket';
   const { createTourPlayer } = useTourPlayer();
   const showDebug = ref(Number(import.meta.env.VITE_SHOW_DEBUGPANEL) === 1);
   const { t } = useI18n();
@@ -277,6 +278,23 @@
     appStore.unLoad();
   });
 
+  const handleSyncTags = (tag: null | tagType) => {
+    const { socket } = useSocket();
+    console.log('handleSyncTags', tag);
+    if (rtcStore.isLeader) {
+      if (socket) {
+        console.log('同步tag-', tag?.sid);
+        socket.emit('action', {
+          type: 'sync-tag',
+          data: {
+            roomId: rtcStore.roomId,
+            id: tag?.sid || null,
+          },
+        });
+      }
+    }
+  };
+
   // method
   const changeMode = (name: string) => {
     if (!unref(flying)) {
@@ -329,7 +347,7 @@
       {{ maxNumber }}
     </span> -->
     <span>
-      {{ t('base.debuginfo') }}：公告，测试1.2.0-0704,角色:{{ rtcStore.role }} rId:{{
+      {{ t('base.debuginfo') }}：公告，测试1.2.0-0705-01,角色:{{ rtcStore.role }} rId:{{
         rtcStore.roomId || browser.getURLParam('roomId')
       }}
       sceneIndex:{{ currentSceneIndex }} uid::
@@ -373,7 +391,7 @@
       />
       <!-- panel end -->
     </template>
-    <Hotspot />
+    <Hotspot @set-current-tag="handleSyncTags" />
   </div>
   <BaseDialog />
 </template>

src/components/chatRoom/controls/actions.ts

@@ -13,6 +13,7 @@ import dayjs from 'dayjs';
 import duration from 'dayjs/plugin/duration';
 import { useRtcSdk } from '/@/hooks/useTRTC';
 import { useMiniApp } from '/@/hooks/useMiniApp';
+import { useSceneStore } from '/@/store/modules/scene';
 dayjs.extend(duration);
 const { isUsingMiniApp } = useMiniApp();
 // import { useRtcSdk } from '/@/hooks/useTRTC';
@@ -103,13 +104,17 @@ export function handleActions({
       console.log('data', members);
       const membersStatus = members as any as UserInfoType[];
       handleRoomStatus(membersStatus);
-    default:
-      break;
+
     case 'user-be-kicked':
       const { t } = useI18n();
       Dialog.toast({ content: t('action.endUpRoom') });
       handleMaxRoomsError();
       break;
+    case 'sync-tag':
+      handleSyncTag(data);
+      break;
+    default:
+      break;
   }
   if (members?.length) {
     console.log('服务器的', members);
@@ -545,3 +550,17 @@ const handleRoomStatus = (members: UserInfoType[]) => {
   const rtcStore = useRtcStore();
   members && rtcStore.setMemberList(members);
 };
+const handleSyncTag = (data) => {
+  const rtcStore = useRtcStore();
+  const sceneStore = useSceneStore();
+  if (!rtcStore.isLeader) {
+    if (data?.id) {
+      const tag = sceneStore.tags.find((item) => item.sid === data.id);
+      sceneStore.setCurrentTag(tag || null);
+    } else {
+      sceneStore.setCurrentTag(null);
+    }
+  }
+
+  console.log('data', data);
+};

src/components/chatRoom/memberList.vue

@@ -42,26 +42,26 @@
                 v-if="i?.Role !== 'leader'"
                 :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
                 :wo="i.IsWords"
-                @click="isNativeLeader && userCanInput(i)"
+                @click="isLeaderOrAssistant && userCanInput(i)"
               ></div>
 
               <ImageIcon
                 class="kick_icon"
-                v-if="i?.Role !== 'leader' && !i.IsAssistant"
+                v-if="isNativeLeader && i?.Role !== 'leader' && !i.IsAssistant"
                 type="assistants"
                 @click="isNativeLeader && userCanBeAssistant(i)"
               />
               <ImageIcon
                 class="kick_icon"
-                v-if="i?.Role !== 'leader'"
+                v-if="isLeaderOrAssistant && i?.Role !== 'leader'"
                 type="kick_user"
-                @click="isNativeLeader && userCanKick(i)"
+                @click="isLeaderOrAssistant && userCanKick(i)"
               />
               <!-- mic -->
               <div
                 class="micBtn"
                 :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
-                @click="isNativeLeader && userCanSpeak(i)"
+                @click="isLeaderOrAssistant && userCanSpeak(i)"
               ></div>
               <!-- mic -->
               <!-- <div
@@ -89,6 +89,8 @@
   const rtcStore = useRtcStore();
   const { t } = useI18n();
   const role = computed(() => rtcStore.role);
+
+  const isLeaderOrAssistant = computed(() => rtcStore.isLeader || rtcStore.isAssistant);
   const isNativeLeader = computed(() => rtcStore.isLeader);
 
   // const animateActive = ref(false);

src/components/hotspot/index.vue

@@ -44,7 +44,7 @@
   </teleport>
 </template>
 <script setup lang="ts">
-  import { ref, onMounted, nextTick, unref } from 'vue';
+  import { ref, onMounted, nextTick, unref, watch, watchEffect } from 'vue';
   import { useSceneStore, tagType } from '/@/store/modules/scene';
   import { computed } from 'vue';
   import { getApp, useApp } from '/@/hooks/userApp';
@@ -53,14 +53,14 @@
   // import { getApp, useApp } from '@/app';
   // import { useStore } from 'vuex';
   import { changeUrl } from './common';
-  import { watchEffect } from 'vue';
 
   import ShowTag from './show-tag.vue';
+
+  import { ComputedRef } from 'vue';
   const sceneStore = useSceneStore();
   const tags$ = ref('');
   const tags = computed(() => sceneStore.tags);
-
-  const currentTag = ref<tagType | null>(null);
+  const currentTag: ComputedRef<tagType | null> = computed(() => sceneStore.currentTag);
   const isClick = ref(false);
   const showLayer = ref(false);
   const emit = defineEmits(['setCurrentTag']);
@@ -74,33 +74,39 @@
 
   const openLayer = (tag: tagType) => {
     showLayer.value = true;
-    currentTag.value = tag;
+    // currentTag.value = tag;
     emit('setCurrentTag', tag);
+    sceneStore.setCurrentTag(tag);
     console.error('open-layer');
   };
   const closeLayer = () => {
     showLayer.value = false;
-    currentTag.value = null;
+    // currentTag.value = null;
     emit('setCurrentTag', null);
+    sceneStore.setCurrentTag(null);
     console.error('close-layer');
   };
 
   const closeTag = async () => {
-    currentTag.value = null;
+    // currentTag.value = null;
+    emit('setCurrentTag', null);
+    sceneStore.setCurrentTag(null);
     isClick.value = false;
   };
-
   const goTag = (_, item: tagType) => {
     console.warn('gototag', item.sid);
+    emit('setCurrentTag', item);
     showLayer.value = false;
     if (unref(isClick)) {
-      currentTag.value = null;
+      // currentTag.value = null;
+      sceneStore.setCurrentTag(null);
       isClick.value = false;
     } else {
-      currentTag.value = item;
+      // currentTag.value = item;
+      sceneStore.setCurrentTag(item);
       isClick.value = true;
       try {
-        focusTag(item);
+        // focusTag(item);
       } catch (error) {
         console.log('error', error);
       }
@@ -113,14 +119,14 @@
       currentTag.value?.sid === tag.sid &&
       !unref(showLayer)
     ) {
-      currentTag.value = null;
+      // currentTag.value = null;
       sceneStore.setCurrentTag(null);
     }
   };
   const onMouseEnter = (_, tag: tagType) => {
     if (!unref(isMobile)) {
       sceneStore.setCurrentTag(tag);
-      currentTag.value = tag;
+      // currentTag.value = tag;
     }
   };
 
@@ -136,6 +142,18 @@
         app.TagManager.updatePosition(tags.value);
       }
     });
+
+    watch(
+      currentTag,
+      (val) => {
+        if (val) {
+          focusTag(val);
+        }
+      },
+      {
+        immediate: true,
+      },
+    );
     // app.Camera.on('flying.started', (pano) => {});
     // app.Camera.on('flying.ended', ({ targetPano }) => {});
     await app.TagManager.tag();
@@ -161,7 +179,7 @@
   const focusTag = (tag: tagType) => {
     nextTick(() => {
       const app = getApp();
-      // console.error('focusTag-1');
+      console.warn('focusTag', tag.sid);
       let t = setTimeout(() => {
         clearTimeout(t);
         let tagBox = document.getElementById(`tagBox_${tag.sid}`);
@@ -184,6 +202,7 @@
           };
 
           let position = isMobile.value ? 'center' : 'left';
+          // console.log('app.TagManager', app.TagManager, position, params);
           app.TagManager.focus(params, 'board', position);
         } catch (err) {}
       }, 300);

src/store/modules/rtc.ts

@@ -22,6 +22,7 @@ interface RtcState {
   isJoined: boolean;
   isRTCJoined: boolean;
   isPublished: boolean;
+  assistant: boolean;
   isShared: boolean;
   remoteStreams: RemoteStream[];
   // invitedRemoteStreams: any[],
@@ -145,6 +146,7 @@ export const useRtcStore = defineStore({
     ifBaseDialog: false,
     connectStatus: 0,
     isHosterOnline: true,
+    assistant: false,
   }),
   persist: [
     {
@@ -163,6 +165,9 @@ export const useRtcStore = defineStore({
     isLeader(): boolean {
       return this.role === 'leader';
     },
+    isAssistant(): boolean {
+      return this.assistant;
+    },
     isMe() {
       return (userId: string) => this.userId === userId;
     },
@@ -277,13 +282,13 @@ export const useRtcStore = defineStore({
           if (current.Role === 'leader') {
             current.Order = 0;
           } else {
-            if (current.IsAssistant) {
-              current.Order = 1;
-            }
             if (current.UserId === this.userId) {
               current.Order = 2;
               this.currentSession = current;
             }
+            if (current.IsAssistant) {
+              current.Order = 1;
+            }
           }
 
           prev.push(current);
@@ -293,6 +298,12 @@ export const useRtcStore = defineStore({
       const sortList = sortBy(memberList, ['Order', 'UserId'], ['asc', 'asc']);
       console.log('sortList', sortList);
       this.memberList = sortList;
+      const me = sortList.find((i: UserInfoType) => i.UserId === this.userId);
+      if (me) {
+        if (me) {
+          this.assistant = me.IsAssistant;
+        }
+      }
     },
 
     clearMemberList(): void {

src/store/modules/scene.ts

@@ -41,6 +41,7 @@ interface SceneState {
   floors: FloorsType[];
   metadata: KankanMetaDataType;
   currentTag: null | tagType;
+  currentTagLayer: boolean;
 }
 
 export const getStaticURL = (path: string) => {
@@ -54,6 +55,7 @@ export const useSceneStore = defineStore({
     currentTag: {} as tagType,
     floors: [],
     metadata: {} as KankanMetaDataType,
+    currentTagLayer: false,
   }),
   getters: {
     musicURL(): Nullable<string> {