[+] 面板总加载动画

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>

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'

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>

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() {