首页优化

hongjli

2025-04-16 c24796b17ad8d027822a5590c42a2f61f98b460c

 src/components/layout/Navbar.tsx

@@ -5,6 +5,7 @@
import { useState, useEffect } from 'react';
import { useUserStore } from '@/store/userStore';
import { getUserInfo } from '@/services/userService';
import { useRouter } from 'next/navigation';

const Navbar = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -13,6 +14,7 @@
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { userInfo, token, setUserInfo } = useUserStore();
  const router = useRouter();

  // 监听滚动事件，为导航栏添加滚动效果
  useEffect(() => {
@@ -31,8 +33,13 @@
  // 获取用户信息
  useEffect(() => {
    const fetchUserInfo = async () => {
      if (!token) return;
      
      // 检查localStorage中是否有token
      const storedToken = localStorage.getItem('token');
      if (!storedToken) {
        useUserStore.getState().clearUserInfo();
        return;
      }

      setIsLoading(true);
      setError(null);
      
@@ -43,21 +50,55 @@
        } 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();
  }, [token, setUserInfo]);
  }, []); // 组件挂载时执行一次

  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';
    }
  };

  return (
    <nav 
@@ -196,6 +237,7 @@
            <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('')}
            >
@@ -207,6 +249,7 @@
            <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('')}
            >
@@ -214,10 +257,11 @@
              <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('')}
            >
@@ -229,19 +273,10 @@
            {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">
                <div className="relative overflow-hidden flex items-center justify-center px-4 lg:px-7 py-2">
                  <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">
@@ -318,24 +353,24 @@
          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"
            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" 
            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"
            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" 
            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"
            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>
@@ -367,9 +402,4 @@
  );
};

export default Navbar;

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