fix layout bug

src/App.vue

@@ -1,5 +1,67 @@
 <script lang="ts" setup>
+import avatar1 from "@images/avatars/avatar-1.png";
+
+import { useToast } from "vue-toast-notification";
+import api from "./api";
+import { User } from "./api/types";
+import store from "./store";
+
+// 路由
 const route = useRoute();
+
+// 提示框
+const $toast = useToast();
+
+// SSE持续接收消息
+const startSSEMessager = () => {
+  const token = store.state.auth.token;
+  if (token) {
+    const eventSource = new EventSource(
+      `${import.meta.env.VITE_API_BASE_URL}system/message?token=${token}`
+    );
+    eventSource.addEventListener("message", (event) => {
+      const message = event.data;
+      if (message) {
+        $toast.info(message);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      eventSource.close();
+    });
+  }
+};
+
+// 当前用户信息
+const accountInfo = ref<User>({
+  id: 0,
+  name: "",
+  password: "",
+  email: "",
+  is_active: false,
+  is_superuser: false,
+  avatar: avatar1,
+});
+
+// 调用API，加载当前用户数据
+const loadAccountInfo = async () => {
+  try {
+    const user: User = await api.get(`user/current`);
+    accountInfo.value = user;
+    if (!accountInfo.value.avatar) accountInfo.value.avatar = avatar1;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+// 页面加载时，加载当前用户数据
+onMounted(() => {
+  loadAccountInfo();
+  startSSEMessager();
+});
+
+// 提供给所有元素复用
+provide("accountInfo", accountInfo);
 </script>
 
 <template>