Cloud Mail

基于 Cloudflare 的简约响应式邮箱服务，支持邮件发送、附件收发 🎉

简体中文 | English

---

📖 项目简介

Cloud Mail 是一个基于 Cloudflare 生态构建的轻量级邮箱服务。只需一个域名，即可创建多个邮箱账号，实现类似 Gmail、QQ 邮箱等主流平台的收发邮件功能。

本项目采用前后端分离架构，后端部署在 Cloudflare Workers，前端为 Vue3 单页应用，无需传统服务器，大幅降低运维成本。

• 🌐 在线演示
• 📚 部署文档
• 💬 Telegram 交流群

📸 项目展示

✨ 功能特性

• 💰 零成本部署 - 基于 Cloudflare 免费套餐，无需购买服务器
• 💻 响应式设计 - 完美适配 PC、平板和移动设备
• 📧 邮件收发 - 集成 Resend 实现邮件发送，支持群发、附件、内嵌图片
• 📦 附件管理 - 使用 Cloudflare R2 存储附件，支持大文件上传下载
• 🛡️ 权限管理 - RBAC 权限控制，支持用户分级和资源限制
• 🔔 消息推送 - 邮件到达后自动推送到 Telegram 机器人
• 📡 开放 API - 提供 RESTful API，支持批量操作用户和邮件
• 🔢 验证码识别 - 集成 Workers AI 自动识别邮件中的验证码
• 📊 数据可视化 - 使用 ECharts 展示系统数据和使用统计
• 🎨 个性化 - 支持自定义网站标题、登录页背景、透明度等
• 🤖 人机验证 - 集成 Cloudflare Turnstile 防止恶意注册

🚀 快速开始

环境要求

• Node.js 18+
• npm 或 pnpm
• Cloudflare 账号
• Resend 账号（用于发送邮件）

安装依赖

# 克隆项目
git clone https://github.com/maillab/cloud-mail.git
cd cloud-mail

# 安装后端依赖
cd mail-worker
npm install

# 安装前端依赖
cd ../mail-vue
npm install

本地开发

1. 配置后端

cd mail-worker

# 创建开发环境配置
cp wrangler.toml.example wrangler-dev.toml

# 编辑配置（填入你的 Cloudflare 账号信息）
# 参见下方「配置说明」章节

2. 启动后端开发服务器

npm run dev
# 或使用 wrangler 命令
wrangler dev --config wrangler-dev.toml

3. 启动前端开发服务器

cd mail-vue
npm run dev

前端默认运行在 http://localhost:5173，后端在 http://localhost:8787。

🛠️ 技术栈

层级	技术	说明
运行平台	Cloudflare Workers	边缘计算平台
Web 框架	Hono	轻量级 Web 框架
ORM	Drizzle ORM	类型安全的 ORM
数据库	Cloudflare D1	SQLite 边缘数据库
缓存	Cloudflare KV	键值存储
文件存储	Cloudflare R2	对象存储
前端框架	Vue 3	渐进式 JS 框架
UI 组件	Element Plus	Vue 3 组件库
状态管理	Pinia	Vue 官方状态管理
图表	ECharts	数据可视化
邮件服务	Resend	现代化邮件 API

📁 项目结构

