novalon/novalon-website
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add email templates for contact form

Browse Source
This commit is contained in:
张翔
2026-02-26 17:54:32 +08:00
parent 3de9890fc4
commit 99e9c874b0
1 changed files with 154 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/email-templates.ts
+154
View File
@@ -0,0 +1,154 @@
import { COMPANY_INFO } from './constants';
export interface ContactFormData {
name: string;
phone: string;
email: string;
message: string;
}
export function generateNotificationEmail(data: ContactFormData): string {
const submitTime = new Date().toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
});
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>官网留言通知</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.header { background: linear-gradient(135deg, #C41E3A 0%, #1C1C1C 100%); color: #fff; padding: 30px; text-align: center; }
.header h1 { margin: 0; font-size: 24px; }
.content { padding: 30px; }
.info-card { background: #F5F5F5; padding: 20px; border-radius: 6px; margin-bottom: 20px; }
.info-item { margin-bottom: 12px; }
.info-label { font-weight: 600; color: #666; font-size: 14px; }
.info-value { color: #333; font-size: 16px; margin-top: 4px; }
.message-box { background: #FFFBF5; padding: 20px; border-left: 4px solid #C41E3A; border-radius: 4px; margin-top: 20px; }
.message-label { font-weight: 600; color: #C41E3A; margin-bottom: 10px; }
.message-content { color: #333; white-space: pre-wrap; }
.footer { background: #F5F5F5; padding: 20px; text-align: center; color: #666; font-size: 14px; }
.cta-button { display: inline-block; background: #C41E3A; color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 4px; margin-top: 20px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>📧 官网留言通知</h1>
<p style="margin: 10px 0 0 0; opacity: 0.9;">${COMPANY_INFO.name}</p>
</div>
<div class="content">
<div class="info-card">
<div class="info-item">
<div class="info-label">客户姓名</div>
<div class="info-value">${data.name}</div>
</div>
<div class="info-item">
<div class="info-label">联系电话</div>
<div class="info-value">${data.phone}</div>
</div>
<div class="info-item">
<div class="info-label">电子邮箱</div>
<div class="info-value">${data.email}</div>
</div>
<div class="info-item">
<div class="info-label">提交时间</div>
<div class="info-value">${submitTime}</div>
</div>
</div>
<div class="message-box">
<div class="message-label">💬 留言内容</div>
<div class="message-content">${data.message}</div>
</div>
<div style="text-align: center; margin-top: 30px;">
<a href="mailto:${data.email}" class="cta-button">📩 快速回复</a>
</div>
</div>
<div class="footer">
<p>此邮件来自 ${COMPANY_INFO.name} 官网联系表单</p>
<p style="margin: 5px 0 0 0;">${COMPANY_INFO.address}</p>
</div>
</div>
</body>
</html>
`.trim();
}
export function generateConfirmationEmail(data: ContactFormData): string {
return `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>感谢您的留言</title>
<style>
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; }
.container { max-width: 600px; margin: 0 auto; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.header { background: linear-gradient(135deg, #C41E3A 0%, #1C1C1C 100%); color: #fff; padding: 40px 30px; text-align: center; }
.header h1 { margin: 0; font-size: 28px; }
.header p { margin: 10px 0 0 0; opacity: 0.9; }
.content { padding: 30px; }
.success-icon { text-align: center; font-size: 60px; margin-bottom: 20px; }
.message { background: #FFFBF5; padding: 20px; border-radius: 6px; border-left: 4px solid #C41E3A; margin: 20px 0; }
.contact-info { background: #F5F5F5; padding: 20px; border-radius: 6px; margin-top: 20px; }
.contact-item { display: flex; align-items: center; margin-bottom: 12px; }
.contact-icon { width: 24px; height: 24px; margin-right: 12px; }
.footer { background: #F5F5F5; padding: 20px; text-align: center; color: #666; font-size: 14px; }
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>✅ 感谢您的留言</h1>
<p>${COMPANY_INFO.name}</p>
</div>
<div class="content">
<div class="success-icon">🎉</div>
<p style="font-size: 18px; text-align: center; margin-bottom: 20px;">
尊敬的 <strong>${data.name}</strong>，您好！
</p>
<p style="text-align: center; color: #666;">
我们已收到您的留言，感谢您对${COMPANY_INFO.name}的关注与支持！
</p>
<div class="message">
<p style="margin: 0; font-weight: 600; color: #C41E3A;">📋 您的留言内容</p>
<p style="margin: 10px 0 0 0; color: #333;">${data.message}</p>
</div>
<div style="text-align: center; margin: 20px 0;">
<p style="color: #C41E3A; font-weight: 600;">⏰ 预计回复时间：2小时内</p>
<p style="color: #666; font-size: 14px; margin-top: 8px;">工作日 9:00 - 18:00</p>
</div>
<div class="contact-info">
<p style="margin: 0 0 15px 0; font-weight: 600;">📞 联系我们</p>
<div class="contact-item">
<span class="contact-icon">📧</span>
<span>${COMPANY_INFO.email}</span>
</div>
<div class="contact-item">
<span class="contact-icon">📱</span>
<span>${COMPANY_INFO.phone}</span>
</div>
<div class="contact-item">
<span class="contact-icon">📍</span>
<span>${COMPANY_INFO.address}</span>
</div>
</div>
</div>
<div class="footer">
<p>© ${new Date().getFullYear()} ${COMPANY_INFO.name}. All rights reserved.</p>
</div>
</div>
</body>
</html>
`.trim();
}