显示用户昵称

hongjli

2025-04-16 ed1c1f25a544eaf08c7a7bcd3af93d7d26c8594e

 src/components/layout/Navbar.tsx

@@ -3,11 +3,16 @@
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(() => {
@@ -23,13 +28,48 @@
    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 left-0 w-full z-50 transition-all duration-700 ${
      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">
@@ -86,11 +126,11 @@
        <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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
        <div className="flex items-center justify-between">
      <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">
            <Link href="/" className="flex items-center">
            <a href="/" className="flex items-center">
              {/* Logo主体 */}
              <div className="flex items-center">
                <div className="relative w-11 h-11">
@@ -120,11 +160,11 @@
                  </h1>
                </div>
              </div>
            </Link>
            </a>
          </div>

          {/* 红框中的动态科技感圆圈 - 更柔和的颜色 */}
          <div className="absolute left-[230px] top-1/2 -translate-y-1/2 z-10 pointer-events-none">
          <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>
@@ -152,72 +192,107 @@
          </div>

          {/* 导航菜单 - 增加z-index确保在动效之上 */}
          <div className="hidden md:flex items-center space-x-8 relative z-20">
            <Link 
          <div className="hidden md:flex items-center space-x-4 lg:space-x-8 relative z-20">
            <a 
              href="/ai-scene" 
              className="relative px-3 py-2 text-sm font-medium"
              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>
            </Link>
            </a>
            
            <Link 
              href="/chat" 
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('chat')}
            <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 === 'chat' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>聊天室</span>
              <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 === 'chat' ? 'w-full' : 'w-0'}`}></span>
            </Link>
                transition-all duration-300 ${activeMenu === 'chatroom' ? 'w-full' : 'w-0'}`}></span>
            </a>
            
            <Link 
            <a 
              href="/training" 
              className="relative px-3 py-2 text-sm font-medium"
              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>
            </Link>
            </a>
            
            {/* 登录按钮 */}
            <div className="relative group ml-6">
              <Link href="/login" className="relative overflow-hidden flex items-center justify-center 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>
            {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 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-[20%] 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" style={{transitionDelay: '0.1s'}}></div>
                    <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" style={{transitionDelay: '0.2s'}}></div>
                    <div className="absolute left-[80%] 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" style={{transitionDelay: '0.3s'}}></div>
                  {/* 静态装饰效果 */}
                  <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 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>
            </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"
              className="relative w-10 h-10 flex items-center justify-center focus:outline-none cursor-pointer"
              aria-label="Toggle navigation menu"
            >
              <div className="relative">
@@ -241,32 +316,32 @@
      >
        <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] 
          border-t border-[#6ADBFF]/10">
          <Link 
          <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"
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
          >
            AI场景模拟
          </Link>
          </a>
          
          <Link 
            href="/chat" 
          <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"
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
          >
            聊天室
          </Link>
          </a>
          
          <Link 
          <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"
              hover:bg-[#3B4888]/20 rounded-r-md transition-all duration-200 cursor-pointer"
          >
            训练场
          </Link>
          </a>
          
          <div className="pt-3 pb-1">
            <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">
          <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>
              
              {/* 简化版量子效果 - 适合移动端 */}
@@ -275,6 +350,16 @@
                <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>