feat: 添加i18n，美化界面

src/modules/layout/index.tsx

@@ -1,5 +1,5 @@
 import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
-import { Tooltip } from 'antd';
+import { Tooltip } from '@mui/material';
 import { Outlet } from 'react-router-dom';
 import { LayoutMenu } from './Menu';
 import { useLayoutStore, usePlatformStore } from './store';
@@ -7,9 +7,14 @@ import { useShallow } from 'zustand/react/shallow';
 import { useEffect, useLayoutEffect, useState } from 'react';
 import { LayoutUser } from './LayoutUser';
 import PandaPNG from '@/assets/panda.png';
-import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import { Panel, PanelGroup } from 'react-resizable-panels';
 import clsx from 'clsx';
-import { IconButton as Button } from '@mui/material';
+import { Button, Menu, MenuItem } from '@mui/material';
+import i18n from 'i18next';
+
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
+import { Languages } from 'lucide-react';
+
 type LayoutMainProps = {
   title?: React.ReactNode;
   children?: React.ReactNode;
@@ -46,6 +51,23 @@ export const LayoutMain = (props: LayoutMainProps) => {
   useEffect(() => {
     menuStore.getMe();
   }, []);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  const changeLanguage = (lng: string) => {
+    i18n.changeLanguage(lng);
+    handleClose();
+  };
+  const currentLanguage = i18n.language;
+
   return (
     <div className='flex w-full h-full flex-col relative'>
       <LayoutMenu />
@@ -54,16 +76,31 @@ export const LayoutMain = (props: LayoutMainProps) => {
         style={{
           cursor: isElectron ? 'move' : 'default',
         }}>
-        <Button
+        <IconButton
           className={clsx('mr-4 cursor-pointer no-drag', isMac && 'ml-16')}
           onClick={() => {
             menuStore.setOpen(true);
           }}>
           <MenuOutlined />
-        </Button>
+        </IconButton>
         <div className='flex grow justify-between pl-4 items-center'>
           {props.title}
           <div className='mr-4 flex gap-4 items-center no-drag'>
+            <div>
+              <Tooltip title={currentLanguage === 'en' ? 'English' : 'Chinese'}>
+                <IconButton onClick={handleClick} variant='contained'>
+                  <Languages />
+                </IconButton>
+              </Tooltip>
+              <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+                <MenuItem selected={currentLanguage === 'en'} onClick={() => changeLanguage('en')}>
+                  English
+                </MenuItem>
+                <MenuItem selected={currentLanguage === 'zh'} onClick={() => changeLanguage('zh')}>
+                  中文
+                </MenuItem>
+              </Menu>
+            </div>
             {menuStore.me?.type === 'org' && (
               <div>
                 <Tooltip title='Switch To User'>
@@ -97,16 +134,11 @@ export const LayoutMain = (props: LayoutMainProps) => {
         <PanelGroup className='w-full h-full panel-layout' autoSaveId='editor-layout-main' direction='horizontal'>
           <Panel style={{ height: '100%' }}>
             <div className='h-full overflow-hidden'>
-              <div className='w-full h-full rounded-lg'>
+              <div className='w-full h-full rounded-lg text-primary'>
                 <Outlet />
               </div>
             </div>
           </Panel>
-
-          {/* <PanelResizeHandle />
-          <Panel style={{ height: '100%' }} defaultSize={25} className={clsx('bg-gray-100')}>
-            侧边栏
-          </Panel> */}
         </PanelGroup>
       </div>
       <LayoutUser />