MkSaaS文档邮件
学习如何使用 Resend 和 React Email 模板设置和使用邮件功能
MkSaaS 使用 Resend 进行邮件发送，使用 React Email 创建美观的邮件模板。
设置
创建 Resend 账户
在 resend.com 创建 Resend 账户。
获取 API 密钥
在 Resend 控制台中点击 API Keys > Create API Key，设置权限为 Send emails 或 Full access。获取 API 密钥，并添加到环境变量文件：
RESEND_API_KEY=YOUR-RESEND-API-KEY更新网站配置
更新 website.tsx 文件。请注意 fromEmail 是发送邮件的邮箱地址，supportEmail 是接收邮件的邮箱地址：
export const websiteConfig = {
// ...其他配置
mail: {
enable: true,
provider: 'resend',
fromEmail: 'support@example.com',
supportEmail: 'support@example.com',
},
// ...其他配置
}如果您正在设置环境，现在可以回到环境配置文档并继续。本文档的其余部分可以稍后阅读。
环境配置
设置环境变量
使用方法
import { sendEmail } from '@/mail';
// 基于模板发送邮件
await sendEmail({
to: 'user@example.com',
template: 'verifyEmail',
context: {
name: 'John Doe',
url: 'https://example.com/verify?token=abc123',
},
locale: 'en', // 可选，默认为配置的默认语言
});
// 发送原始内容邮件
await sendEmail({
to: 'user@example.com',
subject: '欢迎来到我们的平台',
html: '<h1>您好！</h1><p>欢迎来到我们的平台。</p>',
text: '您好！欢迎来到我们的平台。', // 可选
});邮件模板
MkSaaS 包含几个预构建的邮件模板：
预览邮件
在发送前预览邮件：
pnpm run email这将启动一个本地服务器，允许您在浏览器中预览邮件。
创建自定义模板
- 在
src/mail/templates目录中创建邮件模板：
import { BaseEmailProps } from '@/mail/types';
import { EmailLayout } from '../components/email-layout';
import { EmailButton } from '../components/email-button';
interface MyCustomEmailProps extends BaseEmailProps {
username: string;
actionUrl: string;
}
export default function MyCustomEmail({
username,
actionUrl,
messages,
locale
}: MyCustomEmailProps) {
return (
<EmailLayout>
<p>您好 {username}！</p>
<p>感谢您加入我们的平台。点击下面的按钮开始使用。</p>
<EmailButton href={actionUrl}>开始使用</EmailButton>
</EmailLayout>
);
}- 在
types.ts中导入组件，并加入EmailTemplates映射：
import MyCustomEmail from './templates/my-custom-email';
export const EmailTemplates = {
// ...现有模板
myCustomEmail: MyCustomEmail,
} as const;- 使用模板：
await sendEmail({
to: 'user@example.com',
template: 'myCustomEmail',
context: {
username: 'John',
actionUrl: 'https://example.com/start',
},
});扩展新的邮件提供商
MkSaaS 支持扩展新的邮件服务提供商：
- 在
src/mail/provider目录中创建新文件 - 从
types.ts实现MailProvider接口 - 在
index.ts中更新邮件服务提供商选择逻辑
示例实现：
import { MailProvider, SendEmailResult, SendRawEmailParams, SendTemplateParams } from '@/mail/types';
export class MyProvider implements MailProvider {
constructor() {
// 初始化您的邮件服务提供商
}
public async sendTemplate(params: SendTemplateParams): Promise<SendEmailResult> {
// 发送模板邮件的实现代码
}
public async sendRawEmail(params: SendRawEmailParams): Promise<SendEmailResult> {
// 发送原始邮件的实现代码
}
public getProviderName(): string {
return 'my-provider';
}
}然后在 index.ts 中更新邮件服务提供商选择：
import { MyProvider } from './provider/my-provider';
const providerRegistry: Partial<Record<MailProviderName, MailProviderFactory>> = {
resend: () => new ResendProvider(),
custom: () => new MyProvider(),
};还需要在 src/types/index.d.ts 的 MailConfig['provider'] 中加入 custom。