聊天页面优化

hongjli

2025-04-10 36d9b7b4959bcd44acf0f15cd270ea275f4ee831

 src/components/layout/ClientLayoutContent.tsx

@@ -12,12 +12,17 @@
  const [isClient, setIsClient] = useState(false);
  const [hasError, setHasError] = useState(false);
  const pathname = usePathname();
  const isLoginPage = pathname === '/login';
  const isHomePage = pathname === '/';

  useEffect(() => {
    setIsClient(true);
  }, []);

  // 判断当前页面
  const isLoginPage = pathname === '/login';
  const isRegisterPage = pathname === '/register';
  const isHomePage = pathname === '/';
  const isAIScenePage = pathname === '/ai-scene';
  const isAISceneChatPage = pathname.startsWith('/ai-scene/chat');

  // 添加错误捕获
  useEffect(() => {
@@ -59,132 +64,131 @@
      return (
        <div className="animate-fadeIn">
          <div className="flex flex-col min-h-screen">
            <Navbar />
            <main className={`flex-1 ${isHomePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}>
            {!isLoginPage && !isRegisterPage && <Navbar />}
            <main className={`flex-1 ${isHomePage || isAIScenePage ? '' : 'bg-gradient-to-b from-[var(--ai-surface)] to-white'} pt-0 mt-0`}>
              {children}
            </main>
            <footer className="relative z-20 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] text-white py-10 overflow-hidden">
              {/* 科技感动态背景元素 */}
              <div className="absolute inset-0 overflow-hidden pointer-events-none">
                {/* 网格底纹 */}
                <div className="absolute inset-0 opacity-5" 
                  style={{ 
                    backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)', 
                    backgroundSize: '20px 20px' 
                  }}>
                </div>
                
                {/* 水平光线 */}
                <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent transform -translate-y-1/2"></div>
                
                {/* 垂直光线 */}
                <div className="absolute left-1/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#5E72EB]/30 to-transparent"></div>
                <div className="absolute left-3/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent"></div>
                
                {/* 量子粒子点 - 使用条件渲染 */}
                {isClient && (
                  <>
                    <div className="absolute top-[20%] left-[10%] w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-pulse"></div>
                    <div className="absolute top-[70%] left-[90%] w-1.5 h-1.5 rounded-full bg-[#FF6A88]/60 animate-pulse" style={{animationDelay: '1.5s'}}></div>
                    <div className="absolute top-[40%] left-[60%] w-1 h-1 rounded-full bg-[#5E72EB]/60 animate-pulse" style={{animationDelay: '0.8s'}}></div>
                  </>
                )}
                
                {/* 底部波浪线 */}
                <div className="absolute bottom-0 w-full h-8 opacity-10">
                  <svg className="w-full h-full" viewBox="0 0 1200 30" preserveAspectRatio="none">
                    <path d="M0,10 Q150,20 300,10 T600,10 T900,10 T1200,10 V30 H0 Z" fill="url(#footerGradient)"></path>
                    <defs>
                      <linearGradient id="footerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                        <stop offset="0%" stopColor="#6ADBFF" />
                        <stop offset="50%" stopColor="#5E72EB" />
                        <stop offset="100%" stopColor="#6ADBFF" />
                      </linearGradient>
                    </defs>
                  </svg>
                </div>
              </div>
              
              <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#6ADBFF]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(106,219,255,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#F5A800]">关于我们</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        公司介绍
                      </li>
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        联系方式
                      </li>
                      <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                        加入我们
                      </li>
                    </ul>
            {!isLoginPage && !isRegisterPage && !isAISceneChatPage && (
              <footer className="relative z-20 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] text-white py-10 overflow-hidden">
                {/* 科技感动态背景元素 */}
                <div className="absolute inset-0 overflow-hidden pointer-events-none">
                  {/* 网格底纹 */}
                  <div className="absolute inset-0 opacity-5" 
                    style={{ 
                      backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.3) 1px, transparent 1px)', 
                      backgroundSize: '20px 20px' 
                    }}>
                  </div>
                  
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#5E72EB]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(94,114,235,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#5E72EB] to-[#F5A800]">产品服务</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        数字员工
                      </li>
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        智能客服
                      </li>
                      <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                        APS解决方案
                      </li>
                    </ul>
                  </div>
                  {/* 水平光线 */}
                  <div className="absolute top-1/2 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/40 to-transparent transform -translate-y-1/2"></div>
                  
                  <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#FF6A88]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(255,106,136,0.2)]">
                    <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#F5A800]">帮助中心</h3>
                    <ul className="space-y-3">
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        使用指南
                      </li>
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        常见问题
                      </li>
                      <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                        <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                        技术支持
                      </li>
                    </ul>
                  {/* 垂直光线 */}
                  <div className="absolute left-1/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#5E72EB]/30 to-transparent"></div>
                  <div className="absolute left-3/4 top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent"></div>
                  
                  {/* 量子粒子点 - 使用条件渲染 */}
                  {isClient && (
                    <>
                      <div className="absolute top-[20%] left-[10%] w-1 h-1 rounded-full bg-[#6ADBFF]/60 animate-pulse"></div>
                      <div className="absolute top-[70%] left-[90%] w-1.5 h-1.5 rounded-full bg-[#FF6A88]/60 animate-pulse" style={{animationDelay: '1.5s'}}></div>
                      <div className="absolute top-[40%] left-[60%] w-1 h-1 rounded-full bg-[#5E72EB]/60 animate-pulse" style={{animationDelay: '0.8s'}}></div>
                    </>
                  )}
                  
                  {/* 底部波浪线 */}
                  <div className="absolute bottom-0 w-full h-8 opacity-10">
                    <svg className="w-full h-full" viewBox="0 0 1200 30" preserveAspectRatio="none">
                      <path d="M0,10 Q150,20 300,10 T600,10 T900,10 T1200,10 V30 H0 Z" fill="url(#footerGradient)"></path>
                      <defs>
                        <linearGradient id="footerGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                          <stop offset="0%" stopColor="#6ADBFF" />
                          <stop offset="50%" stopColor="#5E72EB" />
                          <stop offset="100%" stopColor="#FF6A88" />
                        </linearGradient>
                      </defs>
                    </svg>
                  </div>
                </div>
                
                <div className="mt-10 pt-6 border-t border-[#6ADBFF]/10 text-center relative">
                  {/* 量子连接特效 */}
                  <div className="absolute top-0 left-1/3 right-1/3 h-[1px]">
                    <div className="relative w-full h-full">
                      <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
                      <div className="absolute top-0 left-1/2 h-6 w-[1px] -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#6ADBFF] to-transparent opacity-70"></div>
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#6ADBFF]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(106,219,255,0.2)]">
                      <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#6ADBFF] to-[#F5A800]">关于我们</h3>
                      <ul className="space-y-3">
                        <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                          公司介绍
                        </li>
                        <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                          联系方式
                        </li>
                        <li className="hover:text-[#6ADBFF] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#6ADBFF] rounded-full mr-2 opacity-70"></span>
                          加入我们
                        </li>
                      </ul>
                    </div>
                    
                    <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#5E72EB]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(94,114,235,0.2)]">
                      <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#5E72EB] to-[#F5A800]">产品服务</h3>
                      <ul className="space-y-3">
                        <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                          数字员工
                        </li>
                        <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                          智能客服
                        </li>
                        <li className="hover:text-[#5E72EB] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#5E72EB] rounded-full mr-2 opacity-70"></span>
                          APS解决方案
                        </li>
                      </ul>
                    </div>
                    
                    <div className="backdrop-blur-sm bg-white/5 rounded-lg p-6 border border-[#FF6A88]/10 transition-transform hover:scale-[1.02] hover:shadow-[0_0_15px_rgba(255,106,136,0.2)]">
                      <h3 className="text-lg font-semibold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-[#FF6A88] to-[#F5A800]">帮助中心</h3>
                      <ul className="space-y-3">
                        <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                          使用指南
                        </li>
                        <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                          常见问题
                        </li>
                        <li className="hover:text-[#FF6A88] transition-colors cursor-pointer flex items-center">
                          <span className="inline-block w-1.5 h-1.5 bg-[#FF6A88] rounded-full mr-2 opacity-70"></span>
                          技术支持
                        </li>
                      </ul>
                    </div>
                  </div>
                  
                  {/* 底部脉冲指示器 - 使用条件渲染 */}
                  {isClient ? (
                  <div className="mt-10 pt-6 border-t border-[#6ADBFF]/10 text-center relative">
                    {/* 量子连接特效 */}
                    <div className="absolute top-0 left-1/3 right-1/3 h-[1px]">
                      <div className="relative w-full h-full">
                        <div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent"></div>
                        <div className="absolute top-0 left-1/2 h-6 w-[1px] -translate-x-1/2 -translate-y-1/2 bg-gradient-to-b from-[#6ADBFF] to-transparent opacity-70"></div>
                      </div>
                    </div>
                    
                    {/* 底部脉冲指示器 */}
                    <div className="flex items-center justify-center mb-4">
                      <span className="inline-block w-2 h-2 bg-[#6ADBFF] rounded-full mr-3 animate-pulse"></span>
                      <span className="inline-block w-2 h-2 bg-[#5E72EB] rounded-full mx-3 animate-pulse" style={{animationDelay: '0.3s'}}></span>
                      <span className="inline-block w-2 h-2 bg-[#FF6A88] rounded-full ml-3 animate-pulse" style={{animationDelay: '0.6s'}}></span>
                    </div>
                  ) : (
                    <div className="h-4 mb-4"></div>
                  )}
                  <p className="text-gray-300 text-sm">© 2024 帷幄君成. All rights reserved.</p>
                    
                    <p className="text-sm text-gray-400">© 2025 帷幄君成. All rights reserved.</p>
                  </div>
                </div>
              </div>
            </footer>
              </footer>
            )}
          </div>
        </div>
      );