feat: 添加i18n，美化界面

src/pages/user/edit/List.tsx

@@ -1,12 +1,9 @@
-import { Button, Input, Modal, Space } from 'antd';
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Input, Modal } from 'antd';
+import { Fragment, useEffect, useState } from 'react';
 import { useUserStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { Form } from 'antd';
-import { useNewNavigate } from '@/modules';
 import EditOutlined from '@ant-design/icons/EditOutlined';
-import SettingOutlined from '@ant-design/icons/SettingOutlined';
-import LinkOutlined from '@ant-design/icons/LinkOutlined';
 import SaveOutlined from '@ant-design/icons/SaveOutlined';
 import DeleteOutlined from '@ant-design/icons/DeleteOutlined';
 import LeftOutlined from '@ant-design/icons/LeftOutlined';
@@ -14,8 +11,9 @@ import PlusOutlined from '@ant-design/icons/PlusOutlined';
 import clsx from 'clsx';
 import { isObjectNull } from '@/utils/is-null';
 import { CardBlank } from '@kevisual/center-components/card/CardBlank.tsx';
-import { message } from '@/modules/message';
-import { Dialog } from '@mui/material';
+import { Dialog, ButtonGroup, Button, DialogContent, DialogTitle } from '@mui/material';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { useTranslation } from 'react-i18next';
 const FormModal = () => {
   const [form] = Form.useForm();
   const userStore = useUserStore(
@@ -47,9 +45,9 @@ const FormModal = () => {
     userStore.setFormData({});
   };
   const isEdit = userStore.formData.id;
+  const { t } = useTranslation();
   return (
     <Dialog
-      title={isEdit ? 'Edit' : 'Add'}
       open={userStore.showEdit}
       onClose={() => userStore.setShowEdit(false)}
       sx={{
@@ -57,33 +55,36 @@ const FormModal = () => {
           width: '800px',
         },
       }}>
-      <Form
-        form={form}
-        onFinish={onFinish}
-        labelCol={{
-          span: 4,
-        }}
-        wrapperCol={{
-          span: 20,
-        }}>
-        <Form.Item name='id' hidden>
-          <Input />
-        </Form.Item>
-        <Form.Item name='username' label='username'>
-          <Input />
-        </Form.Item>
-        <Form.Item name='description' label='description'>
-          <Input.TextArea rows={4} />
-        </Form.Item>
-        <Form.Item label=' ' colon={false}>
-          <Button type='primary' htmlType='submit'>
-            Submit
-          </Button>
-          <Button className='ml-2' htmlType='reset' onClick={onClose}>
-            Cancel
-          </Button>
-        </Form.Item>
-      </Form>
+      <DialogTitle>{isEdit ? t('Edit') : t('Add')}</DialogTitle>
+      <DialogContent>
+        <Form
+          form={form}
+          onFinish={onFinish}
+          labelCol={{
+            span: 4,
+          }}
+          wrapperCol={{
+            span: 20,
+          }}>
+          <Form.Item name='id' hidden>
+            <Input />
+          </Form.Item>
+          <Form.Item name='username' label='username'>
+            <Input />
+          </Form.Item>
+          <Form.Item name='description' label='description'>
+            <Input.TextArea rows={4} />
+          </Form.Item>
+          <Form.Item label=' ' colon={false}>
+            <Button type='submit' variant='contained'>
+              {t('Submit')}
+            </Button>
+            <Button className='ml-2' type='reset' onClick={onClose}>
+              {t('Cancel')}
+            </Button>
+          </Form.Item>
+        </Form>
+      </DialogContent>
     </Dialog>
   );
 };
@@ -116,7 +117,9 @@ export const List = () => {
   return (
     <div className='w-full h-full flex'>
       <div className='p-2'>
-        <Button onClick={onAdd} icon={<PlusOutlined />}></Button>
+        <IconButton onClick={onAdd} variant='contained'>
+          <PlusOutlined />
+        </IconButton>
       </div>
       <div className='flex grow overflow-hidden h-full'>
         <div className='grow overflow-auto scrollbar bg-gray-100'>
@@ -145,15 +148,19 @@ export const List = () => {
                         <div className='font-light text-xs mt-2'>{item.description ? item.description : '-'}</div>
                       </div>
                       <div className='flex mt-2 '>
-                        <Space.Compact>
+                        <ButtonGroup
+                          variant='contained'
+                          color='primary'
+                          sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
                           <Button
                             onClick={(e) => {
                               userStore.setFormData(item);
                               userStore.setShowEdit(true);
                               setCodeEdit(false);
                               e.stopPropagation();
-                            }}
-                            icon={<EditOutlined />}></Button>
+                            }}>
+                            <EditOutlined />
+                          </Button>
                           <Button
                             onClick={(e) => {
                               modal.confirm({
@@ -164,9 +171,10 @@ export const List = () => {
                                 },
                               });
                               e.stopPropagation();
-                            }}
-                            icon={<DeleteOutlined />}></Button>
-                        </Space.Compact>
+                            }}>
+                            <DeleteOutlined />
+                          </Button>
+                        </ButtonGroup>
                       </div>
                     </div>
                   </Fragment>
@@ -187,14 +195,16 @@ export const List = () => {
                 onClick={() => {
                   setCodeEdit(false);
                   userStore.setFormData({});
-                }}
-                icon={<LeftOutlined />}></Button>
+                }}>
+                <LeftOutlined />
+              </Button>
               <Button
                 onClick={() => {
                   console.log('save', userStore.formData);
                   userStore.updateData({ ...userStore.formData, code });
-                }}
-                icon={<SaveOutlined />}></Button>
+                }}>
+                <SaveOutlined />
+              </Button>
             </div>
           </div>
           <div className='h-[94%] p-2 rounded-2 shadow-xs'>

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>