fix(projects): 🐛 Fix the external link routing highlighting issue. fixed [#94]

This commit is contained in:
一寸灰
2025-05-19 11:56:39 +08:00
committed by GitHub
parent f8a2045c01
commit 795d2c91bd
2 changed files with 18 additions and 1 deletions

View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue'; import { ref, watch } from 'vue';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { useDocumentVisibility } from '@vueuse/core';
import { SimpleScrollbar } from '@sa/materials'; import { SimpleScrollbar } from '@sa/materials';
import type { RouteKey } from '@elegant-router/types'; import type { RouteKey } from '@elegant-router/types';
import { GLOBAL_SIDER_MENU_ID } from '@/constants/app'; import { GLOBAL_SIDER_MENU_ID } from '@/constants/app';
@@ -30,6 +31,19 @@ function updateExpandedKeys() {
expandedKeys.value = routeStore.getSelectedMenuKeyPath(selectedKey.value); 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( watch(
() => route.name, () => route.name,
() => { () => {
@@ -44,7 +58,7 @@ watch(
<SimpleScrollbar> <SimpleScrollbar>
<ElMenu <ElMenu
mode="vertical" mode="vertical"
:default-active="selectedKey" :default-active="selectedKeyDummy"
:default-openeds="expandedKeys" :default-openeds="expandedKeys"
:collapse="appStore.siderCollapse" :collapse="appStore.siderCollapse"
:collapse-transition="false" :collapse-transition="false"

View File

@@ -25,6 +25,8 @@ declare module 'vue' {
ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem'] ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker'] ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider'] 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'] ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider'] ElDivider: typeof import('element-plus/es')['ElDivider']
ElDrawer: typeof import('element-plus/es')['ElDrawer'] ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -56,6 +58,7 @@ declare module 'vue' {
ElTableColumn: typeof import('element-plus/es')['ElTableColumn'] ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTabPane: typeof import('element-plus/es')['ElTabPane'] ElTabPane: typeof import('element-plus/es')['ElTabPane']
ElTabs: typeof import('element-plus/es')['ElTabs'] ElTabs: typeof import('element-plus/es')['ElTabs']
ElTag: typeof import('element-plus/es')['ElTag']
ElTimeline: typeof import('element-plus/es')['ElTimeline'] ElTimeline: typeof import('element-plus/es')['ElTimeline']
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem'] ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
ElTooltip: typeof import('element-plus/es')['ElTooltip'] ElTooltip: typeof import('element-plus/es')['ElTooltip']