perf: 会话窗口: 左右折叠

src/views/Conversations/ChatWindow.jsx

@@ -1,5 +1,6 @@
-import { useEffect } from 'react';
-import { Layout, Spin } from 'antd';
+import { useEffect, useState } from 'react';
+import { Layout, Spin, Button } from 'antd';
+import { RightCircleOutlined, RightOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons';
 // import { useParams, useNavigate } from 'react-router-dom';
 import MessagesHeader from './Components/MessagesHeader';
 import Messages from './Components/Messages';
@@ -27,31 +28,56 @@ const ChatWindow = () => {
 
     return () => {};
   }, []);
+  const [collapsedLeft, setCollapsedLeft] = useState(false);
+  const [collapsedRight, setCollapsedRight] = useState(false);
 
   return (
     <Spin spinning={false} tip={'正在连接...'}>
-      <Layout className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
-        <Sider width={240} theme={'light'} className='h-full overflow-y-auto' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
+      <Layout hasSider className='h-screen chatwindow-wrapper' style={{ maxHeight: 'calc(100% - 198px)', height: 'calc(100% - 198px)' }}>
+        <Sider
+          width={240}
+          theme={'light'}
+          className='h-full overflow-y-auto'
+          style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
+          collapsible={true}
+          breakpoint='xxl'
+          collapsedWidth={73}
+          collapsed={collapsedLeft}
+          onBreakpoint={(broken) => {
+            console.log('xxxxxxxxxxxxxxxxxxxxxx', broken);
+          }}
+          trigger={null}>
           <ConversationsList />
         </Sider>
 
         <Content style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
           <Layout className='h-full'>
-            <Header className='ant-layout-sider-light ant-card h-auto'>
+            <Header className='ant-layout-sider-light ant-card h-auto flex justify-between items-center'>
+              <Button type='text' icon={collapsedLeft ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />} onClick={() => setCollapsedLeft(!collapsedLeft)} className=' rounded-none rounded-l' />
               <MessagesHeader />
+              <Button type='text' icon={collapsedRight ? <MenuFoldOutlined /> : <MenuUnfoldOutlined />} onClick={() => setCollapsedRight(!collapsedRight)} className=' rounded-none rounded-r' />
             </Header>
-            <Content style={{ maxHeight: '74vh', height: '74vh' }}>
+            <Content className=' flex-grow'>
               <div className='h-full overflow-y-auto'>
                 <Messages />
               </div>
             </Content>
-            <Footer className='ant-layout-sider-light p-1 max-h-32'>
+            <Footer className='ant-layout-sider-light p-1'>
               <InputComposer />
             </Footer>
           </Layout>
         </Content>
 
-        <Sider width={300} theme={'light'} className='h-full overflow-y-auto' style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}>
+        <Sider
+          width={300}
+          theme={'light'}
+          className=' overflow-y-auto'
+          style={{ maxHeight: 'calc(100vh - 198px)', height: 'calc(100vh - 198px)' }}
+          collapsible={true}
+          breakpoint='xxl'
+          collapsedWidth={0}
+          trigger={null}
+          collapsed={collapsedRight}>
           <CustomerProfile />
         </Sider>
       </Layout>

src/views/Conversations/Components/ConversationsList.jsx

@@ -126,7 +126,7 @@ const Conversations = () => {
   return (
     <>
       <ChatList
-        className=''
+        className=' overflow-x-hidden'
         dataSource={chatlist}
         onClick={(item) => onSwitchConversation(item)}
         // onContextMenu={(item, i, e) => {

src/views/Conversations/Components/MessagesHeader.jsx

@@ -11,7 +11,7 @@ const MessagesHeader = () => {
     <>
       {websocketOpened===false && <Alert type='error' message='断开连接' banner />}
       {websocketRetrying && websocketRetrytimes > 0 && <Alert type={'warning'} message={`正在重连, ${websocketRetrytimes}次...`} banner icon={<LoadingOutlined />} />}
-      <Flex gap={16} className='p-1'>
+      <Flex gap={16} className='p-1 flex-auto'>
         {currentConversation.customer_name && <Avatar src={`https://api.dicebear.com/7.x/avataaars/svg?seed=${currentConversation.customer_name}`} />}
         <Flex flex={'1'} justify='space-between'>
           <Flex vertical={true} justify='space-between'>