85 lines
1.9 KiB
Vue
85 lines
1.9 KiB
Vue
<template>
|
|
<!-- 顶部导航栏 -->
|
|
<Navbar />
|
|
|
|
<div class="home-container">
|
|
|
|
|
|
<div id="mainContent" class="main-content">
|
|
<!-- 左侧主空间 -->
|
|
<div class="left-content">
|
|
<router-view />
|
|
</div>
|
|
</div>
|
|
<!-- 语音面板 -->
|
|
<phonePanel />
|
|
|
|
<!-- 消息按钮 -->
|
|
<GlobalMessageButton />
|
|
|
|
<!-- 右下角用户头像框 -->
|
|
<UserProfile />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, watchEffect } from 'vue';
|
|
import Navbar from '../../components/navBar.vue';
|
|
import UserProfile from '../../components/userProfile.vue';
|
|
import { userInfoStore } from '@/store/user';
|
|
import { onlineSocketStore } from '@/store/Online.ts';
|
|
import { getUserInfo } from '@/api/user';
|
|
import GlobalMessageButton from '@/components/GlobalMessageButton.vue';
|
|
import { messageStore } from '@/store/message.ts';
|
|
import phonePanel from '@/components/phonePanel.vue';
|
|
import { initDB } from '@/functions/historyMessages';
|
|
|
|
const userinfo = userInfoStore();
|
|
const socket = onlineSocketStore();
|
|
const message = messageStore();
|
|
|
|
onMounted(() => {
|
|
getUserInfo()
|
|
|
|
// 使用 watchEffect 监听 u_id 是否为空
|
|
watchEffect(() => {
|
|
if (userinfo.user.u_id) { // 如果 u_id 不为空
|
|
console.log('User ID is available:', userinfo.user.u_id);
|
|
socket.connect(userinfo.user.id); // 建立 WebSocket 连接
|
|
message.to = userinfo.user.id; // 设置消息发送者为当前用户 ID
|
|
|
|
// voice.connect(userinfo.user.u_id); // 建立语音通话连接
|
|
}
|
|
});
|
|
|
|
initDB(); // 初始化历史消息数据库
|
|
})
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
.home-container {
|
|
position: relative;
|
|
top: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
}
|
|
|
|
.main-content {
|
|
position: relative;
|
|
left: 0;
|
|
display: flex;
|
|
flex: 1;
|
|
margin-top: 72px;
|
|
|
|
}
|
|
|
|
.left-content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
}
|
|
</style> |