feat: add layout and org

src/modules/layout/index.tsx

@@ -1,21 +1,33 @@
 import { AiMoudle } from '@/pages/ai-chat';
-import { MenuOutlined } from '@ant-design/icons';
-import { Button } from 'antd';
+import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
+import { Button, Tooltip } from 'antd';
 import { Outlet } from 'react-router-dom';
 import { LayoutMenu } from './Menu';
-import { useMenuStore } from './store';
+import { useLayoutStore } from './store';
 import { useShallow } from 'zustand/react/shallow';
+import { useEffect } from 'react';
+import { LayoutUser } from './LayoutUser';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
   children?: React.ReactNode;
 };
 export const LayoutMain = (props: LayoutMainProps) => {
-  const menuStore = useMenuStore(
+  const menuStore = useLayoutStore(
     useShallow((state) => {
-      return { open: state.open, setOpen: state.setOpen };
+      return {
+        open: state.open,
+        setOpen: state.setOpen, //
+        getMe: state.getMe,
+        me: state.me,
+        setOpenUser: state.setOpenUser,
+        switchOrg: state.switchOrg,
+      };
     }),
   );
+  useEffect(() => {
+    menuStore.getMe();
+  }, []);
   return (
     <div className='flex w-full h-full flex-col relative'>
       <LayoutMenu />
@@ -26,7 +38,26 @@ export const LayoutMain = (props: LayoutMainProps) => {
             menuStore.setOpen(true);
           }}
           icon={<MenuOutlined />}></Button>
-        <div className='flex flex-grow justify-between'>{props.title}</div>
+        <div className='flex flex-grow justify-between'>
+          {props.title}
+          <div className='mr-4 flex gap-4 items-center'>
+            {menuStore.me?.type === 'org' && (
+              <div>
+                <Tooltip title='Switch To User'>
+                  <Button
+                    icon={<SwapOutlined />}
+                    onClick={() => {
+                      menuStore.switchOrg('', 'user');
+                    }}></Button>
+                </Tooltip>
+              </div>
+            )}
+            <div className='w-8 h-8 rounded-full bg-blue-200 avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}></div>
+            <div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
+              {menuStore.me?.username}
+            </div>
+          </div>
+        </div>
       </div>
       <div
         className='flex'
@@ -40,6 +71,7 @@ export const LayoutMain = (props: LayoutMainProps) => {
         </div>
         <AiMoudle />
       </div>
+      <LayoutUser />
     </div>
   );
 };