diff --git a/src/App.vue b/src/App.vue
index 38a7f82..f439bde 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -4,12 +4,42 @@
       <n-message-provider>
         <n-dialog-provider>
           <n-notification-provider>
-            <message />
-            <loadingbar />
-            <ndialog />
-            <Notification />
-            <MainNav v-if="userData.getters.get_token" />
-            <GuestNav v-else />
+            <the-message />
+            <loading-bar />
+            <the-dialog />
+            <notification />
+            <div v-if="loading" class="load-container">
+              <n-spin></n-spin>
+            </div>
+            <n-layout>
+              <user-info />
+              <n-layout-header :inverted="false" bordered>
+                <the-header />
+              </n-layout-header>
+              <n-layout has-sider style="height: calc(100vh - 66px); bottom: 0">
+                <transition name="fade" mode="out-in" :duration="400">
+                  <div :key="router.currentRoute.value.name">
+                    <guest-sidebar v-if="showGuestSidebar" />
+                    <main-sidebar v-if="showMainSidebar" />
+                  </div>
+                </transition>
+                <n-layout :native-scrollbar="false">
+                  <div class="content">
+                    <router-view v-slot="{ Component }">
+                      <keep-alive :max="10">
+                        <transition name="fade" mode="out-in" :duration="400">
+                          <div :key="router.currentRoute.value.name">
+                            <component :is="Component" />
+                          </div>
+                        </transition>
+                      </keep-alive>
+                    </router-view>
+                  </div>
+                  <n-divider />
+                  <the-footer />
+                </n-layout>
+              </n-layout>
+            </n-layout>
           </n-notification-provider>
         </n-dialog-provider>
       </n-message-provider>
@@ -27,10 +57,17 @@ import {
   NNotificationProvider,
   useOsTheme
 } from 'naive-ui'
-import MainNav from '@components/nav/MainNav.vue'
-import GuestNav from '@components/nav/GuestNav.vue'
 import Notification from '@components/TheNotification.vue'
-import { computed } from 'vue'
+import TheFooter from '@components/TheFooter.vue'
+import TheHeader from '@components/TheHeader.vue'
+import UserInfo from '@components/UserInfo.vue'
+import MainSidebar from '@components/sidebar/MainSidebar.vue'
+import GuestSidebar from '@components/sidebar/GuestSidebar.vue'
+import LoadingBar from '@components/LoadingBar.vue'
+import TheMessage from '@components/TheMessage.vue'
+import TheDialog from '@components/TheDialog.vue'
+
+import { computed, ref } from 'vue'
 import userData from '@/utils/stores/userData/store'
 import hljs from 'highlight.js/lib/core'
 import ini from 'highlight.js/lib/languages/ini'
@@ -39,12 +76,23 @@ import api from '@/api'
 import { sendWarningMessage } from '@/utils/message'
 import { logout } from '@/utils/profile'
 import router from '@router'
-// import { init_ws, SetOnMessageFunction } from "@/utils/websocket.js";
-// import { sendInfoNotification } from '@/utils/notification'
+import { useRoute } from 'vue-router'
+
+// 手机状态下收缩菜单栏
+const collapsed = ref(true)
+if (document.body.clientWidth >= 1000) {
+  collapsed.value = false
+}
 
 const osThemeRef = useOsTheme()
+const route = useRoute()
 const theme = computed(() => (osThemeRef.value === 'dark' ? darkTheme : null))
-let inited = false
+// let initFinished = false
+
+const loading = ref(true)
+const tokenValid = ref(false)
+const showGuestSidebar = ref(false)
+const showMainSidebar = ref(false)
 
 hljs.registerLanguage('ini', ini)
 hljs.registerLanguage('nginx', nginx)
@@ -58,41 +106,101 @@ hljs.registerLanguage('nginx', nginx)
 // }
 
 // 初始化websocket
