feat: 新窗口打开邮件详情

src/config.js

@@ -42,4 +42,4 @@ const __BUILD_DATE__ = `__BUILD_DATE__`;
 export const BUILD_VERSION = process.env.NODE_ENV === 'production' ? __BUILD_VERSION__ : process.env.NODE_ENV;
 export const BUILD_DATE = process.env.NODE_ENV === 'production' ? __BUILD_DATE__ : new Date().toLocaleString();
 
-export const POPUP_FEATURES = 'left=20,top=20,width=1000,height=800';
+export const POPUP_FEATURES = 'left=20,top=20,width=1000,height=800,toolbar=no,menubar=no,scrollbars=yes,resizable=yes,location=no,status=no';

src/main.jsx

@@ -31,7 +31,8 @@ import useAuthStore from '@/stores/AuthStore'
 import '@/assets/index.css'
 
 import CustomerRelation from '@/views/customer_relation/index'
-import NewEmail from './views/NewEmail'
+import NewEmail from '@/views/NewEmail'
+import EmailDetailWindow from '@/views/EmailDetailWindow'
 
 import { executeDailyCleanupTask, setupDailyMidnightCleanupScheduler } from '@/utils/indexedDB'
 
@@ -89,6 +90,7 @@ const router = createBrowserRouter([
               { path: 'customer_relation/index', element: <CustomerRelation /> },
             ],
           },
+          { path: 'email/view/:mailid', element: <EmailDetailWindow />},
           { path: 'email/:action/:quoteid/:oid/:templateKey', element: <NewEmail />},
           { path: 'email/:action/:quoteid/:oid', element: <NewEmail />},
           { path: 'email/:action/:quoteid', element: <NewEmail />},

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'react'
 import { App, Button, Divider, Avatar, List, Flex, Typography, Tooltip, Empty } from 'antd'
-import { LoadingOutlined, ApiOutlined, FilePdfOutlined, FileOutlined, FileWordOutlined, FileExcelOutlined, FileJpgOutlined, FileImageOutlined, FileTextOutlined, FileGifOutlined, GlobalOutlined, FileZipOutlined, DeleteOutlined } from '@ant-design/icons'
+import { LoadingOutlined, ApiOutlined, FilePdfOutlined, FileOutlined, FileWordOutlined, FileExcelOutlined, FileJpgOutlined, FileImageOutlined, FileTextOutlined, FileGifOutlined, GlobalOutlined, FileZipOutlined, DeleteOutlined, ExpandOutlined } from '@ant-design/icons'
 import { EditIcon, MailCheckIcon, ReplyAllIcon, ReplyIcon, ResendIcon, ShareForwardIcon, SendPlaneFillIcon, InboxIcon } from '@/components/Icons'
 import { isEmpty, TagColorStyle } from '@/utils/commons'
 import EmailEditorPopup from '../Input/EmailEditorPopup'
@@ -87,6 +87,10 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, s
     return () => {}
   }, [mailData.info?.MAI_COLI_SN])
 
+  const handleView = async () => {
+    openPopup(`/email/view/${mailID || 0}`, `view-${mailID || 0}`)
+  };
+
   const handleResend = async () => {
     if (isEmpty(mai_sn)) {
       return false
@@ -192,6 +196,18 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, s
         break
     }
 
+    const showFullBtn = variant !== 'full'
+    if (showFullBtn) {
+      btns.push(
+        <>
+        <Divider key='divider1' type='vertical' className='mx-0' />
+        <Button key={'view'} onClick={() => handleView()} size='small' type='text' icon={<ExpandOutlined className='text-indigo-500' />}>
+          最大化
+        </Button>
+        </>
+      )
+    }
+
     return <div className={`flex justify-end items-center gap-1  ${className || ''}`}>{btns}</div>
   }
 
@@ -199,6 +215,10 @@ const EmailDetailInline = ({ mailID, emailMsg = {}, disabled = false, variant, s
     switch (variant) {
       case 'outline':
         return 'border-y-0 border-x border-solid border-neutral-200'
+      case 'full':
+        return 'h-[calc(100vh-16px)]'
+      default:
+        return ''
     }
   }
 

src/views/EmailDetailWindow.jsx

@@ -0,0 +1,28 @@
+import { useParams } from 'react-router-dom';
+import { App, ConfigProvider } from 'antd'
+import useStyleStore from '@/stores/StyleStore'
+import EmailDetailInline from './Conversations/Online/Components/EmailDetailInline';
+
+
+/**
+ * 独立窗口查看邮件
+ *
+ * - 从销售平台进入: 自动复制 storage, 可读取loginUser
+ *
+ * ! 无状态管理
+ */
+const EmailDetailWindow = () => {
+  const pageParam = useParams();
+  // console.log(pageParam)
+
+  // const [mobile] = useStyleStore((state) => [state.mobile])
+
+  return (
+    <>
+      <ConfigProvider theme={{ token: { colorPrimary: '#6366f1' } }}>
+        <EmailDetailInline mailID={pageParam.mailid} variant={'full'} />
+      </ConfigProvider>
+    </>
+  )
+}
+export default EmailDetailWindow

src/views/orders/Follow.jsx

@@ -154,7 +154,7 @@ function Follow() {
         </Layout.Sider>
         <Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
           <Splitter>
-            <Splitter.Panel defaultSize='40%' min={580} max='70%'>
+            <Splitter.Panel defaultSize='40%' min={380} max='70%'>
               <Mailbox breadcrumb={computedBreadcrumb} mailboxDir={mailboxActiveNode} onMailItemClick={(item) => onClickEmailItem(item)} currentActiveMailItem={activeEmailId} />
             </Splitter.Panel>
             <Splitter.Panel>