Outbox

登录

访问 aifans-outbox.pages.dev（或已绑定的自定义域名），输入访问密码进入发信台。密码保存在浏览器 sessionStorage，关闭标签页即自动清除。

撰写 & 发送邮件

1. 选择发件人从「发件人」下拉框选一个已验证的地址；选「＋ 自定义…」可临时输入任意 aifans.fan 地址。
2. 填写收件人支持逗号、分号或空格分隔多个地址，下方会实时显示「N 个收件人 ✓」。
3. 填写主题和正文右侧面板实时预览渲染效果。正文支持 HTML（默认）和纯文本两种模式，通过右上角切换。
4. 点击「发送」成功后显示绿色回执 ID（来自 Resend），页面底部会追加到本次会话记录。

管理发件人 & 新增域名

点击页面右上角「＋ 管理发件域名」，弹出面板后：

桌面 / 手机 App（PWA）

整个系统托管在 Cloudflare Pages 上，由两部分组成：

设计要点

• 按域名路由提供商：后端根据发件人域名自动选择发信通道——RESEND_DOMAINS 白名单内（如 aifans.fan）走 Resend，其余已验证域名走 Amazon SES。新增 SES 域名无需改代码（详见第 09 节）。
• 密钥永不出现在前端：RESEND_API_KEY、APP_PASSWORD、AWS 密钥均以加密 Secret 存储在 Cloudflare，仅 Edge Function 运行时可读。
• 无数据库、无服务器：发件人列表存 localStorage，会话密码存 sessionStorage，零后端状态。
• 全球低延迟：Pages Function 跑在离用户最近的 Cloudflare 边缘节点，不是集中式服务器。
• PWA 离线外壳：Service Worker 缓存 HTML/图标，断网时仍能打开界面（发信仍需联网）。

关键文件详解

项目通过 Wrangler CLI 部署到 Cloudflare Pages，无需 git 仓库。已通过 OAuth 登录，无需每次输入账号密码。

首次部署（已完成，留作记录）

npm i -g wrangler
wrangler pages project create aifans-outbox --production-branch main
wrangler pages deploy . --project-name aifans-outbox --branch main

日常更新流程

修改完任意文件后，在项目目录执行：

cd D:\projects\resend
wrangler pages deploy . --project-name aifans-outbox --branch main

30 秒左右全球生效，无需手动刷新 CDN。

更新 Secret（密钥）

# 更新 Resend API Key
echo "re_新密钥" | wrangler pages secret put RESEND_API_KEY --project-name aifans-outbox

# 更新登录密码
echo "新密码" | wrangler pages secret put APP_PASSWORD --project-name aifans-outbox

查看 Wrangler 登录状态

wrangler whoami

显示 labladodog@163.com 及账号 ID 即表示已登录，权限涵盖 Pages Write。

Resend API Key Rotate（安全建议）

1. 生成新 Key登录 resend.com/api-keys，Create API Key，复制新 key。
2. 写入 Cloudflareecho "re_新key" | wrangler pages secret put RESEND_API_KEY --project-name aifans-outbox
3. 重新部署wrangler pages deploy . --project-name aifans-outbox --branch main
4. 删除旧 Key回 Resend 后台删掉旧 key，彻底失效。

AWS IAM 密钥 Rotate

1. 新建 access keyAWS IAM → Users → 该用户 → Security credentials → Create access key（用途选 Application outside AWS）。
2. 写入 Cloudflareecho "AKIA新..." | wrangler pages secret put AWS_ACCESS_KEY_ID --project-name aifans-outbox，secret 同理写 AWS_SECRET_ACCESS_KEY。
3. 重新部署wrangler pages deploy . --project-name aifans-outbox --branch main
4. 停用旧 key回 IAM 把旧 access key 设为 Inactive 并删除。

PWA（Progressive Web App）让网页可以像原生应用一样安装到设备。本项目用了三个标准组件：

① Web App Manifest（manifest.webmanifest）

告诉浏览器「这个网站可以被安装」，描述名称、图标、启动行为：

{
  "name": "AIFans Outbox",
  "short_name": "Outbox",
  "start_url": "/",
  "display": "standalone",      // 独立窗口，无浏览器地址栏
  "background_color": "#16130f",
  "theme_color": "#16130f",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "purpose": "any" },
    { "src": "/icon-512.png", "sizes": "512x512", "purpose": "any" },
    { "src": "/icon-maskable-512.png", "sizes": "512x512", "purpose": "maskable" }
  ]
}

