perf(前端): 邮件正文

src/channel/bubbleMsgUtils.js

@@ -541,6 +541,7 @@ export const receivedMsgTypeMapped = {
     getMsg: (result) => result,
     contentToRender: () => null,
     contentToUpdate: (msgcontent) => {
+      if (isEmpty(msgcontent)) return null;
       let apiErrorCode,
         apiErrorMsg = '';
       const waCode = msgcontent.error.message.match(/\(#(\d+)\)/);

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

@@ -115,7 +115,6 @@ const EmailContent = ({ id, content: MailContent, ...props }) => {
             border: 'none',
             display: 'block',
           }}
-          title='Dynamic Height Iframe'
           sandbox='allow-scripts allow-same-origin'
         />
       </div>

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

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
 import { App, Button, Divider, Avatar } from 'antd'
-import { LoadingOutlined, ApiOutlined } from '@ant-design/icons';
+import { LoadingOutlined, ApiOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
 import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
 import { isEmpty, TagColorStyle } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
@@ -14,7 +14,7 @@ import EmailContent from './EmailContent';
 /**
  * @property {*} emailMsg - 邮件数据. { conversationid, actionId, order_opi, coli_sn, msgOrigin: { from, to, id, email: { subject, mai_sn, } } }
  */
-const EmailDetailInline = ({ mailID, open, setOpen = () => {}, emailMsg={}, disabled=false, ...props }) => {
+const EmailDetailInline = ({ mailID, emailMsg={}, disabled=false, ...props }) => {
 
   // console.log('emailDetail', emailMsg);
 
@@ -117,7 +117,7 @@ const EmailDetailInline = ({ mailID, open, setOpen = () => {}, emailMsg={}, disa
     }
 
     return (
-      <div className={`flex justify-end items-center w-full ${className || ''}`}>
+      <div className={`flex justify-end items-center gap-1 w-full ${className || ''}`}>
         {btns}
       </div>
     )
@@ -130,7 +130,7 @@ const EmailDetailInline = ({ mailID, open, setOpen = () => {}, emailMsg={}, disa
 
           <div>
             <div className={['flex flex-wrap justify-end', window.innerWidth < 600 ? 'flex-col' : 'flex-row '].join(' ')}>
-              <div className=' grow shrink basis-0 flex flex-wrap gap-2 mb-2 items-center'>
+              <div className=' flex-auto basis-0 flex flex-wrap gap-2 mb-2 items-center'>
                 <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From, true)}>
                   {(mailData.info?.MAI_From || '').substring(0, 1)}
                 </Avatar>
@@ -139,7 +139,7 @@ const EmailDetailInline = ({ mailID, open, setOpen = () => {}, emailMsg={}, disa
                   <span className='text-neutral-500 text-wrap break-words break-all '>{mailData.info?.MAI_From}</span>
                 </div>
               </div>
-              <div className=' shrink-0 flex flex-col justify-start gap-1 items-end'>
+              <div className=' ml-auto flex flex-col justify-start gap-1 items-end'>
                 <ActionBtns />
                 <div className='text-xs '>{mailData.info?.MAI_SendDate || emailMsg.localDate}</div>
               </div>

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

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space } from 'antd';
+import { App, Button, Popover, Tabs, List, Image, Avatar, Card, Flex, Space,Typography } from 'antd';
 import { FileSearchOutlined, LoadingOutlined } from '@ant-design/icons';
 import { RotateLeftOutlined, RotateRightOutlined, ZoomInOutlined, ZoomOutOutlined } from '@ant-design/icons'
 import { InboxIcon, SendPlaneFillIcon } from '@/components/Icons';
@@ -13,6 +13,7 @@ import useStyleStore from '@/stores/StyleStore';
 import useAuthStore from '@/stores/AuthStore';
 import { sentMsgTypeMapped } from '@/channel/bubbleMsgUtils';
 import { v4 as uuid } from 'uuid';
+import dayjs from 'dayjs'
 
 const BIG_PAGE_SIZE = MESSAGE_PAGE_SIZE * 10;
 
@@ -337,28 +338,25 @@ const MessageListFilter = ({ ...props }) => {
           renderItem={({ msgtext, ...item }) => (
             <List.Item
               // actions={[item.localDate]}
-              className='cursor-pointer'
+              className='cursor-pointer !py-1'
               onClick={() => {
                 onOpenEmail({ msgtext, ...item });
-                setOpenPopup(false);
+                // setOpenPopup(false);
               }}>
-              <List.Item.Meta
-                avatar={
-                  item.sender === 'me' ? <SendPlaneFillIcon className='text-primary' /> : <InboxIcon className='text-indigo-500' />
-                  // <Avatar size='small' style={CalColorStyle(item.senderName)}>
-                  //    {item.senderName.substring(0, 3)}
-                  //  </Avatar>
-                }
-                title={msgtext?.email?.subject}
-                // description={`To: ${msgtext.to}`}
-                description={
-                  <Flex justify={'space-between'} className='max-w-full overflow-hidden'>
-                    <div className='flex-auto line-clamp-1 break-all pr-2'>{`To: ${msgtext.to}`}</div>
-                    <div className=' basis-32 flex-grow-0 flex-shrink-0'>{item.localDate}</div>
-                  </Flex>
-                }
-              />
-              {msgtext?.email?.abstract}
+              <Flex vertical={false} wrap={false} className='w-full'>
+                <div className='flex-auto ml-auto min-w-40 line-clamp-2'>
+                  {item.sender !== 'me' ? <InboxIcon className='text-indigo-500' /> : <SendPlaneFillIcon className='text-primary' />}
+                  {/* <Tooltip title={emailItem.MAI_Subject}> */}
+                  <Typography.Text>{msgtext?.email?.subject}</Typography.Text>
+                  {/* </Tooltip> */}
+                </div>
+                <div className='ml-1 max-w-40'>
+                  <Typography.Text ellipsis={{ tooltip: msgtext.to }}>{msgtext.to.replaceAll('"', '')}</Typography.Text>
+                </div>
+                <div className='ml-1 max-w-20'>
+                  <Typography.Text ellipsis={{ tooltip: item.localDate }}>{dayjs(item.localDate).format('MM-DD HH:mm')}</Typography.Text>
+                </div>
+              </Flex>
             </List.Item>
           )}
         />
@@ -369,7 +367,7 @@ const MessageListFilter = ({ ...props }) => {
 
   return (
     <>
-      <Popover
+      <Popover zIndex={3}
         // destroyTooltipOnHide
         placement='bottom'
         overlayClassName={[mobile === false ? 'w-2/5' : 'w-full max-h-full', 'max-h-[70%]'].join(' ')}

src/views/Conversations/Online/order/CustomerProfile.jsx

@@ -16,8 +16,6 @@ import { useConversationNewItem } from "@/hooks/useConversation";
 import EmailDetail from './../Components/EmailDetail';
 import { postEditConversationItemColiAction } from "@/actions/ConversationActions";
 import useStyleStore from '@/stores/StyleStore';
-import { ExpandIcon } from "@/components/Icons";
-import EmailDetailInline from "../Components/EmailDetailInline";
 import SupplierEmailDrawer from "../Components/SupplierEmailDrawer";
 
 const CustomerProfile = () => {