修复gmail附件和回复编辑器图片不显示

mail-vue/src/components/email-scroll/index.vue

@@ -55,7 +55,7 @@
                                 effect="dark"
                                 content="已发送"
                     >
-                      <Icon icon="bi:send-arrow-up" style="color: #67C23A" width="20" height="20"
+                      <Icon icon="bi:send-arrow-up-fill" style="color: #67C23A" width="20" height="20"
                       />
 
                     </el-tooltip>
@@ -87,7 +87,7 @@
                                 effect="dark"
                                 content="发送延迟"
                     >
-                      <Icon icon="quill:send-later" style="color:#FBBD08" width="20"
+                      <Icon icon="bi:send-arrow-up-fill" style="color:#FBBD08" width="20"
                             height="20"/>
 
                     </el-tooltip>

mail-vue/src/components/tiny-editor/index.vue

@@ -77,7 +77,6 @@ function initEditor() {
     toolbar_mode: 'scrolling',
     mobile: {
       toolbar: 'fullscreen bold emoticons forecolor backcolor italic fontsize | alignleft aligncenter alignright alignjustify | outdent indent |  bullist numlist | link image  | table code preview ',
-
     },
     font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px',
     emoticons_search: false,
@@ -85,8 +84,9 @@ function initEditor() {
     language_url: '/tinymce/langs/zh_CN.js',
     menubar: false,
     license_key: 'gpl',
+    noneditable_class: 'mceNonEditable',
     content_style: ` .tox-dialog__body-content  { margin: 0 !important; }
-    img { max-width: 100%; height: auto; }
+    img { max-width: 100% !important; height: auto !important; }
     body {margin: 10px 8px 0 5px !important; font-family: 'HarmonyOS'; font-size: 14px;}
     @media (pointer: fine) and (hover: hover) {
         ::-webkit-scrollbar {
@@ -110,9 +110,6 @@ function initEditor() {
     .mce-item-table:not([border]), .mce-item-table:not([border]) caption, .mce-item-table:not([border]) td, .mce-item-table:not([border]) th, .mce-item-table[border="0"], .mce-item-table[border="0"] caption, .mce-item-table[border="0"] td, .mce-item-table[border="0"] th, table[style*="border-width: 0px"], table[style*="border-width: 0px"] caption, table[style*="border-width: 0px"] td, table[style*="border-width: 0px"] th {
         border: none;
     }
-    a {
-        color: #409EFF !important;
-    }
     `,
     setup: (ed) => {
       editor.value = ed;

mail-vue/src/layout/write/index.vue

@@ -67,12 +67,14 @@ import {fileToBase64, formatBytes} from "@/utils/file-utils.js";
 import {getIconByName} from "@/utils/icon-utils.js";
 import sendPercent from "@/components/send-percent/index.vue"
 import {formatDetailDate} from "@/utils/day.js";
+import {useSettingStore} from "@/store/setting.js";
 
 defineExpose({
   open,
   openReply
 })
 
+const settingStore = useSettingStore()
 const emailStore = useEmailStore();
 const accountStore = useAccountStore()
 const editor = ref({})
@@ -283,11 +285,22 @@ function openReply(email) {
     <br>
         ${ formatDetailDate(email.createTime) }，${email.name} &lt${email.sendEmail}&gt 来信:
     </div>
-    <blockquote style="margin: 0 0 0 0.8ex;border-left: 1px solid rgb(204,204,204);padding-left: 1ex;">${email.content}</blockquote>`
+    <blockquote class="mceNonEditable" style="margin: 0 0 0 0.8ex;border-left: 1px solid rgb(204,204,204);padding-left: 1ex;">
+      <articl>
+          ${formatImage(email.content) || `<pre style="font-family: inherit;word-break: break-word;white-space: pre-wrap;margin: 0">${email.text}</pre>`}
+      </article>
+    </blockquote>`
     open()
+    console.log(defValue.value)
   })
 
+}
 
+function formatImage(content) {
+  content = content || '';
+  const domain = settingStore.settings.r2Domain;
+  console.log(content)
+  return  content.replace(/{{domain}}/g, domain + '/');
 }
 
 function open() {

mail-vue/src/views/content/index.vue

@@ -35,7 +35,7 @@
           </div>
           <el-scrollbar class="htm-scrollbar" :class="email.attList.length === 0 ? 'bottom-distance' : ''">
             <ShadowHtml :html="formatImage(email.content)" v-if="email.content" />
-            <span v-else class="email-text" >{{email.text}}</span>
+            <pre v-else class="email-text" >{{email.text}}</pre>
           </el-scrollbar>
           <div class="att" v-if="email.attList.length > 0">
             <div class="att-title">
@@ -380,8 +380,10 @@ const handleDelete = () => {
 }
 
 .email-text {
+  font-family: inherit;
   white-space: pre-wrap;
   word-break: break-word;
+  margin: 0;
 }
 
 .bottom-distance {

mail-worker/dist/index.html

@@ -6,8 +6,8 @@
     <title></title>
     <link rel="icon" href="/assets/favicon-C5dAZutX.svg" type="image/svg+xml">
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
-  <script type="module" crossorigin src="/assets/index-C4HVi8Hj.js"></script>
+  <script type="module" crossorigin src="/assets/index-BXq2c1cR.js"></script>
-  <link rel="stylesheet" crossorigin href="/assets/index-DI8kV-nO.css">
+  <link rel="stylesheet" crossorigin href="/assets/index-DAVUbrwg.css">
 </head>
 <body>
 <div id="loading-first">

mail-worker/src/email/email.js

@@ -25,7 +25,8 @@ export async function email(message, env, ctx) {
 			forwardStatus,
 			forwardEmail,
 			ruleEmail,
-			ruleType
+			ruleType,
+			r2Domain
 		} = await settingService.query({ env });
 
 		if (receive === settingConst.receive.CLOSE) {
@@ -45,8 +46,6 @@ export async function email(message, env, ctx) {
 
 		const email = await PostalMime.parse(content);
 
-		console.log(email)
-
 		const toName = email.to.find(item => item.address === message.to)?.name || '';
 
 		const params = {
@@ -82,13 +81,12 @@ export async function email(message, env, ctx) {
 			}
 		}
 
-		let emailRow = await emailService.receive({ env }, params, cidAttachments);
+		let emailRow = await emailService.receive({ env }, params, cidAttachments, r2Domain);
 
 		attachments.forEach(attachment => {
 			attachment.emailId = emailRow.emailId;
 			attachment.userId = emailRow.userId;
 			attachment.accountId = emailRow.accountId;
-			attachment.type = attachment.contentId ? attConst.type.EMBED : attConst.type.ATT;
 		});
 
 		if (attachments.length > 0 && env.r2) {

mail-worker/src/service/att-service.js

@@ -157,8 +157,8 @@ const attService = {
 		return orm(c).select().from(att).where(
 			and(
 				inArray(att.emailId,emailIds),
-				eq(att.type, attConst.type.ATT),
+				eq(att.type, attConst.type.ATT)
-				isNull(att.contentId)))
+			))
 			.all();
 	}
 };

mail-worker/src/service/email-service.js

@@ -1,6 +1,6 @@
 import orm from '../entity/orm';
 import email from '../entity/email';
-import { emailConst, isDel, settingConst } from '../const/entity-const';
+import { attConst, emailConst, isDel, settingConst } from '../const/entity-const';
 import { and, desc, eq, gt, inArray, lt, count, asc, sql, ne, or } from 'drizzle-orm';
 import { star } from '../entity/star';
 import settingService from './setting-service';
@@ -120,28 +120,8 @@ const emailService = {
 			.run();
 	},
 
-	receive(c, params, cidAttList) {
+	receive(c, params, cidAttList, r2domain) {
-
+		params.content = this.imgReplace(params.content, cidAttList, r2domain)
-		const { document } = parseHTML(params.content);
-
-		const images = Array.from(document.querySelectorAll('img'));
-
-		for (const img of images) {
-
-			const src = img.getAttribute('src');
-			if (src && src.startsWith('cid:')) {
-
-				const cid = src.replace(/^cid:/, '');
-				const attCidIndex = cidAttList.findIndex(cidAtt => cidAtt.contentId.replace(/^<|>$/g, '') === cid);
-
-				if (attCidIndex > -1) {
-					const cidAtt = cidAttList[attCidIndex];
-					img.setAttribute('src', '{{domain}}' + cidAtt.key);
-				}
-			}
-		}
-
-		params.content = document.toString();
 		return orm(c).insert(email).values({ ...params }).returning().get();
 	},
 
@@ -151,7 +131,7 @@ const emailService = {
 
 		const { resendTokens, r2Domain, send } = await settingService.query(c);
 
-		const { attDataList, html } = await attService.toImageUrlHtml(c, content, r2Domain);
+		let { attDataList, html } = await attService.toImageUrlHtml(c, content, r2Domain);
 
 		if (attDataList.length > 0 && !r2Domain) {
 			throw new BizError('r2域名未配置不能发送正文图片');
@@ -216,7 +196,6 @@ const emailService = {
 			name = emailUtils.getName(accountRow.email);
 		}
 
-
 		let emailRow = {
 			messageId: null
 		};
@@ -290,6 +269,7 @@ const emailService = {
 			throw new BizError(error.message);
 		}
 
+		html = this.imgReplace(html, null, r2Domain);
 
 		const emailData = {};
 		emailData.sendEmail = accountRow.email;
@@ -373,6 +353,47 @@ const emailService = {
 		return emailRowList;
 	},
 
+	imgReplace(content, cidAttList, r2domain) {
+
+		if (!content) {
+			return ''
+		}
+
+		const { document } = parseHTML(content);
+
+		const images = Array.from(document.querySelectorAll('img'));
+
+		const useAtts = []
+
+		for (const img of images) {
+
+			const src = img.getAttribute('src');
+			if (src && src.startsWith('cid:') && cidAttList) {
+
+				const cid = src.replace(/^cid:/, '');
+				const attCidIndex = cidAttList.findIndex(cidAtt => cidAtt.contentId.replace(/^<|>$/g, '') === cid);
+
+				if (attCidIndex > -1) {
+					const cidAtt = cidAttList[attCidIndex];
+					img.setAttribute('src', '{{domain}}' + cidAtt.key);
+					useAtts.push(cidAtt)
+				}
+
+			}
+
+			if (src && src.startsWith(r2domain + '/')) {
+				img.setAttribute('src', src.replace(r2domain + '/', '{{domain}}'));
+			}
+
+		}
+
+		useAtts.forEach(att => {
+			att.type = attConst.type.EMBED
+		})
+
+		return document.toString();
+	},
+
 	selectById(c, emailId) {
 		return orm(c).select().from(email).where(
 			and(eq(email.emailId, emailId),