[*] 改为自动计算侧边栏高亮

LoCyan-Team · Oct 1, 2024 · 9c0bfdc · 9c0bfdc
1 parent dbe762f
commit 9c0bfdc
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 62 deletions.
diff --git a/src/components/sidebar/GuestSidebar.vue b/src/components/sidebar/GuestSidebar.vue
@@ -30,6 +30,9 @@ import { h, ref } from 'vue'
 import { CompassOutline, LogInOutline, MailOpenOutline } from '@vicons/ionicons5'
 import { KeyReset20Regular } from '@vicons/fluent'
 
+import router from '@router'
+import { useRoute } from 'vue-router'
+
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)
 if (document.body.clientWidth >= 1000) {
@@ -44,41 +47,50 @@ const menuOptions = [
   {
     path: '/',
     label: '首页',
-    key: 'MainPage',
+    key: 'root',
     icon: renderIcon(CompassOutline)
   },
   {
     path: '/auth/login',
     label: '登录',
-    key: 'Login',
+    key: 'login',
     icon: renderIcon(LogInOutline)
   },
   {
     path: '/auth/register',
     label: '注册',
-    key: 'Register',
+    key: 'register',
     icon: renderIcon(MailOpenOutline)
   },
   {
     path: '/auth/resetPassword',
     label: '重置密码',
-    key: 'ResetPassword',
+    key: 'password-reset',
     icon: renderIcon(KeyReset20Regular)
   }
 ]
-</script>
-<script>
-import { ref } from 'vue'
-import router from '@router'
 
 const active = ref('')
 
-export const handleUpdateValue = (key, item) => {
-  active.value = key
-  router.push({ path: item.path })
+router.beforeEach((to, from, next) => {
+  computeActiveKey(menuOptions, to.path)
+  next()
+})
+
+const computeActiveKey = (menuOptions, path) => {
+  for (const option of menuOptions) {
+    if (option.children instanceof Array) {
+      computeActiveKey(option.children, path)
+    }
+    if (option.path === path) {
+      active.value = option.key
+    }
+  }
 }
+const route = useRoute()
+computeActiveKey(menuOptions, route.path)
 
-export function setGuestSidebarActiveKey(name) {
-  active.value = name
+const handleUpdateValue = (key, item) => {
+  router.push({ path: item.path })
 }
 </script>
diff --git a/src/components/sidebar/MainSidebar.vue b/src/components/sidebar/MainSidebar.vue
@@ -46,6 +46,9 @@ import {
 import { MoreCircle20Filled } from '@vicons/fluent'
 import { AttachMoneyFilled, AccountTreeOutlined } from '@vicons/material'
 
+import router from '@router'
+import { useRoute } from 'vue-router'
+
 // 手机状态下收缩菜单栏
 const collapsed = ref(true)
 if (document.body.clientWidth >= 1000) {
@@ -99,7 +102,7 @@ const menuOptions = [
   },
   {
     label: '隧道操作',
-    key: 'control-proxy',
+    key: 'proxy-actions',
     icon: renderIcon(PaperPlane),
     children: [
       {
@@ -138,27 +141,14 @@ const menuOptions = [
   {
     path: '/icp',
     label: '域名白名单',
-    key: 'Icp',
+    key: 'icp',
     icon: renderIcon(Key)
   },
   {
     label: '游戏联机',
     key: 'games',
     icon: renderIcon(GameController),
     children: [
-      // {
-      //   label: () =>
-      //       h(
-      //           "a",
-      //           {
-      //             href: "https://download.locyan.cn",
-      //             target: "_blank",
-      //           },
-      //           "软件下载"
-      //       ),
-      //   key: "software_download",
-      //   icon: renderIcon(CloudDownloadOutline),
-      // },
       {
         path: '/games/minecraft',
         label: 'Minecraft',
@@ -182,26 +172,13 @@ const menuOptions = [
   },
   {
     label: '其他功能',
-    key: 'other_options',
+    key: 'other',
     icon: renderIcon(MoreCircle20Filled),
     children: [
-      // {
-      //   label: () =>
-      //       h(
-      //           "a",
-      //           {
-      //             href: "https://download.locyan.cn",
-      //             target: "_blank",
-      //           },
-      //           "软件下载"
-      //       ),
-      //   key: "software_download",
-      //   icon: renderIcon(CloudDownloadOutline),
-      // },
       {
         path: '/other/software',
         label: '软件下载',
-        key: 'SoftwareDownload',
+        key: 'other-software',
         icon: renderIcon(CloudDownloadOutline)
       },
       {
@@ -214,28 +191,37 @@ const menuOptions = [
             },
             '帮助文档'
           ),
-        key: 'help_docs',
+        key: 'help-document',
         icon: renderIcon(BookIcon)
       }
     ]
   }
 ]
 
 const inverted = false
-</script>
-<script>
-import { ref } from 'vue'
-import router from '@router'
 
 const active = ref('')
 // const menuInstRef = ref(null)
 
-export const handleUpdateValue = (key, item) => {
-  active.value = key
-  router.push({ path: item.path })
+router.beforeEach((to, from, next) => {
+  computeActiveKey(menuOptions, to.path)
+  next()
+})
+
+const computeActiveKey = (menuOptions, path) => {
+  for (const option of menuOptions) {
+    if (option.children instanceof Array) {
+      computeActiveKey(option.children, path)
+    }
+    if (option.path === path) {
+      active.value = option.key
+    }
+  }
 }
+const route = useRoute()
+computeActiveKey(menuOptions, route.path)
 
-export function setSideBarActiveKey(name) {
-  active.value = name
+const handleUpdateValue = (key, item) => {
+  router.push({ path: item.path })
 }
 </script>
diff --git a/src/router/index.js b/src/router/index.js
@@ -3,8 +3,6 @@ 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 { setSideBarActiveKey } from '@/components/sidebar/MainSidebar.vue'
-import { setGuestSidebarActiveKey } from '@/components/sidebar/GuestSidebar.vue'
 import logger from '@/utils/logger'
 
 const routes = [
@@ -340,12 +338,6 @@ router.afterEach((to) => {
       changeMainSidebarShow(false)
     }
   }
-
-  if (userData.getters.get_token) {
-    setSideBarActiveKey(to.name)
-  } else {
-    setGuestSidebarActiveKey(to.name)
-  }
 })
 
 export default router
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
@@ -252,7 +252,6 @@ async function resetTraffic() {
 }
 
 setInterval(() => {
-  Proxiesanimation.value = Number(userData.getters.get_proxies_num)
   traffic.value = Number(localStorage.getItem('traffic')) / 1024 + 'GB'
   inbound.value = userData.getters.get_user_inbound + 'Mbps 下行'
   outbound.value = userData.getters.get_user_outbound + 'Mbps 上行'