feat: 添加用户信息管理功能，更新相关配置和组件
This commit is contained in:
164
src/apps/config/firstLogin.tsx
Normal file
164
src/apps/config/firstLogin.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { AuthProvider } from "../auth";
|
||||
import { useFirstStore } from "./store";
|
||||
// @ts-ignore
|
||||
import UserNameBg from '../../assets/user-name-bg.jpg'
|
||||
import { ToastContainer } from "react-toastify";
|
||||
console.log(UserNameBg);
|
||||
const src = UserNameBg.src;
|
||||
|
||||
// 炫光边框卡片组件 - 黑白色系
|
||||
const GlowingCard = ({ children, className = "" }: { children: React.ReactNode; className?: string }) => {
|
||||
return (
|
||||
<div className={`relative ${className}`}>
|
||||
{/* 炫光边框 - 外层发光（黑白色系） */}
|
||||
<div className="absolute -inset-[2px] rounded-2xl opacity-50 blur-xl">
|
||||
<div className="absolute inset-0 rounded-2xl bg-linear-to-r from-gray-100 via-white to-gray-200 animate-gradient-xy" />
|
||||
</div>
|
||||
|
||||
{/* 边框渐变层（半透明白色） */}
|
||||
<div className="absolute -inset-[1px] rounded-2xl bg-linear-to-r from-white/60 via-white/80 to-white/60 opacity-90" />
|
||||
|
||||
{/* 内容层 - 更透明 */}
|
||||
<div className="relative backdrop-blur-xl bg-black/30 rounded-2xl p-8">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export const App = () => {
|
||||
const firstStore = useFirstStore();
|
||||
const [username, setUsername] = useState<string>("");
|
||||
const [nickname, setNickname] = useState<string>("");
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
firstStore.getMe().finally(() => setIsLoading(false));
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (firstStore.userInfo) {
|
||||
setUsername(firstStore.userInfo.username);
|
||||
setNickname(firstStore.userInfo.nickname);
|
||||
}
|
||||
}, [firstStore.userInfo]);
|
||||
|
||||
const canChange = firstStore.userInfo?.canChangeUsername ?? false;
|
||||
|
||||
const handleSubmit = async () => {
|
||||
// TODO: 实现更新用户名和昵称的逻辑
|
||||
// console.log("Update username to:", username, "nickname to:", nickname);
|
||||
const res = await firstStore.updateUserInfo({
|
||||
username,
|
||||
nickname,
|
||||
});
|
||||
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
{/* 背景图层 */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${src})` }}
|
||||
/>
|
||||
{/* 模糊和遮罩层 */}
|
||||
<div className="absolute inset-0 backdrop-blur-sm bg-black/30" />
|
||||
{/* 内容层 */}
|
||||
<div className="relative min-h-screen flex items-center justify-center">
|
||||
<div className="text-white text-lg font-medium">加载中...</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen">
|
||||
{/* 背景图层 */}
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center bg-no-repeat"
|
||||
style={{ backgroundImage: `url(${src})` }}
|
||||
/>
|
||||
{/* 模糊和遮罩层 */}
|
||||
<div className="absolute inset-0 backdrop-blur-md bg-black/40" />
|
||||
|
||||
{/* 内容层 */}
|
||||
<div className="relative min-h-screen flex items-center justify-center p-6">
|
||||
<div className="w-full max-w-md">
|
||||
{/* 头像 */}
|
||||
<div className="flex justify-center mb-8">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 bg-white/30 blur-2xl rounded-full" />
|
||||
<img
|
||||
src={firstStore.getAvatar()}
|
||||
alt={firstStore.userInfo?.nickname || firstStore.userInfo?.username || "avatar"}
|
||||
className="relative w-28 h-28 rounded-full border-4 border-white/60 shadow-2xl"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 用户信息卡片 - 炫光边框效果 */}
|
||||
<GlowingCard>
|
||||
<h1 className="text-3xl font-bold text-white text-center mb-3 drop-shadow-lg">
|
||||
{nickname || firstStore.userInfo?.username}
|
||||
</h1>
|
||||
<p className="text-white/80 text-center mb-8 text-sm" title="只有第一次可以修改用户名哦~，其他联系管理员修改。">
|
||||
{'只有第一次可以修改用户名哦~'}
|
||||
</p>
|
||||
|
||||
|
||||
{/* 用户名输入表单 */}
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/90 mb-3">
|
||||
昵称
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={nickname ?? ""}
|
||||
onChange={(e) => setNickname(e.target.value)}
|
||||
disabled={!canChange}
|
||||
className="w-full px-5 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 backdrop-blur-sm bg-white/5 text-white placeholder-white/40 border-white/20 disabled:bg-white/5 disabled:cursor-not-allowed disabled:border-white/10 disabled:text-white/40 transition-all duration-200"
|
||||
placeholder="输入昵称"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/90 mb-3">
|
||||
用户名
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username ?? ""}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
disabled={!canChange}
|
||||
className="w-full px-5 py-3 rounded-xl border-2 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-white/50 backdrop-blur-sm bg-white/5 text-white placeholder-white/40 border-white/20 disabled:bg-white/5 disabled:cursor-not-allowed disabled:border-white/10 disabled:text-white/40 transition-all duration-200"
|
||||
placeholder="输入用户名"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleSubmit}
|
||||
disabled={!canChange}
|
||||
className={`w-full py-3 px-6 rounded-xl font-medium transition-all duration-200 ${canChange
|
||||
? "bg-linear-to-r from-white/90 to-gray-200 text-black hover:from-white hover:to-gray-100 hover:shadow-white/30 hover:shadow-xl hover:scale-[1.02] active:scale-[0.98]"
|
||||
: "bg-white/10 text-white/30 cursor-not-allowed"
|
||||
}`}
|
||||
>
|
||||
{canChange ? "保存修改" : "不可修改"}
|
||||
</button>
|
||||
</div>
|
||||
</GlowingCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const AppProvider = () => {
|
||||
return <AuthProvider>
|
||||
<App />
|
||||
<ToastContainer />
|
||||
</AuthProvider>;
|
||||
}
|
||||
Reference in New Issue
Block a user