导航栏优化

hongjli

2025-04-05 92405300f139ed1a7632b6601505e8dcdbc3a6e9

导航栏优化

 src/app/globals.css

@@ -40,46 +40,207 @@
  box-shadow: 0 0 15px rgba(106, 219, 255, 0.5);
}

/* 平滑渐入动画 */
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 1.5s ease-out forwards;
  animation-delay: 0.5s;
}

/* Logo圆环脉冲动画 */
@keyframes logo-ring-pulse {
  0% {
    opacity: 0.15;
    box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  25% {
    opacity: 0.35;
    box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
  20% {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(106, 219, 255, 0.3);
  }
  50% {
    opacity: 0.65;
    box-shadow: 0 0 0 2px rgba(136, 219, 255, 0.25);
  }
  75% {
    opacity: 0.35;
    box-shadow: 0 0 0 1px rgba(136, 219, 255, 0.2);
  40% {
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  100% {
    opacity: 0.15;
    box-shadow: 0 0 0 0 rgba(136, 219, 255, 0.15);
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
}

.animate-logo-pulse {
  animation: logo-ring-pulse 6s ease-in-out infinite;
  animation: logo-ring-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* 导航栏粒子动画 */
@keyframes particle-float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  80% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-30px) translateX(20px);
    opacity: 0;
  }
}

.animate-particle {
  animation: particle-float 8s ease-in-out infinite;
}

.animate-particle-delay-1 {
  animation: particle-float 8s ease-in-out 1s infinite;
}

.animate-particle-delay-2 {
  animation: particle-float 10s ease-in-out 2s infinite;
}

.animate-particle-delay-3 {
  animation: particle-float 7s ease-in-out 3s infinite;
}

.animate-particle-delay-4 {
  animation: particle-float 9s ease-in-out 4s infinite;
}

/* AI神经网络连接动画 */
@keyframes neural-pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}

.animate-neural-pulse {
  animation: neural-pulse 3s ease-in-out infinite;
}

.animate-neural-pulse-delay-1 {
  animation: neural-pulse 4s cubic-bezier(0.45, 0.05, 0.55, 0.95) 1s infinite;
}

.animate-neural-pulse-delay-2 {
  animation: neural-pulse-delay-2 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

/* AI数据处理光线效果 */
@keyframes data-scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-data-scan {
  animation: data-scan 12s linear infinite;
}

.animate-data-scan-delay {
  animation: data-scan 8s cubic-bezier(0.25, 0.1, 0.25, 1) 4s infinite;
}

/* AI运算节点闪烁 */
@keyframes compute-node {
  0% {
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  50% {
    box-shadow: 0 0 15px rgba(106, 219, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
}

.animate-compute-node {
  animation: compute-node 4s ease-in-out infinite;
}

.animate-compute-node-delay-1 {
  animation: compute-node 3s ease-in-out 1s infinite;
}

.animate-compute-node-delay-2 {
  animation: compute-node 3s ease-in-out 2s infinite;
}

/* 量子计算波动效果 */
@keyframes quantum-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}

.animate-quantum-wave {
  animation: quantum-wave 10s linear infinite;
}

/* 动态网格线动画 */
@keyframes grid-pulse {
  0%, 100% {
    opacity: 0.05;
    transform: scaleY(1);
  }
  50% {
    opacity: 0.15;
    transform: scaleY(1.05);
  }
}

.animate-grid-pulse {
  animation: grid-pulse 4s ease-in-out infinite;
}

/* 数据闪烁动画 */
@keyframes data-blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
}

.animate-data-blink {
  animation: data-blink 3s ease-in-out infinite;
}

.animate-data-blink-slow {
  animation: data-blink-slow 5s ease-in-out infinite;
}

/* AI数据流效果动画 */
@keyframes dataflowY {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
    background-position: 0 -200px;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
    background-position: 0 200px;
  }
}

@@ -98,7 +259,9 @@
}

.animate-dataflowY {
  animation: dataflowY 3s infinite;
  background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
  background-size: 100% 200px;
  animation: dataflowY 8s linear infinite;
}

.animate-dataflowX {
@@ -133,7 +296,7 @@
}

.animate-scanline {
  animation: scanline 2s linear infinite;
  animation: scanline 8s linear infinite;
}

/* 基础渐变动画 */
@@ -181,3 +344,257 @@
  );
  animation: shimmer 2s infinite;
}

