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'>