85 lines
2.6 KiB
TypeScript
85 lines
2.6 KiB
TypeScript
import { AiMoudle } from '@/pages/ai-chat';
|
|
import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
|
|
import { Button, Tooltip } from 'antd';
|
|
import { Outlet } from 'react-router-dom';
|
|
import { LayoutMenu } from './Menu';
|
|
import { useLayoutStore } from './store';
|
|
import { useShallow } from 'zustand/react/shallow';
|
|
import { useEffect } from 'react';
|
|
import { LayoutUser } from './LayoutUser';
|
|
import PandaPNG from '@/assets/panda.png';
|
|
|
|
type LayoutMainProps = {
|
|
title?: React.ReactNode;
|
|
children?: React.ReactNode;
|
|
};
|
|
export const LayoutMain = (props: LayoutMainProps) => {
|
|
const menuStore = useLayoutStore(
|
|
useShallow((state) => {
|
|
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 />
|
|
<div className='layout-menu items-center'>
|
|
<Button
|
|
className='mr-4'
|
|
onClick={() => {
|
|
menuStore.setOpen(true);
|
|
}}
|
|
icon={<MenuOutlined />}></Button>
|
|
<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 avatar cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
|
|
{menuStore.me?.avatar ? (
|
|
<img className='w-8 h-8 rounded-full' src={menuStore.me?.avatar} alt='avatar' />
|
|
) : (
|
|
<img className='w-8 h-8 rounded-full' src={PandaPNG} alt='avatar' />
|
|
)}
|
|
</div>
|
|
<div className='cursor-pointer' onClick={() => menuStore.setOpenUser(true)}>
|
|
{menuStore.me?.username}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className='flex'
|
|
style={{
|
|
height: 'calc(100vh - 3rem)',
|
|
}}>
|
|
<div className='flex-grow overflow-hidden'>
|
|
<div className='w-full h-full rounded-lg'>
|
|
<Outlet />
|
|
</div>
|
|
</div>
|
|
<AiMoudle />
|
|
</div>
|
|
<LayoutUser />
|
|
</div>
|
|
);
|
|
};
|