"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);
|
|
// 确保组件挂载后再显示动画效果
|
useEffect(() => {
|
setMounted(true);
|
}, []);
|
|
const handleSubmit = (e: React.FormEvent) => {
|
e.preventDefault();
|
setIsLoading(true);
|
|
// 模拟注册请求
|
setTimeout(() => {
|
setIsLoading(false);
|
// 这里应该添加实际注册逻辑
|
}, 2000);
|
};
|
|
return (
|
<div className="h-screen w-full flex items-center justify-center relative overflow-hidden">
|
{/* 背景效果 */}
|
<div className="fixed inset-0 bg-gradient-to-br from-[#0A1033] via-[#1E2B63] to-[#131C41] z-0"></div>
|
|
{/* 神经网络线条背景 */}
|
<div className="fixed inset-0 z-0 opacity-30">
|
<div className="absolute top-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
|
<div className="absolute bottom-0 left-0 right-0 h-[1px] bg-gradient-to-r from-transparent via-[#6ADBFF]/70 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 left-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
|
<div className="absolute top-0 bottom-0 right-0 w-[1px] bg-gradient-to-b from-transparent via-[#6ADBFF]/70 to-transparent"></div>
|
|
{/* 神经网络连接点 */}
|
<div className="absolute top-[20%] left-[15%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse"></div>
|
<div className="absolute top-[60%] left-[75%] w-1.5 h-1.5 rounded-full bg-[#6ADBFF]/80 animate-pulse" 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"></div>
|
|
{/* 数据点背景 */}
|
<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 inset-0">
|
<div className="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-[#6ADBFF]/5 to-transparent animate-scanline" 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.8, ease: "easeOut" }}
|
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"
|
>
|
{/* 卡片内部装饰 */}
|
<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 p-8 flex flex-col items-center justify-center">
|
<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>
|
|
<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">数字员工平台 · 智慧赋能未来</p>
|
</div>
|
</Link>
|
</div>
|
</div>
|
|
{/* 右侧注册表单 */}
|
<div className="w-3/5 p-8">
|
<div className="mb-6">
|
<h2 className="text-xl font-bold text-white mb-2">注册新账号</h2>
|
<p className="text-sm text-[#6ADBFF]/70">创建您的帷幄君成账号，开启智能之旅</p>
|
</div>
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
transition={{ duration: 0.3 }}
|
>
|
<input
|
id="username"
|
name="username"
|
type="text"
|
required
|
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="用户名"
|
/>
|
<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>
|
</motion.div>
|
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
transition={{ duration: 0.3, delay: 0.1 }}
|
>
|
<input
|
id="password"
|
name="password"
|
type="password"
|
required
|
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="密码"
|
/>
|
<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>
|
</motion.div>
|
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
transition={{ duration: 0.3, delay: 0.2 }}
|
>
|
<input
|
id="confirmPassword"
|
name="confirmPassword"
|
type="password"
|
required
|
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="确认密码"
|
/>
|
<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>
|
</motion.div>
|
|
<motion.div
|
className="relative group flex"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
transition={{ duration: 0.3, delay: 0.3 }}
|
>
|
<input
|
id="phone"
|
name="phone"
|
type="text"
|
required
|
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="手机号"
|
/>
|
<button
|
type="button"
|
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"
|
>
|
获取验证码
|
</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>
|
</motion.div>
|
|
<motion.div
|
className="relative group"
|
initial={{ opacity: 0, x: 20 }}
|
animate={{ opacity: 1, x: 0 }}
|
transition={{ duration: 0.3, delay: 0.4 }}
|
>
|
<input
|
id="verifyCode"
|
name="verifyCode"
|
type="text"
|
required
|
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="验证码"
|
/>
|
<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>
|
</motion.div>
|
|
<motion.div
|
initial={{ opacity: 0, y: 20 }}
|
animate={{ opacity: 1, y: 0 }}
|
transition={{ duration: 0.3, delay: 0.5 }}
|
>
|
<button
|
type="submit"
|
disabled={isLoading}
|
className="relative w-full py-2 px-4 rounded-full overflow-hidden border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] hover:border-[#6ADBFF]/70 transition-all duration-300 group quantum-button"
|
>
|
<div className="relative z-10 flex items-center justify-center quantum-pulse">
|
{isLoading ? (
|
<>
|
<div className="w-3 h-3 border-2 border-white/80 border-t-transparent rounded-full animate-spin"></div>
|
<span className="ml-2 text-xs text-white">注册中...</span>
|
</>
|
) : (
|
<span className="text-xs text-white group-hover:text-[#6ADBFF] transition-colors duration-300">注册</span>
|
)}
|
</div>
|
|
{/* 量子光线效果 */}
|
<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>
|
</button>
|
</motion.div>
|
</form>
|
|
{/* 登录链接 */}
|
<div className="mt-4 text-center">
|
<p className="text-xs text-white/70">
|
已有账号?
|
<motion.a
|
href="/login"
|
className="ml-1 text-[#6ADBFF] hover:text-[#6ADBFF] transition-colors duration-200 relative group"
|
whileHover={{ scale: 1.03 }}
|
whileTap={{ scale: 0.97 }}
|
>
|
立即登录
|
<span className="absolute -bottom-0.5 left-0 w-0 h-[1px] bg-[#6ADBFF] group-hover:w-full transition-all duration-300 ease-out"></span>
|
</motion.a>
|
</p>
|
</div>
|
</div>
|
</motion.div>
|
|
{/* 底部波浪效果 */}
|
<div className="fixed inset-x-0 bottom-0 h-10 z-0 overflow-hidden">
|
<svg className="absolute w-full h-20 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" opacity="0.2" />
|
<path d="M0,20 Q100,0 200,20 T400,20 T600,20 T800,20" fill="none" stroke="url(#gradient2)" strokeWidth="1" opacity="0.2" />
|
<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>
|
);
|
}
|
