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>

src/layouts/components/DefaultLayoutWithVerticalNav.vue

@@ -9,31 +9,6 @@ import NavbarThemeSwitcher from "@/layouts/components/NavbarThemeSwitcher.vue";
 import SearchBar from "@/layouts/components/SearchBar.vue";
 import ShortcutBar from "@/layouts/components/ShortcutBar.vue";
 import UserProfile from "@/layouts/components/UserProfile.vue";
-import store from "@/store";
-import { useToast } from "vue-toast-notification";
-
-// 提示框
-const $toast = useToast();
-
-// 消息SSE
-onMounted(() => {
-  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();
-    });
-  }
-});
 </script>
 
 <template>

src/layouts/components/UserProfile.vue

@@ -1,35 +1,10 @@
 <script setup lang="ts">
-import api from "@/api";
-import { User } from "@/api/types";
 import router from "@/router";
-import avatar1 from "@images/avatars/avatar-1.png";
 import { useStore } from "vuex";
 
 // Vuex Store
 const store = useStore();
 
-// 当前用户信息
-const accountInfo = ref<User>({
-  id: 0,
-  name: "",
-  password: "",
-  email: "",
-  is_active: false,
-  is_superuser: false,
-  avatar: "",
-});
-
-// 调用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);
-  }
-};
-
 // 执行注销操作
 const logout = () => {
   // 清除登录状态信息
@@ -39,16 +14,14 @@ const logout = () => {
   router.push("/login");
 };
 
-// 页面加载时，加载当前用户数据
+// 获取当前用户信息
-onMounted(() => {
+const accountInfo: any = inject("accountInfo");
-  loadAccountInfo();
-});
 </script>
 
 <template>
   <VBadge dot location="bottom right" offset-x="3" offset-y="3" color="success" bordered>
     <VAvatar class="cursor-pointer" color="primary" variant="tonal">
-      <VImg :src="accountInfo.avatar || avatar1" />
+      <VImg :src="accountInfo.avatar" />
 
       <!-- SECTION Menu -->
       <VMenu activator="parent" width="230" location="bottom end" offset="14px">