perf: 邮件详情

src/hooks/useEmail.js

@@ -9,6 +9,7 @@ import { App, Button, Divider, Avatar } from 'antd'
  * * 在详情点击`回复`呼出编辑时
  */
 export const useEmailDetail = (mai_sn, data) => {
+  const {notification} = App.useApp()
   const [loading, setLoading] = useState(false)
   const [mailData, setMailData] = useState({ loading, info: {}, content: '', attachments: [] })
 
@@ -24,6 +25,12 @@ export const useEmailDetail = (mai_sn, data) => {
         setLoading(false)
       } catch (err) {
         setLoading(false)
+        notification.error({
+          message: "请求失败",
+          description: err.message || '网络异常',
+          placement: "top",
+          duration: 3,
+        });
       }
     }
 
@@ -38,5 +45,5 @@ export const useEmailDetail = (mai_sn, data) => {
     await postResendEmailAction({ mai_sn, externalid, actionid, token: 0 })
   }
 
-  return { mailData, postEmailResend }
+  return { loading, mailData, postEmailResend }
 }

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

@@ -1,12 +1,12 @@
-import { useState, useEffect } from 'react'
+import { useState } from 'react'
 import { App, Button, Divider, Avatar } from 'antd'
+import { LoadingOutlined } from '@ant-design/icons';
 import { EditIcon, ReplyIcon, ResendIcon, ShareForwardIcon } from '@/components/Icons'
 import { isEmpty, stringToColour } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
 import DnDModal from '@/components/DndModal'
 import useStyleStore from '@/stores/StyleStore'
 import { useEmailDetail,  } from '@/hooks/useEmail';
-import { postResendEmailAction } from '@/actions/EmailActions';
 
 const TagColorStyle = (tag) => {
   const color = stringToColour(tag)
@@ -52,7 +52,7 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
 
   const [mobile] = useStyleStore((state) => [state.mobile])
 
-  const { mailData, postEmailResend } = useEmailDetail(mailID)
+  const { loading, mailData, postEmailResend } = useEmailDetail(mailID)
 
   const handleResend = async () => {
     if (isEmpty(mai_sn)) {
@@ -125,35 +125,28 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
       <DnDModal
         open={open}
         setOpen={setOpen}
-        title={mailData.info?.subject || emailMsg?.msgOrigin?.email?.subject}
+        title={
+          <>
+            {loading ? <LoadingOutlined className='mr-1' /> : null}
+            {mailData.info?.subject || emailMsg?.msgOrigin?.email?.subject}
+          </>
+        }
         initial={{ top: 74 }}
         onMove={onHandleMove}
         onResize={onHandleResize}
-        footer={mobile ? <ActionBtns className='w-full' /> : null}
-      >
-
+        footer={mobile ? <ActionBtns className='w-full' /> : null}>
         <div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'>
           <div className=' font-bold'>{mailData.info?.subject || emailMsg?.msgOrigin?.subject}</div>
 
           <div>
-            <div
-              className={[
-                'flex justify-between',
-                window.innerWidth < 600 ? 'flex-row' : 'flex-row',
-              ].join(' ')}>
+            <div className={['flex justify-between', window.innerWidth < 600 ? 'flex-row' : 'flex-row'].join(' ')}>
               <div className='flex gap-2 mb-2 items-center'>
-                <Avatar
-                  className=''
-                  style={TagColorStyle(mailData.info?.MAI_From)}>
+                <Avatar className='' style={TagColorStyle(mailData.info?.MAI_From)}>
                   {(mailData.info?.MAI_From || '').substring(0, 1)}
                 </Avatar>
                 <div className=' flex flex-col'>
-                  <span className=' font-bold text-base'>
-                    {mailData.info?.fromName}
-                  </span>
-                  <span className='text-neutral-500'>
-                    {mailData.info?.MAI_From}
-                  </span>
+                  <span className=' font-bold text-base'>{mailData.info?.fromName}</span>
+                  <span className='text-neutral-500'>{mailData.info?.MAI_From}</span>
                 </div>
               </div>
               <div className='flex flex-col justify-start gap-1 items-end'>
@@ -181,14 +174,14 @@ const EmailDetail = ({ open, setOpen, emailMsg, ...props }) => {
               <div className='mt-2 *:ml-2'>
                 <span>共{mailData.attachments.length}个附件</span>
                 {mailData.attachments.map((atta) => (
-                  <a href={atta.url} key={atta.name} target='_blank' rel='noreferrer'>{atta.name}</a>
+                  <a href={atta.url} key={atta.name} target='_blank' rel='noreferrer'>
+                    {atta.name}
+                  </a>
                 ))}
               </div>
             )}
             <Divider className='my-2' />
-            <div
-              className='mt-2'
-              dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
+            <div className='mt-2' dangerouslySetInnerHTML={{ __html: mailData.content }}></div>
           </div>
         </div>
       </DnDModal>