103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
import React, { useEffect, useLayoutEffect, useState } from 'react';
|
||
import { Layout, MainLayout } from './layout/UserLayout';
|
||
import { useUserStore } from './store';
|
||
import { message } from '@/modules/message';
|
||
export const Info = () => {
|
||
return (
|
||
<Layout>
|
||
<MainLayout className='bg-yellow-50'>
|
||
<ProfileForm />
|
||
</MainLayout>
|
||
</Layout>
|
||
);
|
||
};
|
||
export const ProfileForm: React.FC = () => {
|
||
const [nickname, setNickname] = useState('');
|
||
const [name, setName] = useState('');
|
||
const [avatar, setAvatar] = useState<string | null>(null);
|
||
const userStore = useUserStore();
|
||
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
if (e.target.files && e.target.files[0]) {
|
||
const file = e.target.files[0];
|
||
// 如果文件大于 2MB，提示用户
|
||
if (file.size > 2 * 1024 * 1024) {
|
||
message.error('文件大小不能超过 2MB');
|
||
return;
|
||
}
|
||
|
||
const reader = new FileReader();
|
||
reader.onload = () => {
|
||
setAvatar(reader.result as string);
|
||
};
|
||
reader.readAsDataURL(file);
|
||
}
|
||
};
|
||
|
||
const handleSubmit = () => {
|
||
// alert(`昵称: ${nickname}, 姓名: ${name}`)
|
||
userStore.updateUser({
|
||
nickname,
|
||
data: {
|
||
personalname: name,
|
||
},
|
||
avatar,
|
||
});
|
||
};
|
||
useLayoutEffect(() => {
|
||
userStore.getUpdateUser();
|
||
}, []);
|
||
useEffect(() => {
|
||
if (userStore.data) {
|
||
setNickname(userStore.data.nickname);
|
||
setName(userStore.data?.data?.personalname);
|
||
setAvatar(userStore.data.avatar);
|
||
}
|
||
}, [userStore.data]);
|
||
|
||
return (
|
||
<div className='w-full h-full mx-auto p-6 rounded-lg'>
|
||
<h2 className='text-center text-[#F39800] text-2xl font-bold mb-2'>完善个人信息</h2>
|
||
<p className='text-center text-yellow-400 mb-6'>请设置您的基本信息</p>
|
||
|
||
{/* Avatar Section */}
|
||
<div className='text-center mb-6'>
|
||
<label className='block'>
|
||
<div className='w-24 h-24 my-2 mx-auto rounded-full bg-yellow-200 flex items-center justify-center text-4xl text-yellow-500 cursor-pointer'>
|
||
{avatar ? <img src={avatar} alt='Avatar' className='rounded-full w-full h-full object-cover' /> : <span>👤</span>}
|
||
</div>
|
||
<p className='text-sm text-gray-500 mt-2'>点击更换头像</p>
|
||
<input type='file' accept='image/*' className='hidden' onChange={handleAvatarChange} />
|
||
</label>
|
||
</div>
|
||
|
||
{/* Form Fields */}
|
||
<div className='mb-4'>
|
||
<label className='block text-[#F39800] mb-2'>昵称 *</label>
|
||
<input
|
||
type='text'
|
||
placeholder='请设置您的昵称'
|
||
value={nickname}
|
||
onChange={(e) => setNickname(e.target.value)}
|
||
className='w-full border-[#FBBF24] rounded-lg p-2 border focus:outline-none focus:ring-2 focus:ring-[#F39800]'
|
||
/>
|
||
</div>
|
||
|
||
<div className='mb-6'>
|
||
<label className='block text-[#F39800] mb-2'>姓名 *</label>
|
||
<input
|
||
type='text'
|
||
placeholder='请输入您的姓名'
|
||
value={name}
|
||
onChange={(e) => setName(e.target.value)}
|
||
className='w-full border-[#FBBF24] rounded-lg p-2 border focus:outline-none focus:ring-2 focus:ring-[#F39800]'
|
||
/>
|
||
</div>
|
||
|
||
{/* Submit Button */}
|
||
<button onClick={handleSubmit} className='w-full py-2 bg-[#F39800] text-white rounded hover:bg-orange-600'>
|
||
完成设置
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|