refactor: 快捷键事件绑定/解绑迁移到各自组件中

src/layouts/components/HotkeysIntro/index.vue

@@ -54,6 +54,14 @@ onMounted(() => {
               </div>
               激活下一个主导航
             </li>
+            <li class="flex-baseline gap-2 py-1">
+              <div class="flex-shrink-0 space-x-1">
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
+                <FaKbd>{{ settingsStore.os === 'mac' ? '⇧' : 'Shift' }}</FaKbd>
+                <FaKbd>`</FaKbd>
+              </div>
+              激活上一个主导航
+            </li>
           </ul>
         </div>
         <div v-if="settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys">

src/layouts/components/MainSidebar/index.vue

@@ -2,6 +2,7 @@
 import { useSlots } from '@/slots'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
+import hotkeys from 'hotkeys-js'
 import Logo from '../Logo/index.vue'
 
 defineOptions({
@@ -12,6 +13,25 @@ const settingsStore = useSettingsStore()
 const menuStore = useMenuStore()
 
 const { switchTo } = useMenu()
+
+onMounted(() => {
+  hotkeys('alt+`', (e) => {
+    if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
+      e.preventDefault()
+      switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
+    }
+  })
+  hotkeys('alt+shift+`', (e) => {
+    if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
+      e.preventDefault()
+      switchTo(menuStore.actived - 1 >= 0 ? menuStore.actived - 1 : menuStore.allMenus.length - 1)
+    }
+  })
+})
+onUnmounted(() => {
+  hotkeys.unbind('alt+`')
+  hotkeys.unbind('alt+shift+`')
+})
 </script>
 
 <template>

src/layouts/components/Topbar/Toolbar/PageReload/index.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import useSettingsStore from '@/store/modules/settings'
+import hotkeys from 'hotkeys-js'
 
 defineOptions({
   name: 'PageReload',
@@ -10,6 +11,18 @@ const mainPage = useMainPage()
 
 const isAnimating = ref(false)
 
+onMounted(() => {
+  hotkeys('f5', (e) => {
+    if (settingsStore.settings.toolbar.pageReload) {
+      e.preventDefault()
+      mainPage.reload()
+    }
+  })
+})
+onUnmounted(() => {
+  hotkeys.unbind('f5')
+})
+
 function handleClick() {
   isAnimating.value = true
   mainPage.reload()

src/layouts/index.vue

@@ -4,7 +4,6 @@ import useKeepAliveStore from '@/store/modules/keepAlive'
 import useMenuStore from '@/store/modules/menu'
 import useSettingsStore from '@/store/modules/settings'
 import eventBus from '@/utils/eventBus'
-import hotkeys from 'hotkeys-js'
 import AppSetting from './components/AppSetting/index.vue'
 import Header from './components/Header/index.vue'
 import HotkeysIntro from './components/HotkeysIntro/index.vue'
@@ -23,9 +22,6 @@ const settingsStore = useSettingsStore()
 const keepAliveStore = useKeepAliveStore()
 const menuStore = useMenuStore()
 
-const mainPage = useMainPage()
-const menu = useMenu()
-
 // 头部当前实际高度
 const headerActualHeight = computed(() => {
   let actualHeight = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-header-height'))
@@ -89,25 +85,6 @@ watch(() => routeInfo.path, () => {
   }
 })
 
-onMounted(() => {
-  hotkeys('f5', (e) => {
-    if (settingsStore.settings.toolbar.pageReload) {
-      e.preventDefault()
-      mainPage.reload()
-    }
-  })
-  hotkeys('alt+`', (e) => {
-    if (settingsStore.settings.menu.enableHotkeys) {
-      e.preventDefault()
-      menu.switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
-    }
-  })
-})
-onUnmounted(() => {
-  hotkeys.unbind('f5')
-  hotkeys.unbind('alt+`')
-})
-
 const enableAppSetting = import.meta.env.VITE_APP_SETTING
 </script>