temp： 暂存更新

src/modules/layout/index.tsx

@@ -1,4 +1,4 @@
-import { AiMoudle } from '@/pages/ai-chat';
+import { AiMoudle, useAiStore } from '@/pages/ai-chat';
 import { MenuOutlined, SwapOutlined } from '@ant-design/icons';
 import { Button, Tooltip } from 'antd';
 import { Outlet } from 'react-router-dom';
@@ -8,6 +8,8 @@ import { useShallow } from 'zustand/react/shallow';
 import { useEffect } from 'react';
 import { LayoutUser } from './LayoutUser';
 import PandaPNG from '@/assets/panda.png';
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels';
+import clsx from 'clsx';
 
 type LayoutMainProps = {
   title?: React.ReactNode;
@@ -26,6 +28,11 @@ export const LayoutMain = (props: LayoutMainProps) => {
       };
     }),
   );
+  const aiStore = useAiStore(
+    useShallow((state) => {
+      return { open: state.open };
+    }),
+  );
   useEffect(() => {
     menuStore.getMe();
   }, []);
@@ -71,12 +78,22 @@ export const LayoutMain = (props: LayoutMainProps) => {
         style={{
           height: 'calc(100vh - 3rem)',
         }}>
-        <div className='flex-grow overflow-hidden'>
-          <div className='w-full h-full rounded-lg'>
-            <Outlet />
-          </div>
-        </div>
-        <AiMoudle />
+        <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'>
+                <Outlet />
+              </div>
+            </div>
+          </Panel>
+
+          <PanelResizeHandle />
+          <Panel style={{ height: '100%' }} defaultSize={25} className={clsx(!aiStore.open && 'hidden')}>
+            <div className='w-full h-full'>
+              <AiMoudle />
+            </div>
+          </Panel>
+        </PanelGroup>
       </div>
       <LayoutUser />
     </div>