feat: 添加i18n，美化界面

src/modules/layout/LayoutUser.tsx

@@ -1,42 +1,18 @@
 import { useShallow } from 'zustand/react/shallow';
 import { useLayoutStore } from './store';
 import clsx from 'clsx';
-import { Button, Dropdown } from 'antd';
+import { Menu, MenuItem, Tooltip } from '@mui/material';
+import { Button } from '@mui/material';
+import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { message } from '@/modules/message';
-import {
-  CloseOutlined,
-  CodeOutlined,
-  DashboardOutlined,
-  HomeOutlined,
-  LogoutOutlined,
-  MessageOutlined,
-  ReadOutlined,
-  RocketOutlined,
-  SmileOutlined,
-  SwapOutlined,
-  SwitcherOutlined,
-  UserOutlined,
-} from '@ant-design/icons';
+import { DashboardOutlined, HomeOutlined, LogoutOutlined, SmileOutlined } from '@ant-design/icons';
 import { useMemo } from 'react';
 import { query } from '../query';
 import { useNewNavigate } from '../navicate';
-const meun = [
-  {
-    title: 'Your profile',
-    icon: <HomeOutlined />,
-    link: '/user/profile',
-  },
-  {
-    title: 'Your orgs',
-    icon: <DashboardOutlined />,
-    link: '/org/edit/list',
-  },
-  {
-    title: 'Site Map',
-    icon: <HomeOutlined />,
-    link: '/map',
-  },
-];
+import { Users, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+
 export const LayoutUser = () => {
   const { open, setOpen, ...store } = useLayoutStore(
     useShallow((state) => ({
@@ -47,6 +23,24 @@ export const LayoutUser = () => {
     })),
   );
   const navigate = useNewNavigate();
+  const { t } = useTranslation();
+  const meun = [
+    {
+      title: t('Your profile'),
+      icon: <HomeOutlined />,
+      link: '/user/profile',
+    },
+    {
+      title: t('Your orgs'),
+      icon: <DashboardOutlined />,
+      link: '/org/edit/list',
+    },
+    {
+      title: t('Site Map'),
+      icon: <HomeOutlined />,
+      link: '/map',
+    },
+  ];
   const items = useMemo(() => {
     const orgs = store.me?.orgs || [];
     return orgs.map((item) => {
@@ -57,30 +51,41 @@ export const LayoutUser = () => {
       };
     });
   }, [store.me]);
+
+  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
   return (
-    <div className={clsx('w-full h-full absolute z-20 no-drag', !open && 'hidden')}>
+    <div className={clsx('w-full h-full absolute z-20 no-drag ', !open && 'hidden')}>
       <div
-        className='bg-white w-full absolute h-full opacity-60 z-0'
+        className='w-full absolute h-full opacity-60 z-0'
         onClick={() => {
           setOpen(false);
         }}></div>
-      <div className='w-[400px] h-full absolute top-0 right-0 bg-white rounded-l-lg'>
+      <div className='w-[400px] bg-amber-900 text-primary transition-all duration-300 h-full absolute top-0 right-0 rounded-l-lg'>
         <div className='flex justify-between p-6 mt-4 font-bold items-center border-b'>
-          User: {store.me?.username}
+          <div className='flex items-center gap-2'>
+            {t('User')}: <span className='text-primary'>{store.me?.username}</span>
+          </div>
           <div className='flex gap-4'>
             {items.length > 0 && (
-              <Dropdown
-                placement='bottomRight'
-                menu={{
-                  items: items,
-                  onClick: (item) => {
-                    store.switchOrg(item.key, 'org');
-                  },
-                }}>
-                <Button icon={<SwapOutlined />} onClick={() => {}}></Button>
-              </Dropdown>
+              <Tooltip title={t('Switch Org')}>
+                <Button aria-controls='switch-org-menu' aria-haspopup='true' onClick={handleClick}>
+                  <Users />
+                </Button>
+              </Tooltip>
             )}
-            <Button icon={<CloseOutlined />} onClick={() => setOpen(false)}></Button>
+
+            <Button onClick={() => setOpen(false)}>
+              <X />
+            </Button>
           </div>
         </div>
         <div className='mt-3 font-medium'>
@@ -88,7 +93,7 @@ export const LayoutUser = () => {
             return (
               <div
                 key={index}
-                className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
+                className='flex items-center p-4 hover:bg-secondary hover:text-white  cursor-pointer'
                 onClick={() => {
                   if (item.link) {
                     navigate(item.link);
@@ -104,7 +109,7 @@ export const LayoutUser = () => {
           })}
         </div>
         <div
-          className='flex items-center p-4 hover:bg-gray-100 cursor-pointer'
+          className='flex items-center p-4 hover:bg-secondary hover:text-white  cursor-pointer'
           onClick={() => {
             query.removeToken();
             window.open('/user/login', '_self');
@@ -112,9 +117,24 @@ export const LayoutUser = () => {
           <div className='mr-4'>
             <LogoutOutlined />
           </div>
-          <div>Login Out</div>
+          <div>{t('Login Out')}</div>
         </div>
       </div>
+      <Menu id='simple-menu' anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
+        {items.map((item, index) => {
+          return (
+            <MenuItem
+              key={index}
+              onClick={() => {
+                store.switchOrg(item.key, 'org');
+                handleClose();
+              }}>
+              <div className='mr-4'>{item.icon}</div>
+              <div>{item.label}</div>
+            </MenuItem>
+          );
+        })}
+      </Menu>
     </div>
   );
 };