From d1dcb9dbd6ff4f4824dd82da144f7d82d0e74f67 Mon Sep 17 00:00:00 2001
From: hongjli <3117313295@qq.com>
Date: 星期二, 15 四月 2025 16:06:25 +0800
Subject: [PATCH] 注册页面优化
---
src/app/register/page.tsx | 68 ++++++++++-----------------------
1 files changed, 21 insertions(+), 47 deletions(-)
diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx
index 921499b..55b505e 100644
--- a/src/app/register/page.tsx
+++ b/src/app/register/page.tsx
@@ -7,10 +7,9 @@
export default function RegisterPage() {
const [username, setUsername] = useState('');
+ const [accountName, setAccountName] = 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 [particles, setParticles] = useState<Array<{x: number, y: number}>>([]);
@@ -306,6 +305,25 @@
transition={{ duration: 0.3, delay: 0.1 }}
>
<input
+ id="accountName"
+ name="accountName"
+ type="text"
+ required
+ value={accountName}
+ onChange={(e) => setAccountName(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="password"
name="password"
type="password"
@@ -322,7 +340,7 @@
className="relative group"
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
- transition={{ duration: 0.3, delay: 0.2 }}
+ transition={{ duration: 0.3, delay: 0.3 }}
>
<input
id="confirmPassword"
@@ -333,50 +351,6 @@
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>
--
Gitblit v1.9.3