/* 导航栏动态效果动画 */
@keyframes logo-ring-pulse {
  0% {
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  20% {
    opacity: 0.7;
    box-shadow: 0 0 10px rgba(106, 219, 255, 0.3);
  }
  40% {
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  100% {
    opacity: 0.4;
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
}

@keyframes neural-pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes neural-pulse-delay-2 {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.2;
  }
}

@keyframes compute-node {
  0% {
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
  50% {
    box-shadow: 0 0 15px rgba(106, 219, 255, 0.4);
  }
  100% {
    box-shadow: 0 0 0 rgba(106, 219, 255, 0);
  }
}

@keyframes quantum-wave {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50px);
  }
}

@keyframes data-scan {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* 新增科技感动画效果 */
@keyframes data-blink {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
}

@keyframes data-blink-slow {
  0%, 100% {
    opacity: 0;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes dataflowY {
  0% {
    background-position: 0 -200px;
  }
  100% {
    background-position: 0 200px;
  }
}

@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

/* 动画类应用 */
.animate-logo-pulse {
  animation: logo-ring-pulse 5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-neural-pulse {
  animation: neural-pulse 3s ease-in-out infinite;
}

.animate-neural-pulse-delay-2 {
  animation: neural-pulse-delay-2 3s ease-in-out infinite;
  animation-delay: 1.5s;
}

.animate-compute-node {
  animation: compute-node 4s ease-in-out infinite;
}

.animate-quantum-wave {
  animation: quantum-wave 10s linear infinite;
}

.animate-data-scan {
  animation: data-scan 12s linear infinite;
}

.animate-data-blink {
  animation: data-blink 3s ease-in-out infinite;
}

.animate-data-blink-slow {
  animation: data-blink-slow 5s ease-in-out infinite;
}

.animate-dataflowY {
  background-image: linear-gradient(to bottom, transparent 0%, rgba(106, 219, 255, 0.4) 50%, transparent 100%);
  background-size: 100% 200px;
  animation: dataflowY 8s linear infinite;
}

.animate-scanline {
  animation: scanline 8s linear infinite;
}

.animate-fade-in {
  animation: fadeIn 1.5s ease-in-out forwards;
  animation-delay: 0.5s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 悬停效果增强 */
.navbar-hover-glow:hover {
  box-shadow: 0 5px 20px rgba(106, 219, 255, 0.3);
}

/* 标红框圆圈的单一简化动画效果 */
@keyframes circle-pulse {
  0%, 100% {
    opacity: 0.2;
    border-color: rgba(106, 219, 255, 0.4);
  }
  50% {
    opacity: 0.8;
    border-color: rgba(106, 219, 255, 0.8);
  }
}

.animate-circle-pulse {
  animation: circle-pulse 4s ease-in-out infinite;
}

/* 红框中科技感圆圈动画效果 - 更柔和的版本 */
@keyframes tech-circle-pulse {
  0%, 100% {
    opacity: 0.3;
    border-color: rgba(106, 219, 255, 0.2);
  }
  50% {
    opacity: 0.6;
    border-color: rgba(106, 219, 255, 0.5);
  }
}

@keyframes tech-circle-rotate {
  0% {
    transform: rotate(0deg);
    background-color: rgba(19, 28, 65, 0.3);
  }
  50% {
    background-color: rgba(19, 28, 65, 0.5);
  }
  100% {
    transform: rotate(360deg);
    background-color: rgba(19, 28, 65, 0.3);
  }
}

@keyframes tech-center-blink {
  0%, 100% {
    opacity: 0.1;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.1);
  }
}

@keyframes tech-glow-pulse {
  0%, 100% {
    opacity: 0.05;
    box-shadow: 0 0 3px rgba(106, 219, 255, 0.05);
  }
  50% {
    opacity: 0.15;
    box-shadow: 0 0 8px rgba(106, 219, 255, 0.15);
  }
}

.animate-tech-circle-pulse {
  animation: tech-circle-pulse 8s ease-in-out infinite;
}

.animate-tech-circle-rotate {
  animation: tech-circle-rotate 30s linear infinite;
}

.animate-tech-center-blink {
  animation: tech-center-blink 5s ease-in-out infinite;
}

.animate-tech-glow-pulse {
  animation: tech-glow-pulse 8s ease-in-out infinite;
}

 src/components/layout/Navbar.tsx

@@ -25,15 +25,65 @@

  return (
    <nav 
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-300 ${
      className={`fixed top-0 left-0 w-full z-50 transition-all duration-700 ${
        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'
      }`}
    >
      <div className="absolute top-0 left-0 w-full h-full overflow-hidden opacity-15">
        <div className="absolute top-0 left-0 w-[60%] h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
        <div className="absolute top-0 right-0 w-[30%] h-[1px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent"></div>
      {/* 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative">
@@ -73,49 +123,65 @@
            </Link>
          </div>

          {/* 中央装饰元素 */}
          <div className="hidden lg:flex absolute left-1/2 transform -translate-x-1/2 top-1/2 -translate-y-1/2">
            <div className="relative h-4 w-32">
              <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                <span className="block w-1 h-1 rounded-full bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] opacity-80 animate-ping"></span>
          {/* 红框中的动态科技感圆圈 - 更柔和的颜色 */}
          <div className="absolute 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>

          {/* 导航菜单 */}
          <div className="hidden md:flex items-center space-x-8">
          {/* 导航菜单 - 增加z-index确保在动效之上 */}
          <div className="hidden md:flex items-center space-x-8 relative z-20">
            <Link 
              href="/platform" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('platform')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">数字员工平台</span>
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'platform' ? '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 === 'platform' ? 'w-full' : 'w-0'}`}></span>
            </Link>
            
            <Link 
              href="/chat" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('chat')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">聊天室</span>
              <span className={`relative z-10 transition-colors duration-300 ${activeMenu === 'chat' ? '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>
            
            <Link 
              href="/training" 
              className="relative px-3 py-2 text-gray-100 text-sm font-medium"
              className="relative px-3 py-2 text-sm font-medium"
              onMouseEnter={() => setActiveMenu('training')}
              onMouseLeave={() => setActiveMenu('')}
            >
              <span className="relative z-10">训练场</span>
              <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>
@@ -133,7 +199,7 @@
          </div>

          {/* 移动端菜单按钮 */}
          <div className="md:hidden">
          <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"
@@ -154,7 +220,7 @@

      {/* 移动端菜单 */}
      <div 
        className={`md:hidden transition-all duration-300 ease-in-out overflow-hidden ${
        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'
        }`}
      >