From 28a25cb79b7bb957dd4dab6350e40cbf18b83e1c Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 16:40:05 +0800
Subject: [PATCH] 新建注册页面

---
 src/app/register/page.tsx        |  295 +++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/layout/Navbar.tsx |   38 ++++++
 2 files changed, 332 insertions(+), 1 deletions(-)

diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..5eb8873
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,295 @@
+"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>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 55f961f..83b8240 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -211,6 +211,32 @@
                 </div>
               </Link>
             </div>
+
+            {/* 娉ㄥ唽鎸夐挳 */}
+            <div className="relative group ml-2">
+              <Link href="/register" className="relative overflow-hidden flex items-center justify-center px-7 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] hover:border-[#FF6A88]/70 transition-all duration-300 group quantum-button">
+                <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300 quantum-pulse">娉ㄥ唽</span>
+                
+                {/* 閲忓瓙鍏夌嚎鏁堟灉 */}
+                <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-[#FF6A88]/20 to-[#FF6A88]/40"></div>
+                  
+                  {/* 閲忓瓙鎵弿绾� */}
+                  <div className="absolute top-[45%] -left-10 h-[1px] w-[120%] bg-gradient-to-r from-transparent via-[#FF6A88] 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-[20%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.1s'}}></div>
+                    <div className="absolute left-[50%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.2s'}}></div>
+                    <div className="absolute left-[80%] top-0 bottom-0 w-[1px] bg-gradient-to-b from-transparent via-[#FF6A88]/30 to-transparent transform scale-y-0 group-hover:scale-y-100 transition-transform duration-700 ease-out" style={{transitionDelay: '0.3s'}}></div>
+                  </div>
+                  
+                  {/* 閲忓瓙杈圭紭鏁堟灉 */}
+                  <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+                </div>
+              </Link>
+            </div>
           </div>
 
           {/* 绉诲姩绔彍鍗曟寜閽� */}
@@ -265,7 +291,7 @@
             璁粌鍦�
           </Link>
           
-          <div className="pt-3 pb-1">
+          <div className="flex space-x-2 px-4 py-3">
             <Link href="/login" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#6ADBFF]/40 bg-gradient-to-r from-[#131C41] to-[#1E2B63] text-white font-medium group">
               <span className="relative z-10 text-white group-hover:text-[#6ADBFF] transition-colors duration-300">鐧诲綍</span>
               
@@ -275,6 +301,16 @@
                 <div className="absolute bottom-0 left-0 right-0 h-[2px] 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>
             </Link>
+
+            <Link href="/register" className="relative overflow-hidden flex items-center justify-center w-full px-6 py-2 rounded-full border border-[#FF6A88]/40 bg-gradient-to-r from-[#131C41] via-[#1E2B63] to-[#2A1B48] text-white font-medium group">
+              <span className="relative z-10 text-white group-hover:text-[#FF6A88] transition-colors duration-300">娉ㄥ唽</span>
+              
+              {/* 绠�鍖栫増閲忓瓙鏁堟灉 - 閫傚悎绉诲姩绔� */}
+              <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-[#FF6A88]/20 to-[#FF6A88]/40"></div>
+                <div className="absolute bottom-0 left-0 right-0 h-[2px] bg-gradient-to-r from-transparent via-[#FF6A88] to-transparent transform scale-x-0 group-hover:scale-x-100 transition-transform duration-700 ease-out"></div>
+              </div>
+            </Link>
           </div>
         </div>
       </div>

--
Gitblit v1.9.3