feat: 邮件阅读

src/assets/icons/archive-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M3 10H21V20.0044C21 20.5543 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5552 3 20.0044V10ZM9 12V14H15V12H9ZM2 3.99981C2 3.44763 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.44372 22 3.99981V8H2V3.99981Z"></path></svg>

src/assets/icons/archive-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M3 10H2V4.00293C2 3.44903 2.45531 3 2.9918 3H21.0082C21.556 3 22 3.43788 22 4.00293V10H21V20.0015C21 20.553 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5525 3 20.0015V10ZM19 10H5V19H19V10ZM4 5V8H20V5H4ZM9 12H15V14H9V12Z"></path></svg>

src/assets/icons/attachment-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M20.997 2.9918L20.9998 21.0082C20.9998 21.5447 20.5552 22 20.0066 22H3.9934C3.44495 22 3 21.556 3 21.0082V2.9918C3 2.45531 3.44468 2 3.99322 2H20.0036C20.5519 2 20.9969 2.44405 20.997 2.9918ZM9 13V9C9 8.44772 9.44772 8 10 8C10.5523 8 11 8.44772 11 9V13C11 13.5523 11.4477 14 12 14C12.5523 14 13 13.5523 13 13V9C13 7.34315 11.6569 6 10 6C8.34315 6 7 7.34315 7 9V13C7 15.7614 9.23858 18 12 18C14.7614 18 17 15.7614 17 13V8H15V13C15 14.6569 13.6569 16 12 16C10.3431 16 9 14.6569 9 13Z"></path></svg>

src/assets/icons/attachment-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M14 13.5V8C14 5.79086 12.2091 4 10 4C7.79086 4 6 5.79086 6 8V13.5C6 17.0899 8.91015 20 12.5 20C16.0899 20 19 17.0899 19 13.5V4H21V13.5C21 18.1944 17.1944 22 12.5 22C7.80558 22 4 18.1944 4 13.5V8C4 4.68629 6.68629 2 10 2C13.3137 2 16 4.68629 16 8V13.5C16 15.433 14.433 17 12.5 17C10.567 17 9 15.433 9 13.5V8H11V13.5C11 14.3284 11.6716 15 12.5 15C13.3284 15 14 14.3284 14 13.5Z"></path></svg>

src/assets/icons/flag-2-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M2 3H21.1384C21.4146 3 21.6385 3.22386 21.6385 3.5C21.6385 3.58701 21.6157 3.67252 21.5725 3.74807L18 10L21.5725 16.2519C21.7095 16.4917 21.6262 16.7971 21.3865 16.9341C21.3109 16.9773 21.2254 17 21.1384 17H4V22H2V3Z"></path></svg>

src/assets/icons/flag-2-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M21.1384 3C21.4146 3 21.6385 3.22386 21.6385 3.5C21.6385 3.58701 21.6157 3.67252 21.5725 3.74807L18 10L21.5725 16.2519C21.7095 16.4917 21.6262 16.7971 21.3865 16.9341C21.3109 16.9773 21.2254 17 21.1384 17H4V22H2V3H21.1384ZM18.5536 5H4V15H18.5536L15.6965 10L18.5536 5Z"></path></svg>

src/assets/icons/mail-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M3 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3ZM20 7.23792L12.0718 14.338L4 7.21594V19H20V7.23792ZM4.51146 5L12.0619 11.662L19.501 5H4.51146Z"></path></svg>

src/assets/icons/mail-open-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M2.24283 6.85435L11.4895 1.3086C11.8062 1.11865 12.2019 1.11872 12.5185 1.30878L21.7573 6.85433C21.9079 6.9447 22 7.10743 22 7.28303V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V7.28315C2 7.10748 2.09218 6.94471 2.24283 6.85435ZM4 8.13261V19H20V8.13214L12.0037 3.33237L4 8.13261ZM12.0597 13.6983L17.3556 9.23532L18.6444 10.7647L12.074 16.3017L5.36401 10.7717L6.63599 9.2283L12.0597 13.6983Z"></path></svg>

