feat: upgrade version (#726)

* feat: db schema index update

* feat: upgrade dependencies

.flake8

@@ -0,0 +1,3 @@
+[flake8]
+max-line-length = 180
+exclude = .git,__pycache__,build,dist

.github/workflows/backend_deploy.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -32,6 +32,14 @@ jobs:
 
       - name: Deploy Backend for ${{ github.ref_name }}
         run: |
+          export use_worker_assets=${{ secrets.USE_WORKER_ASSETS }}
+          if [ -n "$use_worker_assets" ]; then
+            cd frontend/
+            pnpm install --no-frozen-lockfile
+            pnpm build:pages
+            cd ..
+          fi
+
           export debug_mode=${{ secrets.DEBUG_MODE }}
           export use_mail_wasm_parser=${{ secrets.BACKEND_USE_MAIL_WASM_PARSER }}
           cd worker/

.github/workflows/docs_deploy.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm

.github/workflows/frontend_deploy.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm

.github/workflows/frontend_pagefunction_deploy.yaml

@@ -15,7 +15,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm

.github/workflows/pr_agent.yml

@@ -14,7 +14,7 @@ jobs:
     steps:
       - name: PR Agent action step
         id: pragent
-        uses: Codium-ai/pr-agent@main
+        uses: docker://codiumai/pr-agent:0.29-github_action
         env:
           PR_REVIEWER.REQUIRE_TESTS_REVIEW: "false"
           OPENAI_KEY: ${{ secrets.OPENAI_KEY }}

.github/workflows/tag_build.yml

@@ -17,7 +17,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -44,10 +44,24 @@ jobs:
       - name: Build Backend
         run: cd worker && pnpm install --no-frozen-lockfile && pnpm build
 
+      - name: Move worker.js
+        run: cd worker/dist && mv worker.js ../
+
+      - name: Build Worker with wasm mail parser
+        run: |
+          cd worker
+          echo "Using mail-parser-wasm-worker"
+          pnpm add mail-parser-wasm-worker
+          git apply ../.github/config/mail-parser-wasm-worker.patch
+          echo "Applied mail-parser-wasm-worker patch"
+          pnpm build
+          zip -r worker-with-wasm-mail-parser.zip dist/worker.js dist/*.wasm
+
       - name: Upload to Release
         uses: softprops/action-gh-release@v2
         with:
           files: |
             frontend/frontend.zip
             frontend/telegram-frontend.zip
-            worker/dist/worker.js
+            worker/worker.js
+            worker/worker-with-wasm-mail-parser.zip

.gitignore

@@ -1,3 +1,4 @@
+.DS_Store
 dist/
 test/
 .vscode/

CHANGELOG.md

@@ -1,7 +1,71 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
-## main(v0.8.7)
+## main(v1.0.6)
+
+- feat: |DB| update db schema add index
+
+## v1.0.5
+
+- feat: 新增 `DISABLE_CUSTOM_ADDRESS_NAME` 配置: 禁用自定义邮箱地址名称功能
+- feat: 新增 `CREATE_ADDRESS_DEFAULT_DOMAIN_FIRST` 配置: 创建地址时优先使用第一个域名
+- feat: |UI| 主页增加进入极简模式按钮
+- feat: |Webhook| 增加白名单开关功能，支持灵活控制访问权限
+
+## v1.0.4
+
+- feat: |UI| 优化极简模式主页, 增加全部邮件页面功能(删除/下载/附件/...), 可在 `外观` 中切换
+- feat: admin 账号设置页面增加 `邮件转发规则` 配置
+- feat: admin 账号设置页面增加 `禁止接收未知地址邮件` 配置
+- feat: 邮件页面增加 上一封/下一封 按钮
+
+## v1.0.3
+
+- fix: 修复 github actions 部署问题
+- feat: telegram /new 不指定域名时, 使用随机地址
+
+## v1.0.2
+
+- fix: 修复 oauth2 登录失败的问题
+
+## v1.0.1
+
+- feat: |UI| 增加极简模式主页, 可在 `外观` 中切换
+- fix: 修复 oauth2 登录时，default role 不生效的问题
+
+## v1.0.0
+
+- fix: |UI| 修复 User 查看收件箱，不选择地址时，关键词查询不生效
+- fix: 修复自动清理任务，时间为 0 时不生效的问题
+- feat: 清理功能增加 创建 n 天前地址清理，n 天前未活跃地址清理
+- fix: |IMAP Proxy| 修复 IMAP Proxy 服务器，无法查看新邮件的问题
+
+## v0.10.0
+
+- feat: 支持 User 查看收件箱，`/user_api/mails` 接口, 支持 `address` 和 `keyword` 过滤
+- fix: 修复 Oauth2 登录获取 Token 时，一些 Oauth2 需要 `redirect_uri` 参数的问题
+- feat: 用户访问网页时，如果 `user token` 在 7 天内过期，自动刷新
+- feat: admin portal 中增加初始化 db 的功能
+- feat: 增加 `ALWAYS_SHOW_ANNOUNCEMENT` 变量，用于配置是否总是显示公告
+
+## v0.9.1
+
+- feat: |UI| support google ads
+- feat: |UI| 使用 shadow DOM 防止样式污染
+- feat: |UI| 支持 URL jwt 参数自动登录邮箱，jwt 参数会覆盖浏览器中的 jwt
+- fix: |CleanUP| 修复清理邮件时，清理时间超过 30 天报错的 bug
+- feat: admin 用户管理页面: 增加 用户地址查看功能
+- feat: | S3 附件| 增加 S3 附件删除功能
+- feat: | Admin API| 增加 admin 绑定用户和地址的 api
+- feat: | Oauth2 | Oatuh2 获取用户信息时，支持 `JSONPATH` 表达式
+
+## v0.9.0
+
+- feat: | Worker | 支持多语言
+- feat: | Worker | `NO_LIMIT_SEND_ROLE` 配置支持多角色, 逗号分割
+- feat: | Actions | build 里增加 `worker-with-wasm-mail-parser.zip` 支持 UI 部署带 `wasm` 的 worker
+
+## v0.8.7
 
 - fix: |UI| 修复移动设备日期显示问题
 - feat: |Worker| 支持通过 `SMTP` 发送邮件, 使用 [zou-yu/worker-mailer](https://github.com/zou-yu/worker-mailer/blob/main/README_zh-CN.md)

README.md

@@ -1,89 +1,187 @@
-# 使用 cloudflare 免费服务，搭建临时邮箱
+<!-- markdownlint-disable-file MD033 MD045 -->
+# Cloudflare 临时邮箱 - 免费搭建临时邮件服务
 
 <p align="center">
-  <a href="https://hellogithub.com/repository/2ccc64bb1ba346b480625f584aa19eb1" target="_blank">
+  <a href="https://temp-mail-docs.awsl.uk" target="_blank">
-    <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=2ccc64bb1ba346b480625f584aa19eb1&claim_uid=FxNypXK7UQ9OECT" alt="Featured｜HelloGitHub"/>
+    <img alt="docs" src="https://img.shields.io/badge/docs-grey?logo=vitepress">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest" target="_blank">
+    <img src="https://img.shields.io/github/v/release/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/LICENSE" target="_blank">
+    <img alt="MIT License" src="https://img.shields.io/github/license/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/graphs/contributors" target="_blank">
+   <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="">
+    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dreamhunter2333/cloudflare_temp_email">
+  </a>
+  <a href="">
+    <img src="https://img.shields.io/github/last-commit/dreamhunter2333/cloudflare_temp_email">
   </a>
 </p>
 
 <p align="center">
-  <a href="https://temp-mail-docs.awsl.uk" target="_blank">
+  <a href="https://hellogithub.com/repository/2ccc64bb1ba346b480625f584aa19eb1" target="_blank">
-    <img alt="docs" src="https://img.shields.io/badge/docs-grey?style=for-the-badge&logo=vitepress">
+    <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=2ccc64bb1ba346b480625f584aa19eb1&claim_uid=FxNypXK7UQ9OECT" alt="Featured｜HelloGitHub" height="30"/>
-  </a>
-  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest" target="_blank">
-    <img src="https://img.shields.io/github/v/release/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
-  </a>
-  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/LICENSE" target="_blank">
-    <img alt="MIT License" src="https://img.shields.io/github/license/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
-  </a>
-  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/graphs/contributors" target="_blank">
-   <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
-  </a>
-  <a href="">
-    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
-  </a>
-  <a href="">
-    <img src="https://img.shields.io/github/last-commit/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
   </a>
 </p>
 
+<p align="center">
+  <a href="README.md">🇨🇳 中文文档</a> |
+  <a href="README_EN.md">🇺🇸 English Document</a>
+</p>
+
 > 本项目仅供学习和个人用途，请勿将其用于任何违法行为，否则后果自负。
 
-## [查看部署文档](https://temp-mail-docs.awsl.uk)
+**🎉 一个功能完整的临时邮箱服务！**
 
-[![Deploy to Cloudflare Workers](https://deploy.workers.cloudflare.com/button)](https://temp-mail-docs.awsl.uk/zh/guide/actions/github-action.html)
+- 🆓 **完全免费** - 基于 Cloudflare 免费服务构建，零成本运行
+- ⚡ **高性能** - Rust WASM 邮件解析，响应速度极快
+- 🎨 **现代化界面** - 响应式设计，支持多语言，操作简便
 
-[Github Action 部署文档](https://temp-mail-docs.awsl.uk/zh/guide/actions/github-action.html)
+## 📚 部署文档 - 快速开始
 
-[English Docs](https://temp-mail-docs.awsl.uk/en/)
+[📖 部署文档](https://temp-mail-docs.awsl.uk) | [🚀 Github Action 部署文档](https://temp-mail-docs.awsl.uk/zh/guide/actions/github-action.html)
 
-## [CHANGELOG](CHANGELOG.md)
+<a href="https://temp-mail-docs.awsl.uk/zh/guide/actions/github-action.html">
+  <img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare Workers" height="32">
+</a>
 
-## [在线演示](https://mail.awsl.uk/)
+## 📝 更新日志
+
+查看 [CHANGELOG](CHANGELOG.md) 了解最新更新内容。
+
+## 🎯 在线体验
+
+立即体验 → [https://mail.awsl.uk/](https://mail.awsl.uk/)
+
+<details>
+<summary>📊 服务状态监控（点击收缩/展开）</summary>
 
 |                                            |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
 | ------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
 | [Backend](https://temp-email-api.awsl.uk/) | [![Deploy Backend Production](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/backend_deploy.yaml/badge.svg)](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/backend_deploy.yaml) ![](https://uptime.aks.awsl.icu/api/badge/10/status) ![](https://uptime.aks.awsl.icu/api/badge/10/uptime) ![](https://uptime.aks.awsl.icu/api/badge/10/ping) ![](https://uptime.aks.awsl.icu/api/badge/10/avg-response) ![](https://uptime.aks.awsl.icu/api/badge/10/cert-exp) ![](https://uptime.aks.awsl.icu/api/badge/10/response) |
 | [Frontend](https://mail.awsl.uk/)          | [![Deploy Frontend](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/frontend_deploy.yaml/badge.svg)](https://github.com/dreamhunter2333/cloudflare_temp_email/actions/workflows/frontend_deploy.yaml) ![](https://uptime.aks.awsl.icu/api/badge/12/status) ![](https://uptime.aks.awsl.icu/api/badge/12/uptime) ![](https://uptime.aks.awsl.icu/api/badge/12/ping) ![](https://uptime.aks.awsl.icu/api/badge/12/avg-response) ![](https://uptime.aks.awsl.icu/api/badge/12/cert-exp) ![](https://uptime.aks.awsl.icu/api/badge/12/response)         |
 
+</details>
+
+<details>
+<summary>⭐ Star History（点击收缩/展开）</summary>
+
 <picture>
   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date&theme=dark" />
   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date" />
   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=dreamhunter2333/cloudflare_temp_email&type=Date" />
 </picture>
 
-- [使用 cloudflare 免费服务，搭建临时邮箱](#使用-cloudflare-免费服务搭建临时邮箱)
+</details>
-  - [查看部署文档](#查看部署文档)
-  - [CHANGELOG](#changelog)
-  - [在线演示](#在线演示)
-  - [功能/TODO](#功能todo)
-  - [Reference](#reference)
-  - [Join Community](#join-community)
 
-## 功能/TODO
+<details open>
+<summary>📖 目录（点击收缩/展开）</summary>
 
-- [x] 使用 `password` 重新登录之前的邮箱
+- [Cloudflare 临时邮箱 - 免费搭建临时邮件服务](#cloudflare-临时邮箱---免费搭建临时邮件服务)
-- [x] 获取自定义名字的邮箱，`admin` 可配置黑名单
+  - [📚 部署文档 - 快速开始](#-部署文档---快速开始)
-- [x] 支持多语言
+  - [📝 更新日志](#-更新日志)
-- [x] 增加访问密码，可作为私人站点
+  - [🎯 在线体验](#-在线体验)
-- [x] 增加自动回复功能
+  - [✨ 核心功能](#-核心功能)
-- [x] 增加查看 `附件` 功能
+    - [📧 邮件处理](#-邮件处理)
-- [x] 使用 `rust wasm` 解析邮件
+    - [👥 用户管理](#-用户管理)
-- [x] 支持发送邮件
+    - [🔧 管理功能](#-管理功能)
-- [x] 支持 `DKIM`
+    - [🌐 多语言与界面](#-多语言与界面)
-- [x] `admin` 后台创建无前缀邮箱
+    - [🤖 集成与扩展](#-集成与扩展)
-- [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件, `IMAP` 查看邮件
+  - [🏗️ 技术架构](#️-技术架构)
+    - [🏛️ 系统架构](#️-系统架构)
+    - [🛠️ 技术栈](#️-技术栈)
+    - [📦 主要组件](#-主要组件)
+  - [🌟 加入社区](#-加入社区)
+
+</details>
+
+## ✨ 核心功能
+
+<details open>
+<summary>✨ 核心功能详情（点击收缩/展开）</summary>
+
+### 📧 邮件处理
+
+- [x] 使用 `rust wasm` 解析邮件，解析速度快，几乎所有邮件都能解析，node 的解析模块解析邮件失败的邮件，rust wasm 也能解析成功
+- [x] 支持发送邮件，支持 `DKIM` 验证
+- [x] 支持 `SMTP` 和 `Resend` 等多种发送方式
+- [x] 增加查看 `附件` 功能，支持附件图片显示
+- [x] 支持 S3 附件存储和删除功能
+- [x] 垃圾邮件检测和黑白名单配置
+- [x] 邮件转发功能，支持全局转发地址
+
+### 👥 用户管理
+
+- [x] 使用 `凭证` 重新登录之前的邮箱
 - [x] 添加完整的用户注册登录功能，可绑定邮箱地址，绑定后可自动获取邮箱JWT凭证切换不同邮箱
-- [x] `Telegram Bot` 使用，以及 `Telegram` 推送
+- [x] 支持 `OAuth2` 第三方登录（Github、Authentik 等）
+- [x] 支持 `Passkey` 无密码登录
+- [x] 用户角色管理，支持多角色域名和前缀配置
+- [x] 用户收件箱查看，支持地址和关键词过滤
 
-## Reference
+### 🔧 管理功能
 
-- Cloudflare D1 作为数据库
+- [x] 完整的 admin 控制台
-- 使用 Cloudflare Pages 部署前端
+- [x] `admin` 后台创建无前缀邮箱
-- 使用 Cloudflare Workers 部署后端
+- [x] admin 用户管理页面，增加用户地址查看功能
-- email 转发使用 Cloudflare Email Routing
+- [x] 定时清理功能，支持多种清理策略
+- [x] 获取自定义名字的邮箱，`admin` 可配置黑名单
+- [x] 增加访问密码，可作为私人站点
 
-## Join Community
+### 🌐 多语言与界面
+
+- [x] 前后台均支持多语言
+- [x] 现代化 UI 设计，支持响应式布局
+- [x] 支持 Google Ads 集成
+- [x] 使用 shadow DOM 防止样式污染
+- [x] 支持 URL JWT 参数自动登录
+
+### 🤖 集成与扩展
+
+- [x] 完整的 `Telegram Bot` 支持，以及 `Telegram` 推送，Telegram Bot 小程序
+- [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件，`IMAP` 查看邮件
+- [x] Webhook 支持，消息推送集成
+- [x] 支持 `CF Turnstile` 人机验证
+- [x] 限流配置，防止滥用
+
+</details>
+
+## 🏗️ 技术架构
+
+<details>
+<summary>🏗️ 技术架构详情（点击收缩/展开）</summary>
+
+### 🏛️ 系统架构
+
+- **数据库**: Cloudflare D1 作为主数据库
+- **前端部署**: 使用 Cloudflare Pages 部署前端
+- **后端部署**: 使用 Cloudflare Workers 部署后端
+- **邮件转发**: 使用 Cloudflare Email Routing
+
+### 🛠️ 技术栈
+
+- **前端**: Vue 3 + Vite + TypeScript
+- **后端**: TypeScript + Cloudflare Workers
+- **邮件解析**: Rust WASM (mail-parser-wasm)
+- **数据库**: Cloudflare D1 (SQLite)
+- **存储**: Cloudflare KV + R2 (可选 S3)
+- **代理服务**: Python SMTP/IMAP Proxy Server
+
+### 📦 主要组件
+
+- **Worker**: 核心后端服务
+- **Frontend**: Vue 3 用户界面
+- **Mail Parser WASM**: Rust 邮件解析模块
+- **SMTP Proxy Server**: Python 邮件代理服务
+- **Pages Functions**: Cloudflare Pages 中间件
+- **Documentation**: VitePress 文档站点
+
+</details>
+
+## 🌟 加入社区
 
-- [Discord](https://discord.gg/dQEwTWhA6Q)
 - [Telegram](https://t.me/cloudflare_temp_email)

README_EN.md

@@ -0,0 +1,46 @@
+<!-- markdownlint-disable-file MD033 MD045 -->
+# Cloudflare Temp Email
+
+<p align="center">
+  <a href="README.md">🇨🇳 中文</a> |
+  <a href="README_EN.md">🇺🇸 English</a>
+</p>
+
+**A fully-featured temporary email service built on Cloudflare's free services.**
+
+> This project is for learning and personal use only.
+
+## 🚀 Quick Start
+
+- [📖 Documentation](https://temp-mail-docs.awsl.uk/en/)
+- [🎯 Live Demo](https://mail.awsl.uk/)
+- [📝 CHANGELOG](CHANGELOG.md)
+
+<p align="center">
+  <a href="https://temp-mail-docs.awsl.uk/en/guide/actions/github-action.html">
+    <img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare Workers">
+  </a>
+</p>
+
+## ✨ Key Features
+
+- **� Email Processing**: Rust WASM parser, SMTP/IMAP support, attachments, auto-reply
+- **👥 User Management**: OAuth2 login, Passkey authentication, role management
+- **🌐 Admin Panel**: Complete admin console, user management, scheduled cleanup
+- **🤖 Integrations**: Telegram Bot, webhooks, CAPTCHA, rate limiting
+- **� Modern UI**: Multi-language, responsive design, JWT auto-login
+
+## 🏗️ Tech Stack
+
+- **Frontend**: Vue 3 + TypeScript + Vite
+- **Backend**: Cloudflare Workers + D1 Database
+- **Email**: Cloudflare Email Routing + Rust WASM Parser
+- **Storage**: Cloudflare KV + R2 (optional S3)
+
+## 🌟 Community
+
+- [Telegram](https://t.me/cloudflare_temp_email)
+
+## 📄 License
+
+MIT License - see [LICENSE](LICENSE) for details.

db/schema.sql

@@ -9,6 +9,8 @@ CREATE TABLE IF NOT EXISTS raw_mails (
 
 CREATE INDEX IF NOT EXISTS idx_raw_mails_address ON raw_mails(address);
 
+CREATE INDEX IF NOT EXISTS idx_raw_mails_created_at ON raw_mails(created_at);
+
 CREATE TABLE IF NOT EXISTS address (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     name TEXT UNIQUE,
@@ -18,6 +20,10 @@ CREATE TABLE IF NOT EXISTS address (
 
 CREATE INDEX IF NOT EXISTS idx_address_name ON address(name);
 
+CREATE INDEX IF NOT EXISTS idx_address_created_at ON address(created_at);
+
+CREATE INDEX IF NOT EXISTS idx_address_updated_at ON address(updated_at);
+
 CREATE TABLE IF NOT EXISTS auto_reply_mails (
     id INTEGER PRIMARY KEY,
     source_prefix TEXT,
@@ -49,6 +55,7 @@ CREATE TABLE IF NOT EXISTS sendbox (
 );
 
 CREATE INDEX IF NOT EXISTS idx_sendbox_address ON sendbox(address);
+CREATE INDEX IF NOT EXISTS idx_sendbox_created_at ON sendbox(created_at);
 
 CREATE TABLE IF NOT EXISTS settings (
     key TEXT PRIMARY KEY,

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.8.7",
+  "version": "1.0.6",
   "private": true,
   "type": "module",
   "scripts": {
@@ -20,33 +20,34 @@
   },
   "dependencies": {
     "@simplewebauthn/browser": "10.0.0",
-    "@unhead/vue": "^1.11.19",
+    "@unhead/vue": "^1.11.20",
-    "@vueuse/core": "^12.7.0",
+    "@vueuse/core": "^12.8.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
-    "axios": "^1.7.9",
+    "axios": "^1.12.2",
     "jszip": "^3.10.1",
     "mail-parser-wasm": "^0.2.1",
-    "naive-ui": "^2.41.0",
+    "naive-ui": "^2.43.1",
-    "postal-mime": "^2.4.3",
+    "postal-mime": "^2.4.4",
     "vooks": "^0.2.12",
-    "vue": "^3.5.13",
+    "vue": "^3.5.21",
     "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "^11.1.1",
+    "vue-i18n": "^11.1.12",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
     "@vicons/fa": "^0.13.0",
     "@vicons/material": "^0.13.0",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.4",
-    "unplugin-auto-import": "^19.1.0",
+    "unplugin-auto-import": "^19.3.0",
-    "unplugin-vue-components": "^28.1.0",
+    "unplugin-vue-components": "^28.8.0",
-    "vite": "^6.1.0",
+    "vite": "^6.3.6",
-    "vite-plugin-pwa": "^0.21.1",
+    "vite-plugin-pwa": "^1.0.3",
-    "vite-plugin-top-level-await": "^1.5.0",
+    "vite-plugin-top-level-await": "^1.6.0",
-    "vite-plugin-wasm": "^3.4.1",
+    "vite-plugin-wasm": "^3.5.0",
     "workbox-build": "^7.3.0",
     "workbox-window": "^7.3.0",
-    "wrangler": "^3.109.1"
+    "wrangler": "^4.37.0"
-  }
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }

frontend/src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
+import { useScript } from '@unhead/vue'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
@@ -11,12 +12,15 @@ import { api } from './api'
 const {
   isDark, loading, useSideMargin, telegramApp, isTelegram
 } = useGlobalState()
+const adClient = import.meta.env.VITE_GOOGLE_AD_CLIENT;
+const adSlot = import.meta.env.VITE_GOOGLE_AD_SLOT;
 const { locale } = useI18n({});
 const theme = computed(() => isDark.value ? darkTheme : null)
 const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
 const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);
-
+const showAd = computed(() => !isMobile.value && adClient && adSlot);
+const gridMaxCols = computed(() => showAd.value ? 8 : 12);
 
 onMounted(async () => {
 
@@ -37,6 +41,18 @@ onMounted(async () => {
     document.body.appendChild(script);
   }
 
+  // check if google ad is enabled
+  if (showAd.value) {
+    useScript({
+      src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adClient}`,
+      async: true,
+      crossorigin: "anonymous",
+    });
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }
+
+
   // check if telegram is enabled
   const enableTelegram = import.meta.env.VITE_IS_TELEGRAM;
   if (
@@ -63,9 +79,14 @@ onMounted(async () => {
     <n-spin description="loading..." :show="loading">
       <n-notification-provider container-style="margin-top: 60px;">
         <n-message-provider container-style="margin-top: 20px;">
-          <n-grid x-gap="12" :cols="12">
+          <n-grid x-gap="12" :cols="gridMaxCols">
-            <n-gi v-if="showSideMargin" span="1"></n-gi>
+            <n-gi v-if="showSideMargin" span="1">
-            <n-gi :span="!showSideMargin ? 12 : 10">
+              <div class="side" v-if="showAd">
+                <ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot"
+                  data-ad-format="auto" data-full-width-responsive="true"></ins>
+              </div>
+            </n-gi>
+            <n-gi :span="!showSideMargin ? gridMaxCols : (gridMaxCols - 2)">
               <div class="main">
                 <n-space vertical>
                   <n-layout style="min-height: 80vh;">
@@ -76,7 +97,12 @@ onMounted(async () => {
                 </n-space>
               </div>
             </n-gi>
-            <n-gi v-if="showSideMargin" span="1"></n-gi>
+            <n-gi v-if="showSideMargin" span="1">
+              <div class="side" v-if="showAd">
+                <ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot"
+                  data-ad-format="auto" data-full-width-responsive="true"></ins>
+              </div>
+            </n-gi>
           </n-grid>
           <n-back-top />
         </n-message-provider>

frontend/src/api/index.js

@@ -2,6 +2,8 @@ import { useGlobalState } from '../store'
 import { h } from 'vue'
 import axios from 'axios'
 
+import i18n from '../i18n'
+
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const {
     loading, auth, jwt, settings, openSettings,
@@ -22,7 +24,8 @@ const apiFetch = async (path, options = {}) => {
             method: options.method || 'GET',
             data: options.body || null,
             headers: {
-                'x-user-token': userJwt.value,
+                'x-lang': i18n.global.locale.value,
+                'x-user-token': options.userJwt || userJwt.value,
                 'x-user-access-token': userSettings.value.access_token,
                 'x-custom-auth': auth.value,
                 'x-admin-auth': adminAuth.value,
@@ -32,14 +35,12 @@ const apiFetch = async (path, options = {}) => {
         });
         if (response.status === 401 && path.startsWith("/admin")) {
             showAdminAuth.value = true;
-            throw new Error("Unauthorized, your admin password is wrong")
         }
         if (response.status === 401 && openSettings.value.auth) {
             showAuth.value = true;
-            throw new Error("Unauthorized, you access password is wrong")
         }
         if (response.status >= 300) {
-            throw new Error(`${response.status} ${response.data}` || "error");
+            throw new Error(`[${response.status}]: ${response.data}` || "error");
         }
         const data = response.data;
         return data;
@@ -77,6 +78,7 @@ const getOpenSettings = async (message, notification) => {
             adminContact: res["adminContact"] || "",
             enableUserCreateEmail: res["enableUserCreateEmail"] || false,
             disableAnonymousUserCreateEmail: res["disableAnonymousUserCreateEmail"] || false,
+            disableCustomAddressName: res["disableCustomAddressName"] || false,
             enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
             enableAutoReply: res["enableAutoReply"] || false,
             enableIndexAbout: res["enableIndexAbout"] || false,
@@ -88,7 +90,11 @@ const getOpenSettings = async (message, notification) => {
         if (openSettings.value.needAuth) {
             showAuth.value = true;
         }
-        if (openSettings.value.announcement && openSettings.value.announcement != announcement.value) {
+        if (openSettings.value.announcement
+            && !openSettings.value.fetched
+            && (openSettings.value.announcement != announcement.value
+                || openSettings.value.alwaysShowAnnouncement)
+        ) {
             announcement.value = openSettings.value.announcement;
             notification.info({
                 content: () => {
@@ -138,6 +144,19 @@ const getUserSettings = async (message) => {
         if (!userJwt.value) return;
         const res = await api.fetch("/user_api/settings")
         Object.assign(userSettings.value, res)
+        // auto refresh user jwt
+        if (userSettings.value.new_user_token) {
+            try {
+                await api.fetch("/user_api/settings", {
+                    userJwt: userSettings.value.new_user_token,
+                })
+                userJwt.value = userSettings.value.new_user_token;
+                console.log("User JWT updated successfully");
+            }
+            catch (error) {
+                console.error("Failed to update user JWT", error);
+            }
+        }
     } catch (error) {
         message?.error(error.message || "error");
     } finally {

frontend/src/components/MailBox.vue

@@ -1,12 +1,13 @@
 <script setup>
-import { watch, onMounted, ref, onBeforeUnmount } from "vue";
+import { watch, onMounted, ref, onBeforeUnmount, computed } from "vue";
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-import { CloudDownloadRound, ReplyFilled, ForwardFilled } from '@vicons/material'
+import { CloudDownloadRound, ArrowBackIosNewFilled, ArrowForwardIosFilled } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
-import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
+import { processItem } from '../utils/email-parser'
 import { utcToLocalDate } from '../utils';
+import MailContentRenderer from "./MailContentRenderer.vue";
 
 const message = useMessage()
 const isMobile = useIsMobile()
@@ -50,8 +51,8 @@ const props = defineProps({
 })
 
 const {
-  isDark, mailboxSplitSize, indexTab, loading, useUTCDate, autoRefresh, configAutoRefreshInterval,
+  isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
-  useIframeShowMail, sendMailModel, preferShowTextMail
+  autoRefresh, configAutoRefreshInterval, sendMailModel
 } = useGlobalState()
 const autoRefreshInterval = ref(configAutoRefreshInterval.value)
 const data = ref([])
@@ -61,10 +62,49 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 
-const showAttachments = ref(false)
+const canGoPrevMail = computed(() => {
-const curAttachments = ref([])
+  if (!curMail.value) return false
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+  return currentIndex > 0 || page.value > 1
+})
+
+const canGoNextMail = computed(() => {
+  if (!curMail.value) return false
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+  return currentIndex < data.value.length - 1 || count.value > page.value * pageSize.value
+})
+
+const prevMail = async () => {
+  if (!canGoPrevMail.value) return
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+
+  if (currentIndex > 0) {
+    curMail.value = data.value[currentIndex - 1]
+  } else if (page.value > 1) {
+    page.value--
+    await refresh()
+    if (data.value.length > 0) {
+      curMail.value = data.value[data.value.length - 1]
+    }
+  }
+}
+
+const nextMail = async () => {
+  if (!canGoNextMail.value) return
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+
+  if (currentIndex < data.value.length - 1) {
+    curMail.value = data.value[currentIndex + 1]
+  } else if (count.value > page.value * pageSize.value) {
+    page.value++
+    await refresh()
+    if (data.value.length > 0) {
+      curMail.value = data.value[0]
+    }
+  }
+}
+
 const curMail = ref(null);
-const showTextMail = ref(preferShowTextMail.value)
 
 const multiActionMode = ref(false)
 const showMultiActionDownload = ref(false)
@@ -93,6 +133,8 @@ const { t } = useI18n({
       cancelMultiAction: 'Cancel Multi Action',
       selectAll: 'Select All of This Page',
       unselectAll: 'Unselect All',
+      prevMail: 'Previous',
+      nextMail: 'Next',
     },
     zh: {
       success: '成功',
@@ -113,6 +155,8 @@ const { t } = useI18n({
       cancelMultiAction: '取消多选',
       selectAll: '全选本页',
       unselectAll: '取消全选',
+      prevMail: '上一封',
+      nextMail: '下一封',
     }
   }
 });
@@ -184,10 +228,6 @@ const clickRow = async (row) => {
   curMail.value = row;
 };
 
-const getAttachments = (attachments) => {
-  curAttachments.value = attachments;
-  showAttachments.value = true;
-};
 
 const mailItemClass = (row) => {
   return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
@@ -236,14 +276,8 @@ const onSpiltSizeChange = (size) => {
   mailboxSplitSize.value = size;
 }
 
-const attachmentLoding = ref(false)
 const saveToS3Proxy = async (filename, blob) => {
-  attachmentLoding.value = true
-  try {
   await props.saveToS3(curMail.value.id, filename, blob);
-  } finally {
-    attachmentLoding.value = false
-  }
 }
 
 const multiActionModeClick = (enableMulti) => {
@@ -380,7 +414,7 @@ onBeforeUnmount(() => {
       <n-split class="left" direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
         :on-update:size="onSpiltSizeChange">
         <template #1>
-          <div style="overflow: auto; height: 80vh;">
+          <div style="overflow: auto; min-height: 50vh; max-height: 100vh;">
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
                 :class="mailItemClass(row)">
@@ -396,10 +430,14 @@ onBeforeUnmount(() => {
                       {{ utcToLocalDate(row.created_at, useUTCDate) }}
                     </n-tag>
                     <n-tag type="info">
-                      FROM: {{ row.source }}
+                      <n-ellipsis style="max-width: 240px;">
+                        {{ showEMailTo ? "FROM: " + row.source : row.source }}
+                      </n-ellipsis>
                     </n-tag>
                     <n-tag v-if="showEMailTo" type="info">
+                      <n-ellipsis style="max-width: 240px;">
                         TO: {{ row.address }}
+                      </n-ellipsis>
                     </n-tag>
                   </template>
                 </n-thing>
@@ -408,59 +446,31 @@ onBeforeUnmount(() => {
           </div>
         </template>
         <template #2>
+          <div v-if="curMail" style="margin: 8px;">
+            <n-flex justify="space-between">
+              <n-button @click="prevMail" :disabled="!canGoPrevMail" text size="small">
+                <template #icon>
+                  <n-icon>
+                    <ArrowBackIosNewFilled />
+                  </n-icon>
+                </template>
+                {{ t('prevMail') }}
+              </n-button>
+              <n-button @click="nextMail" :disabled="!canGoNextMail" text size="small" icon-placement="right">
+                <template #icon>
+                  <n-icon>
+                    <ArrowForwardIosFilled />
+                  </n-icon>
+                </template>
+                {{ t('nextMail') }}
+              </n-button>
+            </n-flex>
+          </div>
           <n-card :bordered="false" embedded v-if="curMail" class="mail-item" :title="curMail.subject"
             style="overflow: auto; max-height: 100vh;">
-            <n-space>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
-              <n-tag type="info">
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
-                ID: {{ curMail.id }}
+              :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
-              </n-tag>
-              <n-tag type="info">
-                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
-              </n-tag>
-              <n-tag type="info">
-                FROM: {{ curMail.source }}
-              </n-tag>
-              <n-tag v-if="showEMailTo" type="info">
-                TO: {{ curMail.address }}
-              </n-tag>
-              <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
-                <template #trigger>
-                  <n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
-                </template>
-                {{ t('deleteMailTip') }}
-              </n-popconfirm>
-              <n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
-                @click="getAttachments(curMail.attachments)">
-                {{ t('attachments') }}
-              </n-button>
-              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
-                :href="getDownloadEmlUrl(curMail.raw)">
-                <template #icon>
-                  <n-icon :component="CloudDownloadRound" />
-                </template>
-                {{ t('downloadMail') }}
-              </n-button>
-              <n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
-                <template #icon>
-                  <n-icon :component="ReplyFilled" />
-                </template>
-                {{ t('reply') }}
-              </n-button>
-              <n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
-                <template #icon>
-                  <n-icon :component="ForwardFilled" />
-                </template>
-                {{ t('forwardMail') }}
-              </n-button>
-              <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
-                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
-              </n-button>
-            </n-space>
-            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
-            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
-              style="margin-top: 10px;width: 100%; height: 100%;">
-            </iframe>
-            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
           </n-card>
           <n-card :bordered="false" embedded class="mail-item" v-else>
             <n-result status="info" :title="t('pleaseSelectMail')">
@@ -498,7 +508,7 @@ onBeforeUnmount(() => {
                   {{ utcToLocalDate(row.created_at, useUTCDate) }}
                 </n-tag>
                 <n-tag type="info">
-                  FROM: {{ row.source }}
+                  {{ showEMailTo ? "FROM: " + row.source : row.source }}
                 </n-tag>
                 <n-tag v-if="showEMailTo" type="info">
                   TO: {{ row.address }}
@@ -512,89 +522,14 @@ onBeforeUnmount(() => {
         style="height: 80vh;">
         <n-drawer-content :title="curMail ? curMail.subject : ''" closable>
           <n-card :bordered="false" embedded style="overflow: auto;">
-            <n-space>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
-              <n-tag type="info">
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
-                ID: {{ curMail.id }}
+              :useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
-              </n-tag>
+              :onSaveToS3="saveToS3Proxy" />
-              <n-tag type="info">
-                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
-              </n-tag>
-              <n-tag type="info">
-                FROM: {{ curMail.source }}
-              </n-tag>
-              <n-tag v-if="showEMailTo" type="info">
-                TO: {{ curMail.address }}
-              </n-tag>
-              <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="deleteMail">
-                <template #trigger>
-                  <n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
-                </template>
-                {{ t('deleteMailTip') }}
-              </n-popconfirm>
-              <n-button v-if="curMail.attachments && curMail.attachments.length > 0" size="small" tertiary type="info"
-                @click="getAttachments(curMail.attachments)">
-                {{ t('attachments') }}
-              </n-button>
-              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curMail.id + '.eml'"
-                :href="getDownloadEmlUrl(curMail)">
-                <n-icon :component="CloudDownloadRound" />
-                {{ t('downloadMail') }}
-              </n-button>
-              <n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
-                <template #icon>
-                  <n-icon :component="ReplyFilled" />
-                </template>
-                {{ t('reply') }}
-              </n-button>
-              <n-button v-if="showReply" size="small" tertiary type="info" @click="forwardMail">
-                <template #icon>
-                  <n-icon :component="ForwardFilled" />
-                </template>
-                {{ t('forwardMail') }}
-              </n-button>
-              <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
-                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
-              </n-button>
-            </n-space>
-            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
-            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
-              style="margin-top: 10px;width: 100%; height: 100%;">
-            </iframe>
-            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
           </n-card>
         </n-drawer-content>
       </n-drawer>
     </div>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("attachments") }}</div>
-      </template>
-      <n-spin v-model:show="attachmentLoding">
-        <n-list hoverable clickable>
-          <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-            <n-thing class="center" :title="row.filename">
-              <template #description>
-                <n-space>
-                  <n-tag type="info">
-                    Size: {{ row.size }}
-                  </n-tag>
-                  <n-button v-if="showSaveS3" @click="saveToS3Proxy(row.filename, row.blob)" ghost type="info"
-                    size="small">
-                    {{ t('saveToS3') }}
-                  </n-button>
-                </n-space>
-              </template>
-            </n-thing>
-            <template #suffix>
-              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
-                :href="row.url">
-                <n-icon :component="CloudDownloadRound" />
-              </n-button>
-            </template>
-          </n-list-item>
-        </n-list>
-      </n-spin>
-    </n-modal>
     <n-modal v-model:show="showMultiActionDownload" preset="dialog" :title="t('downloadMail')">
       <n-tag type="info">
         {{ multiActionDownloadZip.filename }}

frontend/src/components/MailContentRenderer.vue

@@ -0,0 +1,282 @@
+<script setup>
+import { ref } from "vue";
+import { useI18n } from 'vue-i18n'
+import { CloudDownloadRound, ReplyFilled, ForwardFilled, FullscreenRound } from '@vicons/material'
+import ShadowHtmlComponent from "./ShadowHtmlComponent.vue";
+import { getDownloadEmlUrl } from '../utils/email-parser';
+import { utcToLocalDate } from '../utils';
+import { useGlobalState } from '../store';
+
+const { preferShowTextMail, useIframeShowMail, useUTCDate } = useGlobalState();
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      delete: 'Delete',
+      deleteMailTip: 'Are you sure you want to delete mail?',
+      attachments: 'View Attachments',
+      downloadMail: 'Download Mail',
+      reply: 'Reply',
+      forward: 'Forward',
+      showTextMail: 'Show Text Mail',
+      showHtmlMail: 'Show HTML Mail',
+      saveToS3: 'Save to S3',
+      size: 'Size',
+      fullscreen: 'Fullscreen',
+    },
+    zh: {
+      delete: '删除',
+      deleteMailTip: '确定要删除邮件吗?',
+      attachments: '查看附件',
+      downloadMail: '下载邮件',
+      reply: '回复',
+      forward: '转发',
+      showTextMail: '显示纯文本邮件',
+      showHtmlMail: '显示HTML邮件',
+      saveToS3: '保存到S3',
+      size: '大小',
+      fullscreen: '全屏',
+    }
+  }
+});
+
+const props = defineProps({
+  mail: {
+    type: Object,
+    required: true
+  },
+  showEMailTo: {
+    type: Boolean,
+    default: true
+  },
+  enableUserDeleteEmail: {
+    type: Boolean,
+    default: false
+  },
+  showReply: {
+    type: Boolean,
+    default: false
+  },
+  showSaveS3: {
+    type: Boolean,
+    default: false
+  },
+  // 回调函数 props
+  onDelete: {
+    type: Function,
+    default: () => { }
+  },
+  onReply: {
+    type: Function,
+    default: () => { }
+  },
+  onForward: {
+    type: Function,
+    default: () => { }
+  },
+  onSaveToS3: {
+    type: Function,
+    default: () => { }
+  }
+});
+
+const showTextMail = ref(preferShowTextMail.value);
+const showAttachments = ref(false);
+const curAttachments = ref([]);
+const attachmentLoding = ref(false);
+const showFullscreen = ref(false);
+
+const handleDelete = () => {
+  props.onDelete();
+};
+
+const handleViewAttachments = () => {
+  curAttachments.value = props.mail.attachments;
+  showAttachments.value = true;
+};
+
+const handleReply = () => {
+  props.onReply();
+};
+
+const handleForward = () => {
+  props.onForward();
+};
+
+
+const handleSaveToS3 = async (filename, blob) => {
+  attachmentLoding.value = true;
+  try {
+    await props.onSaveToS3(filename, blob);
+  } finally {
+    attachmentLoding.value = false;
+  }
+};
+
+</script>
+
+<template>
+  <div class="mail-content-renderer">
+    <!-- 邮件信息标签 -->
+    <n-space>
+      <n-tag type="info">
+        ID: {{ mail.id }}
+      </n-tag>
+      <n-tag type="info">
+        {{ utcToLocalDate(mail.created_at, useUTCDate.value) }}
+      </n-tag>
+      <n-tag type="info">
+        FROM: {{ mail.source }}
+      </n-tag>
+      <n-tag v-if="showEMailTo" type="info">
+        TO: {{ mail.address }}
+      </n-tag>
+
+      <!-- 操作按钮 -->
+      <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="handleDelete">
+        <template #trigger>
+          <n-button tertiary type="error" size="small">{{ t('delete') }}</n-button>
+        </template>
+        {{ t('deleteMailTip') }}
+      </n-popconfirm>
+
+      <n-button v-if="mail.attachments && mail.attachments.length > 0" size="small" tertiary type="info"
+        @click="handleViewAttachments">
+        {{ t('attachments') }}
+      </n-button>
+
+      <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="mail.id + '.eml'"
+        :href="getDownloadEmlUrl(mail.raw)">
+        <template #icon>
+          <n-icon :component="CloudDownloadRound" />
+        </template>
+        {{ t('downloadMail') }}
+      </n-button>
+
+      <n-button v-if="showReply" size="small" tertiary type="info" @click="handleReply">
+        <template #icon>
+          <n-icon :component="ReplyFilled" />
+        </template>
+        {{ t('reply') }}
+      </n-button>
+
+      <n-button v-if="showReply" size="small" tertiary type="info" @click="handleForward">
+        <template #icon>
+          <n-icon :component="ForwardFilled" />
+        </template>
+        {{ t('forward') }}
+      </n-button>
+
+      <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
+        {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
+      </n-button>
+
+      <n-button size="small" tertiary type="info" @click="showFullscreen = true">
+        <template #icon>
+          <n-icon :component="FullscreenRound" />
+        </template>
+        {{ t('fullscreen') }}
+      </n-button>
+    </n-space>
+
+    <!-- 邮件内容 -->
+    <div class="mail-content">
+      <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
+      <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
+      </iframe>
+      <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" class="mail-html" />
+    </div>
+  </div>
+
+  <n-drawer v-model:show="showFullscreen" width="100%" placement="bottom" :trap-focus="false" :block-scroll="false"
+    style="height: 100vh;">
+    <n-drawer-content :title="mail.subject" closable>
+      <div class="fullscreen-mail-content">
+        <pre v-if="showTextMail" class="mail-text">{{ mail.text }}</pre>
+        <iframe v-else-if="useIframeShowMail" :srcdoc="mail.message" class="mail-iframe">
+        </iframe>
+        <ShadowHtmlComponent v-else :key="mail.id" :htmlContent="mail.message" class="mail-html" />
+      </div>
+    </n-drawer-content>
+  </n-drawer>
+
+  <!-- 附件模态框 -->
+  <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
+    <template #header>
+      <div>{{ t('attachments') }}</div>
+    </template>
+    <n-spin v-model:show="attachmentLoding">
+      <n-list hoverable clickable>
+        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
+          <n-thing class="center" :title="row.filename">
+            <template #description>
+              <n-space>
+                <n-tag type="info">
+                  Size: {{ row.size }}
+                </n-tag>
+                <n-button v-if="showSaveS3" @click="handleSaveToS3(row.filename, row.blob)" ghost type="info"
+                  size="small">
+                  {{ t('saveToS3') }}
+                </n-button>
+              </n-space>
+            </template>
+          </n-thing>
+          <template #suffix>
+            <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
+              :href="row.url">
+              <n-icon :component="CloudDownloadRound" />
+            </n-button>
+          </template>
+        </n-list-item>
+      </n-list>
+    </n-spin>
+  </n-modal>
+</template>
+
+<style scoped>
+.mail-content-renderer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.mail-content {
+  margin-top: 10px;
+  flex: 1;
+}
+
+.mail-text {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.mail-iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  min-height: 400px;
+}
+
+.mail-html {
+  width: 100%;
+  height: 100%;
+}
+
+.center {
+  text-align: center;
+}
+
+.fullscreen-mail-content {
+  height: calc(100vh - 120px);
+  overflow: auto;
+}
+
+.fullscreen-mail-content .mail-iframe {
+  min-height: calc(100vh - 120px);
+}
+</style>

frontend/src/components/ShadowHtmlComponent.vue

@@ -0,0 +1,75 @@
+<template>
+    <div v-if="useFallback" v-html="htmlContent"></div>
+    <div v-else ref="shadowHost"></div>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+    htmlContent: {
+        type: String,
+        required: true,
+    },
+});
+
+const shadowHost = ref(null);
+let shadowRoot = null;
+const useFallback = ref(false);
+
+/**
+ * Renders content into Shadow DOM with fallback to v-html
+ */
+const renderShadowDom = () => {
+    if (!shadowHost.value && !useFallback.value) return;
+
+    try {
+        // Don't attempt to use Shadow DOM if already in fallback mode
+        if (useFallback.value) return;
+
+        // Initialize Shadow DOM if not already created
+        if (!shadowRoot && shadowHost.value) {
+            try {
+                shadowRoot = shadowHost.value.attachShadow({ mode: 'open' });
+            } catch (error) {
+                console.warn('Shadow DOM not supported, falling back to v-html:', error);
+                useFallback.value = true;
+                return;
+            }
+        }
+
+        // Update content if Shadow DOM exists
+        if (shadowRoot) {
+            shadowRoot.innerHTML = props.htmlContent;
+        }
+    } catch (error) {
+        console.error('Failed to render Shadow DOM, falling back to v-html:', error);
+        useFallback.value = true;
+    }
+};
+
+// Initial render when component is mounted
+onMounted(() => {
+    // Check if Shadow DOM is supported in this browser
+    if (typeof Element.prototype.attachShadow !== 'function') {
+        console.warn('Shadow DOM is not supported in this browser, using v-html fallback');
+        useFallback.value = true;
+        return;
+    }
+
+    renderShadowDom();
+});
+
+// Clean up resources when component is unmounted
+onBeforeUnmount(() => {
+    if (shadowRoot) {
+        shadowRoot.innerHTML = '';
+    }
+    shadowRoot = null;
+});
+
+// Update Shadow DOM when htmlContent changes
+watch(() => props.htmlContent, () => {
+    renderShadowDom();
+}, { flush: 'post' });
+</script>

frontend/src/i18n.ts

@@ -0,0 +1,15 @@
+import { createI18n } from 'vue-i18n'
+
+const i18n = createI18n({
+    legacy: false, // you must set `false`, to use Composition API
+    locale: 'zh', // set locale
+    fallbackLocale: 'en', // set fallback locale
+    'en': {
+        messages: {}
+    },
+    'zh': {
+        messages: {}
+    }
+})
+
+export default i18n;

frontend/src/main.js

@@ -1,29 +1,9 @@
 import { createApp } from 'vue'
-import App from './App.vue'
-import { createI18n } from 'vue-i18n'
-import router from './router'
 import { createHead } from '@unhead/vue'
 
-const i18n = createI18n({
+import App from './App.vue'
-    legacy: false, // you must set `false`, to use Composition API
+import router from './router'
-    locale: 'zh', // set locale
+import i18n from './i18n'
-    fallbackLocale: 'en', // set fallback locale
-    'en': {
-        messages: {}
-    },
-    'zh': {
-        messages: {}
-    }
-})
-
-router.beforeEach((to, from) => {
-    if (to.params.lang && ['en', 'zh'].includes(to.params.lang)) {
-        i18n.global.locale.value = to.params.lang
-    } else {
-        i18n.global.locale.value = 'zh'
-    }
-});
-
 
 const head = createHead()
 const app = createApp(App)

frontend/src/router/index.js

@@ -2,6 +2,10 @@ import { createRouter, createWebHistory } from 'vue-router'
 import Index from '../views/Index.vue'
 import User from '../views/User.vue'
 import UserOauth2Callback from '../views/user/UserOauth2Callback.vue'
+import i18n from '../i18n'
+import { useGlobalState } from '../store'
+
+const { jwt } = useGlobalState()
 
 const router = createRouter({
     history: createWebHistory(),
@@ -37,6 +41,20 @@ const router = createRouter({
             redirect: '/'
         }
     ]
-})
+});
+
+
+router.beforeEach((to, from, next) => {
+    if (to.params.lang && ['en', 'zh'].includes(to.params.lang)) {
+        i18n.global.locale.value = to.params.lang
+    } else {
+        i18n.global.locale.value = 'zh'
+    }
+    // check if query parameter has jwt, set it to store
+    if (to.query.jwt) {
+        jwt.value = to.query.jwt;
+    }
+    next()
+});
 
 export default router

