From 795d2c91bd1c868a07a71cd464c23d1a24bdea8b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=80=E5=AF=B8=E7=81=B0?= <webyicunhui@outlook.com>
Date: Mon, 19 May 2025 11:56:39 +0800
Subject: [PATCH] fix(projects): :bug: Fix the external link routing
 highlighting issue. fixed [#94]

---
 .../global-menu/modules/vertical-menu.vue        | 16 +++++++++++++++-
 src/typings/components.d.ts                      |  3 +++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/layouts/modules/global-menu/modules/vertical-menu.vue b/src/layouts/modules/global-menu/modules/vertical-menu.vue
index 57f0e5b..be7f88a 100644
--- a/src/layouts/modules/global-menu/modules/vertical-menu.vue
+++ b/src/layouts/modules/global-menu/modules/vertical-menu.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import { useDocumentVisibility } from '@vueuse/core';
 import { SimpleScrollbar } from '@sa/materials';
 import type { RouteKey } from '@elegant-router/types';
 import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
@@ -30,6 +31,19 @@ function updateExpandedKeys() {
   expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value);
 }
 
+const visibility = useDocumentVisibility();
+
+const selectedKeyDummy = ref(selectedKey.value);
+
+// watch document.visibilityState
+watch(visibility, () => {
+  if (visibility.value === 'hidden') {
+    selectedKeyDummy.value = '';
+  } else {
+    selectedKeyDummy.value = selectedKey.value;
+  }
+});
+
 watch(
   () => route.name,
   () => {
@@ -44,7 +58,7 @@ watch(
     <SimpleScrollbar>
       <ElMenu
         mode="vertical"
-        :default-active="selectedKey"
+        :default-active="selectedKeyDummy"
         :default-openeds="expandedKeys"
         :collapse="appStore.siderCollapse"
         :collapse-transition="false"
diff --git a/src/typings/components.d.ts b/src/typings/components.d.ts
index 89cca00..d88f4d2 100644
--- a/src/typings/components.d.ts
+++ b/src/typings/components.d.ts
@@ -25,6 +25,8 @@ declare module 'vue' {
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
+    ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
+    ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDivider: typeof import('element-plus/es')['ElDivider']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -56,6 +58,7 @@ declare module 'vue' {
     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTimeline: typeof import('element-plus/es')['ElTimeline']
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']