导航栏优化

hongjli

2025-04-05 846f92d2fe08ab9b8b14e8b949f00bb4529974d2

 src/components/layout/Navbar.tsx

@@ -2,77 +2,203 @@

import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import { useState, useEffect } from 'react';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [activeMenu, setActiveMenu] = useState('');

  // 监听滚动事件，为导航栏添加滚动效果
  useEffect(() => {
    const handleScroll = () => {
      if (window.scrollY > 10) {
        setScrolled(true);
      } else {
        setScrolled(false);
      }
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <nav className="fixed top-0 left-0 w-full bg-[#2F3C7E] text-white z-50">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex items-center justify-between h-16">
          {/* Logo */}
          <div className="flex-shrink-0">
    <nav 
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
        scrolled 
          ? 'bg-gradient-to-r from-[#1E2B63]/95 to-[#0A1033]/95 backdrop-blur-md shadow-lg py-2' 
          : 'bg-gradient-to-r from-[#1E2B63] to-[#0A1033] py-2'
      }`}
    >
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15">
        <div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
        <div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div>
      </div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="flex items-center justify-between">
          {/* Logo区域 */}
          <div className="flex-shrink-0 relative z-10 group">
            <Link href="/" className="flex items-center">
              <div className="w-8 h-8 bg-[#e1c7f1] rounded-lg flex items-center justify-center">
                <span className="text-[#2F3C7E] text-sm font-bold">帷</span>
              {/* Logo主体 */}
              <div className="flex items-center">
                <div className="relative w-11 h-11">
                  {/* 基础Logo背景 */}
                  <div className="absolute inset-0 rounded-full bg-gradient-to-tr from-[#1E2B63] to-[#131C41] shadow-inner"></div>
                  
                  {/* 发光圆环 - 闪烁效果 */}
                  <div className="absolute inset-0 rounded-full border-[1.5px] border-[#88dbff] animate-logo-pulse"></div>
                  
                  {/* Logo图片 */}
                  <Image 
                    src="/images/logo.jpg" 
                    alt="帷幄君成Logo" 
                    width={44}
                    height={44}
                    className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[85%] h-[85%] rounded-full object-cover z-10"
                    priority
                  />
                </div>
                
                {/* 公司名称 */}
                <div className="ml-3 relative">
                  <h1 className="text-xl font-bold text-white tracking-wide relative">
                    帷幄君成
                    <span className="absolute -bottom-0.5 left-0 w-full h-[2px] bg-gradient-to-r 
                      from-[#FF6A88] to-[#6ADBFF]"></span>
                  </h1>
                </div>
              </div>
              <span className="ml-2 text-xl font-bold">帷幄君成</span>
            </Link>
          </div>

          {/* Desktop Menu */}
          {/* 中央装饰元素 */}
          <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
            <div className="relative h-4 w-32">
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                <span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span>
              </div>
              <div className="absolute top-1/2 left-0 right-0 h-[1px]">
                <div className="h-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
              </div>
            </div>
          </div>

          {/* 导航菜单 */}
          <div className="hidden md:flex items-center space-x-8">
            <Link href="/platform" className="hover:text-[#FBEAEB]">数字员工平台</Link>
            <Link href="/chat" className="hover:text-[#FBEAEB]">聊天室</Link>
            <Link href="/training" className="hover:text-[#FBEAEB]">训练场</Link>
            <Link 
              href="/platform" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('platform')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">数字员工平台</span>
              <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
                transition-all duration-300 ${activeMenu === 'platform' ? 'w-full' : 'w-0'}`}></span>
            </Link>
            
            <Link 
              href="/chat" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('chat')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">聊天室</span>
              <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
                transition-all duration-300 ${activeMenu === 'chat' ? 'w-full' : 'w-0'}`}></span>
            </Link>
            
            <Link 
              href="/training" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('training')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">训练场</span>
              <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
                transition-all duration-300 ${activeMenu === 'training' ? 'w-full' : 'w-0'}`}></span>
            </Link>
            
            {/* 登录按钮 */}
            <div className="relative group ml-6">
              <button className="relative bg-gradient-to-r from-[#5E72EB] to-[#FF9190] px-7 py-2 
                rounded-full text-white font-medium overflow-hidden shadow-[0_2px_10px_rgba(94,114,235,0.3)] 
                hover:shadow-[0_5px_15px_rgba(94,114,235,0.5)] transition-shadow duration-300">
                <span className="relative z-10">登录</span>
                <div className="absolute inset-0 bg-gradient-to-r from-[#FF9190] to-[#5E72EB] opacity-0 
                  group-hover:opacity-100 transition-opacity duration-500"></div>
              </button>
            </div>
          </div>

          {/* Login Button */}
          <div className="hidden md:flex items-center">
            <button className="bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
              登录
            </button>
          </div>

          {/* Mobile Menu Button */}
          {/* 移动端菜单按钮 */}
          <div className="md:hidden">
            <button
              onClick={() => setIsMenuOpen(!isMenuOpen)}
              className="inline-flex items-center justify-center p-2 rounded-md text-white hover:text-[#FBEAEB]"
              className="relative w-10 h-10 flex items-center justify-center focus:outline-none"
              aria-label="Toggle navigation menu"
            >
              <svg
                className="h-6 w-6"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                {isMenuOpen ? (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                ) : (
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
                )}
              </svg>
              <div className="relative">
                <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 
                  transform ${isMenuOpen ? 'rotate-45 translate-y-1.5' : ''}`}></span>
                <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 
                  mt-1 ${isMenuOpen ? 'opacity-0' : ''}`}></span>
                <span className={`block w-5 h-[2px] bg-white rounded-full transition-all duration-300 
                  mt-1 transform ${isMenuOpen ? '-rotate-45 -translate-y-1.5' : ''}`}></span>
              </div>
            </button>
          </div>
        </div>
      </div>

      {/* Mobile Menu */}
      {isMenuOpen && (
        <div className="md:hidden">
          <div className="px-2 pt-2 pb-3 space-y-1 sm:px-3">
            <Link href="/platform" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">数字员工平台</Link>
            <Link href="/chat" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">聊天室</Link>
            <Link href="/training" className="block px-3 py-2 hover:bg-[#FBEAEB] hover:text-[#2F3C7E]">训练场</Link>
            <button className="w-full mt-4 bg-gradient-to-r from-[#FF416C] to-[#FF4B2B] px-6 py-2 rounded-full">
      {/* 移动端菜单 */}
      <div 
        className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
          isMenuOpen ? 'max-h-80 opacity-100' : 'max-h-0 opacity-0'
        }`}
      >
        <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] 
          border-t border-[#6ADBFF]/10">
          <Link 
            href="/platform" 
            className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] 
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
          >
            数字员工平台
          </Link>
          
          <Link 
            href="/chat" 
            className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] 
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
          >
            聊天室
          </Link>
          
          <Link 
            href="/training" 
            className="block px-4 py-3 text-white border-l-2 border-transparent hover:border-[#6ADBFF] 
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200"
          >
            训练场
          </Link>
          
          <div className="pt-3 pb-1">
            <button className="w-full bg-gradient-to-r from-[#5E72EB] to-[#FF9190] 
              text-white font-medium px-6 py-2 rounded-md">
              登录
            </button>
          </div>
        </div>
      )}
      </div>
    </nav>
  );
};

export default Navbar; 
export default Navbar;

// 添加到CSS文件中的全局样式
// .hover:shadow-glow:hover {
//   box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
// }