frontend/src/store/index.js

@@ -10,16 +10,19 @@ export const useGlobalState = createGlobalState(
         const toggleDark = useToggle(isDark)
         const loading = ref(false);
         const announcement = useLocalStorage('announcement', '');
+        const useSimpleIndex = useLocalStorage('useSimpleIndex', false);
         const openSettings = ref({
             fetched: false,
             title: '',
             announcement: '',
+            alwaysShowAnnouncement: false,
             prefix: '',
             addressRegex: '',
             needAuth: false,
             adminContact: '',
             enableUserCreateEmail: false,
             disableAnonymousUserCreateEmail: false,
+            disableCustomAddressName: false,
             enableUserDeleteEmail: false,
             enableAutoReply: false,
             enableIndexAbout: false,
@@ -67,7 +70,7 @@ export const useGlobalState = createGlobalState(
         const useIframeShowMail = useStorage('useIframeShowMail', false);
         const preferShowTextMail = useStorage('preferShowTextMail', false);
         const userJwt = useStorage('userJwt', '');
-        const userTab = useSessionStorage('userTab', 'user_settings');
+        const userTab = useSessionStorage('userTab', 'address_management');
         const indexTab = useSessionStorage('indexTab', 'mailbox');
         const globalTabplacement = useStorage('globalTabplacement', 'top');
         const useSideMargin = useStorage('useSideMargin', true);
@@ -92,6 +95,8 @@ export const useGlobalState = createGlobalState(
             is_admin: false,
             /** @type {string | null} */
             access_token: null,
+            /** @type {string | null} */
+            new_user_token: null,
             /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
             user_role: null,
         });
@@ -139,6 +144,7 @@ export const useGlobalState = createGlobalState(
             showAdminPage,
             userOauth2SessionState,
             userOauth2SessionClientID,
+            useSimpleIndex,
         }
     },
 )

frontend/src/views/Admin.vue

@@ -18,12 +18,12 @@ import Mails from './admin/Mails.vue';
 import MailsUnknow from './admin/MailsUnknow.vue';
 import About from './common/About.vue';
 import Maintenance from './admin/Maintenance.vue';
+import DatabaseManager from './admin/DatabaseManager.vue';
 import Appearance from './common/Appearance.vue';
 import Telegram from './admin/Telegram.vue';
 import Webhook from './admin/Webhook.vue';
 import MailWebhook from './admin/MailWebhook.vue';
 import WorkerConfig from './admin/WorkerConfig.vue';
-import SendMail from './admin/SendMail.vue';
 
 const {
   adminAuth, showAdminAuth, adminTab, loading,
@@ -31,6 +31,12 @@ const {
 } = useGlobalState()
 const message = useMessage()
 
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./admin/SendMail.vue')
+    .finally(() => loading.value = false);
+});
+
 const authFunc = async () => {
   try {
     adminAuth.value = tmpAdminAuth.value;
@@ -62,6 +68,7 @@ const { t } = useI18n({
       webhookSettings: 'Webhook Settings',
       statistics: 'Statistics',
       maintenance: 'Maintenance',
+      database: 'Database',
       workerconfig: 'Worker Config',
       appearance: 'Appearance',
       about: 'About',
@@ -88,6 +95,7 @@ const { t } = useI18n({
       webhookSettings: 'Webhook 设置',
       statistics: '统计',
       maintenance: '维护',
+      database: '数据库',
       workerconfig: 'Worker 配置',
       appearance: '外观',
       about: '关于',
@@ -107,7 +115,7 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div>
+  <div v-if="userSettings.fetched">
     <n-modal v-model:show="showAdminPasswordModal" :closable="false" :closeOnEsc="false" :maskClosable="false"
       preset="dialog" :title="t('accessHeader')">
       <p>{{ t('accessTip') }}</p>
@@ -121,6 +129,9 @@ onMounted(async () => {
     <n-tabs v-if="showAdminPage" type="card" v-model:value="adminTab" :placement="globalTabplacement">
       <n-tab-pane name="qucickSetup" :tab="t('qucickSetup')">
         <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="database" :tab="t('database')">
+            <DatabaseManager />
+          </n-tab-pane>
           <n-tab-pane name="account_settings" :tab="t('account_settings')">
             <AccountSettings />
           </n-tab-pane>
@@ -191,6 +202,9 @@ onMounted(async () => {
       </n-tab-pane>
       <n-tab-pane name="maintenance" :tab="t('maintenance')">
         <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="database" :tab="t('database')">
+            <DatabaseManager />
+          </n-tab-pane>
           <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
             <WorkerConfig />
           </n-tab-pane>

frontend/src/views/Header.vue

@@ -126,7 +126,9 @@ const menuOptions = computed(() => [
                 type: menuValue.value == "admin" ? "primary" : "default",
                 style: "width: 100%",
                 onClick: async () => {
+                    loading.value = true;
                     await router.push(getRouterPathWithLang('/admin', locale.value));
+                    loading.value = false;
                     showMobileMenu.value = false;
                 }
             },
@@ -214,7 +216,9 @@ const logoClick = async () => {
     if (logoClickCount.value >= 5) {
         logoClickCount.value = 0;
         message.info("Change to admin Page");
+        loading.value = true;
         await router.push(getRouterPathWithLang('/admin', locale.value));
+        loading.value = false;
     } else {
         logoClickCount.value++;
     }

frontend/src/views/Index.vue

@@ -5,20 +5,30 @@ import { useRoute } from 'vue-router'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
+import { useIsMobile } from '../utils/composables'
+import { FullscreenExitOutlined } from '@vicons/material'
 
 import AddressBar from './index/AddressBar.vue';
 import MailBox from '../components/MailBox.vue';
 import SendBox from '../components/SendBox.vue';
 import AutoReply from './index/AutoReply.vue';
 import AccountSettings from './index/AccountSettings.vue';
+import Appearance from './common/Appearance.vue';
 import Webhook from './index/Webhook.vue';
 import Attachment from './index/Attachment.vue';
 import About from './common/About.vue';
+import SimpleIndex from './index/SimpleIndex.vue';
 
-const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
+const { loading, settings, openSettings, indexTab, globalTabplacement, useSimpleIndex } = useGlobalState()
-const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
 const message = useMessage()
 const route = useRoute()
+const isMobile = useIsMobile()
+
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./index/SendMail.vue')
+    .finally(() => loading.value = false);
+});
 
 const { t } = useI18n({
   messages: {
@@ -28,23 +38,27 @@ const { t } = useI18n({
       sendmail: 'Send Mail',
       auto_reply: 'Auto Reply',
       accountSettings: 'Account Settings',
+      appearance: 'Appearance',
       about: 'About',
       s3Attachment: 'S3 Attachment',
       saveToS3Success: 'save to s3 success',
       webhookSettings: 'Webhook Settings',
       query: 'Query',
+      enterSimpleMode: 'Simple Mode',
     },
     zh: {
       mailbox: '收件箱',
       sendbox: '发件箱',
       sendmail: '发送邮件',
       auto_reply: '自动回复',
-      accountSettings: '账户设置',
+      accountSettings: '账户',
+      appearance: '外观',
       about: '关于',
       s3Attachment: 'S3附件',
       saveToS3Success: '保存到s3成功',
       webhookSettings: 'Webhook 设置',
       query: '查询',
+      enterSimpleMode: '极简模式',
     }
   }
 });
@@ -117,8 +131,22 @@ onMounted(() => {
 
 <template>
   <div>
+    <div v-if="useSimpleIndex">
+      <SimpleIndex />
+    </div>
+    <div v-else>
       <AddressBar />
       <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
+        <template #prefix v-if="!isMobile">
+          <n-button @click="useSimpleIndex = true" tertiary size="small">
+            <template #icon>
+              <n-icon>
+                <FullscreenExitOutlined />
+              </n-icon>
+            </template>
+            {{ t('enterSimpleMode') }}
+          </n-button>
+        </template>
         <n-tab-pane name="mailbox" :tab="t('mailbox')">
           <div v-if="showMailIdQuery" style="margin-bottom: 10px;">
             <n-input-group>
@@ -142,6 +170,9 @@ onMounted(() => {
         <n-tab-pane name="accountSettings" :tab="t('accountSettings')">
           <AccountSettings />
         </n-tab-pane>
+        <n-tab-pane name="appearance" :tab="t('appearance')">
+          <Appearance :showUseSimpleIndex="true" />
+        </n-tab-pane>
         <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
           <AutoReply />
         </n-tab-pane>
@@ -156,4 +187,5 @@ onMounted(() => {
         </n-tab-pane>
       </n-tabs>
     </div>
+  </div>
 </template>

frontend/src/views/User.vue

@@ -7,6 +7,7 @@ import AddressMangement from './user/AddressManagement.vue';
 import UserSettingsPage from './user/UserSettings.vue';
 import UserBar from './user/UserBar.vue';
 import BindAddress from './user/BindAddress.vue';
+import UserMailBox from './user/UserMailBox.vue';
 
 const {
     userTab, globalTabplacement, userSettings
@@ -16,11 +17,13 @@ const { t } = useI18n({
     messages: {
         en: {
             address_management: 'Address Management',
+            user_mail_box_tab: 'Mail Box',
             user_settings: 'User Settings',
             bind_address: 'Bind Mail Address',
         },
         zh: {
             address_management: '地址管理',
+            user_mail_box_tab: '收件箱',
             user_settings: '用户设置',
             bind_address: '绑定邮箱地址',
         }
@@ -36,6 +39,9 @@ const { t } = useI18n({
             <n-tab-pane name="address_management" :tab="t('address_management')">
                 <AddressMangement />
             </n-tab-pane>
+            <n-tab-pane name="user_mail_box_tab" :tab="t('user_mail_box_tab')">
+                <UserMailBox />
+            </n-tab-pane>
             <n-tab-pane name="user_settings" :tab="t('user_settings')">
                 <UserSettingsPage />
             </n-tab-pane>

frontend/src/views/admin/Account.vue

@@ -27,13 +27,18 @@ const { t } = useI18n({
             addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             delete: 'Delete',
             deleteTip: 'Are you sure to delete this email?',
-            delteAccount: 'Delete Account',
+            deleteAccount: 'Delete Account',
             viewMails: 'View Mails',
             viewSendBox: 'View SendBox',
             itemCount: 'itemCount',
             query: 'Query',
             addressQueryTip: 'Leave blank to query all addresses',
-            actions: 'Actions'
+            clearInbox: 'Clear Inbox',
+            clearSentItems: 'Clear Sent Items',
+            clearInboxTip: 'Are you sure to clear inbox for this email?',
+            clearSentItemsTip: 'Are you sure to clear sent items for this email?',
+            actions: 'Actions',
+            success: 'Success',
         },
         zh: {
             name: '名称',
@@ -46,13 +51,18 @@ const { t } = useI18n({
             addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             delete: '删除',
             deleteTip: '确定要删除这个邮箱吗？',
-            delteAccount: '删除邮箱',
+            deleteAccount: '删除邮箱',
             viewMails: '查看邮件',
             viewSendBox: '查看发件箱',
             itemCount: '总数',
             query: '查询',
             addressQueryTip: '留空查询所有地址',
+            clearInbox: '清空收件箱',
+            clearSentItems: '清空发件箱',
+            clearInboxTip: '确定要清空这个邮箱的收件箱吗？',
+            clearSentItemsTip: '确定要清空这个邮箱的发件箱吗？',
             actions: '操作',
+            success: '成功',
         }
     }
 });
@@ -60,6 +70,8 @@ const { t } = useI18n({
 const showEmailCredential = ref(false)
 const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
+const curClearInboxAddressId = ref(0);
+const curClearSentItemsAddressId = ref(0);
 
 const addressQuery = ref("")
 
@@ -68,6 +80,8 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 const showDeleteAccount = ref(false)
+const showClearInbox = ref(false)
+const showClearSentItems = ref(false)
 
 const showCredential = async (id) => {
     try {
@@ -83,7 +97,7 @@ const showCredential = async (id) => {
 const deleteEmail = async () => {
     try {
         await api.adminDeleteAddress(curDeleteAddressId.value)
-        message.success("success");
+        message.success(t("success"));
         await fetchData()
     } catch (error) {
         message.error(error.message || "error");
@@ -92,6 +106,34 @@ const deleteEmail = async () => {
     }
 }
 
+const clearInbox = async () => {
+    try {
+        await api.fetch(`/admin/clear_inbox/${curClearInboxAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearInbox.value = false
+    }
+}
+
+const clearSentItems = async () => {
+    try {
+        await api.fetch(`/admin/clear_sent_items/${curClearSentItemsAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearSentItems.value = false
+    }
+}
+
 const fetchData = async () => {
     try {
         addressQuery.value = addressQuery.value.trim()
@@ -212,7 +254,8 @@ const columns = [
                                             }
                                         },
                                         { default: () => t('viewMails') }
-                                    )
+                                    ),
+                                    show: row.mail_count > 0
                                 },
                                 {
                                     label: () => h(NButton,
@@ -224,7 +267,34 @@ const columns = [
                                             }
                                         },
                                         { default: () => t('viewSendBox') }
-                                    )
+                                    ),
+                                    show: row.send_count > 0
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curClearInboxAddressId.value = row.id;
+                                                showClearInbox.value = true;
+                                            }
+                                        },
+                                        { default: () => t('clearInbox') }
+                                    ),
+                                    show: row.mail_count > 0
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curClearSentItemsAddressId.value = row.id;
+                                                showClearSentItems.value = true;
+                                            }
+                                        },
+                                        { default: () => t('clearSentItems') }
+                                    ),
+                                    show: row.send_count > 0
                                 },
                                 {
                                     label: () => h(NButton,
@@ -271,11 +341,27 @@ onMounted(async () => {
             <template #action>
             </template>
         </n-modal>
-        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('delteAccount')">
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('deleteAccount')">
             <p>{{ t('deleteTip') }}</p>
             <template #action>
                 <n-button :loading="loading" @click="deleteEmail" size="small" tertiary type="error">
-                    {{ t('delteAccount') }}
+                    {{ t('deleteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearInbox" preset="dialog" :title="t('clearInbox')">
+            <p>{{ t('clearInboxTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearInbox" size="small" tertiary type="error">
+                    {{ t('clearInbox') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearSentItems" preset="dialog" :title="t('clearSentItems')">
+            <p>{{ t('clearSentItemsTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearSentItems" size="small" tertiary type="error">
+                    {{ t('clearSentItems') }}
                 </n-button>
             </template>
         </n-modal>

frontend/src/views/admin/AccountSettings.vue

@@ -1,17 +1,19 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, h } from 'vue';
 import { useI18n } from 'vue-i18n'
+import { NButton, NPopconfirm, NInput, NSelect } from 'naive-ui'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 
-const { loading } = useGlobalState()
+const { loading, openSettings } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
     messages: {
         en: {
             tip: 'You can manually input the following multiple select input and enter',
+            manualInputPrompt: 'Type and press Enter to add',
             save: 'Save',
             successTip: 'Save Success',
             address_block_list: 'Address Block Keywords for Users(Admin can skip)',
@@ -20,9 +22,24 @@ const { t } = useI18n({
             noLimitSendAddressList: 'No Balance Limit Send Address List',
             verified_address_list: 'Verified Address List(Can send email by cf internal api)',
             fromBlockList: 'Block Keywords for receive email',
+            block_receive_unknow_address_email: 'Block receive unknow address email',
+            email_forwarding_config: 'Email Forwarding Configuration',
+            domain_list: 'Domain List',
+            forward_address: 'Forward Address',
+            actions: 'Actions',
+            select_domain: 'Select Domain',
+            forward_placeholder: 'forward@example.com',
+            delete_rule: 'Delete',
+            delete_rule_confirm: 'Are you sure you want to delete this rule?',
+            delete_success: 'Delete Success',
+            forwarding_rule_warning: 'Each rule will run, if domains is empty, all emails will be forwarded, forward address needs to be a verified address',
+            add: 'Add',
+            cancel: 'Cancel',
+            config: 'Config',
         },
         zh: {
             tip: '您可以手动输入以下多选输入框, 回车增加',
+            manualInputPrompt: '输入后按回车键添加',
             save: '保存',
             successTip: '保存成功',
             address_block_list: '邮件地址屏蔽关键词(管理员可跳过检查)',
@@ -31,6 +48,20 @@ const { t } = useI18n({
             noLimitSendAddressList: '无余额限制发送地址列表',
             verified_address_list: '已验证地址列表(可通过 cf 内部 api 发送邮件)',
             fromBlockList: '接收邮件地址屏蔽关键词',
+            block_receive_unknow_address_email: '禁止接收未知地址邮件',
+            email_forwarding_config: '邮件转发配置',
+            domain_list: '域名列表',
+            forward_address: '转发地址',
+            actions: '操作',
+            select_domain: '选择域名',
+            forward_placeholder: 'forward@example.com',
+            delete_rule: '删除',
+            delete_rule_confirm: '确定要删除这条规则吗？',
+            delete_success: '删除成功',
+            forwarding_rule_warning: '每条规则都会运行，如果 domains 为空，则转发所有邮件，转发地址需要为已验证的地址',
+            add: '添加',
+            cancel: '取消',
+            config: '配置',
         }
     }
 });
@@ -40,6 +71,90 @@ const sendAddressBlockList = ref([])
 const noLimitSendAddressList = ref([])
 const verifiedAddressList = ref([])
 const fromBlockList = ref([])
+const emailRuleSettings = ref({
+    blockReceiveUnknowAddressEmail: false,
+    emailForwardingList: []
+})
+
+const showEmailForwardingModal = ref(false)
+const emailForwardingList = ref([])
+
+
+const emailForwardingColumns = [
+    {
+        title: t('domain_list'),
+        key: 'domains',
+        render: (row, index) => {
+            return h(NSelect, {
+                value: Array.isArray(row.domains) ? row.domains : [],
+                onUpdateValue: (val) => {
+                    emailForwardingList.value[index].domains = val
+                },
+                options: openSettings.value?.domains || [],
+                multiple: true,
+                filterable: true,
+                tag: true,
+                placeholder: t('select_domain')
+            })
+        }
+    },
+    {
+        title: t('forward_address'),
+        key: 'forward',
+        render: (row, index) => {
+            return h(NInput, {
+                value: row.forward,
+                onUpdateValue: (val) => {
+                    emailForwardingList.value[index].forward = val
+                },
+                placeholder: 'forward@example.com'
+            })
+        }
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render: (row, index) => {
+            return h('div', { style: 'display: flex; gap: 8px;' }, [
+                h(NPopconfirm, {
+                    onPositiveClick: () => {
+                        emailForwardingList.value = emailForwardingList.value.filter((_, i) => i !== index)
+                        message.success(t('delete_success'))
+                    }
+                }, {
+                    default: () => t('delete_rule_confirm'),
+                    trigger: () => h(NButton, {
+                        size: 'small',
+                        type: 'error'
+                    }, { default: () => t('delete_rule') })
+                })
+            ])
+        }
+    }
+]
+
+const openEmailForwardingModal = () => {
+    // 从 emailRuleSettings 转换出列表数据
+    emailForwardingList.value = emailRuleSettings.value.emailForwardingList ?
+        [...emailRuleSettings.value.emailForwardingList] : []
+    showEmailForwardingModal.value = true
+}
+
+const addNewEmailForwardingItem = () => {
+    emailForwardingList.value = [
+        ...emailForwardingList.value,
+        {
+            domains: [],
+            forward: ''
+        }
+    ]
+}
+
+const saveEmailForwardingConfig = () => {
+    emailRuleSettings.value.emailForwardingList = [...emailForwardingList.value]
+    showEmailForwardingModal.value = false
+}
+
 
 const fetchData = async () => {
     try {
@@ -49,6 +164,10 @@ const fetchData = async () => {
         verifiedAddressList.value = res.verifiedAddressList || []
         fromBlockList.value = res.fromBlockList || []
         noLimitSendAddressList.value = res.noLimitSendAddressList || []
+        emailRuleSettings.value = res.emailRuleSettings || {
+            blockReceiveUnknowAddressEmail: false,
+            emailForwardingList: []
+        }
     } catch (error) {
         message.error(error.message || "error");
     }
@@ -64,6 +183,7 @@ const save = async () => {
                 verifiedAddressList: verifiedAddressList.value || [],
                 fromBlockList: fromBlockList.value || [],
                 noLimitSendAddressList: noLimitSendAddressList.value || [],
+                emailRuleSettings: emailRuleSettings.value,
             })
         })
         message.success(t('successTip'))
@@ -81,33 +201,88 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card :bordered="false" embedded style="max-width: 600px;">
-            <n-alert :show-icon="false" type="warning" style="margin-bottom: 10px;">
+            <n-alert :show-icon="false" :bordered="false" type="warning" style="margin-bottom: 10px;">
-                {{ t("tip") }}
+                <span>{{ t("tip") }}</span>
             </n-alert>
+            <n-flex justify="end">
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
             <n-form-item-row :label="t('address_block_list')">
                 <n-select v-model:value="addressBlockList" filterable multiple tag
-                    :placeholder="t('address_block_list_placeholder')" />
+                    :placeholder="t('address_block_list_placeholder')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
             </n-form-item-row>
             <n-form-item-row :label="t('send_address_block_list')">
                 <n-select v-model:value="sendAddressBlockList" filterable multiple tag
-                    :placeholder="t('address_block_list_placeholder')" />
+                    :placeholder="t('address_block_list_placeholder')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
             </n-form-item-row>
             <n-form-item-row :label="t('noLimitSendAddressList')">
                 <n-select v-model:value="noLimitSendAddressList" filterable multiple tag
-                    :placeholder="t('noLimitSendAddressList')" />
+                    :placeholder="t('noLimitSendAddressList')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
             </n-form-item-row>
             <n-form-item-row :label="t('verified_address_list')">
                 <n-select v-model:value="verifiedAddressList" filterable multiple tag
-                    :placeholder="t('verified_address_list')" />
+                    :placeholder="t('verified_address_list')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
             </n-form-item-row>
             <n-form-item-row :label="t('fromBlockList')">
-                <n-select v-model:value="fromBlockList" filterable multiple tag :placeholder="t('fromBlockList')" />
+                <n-select v-model:value="fromBlockList" filterable multiple tag :placeholder="t('fromBlockList')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
+            </n-form-item-row>
+            <n-form-item-row :label="t('block_receive_unknow_address_email')">
+                <n-switch v-model:value="emailRuleSettings.blockReceiveUnknowAddressEmail" :round="false" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('email_forwarding_config')">
+                <n-button @click="openEmailForwardingModal">{{ t('config') }}</n-button>
             </n-form-item-row>
-            <n-button @click="save" type="primary" block :loading="loading">
-                {{ t('save') }}
-            </n-button>
         </n-card>
     </div>
+
+    <!-- 邮件转发配置弹窗 -->
+    <n-modal v-model:show="showEmailForwardingModal" preset="card" :title="t('email_forwarding_config')"
+        style="max-width: 800px;">
+        <n-space vertical>
+            <n-alert :show-icon="false" :bordered="false" type="warning">
+                <span>{{ t('forwarding_rule_warning') }}</span>
+            </n-alert>
+            <n-space justify="end">
+                <n-button @click="addNewEmailForwardingItem">{{ t('add') }}</n-button>
+            </n-space>
+            <n-data-table :columns="emailForwardingColumns" :data="emailForwardingList" :bordered="false" striped />
+            <n-space justify="end">
+                <n-button @click="saveEmailForwardingConfig" type="primary">{{ t('save') }}</n-button>
+            </n-space>
+        </n-space>
+    </n-modal>
 </template>
 
 <style scoped>

frontend/src/views/admin/CreateAccount.vue

@@ -77,7 +77,7 @@ onMounted(async () => {
         </n-modal>
         <n-card :bordered="false" embedded style="max-width: 600px;">
             <n-form-item-row v-if="openSettings.prefix" :label="t('enablePrefix')">
-                <n-checkbox v-model:checked="enablePrefix" />
+                <n-switch v-model:value="enablePrefix" :round="false" />
             </n-form-item-row>
             <n-form-item-row :label="t('address')">
                 <n-input-group>

frontend/src/views/admin/DatabaseManager.vue

@@ -0,0 +1,126 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { CleaningServicesFilled } from '@vicons/material'
+
+import { api } from '../../api'
+import { init } from 'vooks/lib/on-fonts-ready';
+
+const message = useMessage()
+const dbVersionData = ref({
+    need_initialization: false,
+    need_migration: false,
+    current_db_version: '',
+    code_db_version: ''
+})
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            need_initialization_tip: 'Database initialization is required. Please initialize the database.',
+            need_migration_tip: 'Database migration is required. Please migrate the database.',
+            current_db_version: 'Current DB Version',
+            code_db_version: 'Code Needed DB Version',
+            init: 'Initialize Database',
+            migration: 'Migrate Database',
+            initializationSuccess: 'Database initialized successfully',
+            migrationSuccess: 'Database migrated successfully',
+        },
+        zh: {
+            need_initialization_tip: '需要初始化数据库，请初始化数据库',
+            need_migration_tip: '需要迁移数据库，请迁移数据库',
+            current_db_version: '当前数据库版本',
+            code_db_version: '需要的数据库版本',
+            init: '初始化数据库',
+            migration: '升级数据库 Schema',
+            initializationSuccess: '数据库初始化成功',
+            migrationSuccess: '数据库升级成功',
+        }
+    }
+});
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch('/admin/db_version');
+        if (res) Object.assign(dbVersionData.value, res);
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const initialization = async () => {
+    try {
+        await api.fetch('/admin/db_initialize', {
+            method: 'POST'
+        });
+        await fetchData();
+        message.success(t('initializationSuccess'));
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const migration = async () => {
+    try {
+        await api.fetch('/admin/db_migration', {
+            method: 'POST'
+        });
+        await fetchData();
+        message.success(t('migrationSuccess'));
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded>
+            <n-alert v-if="dbVersionData.need_initialization" type="warning" :show-icon="false" :bordered="false">
+                <span>{{ t('need_initialization_tip') }}</span>
+                <n-button @click="initialization" type="primary" secondary block :loading="loading">
+                    {{ t('init') }}
+                </n-button>
+            </n-alert>
+            <n-alert v-if="dbVersionData.need_migration" type="warning" :show-icon="false" :bordered="false">
+                <span>{{ t('need_migration_tip') }}</span>
+                <n-button @click="migration" type="primary" secondary block :loading="loading">
+                    {{ t('migration') }}
+                </n-button>
+            </n-alert>
+            <n-alert type="info" :show-icon="false" :bordered="false">
+                <span>
+                    {{ t('current_db_version') }}: {{ dbVersionData.current_db_version || "unknown" }},
+                    {{ t('code_db_version') }}: {{ dbVersionData.code_db_version }}
+                </span>
+            </n-alert>
+
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.n-card {
+    max-width: 800px;
+}
+
+.n-alert {
+    margin-bottom: 10px;
+}
+
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/src/views/admin/Maintenance.vue

@@ -11,10 +11,12 @@ const cleanupModel = ref({
     cleanMailsDays: 30,
     enableUnknowMailsAutoCleanup: false,
     cleanUnknowMailsDays: 30,
-    enableAddressAutoCleanup: false,
-    cleanAddressDays: 30,
     enableSendBoxAutoCleanup: false,
     cleanSendBoxDays: 30,
+    enableAddressAutoCleanup: false,
+    cleanAddressDays: 30,
+    enableInactiveAddressAutoCleanup: false,
+    cleanInactiveAddressDays: 30,
 })
 
 const { t } = useI18n({
@@ -24,22 +26,26 @@ const { t } = useI18n({
             mailBoxLabel: 'Cleanup the inbox before n days',
             mailUnknowLabel: "Cleanup the unknow mail before n days",
             sendBoxLabel: "Cleanup the sendbox before n days",
+            addressCreateLabel: "Cleanup the address created before n days",
+            inactiveAddressLabel: "Cleanup the inactive address before n days",
             cleanupNow: "Cleanup now",
             autoCleanup: "Auto cleanup",
             cleanupSuccess: "Cleanup success",
             save: "Save",
-            cronTip: "Enable cron cleanup, need to configure [crons] in worker, please refer to the document",
+            cronTip: "Enable cron cleanup, need to configure [crons] in worker, please refer to the document, setting 0 days means clear all",
         },
         zh: {
             tip: '请输入天数',
             mailBoxLabel: '清理 n 天前的收件箱',
             mailUnknowLabel: "清理 n 天前的无收件人邮件",
             sendBoxLabel: "清理 n 天前的发件箱",
+            addressCreateLabel: "清理 n 天前创建的地址",
+            inactiveAddressLabel: "清理 n 天前的未活跃地址",
             autoCleanup: "自动清理",
             cleanupSuccess: "清理成功",
             cleanupNow: "立即清理",
             save: "保存",
-            cronTip: "启用定时清理, 需在 worker 配置 [crons] 参数, 请参考文档",
+            cronTip: "启用定时清理, 需在 worker 配置 [crons] 参数, 请参考文档, 配置为 0 天表示全部清空",
         }
     }
 });
@@ -86,9 +92,14 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card :bordered="false" embedded>
-            <n-alert :show-icon="false" :bordered="false">
+            <n-alert :show-icon="false" :bordered="false" type="warning">
                 <span>{{ t('cronTip') }}</span>
             </n-alert>
+            <n-flex justify="end">
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
             <n-form :model="cleanupModel">
                 <n-form-item-row :label="t('mailBoxLabel')">
                     <n-checkbox v-model:checked="cleanupModel.enableMailsAutoCleanup">
@@ -126,9 +137,30 @@ onMounted(async () => {
                         {{ t('cleanupNow') }}
                     </n-button>
                 </n-form-item-row>
-                <n-button @click="save" type="primary" block :loading="loading">
+                <n-form-item-row :label="t('addressCreateLabel')">
-                    {{ t('save') }}
+                    <n-checkbox v-model:checked="cleanupModel.enableAddressAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanAddressDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('addressCreated', cleanupModel.cleanAddressDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
                     </n-button>
+                </n-form-item-row>
+                <n-form-item-row :label="t('inactiveAddressLabel')">
+                    <n-checkbox v-model:checked="cleanupModel.enableInactiveAddressAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanInactiveAddressDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('inactiveAddress', cleanupModel.cleanInactiveAddressDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
+                    </n-button>
+                </n-form-item-row>
             </n-form>
         </n-card>
     </div>

frontend/src/views/admin/Telegram.vue

@@ -15,25 +15,29 @@ const { t } = useI18n({
             init: 'Init',
             successTip: 'Success',
             status: 'Check Status',
-            enableTelegramAllowList: 'Enable Telegram Allow List(Manually input user ID)',
+            enableTelegramAllowList: 'Enable Telegram Allow List(Manually input Chat ID)',
             enable: 'Enable',
-            telegramAllowList: 'Telegram Allow List(Manually input telegram user ID)',
+            telegramAllowList: 'Telegram Allow List(Manually input telegram Chat ID)',
+            manualInputPrompt: 'Type and press Enter to add',
             save: 'Save',
             miniAppUrl: 'Telegram Mini App URL',
-            enableGlobalMailPush: 'Enable Global Mail Push(Manually input telegram user ID)',
+            enableGlobalMailPush: 'Enable Global Mail Push(Manually input telegram Chat ID)',
-            globalMailPushList: 'Global Mail Push List',
+            globalMailPushList: 'Global Mail Push Chat ID List',
+            globalMailPushListTip: 'Support chat_id of private chat/group/channel. You can send a message to your bot, then visit this link to see chat_id, https://api.telegram.org/bot<Replace with your BOT TOKEN>/getUpdates',
         },
         zh: {
             init: '初始化',
             successTip: '成功',
             status: '查看状态',
-            enableTelegramAllowList: '启用 Telegram 白名单(手动输入用户 ID, 回车增加)',
+            enableTelegramAllowList: '启用 Telegram 白名单(手动输入 Chat ID, 回车增加)',
             enable: '启用',
-            telegramAllowList: 'Telegram 白名单(手动输入用户 ID, 回车增加)',
+            telegramAllowList: 'Telegram 白名单(手动输入 Chat ID, 回车增加)',
+            manualInputPrompt: '输入后按回车键添加',
             save: '保存',
             miniAppUrl: '电报小程序 URL(请输入你部署的电报小程序网页地址)',
-            enableGlobalMailPush: '启用全局邮件推送(手动输入邮箱管理员的 telegram 用户 ID, 回车增加)',
+            enableGlobalMailPush: '启用全局邮件推送(手动输入邮箱管理员的 telegram Chat ID, 回车增加)',
-            globalMailPushList: '全局邮件推送用户列表',
+            globalMailPushList: '全局邮件推送 Chat ID 列表',
+            globalMailPushListTip: '支持对话/群组/频道的 Chat ID, 您可以发送一条消息给您的机器人，然后访问此链接来查看 chat_id, https://api.telegram.org/bot<这里替换成您的 BOT TOKEN>/getUpdates',
         }
     }
 });
@@ -113,6 +117,17 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+            <n-flex justify="end">
+                <n-button @click="fetchStatus" secondary>
+                    {{ t('status') }}
+                </n-button>
+                <n-button @click="init" type="primary">
+                    {{ t('init') }}
+                </n-button>
+                <n-button @click="saveSettings" type="primary">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
             <n-card :bordered="false" embedded>
                 <n-form-item-row :label="t('enableTelegramAllowList')">
                     <n-input-group>
@@ -120,31 +135,41 @@ onMounted(async () => {
                             {{ t('enable') }}
                         </n-checkbox>
                         <n-select v-model:value="settings.allowList" filterable multiple tag style="width: 80%;"
-                            :placeholder="t('telegramAllowList')" />
+                            :placeholder="t('telegramAllowList')">
+                            <template #empty>
+                                <n-text depth="3">
+                                    {{ t('manualInputPrompt') }}
+                                </n-text>
+                            </template>
+                        </n-select>
                     </n-input-group>
                 </n-form-item-row>
+                <br />
                 <n-form-item-row :label="t('enableGlobalMailPush')">
                     <n-input-group>
                         <n-checkbox v-model:checked="settings.enableGlobalMailPush" style="width: 20%;">
                             {{ t('enable') }}
                         </n-checkbox>
                         <n-select v-model:value="settings.globalMailPushList" filterable multiple tag
-                            style="width: 80%;" :placeholder="t('globalMailPushList')" />
+                            style="width: 80%;" :placeholder="t('globalMailPushList')">
+                            <template #empty>
+                                <n-text depth="3">
+                                    {{ t('manualInputPrompt') }}
+                                </n-text>
+                            </template>
+                        </n-select>
                     </n-input-group>
+                    <template #feedback>
+                        <n-text depth="3">
+                            {{ t('globalMailPushListTip') }}
+                        </n-text>
+                    </template>
                 </n-form-item-row>
+                <br />
                 <n-form-item-row :label="t('miniAppUrl')">
                     <n-input v-model:value="settings.miniAppUrl"></n-input>
                 </n-form-item-row>
-                <n-button @click="saveSettings" type="primary" block>
-                    {{ t('save') }}
-                </n-button>
             </n-card>
-            <n-button @click="init" type="primary" block>
-                {{ t('init') }}
-            </n-button>
-            <n-button @click="fetchStatus" secondary block>
-                {{ t('status') }}
-            </n-button>
             <pre v-if="status.fetched">{{ JSON.stringify(status, null, 2) }}</pre>
         </n-card>
     </div>
@@ -157,8 +182,4 @@ onMounted(async () => {
     place-items: center;
     justify-content: center;
 }
-
-.n-button {
-    margin-top: 10px;
-}
 </style>

frontend/src/views/admin/UserAddressManagement.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NBadge } from 'naive-ui'
+
+import { api } from '../../api'
+
+const props = defineProps({
+    user_id: {
+        type: Number,
+        required: true
+    }
+});
+
+const message = useMessage()
+
+const { locale, t } = useI18n({
+    messages: {
+        en: {
+            success: 'success',
+            name: 'Name',
+            mail_count: 'Mail Count',
+            send_count: 'Send Count',
+        },
+        zh: {
+            success: '成功',
+            name: '名称',
+            mail_count: '邮件数量',
+            send_count: '发送数量',
+        }
+    }
+});
+
+const data = ref([])
+
+const fetchData = async () => {
+    try {
+        const { results } = await api.fetch(
+            `/admin/users/bind_address/${props.user_id}`,
+        );
+        data.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('name'),
+        key: "name"
+    },
+    {
+        title: t('mail_count'),
+        key: "mail_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.mail_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    },
+    {
+        title: t('send_count'),
+        key: "send_count",
+        render(row) {
+            return h(NBadge, {
+                value: row.send_count,
+                'show-zero': true,
+                max: 99,
+                type: "success"
+            })
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div style="overflow: auto;">
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+    </div>
+</template>
+
+<style scoped>
+.n-data-table {
+    min-width: 700px;
+}
+</style>

frontend/src/views/admin/UserManagement.vue

@@ -8,6 +8,8 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { hashPassword } from '../../utils';
 
+import UserAddressManagement from './UserAddressManagement.vue'
+
 const { loading, openSettings } = useGlobalState()
 const message = useMessage()
 
@@ -34,6 +36,7 @@ const { t } = useI18n({
             prefix: 'Prefix',
             domains: 'Domains',
             roleDonotExist: 'Current Role does not exist',
+            userAddressManagement: 'Address Management',
         },
         zh: {
             success: '成功',
@@ -56,6 +59,7 @@ const { t } = useI18n({
             prefix: '前缀',
             domains: '域名',
             roleDonotExist: '当前角色不存在',
+            userAddressManagement: '地址管理',
         }
     }
 });
@@ -75,6 +79,7 @@ const user = ref({
     password: ""
 })
 const showChangeRole = ref(false)
+const showUserAddressManagement = ref(false)
 const userRoles = ref([])
 const curUserRole = ref('')
 const userRolesOptions = computed(() => {
@@ -214,12 +219,25 @@ const columns = [
         title: t('address_count'),
         key: "address_count",
         render(row) {
-            return h(NBadge, {
+            return h(NButton,
+                {
+                    text: true,
+                    onClick: () => {
+                        if (row.address_count <= 0) return;
+                        curUserId.value = row.id;
+                        showUserAddressManagement.value = true;
+                    }
+                },
+                {
+                    icon: () => h(NBadge, {
                         value: row.address_count,
                         'show-zero': true,
                         max: 99,
                         type: "success"
-            })
+                    }),
+                    default: () => row.address_count > 0 ? t('userAddressManagement') : ""
+                }
+            )
         }
     },
     {
@@ -239,6 +257,19 @@ const columns = [
                             icon: () => h(MenuFilled),
                             key: "action",
                             children: [
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                showUserAddressManagement.value = true;
+                                            }
+                                        },
+                                        { default: () => t('userAddressManagement') }
+                                    ),
+                                    show: row.address_count > 0
+                                },
                                 {
                                     label: () => h(NButton,
                                         {
@@ -362,6 +393,9 @@ onMounted(async () => {
                 </n-button>
             </template>
         </n-modal>
+        <n-modal v-model:show="showUserAddressManagement" preset="card" :title="t('userAddressManagement')">
+            <UserAddressManagement :user_id="curUserId" />
+        </n-modal>
         <n-input-group>
             <n-input v-model:value="userQuery" @keydown.enter="fetchData" />
             <n-button @click="fetchData" type="primary" tertiary>

frontend/src/views/admin/UserOauth2Settings.vue

@@ -21,6 +21,7 @@ const { t } = useI18n({
             successTip: 'Save Success',
             enable: 'Enable',
             enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            manualInputPrompt: 'Type and press Enter to add',
             mailAllowList: 'Mail Address Allow List',
             addOauth2: 'Add Oauth2',
             name: 'Name',
@@ -33,6 +34,7 @@ const { t } = useI18n({
             successTip: '保存成功',
             enable: '启用',
             enableMailAllowList: '启用邮件地址白名单(可手动输入, 回车增加)',
+            manualInputPrompt: '输入后按回车键添加',
             mailAllowList: '邮件地址白名单',
             addOauth2: '添加 Oauth2',
             name: '名称',
@@ -184,7 +186,7 @@ onMounted(async () => {
             </template>
         </n-modal>
         <n-card :bordered="false" embedded style="max-width: 600px;">
-            <n-alert :show-icon="false" type="warning" closable style="margin-bottom: 10px;">
+            <n-alert :show-icon="false" :bordered="false" type="warning" closable style="margin-bottom: 10px;">
                 {{ t("tip") }}
             </n-alert>
             <n-flex justify="end">
@@ -224,13 +226,13 @@ onMounted(async () => {
                         <n-form-item-row label="Access Token URL" required>
                             <n-input v-model:value="item.accessTokenURL" />
                         </n-form-item-row>
-                        <n-form-item-row label="Access Token accessTokenFormat" required>
+                        <n-form-item-row label="Access Token Params Format" required>
                             <n-select v-model:value="item.accessTokenFormat" :options="accessTokenFormatOptions" />
                         </n-form-item-row>
                         <n-form-item-row label="User Info URL" required>
                             <n-input v-model:value="item.userInfoURL" />
                         </n-form-item-row>
-                        <n-form-item-row label="User Email Key" required>
+                        <n-form-item-row label="User Email Key (Support JSONPATH like $[0].email)" required>
                             <n-input v-model:value="item.userEmailKey" />
                         </n-form-item-row>
                         <n-form-item-row label="Redirect URL" required>
@@ -246,7 +248,13 @@ onMounted(async () => {
                                 </n-checkbox>
                                 <n-select v-model:value="item.mailAllowList" v-if="item.enableMailAllowList" filterable
                                     multiple tag style="width: 80%;" :options="mailAllowOptions"
-                                    :placeholder="t('mailAllowList')" />
+                                    :placeholder="t('mailAllowList')">
+                                    <template #empty>
+                                        <n-text depth="3">
+                                            {{ t('manualInputPrompt') }}
+                                        </n-text>
+                                    </template>
+                                </n-select>
                             </n-input-group>
                         </n-form-item-row>
                     </n-form>

frontend/src/views/admin/UserSettings.vue

@@ -18,6 +18,7 @@ const { t } = useI18n({
             enableMailVerify: 'Enable Mail Verify (Send address must be an address in the system with a balance and can send mail normally)',
             verifyMailSender: 'Verify Mail Sender',
             enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            manualInputPrompt: 'Type and press Enter to add',
             mailAllowList: 'Mail Address Allow List',
             maxAddressCount: 'Maximum number of email addresses that can be binded',
         },
@@ -29,6 +30,7 @@ const { t } = useI18n({
             enableMailVerify: '启用邮件验证(发送地址必须是系统中能有余额且能正常发送邮件的地址)',
             verifyMailSender: '验证邮件发送地址',
             enableMailAllowList: '启用邮件地址白名单(可手动输入, 回车增加)',
+            manualInputPrompt: '输入后按回车键添加',
             mailAllowList: '邮件地址白名单',
             maxAddressCount: '可绑定最大邮箱地址数量',
         }
@@ -83,9 +85,14 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-flex justify="end">
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
             <n-form :model="userSettings">
                 <n-form-item-row :label="t('enableUserRegister')">
-                    <n-checkbox v-model:checked="userSettings.enable" />
+                    <n-switch v-model:value="userSettings.enable" :round="false" />
                 </n-form-item-row>
                 <n-form-item-row :label="t('enableMailVerify')">
                     <n-input-group>
@@ -103,7 +110,13 @@ onMounted(async () => {
                         </n-checkbox>
                         <n-select v-model:value="userSettings.mailAllowList" v-if="userSettings.enableMailAllowList"
                             filterable multiple tag style="width: 80%;" :options="mailAllowOptions"
-                            :placeholder="t('mailAllowList')" />
+                            :placeholder="t('mailAllowList')">
+                            <template #empty>
+                                <n-text depth="3">
+                                    {{ t('manualInputPrompt') }}
+                                </n-text>
+                            </template>
+                        </n-select>
                     </n-input-group>
                 </n-form-item-row>
                 <n-form-item-row :label="t('maxAddressCount')">
@@ -112,9 +125,6 @@ onMounted(async () => {
                             :placeholder="t('maxAddressCount')" />
                     </n-input-group>
                 </n-form-item-row>
-                <n-button @click="save" type="primary" block :loading="loading">
-                    {{ t('save') }}
-                </n-button>
             </n-form>
         </n-card>
     </div>

frontend/src/views/admin/Webhook.vue

@@ -13,13 +13,17 @@ const { t } = useI18n({
     messages: {
         en: {
             successTip: 'Success',
-            webhookAllowList: 'Webhook Allow List(Enter the address that is allowed to use webhook and enter)',
+            enableAllowList: 'Enable Allow List (Restrict webhook access to specific users)',
+            webhookAllowList: 'Webhook Allow List(Enter the mail address that is allowed to use webhook and enter)',
+            manualInputPrompt: 'Type and press Enter to add',
             save: 'Save',
             notEnabled: 'Webhook is not enabled',
         },
         zh: {
             successTip: '成功',
-            webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址, 回车增加)',
+            enableAllowList: '启用白名单 (限制 webhook 访问权限，只有白名单中的用户可以使用)',
+            webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的邮箱地址, 回车增加)',
+            manualInputPrompt: '输入后按回车键添加',
             save: '保存',
             notEnabled: 'Webhook 未开启',
         }
@@ -27,14 +31,16 @@ const { t } = useI18n({
 });
 
 class WebhookSettings {
+    enableAllowList: boolean;
     allowList: string[];
 
-    constructor(allowList: string[]) {
+    constructor(enableAllowList: boolean, allowList: string[]) {
+        this.enableAllowList = enableAllowList;
         this.allowList = allowList;
     }
 }
 
-const webhookSettings = ref(new WebhookSettings([]))
+const webhookSettings = ref(new WebhookSettings(false, []))
 const webhookEnabled = ref(false)
 const errorInfo = ref('')
 
@@ -68,13 +74,24 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card v-if="webhookEnabled" :bordered="false" embedded style="max-width: 800px; overflow: auto;">
-            <n-form-item-row :label="t('webhookAllowList')">
+            <n-flex justify="end">
-                <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
+                <n-button @click="saveSettings" type="primary">
-                    :placeholder="t('webhookAllowList')" />
-            </n-form-item-row>
-            <n-button @click="saveSettings" type="primary" block>
                     {{ t('save') }}
                 </n-button>
+            </n-flex>
+            <n-form-item-row :label="t('enableAllowList')">
+                <n-switch v-model:value="webhookSettings.enableAllowList" :round="false" />
+            </n-form-item-row>
+            <n-form-item-row :label="t('webhookAllowList')">
+                <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
+                    :placeholder="t('webhookAllowList')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
+            </n-form-item-row>
         </n-card>
         <n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
     </div>

frontend/src/views/admin/WorkerConfig.vue

@@ -26,7 +26,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-card :bordered="false" embedded style="max-width: 600px; overflow: auto;">
+        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
             <pre>{{ JSON.stringify(settings, null, 2) }}</pre>
         </n-card>
     </div>

frontend/src/views/common/Appearance.vue

@@ -3,16 +3,23 @@ import { useI18n } from 'vue-i18n'
 
 import { useIsMobile } from '../../utils/composables'
 import { useGlobalState } from '../../store'
+const props = defineProps({
+    showUseSimpleIndex: {
+        type: Boolean,
+        default: false
+    }
+})
 
 const {
     mailboxSplitSize, useIframeShowMail, preferShowTextMail, configAutoRefreshInterval,
-    globalTabplacement, useSideMargin, useUTCDate
+    globalTabplacement, useSideMargin, useUTCDate, useSimpleIndex
 } = useGlobalState()
 const isMobile = useIsMobile()
 
 const { t } = useI18n({
     messages: {
         en: {
+            useSimpleIndex: 'Use Simple Index',
             mailboxSplitSize: 'Mailbox Split Size',
             useIframeShowMail: 'Use iframe Show HTML Mail',
             preferShowTextMail: 'Display text Mail by default',
@@ -26,6 +33,7 @@ const { t } = useI18n({
             autoRefreshInterval: 'Auto Refresh Interval(Sec)',
         },
         zh: {
+            useSimpleIndex: '使用极简主页',
             mailboxSplitSize: '邮箱界面分栏大小',
             preferShowTextMail: '默认以文本显示邮件',
             useIframeShowMail: '使用iframe显示HTML邮件',
@@ -57,6 +65,9 @@ const { t } = useI18n({
                     60: '60', 120: '120', 180: '180', 240: '240'
                 }" />
             </n-form-item-row>
+            <n-form-item-row v-if="props.showUseSimpleIndex" :label="t('useSimpleIndex')">
+                <n-switch v-model:value="useSimpleIndex" :round="false" />
+            </n-form-item-row>
             <n-form-item-row :label="t('preferShowTextMail')">
                 <n-switch v-model:value="preferShowTextMail" :round="false" />
             </n-form-item-row>

frontend/src/views/common/Login.vue

@@ -71,6 +71,7 @@ const { locale, t } = useI18n({
     messages: {
         en: {
             login: 'Login',
+            loginAndBind: 'Login and Bind',
             pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
             getNewEmail: 'Create New Email',
             getNewEmailTip1: 'Please input the email you want to use. only allow: ',
@@ -83,9 +84,11 @@ const { locale, t } = useI18n({
             credentialInput: 'Please input the Mail Address Credential',
             bindUserInfo: 'Logged in user, login without binding email or create new email address will bind to current user',
             bindUserAddressError: 'Error when bind email address to user',
+            autoGeneratedName: 'Auto-generated name',
         },
         zh: {
             login: '登录',
+            loginAndBind: '登录并绑定',
             pleaseGetNewEmail: '请"登录"或点击 "注册新邮箱" 按钮来获取一个新的邮箱地址',
             getNewEmail: '创建新邮箱',
             getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许: ',
@@ -98,10 +101,18 @@ const { locale, t } = useI18n({
             credentialInput: '请输入邮箱地址凭据',
             bindUserInfo: '已登录用户, 登录未绑定邮箱或创建新邮箱地址将绑定到当前用户',
             bindUserAddressError: '绑定邮箱地址到用户时错误',
+            autoGeneratedName: '自动生成名称',
         }
     }
 });
 
+const loginAndBindTag = computed(() => {
+    if (userSettings.value.user_email) {
+        return t('loginAndBind')
+    }
+    return t('login')
+})
+
 const addressRegex = computed(() => {
     try {
         if (openSettings.value.addressRegex) {
@@ -138,8 +149,10 @@ const generateName = async () => {
 
 const newEmail = async () => {
     try {
+        // If custom names are disabled, send empty name to trigger backend auto-generation
+        const nameToSend = openSettings.value.disableCustomAddressName ? "" : emailName.value;
         const res = await props.newAddressPath(
-            emailName.value,
+            nameToSend,
             emailDomain.value,
             cfToken.value
         );
@@ -208,7 +221,7 @@ onMounted(async () => {
             <span>{{ t('bindUserInfo') }}</span>
         </n-alert>
         <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
-            <n-tab-pane name="signin" :tab="t('login')">
+            <n-tab-pane name="signin" :tab="loginAndBindTag">
                 <n-form>
                     <n-form-item-row :label="t('credential')" required>
                         <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
@@ -217,7 +230,7 @@ onMounted(async () => {
                         <template #icon>
                             <n-icon :component="EmailOutlined" />
                         </template>
-                        {{ t('login') }}
+                        {{ loginAndBindTag }}
                     </n-button>
                     <n-button v-if="showNewAddressTab" @click="tabValue = 'register'" block secondary strong>
                         <template #icon>
@@ -231,19 +244,20 @@ onMounted(async () => {
                 <n-spin :show="generateNameLoading">
                     <n-form>
                         <span>
-                            <p>{{ t("getNewEmailTip1") + addressRegex.source }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip1") + addressRegex.source }}</p>
-                            <p>{{ t("getNewEmailTip2") }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip2") }}</p>
                             <p>{{ t("getNewEmailTip3") }}</p>
                         </span>
-                        <n-button @click="generateName" style="margin-bottom: 10px;">
+                        <n-button v-if="!openSettings.disableCustomAddressName" @click="generateName" style="margin-bottom: 10px;">
                             {{ t('generateName') }}
                         </n-button>
                         <n-input-group>
                             <n-input-group-label v-if="addressPrefix">
                                 {{ addressPrefix }}
                             </n-input-group-label>
-                            <n-input v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
+                            <n-input v-if="!openSettings.disableCustomAddressName" v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
                                 :maxlength="openSettings.maxAddressLen" />
+                            <n-input v-else :value="t('autoGeneratedName')" disabled />
                             <n-input-group-label>@</n-input-group-label>
                             <n-select v-model:value="emailDomain" :consistent-menu-width="false"
                                 :options="domainsOptions" />

frontend/src/views/index/AccountSettings.vue

@@ -5,34 +5,45 @@ import { useRouter } from 'vue-router'
 
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import Appearance from '../common/Appearance.vue'
 import { getRouterPathWithLang } from '../../utils'
 
 const {
-    jwt, settings, showAddressCredential, loading
+    jwt, settings, showAddressCredential, loading, openSettings
 } = useGlobalState()
 const router = useRouter()
 const message = useMessage()
 
 const showLogout = ref(false)
-const showDelteAccount = ref(false)
+const showDeleteAccount = ref(false)
+const showClearInbox = ref(false)
+const showClearSentItems = ref(false)
 const { locale, t } = useI18n({
     messages: {
         en: {
             logout: "Logout",
-            delteAccount: "Delete Account",
+            deleteAccount: "Delete Account",
             showAddressCredential: 'Show Address Credential',
             logoutConfirm: 'Are you sure to logout?',
-            delteAccount: "Delete Account",
+            deleteAccount: "Delete Account",
-            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
+            deleteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
+            clearInbox: "Clear Inbox",
+            clearSentItems: "Clear Sent Items",
+            clearInboxConfirm: "Are you sure to clear all emails in your inbox?",
+            clearSentItemsConfirm: "Are you sure to clear all emails in your sent items?",
+            success: "Success",
         },
         zh: {
             logout: '退出登录',
-            delteAccount: "删除账户",
+            deleteAccount: "删除账户",
             showAddressCredential: '查看邮箱地址凭证',
             logoutConfirm: '确定要退出登录吗？',
-            delteAccount: "删除账户",
+            deleteAccount: "删除账户",
-            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+            deleteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+            clearInbox: "清空收件箱",
+            clearSentItems: "清空发件箱",
+            clearInboxConfirm: "确定要清空你收件箱中的所有邮件吗？",
+            clearSentItemsConfirm: "确定要清空你发件箱中的所有邮件吗？",
+            success: "成功",
         }
     }
 });
@@ -55,35 +66,85 @@ const deleteAccount = async () => {
         message.error(error.message || "error");
     }
 };
+
+const clearInbox = async () => {
+    try {
+        await api.fetch(`/api/clear_inbox`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearInbox.value = false;
+    }
+};
+
+const clearSentItems = async () => {
+    try {
+        await api.fetch(`/api/clear_sent_items`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearSentItems.value = false;
+    }
+};
 </script>
 
 <template>
     <div class="center" v-if="settings.address">
         <n-card :bordered="false" embedded>
-            <Appearance />
             <n-button @click="showAddressCredential = true" type="primary" secondary block strong>
                 {{ t('showAddressCredential') }}
             </n-button>
+            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showClearInbox = true" type="warning" secondary
+                block strong>
+                {{ t('clearInbox') }}
+            </n-button>
+            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showClearSentItems = true" type="warning"
+                secondary block strong>
+                {{ t('clearSentItems') }}
+            </n-button>
             <n-button @click="showLogout = true" secondary block strong>
                 {{ t('logout') }}
             </n-button>
-            <n-button @click="showDelteAccount = true" type="error" secondary block strong>
+            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showDeleteAccount = true" type="error" secondary
-                {{ t('delteAccount') }}
+                block strong>
+                {{ t('deleteAccount') }}
             </n-button>
         </n-card>
         <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
             <p>{{ t('logoutConfirm') }}</p>
             <template #action>
-                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="warning">
                     {{ t('logout') }}
                 </n-button>
             </template>
         </n-modal>
-        <n-modal v-model:show="showDelteAccount" preset="dialog" :title="t('delteAccount')">
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('deleteAccount')">
-            <p>{{ t('delteAccountConfirm') }}</p>
+            <p>{{ t('deleteAccountConfirm') }}</p>
             <template #action>
                 <n-button :loading="loading" @click="deleteAccount" size="small" tertiary type="error">
-                    {{ t('delteAccount') }}
+                    {{ t('deleteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearInbox" preset="dialog" :title="t('clearInbox')">
+            <p>{{ t('clearInboxConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearInbox" size="small" tertiary type="warning">
+                    {{ t('clearInbox') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearSentItems" preset="dialog" :title="t('clearSentItems')">
+            <p>{{ t('clearSentItemsConfirm') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearSentItems" size="small" tertiary type="warning">
+                    {{ t('clearSentItems') }}
                 </n-button>
             </template>
         </n-modal>

frontend/src/views/index/AddressBar.vue

@@ -32,6 +32,7 @@ const { locale, t } = useI18n({
             copied: 'Copied',
             fetchAddressError: 'Mail address credential is invalid or account not exist, it may be network connection issue, please try again later.',
             addressCredential: 'Mail Address Credential',
+            linkWithAddressCredential: 'Open to auto login email link',
             addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             userLogin: 'User Login',
         },
@@ -43,6 +44,7 @@ const { locale, t } = useI18n({
             copied: '已复制',
             fetchAddressError: '邮箱地址凭证无效或邮箱地址不存在，也可能是网络连接异常，请稍后再尝试。',
             addressCredential: '邮箱地址凭证',
+            linkWithAddressCredential: '打开即可自动登录邮箱的链接',
             addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             userLogin: '用户登录',
         }
@@ -73,6 +75,10 @@ const copy = async () => {
     }
 }
 
+const getUrlWithJwt = () => {
+    return `${window.location.origin}/?jwt=${jwt.value}`
+}
+
 const onUserLogin = async () => {
     await router.push(getRouterPathWithLang("/user", locale.value))
 }
@@ -140,9 +146,18 @@ onMounted(async () => {
             <span>
                 <p>{{ t("addressCredentialTip") }}</p>
             </span>
-            <n-card :bordered="false" embedded>
+            <n-card embedded>
                 <b>{{ jwt }}</b>
             </n-card>
+            <n-card embedded>
+                <n-collapse>
+                    <n-collapse-item :title='t("linkWithAddressCredential")'>
+                        <n-card embedded>
+                            <b>{{ getUrlWithJwt() }}</b>
+                        </n-card>
+                    </n-collapse-item>
+                </n-collapse>
+            </n-card>
         </n-modal>
     </div>
 </template>

frontend/src/views/index/Attachment.vue

@@ -3,6 +3,7 @@ import { ref, h, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n'
 
 import { api } from '../../api'
+import { NPopconfirm } from 'naive-ui';
 
 const message = useMessage()
 
@@ -11,10 +12,16 @@ const { t } = useI18n({
         en: {
             download: 'Download',
             action: 'Action',
+            delete: 'Delete',
+            deleteConfirm: 'Are you sure to delete this attachment?',
+            deleteSuccess: 'Deleted successfully',
         },
         zh: {
             download: '下载',
             action: '操作',
+            delete: '删除',
+            deleteConfirm: '确定要删除此附件吗？',
+            deleteSuccess: '删除成功',
         }
     }
 });
@@ -66,6 +73,34 @@ const columns = [
                         }
                     },
                     { default: () => t('download') }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: async () => {
+                            try {
+                                await api.fetch(`/api/attachment/delete`, {
+                                    method: 'POST',
+                                    body: JSON.stringify({ key: row.key })
+                                });
+                                message.success(t('deleteSuccess'));
+                                await fetchData();
+                            }
+                            catch (error) {
+                                console.error(error);
+                                message.error(error.message || "error");
+                            }
+                        },
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "error",
+                            },
+                            { default: () => t('delete') }
+                        ),
+                        default: () => t('deleteConfirm')
+                    }
                 )
             ])
         }

frontend/src/views/index/LocalAddress.vue

@@ -22,7 +22,7 @@ const { t } = useI18n({
             actions: 'Actions',
             changeMailAddress: 'Change Mail Address',
             unbindMailAddress: 'Unbind Mail Address credential',
-            bind: 'Bind',
+            create_or_bind: 'Create or Bind',
             bindAddressSuccess: 'Bind Address Success',
         },
         zh: {
@@ -32,7 +32,7 @@ const { t } = useI18n({
             actions: '操作',
             changeMailAddress: '切换邮箱地址',
             unbindMailAddress: '解绑邮箱地址',
-            bind: '绑定',
+            create_or_bind: '创建或绑定',
             bindAddressSuccess: '绑定地址成功',
         }
     }
@@ -151,7 +151,7 @@ const columns = [
             <n-tab-pane name="address" :tab="t('address')">
                 <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
             </n-tab-pane>
-            <n-tab-pane name="bind" :tab="t('bind')">
+            <n-tab-pane name="create_or_bind" :tab="t('create_or_bind')">
                 <Login :bindUserAddress="bindAddress" />
             </n-tab-pane>
         </n-tabs>

frontend/src/views/index/SimpleIndex.vue

@@ -0,0 +1,283 @@
+<script setup>
+import { ref, onMounted, computed, watch, onBeforeUnmount } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useMessage } from 'naive-ui'
+import {
+    ExitToAppFilled,
+    ContentCopyFilled,
+    RefreshFilled,
+    ArrowBackIosNewFilled,
+    ArrowForwardIosFilled,
+    SettingsFilled
+} from '@vicons/material'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import Login from '../common/Login.vue'
+import AccountSettings from './AccountSettings.vue'
+import { processItem } from '../../utils/email-parser'
+import MailContentRenderer from '../../components/MailContentRenderer.vue'
+
+const { jwt, settings, useSimpleIndex, showAddressCredential, openSettings, loading } = useGlobalState()
+const message = useMessage()
+
+// 邮件数据
+const currentPage = ref(1)
+const totalCount = ref(0)
+const currentMail = ref(null)
+const showAccountSettingsCard = ref(false)
+const currentAutoRefreshInterval = ref(60)
+const timer = ref(null)
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            exitSimpleIndex: 'Exit Simple',
+            copyAddress: 'Copy',
+            addressCopied: 'Address copied successfully',
+            refreshMails: 'Refresh',
+            noMails: 'No mails found',
+            prevPage: 'Previous',
+            nextPage: 'Next',
+            refreshSuccess: 'Mails refreshed successfully',
+            mailCount: '{current} / {total} emails',
+            accountSettings: "Account Settings",
+            addressCredential: 'Mail Address Credential',
+            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login',
+            deleteSuccess: 'Mail deleted successfully',
+            refreshAfter: 'Refresh After {msg} Seconds',
+        },
+        zh: {
+            exitSimpleIndex: '退出极简',
+            copyAddress: '复制',
+            addressCopied: '地址复制成功',
+            refreshMails: '刷新',
+            noMails: '暂无邮件',
+            prevPage: '上一页',
+            nextPage: '下一页',
+            refreshSuccess: '邮件刷新成功',
+            mailCount: '{current} / {total} 封邮件',
+            accountSettings: "账户设置",
+            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            deleteSuccess: '邮件删除成功',
+            refreshAfter: '{msg}秒后刷新',
+        }
+    }
+})
+
+// 复制地址
+const copyAddress = async () => {
+    try {
+        await navigator.clipboard.writeText(settings.value.address)
+        message.success(t('addressCopied'))
+    } catch (error) {
+        message.error('复制失败')
+    }
+}
+
+// 获取邮件数据
+const fetchMails = async () => {
+    if (!settings.value.address) return
+    try {
+        const { results, count } = await api.fetch(`/api/mails?limit=1&offset=${currentPage.value - 1}`)
+        totalCount.value = count > 0 ? count : totalCount.value;
+        const rawMail = results && results.length > 0 ? results[0] : null
+        currentMail.value = rawMail ? await processItem(rawMail) : null
+    } catch (error) {
+        console.error('Failed to fetch mails:', error)
+        message.error('获取邮件失败')
+    }
+}
+
+// 删除邮件
+const deleteMail = async () => {
+    if (!currentMail.value) return;
+    try {
+        await api.fetch(`/api/mails/${currentMail.value.id}`, { method: 'DELETE' });
+        message.success(t('deleteSuccess'));
+        currentMail.value = null;
+        await refreshMails();
+    } catch (error) {
+        console.error('Failed to delete mail:', error);
+        message.error('删除邮件失败');
+    }
+}
+
+// 刷新邮件
+const refreshMails = async () => {
+    if (loading.value) return
+    currentPage.value = 1
+    showAccountSettingsCard.value = false
+    currentAutoRefreshInterval.value = 60
+    await fetchMails()
+    message.success(t('refreshSuccess'))
+}
+
+// 分页控制
+const currentPageDisplay = computed(() => currentPage.value)
+const totalPages = computed(() => Math.max(1, totalCount.value))
+const canGoPrev = computed(() => currentPage.value > 1)
+const canGoNext = computed(() => currentPage.value < totalPages.value)
+const isFirstPage = computed(() => currentPage.value === 1)
+
+const prevPage = async () => {
+    if (canGoPrev.value) {
+        currentPage.value--
+    }
+}
+
+const nextPage = async () => {
+    if (canGoNext.value) {
+        currentPage.value++
+    }
+}
+
+// 监听页面变化
+watch(currentPage, () => {
+    fetchMails()
+})
+
+onMounted(async () => {
+    await api.getSettings()
+    await fetchMails()
+
+    // 启动自动刷新
+    timer.value = setInterval(async () => {
+        if (!isFirstPage.value) {
+            currentAutoRefreshInterval.value = 60
+            return
+        }
+
+        if (--currentAutoRefreshInterval.value <= 0) {
+            await refreshMails()
+        }
+    }, 1000)
+})
+
+onBeforeUnmount(() => {
+    clearInterval(timer.value)
+})
+</script>
+
+<template>
+    <div class="center">
+        <div v-if="!settings.address">
+            <n-card :bordered="false" embedded>
+                <Login />
+            </n-card>
+        </div>
+
+        <div v-else>
+            <n-card :bordered="false" embedded>
+                <div style="text-align: center; margin-bottom: 16px; font-size: 18px;">
+                    <n-text strong size="large">{{ settings.address }}</n-text>
+                </div>
+                <n-flex justify="center">
+                    <n-button @click="refreshMails" :loading="loading" type="primary" tertiary size="small">
+                        <template #icon>
+                            <n-icon>
+                                <RefreshFilled />
+                            </n-icon>
+                        </template>
+                        {{ t('refreshMails') }}
+                    </n-button>
+                    <n-button @click="copyAddress" tertiary size="small">
+                        <template #icon>
+                            <n-icon>
+                                <ContentCopyFilled />
+                            </n-icon>
+                        </template>
+                        {{ t('copyAddress') }}
+                    </n-button>
+                    <n-button @click="useSimpleIndex = false" tertiary size="small">
+                        <template #icon>
+                            <n-icon>
+                                <ExitToAppFilled />
+                            </n-icon>
+                        </template>
+                        {{ t('exitSimpleIndex') }}
+                    </n-button>
+                    <n-button @click="showAccountSettingsCard = true" tertiary size="small">
+                        <template #icon>
+                            <n-icon>
+                                <SettingsFilled />
+                            </n-icon>
+                        </template>
+                        {{ t('accountSettings') }}
+                    </n-button>
+                </n-flex>
+                <div v-if="isFirstPage" style="text-align: center; margin-top: 12px;">
+                    <n-text depth="3" size="12">
+                        {{ t('refreshAfter', { msg: Math.max(0, currentAutoRefreshInterval) }) }}
+                    </n-text>
+                </div>
+            </n-card>
+
+            <!-- 账户设置卡片 -->
+            <n-card v-if="showAccountSettingsCard" :bordered="false" embedded closable
+                @close="showAccountSettingsCard = false" :title="t('accountSettings')">
+                <AccountSettings />
+            </n-card>
+
+            <n-card v-else :bordered="false" embedded style="text-align: left;">
+
+                <div v-if="totalCount > 1">
+                    <n-flex justify="space-between">
+                        <n-button @click="prevPage" :disabled="!canGoPrev" text size="small">
+                            <template #icon>
+                                <n-icon>
+                                    <ArrowBackIosNewFilled />
+                                </n-icon>
+                            </template>
+                            {{ t('prevPage') }}
+                        </n-button>
+                        <n-text size="small">
+                            {{ t('mailCount', { current: currentPageDisplay, total: totalCount }) }}
+                        </n-text>
+                        <n-button @click="nextPage" :disabled="!canGoNext" text size="small" icon-placement="right">
+                            <template #icon>
+                                <n-icon>
+                                    <ArrowForwardIosFilled />
+                                </n-icon>
+                            </template>
+                            {{ t('nextPage') }}
+                        </n-button>
+                    </n-flex>
+                </div>
+
+                <div v-if="!currentMail" class="no-mail">
+                    <n-empty :description="t('noMails')" />
+                </div>
+                <div v-else>
+                    <h3 v-if="currentMail.subject">{{ currentMail.subject }}</h3>
+                    <div style="margin-top: 16px;">
+                        <MailContentRenderer :mail="currentMail" :showEMailTo="false" :showReply="false"
+                            :enableUserDeleteEmail="openSettings.enableUserDeleteEmail" :showSaveS3="false"
+                            :onDelete="deleteMail" />
+                    </div>
+                </div>
+            </n-card>
+        </div>
+        <n-modal v-model:show="showAddressCredential" preset="dialog" :title="t('addressCredential')">
+            <span>
+                <p>{{ t("addressCredentialTip") }}</p>
+            </span>
+            <n-card embedded>
+                <b>{{ jwt }}</b>
+            </n-card>
+        </n-modal>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    max-width: 800px;
+    margin: 0 auto;
+}
+
+.n-card {
+    margin-top: 20px;
+    width: 100%;
+}
+</style>

frontend/src/views/user/AddressManagement.vue

@@ -8,6 +8,8 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { getRouterPathWithLang } from '../../utils'
 
+import Login from '../common/Login.vue';
+
 const { jwt } = useGlobalState()
 const message = useMessage()
 const router = useRouter()
@@ -25,7 +27,9 @@ const { locale, t } = useI18n({
             unbindAddressTip: 'Before unbinding, please switch to this email address and save the email address credential.',
             transferAddress: 'Transfer Address',
             targetUserEmail: 'Target User Email',
-            transferAddressTip: 'Transfer address to another user will remove the address from your account and transfer it to another user. Are you sure to transfer the address?'
+            transferAddressTip: 'Transfer address to another user will remove the address from your account and transfer it to another user. Are you sure to transfer the address?',
+            address: 'Address',
+            create_or_bind: 'Create or Bind',
         },
         zh: {
             success: '成功',
@@ -38,7 +42,9 @@ const { locale, t } = useI18n({
             unbindAddressTip: '解绑前请切换到此邮箱地址并保存邮箱地址凭证。',
             transferAddress: '转移地址',
             targetUserEmail: '目标用户邮箱',
-            transferAddressTip: '转移地址到其他用户将会从你的账户中移除此地址并转移给其他用户。确定要转移地址吗？'
+            transferAddressTip: '转移地址到其他用户将会从你的账户中移除此地址并转移给其他用户。确定要转移地址吗？',
+            address: '地址',
+            create_or_bind: '创建或绑定',
         }
     }
 });
@@ -111,13 +117,10 @@ const transferAddress = async () => {
 
 const fetchData = async () => {
     try {
-        const { results, count: addressCount } = await api.fetch(
+        const { results } = await api.fetch(
             `/user_api/bind_address`
         );
         data.value = results;
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
     } catch (error) {
         console.log(error)
         message.error(error.message || "error");
@@ -211,6 +214,7 @@ onMounted(async () => {
 </script>
 
 <template>
+    <div>
         <n-modal v-model:show="showTranferAddress" preset="dialog" :title="t('transferAddress')">
             <span>
                 <p>{{ t("transferAddressTip") }}</p>
@@ -223,9 +227,17 @@ onMounted(async () => {
                 </n-button>
             </template>
         </n-modal>
+        <n-tabs type="segment">
+            <n-tab-pane name="address" :tab="t('address')">
                 <div style="overflow: auto;">
                     <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
                 </div>
+            </n-tab-pane>
+            <n-tab-pane name="create_or_bind" :tab="t('create_or_bind')">
+                <Login />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
 </template>
 
 <style scoped>

frontend/src/views/user/UserMailBox.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { onMounted, ref, watch } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { api } from '../../api'
+import MailBox from '../../components/MailBox.vue';
+
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            addressQueryTip: 'Leave blank to query all addresses',
+            keywordQueryTip: 'Leave blank to not query by keyword',
+            query: 'Query',
+        },
+        zh: {
+            addressQueryTip: '留空查询所有地址',
+            keywordQueryTip: '留空不按关键字查询',
+            query: '查询',
+        }
+    }
+});
+
+const mailBoxKey = ref("")
+const addressFilter = ref();
+const mailKeyword = ref("")
+const addressFilterOptions = ref([]);
+
+const queryMail = () => {
+    addressFilter.value = addressFilter.value ? addressFilter.value.trim() : addressFilter.value;
+    mailKeyword.value = mailKeyword.value.trim();
+    mailBoxKey.value = Date.now();
+}
+
+const fetchMailData = async (limit, offset) => {
+    return await api.fetch(
+        `/user_api/mails`
+        + `?limit=${limit}`
+        + `&offset=${offset}`
+        + (addressFilter.value ? `&address=${addressFilter.value}` : '')
+        + (mailKeyword.value ? `&keyword=${mailKeyword.value}` : '')
+    );
+}
+
+const fetchAddresData = async () => {
+    try {
+        const { results } = await api.fetch(
+            `/user_api/bind_address`
+        );
+        addressFilterOptions.value = results.map((item) => {
+            return {
+                label: item.name,
+                value: item.name
+            }
+        });
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const deleteMail = async (curMailId) => {
+    await api.fetch(`/user_api/mails/${curMailId}`, { method: 'DELETE' });
+};
+
+watch(addressFilter, async (newValue) => {
+    queryMail();
+});
+
+onMounted(() => {
+    fetchAddresData();
+});
+</script>
+
+<template>
+    <div style="margin-top: 10px;">
+        <n-input-group>
+            <n-select v-model:value="addressFilter" :options="addressFilterOptions" clearable
+                :placeholder="t('addressQueryTip')" />
+            <n-input v-model:value="mailKeyword" :placeholder="t('keywordQueryTip')" @keydown.enter="queryMail" />
+            <n-button @click="queryMail" type="primary" tertiary>
+                {{ t('query') }}
+            </n-button>
+        </n-input-group>
+        <div style="margin-top: 10px;"></div>
+        <MailBox :key="mailBoxKey" :enableUserDeleteEmail="true" :fetchMailData="fetchMailData"
+            :deleteMail="deleteMail" />
+    </div>
+</template>

frontend/src/views/user/UserSettings.vue

@@ -232,7 +232,7 @@ const renamePasskey = async () => {
         <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
             <p>{{ t('logoutConfirm') }}</p>
             <template #action>
-                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="warning">
                     {{ t('logout') }}
                 </n-button>
             </template>

pages/functions/_middleware.js

@@ -3,7 +3,8 @@ const API_PATHS = [
     "/open_api/",
     "/user_api/",
     "/admin/",
-    "/telegram/"
+    "/telegram/",
+    "/external/",
 ];
 
 export async function onRequest(context) {

pages/package.json

@@ -1,6 +1,6 @@
 {
   "name": "temp-email-pages",
-  "version": "0.8.7",
+  "version": "1.0.6",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -11,6 +11,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "wrangler": "^3.109.1"
+    "wrangler": "^4.37.0"
-  }
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }

scripts/update-dependencies.sh

@@ -1,15 +1,19 @@
 cd frontend/
 pnpm up
+pnpm add -D wrangler@latest
 cd ..
 
 cd worker/
 pnpm up
+pnpm add -D wrangler@latest
 cd ..
 
 cd pages/
 pnpm up
+pnpm add -D wrangler@latest
 cd ..
 
 cd vitepress-docs/
-pnpm up
+pnpm up --latest
+pnpm add -D wrangler@latest
 cd ..

smtp_proxy_server/imap_server.py

@@ -65,6 +65,31 @@ class SimpleMailbox:
         self.addListener = self.listeners.append
         self.removeListener = self.listeners.remove
         self.message_count = 0
+        self._update_message_count()
+
+    def _update_message_count(self):
+        """主动获取邮件总数"""
+        try:
+            if self.name == "INBOX":
+                endpoint = "/api/mails"
+            elif self.name == "SENT":
+                endpoint = "/api/sendbox"
+            else:
+                return
+
+            res = httpx.get(
+                f"{settings.proxy_url}{endpoint}?limit=1&offset=0",
+                headers={
+                    "Authorization": f"Bearer {self.password}",
+                    "x-custom-auth": f"{settings.basic_password}",
+                    "Content-Type": "application/json"
+                }
+            )
+            if res.status_code == 200:
+                self.message_count = res.json()["count"]
+                # _logger.info(f"Updated {self.name} message count: {self.message_count}")
+        except Exception as e:
+            _logger.error(f"Failed to update message count for {self.name}: {e}")
 
     def getFlags(self):
         return ["\\Seen"]
@@ -73,7 +98,9 @@ class SimpleMailbox:
         return 0
 
     def getMessageCount(self):
-        return self.message_count or 1000
+        # 每次请求时更新邮件总数
+        self._update_message_count()
+        return self.message_count
 
     def getRecentCount(self):
         return 0
@@ -91,6 +118,8 @@ class SimpleMailbox:
         return "/"
 
     def requestStatus(self, names):
+        # 在状态请求时也更新邮件总数
+        self._update_message_count()
         r = {}
         if "MESSAGES" in names:
             r["MESSAGES"] = self.getMessageCount()
@@ -105,20 +134,73 @@ class SimpleMailbox:
         return defer.succeed(r)
 
     def fetch(self, messages, uid):
+        """边查边返回邮件"""
+        def email_generator():
+            for range_item in messages.ranges:
+                start, end = range_item
+                _logger.info(f"Fetching messages: {self.name}, range: {start}-{end}")
+
+                for email_data in self.fetchGenerator(start, end):
+                    yield email_data
+
+        # 返回生成器，让IMAP4服务器逐个处理
+        return email_generator()
+
+    def fetchGenerator(self, start, end):
+        """通用的邮件获取生成器，边查边返回"""
+        start = max(start, 1)
+
+        # 根据邮箱类型确定API端点
         if self.name == "INBOX":
-            return self.fetchINBOX(messages)
+            endpoint = "/api/mails"
-        if self.name == "SENT":
+        elif self.name == "SENT":
-            return self.fetchSENT(messages)
+            endpoint = "/api/sendbox"
-        return []
+        else:
+            return
+
+        # 首先获取服务端邮件总数
+        count_res = httpx.get(
+            f"{settings.proxy_url}{endpoint}?limit=1&offset=0",
+            headers={
+                "Authorization": f"Bearer {self.password}",
+                "x-custom-auth": f"{settings.basic_password}",
+                "Content-Type": "application/json"
+            }
+        )
+        if count_res.status_code != 200:
+            _logger.error(
+                f"Failed to get {self.name} email count: "
+                f"code=[{count_res.status_code}] text=[{count_res.text}]"
+            )
+            return
+
+        total_count = count_res.json()["count"]
+        self.message_count = total_count
+
+        if total_count == 0 or start > total_count:
+            return
+
+        # 分批处理，每次获取一小批就立即返回
+        batch_size = 20
+        current_start = start
+        current_end = min(end or total_count, total_count)
+
+        while current_start <= current_end:
+            batch_end = min(current_start + batch_size - 1, current_end)
+
+            # 计算这一批的参数
+            limit = batch_end - current_start + 1
+            server_offset = total_count - batch_end
+            server_offset = max(0, server_offset)
+
+            _logger.info(
+                f"Fetching batch: start={current_start}, end={batch_end}, "
+                f"total_count={total_count}, limit={limit}, "
+                f"server_offset={server_offset}"
+            )
 
-    def fetchINBOX(self, messages):
-        start, end = messages.ranges[0]
-        start = max(start, 1)
-        limit = min(20, end - start + 1) if end and end >= start else 20
-        if self.message_count > 0 and start > self.message_count:
-            return []
             res = httpx.get(
-            f"{settings.proxy_url}/api/mails?limit={limit}&offset={start - 1}",
+                f"{settings.proxy_url}{endpoint}?limit={limit}&offset={server_offset}",
                 headers={
                     "Authorization": f"Bearer {self.password}",
                     "x-custom-auth": f"{settings.basic_password}",
@@ -127,43 +209,24 @@ class SimpleMailbox:
             )
             if res.status_code != 200:
                 _logger.error(
-                "Failed: "
+                    f"Failed to fetch {self.name} emails: "
                     f"code=[{res.status_code}] text=[{res.text}]"
                 )
-            raise Exception("Failed to fetch emails")
+                break
-        if res.json()["count"] > 0:
-            self.message_count = res.json()["count"]
-        return [
-            (start + uid, SimpleMessage(start + uid, parse_email(item["raw"])))
-            for uid, item in enumerate(reversed(res.json()["results"]))
-        ]
 
-    def fetchSENT(self, messages):
+            emails = res.json()["results"]
-        start, end = messages.ranges[0]
+            for i, item in enumerate(reversed(emails)):
-        start = max(start, 1)
+                uid = total_count - server_offset - len(emails) + i + 1
-        limit = min(20, end - start + 1) if end and end >= start else 20
+                if current_start <= uid <= batch_end:
-        if self.message_count > 0 and start > self.message_count:
+                    if self.name == "INBOX":
-            return []
+                        email_model = parse_email(item["raw"])
-        res = httpx.get(
+                    elif self.name == "SENT":
-            f"{settings.proxy_url}/api/sendbox?limit={limit}&offset={start - 1}",
+                        email_model = generate_email_model(item)
-            headers={
+
-                "Authorization": f"Bearer {self.password}",
+                    # 立即返回这封邮件
-                "x-custom-auth": f"{settings.basic_password}",
+                    yield (uid, SimpleMessage(uid, email_model))
-                "Content-Type": "application/json"
+
-            }
+            current_start = batch_end + 1
-        )
-        if res.status_code != 200:
-            _logger.error(
-                "Failed: "
-                f"code=[{res.status_code}] text=[{res.text}]"
-            )
-            raise Exception("Failed to fetch emails")
-        if res.json()["count"] > 0:
-            self.message_count = res.json()["count"]
-        return [
-            (start + uid, SimpleMessage(start + uid, generate_email_model(item)))
-            for uid, item in enumerate(reversed(res.json()["results"]))
-        ]
 
     def getUID(self, message):
         return message.uid

smtp_proxy_server/parse_email.py

@@ -48,17 +48,14 @@ def generate_email_model(item: dict) -> EmailModel:
     email_json = json.loads(item["raw"])
     message = MIMEMultipart()
     if email_json.get("version") == "v2":
-        message['From'] = f"{email_json["from_name"]} <{item["address"]}>" if email_json.get(
+        message['From'] = f'{email_json["from_name"]} <{item["address"]}>' if email_json.get("from_name") else item["address"]
-            "from_name") else item["address"]
+        message['To'] = f'{email_json["to_name"]} <{email_json["to_mail"]}>' if email_json.get("to_name") else email_json["to_mail"]
-        message['To'] = f"{email_json["to_name"]} <{email_json["to_mail"]}>" if email_json.get(
-            "to_name") else email_json["to_mail"]
         message.attach(MIMEText(
             email_json["content"],
             "html" if email_json.get("is_html") else "plain"
         ))
     else:
-        message['From'] = f"{email_json["from"]['name']} <{
+        message['From'] = f'{email_json["from"]["name"]} <{email_json["from"]["email"]}>'
-            email_json["from"]['email']}>"
         message['To'] = ", ".join(
             [f"{to['name']} <{to['email']}>" for to in email_json["personalizations"][0]["to"]])
         message.attach(MIMEText(

smtp_proxy_server/requirements.txt

@@ -1,5 +1,5 @@
 aiosmtpd==1.4.6
-pydantic-settings==2.2.1
+pydantic-settings==2.9.1
-requests==2.32.0
+requests==2.32.4
-twisted==24.7.0
+Twisted==25.5.0
-httpx==0.27.0
+httpx==0.28.1

vitepress-docs/docs/.vitepress/config.ts

@@ -27,7 +27,6 @@ export default defineConfig({
     }
   },
   themeConfig: {
-
     logo: { src: '/logo.png', width: 24, height: 24 },
     search: { provider: 'local' },
     socialLinks: [

vitepress-docs/docs/.vitepress/en.ts

@@ -6,6 +6,7 @@ export const en = defineConfig({
     description: 'CloudFlare Free sending and receiving of temporary domain name mailboxes',
 
     themeConfig: {
+        outline: 'deep',
         nav: nav(),
 
         editLink: {

vitepress-docs/docs/.vitepress/zh.ts

@@ -28,6 +28,7 @@ export const zh = defineConfig({
         },
 
         outline: {
+            level: 'deep',
             label: '页面导航'
         },
 
@@ -121,6 +122,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
             text: '通过 Github Actions 部署',
             collapsed: true,
             items: [
+                { text: 'Github Actions 部署准备', link: 'actions/pre-requisite' },
                 { text: 'D1 数据库', link: 'actions/d1' },
                 { text: 'Github Actions 配置', link: 'actions/github-action' },
                 { text: '配置邮件转发', link: 'email-routing.md' },
@@ -151,6 +153,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
                 { text: '新建邮箱地址 API', link: 'feature/new-address-api' },
                 { text: 'Oauth2 第三方登录', link: 'feature/user-oauth2' },
                 { text: '配置其他worker增强', link: 'feature/another-worker-enhanced' },
+                { text: '给网页增加 Google Ads', link: 'feature/google-ads.md' },
             ]
         },
         {

vitepress-docs/docs/en/cli.md

@@ -74,12 +74,15 @@ compatibility_flags = [ "nodejs_compat" ]
 # ]
 
 [vars]
+# DEFAULT_LANG = "zh"
 # TITLE = "Custom Title" # The title of the site
 PREFIX = "tmp" # The mailbox name prefix to be processed
 # (min, max) length of the adderss, if not set, the default is (1, 30)
 # MIN_ADDRESS_LEN = 1
 # MAX_ADDRESS_LEN = 30
 # ANNOUNCEMENT = "Custom Announcement"
+# always show ANNOUNCEMENT even no changes
+# ALWAYS_SHOW_ANNOUNCEMENT = true
 # address check REGEX, if not set, will not check
 # ADDRESS_CHECK_REGEX = "^(?!.*admin).*"
 # address name replace REGEX, if not set, the default is [^a-z0-9]
@@ -120,7 +123,8 @@ ENABLE_AUTO_REPLY = false
 # DISABLE_SHOW_GITHUB = true # Disable Show GitHub link
 # default send balance, if not set, it will be 0
 # DEFAULT_SEND_BALANCE = 1
-# NO_LIMIT_SEND_ROLE = "vip" # the role which can send emails without limit
+# the role which can send emails without limit, multiple roles can be separated by ,
+# NO_LIMIT_SEND_ROLE = "vip"
 # Turnstile verification configuration
 # CF_TURNSTILE_SITE_KEY = ""
 # CF_TURNSTILE_SECRET_KEY = ""

vitepress-docs/docs/zh/guide/actions/d1.md

@@ -1,3 +1,17 @@
 # 初始化/更新 D1 数据库
 
+## 创建数据库
+
+打开 cloudflare 控制台，选择 `Workers & Pages` -> `D1` -> `Create Database`，点击创建数据库
+
+![d1](/ui_install/d1.png)
+
+创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库，并获取到数据库的 `名称` 和 `数据库 ID`
+
+## 初始化数据库
+
+在部署完成后，在 admin 页面的 `快速设置` -> `数据库` 中，点击 `初始化数据库` 按钮来初始化数据库
+
+## 更新数据库 schema
+
 参考 [命令行更新 d1](/zh/guide/cli/d1) 或者 [用户界面更新 d1](/zh/guide/ui/d1)

vitepress-docs/docs/zh/guide/actions/github-action.md

@@ -3,27 +3,56 @@
 ::: warning 注意
 目前只支持 worker 和 pages 的部署。
 有问题请通过 `Github Issues` 反馈，感谢。
+
+`worker.dev` 域名在中国无法访问，请自定义域名
 :::
 
 ## 部署步骤
 
-1. 在 GitHub fork 本仓库
+### Fork 仓库并启用 Actions
 
-2. 打开仓库的 `Actions` 页面，找到 `Deploy Backend Production` 和 `Deploy Frontend`，点击 `enable workflow` 启用 `workflow`
+- 在 GitHub fork 本仓库
+- 打开仓库的 `Actions` 页面
+- 找到 `Deploy Backend` 点击 `enable workflow` 启用 `workflow`
+- 如果需要前后端分离部署, 找到`Deploy Frontend` 点击 `enable workflow` 启用 `workflow`
 
-3. 然后在仓库页面 `Settings` -> `Secrets and variables` -> `Actions` -> `Repository secrets`, 添加以下 `secrets`:
+### 配置 Secrets
 
-   - `CLOUDFLARE_ACCOUNT_ID`: Cloudflare 账户 ID, [参考文档](https://developers.cloudflare.com/workers/wrangler/ci-cd/#cloudflare-account-id)
+然后在仓库页面 `Settings` -> `Secrets and variables` -> `Actions` -> `Repository secrets`, 添加以下 `secrets`:
-   - `CLOUDFLARE_API_TOKEN`: Cloudflare API Token, [参考文档](https://developers.cloudflare.com/workers/wrangler/ci-cd/#api-token)
-   - `BACKEND_TOML`: 后端配置文件，[参考此处](/zh/guide/cli/worker.html#修改-wrangler-toml-配置文件)
-   - `FRONTEND_ENV`: 前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html)
-   - `FRONTEND_NAME`: 你在 Cloudflare Pages 创建的项目名称，可通过 [用户界面](https://temp-mail-docs.awsl.uk/zh/guide/ui/pages.html) 或者 [命令行](https://temp-mail-docs.awsl.uk/zh/guide/cli/pages.html) 创建
-   - `FRONTEND_BRANCH`: (可选) pages 部署的分支，可不配置，默认 `production`
-   - `TG_FRONTEND_NAME`: (可选) 你在 Cloudflare Pages 创建的项目名称，同 `FRONTEND_NAME`，如果需要 Telegram Mini App 功能，请填写
-   - `DEBUG_MODE`: (可选) 是否开启调试模式，配置为 `true` 开启, 默认 worker 部署日志不会输出到 Github Actions 页面，开启后会输出
-   - `BACKEND_USE_MAIL_WASM_PARSER`: (可选) 是否使用 wasm 解析邮件，配置为 `true` 开启, 功能参考 [配置 worker 使用 wasm 解析邮件](/zh/guide/feature/mail_parser_wasm_worker)
 
-4. 打开仓库的 `Actions` 页面，找到 `Deploy Backend Production` 和 `Deploy Frontend`，点击 `Run workflow` 选择分支手动部署
+- 公共 `secrets`
+
+   | 名称                    | 说明                                                                                                            |
+   | ----------------------- | --------------------------------------------------------------------------------------------------------------- |
+   | `CLOUDFLARE_ACCOUNT_ID` | Cloudflare 账户 ID, [参考文档](https://developers.cloudflare.com/workers/wrangler/ci-cd/#cloudflare-account-id) |
+   | `CLOUDFLARE_API_TOKEN`  | Cloudflare API Token, [参考文档](https://developers.cloudflare.com/workers/wrangler/ci-cd/#api-token)           |
+
+- worker 后端 `secrets`
+
+   | 名称                           | 说明                                                                                                                                    |
+   | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------- |
+   | `BACKEND_TOML`                 | 后端配置文件，[参考此处](/zh/guide/cli/worker.html#修改-wrangler-toml-配置文件)                                                         |
+   | `DEBUG_MODE`                   | (可选) 是否开启调试模式，配置为 `true` 开启, 默认 worker 部署日志不会输出到 Github Actions 页面，开启后会输出                           |
+   | `BACKEND_USE_MAIL_WASM_PARSER` | (可选) 是否使用 wasm 解析邮件，配置为 `true` 开启, 功能参考 [配置 worker 使用 wasm 解析邮件](/zh/guide/feature/mail_parser_wasm_worker) |
+   | `USE_WORKER_ASSETS`            | (可选) 部署带有前端资源的 Worker, 配置为 `true` 开启                                                                                    |
+
+- pages 前端 `secrets`
+
+   > [!warning] 注意
+   > 如果选择部署带有前端资源的 Worker, 则无须配置这些 `secrets`
+
+   | 名称               | 说明                                                                                                                                                                                      |
+   | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+   | `FRONTEND_ENV`     | 前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html)                                                                                           |
+   | `FRONTEND_NAME`    | 你在 Cloudflare Pages 创建的项目名称，可通过 [用户界面](https://temp-mail-docs.awsl.uk/zh/guide/ui/pages.html) 或者 [命令行](https://temp-mail-docs.awsl.uk/zh/guide/cli/pages.html) 创建 |
+   | `FRONTEND_BRANCH`  | (可选) pages 部署的分支，可不配置，默认 `production`                                                                                                                                      |
+   | `TG_FRONTEND_NAME` | (可选) 你在 Cloudflare Pages 创建的项目名称，同 `FRONTEND_NAME`，如果需要 Telegram Mini App 功能，请填写                                                                                  |
+
+### 部署
+
+- 打开仓库的 `Actions` 页面
+- 找到 `Deploy Backend` 点击 `Run workflow` 选择分支手动部署
+- 如果需要前后端分离部署, 找到 `Deploy Frontend`, 点击 `Run workflow` 选择分支手动部署
 
 ## 如何配置自动更新
 

vitepress-docs/docs/zh/guide/actions/pre-requisite.md

@@ -0,0 +1,10 @@
+# Gihub Actions 部署准备
+
+## GitHub 账户
+
+- 需要一个 GitHub 账户
+- 良好的网络环境
+
+## Fork 仓库
+
+- 在 GitHub fork [本仓库](https://github.com/dreamhunter2333/cloudflare_temp_email.git)

vitepress-docs/docs/zh/guide/cli/pages.md

@@ -1,8 +1,11 @@
 # Cloudflare Pages 前端
 
-::: warning
+> [!warning] 注意
-下面两种方式选择一种即可
+> 下面几种方式选择一种即可
-:::
+
+## 部署带有前端资源的 Worker
+
+参考 [部署 Worker](/zh/guide/cli/worker#部署带有前端页面的-worker-可选)
 
 ## 前后端分离部署
 
@@ -22,7 +25,7 @@ cp .env.example .env.prod
 
 ```bash
 pnpm build --emptyOutDir
-# 根据提示创建 pages
+# 第一次部署会提示创建项目, production 分支请填写 production
 pnpm run deploy
 ```
 

vitepress-docs/docs/zh/guide/cli/worker.md

@@ -1,4 +1,7 @@
-# Cloudflare workers 后端
+# Cloudflare Worker 后端
+
+> [!warning] 注意
+> `worker.dev` 域名在中国无法访问，请自定义域名
 
 ## 初始化项目
 
@@ -36,6 +39,12 @@ compatibility_flags = [ "nodejs_compat" ]
 #  { pattern = "temp-email-api.xxxxx.xyz", custom_domain = true },
 # ]
 
+# 如果你想要部署带有前端资源的 worker, 你需要添加 assets 配置
+# [assets]
+# directory = "../frontend/dist/"
+# binding = "ASSETS"
+# run_worker_first = true
+
 # 如果你想要使用定时任务清理邮件，取消下面的注释，并修改 cron 表达式
 # [triggers]
 # crons = [ "0 0 * * *" ]
@@ -86,6 +95,29 @@ database_id = "xxx" # D1 数据库 ID
 # service = "auth-inbox"
 ```
 
+## 部署带有前端页面的 worker(可选)
+
+> [!NOTE]
+> 如果不需要 [带有前端页面的 worker]，可以跳过此步骤
+> 参考之后部署前端文档，可以进行前后端分离部署
+
+确认已构建前端资源到 `frontend/dist` 目录
+
+```bash
+cd frontend
+pnpm install --no-frozen-lockfile
+pnpm build:pages
+```
+
+`worker` 目录下的 `wrangler.toml` 文件中添加下面的配置
+
+```toml
+[assets]
+directory = "../frontend/dist/"
+binding = "ASSETS"
+run_worker_first = true
+```
+
 ## Telegram Bot 配置
 
 > [!NOTE]

vitepress-docs/docs/zh/guide/feature/config-smtp-proxy.md

@@ -1,6 +1,6 @@
 # 搭建 SMTP IMAP 代理服务
 
-::: warning
+::: warning 注意
 如果你使用了 `resend`, 可直接使用 `resend` 的 `SMTP` 服务，不需要使用此服务
 :::
 

vitepress-docs/docs/zh/guide/feature/google-ads.md

@@ -0,0 +1,29 @@
+# 给网页增加 Google Ads
+
+## 命令行部署
+
+修改 `.env.prod` 文件
+
+增加下列两个变量, 具体的值请参考 [Google AdSense](https://www.google.com/adsense/start/) 的说明
+
+```txt
+VITE_GOOGLE_AD_CLIENT=ca-pub-123456
+VITE_GOOGLE_AD_SLOT=123456
+```
+
+然后执行下列命令, 重新部署 pages 即可.
+
+```bash
+pnpm build --emptyOutDir
+# 第一次部署会提示创建项目, production 分支请填写 production
+pnpm run deploy
+```
+
+## GitHub Action 部署
+
+修改 `FRONTEND_ENV`, 增加下列两个变量, 具体的值请参考 [Google AdSense](https://www.google.com/adsense/start/) 的说明, 重新部署 pages 即可.
+
+```txt
+VITE_GOOGLE_AD_CLIENT=ca-pub-123456
+VITE_GOOGLE_AD_SLOT=123456
+```

vitepress-docs/docs/zh/guide/feature/mail-api.md

@@ -1,6 +1,6 @@
 # 查看邮件 API
 
-## 通过 HTTP API 查看邮件
+## 通过 邮件 API 查看邮件
 
 这是一个 `python` 的例子，使用 `requests` 库查看邮件。
 
@@ -8,7 +8,7 @@
 limit = 10
 offset = 0
 res = requests.get(
-    f"http://localhost:8787/api/mails?limit={limit}&offset={offset}",
+    f"https://<你的worker地址>/api/mails?limit={limit}&offset={offset}",
     headers={
         "Authorization": f"Bearer {你的JWT密码}",
         # "x-custom-auth": "<你的网站密码>", # 如果启用了自定义密码
@@ -16,3 +16,51 @@ res = requests.get(
     }
 )
 ```
+
+## admin 邮件 API
+
+支持 `address` filter 和 `keyword` filter
+
+```python
+import requests
+
+url = "https://<你的worker地址>/admin/mails"
+
+querystring = {
+    "limit":"20",
+    "offset":"0",
+    # adress 和 keyword 为可选参数
+    "address":"xxxx@awsl.uk",
+    "keyword":"xxxx"
+}
+
+headers = {"x-admin-auth": "<你的Admin密码>"}
+
+response = requests.get(url, headers=headers, params=querystring)
+
+print(response.json())
+```
+
+## user 邮件 API
+
+支持 `address` filter 和 `keyword` filter
+
+```python
+import requests
+
+url = "https://<你的worker地址>/user_api/mails"
+
+querystring = {
+    "limit":"20",
+    "offset":"0",
+    # adress 和 keyword 为可选参数
+    "address":"xxxx@awsl.uk",
+    "keyword":"xxxx"
+}
+
+headers = {"x-admin-auth": "<你的Admin密码>"}
+
+response = requests.get(url, headers=headers, params=querystring)
+
+print(response.json())
+```

vitepress-docs/docs/zh/guide/feature/mail_parser_wasm_worker.md

@@ -3,7 +3,25 @@
 > [!NOTE]
 > 如果你使用了 webhook 转发，或者 telegram bot 接受邮件，但是邮件内容是乱码，或者无法解析，你对解析的需要更高的要求，可以使用这个功能。
 
-## 修改代码
+## UI 部署
+
+1. 下载 [worker-with-wasm-mail-parser.zip](https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/worker-with-wasm-mail-parser.zip)
+
+2. 回到 `Overview`，找到刚刚创建的 worker，点击 `Edit Code`, 删除原来的文件，上传 `worker.js` 和 `wasm` 后缀的文件, 点击 `Deploy`
+
+    > [!NOTE]
+    > 上传需要先点击左侧菜单的 Explorer,
+    > 在文件列表的窗口里点击鼠标右键，在右键菜单里找到 `Upload`,
+    > 请参考下面的截图
+    >
+    > 参考: [issues156](https://github.com/dreamhunter2333/cloudflare_temp_email/issues/156#issuecomment-2079453822)
+
+    ![worker2](/ui_install/worker-2.png)
+    ![worker-upload](/ui_install/worker-upload.png)
+
+## CLI 部署
+
+### 修改代码
 
 ```bash
 cd worker
@@ -56,7 +74,7 @@ export const commonParseMail = async (raw_mail: string | undefined | null): Prom
 }
 ```
 
-## 部署
+### 部署
 
 ```bash
 cd worker

vitepress-docs/docs/zh/guide/feature/new-address-api.md

@@ -24,9 +24,9 @@ res = requests.post(
 print(res.json())
 ```
 
-# 批量创建随机用户名邮箱地址 API 示例
+## 批量创建随机用户名邮箱地址 API 示例
 
-## 通过 admin API 批量新建邮箱地址
+### 通过 admin API 批量新建邮箱地址
 
 这是一个 `python` 的例子，使用 `requests` 库发送邮件。
 

vitepress-docs/docs/zh/guide/feature/user-oauth2.md

@@ -1,6 +1,6 @@
 # OAuth2 第三方登录
 
-> [!WARNING]
+> [!WARNING] 注意
 > 第三方登录会自动使用用户邮箱注册账号(邮箱相同将视为同一账号)
 >
 > 此账号和注册的账号相同, 也可以通过忘记密码设置密码

vitepress-docs/docs/zh/guide/quick-start.md

@@ -8,7 +8,7 @@
 
 - [通过命令行部署](/zh/guide/cli/pre-requisite)
 - [通过用户界面部署](/zh/guide/ui/d1)
-- [通过Github Actions 部署](/zh/guide/actions/github-action)
+- [通过Github Actions 部署](/zh/guide/actions/pre-requisite)
 
 ### 也可以参考网友提供的详细的小白教程
 

vitepress-docs/docs/zh/guide/ui/d1.md

@@ -1,18 +1,20 @@
 # 初始化/更新 D1 数据库
 
-## 初始化数据库
+## 创建数据库
 
-打开 cloudflare 控制台，选择 `Workers & Pages` -> `D1` -> `Create Database`，点击创建数据库
+打开 cloudflare 控制台，选择 `Storage & Databases` -> `D1 SQL Database` -> `Create Database`，点击创建数据库
 
 ![d1](/ui_install/d1.png)
 
 创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
 
+## 初始化数据库
+
 ::: warning 注意
-下面输入的是 `db/schema.sql` 的内容
+你也可以跳过初始化数据库，在部署完成后，在 admin 页面的 `快速设置` -> `数据库` 中，点击 `初始化数据库` 按钮来初始化数据库
 :::
 
-打开 `Console` 标签页，输入 `db/schema.sql` 的内容，点击 `Execute` 执行
+打开 `Console` 标签页，输入仓库中 [db/schema.sql](https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/db/schema.sql) 文件的内容，点击 `Execute` 执行
 
 ![d1](/ui_install/d1-exec.png)