新增TG邮件查看HTML

2025-10-22 21:33:45 +08:00
parent fdf9e95d67
commit 57638aa8e1
15 changed files with 332 additions and 62 deletions
--- a/mail-worker/src/template/email-html.js
+++ b/mail-worker/src/template/email-html.js
@@ -0,0 +1,139 @@
+import { parseHTML } from 'linkedom';
+
+export default function emailHtmlTemplate(html) {
+
+	const { document } = parseHTML(html);
+	document.querySelectorAll('script').forEach(script => script.remove());
+	html = document.documentElement.outerHTML;
+
+	return `<!DOCTYPE html>
+<html lang='en' >
+<head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            background: #FFF;
+        }
+
+        .content-box {
+        		padding: 15px 10px;
+            width: 100%;
+            height: 100%;
+            overflow: auto; /* 改为 auto 允许滚动 */
+            font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        }
+
+        .content-html {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+<body>
+    <div class='content-box'>
+        <div id='container' class='content-html'></div>
+    </div>
+
+    <script>
+
+        function renderHTML(html) {
+            const container = document.getElementById('container');
+            const shadowRoot = container.attachShadow({ mode: 'open' });
+
+            // 提取 <body> 的 style 属性
+            const bodyStyleRegex = /<body[^>]*style="([^"]*)"[^>]*>/i;
+            const bodyStyleMatch = html.match(bodyStyleRegex);
+            const bodyStyle = bodyStyleMatch ? bodyStyleMatch[1] : '';
+
+            // 移除 <body> 标签
+            const cleanedHtml = html.replace(/<\\/?body[^>]*>/gi, '');
+
+            // 渲染内容
+            shadowRoot.innerHTML = \`
+                <style>
+                    :host {
+                        all: initial;
+                        width: 100%;
+                        height: 100%;
+                        font-family: Inter, -apple-system, BlinkMacSystemFont,
+                                    'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+                        font-size: 14px;
+                        line-height: 1.5;
+                        color: #13181D;
+                        word-break: break-word;
+                        overflow: auto; /* 添加滚动 */
+                    }
+
+                    h1, h2, h3, h4 {
+                        font-size: 18px;
+                        font-weight: 700;
+                    }
+
+                    p {
+                        margin: 0;
+                    }
+
+                    a {
+                        text-decoration: none;
+                        color: #0E70DF;
+                    }
+
+                    .shadow-content {
+                        background: #FFFFFF;
+                        width: fit-content;
+                        height: fit-content;
+                        min-width: 100%;
+                        \${bodyStyle ? bodyStyle : ''} /* 注入 body 的 style */
+                    }
+
+                    img:not(table img) {
+                        max-width: 100% !important;
+                        height: auto !important;
+                    }
+                </style>
+                <div class="shadow-content">
+                    \${cleanedHtml}
+                </div>
+            \`;
+
+            // 自动缩放
+            autoScale(shadowRoot, container);
+        }
+
+        function autoScale(shadowRoot, container) {
+            if (!shadowRoot || !container) return;
+
+            const parent = container;
+            const shadowContent = shadowRoot.querySelector('.shadow-content');
+
+            if (!shadowContent) return;
+
+            const parentWidth = parent.offsetWidth;
+            const parentHeight = parent.offsetHeight;
+
+            const childWidth = shadowContent.scrollWidth;
+            const childHeight = shadowContent.scrollHeight;
+
+            if (childWidth === 0 || childHeight === 0) return;
+
+            const scaleX = parentWidth / childWidth;
+            const scaleY = parentHeight / childHeight;
+            const scale = Math.min(scaleX, scaleY);
+
+            const hostElement = shadowRoot.host;
+            hostElement.style.zoom = scale;
+        }
+
+        // 使用示例
+        const exampleHtml = \`${html}\`;
+
+        // 渲染HTML
+        renderHTML(exampleHtml);
+    </script>
+</body>
+</html>`
+}
--- a/mail-worker/src/template/email-msg.js
+++ b/mail-worker/src/template/email-msg.js
@@ -0,0 +1,7 @@
+export default function emailMsgTemplate(email) {
+	return `<b>${email.subject}</b>
+
+发件人：${email.name}		&lt;${email.sendEmail}&gt;
+收件人：\u200B${email.toEmail}`
+
+}
--- a/mail-worker/src/template/email-text.js
+++ b/mail-worker/src/template/email-text.js
@@ -0,0 +1,35 @@
+export default function emailTextTemplate(text) {
+	return `<!DOCTYPE html>
+<html lang='en' >
+<head>
+    <meta charset='UTF-8'>
+    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
+    <style>
+        html {
+            margin: 0;
+            padding: 0;
+            background: #FFF;
+        }
+
+        body {
+        		box-sizing: border-box;
+        		margin: 0;
+        		padding: 10px 10px;
+            width: 100%;
+            height: 100%;
+            overflow: auto; /* 改为 auto 允许滚动 */
+        }
+
+        span {
+        		font-family: inherit;
+						white-space: pre-wrap;
+						word-break: break-word;
+        }
+
+    </style>
+</head>
+<body>
+<span>${text}</span>
+</body>
+</html>`
+}