schoolNews/schoolNewsWeb/src/components/TopNavigation.vue

<template>
  <nav class="top-navigation">
    <div class="nav-container">
      <!-- Logo区域 -->
      <div class="nav-logo">
        <img src="@/assets/logo.png" alt="Logo" />
        <span class="logo-text">校园新闻</span>
      </div>

      <!-- 导航菜单 -->
      <div class="nav-menu">
        <div
          v-for="menu in navigationMenus"
          :key="menu.menuID"
          class="nav-item"
          :class="{ active: isActive(menu) }"
          @mouseenter="handleMouseEnter(menu)"
          @mouseleave="handleMouseLeave"
        >
          <div class="nav-link" @click="handleNavClick(menu)">
            <i v-if="menu.icon" :class="menu.icon" class="nav-icon"></i>
            <span>{{ menu.name }}</span>
            <i v-if="hasNavigationChildren(menu)" class="arrow-down">▼</i>
          </div>

          <!-- 下拉菜单 -->
          <div
            v-if="hasNavigationChildren(menu)"
            class="dropdown-menu"
            :class="{ show: activeDropdown === menu.menuID }"
          >
            <div
              v-for="child in getNavigationChildren(menu)"
              :key="child.menuID"
              class="dropdown-item"
              :class="{ active: isActive(child) }"
              @click="handleNavClick(child)"
            >
              <i v-if="child.icon" :class="child.icon" class="dropdown-icon"></i>
              <span>{{ child.name }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧用户区域 -->
      <div class="nav-right">
        <UserDropdown :user="userInfo" @logout="handleLogout" />
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import type { SysMenu } from '@/types';
import { MenuType } from '@/types/enums';
// @ts-ignore - Vue 3.5 组件导入兼容性
import UserDropdown from './UserDropdown.vue';

const router = useRouter();
const route = useRoute();
const store = useStore();

const activeDropdown = ref<string | null>(null);

// 获取所有菜单
const allMenus = computed(() => store.getters['auth/menuTree']);
const userInfo = computed(() => store.getters['auth/userInfo']);

// 获取第一层的导航菜单（MenuType.NAVIGATION）
const navigationMenus = computed(() => {
  return allMenus.value.filter((menu: SysMenu) => menu.type === MenuType.NAVIGATION);
});

// 检查菜单是否有导航类型的子菜单
function hasNavigationChildren(menu: SysMenu): boolean {
  return !!(menu.children && menu.children.some(child => child.type === MenuType.NAVIGATION));
}

// 获取导航类型的子菜单
function getNavigationChildren(menu: SysMenu): SysMenu[] {
  if (!menu.children) return [];
  return menu.children.filter(child => child.type === MenuType.NAVIGATION);
}

// 判断菜单是否激活
function isActive(menu: SysMenu): boolean {
  if (!menu.url) return false;
  
  // 精确匹配
  if (route.path === menu.url) return true;
  
  // 检查是否是子路由
  if (menu.children && menu.children.length > 0) {
    return isMenuOrChildActive(menu);
  }
  
  return false;
}

// 递归检查菜单或其子菜单是否激活
function isMenuOrChildActive(menu: SysMenu): boolean {
  if (route.path === menu.url) return true;
  
  if (menu.children) {
    return menu.children.some(child => isMenuOrChildActive(child));
  }
  
  return false;
}

// 处理鼠标进入
function handleMouseEnter(menu: SysMenu) {
  if (hasNavigationChildren(menu)) {
    activeDropdown.value = menu.menuID || null;
  }
}

// 处理鼠标离开
function handleMouseLeave() {
  activeDropdown.value = null;
}

// 处理导航点击
function handleNavClick(menu: SysMenu) {
  activeDropdown.value = null;
  
  if (menu.url) {
    router.push(menu.url);
  } else if (menu.children && menu.children.length > 0) {
    // 如果没有url但有子菜单，跳转到第一个子菜单
    const firstChild = menu.children.find(child => child.url);
    if (firstChild?.url) {
      router.push(firstChild.url);
    }
  }
}

// 处理登出
function handleLogout() {
  store.dispatch('auth/logout');
}
</script>

<style lang="scss" scoped>
.top-navigation {
  height: 64px;
  background: #001529;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 24px;
  max-width: 1920px;
  margin: 0 auto;
}

.nav-logo {
  display: flex;
  align-items: center;
  margin-right: 48px;
  cursor: pointer;

  img {
    width: 32px;
    height: 32px;
    margin-right: 12px;
  }

  .logo-text {
    font-size: 20px;
    font-weight: 600;
    color: white;
    white-space: nowrap;
  }
}

.nav-menu {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-item {
  position: relative;
  height: 64px;
  display: flex;
  align-items: center;

  &:hover,
  &.active {
    .nav-link {
      background: rgba(255, 255, 255, 0.1);
      color: #fff;
    }
  }
}

.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  user-select: none;

  &:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
  }

  .nav-icon {
    font-size: 18px;
  }

  .arrow-down {
    font-size: 10px;
    margin-left: 4px;
    transition: transform 0.3s;
  }

  &:hover .arrow-down {
    transform: rotate(180deg);
  }
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s;
  z-index: 1001;

  &.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    background: #f5f5f5;
    color: #1890ff;
  }

  &.active {
    background: #e6f7ff;
    color: #1890ff;
  }

  .dropdown-icon {
    font-size: 16px;
  }
}

.nav-right {
  margin-left: auto;
}
</style>