style: 移动端

2.0/email-builder
Lei OT 12 months ago
parent 8d80e794bd
commit 217a8fb884

@ -79,7 +79,7 @@ function LexicalDefaultValuePlugin({ value = "" }= {}) {
if (clear) { if (clear) {
root.clear(); root.clear();
} }
console.log(nodes); // console.log(nodes);
const p = $createParagraphNode(); const p = $createParagraphNode();
const _p = nodes.filter(n => n).forEach((n) => { const _p = nodes.filter(n => n).forEach((n) => {

@ -4,11 +4,13 @@ import { ReplyIcon, ShareForwardIcon } from '@/components/Icons';
import { stringToColour } from '@/utils/commons'; import { stringToColour } from '@/utils/commons';
import EmailEditorPopup from '../Input/EmailEditorPopup'; import EmailEditorPopup from '../Input/EmailEditorPopup';
import DnDModal from '@/components/DndModal'; import DnDModal from '@/components/DndModal';
import useStyleStore from '@/stores/StyleStore';
const TagColorStyle = (tag) => { const TagColorStyle = (tag) => {
const color = stringToColour(tag); const color = stringToColour(tag);
return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` }; return { color: `${color}`, borderColor: `${color}66`, backgroundColor: `${color}0D` };
}; };
const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => { const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
let { emailOrigin } = emailDetail; let { emailOrigin } = emailDetail;
emailOrigin = emailOrigin || {}; emailOrigin = emailOrigin || {};
@ -39,9 +41,38 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
setOpen(false); setOpen(false);
}; };
const [mobile] = useStyleStore((state) => [state.mobile]);
return ( return (
<> <>
<DnDModal open={open} setOpen={setOpen} title={emailOrigin.subject} initial={{ top: 74 }} onMove={onHandleMove} onResize={onHandleResize}> <DnDModal
open={open}
setOpen={setOpen}
title={emailOrigin.subject}
initial={{ top: 74 }}
onMove={onHandleMove}
onResize={onHandleResize}
footer={
mobile ? (
<>
<div className='flex items-center w-full '>
<Button
onClick={() => onOpenEditor(emailOrigin, 'reply')}
size='small'
type='text'
icon={<ReplyIcon className='text-indigo-500' />}>
回复
</Button>
<Button
onClick={() => onOpenEditor(emailOrigin, 'forward')}
size='small'
type='text'
icon={<ShareForwardIcon className='text-primary' />}>
转发
</Button>
</div>
</>
) : null
}>
{/* email toolbar */} {/* email toolbar */}
<div className='email-container flex flex-col gap-2 *:p-2 *:rounded-sm *:border-b *:border-gray-200 *:shadow-1md'> <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 '> {/* <div className='flex items-center justify-start '>
@ -52,22 +83,40 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
<div className=' font-bold'>{emailOrigin.subject}</div> <div className=' font-bold'>{emailOrigin.subject}</div>
<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'> <div className='flex gap-2 mb-2 items-center'>
<Avatar className='' style={TagColorStyle(emailOrigin.fromEmail)}> <Avatar
className=''
style={TagColorStyle(emailOrigin.fromEmail)}>
{(emailOrigin.fromName || '').substring(0, 1)} {(emailOrigin.fromName || '').substring(0, 1)}
</Avatar> </Avatar>
<div className=' flex flex-col'> <div className=' flex flex-col'>
<span className=' font-bold text-base'>{emailOrigin.fromName}</span> <span className=' font-bold text-base'>
<span className='text-neutral-500'>{emailOrigin.fromEmail}</span> {emailOrigin.fromName}
</span>
<span className='text-neutral-500'>
{emailOrigin.fromEmail}
</span>
</div> </div>
</div> </div>
<div className='flex flex-col justify-start gap-1 items-end'> <div className='flex flex-col justify-start gap-1 items-end'>
<div className='flex items-center '> <div className='flex items-center '>
<Button onClick={() => onOpenEditor(emailOrigin, 'reply')} size='small' type='text' icon={<ReplyIcon className='text-indigo-500' />}> <Button
onClick={() => onOpenEditor(emailOrigin, 'reply')}
size='small'
type='text'
icon={<ReplyIcon className='text-indigo-500' />}>
回复 回复
</Button> </Button>
<Button onClick={() => onOpenEditor(emailOrigin, 'forward')} size='small' type='text' icon={<ShareForwardIcon className='text-primary' />}> <Button
onClick={() => onOpenEditor(emailOrigin, 'forward')}
size='small'
type='text'
icon={<ShareForwardIcon className='text-primary' />}>
转发 转发
</Button> </Button>
</div> </div>
@ -78,7 +127,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
<div className='text-sm'> <div className='text-sm'>
<span className='text-neutral-500 pr-2'>收件人:</span> <span className='text-neutral-500 pr-2'>收件人:</span>
{emailOrigin.toName} {emailOrigin.toName}
<span className='text-neutral-600'>&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;</span> <span className='text-neutral-600'>
&nbsp;&nbsp;&lt;{emailOrigin.toEmail}&gt;
</span>
</div> </div>
{emailOrigin.cc && ( {emailOrigin.cc && (
<div className='text-sm'> <div className='text-sm'>
@ -98,7 +149,9 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
</div> */} </div> */}
<Divider className='my-2' /> <Divider className='my-2' />
{/* <div className='mt-2'>{emailOrigin.body}</div> */} {/* <div className='mt-2'>{emailOrigin.body}</div> */}
<div className='mt-2' dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div> <div
className='mt-2'
dangerouslySetInnerHTML={{ __html: emailOrigin.content }}></div>
{/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */} {/* <div className='mt-2'>{emailOrigin.attachments.map(attachment => <div key={attachment.name}>{attachment.name}</div>)}</div> */}
</div> </div>
</div> </div>
@ -113,6 +166,6 @@ const EmailDetail = ({ open, setOpen, emailDetail, ...props }) => {
key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`} key={`email-editor-inner-${action}-popup_${ReferEmailMsg.id}`}
/> />
</> </>
); )
}; };
export default EmailDetail; export default EmailDetail;

@ -13,7 +13,7 @@ function Chat() {
return ( return (
<> <>
<Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 20px)', height: 'calc(100vh - 20px)', minWidth: '360px' }}> <Layout className='h-full chatwindow-wrapper mobilechat-wrapper' style={{ maxHeight: 'calc(100vh - 20px)', height: 'calc(100vh - 20px)', minWidth: '360px' }}>
<Header className=' px-2 ant-layout-sider-light ant-card h-auto flex justify-between gap-1 items-center'> <Header className=' px-2 ant-layout-sider-light bg-white ant-card h-auto flex justify-between gap-1 items-center'>
<Button type='text' icon={<MenuFoldOutlined />} onClick={() => navigate('/m/conversation')} className=' rounded-none rounded-l' /> <Button type='text' icon={<MenuFoldOutlined />} onClick={() => navigate('/m/conversation')} className=' rounded-none rounded-l' />
<MessagesHeader /> <MessagesHeader />
<Button type='text' icon={<MenuUnfoldOutlined />} onClick={() => navigate('/m/order')} className=' rounded-none rounded-r' /> <Button type='text' icon={<MenuUnfoldOutlined />} onClick={() => navigate('/m/order')} className=' rounded-none rounded-r' />

Loading…
Cancel
Save