小帕鲁
附言：
经过时间的发酵，1.0 版本的邮件模板反响不错，收到了很多人的喜爱，但模板样式总归不能让所有人喜欢，现在将重新设计一套简洁明朗的模板出来！
新模板的设计理念和方向：
极致的留白艺术：
增加呼吸空间： 大幅增加内容区域的留白，让文字和图片有足够的“呼吸空间”，减少视觉压迫感，提升阅读舒适度。
聚焦核心信息： 留白能引导用户的视线，使其更自然地聚焦在邮件的核心内容上，避免分散注意力。
清晰的字体与排版：
易读性优先： 选用更现代、普适性强、在各种设备上都表现优秀的无衬线字体（如思源黑体、苹方、Roboto等）。
统一规范： 严格统一字号、行距和段落间距，确保信息层级清晰，主次分明。标题、正文、引用等元素将有明确的样式定义。
移动端优化： 确保在手机、平板等移动设备上的字体大小和布局都能自动适配，提供无缝的阅读体验。
克制的色彩运用：
品牌主色调： 仅保留品牌的主色调作为点缀或强调色，如按钮、链接、重要标题等。
中性背景： 大面积使用白色或浅灰色作为背景色，营造干净、专业的视觉感受。
避免色彩堆砌： 减少复杂渐变、阴影和过多的装饰性色彩，让信息本身成为视觉焦点。
模块化与结构化：
信息区块化： 将邮件内容划分为清晰的模块（如：头部、主内容区、CTA、页脚等），每个模块功能明确，便于用户快速浏览和定位所需信息。
简洁的导航： 如果有导航需求，将采用最简洁的文字链接或扁平化图标，避免冗余。
扁平化与轻量化：
设计元素简化： 按钮、图标、分割线等设计元素将采用扁平化风格，减少立体感和复杂纹理，让整体界面更显轻盈。
加载速度优化： 减少大尺寸图片和复杂CSS的使用，确保邮件加载速度快，提升用户打开邮件的体验。
邮件模板最终设计如下！
我发布的瞬间收到新评论
模板代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.07); padding: 40px; margin: 0 auto; border-radius: 24px; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #ec4899, #f472b6, #fbcfe8); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #fdf2f8, #fce7f3); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -70px; left: -70px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(135deg, #fdf2f8, #fbcfe8); opacity: 0.35; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 头部区域 -->
<div class="head" style="display: flex; align-items: center; margin-bottom: 32px;">
<!-- 评论图标 -->
<div style="background: linear-gradient(135deg, #ec4899, #f472b6); width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 6px 12px -3px rgba(236, 72, 153, 0.3);">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div>
<p style="color: #8b92a5; font-size: 14px; margin: 0 0 6px 0; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 500;">新评论通知</p>
<p class="honorific" th:text="|${subscriber.displayName} 你好：|" style="font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
<!-- 主体内容 -->
<div class="body" style="background: linear-gradient(to bottom right, #fafbfc, #ffffff); padding: 35px; border-radius: 18px; border: 1px solid #eaecf0; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.05); margin-bottom: 30px;">
<!-- 评论者信息 -->
<div style="background-color: #fdf2f8; border-radius: 14px; padding: 18px; margin-bottom: 25px; display: flex; align-items: center; border-left: 4px solid #ec4899;">
<div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #ec4899, #f472b6); display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; overflow: hidden;">
<!-- 用户头像占位符，可替换为实际头像 -->
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #be185d; font-size: 16px;" th:text="|${commenter} 评论了你的瞬间|"></p>
<p style="margin: 0; color: #db2777; font-size: 14px; line-height: 1.6;" th:text="${commentTime}">刚刚 · 通过手机应用</p>
</div>
</div>
<!-- 原瞬间内容卡片 -->
<div style="background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 0; margin-bottom: 30px; overflow: hidden;">
<!-- 瞬间头部 -->
<div style="padding: 16px 20px; display: flex; align-items: center; border-bottom: 1px solid #e5e7eb;">
<div style="width: 36px; height: 36px; border-radius: 50%; background-color: #f3f4f6; display: flex; align-items: center; justify-content: center; margin-right: 12px; overflow: hidden;">
<!-- 用户自己的头像占位符 -->
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div>
<p style="margin: 0; font-weight: 600; color: #374151; font-size: 15px;" th:text="${subscriber.displayName}"></p>
<p style="margin: 0; color: #6b7280; font-size: 13px;">原创瞬间</p>
</div>
</div>
<!-- 瞬间内容 -->
<div style="padding: 20px;">
<a th:href="${momentUrl}" target="_blank" style="display: block; text-decoration: none; color: #374151; font-size: 15px; line-height: 1.6; margin-bottom: 15px;" th:utext="${momentHtmlContent}"></a>
</div>
</div>
<!-- 评论内容卡片 -->
<div style="margin-bottom: 25px;">
<p style="color: #4b5563; margin-bottom: 15px; line-height: 1.7; font-size: 16px; font-weight: 500;">以下是TA的评论内容：</p>
<div style="background-color: #ffffff; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);">
<!-- 引用标记 -->
<div style="position: absolute; top: -12px; left: 20px; width: 24px; height: 24px; background-color: #ec4899; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<pre class="content" th:text="${content}" style="font-family: 'Segoe UI', Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; margin: 0; color: #374151; line-height: 1.7; font-size: 16px;"></pre>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 0 15px 0;">
<a th:href="${momentUrl}" target="_blank" style="flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #ec4899, #f472b6); color: white; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 12px -2px rgba(236, 72, 153, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(236, 72, 153, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(236, 72, 153, 0.25)';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
</svg>
查看并回复
</a>
<a th:href="${notificationSettingsUrl}" style="flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; background-color: #f9fafb; color: #4b5563; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border: 1px solid #e5e7eb;" onmouseover="this.style.backgroundColor='#f3f4f6';this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 12px -4px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.backgroundColor='#f9fafb';this.style.transform='translateY(0)';this.style.boxShadow='none';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
管理通知
</a>
</div>
</div>
<!-- 底部区域 -->
<div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
如需调整通知接收设置，请前往<a th:href="${notificationSettingsUrl}" style="color: #ec4899; text-decoration: none;">通知中心</a>
</p>
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> <span th:text="${site.title}"></span>. 保留所有权利
</p>
</div>
</div>
</div>
工单用户回复
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title th:text="|工单 ${ticketName} 有新回复|"></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* 全局重置 */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* 响应式样式 */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.content-padding {
padding-left: 16px !important;
padding-right: 16px !important;
}
.header-title {
font-size: 24px !important;
}
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0 !important; padding: 0 !important; background-color: #f8f9fa;">
<!-- 预显示文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您提交的工单 [(${ticketName})] 有新的进展，请及时查看。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<!-- 图标容器 -->
<div style="width: 72px; height: 72px; background-color: #dbeafe; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- SVG 图标 (现代客户端) -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">工单有新回复</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">
您提交的工单有新的进展，请及时查看。
</div>
</div>
<!-- 主要内容区域 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<p style="font-size: 16px; color: #374151; margin-bottom: 20px; line-height: 1.6;">
<span style="font-weight: 600; color: #111827;" th:text="|${subscriber.displayName} 你好：|"></span>
</p>
<p style="font-size: 16px; color: #374151; margin-bottom: 24px; line-height: 1.6;">
<span th:text="|${ticketOwner} 提交的工单 ${ticketName} 有新的回复，请尽快处理。|"></span>
</p>
<!-- 详情卡片 -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; color: #374151; font-size: 15px; line-height: 1.7;">
<div style="font-size: 18px; font-weight: bold; color: #1f2937; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">回复详情</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单号：</span>
<span style="color: #6b7280;" th:text="${ticketName}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单标题：</span>
<span style="color: #6b7280;" th:text="${ticketTitle}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">回复时间：</span>
<span style="color: #6b7280;" th:text="${replyTime}"></span>
</div>
<div>
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block; vertical-align: top;">内 容：</span>
<span style="color: #374151; word-break: break-all;" th:text="${content}"></span>
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${ticketUrl}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#2563eb" fillcolor="#2563eb">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">查看工单详情</center>
</v:roundrect>
<![endif]-->
<a th:href="${ticketUrl}" style="display: inline-block; background: #2563eb; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.25); text-decoration: none; -webkit-text-size-adjust: none; mso-hide: all;">
查看工单详情
</a>
</div>
<p style="font-size: 15px; color: #6b7280; text-align: center; line-height: 1.6;">
如果按钮无法点击，你也可以登录 [(${site.title})] <a th:href="${ticketUrl}" target="_blank" rel="noopener noreferrer" style="color: #2563eb; font-weight: 600; text-decoration: underline;">查看工单详情</a>。
</p>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
你的工单被关闭
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title th:text="|工单 ${ticketName} 已关闭|"></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* 全局重置 */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* 响应式样式 */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.content-padding {
padding-left: 16px !important;
padding-right: 16px !important;
}
.header-title {
font-size: 24px !important;
}
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0 !important; padding: 0 !important; background-color: #f8f9fa;">
<!-- 预显示文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您的工单 [(${ticketName})] 已处理完毕并关闭。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<!-- 图标容器 -->
<div style="width: 72px; height: 72px; background-color: #dcfce7; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- SVG 图标 (现代客户端) -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">工单已关闭</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">
您提交的工单已处理完毕并关闭。
</div>
</div>
<!-- 主要内容区域 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<p style="font-size: 16px; color: #374151; margin-bottom: 24px; line-height: 1.6;">
<span style="font-weight: 600; color: #111827;" th:text="|${subscriber.displayName} 你好：|"></span>
</p>
<!-- 结单摘要卡片 -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; color: #374151; font-size: 15px; line-height: 1.7;">
<div style="font-size: 18px; font-weight: bold; color: #1f2937; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">结单摘要</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单号：</span>
<span style="color: #6b7280;" th:text="${ticketName}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单标题：</span>
<span style="color: #6b7280;" th:text="${ticketTitle}"></span>
</div>
<div style="margin-bottom: 20px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">关闭时间：</span>
<span style="color: #6b7280;" th:text="${closeTime}"></span>
</div>
<div style="padding-top: 16px; border-top: 1px solid #e5e7eb; text-align: center; font-size: 16px; font-weight: 600; color: #16a34a;">
✓ 本工单已处理完毕
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${ticketUrl}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="50%" strokecolor="#16a34a" fillcolor="#16a34a">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">查看工单详情</center>
</v:roundrect>
<![endif]-->
<a th:href="${ticketUrl}" style="display: inline-block; background: #16a34a; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(22, 163, 74, 0.25); text-decoration: none; -webkit-text-size-adjust: none; mso-hide: all;" target="_blank" rel="noopener noreferrer">
查看工单详情
</a>
</div>
<p style="font-size: 15px; color: #6b7280; text-align: center; line-height: 1.6;">
如果您对处理结果有任何疑问，可以重新开启工单或提交新的工单。
</p>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
你有新的工单回复
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title th:text="|工单 ${ticketName} 有新回复|"></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* 全局重置 */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* 响应式样式 */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.content-padding {
padding-left: 16px !important;
padding-right: 16px !important;
}
.header-title {
font-size: 24px !important;
}
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0 !important; padding: 0 !important; background-color: #f8f9fa;">
<!-- 预显示文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您的工单 [(${ticketName})] 有一条来自客服的新回复。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<!-- 图标容器 -->
<div style="width: 72px; height: 72px; background-color: #dbeafe; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- SVG 图标 (现代客户端) -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">工单有新回复</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;" th:text="|你的工单 ${ticketName} 有新的回复。|"></div>
</div>
<!-- 主要内容区域 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<p style="font-size: 16px; color: #374151; margin-bottom: 24px; line-height: 1.6;">
<span style="font-weight: 600; color: #111827;" th:text="|${subscriber.displayName} 你好：|"></span>
</p>
<!-- 回复详情卡片 -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; color: #374151; font-size: 15px; line-height: 1.7;">
<div style="font-size: 18px; font-weight: bold; color: #1f2937; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">回复详情</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单标题：</span>
<span style="color: #6b7280;" th:text="${ticketTitle}"></span>
</div>
<div style="margin-bottom: 20px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">回复时间：</span>
<span style="color: #6b7280;" th:text="${replyTime}"></span>
</div>
<!-- 回复内容 -->
<div style="padding-top: 20px; border-top: 1px solid #e5e7eb;">
<div style="font-weight: 600; color: #4b5563; margin-bottom: 12px;">最新回复内容：</div>
<div style="padding: 16px; background-color: #ffffff; border-radius: 8px; border: 1px solid #e5e7eb; color: #374151; line-height: 1.6;" th:text="${content}"></div>
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${ticketUrl}" style="height:48px;v-text-anchor:middle;width:220px;" arcsize="50%" strokecolor="#2563eb" fillcolor="#2563eb">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">查看工单详情</center>
</v:roundrect>
<![endif]-->
<a th:href="${ticketUrl}" target="_blank" rel="noopener noreferrer" style="background-color: #2563eb; color: #ffffff; display: inline-block; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.25); text-decoration: none; -webkit-text-size-adjust: none; mso-hide: all;">查看工单详情</a>
</div>
<p style="font-size: 15px; color: #6b7280; text-align: center; line-height: 1.6;">
或登录 [(${site.title})] 前往“我的工单”页面查看。
</p>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
工单创建成功
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title th:text="|新工单提醒：${ticketName}|"></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* 全局重置 */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* 响应式样式 */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.content-padding {
padding-left: 16px !important;
padding-right: 16px !important;
}
.header-title {
font-size: 24px !important;
}
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0 !important; padding: 0 !important; background-color: #f8f9fa;">
<!-- 预显示文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您收到一个新的工单 [(${ticketName})]，提交人：[(${ticketOwner})]。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<!-- 图标容器 -->
<div style="width: 72px; height: 72px; background-color: #fef3c7; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- SVG 图标 (现代客户端) -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="12" y1="18" x2="12" y2="12"></line><line x1="9" y1="15" x2="15" y2="15"></line></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">您有新的待处理工单</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;" th:text="|由 ${ticketOwner} 提交的工单等待您的处理。|"></div>
</div>
<!-- 主要内容区域 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<p style="font-size: 16px; color: #374151; margin-bottom: 24px; line-height: 1.6;">
<span style="font-weight: 600; color: #111827;" th:text="|${subscriber.displayName} 你好：|"></span>
</p>
<!-- 工单概要卡片 -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px; color: #374151; font-size: 15px; line-height: 1.7;">
<div style="font-size: 18px; font-weight: bold; color: #1f2937; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #e5e7eb;">工单概要</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单号：</span>
<span style="color: #6b7280;" th:text="${ticketName}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">提交人：</span>
<span style="color: #6b7280;" th:text="${ticketOwner}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">工单标题：</span>
<span style="color: #6b7280;" th:text="${ticketTitle}"></span>
</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block;">创建时间：</span>
<span style="color: #6b7280;" th:text="${createTime}"></span>
</div>
<div style="display: flex; margin-top: 20px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
<span style="font-weight: 600; color: #4b5563; min-width: 80px; display: inline-block; flex-shrink: 0; margin-top: 2px;">内容：</span>
<span style="color: #6b7280; word-break: break-all;" th:text="${content}"></span>
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${ticketUrl}" style="height:48px;v-text-anchor:middle;width:220px;" arcsize="50%" strokecolor="#f59e0b" fillcolor="#f59e0b">
<w:anchorlock/>
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:16px;font-weight:bold;">查看工单详情</center>
</v:roundrect>
<![endif]-->
<a th:href="${ticketUrl}" target="_blank" rel="noopener noreferrer" style="background-color: #f59e0b; color: #ffffff; display: inline-block; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(245, 158, 11, 0.25); text-decoration: none; -webkit-text-size-adjust: none; mso-hide: all;">查看工单详情</a>
</div>
<p style="font-size: 14px; color: #6b7280; text-align: center; line-height: 1.6;">
如果按钮无法点击，请登录 <span th:text="${site.title}" style="font-weight: 600;"></span> 网站查看。
</p>
</div>
<!-- 页脚 -->
<div style="border-top: 1px solid #e5e7eb; padding: 24px 32px; text-align: center;" class="content-padding">
<p style="font-size: 13px; color: #9ca3af; margin: 0;">
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}"></span> <span th:text="${site.title}"></span>. 保留所有权利。
</p>
<p style="font-size: 13px; color: #9ca3af; margin: 8px 0 0 0;">
这是一封系统自动发送的通知邮件，请勿直接回复。
</p>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
友链自助提交审核通知
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<title th:text="|链接审核结果：${through ? '已通过' : '被拒绝'}|"></title>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<style>
/* 全局重置 */
body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
img { -ms-interpolation-mode: bicubic; border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
body { height: 100% !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
/* 响应式样式 */
@media screen and (max-width: 600px) {
.container {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.content-padding {
padding-left: 16px !important;
padding-right: 16px !important;
}
.header-title {
font-size: 24px !important;
}
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0 !important; padding: 0 !important; background-color: #f8f9fa;">
<!-- 预显示文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;"
th:text="|您的链接审核结果：${through ? '已通过' : '被拒绝'}|">
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 - 审核通过 -->
<div th:if="${through}" style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #dcfce7; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">链接审核通过</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">恭喜！您提交的链接已成功发布。</div>
</div>
<!-- 页头 - 审核拒绝 -->
<div th:if="${!through}" style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #fee2e2; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
</div>
<div class="header-title" style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">链接审核被拒</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">很遗憾，您提交的链接未通过审核。</div>
</div>
<!-- 主要内容区域 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<p style="font-size: 16px; color: #374151; margin-bottom: 24px; line-height: 1.6;">
<span style="font-weight: 600; color: #111827;" th:text="|${subscriber.displayName} 你好：|"></span>
</p>
<!-- 审核详情卡片 -->
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 24px;">
<div style="font-size: 18px; font-weight: 600; color: #111827; margin-bottom: 16px; border-bottom: 1px solid #e5e7eb; padding-bottom: 16px;">审核详情</div>
<p style="margin: 16px 0; font-size: 15px; color: #374151; line-height: 1.6;">
<span style="display: inline-block; min-width: 80px; color: #6b7280;">审核结果：</span>
<span th:if="${through}" style="font-weight: 600; color: #16a34a;">已通过</span>
<span th:if="${!through}" style="font-weight: 600; color: #dc2626;">已拒绝</span>
</p>
<p style="margin: 16px 0 0 0; font-size: 15px; color: #374151; line-height: 1.6;">
<span style="display: inline-block; min-width: 80px; color: #6b7280; vertical-align: top;">审核描述：</span>
<span style="display: inline-block; max-width: calc(100% - 90px); vertical-align: top; word-break: break-all;" th:text="${reviewDescription}"></span>
</p>
</div>
<!-- CTA 按钮 -->
<div style="margin-top: 32px;">
<!-- [审核通过] 状态下的按钮组 -->
<div th:if="${through}">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
<tr>
<td>
<!-- 主按钮: 前往查看 -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${site.url}" style="height:44px;v-text-anchor:middle;width:160px;" arcsize="18%" strokecolor="#22c55e" fillcolor="#22c55e">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'Segoe UI', Arial, sans-serif;font-size:15px;font-weight:bold;">前往查看</center>
</v:roundrect>
<![endif]-->
<a th:href="${site.url}" target="_blank" style="mso-hide:all; background-color: #22c55e; color: #ffffff; display: inline-block; font-size: 15px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; width: 160px; border-radius: 8px; box-shadow: 0 4px 14px -2px rgba(34, 197, 94, 0.5);">前往查看</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td width="16"></td>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
<tr>
<td style="padding-left: 16px;">
<!-- 次按钮: 返回仪表盘 -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="@{/dashboard}" style="height:44px;v-text-anchor:middle;width:160px;" arcsize="18%" strokecolor="#d1d5db" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#374151;font-family:'Segoe UI', Arial, sans-serif;font-size:15px;font-weight:bold;">返回仪表盘</center>
</v:roundrect>
<![endif]-->
<a th:href="@{/dashboard}" target="_blank" style="mso-hide:all; background-color: #ffffff; border: 1px solid #d1d5db; color: #374151; display: inline-block; font-size: 15px; font-weight: bold; line-height: 42px; text-align: center; text-decoration: none; width: 158px; border-radius: 8px; box-sizing: border-box;">返回仪表盘</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
<!-- [审核拒绝] 状态下的按钮组 -->
<div th:if="${!through}">
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
<tr>
<td>
<!-- 主按钮: 修改并提交 -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="@{/resubmit-link}" style="height:44px;v-text-anchor:middle;width:160px;" arcsize="18%" strokecolor="#3b82f6" fillcolor="#3b82f6">
<w:anchorlock/>
<center style="color:#ffffff;font-family:'Segoe UI', Arial, sans-serif;font-size:15px;font-weight:bold;">修改并提交</center>
</v:roundrect>
<![endif]-->
<a th:href="@{/resubmit-link}" target="_blank" style="mso-hide:all; background-color: #3b82f6; color: #ffffff; display: inline-block; font-size: 15px; font-weight: bold; line-height: 44px; text-align: center; text-decoration: none; width: 160px; border-radius: 8px;">修改并提交</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
<td width="16"></td>
<td>
<![endif]-->
<table role="presentation" border="0" cellpadding="0" cellspacing="0" style="display:inline-block;">
<tr>
<td style="padding-left: 16px;">
<!-- 次按钮: 返回仪表盘 -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="@{/dashboard}" style="height:44px;v-text-anchor:middle;width:160px;" arcsize="18%" strokecolor="#d1d5db" fillcolor="#ffffff">
<w:anchorlock/>
<center style="color:#374151;font-family:'Segoe UI', Arial, sans-serif;font-size:15px;font-weight:bold;">返回仪表盘</center>
</v:roundrect>
<![endif]-->
<a th:href="@{/dashboard}" target="_blank" style="mso-hide:all; background-color: #ffffff; border: 1px solid #d1d5db; color: #374151; display: inline-block; font-size: 15px; font-weight: bold; line-height: 42px; text-align: center; text-decoration: none; width: 158px; border-radius: 8px; box-sizing: border-box;">返回仪表盘</a>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</div>
<!-- 页脚 -->
<div style="border-top: 1px solid #e5e7eb; padding: 24px 32px; text-align: center;" class="content-padding">
<p style="font-size: 13px; color: #9ca3af; margin: 0;">
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}"></span> <span th:text="${site.title}"></span>. 保留所有权利。
</p>
<p style="font-size: 13px; color: #9ca3af; margin: 8px 0 0 0;">
这是一封系统自动发送的通知邮件，请勿直接回复。
</p>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
友链自助提交通知管理员
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="x-apple-disable-message-reformatting">
<title>新的友链申请通知</title>
<!--[if mso]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<style>
html, body {
margin: 0 auto !important;
padding: 0 !important;
height: 100% !important;
width: 100% !important;
background-color: #f1f5f9; /* 更换为更柔和的背景色 */
font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
table, td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
img {
-ms-interpolation-mode:bicubic;
}
a {
text-decoration: none;
}
@media screen and (max-width: 600px) {
.email-container {
width: 100% !important;
margin: auto !important;
}
}
</style>
</head>
<body width="100%" style="margin: 0; padding: 0 !important; mso-line-height-rule: exactly; background-color: #f1f5f9;">
<center style="width: 100%; background-color: #f1f5f9;">
<!--[if mso | IE]>
<table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f1f5f9;">
<tr>
<td>
<![endif]-->
<div style="max-width: 600px; margin: 0 auto;" class="email-container">
<!--[if mso]>
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: auto;">
<tr>
<td>
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: auto;">
<!-- 顶部空白 -->
<tr>
<td style="padding: 20px 0; text-align: center"></td>
</tr>
<!-- 主内容卡片 -->
<tr>
<td style="background-color: #ffffff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid #e2e8f0;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- 卡片页眉 -->
<tr>
<td style="background-color: #eff6ff; padding: 24px; border-top-left-radius: 12px; border-top-right-radius: 12px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td align="center">
<!-- 图标: Check Square -->
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#3b82f6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="9 11 12 14 22 4"></polyline><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
</svg>
<h1 style="margin: 16px 0 0; font-size: 24px; line-height: 32px; font-weight: bold; color: #1e293b;">您有新的审核任务</h1>
</td>
</tr>
</table>
</td>
</tr>
<!-- 卡片内容 -->
<tr>
<td style="padding: 32px 40px;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<!-- 正文 -->
<tr>
<td style="font-size: 16px; line-height: 26px; color: #334155;">
<p style="margin: 0 0 16px;" th:text="|Hi ${subscriber.displayName}，|"></p>
<p style="margin: 0;">系统收到一份新的友链提交申请，请您审核。详细信息如下：</p>
</td>
</tr>
<!-- 分割线 -->
<tr>
<td style="padding: 24px 0;">
<hr style="border: 0; border-top: 1px solid #e2e8f0; margin: 0;">
</td>
</tr>
<!-- 申请详情 -->
<tr>
<td>
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr style="border-bottom: 1px solid #f1f5f9;">
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #64748b; width: 90px; vertical-align: top;">博客名称</td>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #1e293b; font-weight: 600;" th:text="${displayName}"></td>
</tr>
<tr style="border-bottom: 1px solid #f1f5f9;">
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #64748b; vertical-align: top;">博客链接</td>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #1e293b; font-weight: 600;" th:text="${url}"></td>
</tr>
<tr style="border-bottom: 1px solid #f1f5f9;">
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #64748b; vertical-align: top;">博客描述</td>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #1e293b; font-weight: 600;" th:text="${description}"></td>
</tr>
<tr style="border-bottom: 1px solid #f1f5f9;">
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #64748b; vertical-align: top;">Email</td>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #1e293b; font-weight: 600;" th:text="${email}"></td>
</tr>
<tr>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #64748b; vertical-align: top;">Logo 链接</td>
<td style="padding: 12px 0; font-size: 14px; line-height: 20px; color: #1e293b; font-weight: 600; word-break: break-all;" th:text="${logo}"></td>
</tr>
</table>
</td>
</tr>
<!-- 操作按钮 -->
<tr>
<td style="padding: 32px 0 0;" align="center">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" th:href="${url}" style="height:48px;v-text-anchor:middle;width:200px;" arcsize="12%" stroke="f" fillcolor="#3b82f6">
<w:anchorlock/>
<center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
前往审核
</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a th:href="${reviewUrl}" target="_blank" style="background-color: #3b82f6; border: none; border-radius: 6px; color: #ffffff; display: inline-block; font-size: 16px; font-weight: bold; line-height: 48px; text-align: center; text-decoration: none; width: 200px; -webkit-text-size-adjust: none; mso-hide: all;">
前往审核
</a>
<!--<![endif]-->
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<!-- 页脚 -->
<tr>
<td style="padding: 32px 20px; text-align: center; font-size: 12px; color: #94a3b8;">
<p style="margin: 0;">此邮件为系统自动发送，请勿直接回复。</p>
<p style="margin: 8px 0 0;">
© <span th:text="${#dates.year(#dates.createNow())}"></span> YourBrand. All rights reserved.
</p>
</td>
</tr>
</table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
<!--[if mso | IE]>
</td>
</tr>
</table>
<![endif]-->
</center>
</body>
</html>
友链自助提交成功通知
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客提交成功</title>
<style>
/* 基础重置和字体设置 */
body {
font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f8f9fa;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 容器和卡片样式 */
.container {
width: 100%;
max-width: 600px;
background-color: #ffffff;
box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08);
border-radius: 24px;
margin: 0 auto;
overflow: hidden;
}
</style>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
<!-- 邮件预览文本 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您的博客提交成功，正在等待审核。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<!-- ======================= 主要容器 ======================= -->
<div class="container" style="width: 100%; max-width: 600px; background-color: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;">
<div style="width: 72px; height: 72px; background-color: #fef3c7; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- 图标：时钟，代表等待 -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">提交成功，等待审核</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">我们已收到您的博客提交申请，将会尽快处理。</div>
</div>
<!-- 主要内容区 -->
<div style="padding: 0 32px 48px 32px;">
<div style="color: #374151; font-size: 16px; line-height: 1.8;">
<p style="margin: 0 0 20px 0;" th:text="|你好，${subscriber.displayName}：|">你好，开发者：</p>
<p style="margin: 0;">感谢您的提交！您的博客申请目前正在审核队列中。我们会在完成审核后，第一时间通过邮件通知您最终结果（通过或拒绝），请您耐心等待。</p>
</div>
</div>
<!-- 页脚 -->
<div style="padding: 24px 32px 32px 32px; text-align: center; font-size: 13px; color: #9ca3af; border-top: 1px solid #e5e7eb;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.year(#dates.createNow())}"></span> Your Company Name. All rights reserved.
</div>
</div>
<!-- ======================= 主要容器结束 ======================= -->
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
评论拦截通知
模板代码
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif;">
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您在 [(${site.title})] 上的评论已被系统拦截。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #fee2e2; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">评论已被拦截</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">系统检测到您的评论可能包含不当内容</div>
</div>
<!-- 主要内容区 -->
<div style="padding: 0 32px;" class="content-padding">
<div style="color: #374151; font-size: 16px; line-height: 1.6;">
您好，<span style="font-weight: 600; color: #111827;">[(${commentAuthor})]</span>：
</div>
<div style="margin-top: 12px; color: #374151; font-size: 16px; line-height: 1.6;">
您在文章《<a th:href="${postUrl}" style="text-decoration: none; color: #dc2626; font-weight: 600;">[(${postTitle})]</a>》中发布的评论已被我们的内容审查系统拦截。
</div>
<!-- 拦截详情卡片 -->
<div style="background: #fef2f2; border-radius: 16px; margin-top: 28px; padding: 24px; border-left: 5px solid #fca5a5;">
<div style="font-size: 18px; font-weight: bold; color: #b91c1c; margin-bottom: 16px;">拦截详情</div>
<div style="margin-bottom: 16px;">
<span style="font-weight: 600; color: #991b1b; font-size: 15px;">拦截原因：</span>
<span style="color: #c2410c; font-size: 15px;">[(${blockReason})]</span>
</div>
<div>
<div style="font-weight: 600; color: #991b1b; font-size: 15px; margin-bottom: 8px;">评论原文：</div>
<div style="background: #ffffff; border: 1px solid #fee2e2; border-radius: 10px; padding: 14px 16px; color: #374151; font-size: 15px; word-break: break-all; line-height: 1.6;">
[(${commentContent})]
</div>
</div>
</div>
<!-- 提示卡片 -->
<div style="background: #fffbeb; border-radius: 16px; margin-top: 20px; padding: 20px 24px; border-left: 5px solid #fcd34d;">
<div style="color: #92400e; font-size: 15px; line-height: 1.7;">
<span style="font-weight: 600;">请注意：</span>
系统会进行初步智能判断，所有被拦截的评论将由社区管理员进行人工复核。请您在发布内容时遵守社区规范，共同维护一个积极、友善的讨论环境。
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<a th:href="${postUrl}" style="display: inline-block; background: #dc2626; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(220, 38, 38, 0.25); text-decoration: none; transition: all 0.2s ease;">
返回文章
</a>
</div>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
评论拦截通知（管理员）
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>评论拦截提醒</title>
</head>
<body style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, Arial, sans-serif; margin: 0; padding: 0; background-color: #f8f9fa;">
<!-- 邮件预览文本：在收件箱列表中显示，不显示在邮件正文中 -->
<div style="display: none; font-size: 1px; color: #fefefe; line-height: 1px; max-height: 0px; max-width: 0px; opacity: 0; overflow: hidden;">
您有一条被拦截的评论需要处理。
</div>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<!-- ======================= 主要容器 ======================= -->
<!-- 此div在现代邮件客户端中负责内容的最大宽度和居中，在Outlook中通过上述的MSO table实现固定宽度 -->
<div class="container" style="width: 100%; max-width: 600px; background-color: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头区域 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;">
<!-- 警告图标容器 -->
<div style="width: 72px; height: 72px; background-color: #fefce8; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<!-- 图标：警告 (通过SVG嵌入，确保清晰度) -->
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#f59e0b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">评论被拦截</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">请审核以下被系统自动拦截的评论。</div>
</div>
<!-- 主要内容区 (包含评论详情和操作按钮) -->
<div style="padding: 0 32px;">
<!-- 拦截信息详情卡片 -->
<div style="margin-top: 12px; border-radius: 16px; padding: 24px; border: 1px solid #fde68a; background-color: #fffbeb;">
<div style="font-size: 18px; font-weight: bold; color: #b45309; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #fde68a;">拦截详情</div>
<div style="font-size: 15px; line-height: 2; color: #78350f;">
<p style="margin: 0 0 10px 0;">
<strong style="color: #92400e; min-width: 80px; display: inline-block;">评论作者：</strong>
<span th:text="${commentAuthor}">示例用户</span>
</p>
<p style="margin: 0 0 10px 0;">
<strong style="color: #92400e; min-width: 80px; display: inline-block;">拦截原因：</strong>
<span th:text="${blockReason}">包含敏感词</span>
</p>
<p style="margin: 0 0 10px 0;">
<strong style="color: #92400e; min-width: 80px; display: inline-block; vertical-align: top;">评论内容：</strong>
<span style="display: inline-block; max-width: 400px;" th:text="${commentContent}">这是一条被系统自动拦截的评论内容示例。</span>
</p>
<p style="margin: 0;">
<strong style="color: #92400e; min-width: 80px; display: inline-block;">所属文章：</strong>
<span th:text="${postTitle}">文章标题示例</span>
</p>
</div>
</div>
<!-- 操作按钮 -->
<div style="text-align: center; margin: 36px 0;">
<a th:href="${postUrl}" target="_blank" rel="noopener noreferrer" style="display: inline-block; background: #f59e0b; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(245, 158, 11, 0.3); text-decoration: none; transition: all 0.2s ease;">
前往审核
</a>
</div>
</div>
<!-- 页脚区域 -->
<div style="padding: 24px 32px 32px 32px; text-align: center; font-size: 13px; color: #9ca3af; border-top: 1px solid #e5e7eb;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.year(#dates.createNow())}"></span> <span th:text="${site.title}">Your Company Name</span>. All rights reserved.
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
订阅文章推送
模板代码
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #e0f2fe; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19.5 22h-15a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h15a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2z"></path><path d="M15 2v20"></path><path d="M15 7h-5"></path><path d="M15 12h-5"></path><path d="M15 17h-5"></path><path d="M9 2v20"></path></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">您有新文章待查收</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">来自 [(${site.title})] 的最新内容更新</div>
</div>
<!-- 主要内容区 -->
<div style="padding: 0 32px;" class="content-padding">
<div style="color: #374151; font-size: 16px; line-height: 1.6;">
您好！
</div>
<div style="margin-top: 12px; color: #374151; font-size: 16px; line-height: 1.6;">
我们很高兴地通知您，您订阅的博客发布了一篇新文章：
</div>
<!-- 文章摘要卡片 -->
<div style="background: #f0f9ff; border-radius: 16px; margin-top: 28px; padding: 24px; border-left: 5px solid #7dd3fc;">
<div style="margin-bottom: 16px;">
<a th:href="${postUrl}" style="text-decoration: none; color: #0c4a6e; font-size: 20px; font-weight: bold; line-height: 1.4;">[(${postTitle})]</a>
</div>
<div style="color: #6b7280; font-size: 14px; margin-bottom: 18px;">
<span>作者: [(${postOwner})]</span>
<span style="margin: 0 8px;">•</span>
<span>发布于: [[${postPublishTime}]]</span>
</div>
<div style="color: #374151; font-size: 15px; line-height: 1.7; word-break: break-all;">
[(${postExcerpt})]
</div>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<a th:href="${postUrl}" style="display: inline-block; background: #2563eb; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.25); text-decoration: none; transition: all 0.2s ease;">
阅读全文
</a>
</div>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.6;">
这是一封系统自动发送的邮件，因为您订阅了我们的内容更新。<br>
如果您不想再接收此类邮件，可以 <a th:href="${cancelUrl}" style="color: #6b7280; text-decoration: underline;">取消订阅</a>。
<div style="margin-top: 12px;">
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
提交订阅
模板代码
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #dcfce7; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">确认您的订阅</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">仅差一步，即可完成订阅！</div>
</div>
<!-- 主要内容区 -->
<div style="padding: 0 32px;" class="content-padding">
<div style="color: #374151; font-size: 16px; line-height: 1.6;">
您好！
</div>
<div style="margin-top: 12px; color: #374151; font-size: 16px; line-height: 1.6;">
感谢您对 <span style="font-weight: 600; color: #111827;">[(${site.title})]</span> 的关注。为了确保是您本人操作，并开始接收我们的最新内容，请点击下方按钮完成最终确认。
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 32px 0;">
<a th:href="${confirmUrl}" style="display: inline-block; background: #22c55e; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(34, 197, 94, 0.3); text-decoration: none; transition: all 0.2s ease;">
点击确认订阅
</a>
</div>
<!-- 提示卡片 -->
<div style="background: #f0fdf4; border-radius: 16px; margin-top: 16px; padding: 20px 24px; border-left: 5px solid #86efac;">
<div style="color: #166534; font-size: 15px; line-height: 1.7;">
<span style="font-weight: 600;">请注意：</span>
如果您并未请求订阅，请直接忽略并删除此邮件，您的邮箱不会被添加到我们的订阅列表中。
</div>
</div>
<div style="margin: 32px 0; color: #4b5563; font-size: 15px; line-height: 1.6; text-align: center;">
如果按钮无法点击，您也可以复制以下链接到浏览器中打开：<br>
<a th:href="${confirmUrl}" style="color: #2563eb; font-size: 13px; text-decoration: none; word-break: break-all;">[(${confirmUrl})]</a>
</div>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
订阅已取消
模板代码
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #f3f4f6; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><line x1="17" y1="8" x2="23" y2="14"></line><line x1="23" y1="8" x2="17" y2="14"></line></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">您已取消订阅</div>
<div style="font-size: 16px; color: #6b7280; margin-top: 8px;">我们已收到您的请求，期待您的再次归来</div>
</div>
<!-- 主要内容区 -->
<div style="padding: 0 32px;" class="content-padding">
<div style="color: #374151; font-size: 16px; line-height: 1.6;">
您好！
</div>
<div style="margin-top: 12px; color: #374151; font-size: 16px; line-height: 1.6;">
您已成功取消订阅来自 <span style="font-weight: 600; color: #111827;">[(${site.title})]</span> 的邮件更新。您将不会再收到我们的新文章通知。
</div>
<div style="margin-top: 12px; color: #374151; font-size: 16px; line-height: 1.6;">
我们很遗憾看到您离开，如果您改变了主意，随时欢迎您重新订阅。
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0;">
<a th:href="${confirmUrl}" style="display: inline-block; background: #3b82f6; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(59, 130, 246, 0.25); text-decoration: none; transition: all 0.2s ease;">
重新订阅
</a>
</div>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
新设备登录
模板代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.07); padding: 40px; margin: 0 auto; border-radius: 24px; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #eff6ff, #dbeafe); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -70px; left: -70px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(135deg, #eff6ff, #bfdbfe); opacity: 0.35; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 头部区域 -->
<div class="head" style="display: flex; align-items: center; margin-bottom: 32px;">
<!-- 安全图标 -->
<div style="background: linear-gradient(135deg, #1e40af, #3b82f6); width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 6px 12px -3px rgba(37, 99, 235, 0.3);">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<div>
<p style="color: #8b92a5; font-size: 14px; margin: 0 0 6px 0; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 500;">安全通知</p>
<p class="honorific" th:text="|${subscriber.displayName} 你好：|" style="font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
<!-- 主体内容 -->
<div class="body" style="background: linear-gradient(to bottom right, #fafbfc, #ffffff); padding: 35px; border-radius: 18px; border: 1px solid #eaecf0; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.05); margin-bottom: 30px;">
<!-- 登录通知卡片 -->
<div style="background-color: #eff6ff; border-radius: 14px; padding: 20px; margin-bottom: 30px; display: flex; align-items: flex-start; border-left: 4px solid #2563eb;">
<div style="width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #1e40af, #3b82f6); display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
<line x1="6" y1="1" x2="6" y2="4"></line>
<line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #1e40af; font-size: 16px;">检测到新设备登录</p>
<p style="margin: 0; color: #3b82f6; font-size: 14px; line-height: 1.6;" th:text="|你的 ${site.title} 账号被用于在 ${os} 的 ${browser} 上登录：|">
你的 [(${site.title})] 账号被用于在 [(${os})] 的 [(${browser})] 上登录：
</p>
</div>
</div>
<!-- 设备信息卡片 -->
<div style="background-color: #ffffff; border-radius: 16px; border: 1px solid #e5e7eb; overflow: hidden; margin-bottom: 30px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);">
<div style="background-color: #f8fafc; padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
<h3 style="margin: 0; color: #334155; font-size: 16px; font-weight: 600;">设备信息</h3>
</div>
<div class="device-info" style="padding: 20px;">
<!-- 设备图标和类型 -->
<div style="display: flex; align-items: center; margin-bottom: 25px;">
<div style="width: 50px; height: 50px; background-color: #f8fafc; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; border: 1px solid #e5e7eb;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
<line x1="8" y1="21" x2="16" y2="21"></line>
<line x1="12" y1="17" x2="12" y2="21"></line>
</svg>
</div>
<div>
<p style="margin: 0 0 3px 0; font-size: 15px; font-weight: 600; color: #334155;" th:text="${os}">[(${os})]</p>
<p style="margin: 0; font-size: 14px; color: #64748b;" th:text="${browser}">[(${browser})]</p>
</div>
</div>
<!-- 登录信息列表 -->
<div style="background-color: #f9fafb; border-radius: 12px; overflow: hidden; margin-bottom: 5px;">
<div style="display: flex; padding: 14px 16px; border-bottom: 1px solid #f1f5f9;">
<div style="width: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
</div>
<div style="flex: 1;">
<p style="margin: 0 0 2px 0; font-size: 13px; color: #64748b;">登录时间</p>
<p style="margin: 0; font-size: 15px; font-weight: 500; color: #334155;" th:text="${loginTime}">[(${loginTime})]</p>
</div>
</div>
<div style="display: flex; padding: 14px 16px;">
<div style="width: 24px; margin-right: 12px; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 11a3 3 0 1 0 6 0a3 3 0 0 0 -6 0"></path>
<circle cx="12" cy="11" r="8"></circle>
<path d="M8 21l4 -9l4 9"></path>
</svg>
</div>
<div style="flex: 1;">
<p style="margin: 0 0 2px 0; font-size: 13px; color: #64748b;">IP 地址</p>
<p style="margin: 0; font-size: 15px; font-weight: 500; color: #334155;" th:text="${ipAddress}">[(${ipAddress})]</p>
</div>
</div>
</div>
<p style="margin: 15px 0 0 0; font-size: 13px; color: #64748b; line-height: 1.5;">
此信息仅供安全目的使用，帮助你识别可能的未授权访问。
</p>
</div>
</div>
<!-- 安全建议 -->
<div style="margin: 30px 0 20px 0;">
<h4 style="margin: 0 0 15px 0; color: #334155; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
请注意
</h4>
<div style="background-color: #fff7ed; border-radius: 14px; padding: 20px; border-left: 4px solid #f97316; margin-bottom: 20px;">
<p style="margin: 0 0 15px 0; color: #4b5563; line-height: 1.7; font-size: 15px;">
如果你知悉上述信息，请忽略此电子邮件。
</p>
<p style="margin: 0; color: #4b5563; line-height: 1.7; font-size: 15px;" th:text="|如果你最近没有使用你的 ${site.title} 账号登录并相信有人可能访问了你的账户，请尽快重设你的密码。|">
如果你最近没有使用你的 [(${site.title})] 账号登录并相信有人可能访问了你的账户，请尽快重设你的密码。
</p>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 0 15px 0;">
<a href="#reset-password" style="flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #1e40af, #3b82f6); color: white; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 12px -2px rgba(37, 99, 235, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(37, 99, 235, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(37, 99, 235, 0.25)';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
重设密码
</a>
<a href="#security-settings" style="flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; background-color: #f8fafc; color: #475569; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border: 1px solid #e2e8f0;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 12px -4px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';this.style.boxShadow='none';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
安全设置
</a>
</div>
</div>
<!-- 安全建议卡片 -->
<div style="background-color: #f8fafc; border-radius: 16px; padding: 25px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
<h4 style="margin: 0 0 20px 0; color: #334155; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
<circle cx="12" cy="11" r="3"></circle>
</svg>
提高账户安全性的建议
</h4>
<ul style="padding-left: 0; margin: 0;">
<li style="list-style: none; margin-bottom: 15px; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<div>
<p style="margin: 0 0 3px 0; color: #334155; font-size: 15px; font-weight: 500;">使用强密码</p>
<p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
创建包含字母、数字和特殊字符的强密码，避免使用容易猜测的信息。
</p>
</div>
</li>
<li style="list-style: none; margin-bottom: 15px; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<div>
<p style="margin: 0 0 3px 0; color: #334155; font-size: 15px; font-weight: 500;">启用双重验证</p>
<p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
通过添加第二层保护，即使密码被泄露，账户也能保持安全。
</p>
</div>
</li>
<li style="list-style: none; margin-bottom: 0; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<div>
<p style="margin: 0 0 3px 0; color: #334155; font-size: 15px; font-weight: 500;">定期检查登录活动</p>
<p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.5;">
经常查看账户活动，确保没有可疑的登录尝试。
</p>
</div>
</li>
</ul>
</div>
<!-- 底部区域 -->
<div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
<div style="display: flex; justify-content: center; margin-bottom: 20px;">
<a href="#account" style="margin: 0 10px; color: #3b82f6; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#1d4ed8'" onmouseout="this.style.color='#3b82f6'">账户设置</a>
<a href="#security" style="margin: 0 10px; color: #3b82f6; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#1d4ed8'" onmouseout="this.style.color='#3b82f6'">安全中心</a>
<a href="#help" style="margin: 0 10px; color: #3b82f6; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#1d4ed8'" onmouseout="this.style.color='#3b82f6'">帮助中心</a>
</div>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
此邮件是系统自动发送的安全通知，请勿回复
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
© 2023 <span th:text="${site.title}">Example.com</span>. 保留所有权利
</p>
</div>
</div>
</div>
根据邮件地址重置密码
模板代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.07); padding: 40px; margin: 0 auto; border-radius: 24px; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #0ea5e9, #38bdf8, #7dd3fc); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #eff6ff, #dbeafe); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -70px; left: -70px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(135deg, #f0f9ff, #e0f7fa); opacity: 0.35; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 头部区域 -->
<div class="head" style="display: flex; align-items: center; margin-bottom: 32px;">
<!-- 安全图标 -->
<div style="background: linear-gradient(135deg, #0ea5e9, #38bdf8); width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 6px 12px -3px rgba(14, 165, 233, 0.3);">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
</div>
<div>
<p style="color: #8b92a5; font-size: 14px; margin: 0 0 6px 0; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 500;">密码重置请求</p>
<p class="honorific" th:text="|${username} 你好：|" style="font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
<!-- 主体内容 -->
<div class="body" style="background: linear-gradient(to bottom right, #fafbfc, #ffffff); padding: 35px; border-radius: 18px; border: 1px solid #eaecf0; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.05); margin-bottom: 30px;">
<!-- 安全提示卡片 -->
<div style="background-color: #f0f9ff; border-radius: 14px; padding: 16px; margin-bottom: 25px; display: flex; align-items: center; border-left: 4px solid #0ea5e9;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #0ea5e9, #38bdf8); display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8h1a4 4 0 0 1 0 8h-1"></path>
<path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"></path>
<line x1="6" y1="1" x2="6" y2="4"></line>
<line x1="10" y1="1" x2="10" y2="4"></line>
<line x1="14" y1="1" x2="14" y2="4"></line>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #0c4a6e; font-size: 15px;">安全提示</p>
<p style="margin: 0; color: #0369a1; font-size: 14px; line-height: 1.6;">
为保障账户安全，请勿将此链接分享给他人。系统不会要求您提供其他个人信息。
</p>
</div>
</div>
<p style="color: #4b5563; margin-bottom: 24px; line-height: 1.7; font-size: 16px;">
你已经请求了重置密码，可以点击下面的链接来重置密码：
</p>
<!-- 重置链接卡片 -->
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 20px; margin: 25px 0; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.05)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.boxShadow='none';">
<div style="display: flex; align-items: center; margin-bottom: 12px;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
<path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
</svg>
<p style="margin: 0; font-size: 14px; color: #64748b; font-weight: 500;">密码重置链接</p>
</div>
<div class="reset-link" style="line-height:24px; background-color: #ffffff; padding: 12px; border-radius: 10px; border: 1px dashed #cbd5e1; word-break: break-all; font-family: monospace; font-size: 14px; color: #0c4a6e;">
<span th:text="${link}"></span>
</div>
<div style="display: flex; justify-content: space-between; align-items: center; margin-top: 12px;">
<div style="display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
<line x1="16" y1="2" x2="16" y2="6"></line>
<line x1="8" y1="2" x2="8" y2="6"></line>
<line x1="3" y1="10" x2="21" y2="10"></line>
</svg>
<span style="font-size: 13px; color: #64748b;" th:text="|有效期: ${expirationAtMinutes} 分钟|"></span>
</div>
<!-- <button onclick="copyToClipboard()" id="copyLinkBtn" style="background-color: #e0f2fe; border: none; color: #0369a1; padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#bae6fd'" onmouseout="this.style.backgroundColor='#e0f2fe'">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
<path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
</svg>
<span id="copyBtnText">复制链接</span>
</button> -->
</div>
</div>
<!-- 快速操作按钮 -->
<a href="#" th:href="${link}" style="display: block; text-align: center; background: linear-gradient(to right, #0284c7, #0ea5e9); color: white; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 12px -2px rgba(14, 165, 233, 0.25); margin: 30px 0;" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(14, 165, 233, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(14, 165, 233, 0.25)';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px; display: inline-block; vertical-align: -3px;">
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
</svg>
立即重置密码
</a>
<p style="color: #4b5563; margin-bottom: 10px; line-height: 1.7; font-size: 16px;" th:text="|链接有效期为 ${expirationAtMinutes} 分钟，请尽快完成重置。|">
</p>
<p style="color: #4b5563; line-height: 1.7; font-size: 16px;">
如果您没有请求重置密码，请忽略此电子邮件，并考虑<a href="#" style="color: #0ea5e9; text-decoration: none; font-weight: 500; border-bottom: 1px dashed #7dd3fc;" onmouseover="this.style.borderBottom='1px solid #0ea5e9'" onmouseout="this.style.borderBottom='1px dashed #7dd3fc'">检查您的账户安全</a>。
</p>
<!-- 账户安全提示 -->
<div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<h3 style="margin: 0; font-size: 16px; color: #475569; font-weight: 600;">账户安全管理建议</h3>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;">
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-2px)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';">
<div style="display: flex; align-items: center; margin-bottom: 8px;">
<div style="width: 30px; height: 30px; border-radius: 8px; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0369a1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<h4 style="margin: 0; font-size: 14px; color: #334155;">定期更改密码</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
建议每3个月更换一次密码，提高账户安全性。
</p>
</div>
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-2px)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';">
<div style="display: flex; align-items: center; margin-bottom: 8px;">
<div style="width: 30px; height: 30px; border-radius: 8px; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0369a1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<h4 style="margin: 0; font-size: 14px; color: #334155;">开启双重验证</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
增加一层安全保护，防止未授权访问。
</p>
</div>
</div>
<div style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px;">
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-2px)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';">
<div style="display: flex; align-items: center; margin-bottom: 8px;">
<div style="width: 30px; height: 30px; border-radius: 8px; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0369a1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
</div>
<h4 style="margin: 0; font-size: 14px; color: #334155;">登录通知</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
开启异常登录通知，及时了解账户状态。
</p>
</div>
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 14px; border-radius: 12px; border: 1px solid #e2e8f0; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-2px)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';">
<div style="display: flex; align-items: center; margin-bottom: 8px;">
<div style="width: 30px; height: 30px; border-radius: 8px; background-color: #dbeafe; display: flex; align-items: center; justify-content: center; margin-right: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#0369a1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M12 8v4"></path>
<path d="M12 16h.01"></path>
</svg>
</div>
<h4 style="margin: 0; font-size: 14px; color: #334155;">查看登录历史</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
定期检查账户登录记录，发现可疑活动。
</p>
</div>
</div>
</div>
</div>
<!-- 底部区域 -->
<div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
<div style="display: flex; justify-content: center; margin-bottom: 20px;">
<!-- <a href="#" style="margin: 0 10px; color: #0ea5e9; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0284c7'" onmouseout="this.style.color='#0ea5e9'">账户设置</a>
<a href="#" style="margin: 0 10px; color: #0ea5e9; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0284c7'" onmouseout="this.style.color='#0ea5e9'">安全中心</a>
<a href="#" style="margin: 0 10px; color: #0ea5e9; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0284c7'" onmouseout="this.style.color='#0ea5e9'">帮助中心</a> -->
</div>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
此邮件由系统自动发送，请勿直接回复
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
© 2023 Your Company. 保留所有权利
</p>
</div>
</div>
</div>
<script>
function copyToClipboard() {
const link = document.querySelector('.reset-link span').textContent;
navigator.clipboard.writeText(link).then(function() {
alert('链接已复制到剪贴板');
}, function() {
alert('复制失败，请手动复制');
});
}
</script>
有人回复了我
模板代码
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>文章收到新评论</title>
<style>
/* 响应式调整 */
@media screen and (max-width: 600px) {
.content-padding {
padding: 24px !important;
}
.main-card {
padding: 32px 16px !important;
}
}
</style>
</head>
<body style="margin: 0; padding: 0; width: 100%; background-color: #f7f8fa; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';">
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f7f8fa;">
<tr>
<td align="center" valign="top" class="main-card" style="padding: 40px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background-color: #ffffff; box-shadow: 0 12px 40px -16px rgba(0,0,0,0.08); border-radius: 28px; margin: 0 auto; overflow: hidden;">
<!-- ====== 1. 页眉 (Header) ====== -->
<div style="padding: 40px 0; text-align: center;">
<!-- Icon -->
<div style="width: 72px; height: 72px; background-color: #eaf2ff; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19.0714 19.1429C21.4115 16.8027 22.8571 13.593 22.8571 10.1429C22.8571 4.96825 17.9603 0.857143 12 0.857143C6.03968 0.857143 1.14286 4.96825 1.14286 10.1429C1.14286 13.593 2.58849 16.8027 4.92857 19.1429L3.42857 22.8571L8.25 21.1071C9.43571 21.5714 10.6929 21.8571 12 21.8571C13.3071 21.8571 14.5643 21.5714 15.75 21.1071L20.5714 22.8571L19.0714 19.1429Z" fill="#d1e5fe"/>
<path d="M6.28571 9.28571H17.7143M6.28571 13.1429H14.2857" stroke="#3370ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<!-- Title -->
<h1 style="font-size: 28px; font-weight: 700; color: #1c1c1c; letter-spacing: -0.5px; margin: 0;" role="heading" aria-level="1">文章收到新评论</h1>
</div>
<!-- ====== 2. 主要内容 (Main Content) ====== -->
<div class="content-padding" style="padding: 0 40px 32px 40px;">
<!-- 2.1 评论内容 -->
<div style="background-color: #f7f8fa; border-radius: 20px; padding: 20px; margin-bottom: 16px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Avatar -->
<td valign="top" style="width: 48px;">
<div style="width: 36px; height: 36px; border-radius: 50%; background-color: #3370ff; color: #ffffff; font-size: 18px; font-weight: 600; text-align: center; line-height: 36px;" th:text="${#strings.substring(replier, 0, 1)}">C</div>
</td>
<!-- Replier and Content -->
<td valign="top">
<div style="margin-bottom: 12px;">
<span th:text="${replier}" style="display: inline-block; background-color: #ffffff; color: #1c1c1c; font-size: 15px; font-weight: 500; padding: 6px 16px; border-radius: 99px;">评论者名称</span>
</div>
<div style="color: #4a4a4a; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-wrap: break-word;" th:utext="${content}">
这里是评论的具体内容...<br>邮件模板非常漂亮！
</div>
</td>
</tr>
</table>
</div>
<!-- 2.2 原文信息 -->
<div style="background-color: #ffffff; border: 1px solid #f0f0f0; border-radius: 20px; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- Icon -->
<td valign="center" style="width: 32px;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 2V8H20" stroke="#9e9e9e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</td>
<!-- Text -->
<td valign="center">
<span style="font-size: 15px; color: #6e6e6e;" th:text="|回复评论内容：${quoteContent}|">回复评论内容：你好</span>
</td>
</tr>
</table>
</div>
<!-- 2.3 操作按钮 -->
<div style="text-align: center; margin: 40px 0 16px 0;">
<a th:href="${commentSubjectUrl}" style="display: inline-block; background-color: #3370ff; color: #ffffff; font-size: 16px; font-weight: 600; padding: 16px 48px; border-radius: 9999px; text-decoration: none; transition: background-color 0.2s ease;">
前往回复
</a>
</div>
</div>
<!-- ====== 3. 页脚 (Footer) ====== -->
<div style="text-align: center; padding: 24px 40px; border-top: 1px solid #f0f0f0;">
<div style="color: #a8a8a8; font-size: 13px; line-height: 1.6;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
我的文章收到新评论
模板代码
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #f8f9fa;">
<tr>
<td align="center" valign="top" style="padding: 32px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="600">
<tr>
<td align="center" valign="top">
<![endif]-->
<div class="container" style="width: 100%; max-width: 600px; background: #ffffff; box-shadow: 0 10px 40px -10px rgba(0,0,0,0.08); border-radius: 24px; margin: 0 auto; overflow: hidden;">
<!-- 页头 -->
<div style="padding: 40px 32px 24px 32px; text-align: center;" class="content-padding">
<div style="width: 72px; height: 72px; background-color: #e0f2fe; border-radius: 50%; margin: 0 auto 24px auto; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0ea5e9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path><line x1="9" y1="10" x2="15" y2="10"></line><line x1="9" y1="14" x2="13" y2="14"></line></svg>
</div>
<div style="font-size: 28px; font-weight: bold; color: #1f2937; letter-spacing: 0.5px;">文章收到新评论</div>
<p style="font-size: 16px; color: #6b7280; margin-top: 8px; line-height: 1.5;" th:text="|${subscriber.displayName} 你好：|"></p>
</div>
<!-- 主要内容区 - 对话模拟 -->
<div style="padding: 0 32px 32px 32px;" class="content-padding">
<!-- 对话窗口背景 -->
<div style="background-color: #f1f3f5; border-radius: 18px; padding: 24px;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!-- 评论者的气泡 (左侧) -->
<tr>
<td valign="top" style="width: 52px;">
<div style="width: 40px; height: 40px; border-radius: 50%; background-color: #3b82f6; color: white; font-size: 18px; font-weight: bold; text-align: center; line-height: 40px;" th:text="${#strings.substring(commenter, 0, 1)}">C</div>
</td>
<td valign="top">
<div style="color: #6b7280; font-size: 14px; margin-bottom: 4px;" th:text="${commenter}"></div>
<div style="display: inline-block; background-color: #ffffff; border-radius: 12px; border-top-left-radius: 0; padding: 12px 16px; color: #1f2937; font-size: 15px; line-height: 1.6; max-width: 95%;">
<div style="white-space: pre-wrap; word-wrap: break-word;" th:text="${content}"></div>
</div>
</td>
</tr>
</table>
</div>
<!-- 上下文卡片 (被评论的文章) -->
<div style="margin-top: 24px; padding: 16px; background: #f8fafc; border-radius: 12px; border: 1px solid #e5e7eb;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td valign="top" style="width: 32px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
</td>
<td valign="middle" style="line-height: 1.5;">
<span style="color: #6b7280; font-size: 14px;">评论于文章：</span>
<a th:href="${postUrl}" target="_blank" th:text="|《${postTitle}》|" style="color: #2563eb; font-weight: 500; text-decoration: none; font-size: 14px;"></a>
</td>
</tr>
</table>
</div>
<!-- 按钮 -->
<div style="text-align: center; margin: 36px 0 16px 0;">
<a th:href="${postUrl}" style="display: inline-block; background: #2563eb; color: #ffffff; font-size: 16px; font-weight: 600; padding: 14px 48px; border-radius: 999px; box-shadow: 0 4px 12px 0 rgba(37, 99, 235, 0.25); text-decoration: none; transition: all 0.2s ease;">
前往回复
</a>
</div>
</div>
<!-- 页脚 -->
<div style="text-align: center; padding: 24px 32px; border-top: 1px solid #e5e7eb; background-color: #f9fafb;" class="content-padding">
<div style="color: #9ca3af; font-size: 13px; line-height: 1.5;">
这是一封系统自动发送的邮件，请勿直接回复。<br>
© <span th:text="${#dates.format(#dates.createNow(), 'yyyy')}">2024</span> [(${site.title})]. All Rights Reserved.
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
我的自定义页面收到新评论
模板代码
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>新评论通知</title>
</head>
<body style="margin: 0; padding: 0; background-color: #f3f4f6; font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td style="padding: 40px 16px;">
<!--[if (gte mso 9)|(IE)]>
<table align="center" border="0" cellspacing="0" cellpadding="0" width="700">
<tr>
<td align="center" valign="top">
<![endif]-->
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.07); padding: 40px; margin: 0 auto; border-radius: 24px; position: relative; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #047857, #10b981, #34d399); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #ecfdf5, #d1fae5); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -70px; left: -70px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(135deg, #ecfdf5, #a7f3d0); opacity: 0.35; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 头部区域 -->
<div class="head" style="display: flex; align-items: center; margin-bottom: 32px;">
<!-- 评论图标 -->
<div style="background: linear-gradient(135deg, #047857, #10b981); width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 6px 12px -3px rgba(16, 185, 129, 0.3); flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div>
<p style="color: #8b92a5; font-size: 14px; margin: 0 0 6px 0; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 500;">新评论通知</p>
<p class="honorific" th:text="|${subscriber.displayName} 你好：|" style="font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
<!-- 主体内容 -->
<div class="body" style="background: linear-gradient(to bottom right, #fafbfc, #ffffff); padding: 35px; border-radius: 18px; border: 1px solid #eaecf0; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.05); margin-bottom: 30px;">
<!-- 评论者信息 -->
<div style="background-color: #ecfdf5; border-radius: 14px; padding: 18px; margin-bottom: 25px; display: flex; align-items: center; border-left: 4px solid #10b981;">
<div style="width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #047857, #10b981); display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0; overflow: hidden;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #065f46; font-size: 16px;">
<span th:text="${commenter}"></span> 评论了你的页面
</p>
<p style="margin: 0; color: #047857; font-size: 14px; line-height: 1.6;">
刚刚 · 通过网站评论系统
</p>
</div>
</div>
<!-- 页面信息卡片 -->
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px; margin-bottom: 25px;">
<div style="display: flex; align-items: center;">
<div style="width: 36px; height: 36px; border-radius: 8px; background-color: #f1f5f9; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#64748b" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
<polyline points="14 2 14 8 20 8"></polyline>
</svg>
</div>
<div>
<p style="margin: 0 0 2px 0; color: #64748b; font-size: 13px;">评论于页面</p>
<a th:href="${pageUrl}" target="_blank" th:text="|《${pageTitle}》|" style="margin: 0; color: #0f172a; font-size: 16px; font-weight: 600; text-decoration: none; transition: color 0.2s ease;" onmouseover="this.style.color='#10b981'" onmouseout="this.style.color='#0f172a'"></a>
</div>
</div>
</div>
<!-- 评论内容卡片 -->
<div>
<p style="color: #4b5563; margin-bottom: 15px; line-height: 1.7; font-size: 16px; font-weight: 500;">
以下是评论的具体内容：
</p>
<div style="background-color: #ffffff; border: 1px solid #e2e8f0; border-radius: 16px; padding: 25px; position: relative; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);">
<div style="position: absolute; top: -12px; left: 20px; width: 24px; height: 24px; background-color: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<pre class="content" th:text="${content}" style="font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; margin: 0; color: #374151; line-height: 1.7; font-size: 16px;"></pre>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 40px 0 15px 0;">
<a th:href="${pageUrl}" target="_blank" style="flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #047857, #10b981); color: white; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 12px -2px rgba(16, 185, 129, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(16, 185, 129, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(16, 185, 129, 0.25)';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
</svg>
回复评论
</a>
<a th:href="@{/admin/comments}" style="flex: 1; min-width: 160px; display: inline-flex; align-items: center; justify-content: center; background-color: #f8fafc; color: #475569; padding: 16px 20px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; border: 1px solid #e2e8f0;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 12px -4px rgba(0, 0, 0, 0.1)';" onmouseout="this.style.backgroundColor='#f8fafc';this.style.transform='translateY(0)';this.style.boxShadow='none';">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
<polyline points="13 2 13 9 20 9"></polyline>
</svg>
管理所有评论
</a>
</div>
</div>
<!-- 底部区域 -->
<div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
如需停止接收评论通知，请前往<a th:href="@{/notifications/settings}" style="color: #10b981; text-decoration: none;">通知设置</a>进行调整。
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;" th:text="|© ${#dates.format(#dates.createNow(), 'yyyy')} [(${site.title})]. 保留所有权利|">
</p>
</div>
</div>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</body>
</html>
邮箱验证
模板代码
<div style="width: 100%; max-width: 600px; background-color: #ffffff; box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.12), 0 10px 20px -8px rgba(0, 0, 0, 0.07); padding: 40px; margin: 0 auto; border-radius: 24px; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #4f46e5, #6366f1, #818cf8); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #eef2ff, #e0e7ff); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -70px; left: -70px; width: 250px; height: 250px; border-radius: 50%; background: linear-gradient(135deg, #eef2ff, #c7d2fe); opacity: 0.35; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 头部区域 -->
<div class="head" style="display: flex; align-items: center; margin-bottom: 32px;">
<!-- 验证图标 -->
<div style="background: linear-gradient(135deg, #4f46e5, #6366f1); width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 6px 12px -3px rgba(99, 102, 241, 0.3);">
<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
<polyline points="22 4 12 14.01 9 11.01"></polyline>
</svg>
</div>
<div>
<p style="color: #8b92a5; font-size: 14px; margin: 0 0 6px 0; letter-spacing: 0.7px; text-transform: uppercase; font-weight: 500;">邮箱验证</p>
<p class="honorific" th:text="|${username} 你好：|" style="font-size: 22px; font-weight: 600; color: #1f2937; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
<!-- 主体内容 -->
<div class="body" style="background: linear-gradient(to bottom right, #fafbfc, #ffffff); padding: 35px; border-radius: 18px; border: 1px solid #eaecf0; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.05); margin-bottom: 30px; text-align: center;">
<!-- 邮箱验证说明 -->
<div style="margin-bottom: 25px;">
<svg xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="margin: 0 auto 20px auto; display: block;">
<rect x="3" y="5" width="18" height="14" rx="2" ry="2"></rect>
<polyline points="3 7 12 13 21 7"></polyline>
</svg>
<p style="color: #4b5563; font-size: 16px; line-height: 1.6; margin: 0 0 15px 0;">
使用下面的动态验证码（OTP）验证您的电子邮件地址。
</p>
</div>
<!-- 验证码显示 -->
<div class="verify-code" style="background-color: #eef2ff; border-radius: 16px; padding: 25px 20px; margin: 30px auto; max-width: 320px; border: 2px dashed #c7d2fe;">
<p style="color: #6b7280; font-size: 13px; margin: 0 0 12px 0; text-transform: uppercase; letter-spacing: 1px; font-weight: 600;">您的验证码</p>
<div style="font-size: 36px; letter-spacing: 6px; font-weight: 700; color: #4f46e5; font-family: 'Courier New', monospace;">
<b th:text="${code}">123456</b>
</div>
<div style="margin-top: 15px; display: flex; align-items: center; justify-content: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<p style="margin: 0; color: #6b7280; font-size: 14px;" th:text="|有效期: ${expirationAtMinutes} 分钟|">有效期: 10 分钟</p>
</div>
</div>
<!-- 安全提示 -->
<div style="background-color: #f9fafb; border-radius: 12px; padding: 16px; text-align: left; border-left: 4px solid #6366f1; margin: 30px 0 20px 0;">
<div style="display: flex; align-items: flex-start;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 2px; flex-shrink: 0;">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<div>
<p style="margin: 0 0 8px 0; color: #4b5563; font-size: 15px; font-weight: 500;">安全提示</p>
<p style="margin: 0; color: #6b7280; font-size: 14px; line-height: 1.6;">
如果您没有尝试验证您的电子邮件地址，请忽略此电子邮件。请勿将验证码分享给任何人，包括自称客服的人员。
</p>
</div>
</div>
</div>
<!-- 操作提示 -->
<p style="color: #6b7280; font-size: 14px; line-height: 1.6; margin: 20px 0 0 0;">
请返回到验证页面输入此验证码以完成验证流程。
</p>
</div>
<!-- 帮助卡片 -->
<div style="background-color: #f9fafb; border-radius: 16px; padding: 25px; margin-bottom: 30px; border: 1px solid #e5e7eb;">
<h4 style="margin: 0 0 15px 0; color: #374151; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<circle cx="12" cy="12" r="10"></circle>
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
<line x1="12" y1="17" x2="12.01" y2="17"></line>
</svg>
需要帮助？
</h4>
<ul style="padding-left: 0; margin: 0; list-style: none;">
<li style="margin-bottom: 12px; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #e0e7ff; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<p style="margin: 0; color: #4b5563; font-size: 14px; line-height: 1.6;">
验证码输入框区分大小写，请准确输入
</p>
</li>
<li style="margin-bottom: 12px; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #e0e7ff; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<p style="margin: 0; color: #4b5563; font-size: 14px; line-height: 1.6;">
若验证码过期，可在验证页面重新获取
</p>
</li>
<li style="margin-bottom: 0; display: flex; align-items: flex-start;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #e0e7ff; display: flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#4f46e5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<p style="margin: 0; color: #4b5563; font-size: 14px; line-height: 1.6;">
遇到问题请联系我们的客户支持团队
</p>
</li>
</ul>
</div>
<!-- 底部区域 -->
<div style="text-align: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e5e7eb;">
<div style="display: flex; justify-content: center; margin-bottom: 20px;">
<a href="#help" style="margin: 0 10px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='#6366f1'">帮助中心</a>
<a href="#privacy" style="margin: 0 10px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='#6366f1'">隐私政策</a>
<a href="#contact" style="margin: 0 10px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#4f46e5'" onmouseout="this.style.color='#6366f1'">联系我们</a>
</div>
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
此邮件是系统自动发送的验证邮件，请勿回复
</p>
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
© 2023 Your Company. 保留所有权利
</p>
</div>
</div>
</div>