"use client";
|
|
import { useState, useEffect } from 'react';
|
import Image from 'next/image';
|
import { motion } from 'framer-motion';
|
import Link from 'next/link';
|
|
export default function RegisterPage() {
|
const [username, setUsername] = useState('');
|
const [password, setPassword] = useState('');
|
const [confirmPassword, setConfirmPassword] = useState('');
|
const [phone, setPhone] = useState('');
|
const [verifyCode, setVerifyCode] = useState('');
|
const [isLoading, setIsLoading] = useState(false);
|
const [mounted, setMounted] = useState(false);
|
const [countdown, setCountdown] = useState(0);
|
|
// 添加滚动锁定
|
useEffect(() => {
|
document.body.style.overflow = 'hidden';
|
return () => {
|
document.body.style.overflow = 'unset';
|
};
|
}, []);
|
|
// 倒计时逻辑
|
useEffect(() => {
|
if (countdown > 0) {
|
const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
|
return () => clearTimeout(timer);
|
}
|
}, [countdown]);
|
|
// 优化动画性能
|
useEffect(() => {
|
const animationFrame = requestAnimationFrame(() => {
|
setMounted(true);
|
});
|
|
return () => cancelAnimationFrame(animationFrame);
|
}, []);
|
|
const sendVerifyCode = () => {
|
if (countdown > 0 || !phone || phone.length !== 11) return;
|
|
// 模拟发送验证码
|
setCountdown(60);
|
// 这里应该添加实际发送验证码的逻辑
|
};
|
|
const handleSubmit = (e: React.FormEvent) => {
|
e.preventDefault();
|
|
// 表单验证
|
if (!username || !password || !confirmPassword || !phone || !verifyCode) {
|
alert("请填写所有必填字段");
|
return;
|
}
|
|
if (password !== confirmPassword) {
|
alert("两次输入的密码不一致");
|
return;
|
}
|
|
setIsLoading(true);
|
|
// 模拟注册请求
|
setTimeout(() => {
|
setIsLoading(false);
|
// 这里应该添加实际注册逻辑
|
alert("注册成功，即将跳转到登录页");
|
// 注册成功后跳转到登录页
|
window.location.href = "/login";
|
}, 2000);
|
};
|
|
return (
|
<div className="h-screen w-full flex items-center justify-center relative overflow-hidden fixed">
|
{/* 背景效果 - 优化性能 */}
|
<div className="fixed inset-0 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] z-0 will-change-transform"></div>
|
|
{/* 神经网络线条背景 - 优化性能 */}
|
<div className="fixed inset-0 z-0 opacity-30 will-change-transform">
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
|
<div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
|
<div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transform-gpu"></div>
|
|
{/* 神经网络连接点 - 优化性能 */}
|
<div className="absolute top-[20%] left-[15%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse transform-gpu"></div>
|
<div className="absolute top-[60%] left-[75%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse transform-gpu" style={{ animationDelay: '1.5s' }}></div>
|
|
{/* 连接线 - 优化性能 */}
|
<div className="absolute top-[20%] left-[15%] w-[70%] h-[1px] bg-gradient-to-r from-[#6ADBFF]/80 to-transparent animate-pulse transform-gpu"></div>
|
|
{/* 数据点背景 - 优化性能 */}
|
<div className="absolute inset-0 transform-gpu" style={{
|
backgroundImage: 'radial-gradient(circle, rgba(106, 219, 255, 0.15) 1px, transparent 1px)',
|
backgroundSize: '20px 20px'
|
}}></div>
|
|
{/* 扫描线 - 优化性能 */}
|
<div className="absolute inset-0 transform-gpu">
|
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/5 to-transparent animate-scanline transform-gpu" style={{ animationDuration: '12s' }}></div>
|
</div>
|
</div>
|
|
{/* 注册卡片 - 优化动画性能 */}
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
animate={{ opacity: mounted ? 1 : 0, y: mounted ? 0 : 20 }}
|
transition={{
|
duration: 0.5,
|
ease: [0.23, 1, 0.32, 1]
|
}}
|
className="relative z-10 w-full max-w-3xl flex rounded-2xl backdrop-blur-lg bg-[#1E2B63]/40 border border-[#6ADBFF]/20 shadow-xl overflow-hidden gpu-accelerated"
|
>
|
{/* 卡片内部装饰 */}
|
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent"></div>
|
|
{/* 左侧Logo和公司名 */}
|
<div className="w-2/5 bg-[#131C41]/60 p-8 flex flex-col items-center justify-between">
|
{/* Logo和公司名部分 */}
|
<div className="w-full flex flex-col items-center justify-start">
|
<div className="mb-4 relative overflow-visible">
|
<Link href="/" className="group flex items-center relative">
|
<div className="relative w-16 h-16 transition-all duration-500 overflow-visible" style={{ isolation: 'isolate' }}>
|
{/* 基础背景圆 */}
|
<div className="absolute inset-0 rounded-full bg-[#131C41] z-10"></div>
|
|
{/* Logo背景光环 */}
|
<div className="absolute inset-0 rounded-full border-2 border-[#6ADBFF]/70 animate-logo-pulse z-10"></div>
|
|
{/* 底层光晕效果 */}
|
<div className="absolute -inset-2 rounded-full bg-[#6ADBFF]/10 blur-lg animate-pulse z-0"></div>
|
|
{/* Logo */}
|
<Image
|
src="/images/logo.jpg"
|
alt="帷幄君成Logo"
|
width={64}
|
height={64}
|
className="rounded-full object-cover relative z-30"
|
style={{ display: 'block', objectFit: 'cover', width: '100%', height: '100%' }}
|
priority
|
/>
|
|
{/* 悬停特效容器 */}
|
<div className="absolute inset-0 rounded-full z-20 overflow-hidden pointer-events-none">
|
{/* 悬停时的扫描线 */}
|
<div className="absolute inset-0 rounded-full overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
<div className="absolute top-0 -left-[100%] right-0 h-[2px] group-hover:left-full w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out"></div>
|
<div className="absolute bottom-0 left-full right-0 h-[2px] group-hover:left-[-100%] w-full bg-gradient-to-r from-transparent via-[#6ADBFF] to-transparent transition-all duration-1500 ease-in-out delay-200"></div>
|
</div>
|
|
{/* 悬停时的量子数据流效果 */}
|
<div className="absolute inset-0 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-500">
|
<div className="w-[1px] h-0 group-hover:h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-300"></div>
|
<div className="h-[1px] w-0 group-hover:w-full bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent transition-all duration-700 delay-400"></div>
|
</div>
|
</div>
|
</div>
|
|
<div className="ml-4 relative z-0 transition-transform duration-500">
|
<h1 className="text-2xl font-bold text-white mb-1 relative inline-block group-hover:text-[#6ADBFF] transition-colors duration-500">
|
帷幄君成
|
<span className="absolute -bottom-1 left-0 w-full h-[2px] bg-gradient-to-r from-[#FF6A88] to-[#6ADBFF] group-hover:animate-pulse"></span>
|
</h1>
|
|
<p className="text-[#6ADBFF]/80 text-xs group-hover:text-[#6ADBFF] transition-colors duration-500">AI场景模拟平台 · 智慧赋能未来</p>
|
</div>
|
</Link>
|
</div>
|
|
{/* 分隔线 */}
|
<div className="w-full border-t border-[#6ADBFF]/20 my-3"></div>
|
</div>
|
|
{/* 左侧信息内容 */}
|
<div className="w-full flex-1 flex flex-col justify-center space-y-6">
|
<div className="text-center">
|
<h2 className="text-lg font-semibold text-[#6ADBFF] mb-2">已有账号?</h2>
|
<Link href="/login" className="text-white hover:text-[#6ADBFF] transition-colors duration-300 px-6 py-2 border border-[#6ADBFF]/30 rounded-full inline-block relative group">
|
<span className="relative z-10">立即登录</span>
|
<div className="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 bg-gradient-to-r from-[#6ADBFF]/10 to-[#5E72EB]/10 transition-opacity duration-300"></div>
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/30 to-transparent"></div>
|
</Link>
|
</div>
|
|
<div className="text-white/70 text-sm space-y-3">
|
<div className="flex items-center">
|
<div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
|
<p>通过注册获取完整平台功能</p>
|
</div>
|
<div className="flex items-center">
|
<div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
|
<p>享受AI智能分析与场景模拟</p>
|
</div>
|
<div className="flex items-center">
|
<div className="w-2 h-2 rounded-full bg-[#6ADBFF]/50 mr-2"></div>
|
<p>安全可靠的数据保障机制</p>
|
</div>
|
</div>
|
</div>
|
|
{/* 左侧装饰点 */}
|
<div className="absolute bottom-4 left-4">
|
<div className="relative w-2 h-2">
|
<div className="absolute inset-0 rounded-full bg-[#6ADBFF]/30 animate-pulse"></div>
|
<div className="absolute inset-[2px] rounded-full bg-[#6ADBFF]/50"></div>
|
</div>
|
</div>
|
</div>
|
|
{/* 右侧注册表单 */}
|
<div className="w-3/5 p-8">
|
<div className="mb-6">
|
<h2 className="text-xl font-semibold text-white mb-2">新用户注册</h2>
|
<p className="text-[#6ADBFF]/80 text-sm">欢迎加入帷幄君成，请填写以下信息完成注册</p>
|
</div>
|
|
{/* 注册表单 */}
|
<form onSubmit={handleSubmit} className="space-y-4">
|
{/* 用户名 */}
|
<div className="relative group">
|
<input
|
type="text"
|
value={username}
|
onChange={(e) => setUsername(e.target.value)}
|
className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
|
placeholder="请输入用户名"
|
required
|
/>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
|
</div>
|
|
{/* 密码 */}
|
<div className="relative group">
|
<input
|
type="password"
|
value={password}
|
onChange={(e) => setPassword(e.target.value)}
|
className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
|
placeholder="请输入密码"
|
required
|
/>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
|
</div>
|
|
{/* 确认密码 */}
|
<div className="relative group">
|
<input
|
type="password"
|
value={confirmPassword}
|
onChange={(e) => setConfirmPassword(e.target.value)}
|
className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
|
placeholder="请确认密码"
|
required
|
/>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
|
</div>
|
|
{/* 手机号码 */}
|
<div className="relative group">
|
<input
|
type="tel"
|
value={phone}
|
onChange={(e) => setPhone(e.target.value)}
|
className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
|
placeholder="请输入手机号码"
|
pattern="[0-9]{11}"
|
required
|
/>
|
<div className="absolute bottom-0 left-0 w-full h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
|
</div>
|
|
{/* 验证码 */}
|
<div className="relative group flex">
|
<input
|
type="text"
|
value={verifyCode}
|
onChange={(e) => setVerifyCode(e.target.value)}
|
className="block w-full px-4 py-2 bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md focus:outline-none focus:ring-1 focus:ring-[#6ADBFF]/60 focus:border-[#6ADBFF]/60 text-white text-xs placeholder-[#6ADBFF]/50 transition-all duration-300"
|
placeholder="请输入验证码"
|
required
|
/>
|
<button
|
type="button"
|
onClick={sendVerifyCode}
|
disabled={countdown > 0 || !phone || phone.length !== 11}
|
className={`ml-2 px-3 py-2 text-xs text-[#6ADBFF] bg-[#131C41]/80 border border-[#6ADBFF]/30 rounded-md hover:bg-[#131C41] hover:border-[#6ADBFF]/60 transition-all duration-300 whitespace-nowrap ${
|
countdown > 0 || !phone || phone.length !== 11 ? 'opacity-50 cursor-not-allowed' : ''
|
}`}
|
>
|
{countdown > 0 ? `${countdown}秒后重试` : '获取验证码'}
|
</button>
|
<div className="absolute bottom-0 left-0 w-[calc(100%-4rem)] h-[1px] bg-gradient-to-r from-[#6ADBFF] to-transparent scale-x-0 origin-left transition-transform duration-300 ease-out group-focus-within:scale-x-100"></div>
|
</div>
|
|
{/* 隐私声明 */}
|
<div className="text-xs text-white/60 mt-4">
|
注册即表示您同意帷幄君成的
|
<span className="text-[#6ADBFF] cursor-pointer hover:underline mx-1">服务条款</span>
|
和
|
<span className="text-[#6ADBFF] cursor-pointer hover:underline ml-1">隐私政策</span>
|
</div>
|
|
{/* 注册按钮 */}
|
<div className="mt-6">
|
<button
|
type="submit"
|
disabled={isLoading}
|
className="w-full relative overflow-hidden px-6 py-3 rounded-lg bg-gradient-to-r from-[#5E72EB] to-[#6ADBFF] text-white font-medium shadow-lg group"
|
>
|
<span className="relative z-10">
|
{isLoading ? (
|
<span className="flex items-center justify-center">
|
<svg className="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
</svg>
|
注册中...
|
</span>
|
) : (
|
'立即注册'
|
)}
|
</span>
|
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
|
<div className="h-full w-[1px] bg-white/20 transform rotate-[20deg] translate-x-[-30px] group-hover:translate-x-[350px] transition-all duration-1000"></div>
|
</div>
|
</button>
|
</div>
|
</form>
|
</div>
|
</motion.div>
|
</div>
|
);
|
}
|