-if (inited === false) {
-  // init_ws();
-  // SetOnMessageFunction(getMessage);
-  inited = true
+// if (initFinished === false) {
+//   // init_ws();
+//   // SetOnMessageFunction(getMessage);
+//   initFinished = true
+// }
+
+async function fetchUserInfo() {
+  let rs
+  try {
+    rs = await api.v2.user.info.root.get(userData.getters.get_username)
+  } catch (e) {
+    sendWarningMessage('查询用户信息失败: ' + e + '，请重新登录后台！')
+  }
+  if (!rs) return
+  if (rs.status === 200) {
+    // console.log(rs)
+    userData.commit('set_user_email', rs.data.email)
+    userData.commit('set_user_inbound', rs.data.inbound)
+    userData.commit('set_user_outbound', rs.data.inbound)
+    userData.commit('set_user_traffic', rs.data.traffic)
+    // localStorage.setItem('proxies', res.proxies_num)
+    // localStorage.setItem('traffic', res.traffic)
+    // localStorage.setItem('set_limit', res)
+    // userData.set_limit({
+    //   inbound: res.inbound,
+    //   outbound: res.outbound,
+    // })
+    return true
+  }
+  if (rs.status === 401) {
+    sendWarningMessage('登录过期或未登录，请重新登录后台！')
+    logout()
+  }
+  return false
 }
 
-setInterval(async () => {
-  if (userData.getters.get_token) {
-    let rs
-    try {
-      rs = await api.v2.user.info.root.get(userData.getters.get_username)
-    } catch (e) {
-      sendWarningMessage('查询用户信息失败: ' + e + '，请重新登录后台！')
-      logout()
-    }
-    if (!rs) return
-    if (rs.status === 200) {
-      // console.log(rs)
-      userData.commit('set_user_email', rs.data.email)
-      userData.commit('set_user_inbound', rs.data.inbound)
-      userData.commit('set_user_outbound', rs.data.inbound)
-      userData.commit('set_user_traffic', rs.data.traffic)
-      // localStorage.setItem('proxies', res.proxies_num)
-      // localStorage.setItem('traffic', res.traffic)
-      // localStorage.setItem('set_limit', res)
-      // userData.set_limit({
-      //   inbound: res.inbound,
-      //   outbound: res.outbound,
-      // })
+watch(
+  () => route.meta,
+  (value) => {
+    if (value.needLogin) {
+      showMainSidebar.value = true
+      showGuestSidebar.value = false
+    } else {
+      if (value.sidebar?.guest) {
+        showMainSidebar.value = false
+        showGuestSidebar.value = true
+      } else if (value.sidebar?.main) {
+        showMainSidebar.value = true
+        showGuestSidebar.value = false
+      } else {
+        showMainSidebar.value = false
+        showGuestSidebar.value = false
+      }
     }
-    if (rs.status === 401) {
-      sendWarningMessage('登录过期或未登录，请重新登录后台！')
-      logout()
+  }
+)
+
+onMounted(async () => {
+  if (userData.getters.get_token !== '') {
+    tokenValid.value = await fetchUserInfo()
+  }
+  loading.value = false
+})
+
+setInterval(async () => {
+  if (userData.getters.get_token !== '') {
+    const valid = await fetchUserInfo()
+    if (!valid) {
       router.push('/auth/login')
     }
   }
 }, 10000)
 </script>
+
+<style>
+.load-container {
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content {
+  margin-right: 15px;
+  margin-left: 15px;
+  min-height: calc(100vh - 115px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.5s ease;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+</style>
diff --git a/src/components/TheFooter.vue b/src/components/TheFooter.vue
index 3ffa378..8e42c89 100644
--- a/src/components/TheFooter.vue
+++ b/src/components/TheFooter.vue
@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup>
 import { GitAlt } from '@vicons/fa'
 import { onMounted, ref } from 'vue'
 import { get } from '@/utils/request'
diff --git a/src/components/TheHeader.vue b/src/components/TheHeader.vue
new file mode 100644
index 0000000..7b3db91
--- /dev/null
+++ b/src/components/TheHeader.vue
@@ -0,0 +1,72 @@
+<template>
+  <n-modal
+    v-model:show="announcementShow"
+    class="custom-card"
+    preset="card"
+    style="width: 600px"
+    title="通知"
+    size="huge"
+    :bordered="false"
+    :segmented="{ content: 'soft', footer: 'soft' }"
+  >
+    <n-p v-html="announcementHtml"></n-p>
+  </n-modal>
+  <n-space justify="space-between">
+    <n-gradient-text
+      :size="24"
+      type="warning"
+      style="margin-left: 20px; height: 50px; margin-top: 10%"
+    >
+      LoCyanFrp
+    </n-gradient-text>
+    <!-- 2023-04-30 23：04 by XiaMoHuaHuo_CN: 哪个大聪明在这放一言 -->
+    <!--<n-p style="margin-top: 4%"><n-text style="font-size: 20px"> {{ hitokoto_content }} </n-text></n-p>-->
+    <!-- 2024-1-27 10:43 by ltzXiaoYanMo 你问我我问谁啊，你去看commits记录啊（-->
+    <n-space>
+      <n-button
+        circle
+        style="margin-top: 15px; margin-right: 10px"
+        @click="() => (announcementShow = true)"
+      >
+        <template #icon>
+          <n-icon><MdNotifications /></n-icon>
+        </template>
+      </n-button>
+      <n-avatar
+        round
+        size="medium"
+        :style="userData.getters.get_token ? '' : 'display: none;'"
+        style="margin-top: 15px; margin-right: 23px"
+        :src="avatar"
+        @click="() => changeUserInfoShow(true)"
+      />
+    </n-space>
+  </n-space>
+</template>
+<script setup>
+import { NGradientText } from 'naive-ui'
+import { MdNotifications } from '@vicons/ionicons4'
+import { onMounted, ref } from 'vue'
+import notice from '@/utils/notice'
+import userData from '@/utils/stores/userData/store'
+import { changeUserInfoShow } from '@components/UserInfo.vue'
+
+const avatar = ref('')
+const announcementHtml = ref('')
+const announcementShow = ref(false)
+avatar.value = userData.getters.get_avatar
+
+onMounted(async () => {
+  const time = new Date()
+  const year = time.getFullYear()
+  const month = time.getMonth()
+  const day = time.getDate()
+  const current = `${year}-${month}-${day}`
+
+  let result = await notice.getNotice()
+  announcementHtml.value = result.announcement
+  if (localStorage.getItem('dashboard_last_show_ads_date') !== current)
+    announcementShow.value = true
+  localStorage.setItem('dashboard_last_show_ads_date', current)
+})
+</script>
diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
index df74be7..f44b4b0 100644
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@@ -94,9 +94,10 @@ import { logout } from '@/utils/profile'
 import userData from '@/utils/stores/userData/store'
 import { sendErrorMessage, sendSuccessMessage } from '@/utils/message'
 import { onMounted, ref } from 'vue'
-import { useDialog } from 'naive-ui'
+import { useDialog, useLoadingBar, useMessage } from 'naive-ui'
 import api from '@/api'
 import logger from '@/utils/logger'
+import router from '@router'
 
 const dialogWidth = ref('30vw')
 const ldb = useLoadingBar()
@@ -139,27 +140,29 @@ const tPassword = ref({
 
 // 检查 QQ 绑定状态
 onMounted(async () => {
-  let rs
-  try {
-    rs = await api.v2.user.info.qq(userData.getters.get_username)
-  } catch (e) {
-    logger.error(e)
-    bindQQ.value.isDisable = true
-    bindQQ.value.msg = ref('未知')
-  }
-  if (!rs) return
-  if (rs.status === 200) {
-    bindQQ.value.isDisable = true
-    bindQQ.value.msg = ref('已绑定')
-    bindQQ.value.unBindDisable = false
-    bindQQ.value.unBindmsg = ref('解除绑定')
-  } else if (rs.status === 404) {
-    bindQQ.value.isDisable = false
-    bindQQ.value.msg = ref('点击绑定')
-    bindQQ.value.unBindDisable = true
-    bindQQ.value.unBindmsg = ref('尚未绑定')
-  } else {
-    sendErrorMessage('获取 QQ 绑定状态失败: ' + rs.message)
+  if (userData.getters.get_token !== '') {
+    let rs
+    try {
+      rs = await api.v2.user.info.qq(userData.getters.get_username)
+    } catch (e) {
+      logger.error(e)
+      bindQQ.value.isDisable = true
+      bindQQ.value.msg = ref('未知')
+    }
+    if (!rs) return
+    if (rs.status === 200) {
+      bindQQ.value.isDisable = true
+      bindQQ.value.msg = ref('已绑定')
+      bindQQ.value.unBindDisable = false
+      bindQQ.value.unBindmsg = ref('解除绑定')
+    } else if (rs.status === 404) {
+      bindQQ.value.isDisable = false
+      bindQQ.value.msg = ref('点击绑定')
+      bindQQ.value.unBindDisable = true
+      bindQQ.value.unBindmsg = ref('尚未绑定')
+    } else {
+      sendErrorMessage('获取 QQ 绑定状态失败: ' + rs.message)
+    }
   }
 })
 
@@ -294,8 +297,10 @@ async function unBindQQ() {
 }
 
 function doLogOut() {
-  sendSuccessMessage('您已登出，感谢您的使用！')
+  changeUserInfoShow(false)
   logout()
+  sendSuccessMessage('您已登出，感谢您的使用！')
+  router.push('/auth/login')
 }
 
 async function changePassword() {
diff --git a/src/components/nav/GuestNav.vue b/src/components/nav/GuestNav.vue
deleted file mode 100644
index d7ab5cd..0000000
--- a/src/components/nav/GuestNav.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <n-space vertical>
-    <n-layout>
-      <n-layout-header :inverted="inverted" bordered>
-        <n-space justify="space-between">
-          <n-gradient-text
-            :size="24"
-            type="warning"
-            style="margin-left: 20px; height: 50px; margin-top: 10%"
-          >
-            LoCyanFrp
-          </n-gradient-text>
-        </n-space>
-      </n-layout-header>
-      <n-layout has-sider style="height: calc(100vh - 66px); bottom: 0">
-        <GuestSidebar v-if="showSideBar" />
-        <n-layout :native-scrollbar="false">
-          <!-- <div style="text-align: center">
-            <n-gradient-text :size="32" type="info"> 祝各位高三学子 </n-gradient-text>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-            <n-gradient-text :size="46" type="danger"> 高考加油！ </n-gradient-text>
-          </div> -->
-          <div style="margin-right: 15px; margin-left: 15px; min-height: calc(100vh - 115px)">
-            <router-view v-slot="{ Component }">
-              <KeepAlive :max="10">
-                <Transition name="fade" mode="out-in" :duration="400">
-                  <div :key="router.currentRoute.value.name">
-                    <component :is="Component" />
-                  </div>
-                </Transition>
-              </KeepAlive>
-            </router-view>
-          </div>
-          <n-divider></n-divider>
-          <the-footer></the-footer>
-        </n-layout>
-      </n-layout>
-    </n-layout>
-  </n-space>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { NGradientText } from 'naive-ui'
-import GuestSidebar from '@components/sidebar/GuestSidebar.vue'
-import TheFooter from '@components/TheFooter.vue'
-import router from '@router'
-
-// 手机状态下收缩菜单栏
-const collapsed = ref(true)
-if (document.body.clientWidth >= 1000) {
-  collapsed.value = false
-}
-
-const inverted = false
-</script>
-<script>
-import { ref } from 'vue'
-
-export const showSideBar = ref(false)
-
-export function changeShowGuestSidebar(is_show) {
-  showSideBar.value = is_show
-}
-</script>
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-</style>
diff --git a/src/components/nav/MainNav.vue b/src/components/nav/MainNav.vue
deleted file mode 100644
index 4e3c6ad..0000000
--- a/src/components/nav/MainNav.vue
+++ /dev/null
@@ -1,167 +0,0 @@
-<template>
-  <UserInfo />
-  <n-space vertical>
-    <n-layout style="height: 100vh">
-      <n-layout-header :inverted="inverted" bordered>
-        <n-space justify="space-between">
-          <n-gradient-text
-            :size="24"
-            type="warning"
-            style="margin-left: 20px; height: 50px; margin-top: 10%"
-          >
-            LoCyanFrp
-          </n-gradient-text>
-          <!-- 2023-04-30 23：04 by XiaMoHuaHuo_CN: 哪个大聪明在这放一言 -->
-          <!--<n-p style="margin-top: 4%"><n-text style="font-size: 20px"> {{ hitokoto_content }} </n-text></n-p>-->
-          <!-- 2024-1-27 10:43 by ltzXiaoYanMo 你问我我问谁啊，你去看commits记录啊（-->
-          <n-space>
-            <n-button
-              circle
-              style="margin-top: 15px; margin-right: 10px"
-              @click="
-                () => {
-                  announcementShow = true
-                }
-              "
-            >
-              <template #icon>
-                <n-icon><MdNotifications /></n-icon>
-              </template>
-            </n-button>
-            <n-avatar
-              round
-              size="medium"
-              :style="getStyle()"
-              style="margin-top: 15px; margin-right: 23px"
-              :src="avatar"
-              @click="DoShowUserInfo()"
-            />
-          </n-space>
-        </n-space>
-      </n-layout-header>
-      <n-layout has-sider style="height: calc(100vh - 66px); bottom: 0">
-        <n-modal
-          v-model:show="announcementShow"
-          class="custom-card"
-          preset="card"
-          style="width: 600px"
-          title="通知"
-          size="huge"
-          :bordered="false"
-          :segmented="{ content: 'soft', footer: 'soft' }"
-        >
-          <n-p v-html="announcementHtml"></n-p>
-        </n-modal>
-        <SideBar v-if="showSideBar" />
-        <n-layout :native-scrollbar="false">
-          <!-- <div style="text-align: center">
-            <n-gradient-text :size="32" type="info"> 祝各位高三学子 </n-gradient-text>
-            &nbsp;&nbsp;&nbsp;&nbsp;
-            <n-gradient-text :size="46" type="danger"> 高考加油！ </n-gradient-text>
-          </div> -->
-          <div style="margin-right: 15px; margin-left: 15px; min-height: calc(100vh - 115px)">
-            <router-view v-slot="{ Component }">
-              <KeepAlive :max="10">
-                <Transition name="fade" mode="out-in" :duration="400">
-                  <div :key="router.currentRoute.value.name">
-                    <component :is="Component" />
-                  </div>
-                </Transition>
-              </KeepAlive>
-            </router-view>
-          </div>
-          <n-divider></n-divider>
-          <the-footer></the-footer>
-        </n-layout>
-      </n-layout>
-    </n-layout>
-  </n-space>
-  <!-- 气死我了zhoudexuan，让我一个写后端的来搓前端，mmp -->
-  <!-- 中考完学不会vue你就死定了 -->
-  <!-- 2023-7-22-DXCFTDE-老子把你奇奇怪怪的按钮全部改了.再说我不会搓前端你就s定了 -->
-  <!-- 2023-8-21-Zhiyuan-我发现了什么？ -->
-  <!-- 2023-12-31-Daiyangcheng 突然想起来还有这块神奇的地方，写点东西吧，各位元旦快乐！ -->
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { NGradientText } from 'naive-ui'
-import userData from '@/utils/stores/userData/store'
-import router from '@router'
-import TheFooter from '@components/TheFooter.vue'
-import UserInfo, { changeUserInfoShow } from '@components/UserInfo.vue'
-import SideBar from '@components/sidebar/MainSidebar.vue'
-import { MdNotifications } from '@vicons/ionicons4'
-import notice from '@/utils/notice'
-import { useRoute } from 'vue-router'
-
-// 手机状态下收缩菜单栏
-const collapsed = ref(true)
-const avatar = ref('')
-const inverted = false
-const route = useRoute()
-
-if (document.body.clientWidth >= 1000) {
-  collapsed.value = false
-}
-
-const announcementHtml = ref('')
-const announcementShow = ref(false)
-
-onMounted(async () => {
-  const time = new Date()
-  const year = time.getFullYear()
-  const month = time.getMonth()
-  const day = time.getDate()
-  const current = `${year}-${month}-${day}`
-
-  let result = await notice.getNotice()
-  announcementHtml.value = result.announcement
-  if (localStorage.getItem('dashboard_last_show_ads_date') !== current)
-    announcementShow.value = true
-  localStorage.setItem('dashboard_last_show_ads_date', current)
-})
-
-avatar.value = userData.getters.get_avatar
-
-// 刚进入面板不展示用户信息框
-changeUserInfoShow(false)
-
-function DoShowUserInfo() {
-  changeUserInfoShow(true)
-}
-
-// function renderIcon(icon) {
-//   return () => h(NIcon, null, { default: () => h(icon) })
-// }
-
-function getStyle() {
-  if (!userData.getters.get_token) {
-    return 'display: none;'
-  }
-}
-
-if (location.pathname === '/') router.push('/dashboard')
-</script>
-
-<script>
-import { ref } from 'vue'
-
-export const showSideBar = ref(false)
-
-export function changeMainSidebarShow(is_show) {
-  showSideBar.value = is_show
-}
-</script>
-
-<style>
-.fade-enter-active,
-.fade-leave-active {
-  transition: all 0.5s ease;
-}
-
-.fade-enter,
-.fade-leave-active {
-  opacity: 0;
-}
-</style>
diff --git a/src/router/index.js b/src/router/index.js
index c97327f..34b13d8 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { finishLoadingBar, startLoadingBar } from '@/utils/loadingbar'
 import userData from '@/utils/stores/userData/store'
-import { changeMainSidebarShow } from '@/components/nav/MainNav.vue'
-import { changeShowGuestSidebar } from '@/components/nav/GuestNav.vue'
 import logger from '@/utils/logger'
 
 const routes = [
@@ -321,23 +319,6 @@ router.afterEach((to) => {
     // 设置标题
     document.title = to.meta.title + ' | LoCyanFrp'
   }
-
-  // 需要登录则展示主 sidebar
-  if (to.meta.needLogin) {
-    changeMainSidebarShow(true)
-    changeShowGuestSidebar(false)
-  } else {
-    if (to.meta.sidebar?.guest) {
-      changeShowGuestSidebar(true)
-      changeMainSidebarShow(false)
-    } else if (to.meta.sidebar?.main) {
-      changeShowGuestSidebar(false)
-      changeMainSidebarShow(true)
-    } else {
-      changeShowGuestSidebar(false)
-      changeMainSidebarShow(false)
-    }
-  }
 })
 
 export default router
diff --git a/src/utils/profile.js b/src/utils/profile.js
index d58701c..5f6265c 100644
--- a/src/utils/profile.js
+++ b/src/utils/profile.js
@@ -51,5 +51,4 @@ export function getProxies(username, token) {
 
 export function logout() {
   userData.commit('delete_user_info')
-  router.push('/auth/login')
 }