feat: 添加i18n，美化界面

src/pages/user/edit/Profile.tsx

@@ -1,15 +1,25 @@
-import { Button, Form, Input } from 'antd';
+import { TextField } from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
+import { Button } from '@mui/material';
 import { useUserStore } from '../store';
 import { useEffect, useRef, useState } from 'react';
 import { useShallow } from 'zustand/react/shallow';
 import { isObjectNull } from '@/utils/is-null';
 import { useLayoutStore } from '@/modules/layout/store';
-import { AvatarUpload } from '../module/AvatarUpload';
 import UploadOutlined from '@ant-design/icons/UploadOutlined';
 import PandaPNG from '@/assets/panda.png';
 import { FileUpload } from '../module/FileUpload';
+import { useTranslation } from 'react-i18next';
+
 export const Profile = () => {
-  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const { control, handleSubmit, setValue, reset, formState, getValues } = useForm({
+    defaultValues: {
+      username: '',
+      avatar: '',
+      description: '',
+    },
+  });
   const ref = useRef<any>(null);
   const userStore = useUserStore(
     useShallow((state) => {
@@ -32,21 +42,29 @@ export const Profile = () => {
       };
     }),
   );
-  // const avatar = layoutStore.me?.avatar;
   useEffect(() => {
     const fromData = layoutStore.me;
     if (isObjectNull(fromData)) {
-      form.setFieldsValue({});
+      reset({
+        username: '',
+        avatar: '',
+        description: '',
+      });
     } else {
-      form.setFieldsValue(fromData);
+      reset({
+        username: fromData.username,
+        avatar: fromData.avatar || '',
+        description: fromData.description || '',
+      });
     }
     setAvatar(fromData.avatar || '');
-  }, [layoutStore.me]);
+  }, [layoutStore.me, setValue]);
   const onChange = (path: string) => {
-    let url = '/resources/' + path;
-    console.log('path', url);
-    form.setFieldsValue({ avatar: url });
-    setAvatar(url + '?t=' + new Date().getTime());
+    const url = path + '?t=' + new Date().getTime();
+    setAvatar(url);
+    setValue('avatar', url);
+    const values = getValues();
+    onFinish(values);
   };
   const onFinish = async (values) => {
     const newMe = await userStore.updateSelf(values);
@@ -55,48 +73,51 @@ export const Profile = () => {
     }
   };
   return (
-    <div className='w-full h-full bg-gray-200 p-4'>
-      <div className='border shadow-lg p-4 bg-white rounded-lg'>
-        <div className='text-2xl'>Profile</div>
-        <div className='text-sm text-gray-500'>Edit your profile</div>
+    <div className='w-full h-full bg-amber-50 p-4 text-primary'>
+      <div className=' shadow-lg p-4 bg-white rounded-lg'>
+        <div className='text-2xl'>{t('Profile')}</div>
+        <div className='text-sm text-secondary'>{t('Edit your profile')}</div>
         <div className='flex gap-4'>
           <div className='w-[600px] p-4 border mt-2 '>
             <div className='w-full my-4'>
               {avatar && <img className='w-20 h-20 mx-auto rounded-full' src={avatar} alt='avatar' />}
               {!avatar && <img className='w-20 h-20 mx-auto  rounded-full' src={PandaPNG} alt='avatar' />}
             </div>
-            <Form
-              form={form}
-              onFinish={onFinish}
-              labelCol={{
-                span: 4,
-              }}>
-              <Form.Item label='Name' name='username'>
-                <Input className='w-full border rounded-lg p-2' disabled />
-              </Form.Item>
-              <Form.Item label='Avatar' name='avatar'>
-                <Input
-                  addonAfter={
-                    <div>
-                      <UploadOutlined
-                        onClick={() => {
-                          ref.current?.open?.();
-                        }}
-                      />
-                      <FileUpload ref={ref} onChange={onChange} />
-                    </div>
-                  }
-                />
-              </Form.Item>
-              <Form.Item label='Description' name='description'>
-                <Input.TextArea rows={4} />
-              </Form.Item>
-              <Form.Item label=' ' colon={false}>
-                <Button className='' htmlType='submit'>
-                  保存
-                </Button>
-              </Form.Item>
-            </Form>
+            <form onSubmit={handleSubmit(onFinish)} className='flex flex-col gap-4'>
+              <Controller
+                name='username'
+                control={control}
+                render={({ field }) => <TextField {...field} label={t('Name')} className='w-full border rounded-lg p-2' disabled />}
+              />
+              <Controller
+                name='avatar'
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label={t('Avatar')}
+                    slotProps={{
+                      input: {
+                        endAdornment: (
+                          <div>
+                            <UploadOutlined
+                              onClick={() => {
+                                ref.current?.open?.();
+                              }}
+                            />
+                            <FileUpload ref={ref} onChange={onChange} />
+                          </div>
+                        ),
+                      },
+                    }}
+                  />
+                )}
+              />
+              <Controller name='description' control={control} render={({ field }) => <TextField {...field} label={t('Description')} multiline rows={4} />} />
+              <Button className='' type='submit' variant='contained'>
+                {t('Save')}
+              </Button>
+            </form>
           </div>
         </div>
       </div>