nl-um-vue-ts/src/App.vue

<template>
  <router-view />
  <Toast />

  <!-- 1v1 通话窗口 -->
  <CallWindow
      v-if="webrtcStore.webrtc?.call?.active"
      :call="webrtcStore.webrtc.call"
      :target="chatStore.currentTarget"
      :is-mobile="isMobile"
      :local-stream="localStream"
      :remote-stream="remoteStream"
      @end-call="webrtcStore.webrtc.endCall"
      @accept-call="webrtcStore.webrtc.acceptCall"
      @toggle-mute="webrtcStore.webrtc.toggleMute"
      @toggle-camera="webrtcStore.webrtc.toggleCamera"
      @toggle-minimize="webrtcStore.webrtc.call.minimized = !webrtcStore.webrtc.call.minimized"
  />

  <!-- 群通话窗口 (已加入时显示) -->
  <!-- 修复点：使用 joined 判断，或者 isActive -->
  <GroupCallWindow
      v-if="groupWebRTC.callState.joined"
  />

  <!-- 群通话邀请弹窗 (未加入且收到邀请时显示) -->
  <GroupCallIncoming
      v-if="groupWebRTC.callState.incoming"
  />
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue'
import Toast from '@/components/common/Toast.vue'
import CallWindow from '@/components/call/CallWindow.vue'
import GroupCallWindow from '@/components/chat/GroupCallWindow.vue'
import GroupCallIncoming from '@/components/chat/GroupCallIncoming.vue'
import { useWebRTCStore } from '@/stores/webrtc'
import { useChatStore } from '@/stores/chat'
import { useMomentStore } from '@/stores/moment'
import { useGroupWebRTC } from '@/composables/useGroupWebRTC'
import { wsManager } from '@/api/websocket'
import type { MomentNotifPayload } from '@/types/moment'

const webrtcStore = useWebRTCStore()
const chatStore = useChatStore()
const momentStore = useMomentStore()
const groupWebRTC = useGroupWebRTC()
const isMobile = ref(window.innerWidth < 768)

const localStream = computed(() => webrtcStore.webrtc?.localStream ?? null)
const remoteStream = computed(() => webrtcStore.webrtc?.remoteStream ?? null)

const handleResize = () => {
  isMobile.value = window.innerWidth < 768
}

// 朋友圈通知处理器
const handleMomentNotification = (payload: MomentNotifPayload) => {
  momentStore.handleWsNotification(payload)
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
  // 确保监听启动
  groupWebRTC.initListener()
  // 注册朋友圈通知处理器
  wsManager.onMomentNotification(handleMomentNotification)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  // 移除朋友圈通知处理器
  wsManager.offMomentNotification(handleMomentNotification)
})
</script>