From 9c0bfdc3525586281ebb587c83e5390d44a5bc30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E6=B2=AB=E8=8A=B1=E7=81=ABzzz=F0=9F=8C=99?=
 <xmcn@1l1.icu>
Date: Wed, 2 Oct 2024 03:17:58 +0800
Subject: [PATCH] =?UTF-8?q?[*]=20=E6=94=B9=E4=B8=BA=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E8=AE=A1=E7=AE=97=E4=BE=A7=E8=BE=B9=E6=A0=8F=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar/GuestSidebar.vue | 38 +++++++++-----
 src/components/sidebar/MainSidebar.vue  | 66 ++++++++++---------------
 src/router/index.js                     |  8 ---
 src/views/DashboardView.vue             |  1 -
 4 files changed, 51 insertions(+), 62 deletions(-)

diff --git a/src/components/sidebar/GuestSidebar.vue b/src/components/sidebar/GuestSidebar.vue
index 9cf85ea..7f87db7 100644
--- 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
index ef9d272..4ffa3a6 100644
--- 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,7 +141,7 @@ const menuOptions = [
   {
     path: '/icp',
     label: '域名白名单',
-    key: 'Icp',
+    key: 'icp',
     icon: renderIcon(Key)
   },
   {
@@ -146,19 +149,6 @@ const menuOptions = [
     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,7 +191,7 @@ const menuOptions = [
             },
             '帮助文档'
           ),
-        key: 'help_docs',
+        key: 'help-document',
         icon: renderIcon(BookIcon)
       }
     ]
@@ -222,20 +199,29 @@ const menuOptions = [
 ]
 
 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
index 0b68f6f..c97327f 100644
--- 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
index dcf652c..c514657 100644
--- 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 上行'