schoolNews/schoolNewsWeb/src/components/base/TopNavigation.vue

<template>
  <nav class="top-navigation">
    <div class="nav-container">
      <!-- Logo区域 -->
      <div class="nav-logo">
        <img src="@/assets/imgs/logo-icon.svg" alt="Logo" class="logo-icon" />
        <span class="logo-text">红色思政学习平台</span>
      </div>

      <!-- 导航菜单 -->
      <div class="nav-menu" @wheel="handleWheel">
        <div
          v-for="menu in navigationMenus"
          :key="menu.menuID"
          class="nav-item"
          :class="{ active: isActive(menu) }"
          @mouseenter="(e) => handleMouseEnter(menu, e)"
          @mouseleave="handleMouseLeave"
        >
          <div class="nav-link" @click="handleNavClick(menu)">
            <span>{{ menu.name }}</span>
            <img v-if="hasNavigationChildren(menu)" class="arrow-down" src="@/assets/imgs/arrow-down.svg" alt="arrow" />
          </div>

          <!-- 下拉菜单 -->
          <Teleport to="body" v-if="hasNavigationChildren(menu)">
            <div
              class="dropdown-menu"
              :class="{ show: activeDropdown === menu.menuID }"
              :style="getDropdownPosition(menu)"
              @mouseenter="() => { if (menu.menuID) activeDropdown = menu.menuID }"
              @mouseleave="handleMouseLeave"
            >
              <div
                v-for="child in getNavigationChildren(menu)"
                :key="child.menuID"
                class="dropdown-item"
                :class="{ active: isActive(child) }"
                @click="handleNavClick(child)"
              >
                <span>{{ child.name }}</span>
              </div>
            </div>
          </Teleport>
        </div>
      </div>
      <!-- 右侧用户区域 -->
      <div class="nav-right">
              <!-- 搜索框 -->
        <div class="nav-search">
          <div class="search-box">
            <input 
              type="text" 
              placeholder="搜索思政资源" 
              class="search-input"
              v-model="searchKeyword"
              @keyup.enter="handleSearch"
            />
            <div class="search-icon">
              <img src="../../assets/imgs/search-icon.svg" alt="搜索" />
            </div>
          </div>
        </div>
        <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 searchKeyword = ref('');
const dropdownPositions = ref<Record<string, { left: number; top: number; width: number }>>({});

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

// 获取第一层的导航菜单（MenuType.NAVIGATION），过滤掉用户相关菜单
const navigationMenus = computed(() => {
  const menus = allMenus.value.filter((menu: SysMenu) => {
    // 过滤掉"用户下拉菜单"容器，这些显示在UserDropdown中
    if (menu.menuID === 'menu_user_dropdown') {
      return false;
    }
    return menu.type === MenuType.NAVIGATION;
  });
  console.log('导航菜单数据:', menus);
  menus.forEach((menu: SysMenu) => {
    console.log(`菜单 ${menu.name}:`, {
      menuID: menu.menuID,
      parentID: menu.parentID,
      children: menu.children,
      childrenCount: menu.children?.length || 0
    });
  });
  return menus;
});

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

// 获取导航类型的子菜单
function getNavigationChildren(menu: SysMenu): SysMenu[] {
  if (!menu.children) {
    console.log(`菜单 ${menu.name} 没有子菜单`);
    return [];
  }
  const children = menu.children.filter(child => child.type === MenuType.NAVIGATION);
  console.log(`菜单 ${menu.name} 的子菜单:`, children);
  return children;
}

// 判断菜单是否激活
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, event?: MouseEvent) {
  if (hasNavigationChildren(menu)) {
    activeDropdown.value = menu.menuID || null;
    
    // 计算下拉菜单位置
    if (event && menu.menuID) {
      const target = event.currentTarget as HTMLElement;
      const navLink = target.querySelector('.nav-link') as HTMLElement;
      const rect = (navLink || target).getBoundingClientRect();
      
      dropdownPositions.value[menu.menuID] = {
        left: rect.left,
        top: rect.bottom,
        width: rect.width
      };
    }
  }
}

// 获取下拉菜单位置样式
function getDropdownPosition(menu: SysMenu) {
  const menuID = menu.menuID;
  const pos = menuID && dropdownPositions.value[menuID];
  
  if (!pos) {
    return {
      position: 'fixed' as const,
      visibility: 'hidden' as const
    };
  }
  
  return {
    position: 'fixed' as const,
    left: `${pos.left}px`,
    top: `${pos.top}px`,
    width: `${pos.width}px`
  };
}

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

