refactor: friend basic function refactory complete

src/views/home/index.vue

@@ -0,0 +1,88 @@
+<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';
+import { getUserInfo } from '@/api/user';
+import GlobalMessageButton from '@/components/GlobalMessageButton.vue';
+import { messageStore } from '@/store/message.ts';
+import phonePanel from '@/components/phonePanel.vue';
+import { voiceStore } from '@/store/Voice';
+import { initDB } from '@/functions/historyMessages';
+
+const voice = voiceStore();
+
+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>