封面图加载中
附言：
困困鱼发新插件了，目前官方正式版本正在审核中（已审核通过），我在群中也是提前获取到了插件的安装包。经过2天的测试，我自己通过
提交订阅
提交订阅代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); padding: 32px; margin: 0 auto; border-radius: 20px; font-family: 'Segoe UI', Arial, sans-serif; border: 1px solid #e5e7eb;">
<!-- 彩色气球和礼花装饰 -->
<div style="position: absolute; top: 10px; left: 10px; right: 10px; opacity: 0.8; pointer-events: none; overflow: hidden; height: 60px;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="60" viewBox="0 0 700 60" fill="none">
<circle cx="50" cy="20" r="8" fill="#FCD34D" />
<circle cx="120" cy="15" r="6" fill="#60A5FA" />
<circle cx="180" cy="25" r="10" fill="#F87171" />
<circle cx="250" cy="10" r="7" fill="#34D399" />
<circle cx="320" cy="30" r="9" fill="#A78BFA" />
<circle cx="390" cy="20" r="8" fill="#F87171" />
<circle cx="460" cy="15" r="6" fill="#60A5FA" />
<circle cx="530" cy="25" r="10" fill="#FCD34D" />
<circle cx="600" cy="10" r="7" fill="#34D399" />
<circle cx="670" cy="30" r="9" fill="#A78BFA" />
<!-- 彩带 -->
<path d="M0,50 C100,30 200,60 300,40 C400,20 500,50 600,30 C650,20 700,40 750,30" stroke="#F87171" stroke-width="2" stroke-dasharray="4 4" />
<path d="M0,40 C100,60 200,40 300,60 C400,40 500,60 600,40 C650,30 700,50 750,40" stroke="#60A5FA" stroke-width="2" stroke-dasharray="4 4" />
</svg>
</div>
<div style="text-align: center; margin-bottom: 36px; position: relative;">
<!-- 快乐笑脸图标 -->
<div style="margin-bottom: 20px; animation: bounce 2s infinite alternate ease-in-out;">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#3B82F6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
</div>
<div style="display: inline-flex; align-items: center; justify-content: center; margin-bottom: 20px;">
<h1 style="font-size: 32px; font-weight: 700; color: #1a202c; margin: 0; letter-spacing: -0.5px;">确认订阅</h1>
</div>
<!-- 彩虹渐变分隔线 -->
<div style="height: 4px; width: 100px; background: linear-gradient(90deg, #F87171, #FBBF24, #34D399, #60A5FA, #A78BFA); margin: 0 auto; border-radius: 4px; animation: pulse 2s infinite alternate;"></div>
</div>
<div style="display: flex; flex-direction: column; gap: 28px;">
<div style="background: linear-gradient(135deg, #eff6ff, #f9fafb); padding: 32px; border-radius: 16px; border: 1px solid #dbeafe; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1); transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;" onmouseover="this.style.transform='translateY(-5px)';this.style.boxShadow='0 10px 15px -3px rgba(59, 130, 246, 0.15)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 6px -1px rgba(59, 130, 246, 0.1)';">
<!-- 星星装饰 -->
<div style="position: absolute; margin-top: -40px; margin-left: -15px;">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#FCD34D" stroke="#FCD34D" stroke-width="1">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
</div>
<h2 style="font-size: 22px; color: #2d3748; margin-bottom: 16px; line-height: 1.5; font-weight: 600;">亲爱的订阅者：</h2>
<p style="color: #4b5563; margin-bottom: 24px; line-height: 1.7; font-size: 16px;">
太棒了！感谢您订阅我的博客！🎉 为了确保您能及时收到最新的精彩文章和独家内容，请点击下面的按钮确认您的订阅：
</p>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 10px;">
<a th:href="${confirmUrl}" style="display: inline-flex; align-items: center; background: linear-gradient(to right, #3B82F6, #60a5fa); color: white; padding: 16px 36px; border-radius: 9999px; font-weight: 600; text-decoration: none; text-align: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1); position: relative; overflow: hidden;" onmouseover="this.style.transform='translateY(-3px) scale(1.03)';this.style.boxShadow='0 8px 15px -3px rgba(59, 130, 246, 0.4), 0 4px 6px -2px rgba(59, 130, 246, 0.2)';" onmouseout="this.style.transform='translateY(0) scale(1)';this.style.boxShadow='0 4px 6px -1px rgba(59, 130, 246, 0.3), 0 2px 4px -1px rgba(59, 130, 246, 0.1)';">
<!-- 按钮内闪光效果 -->
<span style="position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); animation: shine 2s infinite;"></span>
<span style="font-size: 18px;">确认订阅</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 20px; height: 20px; margin-left: 8px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
<!-- 快乐表情装饰 -->
<div style="display: flex; justify-content: space-around; margin-top: 30px; animation: float 3s infinite alternate ease-in-out;">
<span style="font-size: 24px;">🎉</span>
<span style="font-size: 24px;">🚀</span>
<span style="font-size: 24px;">✨</span>
<span style="font-size: 24px;">🌟</span>
<span style="font-size: 24px;">🎊</span>
</div>
</div>
<div style="background-color: #f0fdfa; padding: 20px; border-radius: 12px; border: 1px dashed #a7f3d0; margin-top: 10px; position: relative; overflow: hidden;">
<!-- 背景装饰 -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 10% 20%, rgba(167, 243, 208, 0.2) 0%, transparent 50%); pointer-events: none;"></div>
<p style="color: #059669; font-size: 15px; line-height: 1.6; margin: 0; position: relative; z-index: 1;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#10b981" style="width: 20px; height: 20px; display: inline; vertical-align: middle; margin-right: 6px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span style="vertical-align: middle;">确认后，您将开始接收我们的精选内容。每一期都是精心准备的惊喜！您可以随时取消订阅。</span>
</p>
</div>
</div>
<!-- 引用区域 -->
<div style="margin-top: 32px; padding: 20px; border-left: 4px solid #bfdbfe; background-color: #eff6ff; border-radius: 0 12px 12px 0;">
<p style="color: #3b82f6; font-style: italic; margin: 0; line-height: 1.6; font-size: 16px;">
"每一次订阅，都是一段新旅程的开始。我们将一起探索知识的海洋，分享成长的喜悦！"
</p>
</div>
<div style="text-align: center; display: flex; flex-direction: column; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #f3f4f6;">
<div>
<p style="color: #6b7280; font-size: 14px; text-align: center; margin: 0;">
© [(${site.title})]. 保留所有权利
</p>
<p style="color: #6b7280; font-size: 12px; text-align: center; margin-top: 8px;">
此邮件由系统自动发送，请勿直接回复
</p>
</div>
</div>
</div>
<style>
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes pulse {
0% { opacity: 0.7; }
100% { opacity: 1; }
}
@keyframes float {
0% { transform: translateY(0); }
100% { transform: translateY(-8px); }
}
@keyframes shine {
0% { left: -100%; }
100% { left: 100%; }
}
</style>订阅文章推送
订阅文章推送代码
<div style="width: 100%; max-width: 700px; background-color: white; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 15px -6px rgba(0, 0, 0, 0.03); padding: 40px 32px; margin: 0 auto; border-radius: 16px; border: 1px solid #f1f5f9; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden;">
<!-- 顶部装饰元素 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient(90deg, #0ea5e9, #38bdf8, #7dd3fc); z-index: 2;"></div>
<!-- 背景装饰元素 - 更加微妙 -->
<div style="position: absolute; top: -80px; right: -80px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 242, 254, 0.8), rgba(186, 230, 253, 0.4)); opacity: 0.4; z-index: 0;"></div>
<div style="position: absolute; bottom: -100px; left: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 242, 254, 0.6), rgba(186, 230, 253, 0.2)); opacity: 0.3; z-index: 0;"></div>
<!-- 标题部分 -->
<div style="text-align: center; margin-bottom: 36px; position: relative; z-index: 1;">
<div style="display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;">
<!-- 文章图标 -->
<div style="background: linear-gradient(135deg, #0ea5e9, #38bdf8); width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px -2px rgba(14, 165, 233, 0.3);">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white" style="width: 28px; height: 28px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
</svg>
</div>
</div>
<h1 style="font-size: 28px; font-weight: 700; color: #0c4a6e; margin: 0 0 8px 0; letter-spacing: -0.01em;">最新文章通知</h1>
<p style="color: #64748b; font-size: 16px; margin: 12px 0 0 0; max-width: 500px; margin-left: auto; margin-right: auto;">
我们刚刚发布了一篇新文章，精心为您准备，希望您喜欢！
</p>
</div>
<!-- 主要内容 -->
<div style="position: relative; z-index: 1; margin-bottom: 32px;">
<div style="background-color: #f8fafc; padding: 32px; border-radius: 14px; border: 1px solid #e2e8f0; box-shadow: 0 4px 16px -4px rgba(0, 0, 0, 0.05); transition: all 0.3s ease;">
<!-- 新内容标签 -->
<div style="display: inline-block; background-color: #0ea5e9; color: white; padding: 5px 12px; border-radius: 20px; font-size: 12px; font-weight: 600; margin-bottom: 16px;">
新文章
</div>
<div style="display: flex; align-items: center; margin-bottom: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#94a3b8" style="width: 16px; height: 16px; margin-right: 6px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
<span style="color: #94a3b8; font-size: 14px;">发布于 [[${postPublishTime}]]</span>
</div>
<h2 style="font-size: 24px; font-weight: 700; color: #0f172a; margin: 0 0 16px 0; line-height: 1.3;">[(${postTitle})]</h2>
<!-- 文章摘要 -->
<div style="position: relative; padding-left: 16px; margin-bottom: 24px; border-left: 3px solid #cbd5e1;">
<p style="color: #475569; line-height: 1.7; font-size: 16px; margin: 0;">
[(${postExcerpt})]
</p>
</div>
<!-- 文章信息和互动数据 -->
<div style="display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px;">
<div style="display: flex; align-items: center; background-color: #f1f5f9; padding: 6px 12px; border-radius: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#64748b" style="width: 16px; height: 16px; margin-right: 6px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
</svg>
<span style="color: #64748b; font-size: 14px;">作者: [(${postOwner})]</span>
</div>
<div style="display: flex; align-items: center; background-color: #f1f5f9; padding: 6px 12px; border-radius: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#64748b" style="width: 16px; height: 16px; margin-right: 6px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span style="color: #64748b; font-size: 14px;">约 5 分钟阅读</span>
</div>
</div>
<!-- 阅读按钮 -->
<a th:href="${postUrl}" style="display: inline-flex; align-items: center; background-color: #0ea5e9; color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);"
onmouseover="this.style.backgroundColor='#0284c7'; this.style.transform='translateY(-2px)'; this.style.boxShadow='0 6px 10px -2px rgba(14, 165, 233, 0.25)';"
onmouseout="this.style.backgroundColor='#0ea5e9'; this.style.transform='translateY(0)'; this.style.boxShadow='0 4px 6px -1px rgba(14, 165, 233, 0.2)';">
阅读全文
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px; margin-left: 8px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
</svg>
</a>
</div>
</div>
<!-- 推荐内容 -->
<div style="margin-bottom: 32px; position: relative; z-index: 1;">
<h3 style="font-size: 18px; color: #0f172a; margin: 0 0 16px 0; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#0ea5e9" style="width: 20px; height: 20px; margin-right: 8px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"></path>
</svg>
推荐阅读
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
<a href="https://kunkunyu.com/" style="text-decoration: none; color: inherit;">
<div style="background-color: white; padding: 16px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; transition: all 0.2s ease; height: 100%;"
onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 12px rgba(0, 0, 0, 0.07)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 6px rgba(0, 0, 0, 0.05)';">
<h4 style="font-size: 16px; margin: 0 0 8px 0; color: #0f172a;">困困鱼的博客</h4>
<p style="font-size: 14px; color: #64748b; margin: 0; line-height: 1.5;">一名喜欢摸鱼的前端开发者，分享技术与生活...</p>
</div>
</a>
<a href="https://www.thyuu.com/" style="text-decoration: none; color: inherit;">
<div style="background-color: white; padding: 16px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; transition: all 0.2s ease; height: 100%;"
onmouseover="this.style.transform='translateY(-4px)'; this.style.boxShadow='0 6px 12px rgba(0, 0, 0, 0.07)';"
onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 2px 6px rgba(0, 0, 0, 0.05)';">
<h4 style="font-size: 16px; margin: 0 0 8px 0; color: #0f172a;">风记星辰</h4>
<p style="font-size: 14px; color: #64748b; margin: 0; line-height: 1.5;">一名来自盛京的大叔，分享生活点滴与技术心得...</p>
</div>
</a>
</div>
</div>
<!-- 底部部分 -->
<div style="position: relative; z-index: 1; border-top: 1px solid #e2e8f0; padding-top: 24px; margin-top: 16px;">
<div style="text-align: center;">
<!-- 取消订阅按钮 -->
<div style="margin-bottom: 20px;">
<a th:href="${cancelUrl}" style="display: inline-flex; align-items: center; color: #64748b; font-size: 14px; text-decoration: none; padding: 8px 16px; border-radius: 6px; background-color: #f8fafc; border: 1px solid #e2e8f0; transition: all 0.2s ease;"
onmouseover="this.style.backgroundColor='#f1f5f9'; this.style.color='#475569';"
onmouseout="this.style.backgroundColor='#f8fafc'; this.style.color='#64748b';">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" style="width: 16px; height: 16px; margin-right: 6px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
</svg>
取消订阅
</a>
</div>
<!-- 页脚信息 -->
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px;">
<div style="width: 40px; height: 40px; border-radius: 8px; background-color: #f1f5f9; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="#64748b" style="width: 20px; height: 20px;">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
</svg>
</div>
<p style="color: #94a3b8; font-size: 14px; margin: 0;">
感谢您订阅我们的内容更新
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 8px 0 0 0;">
© [(${site.title})]. 保留所有权利
</p>
</div>
</div>
</div>
</div>订阅取消
订阅取消代码
<div style="width: 100%; max-width: 700px; background-color: #f8fafc; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); padding: 40px 32px; margin: 0 auto; border-radius: 12px; border: 1px solid #cbd5e1; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden;">
<!-- 严肃的顶部边框 -->
<div style="position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, #334155, #475569, #334155); opacity: 0.9;"></div>
<!-- 下雨的背景效果 - 增加悲伤氛围 -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; opacity: 0.03; overflow: hidden;">
<div style="position: absolute; top: -10%; left: 0; right: 0; bottom: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 800 800">
<g fill="none" stroke="#334155" stroke-width="1">
<path d="M50 0 L50 800" opacity="0.3"></path>
<path d="M150 0 L150 800" opacity="0.4"></path>
<path d="M250 0 L250 800" opacity="0.2"></path>
<path d="M350 0 L350 800" opacity="0.3"></path>
<path d="M450 0 L450 800" opacity="0.5"></path>
<path d="M550 0 L550 800" opacity="0.2"></path>
<path d="M650 0 L650 800" opacity="0.4"></path>
<path d="M750 0 L750 800" opacity="0.3"></path>
</g>
</svg>
</div>
</div>
<div style="text-align: center; margin-bottom: 36px; position: relative;">
<!-- 难过的图标组合 -->
<div style="display: flex; justify-content: center; margin-bottom: 24px;">
<div style="position: relative; width: 80px; height: 80px;">
<!-- 主要悲伤表情 -->
<div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#334155" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<path d="M16 16s-1.5-2-4-2-4 2-4 2"></path>
<line x1="9" y1="9" x2="9.01" y2="9"></line>
<line x1="15" y1="9" x2="15.01" y2="9"></line>
</svg>
</div>
</div>
</div>
<div style="display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px;">
<h1 style="font-size: 28px; font-weight: 700; color: #1e293b; margin: 0; letter-spacing: -0.5px;">订阅已终止</h1>
</div>
<!-- 严肃的分隔线 -->
<div style="height: 3px; width: 100px; background: linear-gradient(90deg, rgba(51, 65, 85, 0.2), rgba(51, 65, 85, 0.6), rgba(51, 65, 85, 0.2)); margin: 0 auto; border-radius: 1px;"></div>
</div>
<div style="display: flex; flex-direction: column; gap: 28px;">
<div style="background: linear-gradient(135deg, #f1f5f9, #f8fafc); padding: 36px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); position: relative;">
<!-- 严肃的左侧边框 -->
<div style="position: absolute; top: 20px; bottom: 20px; left: 0; width: 4px; background-color: #475569; border-radius: 0 2px 2px 0;"></div>
<h2 style="font-size: 20px; color: #334155; margin-bottom: 20px; line-height: 1.4; font-weight: 600; padding-left: 16px; border-left: 2px solid #94a3b8;">尊敬的前订阅者：</h2>
<p style="color: #475569; margin-bottom: 24px; line-height: 1.8; font-size: 16px; padding-left: 16px;">
我们遗憾地确认，您已终止与我们的订阅关系。这是一个令人沉重的时刻，我们深感失落。
</p>
<p style="color: #475569; margin-bottom: 24px; line-height: 1.8; font-size: 16px; padding-left: 16px;">
在您离开之际，我们不禁反思：是我们的内容未能满足您的期望，还是我们的更新频率有所不妥？无论如何，我们尊重您的决定，并感谢您曾给予的关注。
</p>
<div style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 20px; margin: 20px 0; position: relative;">
<div style="position: absolute; top: -12px; left: 24px; background-color: #f1f5f9; padding: 0 10px;">
<span style="font-size: 14px; color: #64748b; font-weight: 500;">严肃声明</span>
</div>
<p style="color: #334155; margin: 0; line-height: 1.7; font-size: 15px;">
根据我们的记录，您的订阅已于此刻正式终止。所有相关权益同时失效，您将不再收到我们的任何更新通知。
</p>
</div>
<div style="display: flex; align-items: center; justify-content: center; margin-top: 32px;">
<a th:href="${confirmUrl}" style="display: inline-flex; align-items: center; background: #334155; color: white; padding: 14px 32px; border-radius: 6px; font-weight: 500; text-decoration: none; text-align: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);" onmouseover="this.style.backgroundColor='#475569';" onmouseout="this.style.backgroundColor='#334155';">
<span>撤销终止决定</span>
</a>
</div>
</div>
</div>
<!-- 严肃的引用区域 -->
<div style="margin-top: 32px; padding: 24px; border-left: 4px solid #64748b; background-color: #f1f5f9; border-radius: 0 8px 8px 0; position: relative;">
<div style="position: absolute; top: 12px; left: -12px; background-color: #64748b; width: 20px; height: 20px; border-radius: 50%; display: flex; justify-content: center; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</svg>
</div>
<p style="color: #334155; font-style: italic; margin: 0; line-height: 1.6; font-size: 16px; font-weight: 500;">
"每一次离别都是一次深刻的反思。我们将汲取教训，提升内容质量，以期有朝一日能够重获您的信任。"
</p>
</div>
<!-- 难过的统计信息 -->
<div style="margin-top: 32px; background-color: #f1f5f9; padding: 20px; border-radius: 8px; border: 1px dashed #cbd5e1;">
<div style="display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; text-align: center;">
<div style="flex: 1; min-width: 120px;">
<div style="color: #64748b; font-size: 14px; margin-bottom: 6px;">订阅持续时间</div>
<div style="color: #334155; font-weight: 600; font-size: 18px;">已结束</div>
</div>
<div style="flex: 1; min-width: 120px; border-left: 1px solid #e2e8f0; border-right: 1px solid #e2e8f0; padding: 0 10px;">
<div style="color: #64748b; font-size: 14px; margin-bottom: 6px;">您错过的更新</div>
<div style="color: #334155; font-weight: 600; font-size: 18px;">未来全部</div>
</div>
<div style="flex: 1; min-width: 120px;">
<div style="color: #64748b; font-size: 14px; margin-bottom: 6px;">订阅状态</div>
<div style="color: #ef4444; font-weight: 600; font-size: 18px;">已终止</div>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 36px; border-top: 1px solid #e2e8f0; padding-top: 28px;">
<p style="color: #64748b; font-size: 14px; text-align: center; margin: 0; font-weight: 500;">
© [(${site.title})]. 所有权利保留
</p>
<p style="color: #94a3b8; font-size: 12px; text-align: center; margin-top: 8px;">
此为系统自动发送的终止通知，请勿回复
</p>
<!-- 难过的页脚装饰 -->
<div style="margin-top: 20px; opacity: 0.3;">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="20" viewBox="0 0 120 20" fill="none">
<path d="M60 0 L60 10 L50 20 L70 20 Z" fill="#64748b"></path>
</svg>
</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, #0891b2, #06b6d4, #22d3ee); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #ecfeff, #cffafe); 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, #0891b2, #06b6d4); 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(8, 145, 178, 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="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="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></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="|${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: #f0fdfa; border-radius: 14px; padding: 20px; margin-bottom: 30px; display: flex; align-items: center; border-left: 4px solid #0891b2;">
<div style="width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #0891b2, #06b6d4); 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="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="margin: 0 0 5px 0; font-weight: 600; color: #0e7490; font-size: 16px;" th:text="|${submitter}填写了你发布的《${templateDisplayName}》联系表单|">John Doe填写了你发布的《联系我们》联系表单</p>
<p style="margin: 0; color: #0891b2; font-size: 14px; line-height: 1.6;">
以下是提交的具体内容，您可以查看并及时回复。
</p>
</div>
</div>
<!-- 表单数据卡片 -->
<div style="background-color: #ffffff; border-radius: 14px; border: 1px solid #e2e8f0; overflow: hidden; margin-bottom: 25px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);">
<div style="background-color: #f8fafc; padding: 16px 20px; border-bottom: 1px solid #e2e8f0; 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;">
<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>
<h3 style="margin: 0; color: #334155; font-size: 16px; font-weight: 600;">表单提交详情</h3>
</div>
<div style="padding: 5px;">
<table style="width: 100%; border-collapse: collapse; margin: 0; overflow: hidden; font-size: 14px;">
<thead>
<tr style="background-color: #f8fafc;">
<th th:each="entry : ${entries}" th:text="|${entry.get('label')}|" style="padding: 14px 16px; text-align: left; color: #475569; font-weight: 600; border-bottom: 1px solid #e2e8f0;"></th>
</tr>
</thead>
<tbody>
<tr>
<td th:each="entry : ${entries}" th:text="|${entry.get('value')}|" style="padding: 14px 16px; text-align: left; color: #334155; border-bottom: 1px solid #f1f5f9; word-break: break-word;"></td>
</tr>
</tbody>
</table>
</div>
<div style="padding: 16px 20px; background-color: #f8fafc; border-top: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: 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" style="margin-right: 8px;">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span style="color: #64748b; font-size: 13px;">提交时间: 刚刚</span>
</div>
<div style="display: flex; align-items: 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" style="margin-right: 8px;">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
<span style="color: #64748b; font-size: 13px;" th:text="${submitter}">提交者邮箱</span>
</div>
</div>
</div>
<!-- 建议的后续操作 -->
<div style="margin: 30px 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;">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
建议的后续操作
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 16px; 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: 10px;">
<div style="width: 32px; height: 32px; border-radius: 8px; background-color: #e0f2fe; 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="#0891b2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
<polyline points="22,6 12,13 2,6"></polyline>
</svg>
</div>
<h4 style="margin: 0; font-size: 15px; color: #334155;">回复咨询</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
及时回复可以提高客户满意度，建议在24小时内联系提交者。
</p>
</div>
<div style="flex: 1; min-width: 200px; background-color: #f8fafc; padding: 16px; 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: 10px;">
<div style="width: 32px; height: 32px; border-radius: 8px; background-color: #e0f2fe; 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="#0891b2" 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>
<h4 style="margin: 0; font-size: 15px; color: #334155;">记录跟进</h4>
</div>
<p style="margin: 0; font-size: 13px; color: #64748b; line-height: 1.5;">
在CRM系统中记录此次提交，安排后续跟进计划。
</p>
</div>
</div>
</div>
<!-- 查看按钮 -->
<div style="margin: 30px 0 15px 0; text-align: center;">
<a th:href="${entryUrl}" target="_blank" style="display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #0891b2, #06b6d4); color: white; padding: 16px 28px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 6px 12px -2px rgba(8, 145, 178, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(8, 145, 178, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(8, 145, 178, 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="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
<circle cx="12" cy="12" r="3"></circle>
</svg>
查看完整条目
</a>
</div>
<p style="text-align: center; color: #64748b; font-size: 13px; margin: 10px 0 0 0;">
或复制链接: <a th:href="${entryUrl}" target="_blank" style="color: #0891b2; text-decoration: none; word-break: break-all;" th:text="${entryUrl}">https://example.com/entries/123</a>
</p>
</div>
<!-- 数据统计卡片 -->
<div style="background-color: #f8fafc; border-radius: 16px; padding: 20px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
<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="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
</svg>
表单统计
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #0891b2; margin-bottom: 5px;">1</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">今日提交</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #0891b2; margin-bottom: 5px;">5</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">本周提交</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #0891b2; margin-bottom: 5px;">85%</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">完成率</p>
</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="#forms" style="margin: 0 10px; color: #0891b2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0e7490'" onmouseout="this.style.color='#0891b2'">管理表单</a>
<a href="#settings" style="margin: 0 10px; color: #0891b2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0e7490'" onmouseout="this.style.color='#0891b2'">通知设置</a>
<a href="#help" style="margin: 0 10px; color: #0891b2; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#0e7490'" onmouseout="this.style.color='#0891b2'">帮助中心</a>
</div>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
如需停止接收此类通知，请前往<a href="#settings" style="color: #0891b2; text-decoration: none;">通知设置</a>进行调整
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
© 2023 Your Company. 保留所有权利
</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, #6d28d9, #8b5cf6, #a78bfa); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #f5f3ff, #ede9fe); 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, #f5f3ff, #ddd6fe); 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, #6d28d9, #8b5cf6); 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(109, 40, 217, 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="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></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: #f5f3ff; border-radius: 14px; padding: 18px; margin-bottom: 25px; display: flex; align-items: center; border-left: 4px solid #8b5cf6;">
<div style="width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, #7c3aed, #8b5cf6); 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="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #5b21b6; font-size: 15px;">欢迎加入我们！</p>
<p style="margin: 0; color: #7c3aed; 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: 25px; margin: 30px 0; position: relative; overflow: hidden;">
<!-- 安全图标背景 -->
<div style="position: absolute; top: -15px; right: -15px; opacity: 0.05; transform: rotate(15deg);">
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 24 24" fill="#6d28d9" stroke="none">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
</div>
<div style="position: relative; z-index: 1;">
<h3 style="margin: 0 0 15px 0; color: #1f2937; font-size: 18px; font-weight: 600; display: flex; align-items: center;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6d28d9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<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>
你的临时登录密码
</h3>
<div style="background-color: white; border: 1px dashed #cbd5e1; border-radius: 10px; padding: 16px; margin-bottom: 15px; position: relative;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div class="order-summary">
<p style="margin: 0; font-family: 'Courier New', monospace; font-size: 20px; font-weight: 600; color: #334155; letter-spacing: 1px;" th:text="${password}"></p>
</div>
<button onclick="copyPassword()" id="copyPasswordBtn" style="background-color: #ede9fe; border: none; color: #6d28d9; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; cursor: pointer; display: flex; align-items: center; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#ddd6fe'" onmouseout="this.style.backgroundColor='#ede9fe'">
<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>
<!-- 安全警告 -->
<div style="display: flex; align-items: flex-start; background-color: #fff1f2; padding: 12px; border-radius: 8px; border-left: 3px solid #e11d48;">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#e11d48" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px; margin-top: 2px; flex-shrink: 0;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p style="margin: 0; color: #9f1239; font-size: 14px; line-height: 1.5;">
为了账号安全，请尽快修改此临时密码。请勿将密码分享给他人。
</p>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 0 20px 0;">
<a href="#change-password" style="flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #6d28d9, #8b5cf6); 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(109, 40, 217, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(109, 40, 217, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(109, 40, 217, 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="#account-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="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>
账户设置
</a>
</div>
<p style="color: #4b5563; line-height: 1.7; font-size: 16px; margin-top: 25px;">
为了提高账户安全性，我们建议你：
</p>
<!-- 安全建议 -->
<ul style="padding-left: 0; margin: 20px 0;">
<li style="list-style: none; margin-bottom: 12px; display: flex; align-items: flex-start;">
<div style="width: 22px; height: 22px; border-radius: 50%; background-color: #ede9fe; 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="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<span style="color: #4b5563; font-size: 15px;">尽快修改为强密码（包含大小写字母、数字和特殊符号）</span>
</li>
<li style="list-style: none; margin-bottom: 12px; display: flex; align-items: flex-start;">
<div style="width: 22px; height: 22px; border-radius: 50%; background-color: #ede9fe; 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="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<span style="color: #4b5563; font-size: 15px;">开启双重验证，增加账户安全性</span>
</li>
<li style="list-style: none; margin-bottom: 12px; display: flex; align-items: flex-start;">
<div style="width: 22px; height: 22px; border-radius: 50%; background-color: #ede9fe; 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="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="20 6 9 17 4 12"></polyline>
</svg>
</div>
<span style="color: #4b5563; font-size: 15px;">定期检查账户活动，确保安全</span>
</li>
</ul>
<!-- 账户信息卡片 -->
<div style="background-color: #f8fafc; border-radius: 14px; padding: 20px; margin-top: 30px; border: 1px solid #e2e8f0;">
<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;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
账户信息
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 200px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0;">
<p style="margin: 0 0 5px 0; font-size: 13px; color: #64748b;">登录方式</p>
<div style="display: flex; align-items: center;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #f5f3ff; display: flex; align-items: center; justify-content: center; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
</svg>
</div>
<p style="margin: 0; font-weight: 600; color: #334155; font-size: 15px;">社交账号登录</p>
</div>
</div>
<div style="flex: 1; min-width: 200px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0;">
<p style="margin: 0 0 5px 0; font-size: 13px; color: #64748b;">注册时间</p>
<div style="display: flex; align-items: center;">
<div style="width: 24px; height: 24px; border-radius: 50%; background-color: #f5f3ff; display: flex; align-items: center; justify-content: center; margin-right: 8px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#7c3aed" 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>
<p style="margin: 0; font-weight: 600; color: #334155; font-size: 15px;">刚刚</p>
</div>
</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="#account" style="margin: 0 10px; color: #7c3aed; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#6d28d9'" onmouseout="this.style.color='#7c3aed'">账户设置</a>
<a href="#security" style="margin: 0 10px; color: #7c3aed; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#6d28d9'" onmouseout="this.style.color='#7c3aed'">安全中心</a>
<a href="#help" style="margin: 0 10px; color: #7c3aed; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#6d28d9'" onmouseout="this.style.color='#7c3aed'">帮助中心</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 copyPassword() {
// 获取密码文本
const passwordElement = document.querySelector('.order-summary p');
const password = passwordElement.textContent || passwordElement.innerText;
// 创建一个临时textarea元素来复制文本
const textarea = document.createElement('textarea');
textarea.value = password;
textarea.style.position = 'fixed'; // 防止滚动到底部
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
try {
// 执行复制命令
const successful = document.execCommand('copy');
// 更新按钮文本和样式以提供反馈
const copyBtn = document.getElementById('copyPasswordBtn');
const copyBtnText = document.getElementById('copyBtnText');
if (successful) {
copyBtnText.textContent = '已复制!';
copyBtn.style.backgroundColor = '#c4b5fd';
// 2秒后恢复原样
setTimeout(() => {
copyBtnText.textContent = '复制密码';
copyBtn.style.backgroundColor = '#ede9fe';
}, 2000);
} else {
copyBtnText.textContent = '复制失败';
}
} catch (err) {
console.error('复制失败:', err);
alert('复制失败，请手动复制密码');
}
// 清理临时元素
document.body.removeChild(textarea);
}
</script>定时备份同步失败
定时备份同步失败代码
<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, #dc2626, #ef4444, #f87171); z-index: 2;"></div>
<!-- 背景装饰元素 -->
<div style="position: absolute; top: -60px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: linear-gradient(135deg, #fee2e2, #fecaca); 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, #fee2e2, #fca5a5); 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, #dc2626, #ef4444); 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(239, 68, 68, 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="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>
<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: #fff5f5; border-radius: 14px; padding: 20px; margin-bottom: 30px; display: flex; align-items: flex-start; border-left: 4px solid #ef4444;">
<div style="width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(135deg, #dc2626, #ef4444); 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">
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
<line x1="6" y1="6" x2="6.01" y2="6"></line>
<line x1="6" y1="18" x2="6.01" y2="18"></line>
</svg>
</div>
<div>
<p style="margin: 0 0 5px 0; font-weight: 600; color: #b91c1c; font-size: 16px;">备份同步任务执行失败</p>
<p style="margin: 0; color: #ef4444; font-size: 14px; line-height: 1.6;">
很遗憾的通知你，站点的定时备份同步任务执行失败了。需要立即处理以确保数据安全。
</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;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<h3 style="margin: 0; color: #334155; font-size: 16px; font-weight: 600;">失败详情</h3>
</div>
<div style="padding: 20px;">
<!-- 失败信息列表 -->
<div style="background-color: #f9fafb; border-radius: 12px; overflow: hidden; margin-bottom: 15px;">
<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">
<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 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="${syncName}">站点每日备份</p>
</div>
</div>
<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="${startTimestamp}">2023-04-15 03:30:00</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="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="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: #b91c1c;" th:text="${failureMessage}">远程存储连接超时，无法完成数据传输</p>
</div>
</div>
</div>
<div style="display: flex; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p style="margin: 0; font-size: 14px; color: #64748b; line-height: 1.5;">
<span style="color: #ef4444; font-weight: 500;">警告：</span> 备份失败可能会导致数据丢失风险，请尽快解决此问题。
</p>
</div>
</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;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
故障排查建议
</h4>
<div style="background-color: #f8fafc; border-radius: 14px; padding: 20px; border: 1px solid #e2e8f0; margin-bottom: 20px;">
<p style="margin: 0 0 15px 0; color: #4b5563; line-height: 1.7; font-size: 15px;">
请你尽快检查备份脚本以及备份目录，定位问题所在。建议检查以下几点:
</p>
<div style="margin-bottom: 12px; 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; margin-top: 2px; flex-shrink: 0;">
<span style="color: #2563eb; font-weight: bold; font-size: 14px;">1</span>
</div>
<p style="margin: 0; color: #4b5563; line-height: 1.7; font-size: 15px;">
检查远程同步的存储策略和分组配置是否存在
</p>
</div>
<div style="margin-bottom: 12px; 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; margin-top: 2px; flex-shrink: 0;">
<span style="color: #2563eb; font-weight: bold; font-size: 14px;">2</span>
</div>
<p style="margin: 0; color: #4b5563; line-height: 1.7; font-size: 15px;">
确认远程同步所用的存储策略容量是否足够
</p>
</div>
<div style="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; margin-top: 2px; flex-shrink: 0;">
<span style="color: #2563eb; font-weight: bold; font-size: 14px;">3</span>
</div>
<p style="margin: 0; color: #4b5563; line-height: 1.7; font-size: 15px;">
判断网络连接是否正常，影响备份数据传输
</p>
</div>
</div>
<div style="background-color: #fffbeb; border-radius: 14px; padding: 20px; border-left: 4px solid #f59e0b; margin-bottom: 20px;">
<div style="display: flex; align-items: flex-start;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 12px; flex-shrink: 0;">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="8" x2="12" y2="12"></line>
<line x1="12" y1="16" x2="12.01" y2="16"></line>
</svg>
<p style="margin: 0; color: #92400e; line-height: 1.7; font-size: 15px;">
请处理完毕后更新备份配置，并重新执行备份，以确保网站数据能定期正常备份。
</p>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 0 15px 0;">
<a th:href="${syncListUrl}" target="_blank" style="flex: 1; min-width: 200px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #dc2626, #ef4444); 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(239, 68, 68, 0.25);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 8px 16px -2px rgba(239, 68, 68, 0.35)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 6px 12px -2px rgba(239, 68, 68, 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;">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
查看同步任务列表
</a>
<a href="#backup-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 20h9"></path>
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"></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="M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3"></path>
</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: #e0f2fe; 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="#0ea5e9" 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: #e0f2fe; 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="#0ea5e9" 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: #e0f2fe; 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="#0ea5e9" 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="#dashboard" style="margin: 0 10px; color: #ef4444; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#b91c1c'" onmouseout="this.style.color='#ef4444'">系统仪表盘</a>
<a href="#backup" style="margin: 0 10px; color: #ef4444; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#b91c1c'" onmouseout="this.style.color='#ef4444'">备份管理</a>
<a href="#help" style="margin: 0 10px; color: #ef4444; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#b91c1c'" onmouseout="this.style.color='#ef4444'">帮助文档</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>我发布的瞬间收到新评论
我发布的瞬间收到新评论代码
<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} 评论了你的瞬间|">Sarah 评论了你的瞬间</p>
<p style="margin: 0; color: #db2777; font-size: 14px; line-height: 1.6;">
刚刚 · 通过手机应用
</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 style="display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #e5e7eb;">
<div style="display: flex; align-items: center; color: #6b7280; font-size: 13px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span>12 赞</span>
</div>
<div style="display: flex; align-items: center; color: #6b7280; font-size: 13px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
<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>
<span>5 评论</span>
</div>
<div style="display: flex; align-items: center; color: #6b7280; font-size: 13px;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 6px;">
<circle cx="18" cy="5" r="3"></circle>
<circle cx="6" cy="12" r="3"></circle>
<circle cx="18" cy="19" r="3"></circle>
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
</svg>
<span>3 分享</span>
</div>
</div>
</div>
</div>
<!-- 评论内容卡片 -->
<div style="margin-bottom: 25px;">
<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 #e5e7eb; border-radius: 16px; padding: 20px; margin-bottom: 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 style="display: flex; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f3f4f6;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" 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>
<span style="color: #9ca3af; font-size: 13px;">刚刚</span>
</div>
</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 href="#" 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;">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
查看所有评论
</a>
</div>
<!-- 快速回复 -->
<div style="background-color: #f9fafb; border-radius: 14px; padding: 20px; margin-top: 25px; border: 1px dashed #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="#4b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<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>
快速回复选项
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<button style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f3f4f6';this.style.borderColor='#d1d5db';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e5e7eb';">
谢谢你的评论！
</button>
<button style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f3f4f6';this.style.borderColor='#d1d5db';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e5e7eb';">
很高兴你喜欢！
</button>
<button style="background-color: #ffffff; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f3f4f6';this.style.borderColor='#d1d5db';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e5e7eb';">
期待你的更多想法
</button>
</div>
</div>
</div>
<!-- 互动统计卡片 -->
<div style="background-color: #f9fafb; border-radius: 16px; padding: 20px; 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="#4b5563" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
</svg>
互动统计
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e5e7eb; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #ec4899; margin-bottom: 5px;">5</div>
<p style="margin: 0; color: #6b7280; font-size: 13px;">今日评论</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e5e7eb; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #ec4899; margin-bottom: 5px;">12</div>
<p style="margin: 0; color: #6b7280; font-size: 13px;">今日点赞</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e5e7eb; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #ec4899; margin-bottom: 5px;">3</div>
<p style="margin: 0; color: #6b7280; font-size: 13px;">今日分享</p>
</div>
</div>
</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="#profile" style="margin: 0 10px; color: #ec4899; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#be185d'" onmouseout="this.style.color='#ec4899'">我的主页</a>
<a href="#notifications" style="margin: 0 10px; color: #ec4899; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#be185d'" onmouseout="this.style.color='#ec4899'">通知设置</a>
<a href="#help" style="margin: 0 10px; color: #ec4899; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#be185d'" onmouseout="this.style.color='#ec4899'">帮助中心</a>
</div>
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
如需停止接收评论通知，请前往<a href="#settings" style="color: #ec4899; text-decoration: none;">通知设置</a>进行调整
</p>
<p style="color: #9ca3af; font-size: 13px; margin: 5px 0;">
© 2023 Your Company. 保留所有权利
</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, #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>有人回复了我
有人回复了我代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 15px -6px rgba(0, 0, 0, 0.05); padding: 35px; margin: 0 auto; border-radius: 16px; font-family: 'Segoe UI', Arial, sans-serif; position: relative; overflow: hidden;">
<!-- 装饰性背景元素 -->
<div style="position: absolute; top: -30px; right: -30px; width: 160px; height: 160px; border-radius: 50%; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); opacity: 0.6; z-index: 0;"></div>
<div style="position: absolute; bottom: -40px; left: -40px; width: 180px; height: 180px; border-radius: 50%; background: linear-gradient(135deg, #f0f7ff, #e0f7fa); opacity: 0.5; z-index: 0;"></div>
<!-- 通知内容 -->
<div class="notification-content" style="position: relative; z-index: 1;">
<!-- 顶部装饰条 -->
<div style="height: 5px; width: 100%; background: linear-gradient(90deg, #0ea5e9, #38bdf8, #7dd3fc); border-radius: 10px; margin-bottom: 25px;"></div>
<!-- 头部问候 -->
<div class="head" style="margin-bottom: 25px; display: flex; align-items: center;">
<!-- 通知图标 -->
<div style="background-color: #e0f2fe; width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-right: 15px; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#0284c7" 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>
<p class="honorific" th:text="|${subscriber.displayName} 你好：|" style="font-size: 20px; font-weight: 600; color: #0f172a; margin: 0;"></p>
</div>
<!-- 通知主体 -->
<div class="body" style="background: linear-gradient(to right, #f8fafc, #f1f5f9); padding: 25px; border-radius: 14px; border-left: 4px solid #0ea5e9; margin-bottom: 25px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);">
<p style="color: #334155; font-size: 16px; line-height: 1.7; margin-top: 0; margin-bottom: 15px;">
<span style="font-weight: 600; color: #0284c7;" th:text="${replier}"></span> 在评论
<a th:href="${commentSubjectUrl}" target="_blank" th:text="|”${isQuoteReply ? quoteContent : commentContent}”|" ></a>
<span>中回复了你，以下是回复的具体内容：</span>
</p>
<!-- 回复内容 -->
<div style="position: relative; margin-top: 20px;">
<!-- 装饰性引号 -->
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" fill="#cbd5e1" style="position: absolute; top: -15px; left: -10px; opacity: 0.5;">
<path d="M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z"/>
</svg>
<pre class="content" th:text="${content}" style="background-color: #ffffff; padding: 20px; border-radius: 10px; font-family: inherit; white-space: pre-wrap; word-wrap: break-word; color: #475569; font-size: 15px; line-height: 1.6; margin: 0; border: 1px solid #e2e8f0; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);"></pre>
</div>
</div>
<!-- 鼓励回复区域 -->
<div style="background-color: #f0f9ff; padding: 20px; border-radius: 12px; margin-top: 25px; border: 1px dashed #bae6fd; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#e0f2fe';this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 12px -3px rgba(14, 165, 233, 0.15)';" onmouseout="this.style.backgroundColor='#f0f9ff';this.style.transform='translateY(0)';this.style.boxShadow='none';">
<div style="display: flex; align-items: center; margin-bottom: 15px;">
<div style="background-color: #bae6fd; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
<span style="font-size: 18px;">💬</span>
</div>
<h3 style="margin: 0; color: #0c4a6e; font-size: 17px; font-weight: 600;">期待你的回复</h3>
</div>
<p style="color: #0369a1; font-size: 15px; line-height: 1.6; margin: 0 0 15px 0;">
精彩的对话正在继续！点击下方按钮立即查看并回复这条评论，分享你的想法。
</p>
<div style="text-align: center;">
<a th:href="${commentSubjectUrl}" target="_blank" style="display: inline-flex; align-items: center; background: linear-gradient(to right, #0284c7, #0ea5e9); color: white; padding: 12px 24px; border-radius: 9999px; font-weight: 600; text-decoration: none; font-size: 15px; transition: all 0.3s ease; box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3);" onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 6px 10px -2px rgba(14, 165, 233, 0.4)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 6px -1px rgba(14, 165, 233, 0.3)';">
立即回复
<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-left: 8px;">
<path d="M15 15l6-6m0 0l-6-6m6 6H3"></path>
</svg>
</a>
</div>
</div>
<!-- 互动提示 -->
<div style="display: flex; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #e2e8f0;">
<div style="display: flex; margin-right: 15px;">
<div style="width: 30px; height: 30px; background-color: #dbeafe; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 3; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);">
<span style="font-size: 14px;">🚀</span>
</div>
<div style="width: 30px; height: 30px; background-color: #c7d2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; margin-left: -10px; box-shadow: 0 2px 4px rgba(79, 70, 229, 0.2);">
<span style="font-size: 14px;">💡</span>
</div>
<div style="width: 30px; height: 30px; background-color: #bfdbfe; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; margin-left: -10px; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.2);">
<span style="font-size: 14px;">✨</span>
</div>
</div>
<p style="color: #64748b; font-size: 14px; margin: 0;">
积极参与讨论，让思想的火花继续闪耀！
</p>
</div>
<!-- 底部信息 -->
<div style="text-align: center; margin-top: 30px; font-size: 13px; color: #94a3b8;">
<p style="margin: 5px 0;">此邮件由系统自动发送，请勿直接回复</p>
<p style="margin: 5px 0;">如需调整通知设置，请前往个人中心进行修改</p>
</div>
</div>
</div>我的文章收到新评论
我的文章收到新评论代码
<div style="width: 100%; max-width: 700px; background-color: #ffffff; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); padding: 0; margin: 0 auto; border-radius: 20px; font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; overflow: hidden; border: 1px solid #f0f2f5;">
<!-- 顶部横幅 -->
<div style="background: linear-gradient(120deg, #4338ca, #6366f1, #818cf8); padding: 35px 40px; position: relative; overflow: hidden;">
<!-- 装饰元素 -->
<div style="position: absolute; top: -20px; right: -20px; width: 140px; height: 140px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);"></div>
<div style="position: absolute; bottom: -40px; left: -20px; width: 180px; height: 180px; border-radius: 50%; background: rgba(255, 255, 255, 0.08);"></div>
<div style="position: relative; z-index: 2; display: flex; align-items: center;">
<div style="width: 56px; height: 56px; border-radius: 16px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; margin-right: 20px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);">
<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: rgba(255, 255, 255, 0.9); font-size: 15px; margin: 0 0 6px 0; letter-spacing: 0.5px; font-weight: 500;">新评论通知</p>
<p class="honorific" th:text="|${subscriber.displayName} 你好：|" style="font-size: 24px; font-weight: 700; color: white; margin: 0; letter-spacing: -0.3px;"></p>
</div>
</div>
</div>
<!-- 主体内容 -->
<div style="padding: 40px;">
<!-- 通知简介 -->
<p style="color: #4b5563; line-height: 1.7; font-size: 17px; margin: 0 0 30px 0; font-weight: 400;">
您的文章收到了新的评论，以下是详细信息：
</p>
<!-- 文章信息卡片 -->
<div style="background-color: #f9fafb; border: 1px solid #e5e7eb; border-radius: 16px; padding: 20px; margin-bottom: 30px; transition: transform 0.2s ease, box-shadow 0.2s ease; position: relative; overflow: hidden;">
<!-- 背景装饰 -->
<div style="position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: linear-gradient(135deg, #e0e7ff, #c7d2fe); opacity: 0.3;"></div>
<div style="position: relative; display: flex; align-items: center;">
<div style="width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, #4338ca, #6366f1); display: flex; align-items: center; justify-content: center; margin-right: 16px; flex-shrink: 0; box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);">
<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="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
</div>
<div style="overflow: hidden; flex: 1;">
<p style="margin: 0 0 5px 0; font-size: 14px; color: #6b7280; font-weight: 500;">您的文章</p>
<a th:href="${postUrl}" target="_blank" th:text="|《${postTitle}》|" style="color: #4338ca; text-decoration: none; font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin: 0;"></a>
</div>
<div style="margin-left: 15px; flex-shrink: 0;">
<div style="display: flex; align-items: center; background-color: #eef2ff; padding: 6px 12px; border-radius: 20px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#4338ca" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
<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>
<span style="color: #4338ca; font-size: 13px; font-weight: 600;">新评论</span>
</div>
</div>
</div>
</div>
<!-- 评论内容区域 -->
<div style="margin-bottom: 35px;">
<!-- 评论者信息 -->
<div style="display: flex; align-items: center; margin-bottom: 16px;">
<div style="width: 44px; height: 44px; border-radius: 50%; background-color: #f3f4f6; overflow: hidden; margin-right: 14px; display: flex; align-items: center; justify-content: center; border: 2px solid #e5e7eb;">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#6b7280" 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 2px 0; font-weight: 600; color: #1f2937; font-size: 16px;" th:text="${commenter}">评论用户名</p>
<p style="margin: 0; color: #6b7280; font-size: 14px;">刚刚发表评论</p>
</div>
</div>
<!-- 评论内容卡片 -->
<div style="background-color: #ffffff; padding: 25px 30px; border-radius: 16px; border: 1px solid #e5e7eb; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04); position: relative; margin-left: 22px; margin-bottom: 10px;">
<!-- 连接线 -->
<div style="position: absolute; left: -22px; top: 0px; width: 22px; height: 30px; border-bottom: 2px solid #e5e7eb; border-left: 2px solid #e5e7eb; border-bottom-left-radius: 12px;"></div>
<!-- 引用标记 -->
<div style="position: absolute; top: -10px; left: 30px; width: 24px; height: 24px; background-color: #6366f1; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 5px rgba(99, 102, 241, 0.2);">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" 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: inherit; white-space: pre-wrap; word-wrap: break-word; color: #374151; font-size: 16px; line-height: 1.8; margin: 0; padding: 0;"></pre>
</div>
<!-- 评论时间和标签 -->
<div style="display: flex; align-items: center; margin-left: 22px; margin-bottom: 10px;">
<div style="display: flex; align-items: center; background-color: #f3f4f6; padding: 6px 12px; border-radius: 20px; margin-right: 10px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span style="color: #6b7280; font-size: 13px;">刚刚</span>
</div>
<div style="display: flex; align-items: center; background-color: #f3f4f6; padding: 6px 12px; border-radius: 20px;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 5px;">
<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>
<span style="color: #6b7280; font-size: 13px;">待回复</span>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; gap: 16px; margin-bottom: 35px;">
<a th:href="${postUrl}" target="_blank" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(to right, #4338ca, #6366f1); color: white; padding: 16px; border-radius: 14px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);" onmouseover="this.style.transform='translateY(-3px)';this.style.boxShadow='0 6px 16px rgba(99, 102, 241, 0.3)';" onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='0 4px 12px rgba(99, 102, 241, 0.2)';">
<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="${postUrl}" target="_blank" style="flex: 1; display: inline-flex; align-items: center; justify-content: center; background-color: #f9fafb; color: #4b5563; padding: 16px; border-radius: 14px; font-weight: 600; text-decoration: none; border: 1px solid #e5e7eb; transition: all 0.3s ease;" onmouseover="this.style.backgroundColor='#f3f4f6';this.style.transform='translateY(-3px)';this.style.boxShadow='0 4px 12px rgba(0, 0, 0, 0.08)';" 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="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"></path>
</svg>
查看文章
</a>
</div>
<!-- 统计卡片 -->
<div style="background: linear-gradient(to right, #f9fafb, #f3f4f6); border-radius: 16px; padding: 25px; margin-bottom: 35px; border: 1px solid #e5e7eb;">
<h4 style="margin: 0 0 20px 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="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 10px;">
<path d="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
</svg>
文章互动概览
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 120px; background-color: white; padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);">
<div style="font-size: 24px; font-weight: 700; color: #6366f1; margin-bottom: 5px;">8</div>
<p style="margin: 0; color: #6b7280; font-size: 14px;">评论总数</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);">
<div style="font-size: 24px; font-weight: 700; color: #6366f1; margin-bottom: 5px;">245</div>
<p style="margin: 0; color: #6b7280; font-size: 14px;">阅读次数</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 16px; border-radius: 12px; border: 1px solid #e5e7eb; text-align: center; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);">
<div style="font-size: 24px; font-weight: 700; color: #6366f1; margin-bottom: 5px;">18</div>
<p style="margin: 0; color: #6b7280; font-size: 14px;">点赞数</p>
</div>
</div>
</div>
<!-- 提示卡片 -->
<div style="background-color: #eef2ff; padding: 25px; border-radius: 16px; border-left: 4px solid #6366f1; margin-bottom: 35px; box-shadow: 0 2px 5px rgba(99, 102, 241, 0.08);">
<div style="display: flex; align-items: flex-start;">
<div style="width: 40px; height: 40px; border-radius: 10px; background-color: rgba(99, 102, 241, 0.15); display: flex; align-items: center; justify-content: center; margin-right: 16px; flex-shrink: 0;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="10"></circle>
<line x1="12" y1="16" x2="12" y2="12"></line>
<line x1="12" y1="8" x2="12.01" y2="8"></line>
</svg>
</div>
<div>
<p style="margin: 0 0 8px 0; font-weight: 600; color: #4338ca; font-size: 16px;">互动小贴士</p>
<p style="margin: 0; color: #4b5563; font-size: 15px; line-height: 1.7;">
及时回复评论可以提高读者互动率和忠诚度。研究表明，博主回复评论的文章获得的阅读量平均高出30%，并能显著提升读者的回访率。
</p>
</div>
</div>
</div>
<!-- 快速回复模板 -->
<div style="background-color: #f9fafb; border-radius: 16px; padding: 25px; margin-bottom: 35px; border: 1px solid #e5e7eb;">
<h4 style="margin: 0 0 16px 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: 10px;">
<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>
快速回复模板
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<div style="background-color: white; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
感谢您的评论和支持！
</div>
<div style="background-color: white; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
您提出的观点非常有见地！
</div>
<div style="background-color: white; border: 1px solid #e5e7eb; color: #4b5563; padding: 10px 16px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);">
已更新文章以回答您的问题。
</div>
</div>
</div>
<!-- 页脚 -->
<div style="margin-top: 40px; padding-top: 25px; border-top: 1px solid #e5e7eb; text-align: center;">
<div style="display: flex; justify-content: center; margin-bottom: 20px;">
<a href="#dashboard" style="margin: 0 12px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;">仪表盘</a>
<a href="#comments" style="margin: 0 12px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;">评论管理</a>
<a href="#settings" style="margin: 0 12px; color: #6366f1; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;">通知设置</a>
</div>
<p style="color: #9ca3af; font-size: 14px; margin: 0 0 8px 0;">
此邮件由系统自动发送，请勿直接回复
</p>
<p style="color: #9ca3af; font-size: 13px; margin: 0;">
© 2023 博客系统. 保留所有权利
</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, #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);">
<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}">John Doe</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; margin-bottom: 15px;">
<div style="width: 36px; height: 36px; border-radius: 8px; background-color: #f1f5f9; display: flex; align-items: center; justify-content: center; margin-right: 12px;">
<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>
<line x1="16" y1="13" x2="8" y2="13"></line>
<line x1="16" y1="17" x2="8" y2="17"></line>
<polyline points="10 9 9 9 8 9"></polyline>
</svg>
</div>
<div>
<p style="margin: 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 style="display: flex; flex-wrap: wrap; gap: 10px; margin-top: 15px;">
<div style="display: flex; align-items: center; background-color: #f1f5f9; padding: 6px 12px; border-radius: 20px;">
<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: 5px;">
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
</svg>
<span style="color: #64748b; font-size: 13px;">15 赞</span>
</div>
<div style="display: flex; align-items: center; background-color: #f1f5f9; padding: 6px 12px; border-radius: 20px;">
<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: 5px;">
<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>
<span style="color: #64748b; font-size: 13px;">8 评论</span>
</div>
<div style="display: flex; align-items: center; background-color: #f1f5f9; padding: 6px 12px; border-radius: 20px;">
<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: 5px;">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"></path>
<polyline points="10 17 15 12 10 7"></polyline>
<line x1="15" y1="12" x2="3" y2="12"></line>
</svg>
<span style="color: #64748b; font-size: 13px;">1024 阅读</span>
</div>
</div>
</div>
<!-- 评论内容卡片 -->
<div style="margin-bottom: 25px;">
<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: 20px; margin-bottom: 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: #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', Arial, sans-serif; white-space: pre-wrap; word-wrap: break-word; margin: 0; color: #374151; line-height: 1.7; font-size: 16px;">这是一条评论内容示例，用户可能对你的文章表达了感谢、提出了问题或分享了自己的观点。评论可能会很长，也可能很短，这里展示了评论的完整内容。</pre>
<!-- 评论时间和来源 -->
<div style="display: flex; align-items: center; margin-top: 15px; padding-top: 15px; border-top: 1px solid #f1f5f9;">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" 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>
<span style="color: #94a3b8; font-size: 13px;">刚刚</span>
</div>
</div>
</div>
<!-- 操作按钮 -->
<div style="display: flex; flex-wrap: wrap; gap: 15px; margin: 30px 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 href="#" 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 style="background-color: #f8fafc; border-radius: 14px; padding: 20px; margin-top: 25px; border: 1px dashed #e2e8f0;">
<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="#475569" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 8px;">
<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>
快速回复选项
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 10px;">
<button style="background-color: #ffffff; border: 1px solid #e2e8f0; color: #475569; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.borderColor='#cbd5e1';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e2e8f0';">
感谢您的评论！
</button>
<button style="background-color: #ffffff; border: 1px solid #e2e8f0; color: #475569; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.borderColor='#cbd5e1';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e2e8f0';">
您提出了很好的观点！
</button>
<button style="background-color: #ffffff; border: 1px solid #e2e8f0; color: #475569; padding: 10px 15px; border-radius: 10px; font-size: 14px; cursor: pointer; transition: all 0.2s ease;" onmouseover="this.style.backgroundColor='#f1f5f9';this.style.borderColor='#cbd5e1';" onmouseout="this.style.backgroundColor='#ffffff';this.style.borderColor='#e2e8f0';">
已更新文章回答您的问题
</button>
</div>
</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="M21.21 15.89A10 10 0 1 1 8 2.83"></path>
<path d="M22 12A10 10 0 0 0 12 2v10z"></path>
</svg>
评论统计
</h4>
<div style="display: flex; flex-wrap: wrap; gap: 15px;">
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #10b981; margin-bottom: 5px;">8</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">本文评论</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #10b981; margin-bottom: 5px;">42</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">本周评论</p>
</div>
<div style="flex: 1; min-width: 120px; background-color: white; padding: 15px; border-radius: 10px; border: 1px solid #e2e8f0; text-align: center;">
<div style="font-size: 24px; font-weight: 700; color: #10b981; margin-bottom: 5px;">95%</div>
<p style="margin: 0; color: #64748b; font-size: 13px;">回复率</p>
</div>
</div>
<div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid #e2e8f0;">
<p style="margin: 0; color: #64748b; font-size: 14px; line-height: 1.6;">
💡 <strong>小贴士：</strong> 及时回复评论可以提高读者参与度和忠诚度，建议在24小时内回复新评论。
</p>
</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="#dashboard" style="margin: 0 10px; color: #10b981; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#047857'" onmouseout="this.style.color='#10b981'">仪表盘</a>
<a href="#comments" style="margin: 0 10px; color: #10b981; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#047857'" onmouseout="this.style.color='#10b981'">评论管理</a>
<a href="#notifications" style="margin: 0 10px; color: #10b981; text-decoration: none; font-size: 14px; font-weight: 500; transition: color 0.2s ease;" onmouseover="this.style.color='#047857'" onmouseout="this.style.color='#10b981'">通知设置</a>
</div>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
如需停止接收评论通知，请前往<a href="#settings" style="color: #10b981; text-decoration: none;">通知设置</a>进行调整
</p>
<p style="color: #94a3b8; font-size: 13px; margin: 5px 0;">
© 2023 Your Blog. 保留所有权利
</p>
</div>
</div>
</div>邮箱验证
邮箱验证代码
<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>结尾
也是都看到这里了，来顺手点个 订阅 看看模版具体长什么样！