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>

src/pages/user/login/Login.tsx

@@ -1,11 +1,14 @@
-import { Button, Form, Input } from 'antd';
 import { useLoginStore } from '../store/login';
 import { useShallow } from 'zustand/react/shallow';
-import { useEffect } from 'react';
-import { isObjectNull } from '@/utils/is-null';
-import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import LockOutlined from '@ant-design/icons/LockOutlined';
+import UserOutlined from '@ant-design/icons/UserOutlined';
+import { Button } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { TextField, InputAdornment } from '@mui/material';
+import { useForm, Controller } from 'react-hook-form';
 export const Login = () => {
-  const [form] = Form.useForm();
+  const { t } = useTranslation();
+  const { control, handleSubmit } = useForm();
   const loginStore = useLoginStore(
     useShallow((state) => {
       return {
@@ -15,50 +18,68 @@ export const Login = () => {
       };
     }),
   );
-  useEffect(() => {
-    const isNull = isObjectNull(loginStore.formData);
-    if (isNull) {
-      form.setFieldsValue({});
-    } else {
-      form.setFieldsValue(loginStore.formData);
-    }
-  }, [loginStore.formData]);
+
   const onFinish = (values: any) => {
     loginStore.setFormData(values);
     loginStore.login();
   };
+
   return (
-    <div className='bg-slate-200 text-slate-900 w-full h-full overflow-hidden'>
+    <div className='bg-gray-100 text-primary w-full h-full overflow-hidden'>
       <div className='w-full h-full absolute top-[10%] xl:top-[15%] 2xl:top-[18%] 3xl:top-[20%] '>
         <div className='w-[400px] mx-auto'>
-          <h1 className='mb-4 tracking-widest text-center'>Login</h1>
+          <h1 className='mb-4 tracking-widest text-center'>{t('Login')}</h1>
           <div className='card border-t-2 border-gray-200 pt-8 px-8'>
-            <Form
-              className='mt-2'
-              form={form}
-              onFinish={onFinish}
-              labelCol={{
-                span: 6,
-              }}>
-              <Form.Item label='' name='username'>
-                <Input addonBefore={<UserOutlined />} placeholder='Username' />
-              </Form.Item>
-              <Form.Item label='' name='password'>
-                <Input type='password' addonBefore={<LockOutlined />} placeholder='Password' />
-              </Form.Item>
-              <Form.Item label='' colon={false}>
-                <div className='flex gap-2'>
-                  <Button
-                    type='primary'
-                    htmlType='submit'
-                    style={{
-                      background: '#84d5e8',
-                    }}>
-                    Login
-                  </Button>
-                </div>
-              </Form.Item>
-            </Form>
+            <form className='mt-2 flex flex-col gap-8' onSubmit={handleSubmit(onFinish)}>
+              <Controller
+                name='username'
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    label={t('Username')}
+                    variant='outlined'
+                    fullWidth
+                    slotProps={{
+                      input: {
+                        startAdornment: (
+                          <InputAdornment position='start'>
+                            <UserOutlined className='text-primary!' />
+                          </InputAdornment>
+                        ),
+                      },
+                    }}
+                  />
+                )}
+              />
+              <Controller
+                name='password'
+                control={control}
+                render={({ field }) => (
+                  <TextField
+                    {...field}
+                    type='password'
+                    label={t('Password')}
+                    variant='outlined'
+                    fullWidth
+                    slotProps={{
+                      input: {
+                        startAdornment: (
+                          <InputAdornment position='start'>
+                            <LockOutlined className='text-primary!' />
+                          </InputAdornment>
+                        ),
+                      },
+                    }}
+                  />
+                )}
+              />
+              <div className='flex gap-2'>
+                <Button type='submit' variant='contained'>
+                  {t('Login')}
+                </Button>
+              </div>
+            </form>
           </div>
         </div>
       </div>

src/pages/user/module/AvatarUpload.tsx

@@ -1,74 +0,0 @@
-import { useState } from 'react';
-import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
-import { Flex, Upload } from 'antd';
-import { message } from '@/modules/message';
-import type { GetProp, UploadProps } from 'antd';
-
-type FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
-
-const getBase64 = (img: FileType, callback: (url: string) => void) => {
-  const reader = new FileReader();
-  reader.addEventListener('load', () => callback(reader.result as string));
-  reader.readAsDataURL(img);
-};
-
-const beforeUpload = (file: FileType) => {
-  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
-  if (!isJpgOrPng) {
-    message.error('You can only upload JPG/PNG file!');
-  }
-  const isLt2M = file.size / 1024 / 1024 < 2;
-  if (!isLt2M) {
-    message.error('Image must smaller than 2MB!');
-  }
-  return isJpgOrPng && isLt2M;
-};
-
-export const AvatarUpload = () => {
-  const [loading, setLoading] = useState(false);
-  const [imageUrl, setImageUrl] = useState<string>();
-
-  const handleChange: UploadProps['onChange'] = (info) => {
-    if (info.file.status === 'uploading') {
-      setLoading(true);
-      return;
-    }
-    if (info.file.status === 'done') {
-      // Get this url from response in real world.
-      getBase64(info.file.originFileObj as FileType, (url) => {
-        setLoading(false);
-        setImageUrl(url);
-      });
-    }
-  };
-
-  const uploadButton = (
-    <button style={{ border: 0, background: 'none' }} type='button'>
-      {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div style={{ marginTop: 8 }}>Upload</div>
-    </button>
-  );
-  const onAciton = async (file) => {
-    console.log('file', file);
-    return '';
-  };
-  const customAction = (file) => {
-    console.log('file', file);
-  };
-  return (
-    <Flex gap='middle' wrap>
-      <Upload
-        name='avatar'
-        listType='picture-circle'
-        className='avatar-uploader'
-        multiple={false}
-        showUploadList={false}
-        action={onAciton}
-        customRequest={customAction}
-        beforeUpload={beforeUpload}
-        onChange={handleChange}>
-        {imageUrl ? <img src={imageUrl} alt='avatar' style={{ width: '100%' }} /> : uploadButton}
-      </Upload>
-    </Flex>
-  );
-};

src/pages/user/module/FileUpload.tsx

@@ -1,7 +1,6 @@
 import { message } from '@/modules/message';
 import { useImperativeHandle, useRef, forwardRef } from 'react';
-import type { GetProp, UploadProps } from 'antd';
-type FileTypeOrg = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];
+import { uploadFileChunked } from '@kevisual/resources/index.ts';
 
 export type FileType = {
   name: string;
@@ -10,7 +9,7 @@ export type FileType = {
   webkitRelativePath: string; // 包含name
 };
 
-const beforeUpload = (file: FileTypeOrg) => {
+const beforeUpload = (file: any) => {
   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
   if (!isJpgOrPng) {
     message.error('You can only upload JPG/PNG file!');
@@ -33,22 +32,15 @@ export const FileUpload = forwardRef<any, Props>((props, ref) => {
     console.log(e.target.files);
     const file = e.target.files[0];
     const endType = file.name.split('.').pop();
-    const formData = new FormData();
-    formData.append('file', file, `avatar.${endType}`); // 保留文件夹路径
-    const res = await fetch('/api/upload', {
-      method: 'POST',
-      body: formData, //
-      headers: {
-        Authorization: 'Bearer ' + localStorage.getItem('token'),
-      },
-    }).then((res) => res.json());
+    const filename = `avatar.${endType}`;
+    const res = (await uploadFileChunked(file, {
+      isPublic: true,
+      filename,
+    })) as any;
+    console.log('res', res);
     if (res?.code === 200) {
-      console.log('res', res);
-      //
-      const [file] = res.data;
-      const { path } = file || {};
-      props?.onChange?.(path);
-      //
+      const resource = res.data?.resource;
+      props?.onChange?.(resource);
     } else {
       message.error(res.message || 'Request failed');
     }

src/pages/user/store/index.ts

@@ -53,13 +53,11 @@ export const useUserStore = create<UserStore>((set, get) => {
       }
     },
     updateSelf: async (data) => {
-      const loaded = message.loading('Action in progress..', 0);
       const res = await query.post({
         path: 'user',
         key: 'updateSelf',
         data,
       });
-      loaded();
       if (res.code === 200) {
         message.success('Success');
         set({ formData: res.data });