fix Appheader

src/components/AppHeader.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { onMounted } from 'vue'
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
 import { useMessageStore } from '@/stores/modules/message'
 
@@ -18,6 +19,18 @@ const navItems: NavItem[] = [
   { label: '个人中心', path: '/profile' },
 ]
 
+// 首页 path 为 '/'，是其它所有路径的前缀；用 Vue Router 默认的
+// router-link-active（包含匹配）会导致首页在所有页面都被点亮。
+// 这里自算激活态：首页仅严格等于 '/' 时高亮，其它菜单等于其路径或以 '/path/' 开头
+// （覆盖子路由，如 /project/123 点亮「项目中心」）。
+const route = useRoute()
+const activePath = computed(() => route.path)
+function isActive(item: NavItem): boolean {
+  const current = activePath.value
+  if (item.path === '/') return current === '/'
+  return current === item.path || current.startsWith(item.path + '/')
+}
+
 const messageStore = useMessageStore()
 const { unreadCount } = storeToRefs(messageStore)
 onMounted(() => void messageStore.fetchUnreadCount())
@@ -32,6 +45,7 @@ onMounted(() => void messageStore.fetchUnreadCount())
           :key="item.path"
           :to="item.path"
           class="app-header__nav-item"
+          :class="{ 'app-header__nav-item--active': isActive(item) }"
         >
           {{ item.label }}
         </RouterLink>
@@ -105,11 +119,11 @@ onMounted(() => void messageStore.fetchUnreadCount())
       transition: color 0.2s;
 
       &:hover,
-      &.router-link-active {
+      &--active {
         color: @home-tab-active;
       }
 
-      &.router-link-active::after {
+      &--active::after {
         content: '';
         position: absolute;
         left: 50%;