② Service Worker（sw.js）

浏览器在后台运行的脚本，拦截网络请求实现缓存。本项目策略：

• 缓存外壳：index.html、manifest、图标，安装时预缓存，断网可打开界面。
• 网络优先：每次访问先尝试从网络取最新版本，失败才用缓存（保证更新即时生效）。
• /api/* 永不缓存：发信请求始终走真实网络，绝不命中缓存。

③ 图标生成

原始设计是 SVG（深色背景 + 琥珀色同心圆），通过 sharp 库渲染成不同尺寸 PNG：

node gen-icons.mjs  // 需先 npm install sharp

在 index.html 中的引入方式

<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content="#16130f" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

// 脚本末尾注册 Service Worker
if ("serviceWorker" in navigator) {
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/sw.js").catch(() => {});
  });
}

目前通过 aifans-outbox.pages.dev 访问。如需绑定如 mail.aifans.fan：

1. 命令行方式wrangler pages domain add aifans-outbox --domain mail.aifans.fan——因 aifans.fan 已在本账号的 Cloudflare，DNS 记录自动添加。
2. 或后台操作Cloudflare → Workers & Pages → aifans-outbox → Custom domains → Set up a domain → 填入域名确认。
3. 等待生效通常 1–5 分钟，SSL 证书自动签发。之后用自定义域名访问即可，*.pages.dev 地址同时保留有效。

Resend 免费版仅允许 1 个自定义域名。为合法、低成本地支持多域名，后端改为按发件域名自动路由： aifans.fan 继续走 Resend 免费，新域名走 Amazon SES（域名不限、按量计费 $0.10/1000 封，个人量级近乎免费）。

路由规则

后端读取 RESEND_DOMAINS 白名单：命中的域名走 Resend，其余一律走 SES。 所以新增 SES 域名时无需改这个变量，也无需改代码。

当前状态

以后新增一个 SES 域名（5 步，无需改代码）

1. SES 建身份AWS SES（区域 us-east-2）→ Identities → Create identity → Domain → 填域名，得到 3 条 DKIM CNAME。
2. 加 DNS 记录把那 3 条 CNAME（+ 可选 DMARC TXT）加到该域名的 Cloudflare DNS。可让我用一个临时的「Edit zone DNS」API Token 自动写入。
3. 等验证SES 中域名状态变 Verified（几分钟～最多 72 小时）。
4. 网页加发件人发信台「＋ 管理发件域名」→ 发件人列表 → 加 名称 <you@新域名>。
5. 直接发选该发件人发信即可——后端自动识别为非 Resend 域名、走 SES。无需改代码或重新部署。

技术实现

• 签名：SES v2 HTTP API 需 AWS Signature V4 签名。用内置的 functions/api/_aws4fetch.js（基于 Web Crypto 的 HMAC-SHA256 链），在 Cloudflare Worker 内完成签名，无需 AWS SDK。
• 端点：https://email.{region}.amazonaws.com/v2/email/outbound-emails，body 用 SES 的 Simple 邮件结构（Subject/Body Html|Text，支持 cc/bcc/reply_to）。
• 统一返回：成功返回 { ok, id, provider }，provider 标明实际走的是 resend 还是 ses，便于排查。

为什么不用其他方案

• 多个 Resend 免费账号：违反条款、易封号，已否决。
• Resend Pro（$20/月）：零工程但有月费；SES 按量计费在个人量级几乎免费，更划算。

为支持「换账号 / 换电脑 / 换人接手」，项目已做到完全自包含、可复现。完整步骤见仓库根目录的 MIGRATION.md，这里是要点速览。

命脉：全部 Secret / 变量（名称必须一致）

后端依赖以下 6 项（存于 Cloudflare Pages → Settings → Variables and Secrets）。 真实值只在各平台后台，代码内无明文密钥。

换账号场景（详见 MIGRATION.md §3）

交接物料清单

• MIGRATION.md —— 完整迁移/交接手册（外部依赖全景、Secret 清单、各场景步骤、从零重建 Checklist）。
• scripts/set-secrets.example.ps1 —— 批量设置全部 Secret 的模板（填真实值后运行）。
• scripts/add-domain-dns.example.ps1 —— 给新 SES 域名批量写 DKIM/DMARC DNS 的模板。
• .gitignore —— 已配好，可安全 git init 推私有仓库作为交接载体（代码无明文密钥）。