// 处理鼠标滚轮水平滚动
function handleWheel(event: WheelEvent) {
  const container = event.currentTarget as HTMLElement;
  if (container) {
    event.preventDefault();
    container.scrollLeft += event.deltaY;
  }
}

// 处理导航点击
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 handleSearch() {
  if (searchKeyword.value.trim()) {
    // 这里可以跳转到搜索页面或触发搜索功能
    router.push(`/search?keyword=${encodeURIComponent(searchKeyword.value.trim())}`);
  }
}

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

<style lang="scss" scoped>
.top-navigation {
  height: 76px;
  background: #ffffff;
  border-bottom: 1px solid rgba(72, 72, 72, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  overflow: hidden;
}

.nav-container {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 50px;
  margin: 0 auto;
  gap: 20px;
  width: 100%;
  position: relative;
  overflow: visible;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

  .logo-icon {
    width: 28px;
    height: 28px;
    display: block;
  }

  .logo-text {
    font-family: 'PingFang SC', sans-serif;
    font-weight: 700;
    font-size: 20.6px;
    line-height: 1.31;
    color: #C62828;
    white-space: nowrap;
  }
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  overflow-y: visible;
  scroll-behavior: smooth;
  
  /* 自定义滚动条样式 */
  scrollbar-width: auto;
  scrollbar-color: #C62828 #f5f5f5;
  
  &::-webkit-scrollbar {
    height: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
    margin: 0 10px; /* 滚动条内缩 */
  }
  
  &::-webkit-scrollbar-thumb {
    background: #C62828;
    border-radius: 4px;
    
    &:hover {
      background: #B71C1C;
    }
  }
}

.nav-item {
  position: relative;
  height: 76px;
  display: flex;
  align-items: center;
  flex-shrink: 0; /* 防止菜单项被压缩 */

  &:hover {
    .nav-link {
      background: #f5f5f5;
      font-weight: 600;
    }
  }

  &.active {
    .nav-link {
      color: #C62828;
      font-weight: 600;
    }
  }
}

.nav-link {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 26px 21px;
  color: #141F38;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;
  user-select: none;
  min-width: 106px;

  &:hover {
    color: #C62828;
  }

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

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

.dropdown-menu {
  background: white;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transform: scaleY(0);
  transform-origin: top center;
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
  z-index: 10000;
  pointer-events: none;

  &.show {
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    pointer-events: auto;
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  color: #333;
  font-family: 'PingFang SC', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  transition: all 0.3s;
  white-space: nowrap;

  &:hover {
    background: #f5f5f5;
    color: #C62828;
  }

  &.active {
    background: #ffe6e6;
    color: #C62828;
    font-weight: 500;
  }
}

.nav-search {
  margin-left: auto;
  margin-right: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-box {
  position: relative;
  width: 221px;
  height: 36px;
  border: 1px solid #BAC0CC;
  border-radius: 30px;
  background: white;
  display: flex;
  align-items: center;
  overflow: hidden;

  .search-input {
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    padding: 7px 20px;
    font-family: 'PingFang SC', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.57;
    color: #333;

    &::placeholder {
      color: rgba(0, 0, 0, 0.3);
    }
  }

  .search-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #C62828;
    border-radius: 50%;
    padding: 2px;

    img {
      width: 14px;
      height: 14px;
    }
  }
}

.nav-right {
  margin-left: auto;
  display: flex;
  flex-shrink: 0; /* 防止右侧区域被压缩 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .nav-container {
    padding: 0 30px;
    gap: 15px;
  }
  
  .nav-link {
    min-width: 90px;
    padding: 26px 15px;
    font-size: 15px;
  }
  
  .nav-menu {
    /* 在小屏幕上确保滚动条可见 */
    scrollbar-width: auto;
  }
}

@media (max-width: 768px) {
  .nav-container {
    padding: 0 20px;
    gap: 10px;
  }
  
  .nav-logo .logo-text {
    font-size: 18px;
  }
  
  .nav-link {
    min-width: 80px;
    padding: 26px 12px;
    font-size: 14px;
  }
  
  .search-box {
    width: 180px;
  }
}

@media (max-width: 480px) {
  .nav-container {
    padding: 0 15px;
    gap: 8px;
  }
  
  .nav-logo .logo-text {
    font-size: 16px;
  }
  
  .nav-link {
    min-width: 70px;
    padding: 26px 10px;
    font-size: 13px;
  }
  
  .search-box {
    width: 150px;
  }
}
</style>