fix: 修复 barleft 行为

之前只有首次进入网页会记录当前所在栏目，并让当前栏目在高度不够时保持开启（除非手动关闭），现在切换路由时候会记录新的所在栏目
并在后续保持开启

Author: HouLiXieBuRou

app.vue

@@ -38,7 +38,7 @@ onMounted(() => {
     window.WebKitMutationObserver ||
     window.MozMutationObserver;
   const observer = new mutationObserver(() => {
-    $mitt.emit('routeSwitching');
+    $mitt.emit('mainDomChange');
   });
   observer.observe(bodyRef.value, {
     childList: true

components/bar/BarLeft.vue

@@ -1,5 +1,5 @@
 <script setup>
-const { tm, locale } = useI18n();
+const { tm, _locale } = useI18n();
 
 const getComp = computed(() => {
   const textValue = tm('BarLeft');
@@ -75,6 +75,8 @@ const rowHeight = 32;
 const chunkPading = 6;
 const rowHeightpx = `${rowHeight}px`;
 
+const thisElSubEnum = ref(undefined);
+
 const route = useRoute();
 
 const openMenu = (MenuOpenEvent) => {
@@ -94,17 +96,8 @@ const openMenu = (MenuOpenEvent) => {
   openMenuList.add(MenuOpenEvent);
 };
 
-const deleteSetItem = (target, setList) => {
-  for (const item of setList) {
-    if (item === target) {
-      setList.delete(item);
-      break;
-    }
-  }
-};
-
 const closeMenu = (MenuOpenEvent) => {
-  deleteSetItem(MenuOpenEvent, openMenuList);
+  openMenuList.delete(MenuOpenEvent);
   menuRef.value.close(MenuOpenEvent);
 };
 
@@ -123,17 +116,34 @@ const highlyIsQualified = (height) => {
 
 const { $mitt } = useNuxtApp();
 onMounted(() => {
-  $mitt.on('routeSwitching', () => {
-    nextTick(() => {
-      retractMenuBar();
-    });
+  $mitt.on('mainDomChange', () => {
+    retractMenuBar();
   });
 });
 onBeforeUnmount(() => {
-  $mitt.off('routeSwitching');
+  $mitt.off('mainDomChange');
 });
 
+const routeMessage = useRouteMessageStore();
 const retractMenuBar = () => {
+  let thisElSubEnmu_cache = undefined;
+  if (routeMessage.toPath !== '/') {
+    for (const [index, item] of navigationList.value.entries()) {
+      if (
+        item.children.find((item1) => routeMessage.toPath.includes(item1.url))
+      ) {
+        // 当前所在不入列尾
+        thisElSubEnmu_cache = index;
+        break;
+      }
+    }
+    if (thisElSubEnum.value !== undefined)
+      openMenuList.add(String(thisElSubEnum.value));
+
+    openMenuList.delete(String(thisElSubEnmu_cache));
+    thisElSubEnum.value = thisElSubEnmu_cache;
+  }
+
   let height = menuDivRef.value.clientHeight;
   for (const item of openMenuList) {
     if (highlyIsQualified(height)) {
@@ -145,9 +155,6 @@ const retractMenuBar = () => {
       closeMenu(item);
     }
   }
-  // for (const item of openMenuList) {
-  //   menuRef.value.open(item);
-  // }
 };
 onMounted(() => {
   // 每次缩放改变的时候，判断有没有栏目需要缩回去，先展开的，优先缩进
@@ -164,12 +171,11 @@ onMounted(() => {
   let height = menuDivRef.value.clientHeight;
   // 初次加载的时候尝试打开当前栏目分类
   // 记一下目前所在分类的title
-  let thisElSubEnum = null;
   for (const [index, item] of navigationList.value.entries()) {
-    if (thisElSubEnum === null) {
+    if (thisElSubEnum.value === undefined) {
       if (item.children.find((item1) => route.path.includes(item1.url))) {
         // 当前所在不入列尾
-        thisElSubEnum = index;
+        thisElSubEnum.value = index;
       } else {
         openMenuList.add(String(index));
       }
@@ -183,7 +189,7 @@ onMounted(() => {
     if (highlyIsQualified(height)) {
       break;
     }
-    if (thisElSubEnum !== index) {
+    if (thisElSubEnum.value !== index) {
       height = height - (item.children.length * rowHeight + chunkPading);
       closeMenu(String(index));
     }
@@ -234,6 +240,7 @@ const backToTopBtnShow = ref(false);
         :default-openeds="defaultOpeneds"
         @close="closeMenu"
         @open="openMenu">
+        <!-- 它的 index 要求是字符串不然控制台发警告 -->
         <el-sub-menu
           v-for="(item, index) in navigationList"
           :key="`barleft-1-link-${index}`"

middleware/routeguard.global.ts

@@ -1,3 +1,6 @@
-export default defineNuxtRouteMiddleware((_to, _from) => {
+export default defineNuxtRouteMiddleware((to, from) => {
+  const routeMessage = useRouteMessageStore();
+  routeMessage.toPath = to.path;
+  routeMessage.fromPath = from.path;
   return;
 });

stores/routeMessage.ts

@@ -0,0 +1,7 @@
+import { defineStore } from 'pinia';
+export const useRouteMessageStore = defineStore('routeMessage', {
+  state: () => ({
+    toPath: '',
+    fromPath: ''
+  })
+});