src/assets/icons/price-tag-3-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM13.7327 10.5855C14.5137 11.3666 15.78 11.3666 16.5611 10.5855C17.3421 9.80448 17.3421 8.53815 16.5611 7.7571C15.78 6.97606 14.5137 6.97606 13.7327 7.7571C12.9516 8.53815 12.9516 9.80448 13.7327 10.5855Z"></path></svg>

src/assets/icons/price-tag-3-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M10.9042 2.10025L20.8037 3.51446L22.2179 13.414L13.0255 22.6063C12.635 22.9969 12.0019 22.9969 11.6113 22.6063L1.71184 12.7069C1.32131 12.3163 1.32131 11.6832 1.71184 11.2926L10.9042 2.10025ZM11.6113 4.22157L3.83316 11.9997L12.3184 20.485L20.0966 12.7069L19.036 5.28223L11.6113 4.22157ZM13.7327 10.5855C12.9516 9.80448 12.9516 8.53815 13.7327 7.7571C14.5137 6.97606 15.78 6.97606 16.5611 7.7571C17.3421 8.53815 17.3421 9.80448 16.5611 10.5855C15.78 11.3666 14.5137 11.3666 13.7327 10.5855Z"></path></svg>

src/assets/icons/reply-all-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M14 4.5V9C19.5228 9 24 13.4772 24 19C24 19.2727 23.9891 19.5428 23.9677 19.81C22.5055 17.0364 19.6381 15.119 16.313 15.0053L16 15H13.9999L14 19.5L6 12L14 4.5ZM8 4.5V7.237L2.92 12L7.999 16.761L8 19.5L0 12L8 4.5Z"></path></svg>

src/assets/icons/reply-all-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M14 4.5V9C19.5228 9 24 13.4772 24 19C24 19.2727 23.9891 19.5428 23.9677 19.81C22.5055 17.0364 19.6381 15.119 16.313 15.0053L16 15H13.9999L14 19.5L6 12L14 4.5ZM8 4.5V7.237L2.92 12L7.999 16.761L8 19.5L0 12L8 4.5ZM12 9.11646L8.92423 12L11.9999 14.8834L11.9999 13L16.0341 13.0003L16.3814 13.0065C17.6657 13.0504 18.9053 13.3165 20.0568 13.7734C18.5898 12.0749 16.4204 11 14 11H12V9.11646Z"></path></svg>

src/assets/icons/reply-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2729 20.9891 19.5433 20.9676 19.8107C19.4605 16.9502 16.458 15 13 15H11V20Z"></path></svg>

src/assets/icons/reply-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M11 20L1 12L11 4V9C16.5228 9 21 13.4772 21 19C21 19.2727 20.9891 19.5428 20.9677 19.81C19.5055 17.0364 16.6381 15.119 13.313 15.0053L13 15H10.9999L11 20ZM8.99986 13H10.9999L13.0341 13.0003L13.3814 13.0065C14.6657 13.0504 15.9053 13.3165 17.0568 13.7734C15.5898 12.0749 13.4204 11 11 11H9V8.16125L4.20156 12L8.99992 15.8387L8.99986 13Z"></path></svg>

src/assets/icons/share-forward-fill.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V3L23 11L13 19V14Z"></path></svg>

src/assets/icons/share-forward-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M13 14H11C7.54202 14 4.53953 15.9502 3.03239 18.8107C3.01093 18.5433 3 18.2729 3 18C3 12.4772 7.47715 8 13 8V2.5L23.5 11L13 19.5V14ZM11 12H15V15.3078L20.3214 11L15 6.69224V10H13C10.5795 10 8.41011 11.0749 6.94312 12.7735C8.20873 12.2714 9.58041 12 11 12Z"></path></svg>

src/components/Icons.jsx

@@ -1,4 +1,19 @@
 import Icon from '@ant-design/icons';
