Outbox

登录

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

撰写 & 发送邮件

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

管理发件人 & 新增域名

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

桌面 / 手机 App（PWA）

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

设计要点

• 密钥永不出现在前端：RESEND_API_KEY 和 APP_PASSWORD 以加密 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，彻底失效。

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 地址同时保留有效。