页面调整优化

hongjli

2025-06-05 d38a3ae95ce1ca3d736ec0f88f17973fa0d5a914

 src/components/layout/Navbar.tsx

@@ -2,77 +2,516 @@

import Link from 'next/link';
import Image from 'next/image';
import { useState } from 'react';
import { useState, useEffect, useRef } from 'react';
import { useUserStore } from '@/store/userStore';
import { getUserInfo } from '@/services/userService';
import { useRouter } from 'next/navigation';
import ApiService from '@/utils/api';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const [activeMenu, setActiveMenu] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [showUserDropdown, setShowUserDropdown] = useState(false);
  const { userInfo, token, setUserInfo } = useUserStore();
  const router = useRouter();
  const dropdownRef = useRef<HTMLDivElement>(null);

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

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

  // 获取用户信息
  useEffect(() => {
    const fetchUserInfo = async () => {
      // 检查localStorage中是否有token
      const storedToken = localStorage.getItem('token');
      if (!storedToken) {
        useUserStore.getState().clearUserInfo();
        return;
      }

      setIsLoading(true);
      setError(null);
      
      try {
        const response = await getUserInfo();
        if (response.code === 200 && response.data) {
          setUserInfo(response.data);
        } else {
          console.error('获取用户信息失败:', response.message);
          setError(response.message || '获取用户信息失败');
          // 如果是认证相关错误，清除用户信息和token
          if (response.code === 401) {
            useUserStore.getState().clearUserInfo();
            localStorage.removeItem('token');
          }
        }
      } catch (err) {
        console.error('获取用户信息出错:', err);
        setError('获取用户信息失败');
        // 发生错误时也清除token和用户信息
        localStorage.removeItem('token');
        useUserStore.getState().clearUserInfo();
      } finally {
        setIsLoading(false);
      }
    };

    fetchUserInfo();
  }, []); // 组件挂载时执行一次

  // 点击外部关闭下拉菜单
  useEffect(() => {
    const handleClickOutside = (event: MouseEvent) => {
      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
        setShowUserDropdown(false);
      }
    };

    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  const handleNavigation = async (path: string, e: React.MouseEvent) => {
    e.preventDefault();
    
    // 检查localStorage中是否有token
    const storedToken = localStorage.getItem('token');
    if (!storedToken) {
      window.location.href = '/login';
      return;
    }

    try {
      const response = await getUserInfo();
      if (response.code === 200 && response.data) {
        setUserInfo(response.data);
        window.location.href = path;
      } else {
        if (response.code === 401) {
          localStorage.removeItem('token');
          useUserStore.getState().clearUserInfo();
        }
        window.location.href = '/login';
      }
    } catch (err) {
      console.error('验证用户信息失败:', err);
      localStorage.removeItem('token');
      useUserStore.getState().clearUserInfo();
      window.location.href = '/login';
    }
  };

  const handleLogout = async () => {
    try {
      const response = await ApiService.post('/users/logout', {});
      if (response.code === 200) {
        // 清除本地存储的token和用户信息
        localStorage.removeItem('token');
        useUserStore.getState().clearUserInfo();
        window.location.href = '/'; // 改为跳转到首页
      } else {
        console.error('退出登录失败:', response.message);
      }
    } catch (err) {
      console.error('退出登录出错:', err);
    }
  };

  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">
            <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>
    <nav 
      className={`fixed top-0 z-50 transition-all duration-700 h-16 w-full lg:w-[1260px] ${
        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'
      }`}
      style={{
        left: '50%',
        transform: 'translateX(-50%)'
      }}
    >
      {/* AI科技感背景效果层 - 调整为更明显但不干扰交互 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* 神经网络连接层 - 提高对比度和可见性 */}
        <div className="absolute inset-0">
          {/* 水平连接 - 将位置更高以避免与菜单文字太靠近 */}
          <div className="absolute top-[25%] left-0 right-0 h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent animate-neural-pulse"></div>
          
          {/* 垂直连接 - 仅保留左侧但增强 */}
          <div className="absolute top-0 bottom-0 left-[15%] w-[1.5px] bg-gradient-to-b from-transparent via-[#6ADBFF]/60 to-transparent animate-neural-pulse-delay-2"></div>
        </div>
        
        {/* 量子波动层 - 增强波形效果 */}
        <div className="absolute inset-x-0 bottom-0 h-full flex items-end justify-center overflow-hidden">
          <div className="w-[800px] h-[40px] relative">
            <svg className="absolute inset-0 w-full h-full animate-quantum-wave" viewBox="0 0 800 40" xmlns="http://www.w3.org/2000/svg">
              <path d="M0,20 Q100,40 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient1)" strokeWidth="1.5" opacity="0.25" />
              <path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1.5" opacity="0.25" />
              <defs>
                <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#6ADBFF" stopOpacity="0" />
                  <stop offset="50%" stopColor="#6ADBFF" stopOpacity="1" />
                  <stop offset="100%" stopColor="#6ADBFF" stopOpacity="0" />
                </linearGradient>
                <linearGradient id="gradient2" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stopColor="#FF6A88" stopOpacity="0" />
                  <stop offset="50%" stopColor="#FF6A88" stopOpacity="1" />
                  <stop offset="100%" stopColor="#FF6A88" stopOpacity="0" />
                </linearGradient>
              </defs>
            </svg>
          </div>
        </div>
        
        {/* 增加神秘科技感的数据流效果 */}
        <div className="absolute inset-0 overflow-hidden pointer-events-none opacity-85">
          {/* 数据格点背景 */}
          <div className="absolute inset-0" style={{ backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)', backgroundSize: '20px 20px' }}></div>
          
          {/* 垂直数据流线条 */}
          <div className="absolute h-full w-[1px] left-[25%] bg-gradient-to-b from-transparent via-[#6ADBFF]/40 to-transparent animate-dataflowY"></div>
          <div className="absolute h-full w-[1px] left-[75%] bg-gradient-to-b from-transparent via-[#FF6A88]/40 to-transparent animate-dataflowY" style={{ animationDelay: '2s' }}></div>
          
          {/* 扫描线效果 */}
          <div className="absolute top-0 left-0 w-full h-[150%] bg-gradient-to-b from-transparent via-[#6ADBFF]/10 to-transparent animate-scanline" style={{ animationDuration: '8s' }}></div>
        </div>
        
        {/* AI数据扫描层 - 增强可见度 */}
        <div className="absolute inset-0 pointer-events-none">
          <div className="absolute top-0 bottom-0 left-0 right-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/15 to-[#6ADBFF]/0 animate-data-scan"></div>
        </div>
        
        {/* 边框装饰 - 提高亮度 */}
        <div className="absolute top-0 left-0 w-full h-[1.5px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
      </div>
      
      <div className="w-full px-4 md:px-6 lg:px-8 h-full mx-auto relative">
        <div className="flex items-center justify-between h-full">
          {/* Logo区域 */}
          <div className="flex-shrink-0 relative z-10 group">
            <a href="/" className="flex items-center">
              {/* 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>
            </a>
          </div>

          {/* Desktop Menu */}
          <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>
          {/* 红框中的动态科技感圆圈 - 更柔和的颜色 */}
          <div className="absolute left-[120px] md:left-[180px] lg:left-[230px] top-1/2 -translate-y-1/2 z-10 pointer-events-none">
            <div className="relative w-8 h-8">
              {/* 外圈 - 脉动效果，降低不透明度 */}
              <div className="absolute inset-0 rounded-full border-[1.5px] border-[#6ADBFF]/50 bg-[#1E2B63]/30 animate-tech-circle-pulse"></div>
              
              {/* 内圈 - 旋转渐变效果，降低不透明度 */}
              <div className="absolute inset-[3px] rounded-full border border-[#6ADBFF]/30 bg-[#131C41]/40 animate-tech-circle-rotate"></div>
              
              {/* 中心点 - 闪烁效果，降低亮度 */}
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-tech-center-blink"></div>
              </div>
              
              {/* 光晕效果，更加微妙 */}
              <div className="absolute -inset-1 rounded-full bg-[#6ADBFF]/3 blur-sm animate-tech-glow-pulse"></div>
            </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 className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2 pointer-events-none">
            <div className="relative h-4 w-32">
              <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>

          {/* Mobile Menu Button */}
          <div className="md:hidden">
          {/* 导航菜单 - 增加z-index确保在动效之上 */}
          <div className="hidden md:flex items-center space-x-4 lg:space-x-8 relative z-20">
            <a 
              href="/ai-scene" 
              className="relative px-2 lg:px-3 py-2 text-sm font-medium"
              onClick={(e) => handleNavigation('/ai-scene', e)}
              onMouseEnter={() => setActiveMenu('ai-scene')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'ai-scene' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>AI场景模拟</span>
              <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
                transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
            </a>
            
            <a 
              href="/chatroom" 
              className="relative px-2 lg:px-3 py-2 text-sm font-medium"
              onClick={(e) => handleNavigation('/chatroom', e)}
              onMouseEnter={() => setActiveMenu('chatroom')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'chatroom' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>聊天室</span>
              <span className={`absolute bottom-0 left-0 h-[2px] bg-gradient-to-r from-[#6ADBFF] to-transparent
                transition-all duration-300 ${activeMenu === 'chatroom' ? 'w-full' : 'w-0'}`}></span>
            </a>

            <a 
              href="/training" 
              className="relative px-2 lg:px-3 py-2 text-sm font-medium"
              onClick={(e) => handleNavigation('/training', e)}
              onMouseEnter={() => setActiveMenu('training')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'training' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>训练场</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>
            </a>
            
            {userInfo ? (
              // 用户信息显示
              <div className="relative" ref={dropdownRef}>
                <div 
                  className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 cursor-pointer group"
                  onClick={() => setShowUserDropdown(!showUserDropdown)}
                >
                  {/* 添加悬停背景效果 */}
                  <div className="absolute inset-0 bg-[#1E2B63]/0 group-hover:bg-[#1E2B63]/30 rounded-full transition-all duration-300"></div>
                  
                  {/* 用户图标 */}
                  <svg
                    className="w-5 h-5 text-[#6ADBFF] group-hover:text-[#FF6A88] transition-colors duration-300 mr-2"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>

                  <span className="relative z-10 bg-gradient-to-r from-[#6ADBFF] via-[#FF6A88] to-[#F5A800] bg-clip-text text-transparent font-medium">
                    {isLoading ? '加载中...' : userInfo.nickname}
                  </span>
                  
                  {/* 箭头图标 */}
                  <svg
                    className={`ml-2 h-4 w-4 text-[#6ADBFF] transition-all duration-300 transform ${
                      showUserDropdown ? 'rotate-180 text-[#FF6A88]' : ''
                    } group-hover:text-[#FF6A88]`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                  </svg>

                  {/* 添加光晕效果 */}
                  <div className="absolute inset-0 -z-10">
                    <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-full"></div>
                  </div>
                </div>
                
                {/* 下拉菜单 */}
                {showUserDropdown && (
                  <div className="absolute right-0 mt-2 w-48 rounded-xl shadow-lg overflow-hidden animate-fadeIn">
                    {/* 菜单背景 */}
                    <div className="backdrop-blur-xl bg-gradient-to-b from-[#1E2B63]/95 to-[#0A1033]/95 border border-[#6ADBFF]/20">
                      {/* 顶部装饰 */}
                      <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
                      
                      <div className="py-2">
                        <button
                          onClick={handleLogout}
                          className="w-full text-left px-5 py-3 text-sm text-white hover:bg-[#6ADBFF]/10 transition-all duration-300 flex items-center group relative overflow-hidden cursor-pointer"
                        >
                          {/* 悬停背景动画 */}
                          <div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/5 to-[#6ADBFF]/0 translate-x-[-100%] group-hover:translate-x-[100%] transition-transform duration-1000"></div>
                          
                          {/* 图标容器 */}
                          <div className="relative">
                            <div className="absolute -inset-1 bg-gradient-to-r from-[#6ADBFF]/0 via-[#6ADBFF]/10 to-[#6ADBFF]/0 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
                            <svg 
                              className="relative z-10 mr-3 h-5 w-5 text-[#6ADBFF] group-hover:text-[#FF6A88] transition-colors duration-300" 
                              fill="none" 
                              stroke="currentColor" 
                              viewBox="0 0 24 24"
                            >
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
                            </svg>
                          </div>
                          
                          {/* 文字 */}
                          <span className="relative z-10 font-medium group-hover:text-[#FF6A88] transition-colors duration-300">
                            退出登录
                          </span>
                          
                          {/* 右侧指示器 */}
                          <div className="absolute right-0 top-[10%] bottom-[10%] w-[2px] bg-gradient-to-b from-[#6ADBFF] to-[#FF6A88] transform scale-y-0 group-hover:scale-y-100 transition-transform duration-300"></div>
                        </button>
                      </div>
                      
                      {/* 底部装饰 */}
                      <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
                    </div>
                  </div>
                )}
                
                {error && (
                  <div className="absolute top-full mt-2 left-0 right-0 px-4 py-2 bg-red-500/90 text-white text-sm rounded-md">
                    {error}
                  </div>
                )}
              </div>
            ) : (
              <>
                {/* 登录按钮 */}
                <div className="relative group">
                  <a href="/login" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button">
                    <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300 quantum-pulse">登录</span>
                    
                    {/* 量子光线效果 */}
                    <div className="absolute inset-0 overflow-hidden">
                      <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
                      <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
                      <div className="absolute top-0 h-full w-full">
                        <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div>
                      </div>
                      <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
                    </div>
                  </a>
                </div>

                {/* 注册按钮 */}
                <div className="relative group -ml-2">
                  <a href="/register" className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button">
                    <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300 quantum-pulse">注册</span>
                    
                    {/* 量子光线效果 */}
                    <div className="absolute inset-0 overflow-hidden">
                      <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#FF6A88]/20 to-[#FF6A88]/40"></div>
                      <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 quantum-scan-line"></div>
                      <div className="absolute top-0 h-full w-full">
                        <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out"></div>
                      </div>
                      <div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
                    </div>
                  </a>
                </div>
              </>
            )}
          </div>

          {/* 移动端菜单按钮 */}
          <div className="md:hidden relative z-20">
            <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 cursor-pointer"
              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">
              登录
            </button>
      {/* 移动端菜单 */}
      <div 
        className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden relative z-20 ${
          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">
          <a 
            href="/ai-scene" 
            onClick={(e) => handleNavigation('/ai-scene', e)}
            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 cursor-pointer"
          >
            AI场景模拟
          </a>
          
          <a 
            href="/chatroom" 
            onClick={(e) => handleNavigation('/chatroom', e)}
            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 cursor-pointer"
          >
            聊天室
          </a>
          
          <a 
            href="/training" 
            onClick={(e) => handleNavigation('/training', e)}
            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 cursor-pointer"
          >
            训练场
          </a>
          
          <div className="flex space-x-2 px-4 py-3">
            <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group cursor-pointer">
              <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">登录</span>
              
              {/* 简化版量子效果 - 适合移动端 */}
              <div className="absolute inset-0 overflow-hidden">
                <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#6ADBFF]/20 to-[#6ADBFF]/40"></div>
                <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
              </div>
            </Link>

            <Link href="/register" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] text-white font-medium group cursor-pointer">
              <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300">注册</span>
              
              {/* 简化版量子效果 - 适合移动端 */}
              <div className="absolute inset-0 overflow-hidden">
                <div className="absolute inset-0 opacity-0 group-hover:opacity-30 transition-opacity duration-500 bg-gradient-to-r from-[#FF6A88]/20 to-[#FF6A88]/40"></div>
                <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
              </div>
            </Link>
          </div>
        </div>
      )}
      </div>
    </nav>
  );
};

export default Navbar; 
export default Navbar;