From 88cc2eb3aed385c2ebd922e0ca453b158b17ba35 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Mon, 14 Oct 2024 09:18:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=A7=BB=E5=8A=A8=E7=AB=AF:=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=B8=A0=E9=81=93?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Online/Input/EmailChannelTab.jsx          | 37 +++++++++++++++----
 .../Conversations/Online/ReplyWrapper.jsx     | 13 ++++---
 src/views/mobile/Chat.jsx                     |  3 +-
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/views/Conversations/Online/Input/EmailChannelTab.jsx b/src/views/Conversations/Online/Input/EmailChannelTab.jsx
index ff330c8..8b65866 100644
--- a/src/views/Conversations/Online/Input/EmailChannelTab.jsx
+++ b/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>
   );
diff --git a/src/views/Conversations/Online/ReplyWrapper.jsx b/src/views/Conversations/Online/ReplyWrapper.jsx
index 3eccb85..4c22189 100644
--- a/src/views/Conversations/Online/ReplyWrapper.jsx
+++ b/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 (
diff --git a/src/views/mobile/Chat.jsx b/src/views/mobile/Chat.jsx
index 8a47945..985cfbf 100644
--- a/src/views/mobile/Chat.jsx
+++ b/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>
     </>