From e113f64857a16d661c973f0c35f9604f5b4ec24a Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 08 四月 2025 14:12:31 +0800
Subject: [PATCH] 新建注册页面
---
src/app/register/page.tsx | 350 +++++++++++++++++++++++++++++++++++++++++++
src/app/login/page.tsx | 33 ++-
src/app/globals.css | 38 ++++
src/components/layout/ClientLayoutContent.tsx | 10
4 files changed, 412 insertions(+), 19 deletions(-)
diff --git a/src/app/globals.css b/src/app/globals.css
index 8ce8f4c..99b4d1c 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -806,3 +806,41 @@
.animate-shine {
animation: shine 1.5s ease-in-out;
}
+
+/* 椤甸潰娓愬叆鏁堟灉浼樺寲 */
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(10px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes pageTransition {
+ 0% { opacity: 0; transform: translateY(10px); }
+ 100% { opacity: 1; transform: translateY(0); }
+}
+
+/* 娣诲姞鍏ㄥ眬杩囨浮鏁堟灉 */
+.page-transition-enter {
+ opacity: 0;
+ transform: translateY(10px);
+}
+
+.page-transition-enter-active {
+ opacity: 1;
+ transform: translateY(0);
+ transition: opacity 300ms, transform 300ms;
+}
+
+/* 浼樺寲鍏ㄥ眬鍔ㄧ敾鎬ц兘 */
+.animate-fadeIn {
+ animation: fadeIn 300ms cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
+ will-change: opacity, transform;
+ backface-visibility: hidden;
+}
+
+/* 浣跨敤GPU鍔犻�熸敼鍠勬�ц兘 */
+.gpu-accelerated {
+ transform: translateZ(0);
+ backface-visibility: hidden;
+ perspective: 1000;
+ will-change: transform, opacity;
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index 824f5f4..1d13b83 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -16,7 +16,12 @@
// 纭繚缁勪欢鎸傝浇鍚庡啀鏄剧ず鍔ㄧ敾鏁堟灉
useEffect(() => {
- setMounted(true);
+ // 浣跨敤 requestAnimationFrame 纭繚鍦ㄤ笅涓�甯ф墽琛岋紝鎻愰珮鍔ㄧ敾娴佺晠搴�
+ const animationFrame = requestAnimationFrame(() => {
+ setMounted(true);
+ });
+
+ return () => cancelAnimationFrame(animationFrame);
}, []);
const handleSubmit = (e: React.FormEvent) => {
@@ -65,8 +70,12 @@
<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"
+ transition={{
+ duration: 0.5,
+ ease: [0.25, 0.1, 0.25, 1],
+ staggerChildren: 0.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>
@@ -433,19 +442,13 @@
</button>
</div>
- {/* 娉ㄥ唽閾炬帴 */}
- <div className="mt-4 text-center">
- <p className="text-xs text-white/70">
- 杩樻病鏈夊笎鍙�?
- <motion.a
- href="#"
- className="ml-1 text-[#6ADBFF] hover:text-[#6ADBFF] transition-colors duration-200 relative group"
- whileHover={{ scale: 1.03 }}
- whileTap={{ scale: 0.97 }}
- >
+ {/* 鍙充晶鐧诲綍琛ㄥ崟搴曢儴 - 娣诲姞娉ㄥ唽閾炬帴 */}
+ <div className="mt-6 text-center">
+ <p className="text-white/70 text-sm">
+ 杩樻病鏈夎处鍙凤紵
+ <Link href="/register" className="text-[#6ADBFF] hover:text-[#FF6A88] ml-1 transition-colors duration-300">
绔嬪嵆娉ㄥ唽
- <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>
+ </Link>
</p>
</div>
</div>
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
new file mode 100644
index 0000000..9ea91e1
--- /dev/null
+++ b/src/app/register/page.tsx
@@ -0,0 +1,350 @@
+"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(() => {
+ if (countdown > 0) {
+ const timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+ return () => clearTimeout(timer);
+ }
+ }, [countdown]);
+
+ // 纭繚缁勪欢鎸傝浇鍚庡啀鏄剧ず鍔ㄧ敾鏁堟灉
+ useEffect(() => {
+ // 浣跨敤 requestAnimationFrame 纭繚鍦ㄤ笅涓�甯ф墽琛岋紝鎻愰珮鍔ㄧ敾娴佺晠搴�
+ 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">
+ {/* 鑳屾櫙鏁堟灉 */}
+ <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.5,
+ ease: [0.25, 0.1, 0.25, 1],
+ staggerChildren: 0.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="space-y-1">
+ <label className="block text-xs text-[#6ADBFF]/80 mb-1">鐢ㄦ埛鍚�</label>
+ <div className="relative group">
+ <input
+ type="text"
+ value={username}
+ onChange={(e) => setUsername(e.target.value)}
+ className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
+ required
+ />
+ <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ </div>
+ </div>
+
+ {/* 瀵嗙爜 */}
+ <div className="space-y-1">
+ <label className="block text-xs text-[#6ADBFF]/80 mb-1">瀵嗙爜</label>
+ <div className="relative group">
+ <input
+ type="password"
+ value={password}
+ onChange={(e) => setPassword(e.target.value)}
+ className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
+ required
+ />
+ <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ </div>
+ </div>
+
+ {/* 纭瀵嗙爜 */}
+ <div className="space-y-1">
+ <label className="block text-xs text-[#6ADBFF]/80 mb-1">纭瀵嗙爜</label>
+ <div className="relative group">
+ <input
+ type="password"
+ value={confirmPassword}
+ onChange={(e) => setConfirmPassword(e.target.value)}
+ className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
+ required
+ />
+ <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ </div>
+ </div>
+
+ {/* 鎵嬫満鍙风爜 */}
+ <div className="space-y-1">
+ <label className="block text-xs text-[#6ADBFF]/80 mb-1">鎵嬫満鍙风爜</label>
+ <div className="relative group">
+ <input
+ type="tel"
+ value={phone}
+ onChange={(e) => setPhone(e.target.value)}
+ className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
+ pattern="[0-9]{11}"
+ required
+ />
+ <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ </div>
+ </div>
+
+ {/* 楠岃瘉鐮� */}
+ <div className="space-y-1">
+ <label className="block text-xs text-[#6ADBFF]/80 mb-1">楠岃瘉鐮�</label>
+ <div className="flex space-x-2">
+ <div className="relative group flex-1">
+ <input
+ type="text"
+ value={verifyCode}
+ onChange={(e) => setVerifyCode(e.target.value)}
+ className="w-full px-4 py-2 bg-[#131C41]/70 border border-[#6ADBFF]/30 rounded-lg text-white focus:outline-none focus:border-[#6ADBFF]/70 transition-all"
+ required
+ />
+ <div className="absolute top-0 bottom-0 left-0 w-[2px] bg-gradient-to-b from-transparent via-[#6ADBFF]/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+ </div>
+ <button
+ type="button"
+ onClick={sendVerifyCode}
+ disabled={countdown > 0 || !phone || phone.length !== 11}
+ className={`px-4 py-2 rounded-lg border text-sm transition-all duration-300 whitespace-nowrap ${
+ countdown > 0 || !phone || phone.length !== 11
+ ? 'border-[#6ADBFF]/20 text-[#6ADBFF]/40 bg-[#131C41]/20 cursor-not-allowed'
+ : 'border-[#6ADBFF]/40 text-[#6ADBFF] bg-[#131C41]/40 hover:bg-[#131C41]/70 hover:border-[#6ADBFF]/60'
+ }`}
+ >
+ {countdown > 0 ? `${countdown}绉掑悗閲嶈瘯` : '鑾峰彇楠岃瘉鐮�'}
+ </button>
+ </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>
+ );
+}
\ No newline at end of file
diff --git a/src/components/layout/ClientLayoutContent.tsx b/src/components/layout/ClientLayoutContent.tsx
index 03d308b..ff207d0 100644
--- a/src/components/layout/ClientLayoutContent.tsx
+++ b/src/components/layout/ClientLayoutContent.tsx
@@ -13,6 +13,7 @@
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');
@@ -58,13 +59,14 @@
// 瀹㈡埛绔覆鏌撳悗鏄剧ず瀹屾暣鍐呭
try {
return (
- <div className="animate-fadeIn">
+ <div className="animate-fadeIn" style={{ animationDuration: '300ms' }}>
<div className="flex flex-col min-h-screen">
- {!isLoginPage && <Navbar />}
- <main className={`flex-1 ${isHomePage || isAIScenePage ? '' : '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`}
+ style={{ willChange: 'transform, opacity' }}>
{children}
</main>
- {!isLoginPage && (
+ {!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">
--
Gitblit v1.9.3