feat: 优化头部导航激活状态

src/components/layout/header/index.vue

@@ -4,43 +4,61 @@
       <nav class="navbar-nav-wrap">
         <!-- Default Logo -->
         <a class="navbar-brand" href="/Home" aria-label="Front">
-          <img class="navbar-brand-logo" src="../../../assets/image/head/logo.png" alt="Logo">
+          <img
+            class="navbar-brand-logo"
+            src="../../../assets/image/head/logo.png"
+            alt="Logo"
+          />
         </a>
         <!-- End Default Logo -->
 
         <!-- Collapse -->
         <div class="navbar-collapse collapse" id="navbarNavDropdown">
-
           <div class="navbar-absolute-top-scroller">
-
             <ul class="navbar-nav">
               <!-- Nav items-->
-              <li v-for="nav in navList"
+              <template v-for="nav in navList">
+                <li
+                  v-if="nav.children && nav.children.length > 0"
                   class="gs-nav-item nav-item"
                   :key="nav.id"
-                  :class="{'active':currentNav===nav.id}"
-                  @click="handleNavClick(nav)">
-                <a :id="`gs-nav-item-${nav.id}`" class="nav-link"
-                   aria-current="page"
-                   href="#"
-                   role="button"
-                   data-bs-toggle="dropdown"
-                   aria-expanded="false">{{ nav.name }}</a>
-
-                <!-- Dropdown Menu -->
-                <HeaderDropdown v-if="nav.children.length>0" :nav="nav" @itemClick="handleItemClick"/>
-                <!-- End Dropdown Menu -->
-              </li>
+                  :class="{ active: currentNav === nav.id }"
+                  @click.stop="handleNavClick(nav)"
+                >
+                  <a
+                    :id="`gs-nav-item-${nav.id}`"
+                    class="nav-link"
+                    aria-current="page"
+                    href="#"
+                    role="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                    >{{ nav.name }}</a
+                  >
+
+                  <!-- Dropdown Menu -->
+                  <HeaderDropdown :nav="nav" @itemClick="handleItemClick" />
+                  <!-- End Dropdown Menu -->
+                </li>
+                <li
+                  v-else
+                  :key="nav.id"
+                  @click.stop="handleNavClick(nav)"
+                  class="gs-nav-item nav-item"
+                  :class="{ active: currentNav === nav.id }"
+                >
+                  <a class="nav-link" href="#">{{ nav.name }}</a>
+                </li>
+              </template>
+
               <!-- Nav items End-->
             </ul>
-
           </div>
-
         </div>
         <!-- End Collapse -->
 
         <!-- Button -->
-        <HeaderBtn/>
+        <HeaderBtn />
         <!-- End Button -->
       </nav>
     </div>
@@ -50,30 +68,51 @@
 <script>
 import HeaderBtn from "./HeaderBtn.vue";
 import HeaderDropdown from "./HeaderDropdown.vue";
-import {nav} from "./mock";
+import { nav } from "./mock";
 
 export default {
-  components: {HeaderBtn, HeaderDropdown},
+  components: { HeaderBtn, HeaderDropdown },
   data() {
     return {
       navList: nav,
-      currentNav: '0',
+      currentNav: "0",
+      preActive: "",
     };
   },
+  mounted() {
+    window.addEventListener("click", this.handleWindowClick);
+  },
+  beforeDestroy() {
+    window.removeEventListener("click", this.handleWindowClick);
+  },
   methods: {
+    handleWindowClick() {
+      console.log(this.preActive);
+      if (this.preActive) {
+        this.currentNav = this.preActive;
+        this.preActive = "";
+      }
+    },
     handleNavClick(nav) {
-      if (!!nav.children || nav.children.length === 0){
+      if (!nav.children || nav.children.length === 0) {
         this.currentNav = nav.id;
+      } else {
+        // 点击的是有dropdown的nav 需要保存当前激活状态
+        this.preActive = this.currentNav;
+        this.currentNav = "";
       }
     },
     handleItemClick(item) {
-      console.log(item);
-      if (item.link.startsWith('http')) {
+      if (item.link.startsWith("http")) {
         window.open(item.link);
       } else {
+        if (this.preActive !== "") {
+          this.preActive = "";
+        }
         this.currentNav = item.root.id;
-        item.breadcrumb && this.$store.commit('system/SET_BREADCRUMB', item.breadcrumb)
-        this.$router.push({path: item.link})
+        item.breadcrumb &&
+          this.$store.commit("system/SET_BREADCRUMB", item.breadcrumb);
+        this.$router.push({ path: item.link });
       }
     },
   },
@@ -86,7 +125,6 @@ export default {
 }
 
 .gs-header-nav {
-
   .navbar-nav-wrap {
     position: relative;
     display: flex;
@@ -102,55 +140,64 @@ export default {
 
   // 导航item样式
   .gs-nav-item.nav-item {
-    &.active > a {
-      color: #F26335;
+    &.active > a,
+    a.show {
+      color: #f26335;
+      &::after {
+        content: "";
+        position: absolute;
+        left: 8px;
+        right: 8px;
+        bottom: 0;
+        height: 2px;
+        background-color: #f26335;
+      }
     }
 
     > a {
+      position: relative;
       font-size: 14px;
       font-weight: bold;
-      color: #002C6C;
+      color: #002c6c;
       padding: 10px 8px;
       margin: 0 16px;
     }
   }
 
-
   .navbar-toggler {
-    padding: .5rem .5rem
+    padding: 0.5rem 0.5rem;
   }
 
   .navbar-toggler:focus {
-    box-shadow: none
+    box-shadow: none;
   }
 
   .navbar-toggler .navbar-toggler-text {
-    color: #21325b
+    color: #21325b;
   }
 
   .navbar-toggler .navbar-toggler-default {
-    display: flex
+    display: flex;
   }
 
   .navbar-toggler .navbar-toggler-toggled {
-    display: none
+    display: none;
   }
 
-  .navbar-toggler[aria-expanded=true] .navbar-toggler-default {
-    display: none
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-default {
+    display: none;
   }
 
-  .navbar-toggler[aria-expanded=true] .navbar-toggler-toggled {
-    display: flex
+  .navbar-toggler[aria-expanded="true"] .navbar-toggler-toggled {
+    display: flex;
   }
 
   .navbar-topbar .navbar-toggler {
     margin-left: 0;
-    font-size: .875rem
+    font-size: 0.875rem;
   }
 }
 
-
 @media (max-width: 1400px) {
   //导航item边距
   .gs-header-nav .gs-nav-item.nav-item {
@@ -160,7 +207,6 @@ export default {
   }
 }
 
-
 @media (max-width: 1200px) {
   //导航item边距
   .gs-header-nav .gs-nav-item.nav-item {