抽离登陆模块

src/user/Info.tsx

@@ -0,0 +1,102 @@
+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>
+  );
+};