feat: add app and config

src/modules/layout/LayoutUser.tsx

@@ -3,13 +3,13 @@ import { useLayoutStore } from './store';
 import clsx from 'clsx';
 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 { DashboardOutlined, HomeOutlined, LogoutOutlined, SmileOutlined } from '@ant-design/icons';
+import SmileOutlined from '@ant-design/icons/SmileOutlined';
+import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
 import { useMemo } from 'react';
-import { query } from '../query';
+import { query, queryLogin } from '../query';
 import { useNewNavigate } from '../navicate';
-import { Users, X } from 'lucide-react';
+import { LogOut, Map, SquareUser, Users, X } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import React from 'react';
 
@@ -27,17 +27,17 @@ export const LayoutUser = () => {
   const meun = [
     {
       title: t('Your profile'),
-      icon: <HomeOutlined />,
+      icon: <SquareUser size={16} />,
       link: '/user/profile',
     },
     {
       title: t('Your orgs'),
-      icon: <DashboardOutlined />,
+      icon: <SwitcherOutlined />,
       link: '/org/edit/list',
     },
     {
       title: t('Site Map'),
-      icon: <HomeOutlined />,
+      icon: <Map size={16} />,
       link: '/map',
     },
   ];
@@ -110,12 +110,17 @@ export const LayoutUser = () => {
         </div>
         <div
           className='flex items-center p-4 hover:bg-secondary hover:text-white  cursor-pointer'
-          onClick={() => {
-            query.removeToken();
-            window.open('/user/login', '_self');
+          onClick={async () => {
+            const res = await queryLogin.logout();
+            // console.log(res);
+            if (res.success) {
+              window.open('/user/login', '_self');
+            } else {
+              message.error(res.message || 'Logout failed');
+            }
           }}>
           <div className='mr-4'>
-            <LogoutOutlined />
+            <LogOut size={16} />
           </div>
           <div>{t('Login Out')}</div>
         </div>

src/modules/layout/Menu.tsx

@@ -3,8 +3,13 @@ import { useLayoutStore } from './store';
 import clsx from 'clsx';
 import { Button } from '@mui/material';
 import { message } from '@/modules/message';
-import { AppstoreOutlined, CodeOutlined, FolderOutlined, HomeOutlined, SmileOutlined, SwitcherOutlined } from '@ant-design/icons';
-import { X } from 'lucide-react';
+import HomeOutlined from '@ant-design/icons/HomeOutlined';
+import AppstoreOutlined from '@ant-design/icons/AppstoreOutlined';
+import FolderOutlined from '@ant-design/icons/FolderOutlined';
+import CodeOutlined from '@ant-design/icons/CodeOutlined';
+import SwitcherOutlined from '@ant-design/icons/SwitcherOutlined';
+import SmileOutlined from '@ant-design/icons/SmileOutlined';
+import { X, Settings } from 'lucide-react';
 import { useNewNavigate } from '../navicate';
 import { useTranslation } from 'react-i18next';
 
@@ -36,6 +41,7 @@ export const LayoutMenu = () => {
       icon: <SwitcherOutlined />,
       link: '/org/edit/list',
     },
+    { title: t('Config'), icon: <Settings size={16} />, link: '/config/edit/list' },
     {
       title: t('About'),
       icon: <SmileOutlined />,
@@ -72,7 +78,7 @@ export const LayoutMenu = () => {
                   }
                   setOpen(false);
                 }}>
-                <div className='w-6 h-6'>{item.icon}</div>
+                <div className='w-6 h-6 flex items-center justify-center'>{item.icon}</div>
                 <div>{item.title}</div>
               </div>
             );

src/modules/layout/index.tsx

@@ -14,6 +14,8 @@ import i18n from 'i18next';
 
 import { IconButton } from '@kevisual/center-components/button/index.tsx';
 import { Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { toast } from 'react-toastify';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
@@ -64,10 +66,11 @@ export const LayoutMain = (props: LayoutMainProps) => {
 
   const changeLanguage = (lng: string) => {
     i18n.changeLanguage(lng);
+    toast.success(t('Language changed to') + ' ' + t(lng));
     handleClose();
   };
   const currentLanguage = i18n.language;
-
+  const { t } = useTranslation();
   return (
     <div className='flex w-full h-full flex-col relative'>
       <LayoutMenu />
@@ -89,10 +92,27 @@ export const LayoutMain = (props: LayoutMainProps) => {
             <div>
               <Tooltip title={currentLanguage === 'en' ? 'English' : 'Chinese'}>
                 <IconButton onClick={handleClick} variant='contained'>
-                  <Languages />
+                  <Languages size={16} />
                 </IconButton>
               </Tooltip>
-              <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleClose}>
+              <Menu
+                anchorEl={anchorEl}
+                open={Boolean(anchorEl)}
+                onClose={handleClose}
+                anchorOrigin={{
+                  vertical: 'bottom',
+                  horizontal: 'left',
+                }}
+                transformOrigin={{
+                  vertical: -2,
+                  horizontal: 52,
+                }}
+                sx={{
+                  '& .MuiButtonBase-root.Mui-selected': {
+                    backgroundColor: 'primary.main',
+                    color: 'white',
+                  },
+                }}>
                 <MenuItem selected={currentLanguage === 'en'} onClick={() => changeLanguage('en')}>
                   English
                 </MenuItem>
@@ -103,13 +123,13 @@ export const LayoutMain = (props: LayoutMainProps) => {
             </div>
             {menuStore.me?.type === 'org' && (
               <div>
-                <Tooltip title='Switch To User'>
-                  <Button
+                <Tooltip title={t('Switch To User')}>
+                  <IconButton
                     onClick={() => {
                       menuStore.switchOrg('', 'user');
                     }}>
                     <SwapOutlined />
-                  </Button>
+                  </IconButton>
                 </Tooltip>
               </div>
             )}

src/modules/query.ts

@@ -33,15 +33,6 @@ export const request = query.post;
 
 export const ws = query.qws?.ws;
 
-// 当连接成功时
-// query.qws.ws.onopen = () => {
-//   console.log('Connected to WebSocket server');
-// };
-
-// // 处理 WebSocket 关闭
-// query.qws.ws.onclose = () => {
-//   console.log('Disconnected from WebSocket server');
-// };
 query.qws.listenConnect(() => {
   console.log('Connected to WebSocket server');
 });