AI场景页面优化

hongjli

2025-04-09 bb08754212c3bf9a015f5450e1f77c0d8fbb468b

 src/components/layout/Navbar.tsx

@@ -30,6 +30,10 @@
          ? '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={{
        width: '1260px',
        height: '64px'
      }}
    >
      {/* AI科技感背景效果层 - 调整为更明显但不干扰交互 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
@@ -153,16 +157,16 @@

          {/* 导航菜单 - 增加z-index确保在动效之上 */}
          <div className="hidden md:flex items-center space-x-8 relative z-20">
            <Link 
              href="/platform" 
            <a 
              href="/ai-scene" 
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('platform')}
              onMouseEnter={() => setActiveMenu('ai-scene')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? 'text-[#6ADBFF]' : 'text-gray-100'}`}>数字员工平台</span>
              <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 === 'platform' ? 'w-full' : 'w-0'}`}></span>
            </Link>
                transition-all duration-300 ${activeMenu === 'ai-scene' ? 'w-full' : 'w-0'}`}></span>
            </a>
            
            <Link 
              href="/chat" 
@@ -187,14 +191,51 @@
            </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 className="relative group">
              <a 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>
                  
                  {/* 量子扫描线 */}
                  <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-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>

@@ -226,13 +267,13 @@
      >
        <div className="p-3 space-y-1 bg-gradient-to-b from-[#1E2B63] to-[#0A1033] 
          border-t border-[#6ADBFF]/10">
          <Link 
            href="/platform" 
          <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"
          >
            数字员工平台
          </Link>
            AI场景模拟
          </a>
          
          <Link 
            href="/chat" 
@@ -250,11 +291,26 @@
            训练场
          </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 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">
              <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">
              <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>