cloud-mail/
├── mail-worker/              # 后端 Worker 项目
│   ├── src/
│   │   ├── api/              # API 接口层
│   │   ├── const/            # 常量定义
│   │   ├── dao/              # 数据访问层
│   │   ├── email/            # 邮件收发处理
│   │   ├── entity/           # 数据库实体
│   │   ├── error/            # 异常定义
│   │   ├── hono/             # Web 框架配置
│   │   ├── i18n/             # 国际化
│   │   ├── init/             # 初始化逻辑
│   │   ├── model/            # 数据模型
│   │   ├── security/         # 权限认证
│   │   ├── service/          # 业务逻辑层
│   │   ├── template/         # 邮件模板
│   │   ├── utils/            # 工具函数
│   │   └── index.js          # 入口文件
│   ├── package.json
│   └── wrangler.toml         # 部署配置
│
├── mail-vue/                 # 前端 Vue 项目
│   ├── src/
│   │   ├── axios/            # Axios 配置
│   │   ├── components/       # 公共组件
│   │   ├── echarts/          # 图表组件
│   │   ├── i18n/             # 国际化
│   │   ├── init/             # 初始化
│   │   ├── layout/           # 布局组件
│   │   ├── perm/             # 权限管理
│   │   ├── request/          # API 请求封装
│   │   ├── router/           # 路由配置
│   │   ├── store/            # 状态管理
│   │   ├── utils/            # 工具函数
│   │   ├── views/            # 页面视图
│   │   ├── app.vue           # 根组件
│   │   ├── main.js           # 入口文件
│   │   └── style.css         # 全局样式
│   ├── package.json
│   └── vite.config.js        # Vite 配置
│
├── doc/                      # 文档和演示图片
├── LICENSE                   # MIT 许可证
└── README.md                 # 本文件

⚙️ 配置说明

后端配置 (mail-worker/wrangler.toml)

name = "cloud-mail"
main = "src/index.js"
compatibility_date = "2024-01-01"

# D1 数据库绑定
[[d1_databases]]
binding = "DB"
database_name = "cloud-mail-db"
database_id = "your-database-id"

# KV 缓存绑定
[[kv_namespaces]]
binding = "CACHE"
id = "your-kv-id"

# R2 存储绑定
[[r2_buckets]]
binding = "STORAGE"
bucket_name = "cloud-mail-storage"

# 环境变量
[vars]
RESEND_API_KEY = "your-resend-api-key"
JWT_SECRET = "your-jwt-secret"
ADMIN_EMAIL = "admin@yourdomain.com"

前端配置 (mail-vue/.env)

# 开发环境
VITE_API_BASE_URL=http://localhost:8787

# 生产环境
VITE_API_BASE_URL=https://your-worker.your-subdomain.workers.dev

🚢 部署指南

部署后端

cd mail-worker

# 测试环境部署
npm run test

# 生产环境部署
npm run deploy

部署前端

前端需要构建后部署到任意静态托管服务（如 Cloudflare Pages、Vercel、Netlify 等）：

cd mail-vue

# 构建生产版本
npm run build

# 构建结果在 dist/ 目录，可直接部署

推荐使用 Cloudflare Pages 部署前端

1. 在 Cloudflare Dashboard 创建 Pages 项目
2. 连接 GitHub 仓库
3. 构建设置：
   • 构建命令：cd mail-vue && npm run build
   • 构建输出目录：mail-vue/dist
4. 添加环境变量（参考上方配置说明）

📝 开发脚本

后端 (mail-worker)

命令	说明
npm run dev	本地开发模式
npm run start	启动开发服务器（同 dev）
npm run test	部署到测试环境
npm run deploy	部署到生产环境

前端 (mail-vue)

命令	说明
npm run dev	本地开发模式
npm run remote	使用远程 API 开发
npm run build	构建生产版本
npm run eo	构建 EO 环境
npm run preview	预览构建结果

🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建特性分支：git checkout -b feature/amazing-feature
3. 提交更改：git commit -m 'Add amazing feature'
4. 推送分支：git push origin feature/amazing-feature
5. 创建 Pull Request

❓ 常见问题

Q: 项目完全免费吗？ A: 基于 Cloudflare 免费套餐可以运行基本功能，但如果邮件量大或附件多，可能需要升级到付费套餐。

Q: 支持自定义域名吗？ A: 支持，可以在 Cloudflare 中为 Workers 和 Pages 绑定自定义域名。

Q: 如何接收邮件？ A: 需要在域名 DNS 中添加 MX 记录指向 Cloudflare Email Routing，具体参见部署文档。

💖 赞助支持

如果本项目对你有帮助，欢迎赞助支持开发者：

📄 许可证

本项目基于 MIT 许可证开源。

💬 社区交流

• Telegram 群组
• GitHub Issues

---

Made with ❤️ by Cloud Mail Team