feat: 添加i18n，美化界面

src/pages/app/edit/AppVersionList.tsx

@@ -2,14 +2,19 @@ import { useNavigation, useParams } from 'react-router';
 import { useAppVersionStore } from '../store';
 import { useShallow } from 'zustand/react/shallow';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, Form, Input, Modal, Space, Tooltip } from 'antd';
+import { Form, Input, Modal, Tooltip } from 'antd';
 import { CloudUploadOutlined, DeleteOutlined, EditOutlined, FileOutlined, LeftOutlined, LinkOutlined, PlusOutlined } from '@ant-design/icons';
 import { isObjectNull } from '@/utils/is-null';
 import { FileUpload } from '../modules/FileUpload';
 import clsx from 'clsx';
 import { message } from '@/modules/message';
 import { useNewNavigate } from '@/modules';
+import { Button } from '@mui/material';
+import { Dialog, DialogContent, DialogTitle, ButtonGroup } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
 const FormModal = () => {
+  const { t } = useTranslation();
   const [form] = Form.useForm();
   const containerStore = useAppVersionStore(
     useShallow((state) => {
@@ -68,11 +73,11 @@ const FormModal = () => {
           <Input />
         </Form.Item>
         <Form.Item label=' ' colon={false}>
-          <Button type='primary' htmlType='submit'>
-            Submit
+          <Button type='submit' variant='contained' color='primary'>
+            {t('submit')}
           </Button>
-          <Button className='ml-2' htmlType='reset' onClick={onClose}>
-            Cancel
+          <Button className='ml-2' onClick={onClose}>
+            {t('cancel')}
           </Button>
         </Form.Item>
       </Form>
@@ -115,24 +120,25 @@ export const AppVersionList = () => {
   return (
     <div className='w-full h-full flex bg-slate-100'>
       <div className='p-2 bg-white'>
-        <Button
+        <IconButton
           onClick={() => {
             versionStore.setFormData({ key: appKey });
             versionStore.setShowEdit(true);
-          }}
-          icon={<PlusOutlined />}
-        />
+          }}>
+          <PlusOutlined />
+        </IconButton>
       </div>
 
       <div className='grow h-full relative'>
         <div className='absolute top-2 left-4'>
           <Tooltip title='返回' placement='bottom'>
-            <Button
+            <IconButton
+              variant='contained'
               onClick={() => {
                 navigate('/app/edit/list');
-              }}
-              icon={<LeftOutlined />}
-            />
+              }}>
+              <LeftOutlined />
+            </IconButton>
           </Tooltip>
         </div>
 
@@ -144,7 +150,7 @@ export const AppVersionList = () => {
                 const color = isPublish ? 'bg-green-500' : '';
                 const isRunning = item.status === 'running';
                 return (
-                  <div className='card border-t w-[300px]' key={index}>
+                  <div className='card w-[300px]' key={index}>
                     <div className={'flex items-center justify-between'}>
                       {item.version}
 
@@ -153,7 +159,10 @@ export const AppVersionList = () => {
                       </Tooltip>
                     </div>
                     <div className='mt-4'>
-                      <Space.Compact>
+                      <ButtonGroup
+                        variant='contained'
+                        color='primary'
+                        sx={{ color: 'white', '& .MuiButton-root': { color: 'white', minWidth: '32px', width: '32px', height: '32px', padding: '6px' } }}>
                         {/* <Button
                           onClick={() => {
                             versionStore.setFormData(item);
@@ -172,21 +181,20 @@ export const AppVersionList = () => {
                                 },
                               });
                               e.stopPropagation();
-                            }}
-                            icon={<DeleteOutlined />}
-                          />
+                            }}>
+                            <DeleteOutlined />
+                          </Button>
                         </Tooltip>
                         <Tooltip title='使用当前版本，发布为此版本'>
                           <Button
-                            icon={<CloudUploadOutlined />}
                             onClick={() => {
                               versionStore.publishVersion({ id: item.id });
-                            }}
-                          />
+                            }}>
+                            <CloudUploadOutlined />
+                          </Button>
                         </Tooltip>
                         <Tooltip title={'To Test App'}>
                           <Button
-                            icon={<LinkOutlined />}
                             onClick={() => {
                               if (isRunning) {
                                 const link = new URL(`/test/${item.id}`, location.origin);
@@ -194,18 +202,20 @@ export const AppVersionList = () => {
                               } else {
                                 message.error('The app is not running');
                               }
-                            }}></Button>
+                            }}>
+                            <LinkOutlined />
+                          </Button>
                         </Tooltip>
                         <Tooltip title='文件管理'>
                           <Button
-                            icon={<FileOutlined />}
                             onClick={() => {
                               versionStore.setFormData(item);
                               setIsUpload(true);
-                            }}
-                          />
+                            }}>
+                            <FileOutlined />
+                          </Button>
                         </Tooltip>
-                      </Space.Compact>
+                      </ButtonGroup>
                     </div>
                   </div>
                 );
@@ -220,12 +230,12 @@ export const AppVersionList = () => {
           <div className='bg-white p-2 w-[600px] h-full flex flex-col'>
             <div className='header flex items-center gap-2'>
               <Tooltip title='返回'>
-                <Button
+                <IconButton
                   onClick={() => {
                     setIsUpload(false);
-                  }}
-                  icon={<LeftOutlined />}
-                />
+                  }}>
+                  <LeftOutlined />
+                </IconButton>
               </Tooltip>
               <div className='font-bold'>{versionStore.key}</div>
             </div>