93 lines
3.0 KiB
Vue
93 lines
3.0 KiB
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"
|
||
:init-flv-player="webrtcStore.webrtc?.initFlvPlayer"
|
||
:has-miniprogram-streams="webrtcStore.webrtc?.hasMiniprogramStreams"
|
||
@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 * as systemApi from '@/api/modules/system'
|
||
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)
|
||
}
|
||
|
||
// 后端健康检查
|
||
async function checkBackendHealth() {
|
||
try {
|
||
const result = await systemApi.healthCheck()
|
||
console.log('✅ Backend health check:', result.status)
|
||
} catch (error) {
|
||
console.warn('⚠️ Backend health check failed:', error)
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
window.addEventListener('resize', handleResize)
|
||
// 确保监听启动
|
||
groupWebRTC.initListener()
|
||
// 注册朋友圈通知处理器
|
||
wsManager.onMomentNotification(handleMomentNotification)
|
||
// 检查后端健康状态
|
||
checkBackendHealth()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', handleResize)
|
||
// 移除朋友圈通知处理器
|
||
wsManager.offMomentNotification(handleMomentNotification)
|
||
})
|
||
</script>
|