"use client";
|
|
import Link from 'next/link';
|
import Image from 'next/image';
|
import { useState, useEffect } from 'react';
|
import { useUserStore } from '@/store/userStore';
|
import { getUserInfo } from '@/services/userService';
|
|
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 { userInfo, token, setUserInfo } = useUserStore();
|
|
// 监听滚动事件，为导航栏添加滚动效果
|
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 () => {
|
if (!token) 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 || '获取用户信息失败');
|
// 如果是认证相关错误，清除用户信息
|
if (response.code === 401) {
|
useUserStore.getState().clearUserInfo();
|
}
|
}
|
} catch (err) {
|
console.error('获取用户信息出错:', err);
|
setError('获取用户信息失败');
|
} finally {
|
setIsLoading(false);
|
}
|
};
|
|
fetchUserInfo();
|
}, [token, setUserInfo]);
|
|
return (
|
<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>
|
</a>
|
</div>
|
|
{/* 红框中的动态科技感圆圈 - 更柔和的颜色 */}
|
<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>
|
|
{/* 中央装饰元素 - 移除中央闪烁点 */}
|
<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>
|
|
{/* 导航菜单 - 增加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"
|
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"
|
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"
|
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">
|
<div className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2 rounded-full bg-[#131C41]/60">
|
<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>
|
|
{/* 静态装饰效果 */}
|
<div className="absolute inset-0 overflow-hidden rounded-full">
|
{/* 背景渐变 */}
|
<div className="absolute inset-0 opacity-20 bg-gradient-to-r from-[#6ADBFF]/20 via-[#FF6A88]/20 to-[#F5A800]/20"></div>
|
|
{/* 柔和的光晕效果 */}
|
<div className="absolute inset-0 bg-gradient-to-r from-[#6ADBFF]/5 via-[#FF6A88]/5 to-[#F5A800]/5 blur-sm"></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="relative w-10 h-10 flex items-center justify-center focus:outline-none cursor-pointer"
|
aria-label="Toggle navigation menu"
|
>
|
<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>
|
|
{/* 移动端菜单 */}
|
<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"
|
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"
|
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"
|
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;
|
|
// 添加到CSS文件中的全局样式
|
// .hover:shadow-glow:hover {
|
// box-shadow: 0 0 15px rgba(255, 65, 108, 0.5);
|
// }
|