+
+import ReplyLineSVG from '@/assets/icons/reply-line.svg?react';
+import ReplyAllLineSVG from '@/assets/icons/reply-all-line.svg?react';
+import AttachmentLineSVG from '@/assets/icons/attachment-line.svg?react';
+import AttachmentFillSVG from '@/assets/icons/attachment-fill.svg?react';
+// import ShareForwardFillSVG from '@/assets/icons/share-forward-fill.svg?react';
+import ShareForwardLineSVG from '@/assets/icons/share-forward-line.svg?react';
+
+
+export const ReplyIcon = (props) => <Icon component={ReplyLineSVG} {...props} />;
+export const ReplyAllIcon = (props) => <Icon component={ReplyAllLineSVG} {...props} />;
+export const AttachmentIcon = (props) => <Icon component={AttachmentLineSVG} {...props} />;
+export const AttachmentFillIcon = (props) => <Icon component={AttachmentFillSVG} {...props} />;
+export const ShareForwardIcon = (props) => <Icon component={ShareForwardLineSVG} {...props} />;
+
 const WABSvg = () => (
   <svg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' width='16' height='16'>
     <path

src/components/LexicalEditor/styles.css

@@ -16,6 +16,13 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
+.email-container{
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, ".SFNSText-Regular",
+        sans-serif;
+    font-weight: 500;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
 .other h2 {
   font-size: 18px;
   color: #444;

src/utils/commons.js

@@ -395,8 +395,9 @@ export const cartesianProductArray = (arr, sep = '_', index = 0, prefix = '') =>
   return result;
 };
 
-export const stringToColour = (str, withFlag = true) => {
+export const stringToColour = (str='', withFlag = true) => {
   var hash = 0
+  if (str.length === 0) return hash;
   for (let i = 0; i < str.length; i++) {
     hash = str.charCodeAt(i) + ((hash << 5) - hash)
   }

src/views/Conversations/Online/Components/BubbleEmail.jsx

@@ -4,7 +4,7 @@ import { MailFilled, MailOutlined, WhatsAppOutlined } from '@ant-design/icons';
 import { MessageBox } from 'react-chat-elements';
 import { groupBy, isEmpty, } from '@/utils/commons';
 
-const ChatboxEmail = ({ onOpenEditor, ...message  }) => {
+const ChatboxEmail = ({ onOpenEditor, onOpenEmail, ...message  }) => {
 
   const RenderText = memo(function renderText({ className, email, sender }) {
     return (
@@ -19,8 +19,9 @@ const ChatboxEmail = ({ onOpenEditor, ...message  }) => {
   });
   const handlePreview = (message) => {
     console.log('handlePreview');
-
+    if (typeof onOpenEmail === 'function') {
-    alert('on click: open email')
+      onOpenEmail(message);
+    }
   }
   return (
     <MessageBox

src/views/Conversations/Online/Components/emailRe.json

@@ -24,7 +24,7 @@
     "cc": "lioyjun@gmail.com",
     "bcc": "",
     "subject": "反馈表低分提醒",
-    "body": "阿坝州九寨岷江国际旅行社有限责任公司,中华游240903-Leeky240602070，反馈表有低分项：Grand Hyatt Chengdu,: 3;；更多详情请到助手平台查看。",
+    "body": "<p class=\"editor-paragraph\" dir=\"ltr\"><span style=\"white-space: pre-wrap;\">We are offering US$50 voucher per person for our guests to join our Highlights Travel Family loyalty group on Facebook:&nbsp;</span><a href=\"https://www.facebook.com/groups/ghloyaltyclub\" class=\"editor-link\"><u><span class=\"editor-text-underline\" style=\"white-space: pre-wrap;\">https://www.facebook.com/groups/ghloyaltyclub</span></u></a><span style=\"white-space: pre-wrap;\">&nbsp;.&nbsp;&nbsp;If you two joined the group, you can save USD$ 100. &nbsp;The discount will be cut from the balance later.</span></p>",
     "abstract": "阿坝州九寨岷江国际旅行社有限责任公司……",
     "replyToEmail": "ycc@hainatravel.com",
     "replyToName": "YCC",

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

@@ -0,0 +1,125 @@
+import { createContext, useEffect, useState } from 'react';
+import { Button, Divider, Avatar } from 'antd';
+import { DeleteOutlined } from '@ant-design/icons';
+import Modal from '@dckj/react-better-modal';
+import { Avatar as Avatar1 } from 'react-chat-elements';
+import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
+import { isEmpty, olog, stringToColour } from '@/utils/commons';
+
+const TagColorStyle = (tag) => {
+  const color = stringToColour(tag);
+  return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
+};
+const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
+  let { emailOrigin } = emailDetail;
+  emailOrigin = emailOrigin || {};
+  // const [open, setOpen] = useState(false);
+  function onHandleMove(e) {
+    console.log(e, '--->>> onHandleMove');
+  }
+  function onHandleResize(e) {
+    console.log(e, '--->>> onHandleResize');
+  }
+
+  function onHandleOk() {
+    console.log('onOk callback');
+  }
+
+  function onHandleCancel() {
+    console.log('onCancel callback');
+    setOpen(false);
+  }
+  function onStageChange({ state }) {
+    console.log(state);
+  }
+  return (
+    <>
+      <Modal
+        visible={open}
+        keyboard={false}
+        draggable
+        resizable
+        mask={false}
+        maskClosable={false}
+        // theme='dark'
+        // className={'!border !border-solid !border-indigo-500 rounded !p-2' }
+        className='rounded-t rounded-b-none border border-solid border-indigo-300 shadow-heavy '
+        titleBarClassName='bg-neutral-100 rounded rounded-b-none border-none p-3 font-bold text-slate-600'
+        contentClassName='p-2'
+        footerClassName='p-2'
+        zIndex={2}
+        initialWidth={680}
+        initialHeight={600}
+        initialTop={74}
+        initialLeft={window.innerWidth - 700}
+        // title={`${reference ? '回复: ' : '写邮件: '} ${fromEmail || ''}`}
+        title={emailOrigin.subject}
+        minimizeButton={<></>}
+        onMove={onHandleMove}
+        onResize={onHandleResize}
+        onCancel={onHandleCancel}
+        // onOk={onHandleOk}
+        onStageChange={onStageChange}
+        footer={null}>
+        {/* email toolbar */}
+        <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
+          {/* <div className='flex items-center justify-start '>
+            <Button size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
+              回复
+            </Button>
+          </div> */}
+          {/* <div className=' font-bold'>{emailOrigin.subject}</div> */}
+          <div>
+            <div className='flex justify-between'>
+              <div className='flex gap-2 mb-2 items-center'>
+                <Avatar className='' style={TagColorStyle(emailOrigin.fromEmail)}>
+                  {(emailOrigin.fromName || '').substring(0, 1)}
+                </Avatar>
+                <span className=' font-bold text-base'>{emailOrigin.fromName}</span>
+                <span className='text-neutral-600'>&lt;{emailOrigin.fromEmail}&gt;</span>
+              </div>
+              <div className='flex flex-col justify-start gap-1 items-end'>
+                <div className='flex items-center  '>
+                  <Button size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}>
+                    回复
+                  </Button>
+                  <Button size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}>
+                    转发
+                  </Button>
+                </div>
+                {/* <div>{emailDetail.dateText}</div> */}
+                <div className='text-xs '>{emailDetail.localDate}</div>
+              </div>
+            </div>
+            <div className='text-sm'>
+              <span className='text-neutral-500 pr-2'>收件人:</span>
+              {emailOrigin.toName}
+              <span className='text-neutral-600'>&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;</span>
+            </div>
+            {emailOrigin.cc && (
+              <div className='text-sm'>
+                <span className='text-neutral-500 pr-2'>抄送:</span>
+                {emailOrigin.cc}
+              </div>
+            )}
+            {emailOrigin.bcc && (
+              <div className='text-sm'>
+                <span className='text-neutral-500 pr-2'>密送:</span>
+                {emailOrigin.bcc}
+              </div>
+            )}
+            {/* <div className='text-sm'>
+              <span className='text-neutral-500 pr-2'>主题:</span>
+              {emailOrigin.subject}
+            </div> */}
+            <Divider className='my-2' />
+            {/* <div className='mt-2'>{emailOrigin.body}</div> */}
+            <div className='mt-2' dangerouslySetInnerHTML={{ __html: emailOrigin.body }}></div>
+            {/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
+          </div>
+        </div>
+      </Modal>
+    </>
+  );
+};
+export default EmailDetail;

src/views/Conversations/Online/MessagesList.jsx

@@ -46,7 +46,7 @@ const MessagesList = ({ messages, handlePreview, reference, longListLoading, get
     <div ref={ref}>
       {props.whatsapp_msg_type
         && <BubbleIM {...props} {...{ scrollToMessage, focusMsg, handleContactClick, setNewChatModalVisible, setNewChatFormValues, handlePreview }} />}
-      {props.type === 'email' && <BubbleEmail {...props} onOpenEditor={listProps.onOpenEditor} />}
+      {props.type === 'email' && <BubbleEmail {...props} onOpenEditor={listProps.onOpenEditor} onOpenEmail={listProps.onOpenEmail} />}
     </div>
   ));
 

src/views/Conversations/Online/MessagesWrapper.jsx

@@ -11,6 +11,7 @@ import emailItem from './Components/emailSent.json';
 import emailReItem from './Components/emailRe.json';
 import EmailEditor from './Input/EmailEditor';
 import EmailEditorPopup from './Input/EmailEditorPopup';
+import EmailDetail from './Input/EmailDetail';
 
 const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
   const userId = useAuthStore((state) => state.loginUser.userId);
@@ -133,6 +134,14 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
     setOpenEmailEditor(true);
     setFromEmail(email_addr);
   };
+
+  const [openEmailDetail, setOpenEmailDetail] = useState(false);
+  const [emailDetail, setEmailDetail] = useState({});
+  const onOpenEmail = (email_detail) => {
+    setOpenEmailDetail(true);
+    setEmailDetail(email_detail);
+  }
+
   return (
     <>
       <MessagesList
@@ -151,6 +160,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
           loadNextPage: currentConversation?.loadNextPage ?? true,
           onOpenEditor,
           setRefernce: setReferEmailMsg,
+          onOpenEmail,
         }}
       />
       <Image
@@ -182,6 +192,7 @@ const MessagesWrapper = ({ updateRead = true, forceGetMessages }) => {
       />
       {/* <EmailEditor open={openEmailEditor} setOpen={setOpenEmailEditor} reference={ReferEmailMsg} setRefernce={setReferEmailMsg} {...{ fromEmail, }} key={'email-editor-reply'} /> */}
       <EmailEditorPopup open={openEmailEditor} setOpen={setOpenEmailEditor} fromEmail={fromEmail} key={'email-editor-reply-popup'}/>
+      <EmailDetail open={openEmailDetail} setOpen={setOpenEmailDetail} emailDetail={emailDetail} />
       </>
   );
 };

tailwind.config.js

@@ -30,6 +30,7 @@ export default {
       //   'responsive':repeat(autofill,minmax('300px',1fr))
       // }
       boxShadow: {
+        '1md': '0 0 4px 2px rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
         'heavy': '0 1px 7px 1px rgba(0, 0, 0, 0.3)',
         '3xl': '0 35px 60px -15px rgba(0, 0, 0, 0.3)',
       }

vite.config.js

@@ -146,7 +146,7 @@ export default defineConfig({
     __BUILD_DATE__: JSON.stringify(`${today}`),
     __BUILD_VERSION__: JSON.stringify(`${packageJson.version}`),
   },
-  plugins: [react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn), svgr()],
+  plugins: [ svgr(), react(), WindiCSS(), buildDatePlugin(), VitePWA(manifestForPWAPlugIn), ],
   server: {
     host: '0.0.0.0',
   },