wu-lazy-cloud-network/wlcn-website/src/components/Header.vue

<template>
  <header class="header" :class="{ 'header-scrolled': isScrolled }">
    <div class="container">
      <div class="header-content">
        <div class="logo">
          <router-link to="/" class="logo-link">
            <el-icon class="logo-icon"><Connection /></el-icon>
            <span class="logo-text">Wu-Lazy-Cloud-Network</span>
          </router-link>
        </div>
        
        <nav class="nav" :class="{ 'nav-mobile': isMobileMenuOpen }">
          <router-link to="/" class="nav-link" @click="closeMobileMenu">首页</router-link>
          <router-link to="/features" class="nav-link" @click="closeMobileMenu">功能特性</router-link>
          <router-link to="/architecture" class="nav-link" @click="closeMobileMenu">系统架构</router-link>
          <router-link to="/docs" class="nav-link" @click="closeMobileMenu">使用文档</router-link>
          <router-link to="/download" class="nav-link" @click="closeMobileMenu">下载安装</router-link>
          <router-link to="/about" class="nav-link" @click="closeMobileMenu">关于我们</router-link>
        </nav>
        
        <div class="header-actions">
          <a href="https://gitee.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
            <el-icon><Platform /></el-icon>
            Gitee
          </a>
          <a href="https://github.com/wujiawei1207537021/wu-lazy-cloud-network" target="_blank" class="btn btn-outline">
            <el-icon><Platform /></el-icon>
            GitHub
          </a>
        </div>
        
        <div class="mobile-menu-toggle" @click="toggleMobileMenu">
          <el-icon><Menu /></el-icon>
        </div>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { Connection, Platform, Menu } from '@element-plus/icons-vue'

const isScrolled = ref(false)
const isMobileMenuOpen = ref(false)

const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
}

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value
}

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style lang="scss" scoped>
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-light);
  transition: all 0.3s ease;
  
  &.header-scrolled {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-light);
  }
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.logo {
  .logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 18px;
    
    &:hover {
      color: var(--primary-color);
    }
  }
  
  .logo-icon {
    font-size: 24px;
    color: var(--primary-color);
    margin-right: 8px;
  }
  
  .logo-text {
    @media (max-width: 768px) {
      display: none;
    }
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 32px;
  
  .nav-link {
    text-decoration: none;
    color: var(--text-regular);
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
    
    &:hover,
    &.router-link-active {
      color: var(--primary-color);
    }
    
    &.router-link-active::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--primary-color);
      border-radius: 1px;
    }
  }
  
  @media (max-width: 768px) {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    flex-direction: column;
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid var(--border-light);
    transform: translateY(-100%);
    opacity: 0;
    transition: all 0.3s ease;
    
    &.nav-mobile {
      transform: translateY(0);
      opacity: 1;
    }
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  
  .btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 14px;
    
    .el-icon {
      font-size: 16px;
    }
  }
  
  @media (max-width: 768px) {
    display: none;
  }
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.3s ease;
  
  &:hover {
    background-color: var(--background-light);
  }
  
  .el-icon {
    font-size: 20px;
    color: var(--text-regular);
  }
  
  @media (max-width: 768px) {
    display: flex;
  }
}
</style>