feat: 移动端: 切换渠道

src/views/Conversations/Online/Input/EmailChannelTab.jsx

@@ -1,32 +1,55 @@
 import { useState } from 'react';
-import { Button, Flex } from 'antd';
-import 'react-quill/dist/quill.snow.css';
+import { Button, ConfigProvider, Dropdown, Flex } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
 import EmailEditorPopup from './EmailEditorPopup';
+import useStyleStore from '@/stores/StyleStore';
 
 const EmailComposer = ({ ...props }) => {
+  const [mobile] = useStyleStore((state) => [state.mobile]);
   const [open, setOpen] = useState(false);
   const [fromEmail, setFromEmail] = useState('');
   const openEditor = (email_addr, i) => {
     setOpen(true);
     setFromEmail(email_addr);
   };
+  const [pickEmail, setPickEmail] = useState({ label: 'LYT', key: 'lyt@hainatravel.com' });
   return (
-    <Flex gap={8} className='p-2 bg-gray-200 justify-end items-center rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0'>
+    <Flex gap={8} className='p-2 bg-gray-200 rounded rounded-b-none border-gray-300 border-solid border border-b-0 border-x-0' align={'center'} justify={'flex-end'}>
       <span>新邮件:</span>
-      {[
+      <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
+        <Dropdown.Button
+          menu={{
+            selectable: true,
+            items: [
+              { email: 'lyt@hainatravel.com', label: 'LYT <lyt@hainatravel.com>', key: 'lyt@hainatravel.com' },
+              { email: 'lot@hainatravel.com', label: 'LOT <lot@hainatravel.com>', key: 'lot@hainatravel.com' },
+            ],
+            onClick: ({ key }) => {
+              // todo: 读取邮箱列表
+              console.log(key);
+              setPickEmail({ label: key, key });
+            },
+          }}
+          onClick={() => openEditor(pickEmail.key)}
+          type='primary' className='w-auto'
+          icon={<DownOutlined />}>
+          {pickEmail.label}&nbsp;&lt;{pickEmail.key}&gt;
+        </Dropdown.Button>
+      </ConfigProvider>
+      {/* {[
         { email: 'lyt@hainatravel.com', name: 'LYT' },
         { email: 'lot@hainatravel.com', name: 'LOT' },
       ].map(({ email, name }, i) => (
         <Button
           key={email}
-          type='primary'
+          type='primary' size='small'
           className='bg-indigo-500 shadow shadow-indigo-300 hover:!bg-indigo-400 active:bg-indigo-400 focus:bg-indigo-400'
           onClick={() => openEditor(email, i)}>
           {name}&nbsp;&lt;{email}&gt;
         </Button>
-      ))}
+      ))} */}
       {/* <EmailEditor {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor'} /> */}
-      <EmailEditorPopup {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor-popup'}/>
+      <EmailEditorPopup {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor-popup'} />
       {/* <EmailEditorPopup2 {...{ open, setOpen }} fromEmail={fromEmail} key={'email-editor-popup2'} /> */}
     </Flex>
   );

src/views/Conversations/Online/ReplyWrapper.jsx

@@ -6,6 +6,7 @@ import EmailComposer from './Input/EmailChannelTab';
 import { WABIcon } from '@/components/Icons';
 import useConversationStore from '@/stores/ConversationStore';
 import { useShallow } from 'zustand/react/shallow';
+import useStyleStore from '@/stores/StyleStore';
 
 const DEFAULT_CHANNEL = 'waba';
 const Wabas = [
@@ -29,7 +30,7 @@ const WABASwitcher = ({ onSelect, }) => {
         },
       }}>
       <Space>
-        <WABIcon />
+        {/* <WABIcon /> */}
         {pickV.label || 'WABA'}
         <DownOutlined />
       </Space>
@@ -38,6 +39,7 @@ const WABASwitcher = ({ onSelect, }) => {
 };
 
 const ReplyWrapper = () => {
+  const [mobile] = useStyleStore(state => [state.mobile]);
   const [activeChannel, setActiveChannel] = useState(DEFAULT_CHANNEL);
   const onChannelTabsChange = (activeKey) => {
     setActiveChannel(activeKey);
@@ -49,15 +51,16 @@ const ReplyWrapper = () => {
   useEffect(() => {
     const len = activeMessages.length;
     const thisLastChannel = activeMessages.length > 0 ? activeMessages[len - 1]?.type : DEFAULT_CHANNEL;
-    setActiveChannel(thisLastChannel);
+    const channel = thisLastChannel === 'email' ? 'email' : DEFAULT_CHANNEL;
+    setActiveChannel(channel);
     return () => {};
   }, [activeMessages]);
 
   const replyTypes = [
-    { key: 'waba0', label: (<WABASwitcher />), children: <InputComposer isWABA channel={'waba'} /> },
+    { key: 'waba', label: mobile ? '' : (<WABASwitcher />), icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
     // { key: 'waba', label: 'WABA-Global Highlights', icon: <WABIcon />, children: <InputComposer isWABA channel={'waba'} /> },
-    { key: 'email', label: 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
-    { key: 'whatsapp', label: 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
+    { key: 'email', label: mobile ? '' : 'Email', icon: <MailOutlined className='text-indigo-500' />, children: <EmailComposer /> },
+    // { key: 'whatsapp', label: mobile ? '' : 'WhatsApp', icon: <WhatsAppOutlined className='text-whatsapp' />, children: <InputComposer channel={'whatsapp'} /> },
   ];
 
   return (

src/views/mobile/Chat.jsx

@@ -4,6 +4,7 @@ import MessagesWrapper from '@/views/Conversations/Online/MessagesWrapper';
 import InputComposer from '@/views/Conversations/Online/Input/InputComposer';
 import { UnorderedListOutlined, MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons';
 import { useNavigate } from 'react-router-dom';
+import ReplyWrapper from '../Conversations/Online/ReplyWrapper';
 
 const { Content, Header, Footer } = Layout;
 
@@ -21,7 +22,7 @@ function Chat() {
           <MessagesWrapper />
         </Content>
         <Footer className='ant-layout-sider-light p-0'>
-          <InputComposer />
+          <ReplyWrapper />
         </Footer>
       </Layout>
     </>