"use client";
|
|
import { ReactNode, useState, useEffect } from 'react';
|
import { usePathname } from 'next/navigation';
|
import Navbar from './Navbar';
|
|
interface ClientLayoutContentProps {
|
children: ReactNode;
|
}
|
|
export default function ClientLayoutContent({ children }: ClientLayoutContentProps) {
|
const [isClient, setIsClient] = useState(false);
|
const [hasError, setHasError] = useState(false);
|
const pathname = usePathname();
|
const isLoginPage = pathname === '/login';
|
const isRegisterPage = pathname === '/register';
|
const isHomePage = pathname === '/';
|
const isAIScenePage = pathname.startsWith('/ai-scene');
|
|
useEffect(() => {
|
setIsClient(true);
|
}, []);
|
|
// 添加错误捕获
|
useEffect(() => {
|
if (hasError) {
|
console.error("渲染错误被捕获：可能是JSX结构不正确导致的水合错误");
|
}
|
}, [hasError]);
|
|
// 错误处理函数
|
const handleError = () => {
|
setHasError(true);
|
return (
|
<div className="min-h-screen bg-[#0A1033] text-white p-8">
|
<div className="max-w-lg mx-auto mt-20 bg-red-900/30 p-6 rounded-lg border border-red-500">
|
<h2 className="text-xl font-bold text-red-400 mb-4">页面渲染错误</h2>
|
<p className="text-white mb-4">页面代码中可能存在JSX结构错误，请检查标签闭合是否正确。</p>
|
<p className="text-gray-300 text-sm">具体错误: 可能是motion.div标签未正确闭合或嵌套层级有问题</p>
|
</div>
|
</div>
|
);
|
};
|
|
// 此函数可在特殊情况下用于处理过渡
|
const renderContent = () => {
|
if (!isClient) {
|
// 服务器端或客户端初始渲染时显示静态内容
|
return (
|
<div className="min-h-screen bg-[#0A1033] text-white">
|
<div className="opacity-50">
|
{/* 静态内容版本，无动画 */}
|
{children}
|
</div>
|
</div>
|
);
|
}
|
|
// 客户端渲染后显示完整内容
|
try {
|
return (
|
<div className="animate-fadeIn">
|
<div className="flex flex-col min-h-screen">
|
{!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>
|
{!isLoginPage && !isRegisterPage && (
|
<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="#FF6A88" />
|
</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>
|
</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>
|
|
<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>
|
|
<p className="text-sm text-gray-400">© 2024 帷幄君成. All rights reserved.</p>
|
</div>
|
</div>
|
</footer>
|
)}
|
</div>
|
</div>
|
);
|
} catch (error) {
|
console.error("渲染错误:", error);
|
return handleError();
|
}
|
};
|
|
return (
|
<>
|
{hasError ? handleError() : renderContent()}
|
</>
|
);
|
}
|
