feat: v1.0.6 (#743 )

fix: 针对角色配置不同的绑定地址数量上限 (#742 )
feat: add role-based address limit configuration (#741 )
2026-05-12 02:20:12 +08:00 · 2025-10-12 18:24:36 +08:00 · 2025-10-12 18:21:22 +08:00 · 2025-10-12 18:12:36 +08:00 · 2025-10-12 13:47:40 +08:00 · 2025-10-12 13:46:13 +08:00
165 changed files with 10172 additions and 8372 deletions
--- a/.flake8
+++ b/.flake8
@@ -0,0 +1,3 @@
+[flake8]
+max-line-length = 180
+exclude = .git,__pycache__,build,dist
--- a/.github/workflows/backend_deploy.yaml
+++ b/.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,21 @@ jobs:

      - name: Deploy Backend for ${{ github.ref_name }}
        run: |
+          export use_worker_assets=${{ secrets.USE_WORKER_ASSETS }}
+          export use_worker_assets_with_telegram=${{ secrets.USE_WORKER_ASSETS_WITH_TELEGRAM }}
+          if [ -n "$use_worker_assets" ]; then
+            cd frontend/
+            pnpm install --no-frozen-lockfile
+            if [ -n "$use_worker_assets_with_telegram" ]; then
+              echo "Building with telegram pages"
+              pnpm build:telegram:pages
+            else
+              echo "Building with normal pages"
+              pnpm build:pages
+            fi
+            cd ..
+          fi
+
          export debug_mode=${{ secrets.DEBUG_MODE }}
          export use_mail_wasm_parser=${{ secrets.BACKEND_USE_MAIL_WASM_PARSER }}
          cd worker/
@@ -45,7 +60,7 @@ jobs:
            echo "Applied mail-parser-wasm-worker patch"
          fi

-          if [ -n "$debug_mode" ]; then
+          if [ "$debug_mode" = "true" ]; then
            pnpm run deploy
          else
            output=$(pnpm run deploy 2>&1)
--- a/.github/workflows/docs_deploy.yml
+++ b/.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
--- a/.github/workflows/frontend_deploy.yaml
+++ b/.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
--- a/.github/workflows/frontend_pagefunction_deploy.yaml
+++ b/.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
--- a/.github/workflows/pr_agent.yml
+++ b/.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 }}
--- a/.github/workflows/tag_build.yml
+++ b/.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
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
+.DS_Store
 dist/
 test/
 .vscode/
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,87 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG

-## main(v0.8.5)
+## v1.0.6
+
+- feat: |DB| update db schema add index
+- feat: |地址密码| 增加地址密码登录功能, 通过 `ENABLE_ADDRESS_PASSWORD` 配置启用, 需要执行 `db/2025-09-23-patch.sql` 文件中的 SQL 更新 `D1` 数据库
+- fix: |GitHub Actions| 修复 debug 模式配置，仅当 DEBUG_MODE 为 'true' 时才启用调试模式
+- feat: |Admin| 账户管理页面新增多选批量操作功能（批量删除、批量清空收件箱、批量清空发件箱）
+- feat: |Admin| 维护页面增加清理未绑定用户地址的功能
+- feat: 支持针对角色配置不同的绑定地址数量上限, 可在 admin 页面配置
+
+## 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)
+
+## v0.8.6
+
+- feat: |UI| 公告支持 html 格式
+- feat: |UI| `COPYRIGHT` 支持 html 格式
+- feat: |Doc| 优化部署文档，补充了 `Github Actions 部署文档`，增加了 `Worker 变量说明`
+
+## v0.8.5

 - feat: |mail-parser-wasm-worker| 修复 `initSync` 函数调用时的 `deprecated` 参数警告
 - feat: rpc headers covert & typo (#559)
--- a/README.md
+++ b/README.md
@@ -1,89 +1,188 @@
-# 使用 cloudflare 免费服务，搭建临时邮箱
+<!-- markdownlint-disable-file MD033 MD045 -->
+# Cloudflare 临时邮箱 - 免费搭建临时邮件服务

 <p align="center">
-  <a href="https://hellogithub.com/repository/2ccc64bb1ba346b480625f584aa19eb1" target="_blank">
-    <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=2ccc64bb1ba346b480625f584aa19eb1&claim_uid=FxNypXK7UQ9OECT" alt="Featured｜HelloGitHub"/>
+  <a href="https://temp-mail-docs.awsl.uk" target="_blank">
+    <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">
-    <img alt="docs" src="https://img.shields.io/badge/docs-grey?style=for-the-badge&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?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 href="https://hellogithub.com/repository/2ccc64bb1ba346b480625f584aa19eb1" target="_blank">
+    <img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=2ccc64bb1ba346b480625f584aa19eb1&claim_uid=FxNypXK7UQ9OECT" alt="Featured｜HelloGitHub" height="30"/>
  </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://deploy.workers.cloudflare.com/?url=https://github.com/dreamhunter2333/cloudflare_temp_email)
+- 🆓 **完全免费** - 基于 Cloudflare 免费服务构建，零成本运行
+- ⚡ **高性能** - Rust WASM 邮件解析，响应速度极快
+- 🎨 **现代化界面** - 响应式设计，支持多语言，操作简便
+- 🔐 **地址密码** - 支持为邮箱地址设置独立密码，增强安全性 (通过 `ENABLE_ADDRESS_PASSWORD` 启用)

-[Github Action 部署文档](https://temp-mail-docs.awsl.uk/zh/guide/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-免费服务搭建临时邮箱)
-  - [查看部署文档](#查看部署文档)
-  - [CHANGELOG](#changelog)
-  - [在线演示](#在线演示)
-  - [功能/TODO](#功能todo)
-  - [Reference](#reference)
-  - [Join Community](#join-community)
+</details>

-## 功能/TODO
+<details open>
+<summary>📖 目录（点击收缩/展开）</summary>

- [x] 使用 `password` 重新登录之前的邮箱
- [x] 获取自定义名字的邮箱，`admin` 可配置黑名单
- [x] 支持多语言
- [x] 增加访问密码，可作为私人站点
- [x] 增加自动回复功能
- [x] 增加查看 `附件` 功能
- [x] 使用 `rust wasm` 解析邮件
- [x] 支持发送邮件
- [x] 支持 `DKIM`
- [x] `admin` 后台创建无前缀邮箱
- [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件, `IMAP` 查看邮件
+- [Cloudflare 临时邮箱 - 免费搭建临时邮件服务](#cloudflare-临时邮箱---免费搭建临时邮件服务)
+  - [📚 部署文档 - 快速开始](#-部署文档---快速开始)
+  - [📝 更新日志](#-更新日志)
+  - [🎯 在线体验](#-在线体验)
+  - [✨ 核心功能](#-核心功能)
+    - [📧 邮件处理](#-邮件处理)
+    - [👥 用户管理](#-用户管理)
+    - [🔧 管理功能](#-管理功能)
+    - [🌐 多语言与界面](#-多语言与界面)
+    - [🤖 集成与扩展](#-集成与扩展)
+  - [🏗️ 技术架构](#️-技术架构)
+    - [🏛️ 系统架构](#️-系统架构)
+    - [🛠️ 技术栈](#️-技术栈)
+    - [📦 主要组件](#-主要组件)
+  - [🌟 加入社区](#-加入社区)
+
+</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 作为数据库
- 使用 Cloudflare Pages 部署前端
- 使用 Cloudflare Workers 部署后端
- email 转发使用 Cloudflare Email Routing
+- [x] 完整的 admin 控制台
+- [x] `admin` 后台创建无前缀邮箱
+- [x] admin 用户管理页面，增加用户地址查看功能
+- [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)
--- a/README_EN.md
+++ b/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
+
+- **<2A> 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
+- **<2A> 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.
--- a/db/2025-09-23-patch.sql
+++ b/db/2025-09-23-patch.sql
@@ -0,0 +1,4 @@
+ALTER TABLE
+    address
+ADD
+    password TEXT;
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -9,15 +9,22 @@ 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,
+    password TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
 );

 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,
@@ -50,6 +57,8 @@ 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,
    value TEXT,
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "cloudflare_temp_email",
-  "version": "0.8.5",
+  "version": "1.0.6",
  "private": true,
  "type": "module",
  "scripts": {
@@ -10,6 +10,7 @@
    "build:pages": "vite build -m pages --emptyOutDir",
    "build:pages:nopwa": "VITE_PWA_DISABLED=true vite build -m pages --emptyOutDir",
    "build:telegram": "VITE_IS_TELEGRAM=true vite build -m prod --emptyOutDir",
+    "build:telegram:pages": "VITE_IS_TELEGRAM=true vite build -m pages --emptyOutDir",
    "build:telegram:release": "VITE_IS_TELEGRAM=true vite build -m example --emptyOutDir",
    "preview": "vite preview",
    "deploy:telegram": "npm run build:telegram && wrangler pages deploy ./dist --branch production",
@@ -20,33 +21,34 @@
  },
  "dependencies": {
    "@simplewebauthn/browser": "10.0.0",
-    "@unhead/vue": "^1.11.15",
-    "@vueuse/core": "^12.4.0",
+    "@unhead/vue": "^1.11.20",
+    "@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",
-    "postal-mime": "^2.4.1",
+    "naive-ui": "^2.43.1",
+    "postal-mime": "^2.5.0",
    "vooks": "^0.2.12",
-    "vue": "^3.5.13",
+    "vue": "^3.5.22",
    "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "^11.0.1",
-    "vue-router": "^4.5.0"
+    "vue-i18n": "^11.1.12",
+    "vue-router": "^4.5.1"
  },
  "devDependencies": {
    "@vicons/fa": "^0.13.0",
    "@vicons/material": "^0.13.0",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "unplugin-auto-import": "^19.0.0",
-    "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.7",
-    "vite-plugin-pwa": "^0.21.1",
-    "vite-plugin-top-level-await": "^1.4.4",
-    "vite-plugin-wasm": "^3.4.1",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^6.3.6",
+    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
    "workbox-build": "^7.3.0",
    "workbox-window": "^7.3.0",
-    "wrangler": "^3.101.0"
-  }
+    "wrangler": "^4.42.2"
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/App.vue
+++ b/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 (
@@ -61,24 +77,36 @@ onMounted(async () => {
  <n-config-provider :locale="localeConfig" :theme="theme">
    <n-global-style />
    <n-spin description="loading..." :show="loading">
-      <n-message-provider container-style="margin-top: 20px;">
-        <n-grid x-gap="12" :cols="12">
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
-          <n-gi :span="!showSideMargin ? 12 : 10">
-            <div class="main">
-              <n-space vertical>
-                <n-layout style="min-height: 80vh;">
-                  <Header />
-                  <router-view></router-view>
-                </n-layout>
-                <Footer />
-              </n-space>
-            </div>
-          </n-gi>
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
-        </n-grid>
-        <n-back-top />
-      </n-message-provider>
+      <n-notification-provider container-style="margin-top: 60px;">
+        <n-message-provider container-style="margin-top: 20px;">
+          <n-grid x-gap="12" :cols="gridMaxCols">
+            <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-gi :span="!showSideMargin ? gridMaxCols : (gridMaxCols - 2)">
+              <div class="main">
+                <n-space vertical>
+                  <n-layout style="min-height: 80vh;">
+                    <Header />
+                    <router-view></router-view>
+                  </n-layout>
+                  <Footer />
+                </n-space>
+              </div>
+            </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>
+      </n-notification-provider>
    </n-spin>
  </n-config-provider>
 </template>
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -1,6 +1,9 @@
 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,
@@ -21,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,
@@ -31,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;
@@ -52,7 +54,7 @@ const apiFetch = async (path, options = {}) => {
    }
 }

-const getOpenSettings = async (message) => {
+const getOpenSettings = async (message, notification) => {
    try {
        const res = await api.fetch("/open_api/settings");
        const domainLabels = res["domainLabels"] || [];
@@ -76,6 +78,7 @@ const getOpenSettings = async (message) => {
            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,
@@ -83,16 +86,23 @@ const getOpenSettings = async (message) => {
            cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
            enableWebhook: res["enableWebhook"] || false,
            isS3Enabled: res["isS3Enabled"] || false,
+            enableAddressPassword: res["enableAddressPassword"] || false,
        });
        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;
-            message.info(announcement.value, {
-                showIcon: false,
-                duration: 0,
-                closable: true
+            notification.info({
+                content: () => {
+                    return h("div", {
+                        innerHTML: announcement.value
+                    });
+                }
            });
        }
    } catch (error) {
@@ -135,6 +145,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 {
--- a/frontend/src/components/MailBox.vue
+++ b/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,
-  useIframeShowMail, sendMailModel, preferShowTextMail
+  isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
+  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 curAttachments = ref([])
+const canGoPrevMail = computed(() => {
+  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: '下一封',
    }
  }
 });
@@ -171,7 +215,7 @@ const refresh = async () => {
  }
 };

-const backFirstPageAndRefresh =  async () =>{
+const backFirstPageAndRefresh = async () => {
  page.value = 1;
  await refresh();
 }
@@ -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
-  }
+  await props.saveToS3(curMail.value.id, filename, blob);
 }

 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">
-                      TO: {{ row.address }}
+                      <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>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </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>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
+              :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
          </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>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </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)">
-                <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>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
+              :useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
+              :onSaveToS3="saveToS3Proxy" />
          </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 }}
--- a/frontend/src/components/MailContentRenderer.vue
+++ b/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>
--- a/frontend/src/components/ShadowHtmlComponent.vue
+++ b/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>
--- a/frontend/src/i18n.ts
+++ b/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;
--- a/frontend/src/main.js
+++ b/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({
-    legacy: false, // you must set `false`, to use Composition API
-    locale: 'zh', // set locale
-    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'
-    }
-});
-
+import App from './App.vue'
+import router from './router'
+import i18n from './i18n'

 const head = createHead()
 const app = createApp(App)
--- a/frontend/src/router/index.js
+++ b/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
--- a/frontend/src/store/index.js
+++ b/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,
@@ -33,6 +36,7 @@ export const useGlobalState = createGlobalState(
            isS3Enabled: false,
            showGithub: true,
            disableAdminPasswordCheck: false,
+            enableAddressPassword: false,
        })
        const settings = ref({
            fetched: false,
@@ -60,6 +64,7 @@ export const useGlobalState = createGlobalState(
        const auth = useStorage('auth', '');
        const adminAuth = useStorage('adminAuth', '');
        const jwt = useStorage('jwt', '');
+        const addressPassword = useSessionStorage('addressPassword', '');
        const adminTab = useSessionStorage('adminTab', "account");
        const adminMailTabAddress = ref("");
        const adminSendBoxTabAddress = ref("");
@@ -67,7 +72,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 +97,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 +146,8 @@ export const useGlobalState = createGlobalState(
            showAdminPage,
            userOauth2SessionState,
            userOauth2SessionClientID,
+            useSimpleIndex,
+            addressPassword,
        }
    },
 )
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -19,6 +19,9 @@ export const utcToLocalDate = (utcDate: string, useUTCDate: boolean) => {
    }
    try {
        const date = new Date(utcDateString);
+        // if invalid date string
+        if (isNaN(date.getTime())) return utcDateString;
+
        return date.toLocaleString();
    } catch (e) {
        console.error(e);
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -14,16 +14,17 @@ import AccountSettings from './admin/AccountSettings.vue';
 import UserManagement from './admin/UserManagement.vue';
 import UserSettings from './admin/UserSettings.vue';
 import UserOauth2Settings from './admin/UserOauth2Settings.vue';
+import RoleAddressConfig from './admin/RoleAddressConfig.vue';
 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 +32,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;
@@ -55,6 +62,7 @@ const { t } = useI18n({
      user_management: 'User Management',
      user_settings: 'User Settings',
      userOauth2Settings: 'Oauth2 Settings',
+      roleAddressConfig: 'Role Address Config',
      unknow: 'Mails with unknow receiver',
      senderAccess: 'Sender Access Control',
      sendBox: 'Send Box',
@@ -62,6 +70,7 @@ const { t } = useI18n({
      webhookSettings: 'Webhook Settings',
      statistics: 'Statistics',
      maintenance: 'Maintenance',
+      database: 'Database',
      workerconfig: 'Worker Config',
      appearance: 'Appearance',
      about: 'About',
@@ -81,6 +90,7 @@ const { t } = useI18n({
      user_management: '用户管理',
      user_settings: '用户设置',
      userOauth2Settings: 'Oauth2 设置',
+      roleAddressConfig: '角色地址配置',
      unknow: '无收件人邮件',
      senderAccess: '发件权限控制',
      sendBox: '发件箱',
@@ -88,6 +98,7 @@ const { t } = useI18n({
      webhookSettings: 'Webhook 设置',
      statistics: '统计',
      maintenance: '维护',
+      database: '数据库',
      workerconfig: 'Worker 配置',
      appearance: '外观',
      about: '关于',
@@ -107,7 +118,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 +132,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>
@@ -162,6 +176,9 @@ onMounted(async () => {
          <n-tab-pane name="userOauth2Settings" :tab="t('userOauth2Settings')">
            <UserOauth2Settings />
          </n-tab-pane>
+          <n-tab-pane name="roleAddressConfig" :tab="t('roleAddressConfig')">
+            <RoleAddressConfig />
+          </n-tab-pane>
        </n-tabs>
      </n-tab-pane>
      <n-tab-pane name="mails" :tab="t('mails')">
@@ -191,6 +208,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>
--- a/frontend/src/views/Footer.vue
+++ b/frontend/src/views/Footer.vue
@@ -21,9 +21,14 @@ const { t } = useI18n({
    <div>
        <n-divider class="footer-divider" />
        <div style="text-align: center; padding: 20px">
-            <n-text depth="3">
-                {{ t('copyright') }} © 2023-{{ new Date().getFullYear() }} {{ openSettings.copyright }}
-            </n-text>
+            <n-space justify="center">
+                <n-text depth="3">
+                    {{ t('copyright') }} © 2023-{{ new Date().getFullYear() }}
+                </n-text>
+                <n-text depth="3">
+                    <div v-html="openSettings.copyright"></div>
+                </n-text>
+            </n-space>
        </div>
    </div>
 </template>
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -15,6 +15,7 @@ import { api } from '../api'
 import { getRouterPathWithLang } from '../utils'

 const message = useMessage()
+const notification = useNotification()

 const {
    toggleDark, isDark, isTelegram, showAdminPage,
@@ -125,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;
                }
            },
@@ -213,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++;
    }
@@ -223,7 +228,7 @@ const logoClick = async () => {
 }

 onMounted(async () => {
-    await api.getOpenSettings(message);
+    await api.getOpenSettings(message, notification);
    // make sure user_id is fetched
    if (!userSettings.value.user_id) await api.getUserSettings(message);
 });
--- a/frontend/src/views/Index.vue
+++ b/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 { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const { loading, settings, openSettings, indexTab, globalTabplacement, useSimpleIndex } = 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,43 +131,61 @@ onMounted(() => {

 <template>
  <div>
-    <AddressBar />
-    <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
-      <n-tab-pane name="mailbox" :tab="t('mailbox')">
-        <div v-if="showMailIdQuery" style="margin-bottom: 10px;">
-          <n-input-group>
-            <n-input v-model:value="mailIdQuery" />
-            <n-button @click="queryMail" type="primary" tertiary>
-              {{ t('query') }}
-            </n-button>
-          </n-input-group>
-        </div>
-        <MailBox :key="mailBoxKey" :showEMailTo="false" :showReply="true" :showSaveS3="openSettings.isS3Enabled"
-          :saveToS3="saveToS3" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
-          :fetchMailData="fetchMailData" :deleteMail="deleteMail" />
-      </n-tab-pane>
-      <n-tab-pane name="sendbox" :tab="t('sendbox')">
-        <SendBox :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
-          :deleteMail="deleteSenboxMail" />
-      </n-tab-pane>
-      <n-tab-pane name="sendmail" :tab="t('sendmail')">
-        <SendMail />
-      </n-tab-pane>
-      <n-tab-pane name="accountSettings" :tab="t('accountSettings')">
-        <AccountSettings />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
-        <AutoReply />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('webhookSettings')">
-        <Webhook />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.isS3Enabled" name="s3_attachment" :tab="t('s3Attachment')">
-        <Attachment />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
-        <About />
-      </n-tab-pane>
-    </n-tabs>
+    <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>
+              <n-input v-model:value="mailIdQuery" />
+              <n-button @click="queryMail" type="primary" tertiary>
+                {{ t('query') }}
+              </n-button>
+            </n-input-group>
+          </div>
+          <MailBox :key="mailBoxKey" :showEMailTo="false" :showReply="true" :showSaveS3="openSettings.isS3Enabled"
+            :saveToS3="saveToS3" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+            :fetchMailData="fetchMailData" :deleteMail="deleteMail" />
+        </n-tab-pane>
+        <n-tab-pane name="sendbox" :tab="t('sendbox')">
+          <SendBox :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+            :deleteMail="deleteSenboxMail" />
+        </n-tab-pane>
+        <n-tab-pane name="sendmail" :tab="t('sendmail')">
+          <SendMail />
+        </n-tab-pane>
+        <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>
+        <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('webhookSettings')">
+          <Webhook />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.isS3Enabled" name="s3_attachment" :tab="t('s3Attachment')">
+          <Attachment />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
+          <About />
+        </n-tab-pane>
+      </n-tabs>
+    </div>
  </div>
 </template>
--- a/frontend/src/views/User.vue
+++ b/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>
--- a/frontend/src/views/admin/Account.vue
+++ b/frontend/src/views/admin/Account.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
-import { NBadge } from 'naive-ui'
+import { ref, h, onMounted, watch, computed } from 'vue';
+import { NBadge, useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'

 import { useGlobalState } from '../../store'
@@ -9,7 +9,7 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'

 const {
-    loading, adminTab,
+    loading, adminTab, openSettings,
    adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
@@ -27,13 +27,31 @@ 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',
+            resetPassword: 'Reset Password',
+            newPassword: 'New Password',
+            passwordResetSuccess: 'Password reset successfully',
+            selectAll: 'Select All of This Page',
+            unselectAll: 'Unselect All',
+            pleaseSelectAddress: 'Please select address',
+            selectedItems: 'Selected',
+            multiDelete: 'Multi Delete',
+            multiDeleteTip: 'Are you sure to delete selected addresses?',
+            multiClearInbox: 'Multi Clear Inbox',
+            multiClearInboxTip: 'Are you sure to clear inbox for selected addresses?',
+            multiClearSentItems: 'Multi Clear Sent Items',
+            multiClearSentItemsTip: 'Are you sure to clear sent items for selected addresses?',
        },
        zh: {
            name: '名称',
@@ -46,13 +64,31 @@ const { t } = useI18n({
            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
            delete: '删除',
            deleteTip: '确定要删除这个邮箱吗？',
-            delteAccount: '删除邮箱',
+            deleteAccount: '删除邮箱',
            viewMails: '查看邮件',
            viewSendBox: '查看发件箱',
            itemCount: '总数',
            query: '查询',
            addressQueryTip: '留空查询所有地址',
+            clearInbox: '清空收件箱',
+            clearSentItems: '清空发件箱',
+            clearInboxTip: '确定要清空这个邮箱的收件箱吗？',
+            clearSentItemsTip: '确定要清空这个邮箱的发件箱吗？',
            actions: '操作',
+            success: '成功',
+            resetPassword: '重置密码',
+            newPassword: '新密码',
+            passwordResetSuccess: '密码重置成功',
+            selectAll: '全选本页',
+            unselectAll: '取消全选',
+            pleaseSelectAddress: '请选择地址',
+            selectedItems: '已选择',
+            multiDelete: '批量删除',
+            multiDeleteTip: '确定要删除选中的邮箱吗？',
+            multiClearInbox: '批量清空收件箱',
+            multiClearInboxTip: '确定要清空选中邮箱的收件箱吗？',
+            multiClearSentItems: '批量清空发件箱',
+            multiClearSentItemsTip: '确定要清空选中邮箱的发件箱吗？',
        }
    }
 });
@@ -60,6 +96,20 @@ const { t } = useI18n({
 const showEmailCredential = ref(false)
 const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
+const curClearInboxAddressId = ref(0);
+const curClearSentItemsAddressId = ref(0);
+const showResetPassword = ref(false);
+const curResetPasswordAddressId = ref(0);
+const newPassword = ref('');
+
+// Multi-action mode state
+const checkedRowKeys = ref([]);
+const showMultiActionModal = ref(false);
+const multiActionProgress = ref({ percentage: 0, tip: '0/0' });
+const multiActionTitle = ref('');
+
+const selectedCount = computed(() => checkedRowKeys.value.length);
+const showMultiActionBar = computed(() => checkedRowKeys.value.length > 0);

 const addressQuery = ref("")

@@ -68,6 +118,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 +135,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 +144,142 @@ 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 resetPassword = async () => {
+    try {
+        await api.fetch(`/admin/address/${curResetPasswordAddressId.value}/reset_password`, {
+            method: 'POST',
+            body: JSON.stringify({
+                password: newPassword.value
+            })
+        });
+        message.success(t("passwordResetSuccess"));
+        newPassword.value = '';
+        showResetPassword.value = false;
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+// Multi-action mode functions
+const multiActionSelectAll = () => {
+    checkedRowKeys.value = data.value.map(item => item.id);
+}
+
+const multiActionUnselectAll = () => {
+    checkedRowKeys.value = [];
+}
+
+// 通用批量操作函数
+const executeBatchOperation = async ({
+    shouldSkip = () => false,
+    apiCall,
+    title,
+    operationName = 'operation'
+}) => {
+    try {
+        loading.value = true;
+        const selectedAddresses = data.value.filter((item) =>
+            checkedRowKeys.value.includes(item.id)
+        );
+
+        if (selectedAddresses.length === 0) {
+            message.error(t('pleaseSelectAddress'));
+            return;
+        }
+
+        const failedIds = [];
+        const totalCount = selectedAddresses.length;
+
+        multiActionProgress.value = {
+            percentage: 0,
+            tip: `0/${totalCount}`
+        };
+        multiActionTitle.value = title;
+        showMultiActionModal.value = true;
+
+        for (const [index, address] of selectedAddresses.entries()) {
+            try {
+                if (!shouldSkip(address)) {
+                    await apiCall(address.id);
+                }
+            } catch (error) {
+                console.error(`${operationName} failed for address ${address.id}:`, error);
+                failedIds.push(address.id);
+            }
+            multiActionProgress.value = {
+                percentage: Math.floor((index + 1) / totalCount * 100),
+                tip: `${index + 1}/${totalCount}`
+            };
+        }
+
+        await fetchData();
+        checkedRowKeys.value = failedIds;
+        message.success(t("success"));
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        loading.value = false;
+    }
+}
+
+const multiActionDeleteAccounts = async () => {
+    await executeBatchOperation({
+        apiCall: (id) => api.adminDeleteAddress(id),
+        title: t('multiDelete') + ' ' + t('success'),
+        operationName: 'Delete'
+    });
+}
+
+const multiActionClearInbox = async () => {
+    await executeBatchOperation({
+        shouldSkip: (address) => address.mail_count <= 0,
+        apiCall: (id) => api.fetch(`/admin/clear_inbox/${id}`, {
+            method: 'DELETE'
+        }),
+        title: t('multiClearInbox') + ' ' + t('success'),
+        operationName: 'ClearInbox'
+    });
+}
+
+const multiActionClearSentItems = async () => {
+    await executeBatchOperation({
+        shouldSkip: (address) => address.send_count <= 0,
+        apiCall: (id) => api.fetch(`/admin/clear_sent_items/${id}`, {
+            method: 'DELETE'
+        }),
+        title: t('multiClearSentItems') + ' ' + t('success'),
+        operationName: 'ClearSentItems'
+    });
+}
+
 const fetchData = async () => {
    try {
        addressQuery.value = addressQuery.value.trim()
@@ -106,12 +294,15 @@ const fetchData = async () => {
            count.value = addressCount;
        }
    } catch (error) {
-        console.log(error)
+        console.error(error);
        message.error(error.message || "error");
    }
 }

 const columns = [
+    {
+        type: 'selection'
+    },
    {
        title: "ID",
        key: "id"
@@ -212,7 +403,8 @@ const columns = [
                                            }
                                        },
                                        { default: () => t('viewMails') }
-                                    )
+                                    ),
+                                    show: row.mail_count > 0
                                },
                                {
                                    label: () => h(NButton,
@@ -224,7 +416,47 @@ 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,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curResetPasswordAddressId.value = row.id;
+                                                showResetPassword.value = true;
+                                            }
+                                        },
+                                        { default: () => t('resetPassword') }
+                                    ),
+                                    show: openSettings.value?.enableAddressPassword
                                },
                                {
                                    label: () => h(NButton,
@@ -271,21 +503,78 @@ 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-input-group>
+        <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>
+
+        <n-modal v-model:show="showResetPassword" preset="dialog" :title="t('resetPassword')">
+            <n-form-item :label="t('newPassword')">
+                <n-input v-model:value="newPassword" type="password" placeholder="" show-password-on="click" />
+            </n-form-item>
+            <template #action>
+                <n-button :loading="loading" @click="resetPassword" size="small" tertiary type="info">
+                    {{ t('resetPassword') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-input-group style="margin-bottom: 10px;">
            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')"
                @keydown.enter="fetchData" />
            <n-button @click="fetchData" type="primary" tertiary>
                {{ t('query') }}
            </n-button>
        </n-input-group>
+
+        <n-space v-if="showMultiActionBar" style="margin-bottom: 10px;">
+            <n-button @click="multiActionSelectAll" tertiary>
+                {{ t('selectAll') }}
+            </n-button>
+            <n-button @click="multiActionUnselectAll" tertiary>
+                {{ t('unselectAll') }}
+            </n-button>
+            <n-popconfirm @positive-click="multiActionDeleteAccounts">
+                <template #trigger>
+                    <n-button tertiary type="error">{{ t('multiDelete') }}</n-button>
+                </template>
+                {{ t('multiDeleteTip') }}
+            </n-popconfirm>
+            <n-popconfirm @positive-click="multiActionClearInbox">
+                <template #trigger>
+                    <n-button tertiary type="warning">{{ t('multiClearInbox') }}</n-button>
+                </template>
+                {{ t('multiClearInboxTip') }}
+            </n-popconfirm>
+            <n-popconfirm @positive-click="multiActionClearSentItems">
+                <template #trigger>
+                    <n-button tertiary type="warning">{{ t('multiClearSentItems') }}</n-button>
+                </template>
+                {{ t('multiClearSentItemsTip') }}
+            </n-popconfirm>
+            <n-tag type="info">
+                {{ t('selectedItems') }}: {{ selectedCount }}
+            </n-tag>
+        </n-space>
        <div style="overflow: auto;">
            <div style="display: inline-block;">
                <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
@@ -295,8 +584,21 @@ onMounted(async () => {
                    </template>
                </n-pagination>
            </div>
-            <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+            <n-data-table v-model:checked-row-keys="checkedRowKeys" :columns="columns" :data="data" :bordered="false"
+                :row-key="row => row.id" embedded />
        </div>
+
+        <!-- Multi-action progress modal -->
+        <n-modal v-model:show="showMultiActionModal" preset="dialog" :title="multiActionTitle" negative-text="OK">
+            <n-space justify="center">
+                <n-progress type="circle" status="info" :percentage="multiActionProgress.percentage">
+                    <span style="text-align: center">
+                        {{ multiActionProgress.tip }}
+                    </span>
+                </n-progress>
+            </n-space>
+        </n-modal>
+
    </div>
 </template>

--- a/frontend/src/views/admin/AccountSettings.vue
+++ b/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;">
-                {{ t("tip") }}
+            <n-alert :show-icon="false" :bordered="false" type="warning" style="margin-bottom: 10px;">
+                <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>
--- a/frontend/src/views/admin/CreateAccount.vue
+++ b/frontend/src/views/admin/CreateAccount.vue
@@ -15,10 +15,13 @@ const { t } = useI18n({
        en: {
            address: 'Address',
            enablePrefix: 'If enable Prefix',
-            creatNewEmail: 'Get New Email',
+            creatNewEmail: 'Create New Email',
            fillInAllFields: 'Please fill in all fields',
            successTip: 'Success Created',
            addressCredential: 'Mail Address Credential',
+            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
+            addressPassword: 'Address Password',
+            linkWithAddressCredential: 'Open to auto login email link',
        },
        zh: {
            address: '地址',
@@ -27,6 +30,9 @@ const { t } = useI18n({
            fillInAllFields: '请填写完整信息',
            successTip: '创建成功',
            addressCredential: '邮箱地址凭证',
+            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            addressPassword: '地址密码',
+            linkWithAddressCredential: '打开即可自动登录邮箱的链接',
        }
    }
 });
@@ -36,6 +42,8 @@ const emailName = ref("")
 const emailDomain = ref("")
 const showReultModal = ref(false)
 const result = ref("")
+const addressPassword = ref("")
+const createdAddress = ref("")

 const newEmail = async () => {
    if (!emailName.value || !emailDomain.value) {
@@ -52,6 +60,8 @@ const newEmail = async () => {
            })
        })
        result.value = res["jwt"];
+        addressPassword.value = res["password"] || '';
+        createdAddress.value = res["address"] || '';
        message.success(t('successTip'))
        showReultModal.value = true
    } catch (error) {
@@ -59,6 +69,10 @@ const newEmail = async () => {
    }
 }

+const getUrlWithJwt = () => {
+    return `${window.location.origin}/?jwt=${result.value}`
+}
+
 onMounted(async () => {
    if (openSettings.prefix) {
        enablePrefix.value = true
@@ -70,14 +84,29 @@ onMounted(async () => {
 <template>
    <div class="center">
        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('addressCredential')">
-            <p>{{ t('addressCredential') }}</p>
-            <n-card :bordered="false" embedded>
+            <span>
+                <p>{{ t("addressCredentialTip") }}</p>
+            </span>
+            <n-card embedded>
                <b>{{ result }}</b>
            </n-card>
+            <n-card embedded v-if="addressPassword">
+                <p><b>{{ createdAddress }}</b></p>
+                <p>{{ t('addressPassword') }}: <b>{{ addressPassword }}</b></p>
+            </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>
        <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>
--- a/frontend/src/views/admin/DatabaseManager.vue
+++ b/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>
--- a/frontend/src/views/admin/Maintenance.vue
+++ b/frontend/src/views/admin/Maintenance.vue
@@ -11,10 +11,14 @@ 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,
+    enableUnboundAddressAutoCleanup: false,
+    cleanUnboundAddressDays: 30,
 })

 const { t } = useI18n({
@@ -24,22 +28,28 @@ 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",
+            unboundAddressLabel: "Cleanup the unbound 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 天前的未活跃地址",
+            unboundAddressLabel: "清理 n 天前的未绑定用户地址",
            autoCleanup: "自动清理",
            cleanupSuccess: "清理成功",
            cleanupNow: "立即清理",
            save: "保存",
-            cronTip: "启用定时清理, 需在 worker 配置 [crons] 参数, 请参考文档",
+            cronTip: "启用定时清理, 需在 worker 配置 [crons] 参数, 请参考文档, 配置为 0 天表示全部清空",
        }
    }
 });
@@ -86,9 +96,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 +141,42 @@ onMounted(async () => {
                        {{ t('cleanupNow') }}
                    </n-button>
                </n-form-item-row>
-                <n-button @click="save" type="primary" block :loading="loading">
-                    {{ t('save') }}
-                </n-button>
+                <n-form-item-row :label="t('addressCreateLabel')">
+                    <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-item-row :label="t('unboundAddressLabel')">
+                    <n-checkbox v-model:checked="cleanupModel.enableUnboundAddressAutoCleanup">
+                        {{ t('autoCleanup') }}
+                    </n-checkbox>
+                    <n-input-number v-model:value="cleanupModel.cleanUnboundAddressDays" :placeholder="t('tip')" />
+                    <n-button @click="cleanup('unboundAddress', cleanupModel.cleanUnboundAddressDays)">
+                        <template #icon>
+                            <n-icon :component="CleaningServicesFilled" />
+                        </template>
+                        {{ t('cleanupNow') }}
+                    </n-button>
+                </n-form-item-row>
            </n-form>
        </n-card>
    </div>
--- a/frontend/src/views/admin/RoleAddressConfig.vue
+++ b/frontend/src/views/admin/RoleAddressConfig.vue
@@ -0,0 +1,153 @@
+<script setup>
+import { ref, onMounted, h } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NInputNumber, NTag, NSpace, NButton } from 'naive-ui';
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { loading } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            role: 'Role',
+            maxAddressCount: 'Max Address Count',
+            save: 'Save',
+            successTip: 'Success',
+            noRolesAvailable: 'No roles available in system config',
+            roleConfigDesc: 'Configure maximum address count for each user role. Role-based limits take priority over global settings.',
+            notConfigured: 'Not Configured (Use Global Settings)',
+        },
+        zh: {
+            role: '角色',
+            maxAddressCount: '最大地址数量',
+            save: '保存',
+            successTip: '成功',
+            noRolesAvailable: '系统配置中没有可用的角色',
+            roleConfigDesc: '为每个用户角色配置最大地址数量。角色配置优先于全局设置。',
+            notConfigured: '未配置（使用全局设置）',
+        }
+    }
+});
+
+const systemRoles = ref([])
+const tableData = ref([])
+
+const fetchUserRoles = async () => {
+    try {
+        const results = await api.fetch(`/admin/user_roles`);
+        systemRoles.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const fetchRoleConfigs = async () => {
+    try {
+        const { configs } = await api.fetch(`/admin/role_address_config`);
+        tableData.value = systemRoles.value.map(roleObj => ({
+            role: roleObj.role,
+            max_address_count: configs[roleObj.role]?.maxAddressCount ?? null,
+        }));
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const saveConfig = async () => {
+    try {
+        // convert tableData to object with nested structure
+        const configs = {};
+        tableData.value.forEach(row => {
+            if (row.max_address_count !== null && row.max_address_count !== undefined) {
+                configs[row.role] = { maxAddressCount: row.max_address_count };
+            }
+        });
+
+        await api.fetch(`/admin/role_address_config`, {
+            method: 'POST',
+            body: JSON.stringify({ configs })
+        });
+        message.success(t('successTip'));
+        await fetchRoleConfigs();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('role'),
+        key: 'role',
+        width: 200,
+        render(row) {
+            return h(NTag, {
+                type: 'info',
+                bordered: false
+            }, {
+                default: () => row.role
+            })
+        }
+    },
+    {
+        title: t('maxAddressCount'),
+        key: 'max_address_count',
+        render(row) {
+            return h(NInputNumber, {
+                value: row.max_address_count,
+                min: 0,
+                max: 999,
+                clearable: true,
+                placeholder: t('notConfigured'),
+                style: 'width: 200px;',
+                onUpdateValue: (value) => {
+                    row.max_address_count = value;
+                }
+            })
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchUserRoles();
+    await fetchRoleConfigs();
+})
+</script>
+
+<template>
+    <div style="margin-top: 10px;">
+        <n-alert type="info" :bordered="false" style="margin-bottom: 20px;">
+            {{ t('roleConfigDesc') }}
+        </n-alert>
+
+        <n-alert v-if="systemRoles.length === 0" type="warning" :bordered="false">
+            {{ t('noRolesAvailable') }}
+        </n-alert>
+
+        <div v-else>
+            <n-space justify="end" style="margin-bottom: 12px;">
+                <n-button :loading="loading" @click="saveConfig" type="primary">
+                    {{ t('save') }}
+                </n-button>
+            </n-space>
+
+            <n-data-table
+                :columns="columns"
+                :data="tableData"
+                :bordered="false"
+                embedded
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.n-data-table {
+    min-width: 600px;
+}
+</style>
--- a/frontend/src/views/admin/Telegram.vue
+++ b/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)',
-            globalMailPushList: 'Global Mail Push List',
+            enableGlobalMailPush: 'Enable Global Mail Push(Manually input telegram Chat ID)',
+            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, 回车增加)',
-            globalMailPushList: '全局邮件推送用户列表',
+            enableGlobalMailPush: '启用全局邮件推送(手动输入邮箱管理员的 telegram Chat ID, 回车增加)',
+            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>
--- a/frontend/src/views/admin/UserAddressManagement.vue
+++ b/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>
--- a/frontend/src/views/admin/UserManagement.vue
+++ b/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, {
-                value: row.address_count,
-                'show-zero': true,
-                max: 99,
-                type: "success"
-            })
+            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>
--- a/frontend/src/views/admin/UserOauth2Settings.vue
+++ b/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>
--- a/frontend/src/views/admin/UserSettings.vue
+++ b/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>
--- a/frontend/src/views/admin/Webhook.vue
+++ b/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-flex justify="end">
+                <n-button @click="saveSettings" type="primary">
+                    {{ 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')" />
+                    :placeholder="t('webhookAllowList')">
+                    <template #empty>
+                        <n-text depth="3">
+                            {{ t('manualInputPrompt') }}
+                        </n-text>
+                    </template>
+                </n-select>
            </n-form-item-row>
-            <n-button @click="saveSettings" type="primary" block>
-                {{ t('save') }}
-            </n-button>
        </n-card>
        <n-result v-else status="404" :title="t('notEnabled')" :description="errorInfo" />
    </div>
--- a/frontend/src/views/admin/WorkerConfig.vue
+++ b/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;">
+        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
            <pre>{{ JSON.stringify(settings, null, 2) }}</pre>
        </n-card>
    </div>
--- a/frontend/src/views/common/About.vue
+++ b/frontend/src/views/common/About.vue
@@ -1,10 +1,13 @@
 <script setup>
 import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+import { useGlobalState } from '../../store'
+const { announcement } = useGlobalState()
 </script>

 <template>
    <div class="center">
        <n-card :bordered="false" embedded>
+            <div v-html="announcement"></div>
            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
                <template #icon>
                    <n-icon :component="GithubAlt" />
--- a/frontend/src/views/common/Appearance.vue
+++ b/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>
--- a/frontend/src/views/common/Login.vue
+++ b/frontend/src/views/common/Login.vue
@@ -9,7 +9,7 @@ import Turnstile from '../../components/Turnstile.vue'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import { getRouterPathWithLang } from '../../utils'
+import { getRouterPathWithLang, hashPassword } from '../../utils'

 const props = defineProps({
    bindUserAddress: {
@@ -34,11 +34,12 @@ const props = defineProps({
 })

 const message = useMessage()
+const notification = useNotification()
 const router = useRouter()

 const {
    jwt, loading, openSettings,
-    showAddressCredential, userSettings
+    showAddressCredential, userSettings, addressPassword
 } = useGlobalState()

 const tabValue = ref('signin')
@@ -46,8 +47,47 @@ const credential = ref('')
 const emailName = ref("")
 const emailDomain = ref("")
 const cfToken = ref("")
+const loginMethod = ref('credential') // 'credential' or 'password'
+const loginAddress = ref('')
+const loginPassword = ref('')
+
+// 根据 openSettings 初始化登录方式
+const initLoginMethod = () => {
+    if (openSettings.value?.enableAddressPassword) {
+        loginMethod.value = 'password';
+    } else {
+        loginMethod.value = 'credential';
+    }
+}

 const login = async () => {
+    if (loginMethod.value === 'password') {
+        // Password login
+        if (!loginAddress.value || !loginPassword.value) {
+            message.error(t('emailPasswordRequired'));
+            return;
+        }
+        try {
+            const res = await api.fetch('/api/address_login', {
+                method: 'POST',
+                body: JSON.stringify({
+                    email: loginAddress.value,
+                    password: await hashPassword(loginPassword.value)
+                })
+            });
+            jwt.value = res.jwt;
+            await api.getSettings();
+            try {
+                await props.bindUserAddress();
+            } catch (error) {
+                message.error(`${t('bindUserAddressError')}: ${error.message}`);
+            }
+            await router.push(getRouterPathWithLang("/", locale.value));
+        } catch (error) {
+            message.error(error.message || "error");
+        }
+        return;
+    }
    if (!credential.value) {
        message.error(t('credentialInput'));
        return;
@@ -70,6 +110,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: ',
@@ -82,9 +123,16 @@ 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',
+            passwordLogin: 'Password Login',
+            credentialLogin: 'Credential Login',
+            email: 'Email',
+            password: 'Password',
+            emailPasswordRequired: 'Email and password are required',
        },
        zh: {
            login: '登录',
+            loginAndBind: '登录并绑定',
            pleaseGetNewEmail: '请"登录"或点击 "注册新邮箱" 按钮来获取一个新的邮箱地址',
            getNewEmail: '创建新邮箱',
            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许: ',
@@ -97,10 +145,23 @@ const { locale, t } = useI18n({
            credentialInput: '请输入邮箱地址凭据',
            bindUserInfo: '已登录用户, 登录未绑定邮箱或创建新邮箱地址将绑定到当前用户',
            bindUserAddressError: '绑定邮箱地址到用户时错误',
+            autoGeneratedName: '自动生成名称',
+            passwordLogin: '密码登录',
+            credentialLogin: '凭据登录',
+            email: '邮箱',
+            password: '密码',
+            emailPasswordRequired: '邮箱和密码不能为空',
        }
    }
 });

+const loginAndBindTag = computed(() => {
+    if (userSettings.value.user_email) {
+        return t('loginAndBind')
+    }
+    return t('login')
+})
+
 const addressRegex = computed(() => {
    try {
        if (openSettings.value.addressRegex) {
@@ -137,12 +198,15 @@ 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
        );
        jwt.value = res["jwt"];
+        addressPassword.value = res["password"] || '';
        await api.getSettings();
        await router.push(getRouterPathWithLang("/", locale.value));
        showAddressCredential.value = true;
@@ -195,9 +259,10 @@ const showNewAddressTab = computed(() => {

 onMounted(async () => {
    if (!openSettings.value.domains || openSettings.value.domains.length === 0) {
-        await api.getOpenSettings();
+        await api.getOpenSettings(message, notification);
    }
    emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
+    initLoginMethod();
 });
 </script>

@@ -207,16 +272,36 @@ 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 }" />
-                    </n-form-item-row>
+                    <div v-if="loginMethod === 'password'">
+                        <n-form-item-row :label="t('email')" required>
+                            <n-input v-model:value="loginAddress" />
+                        </n-form-item-row>
+                        <n-form-item-row :label="t('password')" required>
+                            <n-input v-model:value="loginPassword" type="password" show-password-on="click" />
+                        </n-form-item-row>
+                    </div>
+
+                    <div v-else>
+                        <n-form-item-row :label="t('credential')" required>
+                            <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
+                        </n-form-item-row>
+                    </div>
+
+                    <div class="switch-login-button">
+                        <n-button v-if="openSettings?.enableAddressPassword"
+                            @click="loginMethod === 'password' ? loginMethod = 'credential' : loginMethod = 'password'"
+                            type="info" quaternary size="tiny">
+                            {{ loginMethod === 'password' ? t('credentialLogin') : t('passwordLogin') }}
+                        </n-button>
+                    </div>
+
                    <n-button @click="login" :loading="loading" type="primary" block secondary strong>
                        <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>
@@ -230,19 +315,22 @@ onMounted(async () => {
                <n-spin :show="generateNameLoading">
                    <n-form>
                        <span>
-                            <p>{{ t("getNewEmailTip1") + addressRegex.source }}</p>
-                            <p>{{ t("getNewEmailTip2") }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip1") +
+                                addressRegex.source }}</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"
-                                :maxlength="openSettings.maxAddressLen" />
+                            <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" />
@@ -279,6 +367,12 @@ onMounted(async () => {
    margin-top: 10px;
 }

+.switch-login-button {
+    display: flex;
+    justify-content: center;
+    margin: 10px 0;
+}
+
 .n-form {
    text-align: left;
 }
--- a/frontend/src/views/index/AccountSettings.vue
+++ b/frontend/src/views/index/AccountSettings.vue
@@ -5,34 +5,59 @@ import { useRouter } from 'vue-router'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
-import Appearance from '../common/Appearance.vue'
+import { hashPassword } from '../../utils'
 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 showChangePassword = ref(false)
+const newPassword = ref('')
+const confirmPassword = ref('')
 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",
-            delteAccountConfirm: "Are you sure to delete your account and all emails for this account?",
+            deleteAccount: "Delete 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",
+            changePassword: "Change Password",
+            newPassword: "New Password",
+            confirmPassword: "Confirm Password",
+            passwordMismatch: "Passwords do not match",
+            passwordChanged: "Password changed successfully",
        },
        zh: {
            logout: '退出登录',
-            delteAccount: "删除账户",
+            deleteAccount: "删除账户",
            showAddressCredential: '查看邮箱地址凭证',
            logoutConfirm: '确定要退出登录吗？',
-            delteAccount: "删除账户",
-            delteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+            deleteAccount: "删除账户",
+            deleteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+            clearInbox: "清空收件箱",
+            clearSentItems: "清空发件箱",
+            clearInboxConfirm: "确定要清空你收件箱中的所有邮件吗？",
+            clearSentItemsConfirm: "确定要清空你发件箱中的所有邮件吗？",
+            success: "成功",
+            changePassword: "修改密码",
+            newPassword: "新密码",
+            confirmPassword: "确认密码",
+            passwordMismatch: "密码不匹配",
+            passwordChanged: "密码修改成功",
        }
    }
 });
@@ -55,35 +80,125 @@ 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;
+    }
+};
+
+const changePassword = async () => {
+    if (newPassword.value !== confirmPassword.value) {
+        message.error(t("passwordMismatch"));
+        return;
+    }
+    try {
+        await api.fetch(`/api/address_change_password`, {
+            method: 'POST',
+            body: JSON.stringify({
+                new_password: await hashPassword(newPassword.value)
+            })
+        });
+        message.success(t("passwordChanged"));
+        newPassword.value = '';
+        confirmPassword.value = '';
+        showChangePassword.value = false;
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+};
 </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?.enableAddressPassword" @click="showChangePassword = true" type="info" secondary block strong>
+                {{ t('changePassword') }}
+            </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>
-                {{ t('delteAccount') }}
+            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showDeleteAccount = true" type="error" secondary
+                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')">
-            <p>{{ t('delteAccountConfirm') }}</p>
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('deleteAccount')">
+            <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>
+        
+        <n-modal v-model:show="showChangePassword" preset="dialog" :title="t('changePassword')">
+            <n-form :model="{ newPassword, confirmPassword }">
+                <n-form-item :label="t('newPassword')">
+                    <n-input v-model:value="newPassword" type="password" placeholder="" show-password-on="click" />
+                </n-form-item>
+                <n-form-item :label="t('confirmPassword')">
+                    <n-input v-model:value="confirmPassword" type="password" placeholder="" show-password-on="click" />
+                </n-form-item>
+            </n-form>
+            <template #action>
+                <n-button :loading="loading" @click="changePassword" size="small" tertiary type="info">
+                    {{ t('changePassword') }}
                </n-button>
            </template>
        </n-modal>
--- a/frontend/src/views/index/AddressBar.vue
+++ b/frontend/src/views/index/AddressBar.vue
@@ -19,7 +19,7 @@ const router = useRouter()

 const {
    jwt, settings, showAddressCredential, userJwt,
-    isTelegram, openSettings
+    isTelegram, openSettings, addressPassword
 } = useGlobalState()

 const { locale, t } = useI18n({
@@ -32,7 +32,9 @@ 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.',
+            addressPassword: 'Address Password',
            userLogin: 'User Login',
        },
        zh: {
@@ -43,7 +45,9 @@ const { locale, t } = useI18n({
            copied: '已复制',
            fetchAddressError: '邮箱地址凭证无效或邮箱地址不存在，也可能是网络连接异常，请稍后再尝试。',
            addressCredential: '邮箱地址凭证',
+            linkWithAddressCredential: '打开即可自动登录邮箱的链接',
            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
+            addressPassword: '地址密码',
            userLogin: '用户登录',
        }
    }
@@ -73,6 +77,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 +148,22 @@ onMounted(async () => {
            <span>
                <p>{{ t("addressCredentialTip") }}</p>
            </span>
-            <n-card :bordered="false" embedded>
+            <n-card embedded>
                <b>{{ jwt }}</b>
            </n-card>
+            <n-card embedded v-if="addressPassword">
+                <p><b>{{ settings.address }}</b></p>
+                <p>{{ t('addressPassword') }}: <b>{{ addressPassword }}</b></p>
+            </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>
--- a/frontend/src/views/index/Attachment.vue
+++ b/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')
+                    }
                )
            ])
        }
--- a/frontend/src/views/index/LocalAddress.vue
+++ b/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>
--- a/frontend/src/views/index/SimpleIndex.vue
+++ b/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>
--- a/frontend/src/views/user/AddressManagement.vue
+++ b/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,20 +214,29 @@ onMounted(async () => {
 </script>

 <template>
-    <n-modal v-model:show="showTranferAddress" preset="dialog" :title="t('transferAddress')">
-        <span>
-            <p>{{ t("transferAddressTip") }}</p>
-            <p>{{ t('transferAddress') + ": " + currentAddress }}</p>
-            <n-input v-model:value="targetUserEmail" :placeholder="t('targetUserEmail')" />
-        </span>
-        <template #action>
-            <n-button :loading="loading" @click="transferAddress" size="small" tertiary type="error">
-                {{ t('transferAddress') }}
-            </n-button>
-        </template>
-    </n-modal>
-    <div style="overflow: auto;">
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+    <div>
+        <n-modal v-model:show="showTranferAddress" preset="dialog" :title="t('transferAddress')">
+            <span>
+                <p>{{ t("transferAddressTip") }}</p>
+                <p>{{ t('transferAddress') + ": " + currentAddress }}</p>
+                <n-input v-model:value="targetUserEmail" :placeholder="t('targetUserEmail')" />
+            </span>
+            <template #action>
+                <n-button :loading="loading" @click="transferAddress" size="small" tertiary type="error">
+                    {{ t('transferAddress') }}
+                </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>

--- a/frontend/src/views/user/UserMailBox.vue
+++ b/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>
--- a/frontend/src/views/user/UserSettings.vue
+++ b/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>
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -24,6 +24,7 @@ export default defineConfig({
        {
          'naive-ui': [
            'useMessage',
+            'useNotification',
            'NButton',
            'NPopconfirm',
            'NIcon',
--- a/pages/functions/_middleware.js
+++ b/pages/functions/_middleware.js
@@ -3,7 +3,8 @@ const API_PATHS = [
    "/open_api/",
    "/user_api/",
    "/admin/",
-    "/telegram/"
+    "/telegram/",
+    "/external/",
 ];

 export async function onRequest(context) {
--- a/pages/package.json
+++ b/pages/package.json
@@ -1,6 +1,6 @@
 {
  "name": "temp-email-pages",
-  "version": "0.8.5",
+  "version": "1.0.6",
  "description": "",
  "main": "index.js",
  "scripts": {
@@ -11,6 +11,7 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
-    "wrangler": "^3.101.0"
-  }
+    "wrangler": "^4.42.2"
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }
--- a/scripts/update-dependencies.sh
+++ b/scripts/update-dependencies.sh
@@ -0,0 +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 --latest
+pnpm add -D wrangler@latest
+cd ..
--- a/smtp_proxy_server/imap_server.py
+++ b/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,65 +134,99 @@ 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)
-        if self.name == "SENT":
-            return self.fetchSENT(messages)
-        return []
+            endpoint = "/api/mails"
+        elif self.name == "SENT":
+            endpoint = "/api/sendbox"
+        else:
+            return

-    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}",
+        # 首先获取服务端邮件总数
+        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 res.status_code != 200:
+        if count_res.status_code != 200:
            _logger.error(
-                "Failed: "
-                f"code=[{res.status_code}] text=[{res.text}]"
+                f"Failed to get {self.name} email count: "
+                f"code=[{count_res.status_code}] text=[{count_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, parse_email(item["raw"])))
-            for uid, item in enumerate(reversed(res.json()["results"]))
-        ]
+            return

-    def fetchSENT(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/sendbox?limit={limit}&offset={start - 1}",
-            headers={
-                "Authorization": f"Bearer {self.password}",
-                "x-custom-auth": f"{settings.basic_password}",
-                "Content-Type": "application/json"
-            }
-        )
-        if res.status_code != 200:
-            _logger.error(
-                "Failed: "
-                f"code=[{res.status_code}] text=[{res.text}]"
+        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}"
            )
-            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"]))
-        ]
+
+            res = httpx.get(
+                f"{settings.proxy_url}{endpoint}?limit={limit}&offset={server_offset}",
+                headers={
+                    "Authorization": f"Bearer {self.password}",
+                    "x-custom-auth": f"{settings.basic_password}",
+                    "Content-Type": "application/json"
+                }
+            )
+            if res.status_code != 200:
+                _logger.error(
+                    f"Failed to fetch {self.name} emails: "
+                    f"code=[{res.status_code}] text=[{res.text}]"
+                )
+                break
+
+            emails = res.json()["results"]
+            for i, item in enumerate(reversed(emails)):
+                uid = total_count - server_offset - len(emails) + i + 1
+                if current_start <= uid <= batch_end:
+                    if self.name == "INBOX":
+                        email_model = parse_email(item["raw"])
+                    elif self.name == "SENT":
+                        email_model = generate_email_model(item)
+
+                    # 立即返回这封邮件
+                    yield (uid, SimpleMessage(uid, email_model))
+
+            current_start = batch_end + 1

    def getUID(self, message):
        return message.uid
--- a/smtp_proxy_server/parse_email.py
+++ b/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(
-            "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['From'] = f'{email_json["from_name"]} <{item["address"]}>' if email_json.get("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.attach(MIMEText(
            email_json["content"],
            "html" if email_json.get("is_html") else "plain"
        ))
    else:
-        message['From'] = f"{email_json["from"]['name']} <{
-            email_json["from"]['email']}>"
+        message['From'] = f'{email_json["from"]["name"]} <{email_json["from"]["email"]}>'
        message['To'] = ", ".join(
            [f"{to['name']} <{to['email']}>" for to in email_json["personalizations"][0]["to"]])
        message.attach(MIMEText(
--- a/smtp_proxy_server/requirements.txt
+++ b/smtp_proxy_server/requirements.txt
@@ -1,5 +1,5 @@
 aiosmtpd==1.4.6
-pydantic-settings==2.2.1
-requests==2.32.0
-twisted==24.7.0
-httpx==0.27.0
+pydantic-settings==2.9.1
+requests==2.32.4
+Twisted==25.5.0
+httpx==0.28.1
--- a/vitepress-docs/docs/.vitepress/config.ts
+++ b/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: [
--- a/vitepress-docs/docs/.vitepress/en.ts
+++ b/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: {
--- a/vitepress-docs/docs/.vitepress/zh.ts
+++ b/vitepress-docs/docs/.vitepress/zh.ts
@@ -28,6 +28,7 @@ export const zh = defineConfig({
        },

        outline: {
+            level: 'deep',
            label: '页面导航'
        },

@@ -119,9 +120,22 @@ 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' },
+                { text: '配置发送邮件', link: 'config-send-mail' },
+                { text: '自动更新配置', link: 'actions/auto-update' },
+            ]
+        },
+        {
+            text: '通用',
            collapsed: false,
            items: [
-                { text: '通过 Github Actions 部署', link: 'github-action' },
+                { text: 'worker变量说明', link: 'worker-vars' },
+                { text: '常见问题', link: 'common-issues' },
            ]
        },
        {
@@ -139,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' },
            ]
        },
        {
--- a/vitepress-docs/docs/en/cli.md
+++ b/vitepress-docs/docs/en/cli.md
@@ -74,16 +74,19 @@ 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]
 # ADDRESS_REGEX = "[^a-z0-9]"
-# MIN_ADDRESS_LEN = 1
-# MAX_ADDRESS_LEN = 30
 # If you want your site to be private, uncomment below and change your password
 # PASSWORDS = ["123", "456"]
 # admin console password, if not configured, access to the console is not allowed
@@ -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 = ""
--- a/vitepress-docs/docs/index.md
+++ b/vitepress-docs/docs/index.md
@@ -15,14 +15,17 @@ hero:
    - theme: alt
      text: 通过用户界面部署
      link: /zh/guide/quick-start
+    - theme: alt
+      text: 通过 Github Actions 部署
+      link: /zh/guide/quick-start

 features:
-  - title: 免费托管在 CloudFlare，无需服务器
-    details: Cloudflare D1 数据库，Cloudflare Pages 前端，Cloudflare Workers 后端， Cloudflare Email Routing
-  - title: 仅需域名即可私有部署
-    details: 支持 password 登录邮箱，使用访问密码可作为私人站点，支持附件功能
+  - title: 仅需域名即可私有部署, 免费托管在 CloudFlare，无需服务器
+    details: 支持 password 登录邮箱, 用户注册，使用访问密码可作为私人站点，支持附件功能。
  - title:  使用 rust wasm 解析邮件
    details: 使用 rust wasm 解析邮件，支持邮件各种RFC标准，支持附件, 速度极快
+  - title:  支持 Telegram Bot 和 Webhook
+    details: 邮件可转发到 Telegram 或者 webhook, Telegram Bot 支持绑定邮箱，查看邮件, Telegram 小程序
  - title: 支持发送邮件(UI/API/SMTP)
    details: 支持通过域名邮箱发送 txt 或者 html 邮件，支持 DKIM 签名, UI/API/SMTP 发送邮件
 ---
--- a/vitepress-docs/docs/public/feature/another-worker-enhanced-01.png
+++ b/vitepress-docs/docs/public/feature/another-worker-enhanced-01.png
--- a/vitepress-docs/docs/public/feature/another-worker-enhanced-02.png
+++ b/vitepress-docs/docs/public/feature/another-worker-enhanced-02.png
--- a/vitepress-docs/docs/public/feature/another-worker-enhanced-03.png
+++ b/vitepress-docs/docs/public/feature/another-worker-enhanced-03.png
--- a/vitepress-docs/docs/public/feature/another-worker-enhanced-04.png
+++ b/vitepress-docs/docs/public/feature/another-worker-enhanced-04.png
--- a/vitepress-docs/docs/public/feature/oauth2-login.png
+++ b/vitepress-docs/docs/public/feature/oauth2-login.png
--- a/vitepress-docs/docs/public/readme_assets/d1.png
+++ b/vitepress-docs/docs/public/readme_assets/d1.png
--- a/vitepress-docs/docs/public/readme_assets/demo.png
+++ b/vitepress-docs/docs/public/readme_assets/demo.png
--- a/vitepress-docs/docs/public/readme_assets/email.png
+++ b/vitepress-docs/docs/public/readme_assets/email.png
--- a/vitepress-docs/docs/public/readme_assets/worker.png
+++ b/vitepress-docs/docs/public/readme_assets/worker.png
--- a/vitepress-docs/docs/public/ui_install/d1-exec.png
+++ b/vitepress-docs/docs/public/ui_install/d1-exec.png
--- a/vitepress-docs/docs/public/ui_install/d1.png
+++ b/vitepress-docs/docs/public/ui_install/d1.png
--- a/vitepress-docs/docs/public/ui_install/pages-1.png
+++ b/vitepress-docs/docs/public/ui_install/pages-1.png
--- a/vitepress-docs/docs/public/ui_install/pages.png
+++ b/vitepress-docs/docs/public/ui_install/pages.png
--- a/vitepress-docs/docs/public/ui_install/worker-1.png
+++ b/vitepress-docs/docs/public/ui_install/worker-1.png
--- a/vitepress-docs/docs/public/ui_install/worker-2.png
+++ b/vitepress-docs/docs/public/ui_install/worker-2.png
--- a/vitepress-docs/docs/public/ui_install/worker-3.png
+++ b/vitepress-docs/docs/public/ui_install/worker-3.png
--- a/vitepress-docs/docs/public/ui_install/worker-bindings.png
+++ b/vitepress-docs/docs/public/ui_install/worker-bindings.png
--- a/vitepress-docs/docs/public/ui_install/worker-d1-1.png
+++ b/vitepress-docs/docs/public/ui_install/worker-d1-1.png
--- a/vitepress-docs/docs/public/ui_install/worker-d1-2.png
+++ b/vitepress-docs/docs/public/ui_install/worker-d1-2.png
--- a/vitepress-docs/docs/public/ui_install/worker-d1.png
+++ b/vitepress-docs/docs/public/ui_install/worker-d1.png
--- a/vitepress-docs/docs/public/ui_install/worker-kv-0.png
+++ b/vitepress-docs/docs/public/ui_install/worker-kv-0.png
--- a/vitepress-docs/docs/public/ui_install/worker-kv-1.png
+++ b/vitepress-docs/docs/public/ui_install/worker-kv-1.png
--- a/vitepress-docs/docs/public/ui_install/worker-kv-2.png
+++ b/vitepress-docs/docs/public/ui_install/worker-kv-2.png
--- a/vitepress-docs/docs/public/ui_install/worker-kv-bind.png
+++ b/vitepress-docs/docs/public/ui_install/worker-kv-bind.png
--- a/vitepress-docs/docs/public/ui_install/worker-kv.png
+++ b/vitepress-docs/docs/public/ui_install/worker-kv.png
--- a/vitepress-docs/docs/public/ui_install/worker-runtime.png
+++ b/vitepress-docs/docs/public/ui_install/worker-runtime.png
--- a/vitepress-docs/docs/public/ui_install/worker-var.png
+++ b/vitepress-docs/docs/public/ui_install/worker-var.png
--- a/vitepress-docs/docs/public/ui_install/worker_home.png
+++ b/vitepress-docs/docs/public/ui_install/worker_home.png
--- a/vitepress-docs/docs/zh/guide/actions/auto-update.md
+++ b/vitepress-docs/docs/zh/guide/actions/auto-update.md
@@ -0,0 +1,10 @@
+# Github Actions 部署如何配置自动更新
+
+::: warning 注意
+有问题请通过 `Github Issues` 反馈，感谢。
+自动更新不会执行 D1 数据库的 sql 文件，当数据库 schema 变动时，需要手动执行。
+:::
+
+1. 打开仓库的 `Actions` 页面，找到 `Upstream Sync`，点击 `enable workflow` 启用 `workflow`
+2. 如果 `Upstream Sync` 运行失败，到仓库主页点击 `Sync` 手动同步即可
+3. 修改 `Upstream Sync` 的 `schedule` 配置可自定义更新间隔，参考 [cron 表达式](https://crontab.guru/)
--- a/vitepress-docs/docs/zh/guide/actions/d1.md
+++ b/vitepress-docs/docs/zh/guide/actions/d1.md
@@ -0,0 +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)
--- a/vitepress-docs/docs/zh/guide/actions/github-action.md
+++ b/vitepress-docs/docs/zh/guide/actions/github-action.md
@@ -0,0 +1,60 @@
+# 通过 Github Actions 部署
+
+::: warning 注意
+目前只支持 worker 和 pages 的部署。
+有问题请通过 `Github Issues` 反馈，感谢。
+
+`worker.dev` 域名在中国无法访问，请自定义域名
+:::
+
+## 部署步骤
+
+### Fork 仓库并启用 Actions
+
+- 在 GitHub fork 本仓库
+- 打开仓库的 `Actions` 页面
+- 找到 `Deploy Backend` 点击 `enable workflow` 启用 `workflow`
+- 如果需要前后端分离部署, 找到`Deploy Frontend` 点击 `enable workflow` 启用 `workflow`
+
+### 配置 Secrets
+
+然后在仓库页面 `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) |
+   | `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` 选择分支手动部署
+
+## 如何配置自动更新
+
+1. 打开仓库的 `Actions` 页面，找到 `Upstream Sync`，点击 `enable workflow` 启用 `workflow`
+2. 如果 `Upstream Sync` 运行失败，到仓库主页点击 `Sync` 手动同步即可
--- a/vitepress-docs/docs/zh/guide/actions/pre-requisite.md
+++ b/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)
--- a/vitepress-docs/docs/zh/guide/cli/pages.md
+++ b/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
 ```

--- a/vitepress-docs/docs/zh/guide/cli/worker.md
+++ b/vitepress-docs/docs/zh/guide/cli/worker.md
@@ -1,4 +1,7 @@
-# Cloudflare workers 后端
+# Cloudflare Worker 后端
+
+> [!warning] 注意
+> `worker.dev` 域名在中国无法访问，请自定义域名

 ## 初始化项目

@@ -22,6 +25,9 @@ wrangler kv:namespace create DEV

 ## 修改 `wrangler.toml` 配置文件

+> [!NOTE] 注意
+> 更多变量的配置请查看 [worker变量说明](/zh/guide/worker-vars)
+
 ```toml
 name = "cloudflare_temp_email"
 main = "src/worker.ts"
@@ -33,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 * * *" ]
@@ -43,94 +55,20 @@ compatibility_flags = [ "nodejs_compat" ]
 # ]

 [vars]
-# TITLE = "Custom Title" # 自定义网站标题
-PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
-# (min, max) adderss的长度，如果不设置，默认为(1, 30)
-# ANNOUNCEMENT = "Custom Announcement" # 自定义公告
-# address name 的正则表达式, 只用于检查，符合条件将通过检查
-# ADDRESS_CHECK_REGEX = "^(?!.*admin).*"
-# address name 替换非法符号的正则表达式, 不在其中的符号将被替换，如果不设置，默认为 [^a-z0-9], 需谨慎使用, 有些符号可能导致无法收件
-# ADDRESS_REGEX = "[^a-z0-9]"
-# MIN_ADDRESS_LEN = 1
-# MAX_ADDRESS_LEN = 30
-# 如果你想要你的网站私有，取消下面的注释，并修改密码
-# PASSWORDS = ["123", "456"]
+# 邮箱名称前缀，不需要后缀可配置为空字符串或者不配置
+PREFIX = "tmp"
+# 用于临时邮箱的所有域名, 支持多个域名
+DOMAINS = ["xxx.xxx1" , "xxx.xxx2"]
+# 用于生成 jwt 的密钥, jwt 用于给用户登录以及鉴权
+JWT_SECRET = "xxx"
+
 # admin 控制台密码, 不配置则不允许访问控制台
 # ADMIN_PASSWORDS = ["123", "456"]
-# 警告: 管理员控制台没有密码或用户检查
-# DISABLE_ADMIN_PASSWORD_CHECK = false
-# admin 联系方式，不配置则不显示，可配置任意字符串
-# ADMIN_CONTACT = "xx@xx.xxx"
-# DEFAULT_DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 默认用户可用的域名(未登录或未分配角色的用户)
-DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 你的域名, 支持多个域名
-# 对于中文域名，可以使用 DOMAIN_LABELS 显示域名的中文展示名称
-# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
-# 新用户默认角色, 仅在启用邮件验证时有效
-# USER_DEFAULT_ROLE = "vip"
-# admin 角色配置, 如果用户角色等于 ADMIN_USER_ROLE 则可以访问 admin 控制台
-# ADMIN_USER_ROLE = "admin" # the role which can access admin panel
-# 用户角色配置, 如果 domains 为空将使用 default_domains
-# 如果 prefix 为 null 将使用默认前缀, 如果 prefix 为空字符串将不使用前缀
-# USER_ROLES = [
-#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "vip", prefix = "vip" },
-#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "admin", prefix = "" },
-# ]
-JWT_SECRET = "xxx" # 用于生成 jwt 的密钥, jwt 用于给用户登录以及鉴权
-BLACK_LIST = "" # 黑名单，用于过滤发件人，逗号分隔
+
 # 是否允许用户创建邮件, 不配置则不允许
 ENABLE_USER_CREATE_EMAIL = true
-# 禁用匿名用户创建邮箱，如果设置为 true，则用户只能在登录后创建邮箱地址
-# DISABLE_ANONYMOUS_USER_CREATE_EMAIL = true
 # 允许用户删除邮件, 不配置则不允许
 ENABLE_USER_DELETE_EMAIL = true
-# 允许自动回复邮件
-ENABLE_AUTO_REPLY = false
-# 是否启用 webhook
-# ENABLE_WEBHOOK = true
-# 前端界面页脚文本
-# COPYRIGHT = "Dream Hunter"
-# DISABLE_SHOW_GITHUB = true # 是否显示 GitHub 链接
-# 默认发送邮件余额，如果不设置，将为 0
-# DEFAULT_SEND_BALANCE = 1
-# NO_LIMIT_SEND_ROLE = "vip" # 可以无限发送邮件的角色
-# Turnstile 人机验证配置
-# CF_TURNSTILE_SITE_KEY = ""
-# CF_TURNSTILE_SECRET_KEY = ""
-# telegram bot 最多绑定邮箱数量
-# TG_MAX_ADDRESS = 5
-# telegram BOT_INFO，预定义的 BOT_INFO 可以降低 webhook 的延迟
-# TG_BOT_INFO = "{}"
-# 全局转发地址列表，如果不配置则不启用，启用后所有邮件都会转发到列表中的地址
-# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]
-# 前端地址，用于发送 webhook 的邮件 url
-# FRONTEND_URL = "https://xxxx.xxx"
-# 是否启用垃圾邮件检查，默认任何一项存在配置且不通过则被判定为垃圾邮件
-# ENABLE_CHECK_JUNK_MAIL = false
-# 垃圾邮件检查配置, 任何一项 存在 且 不通过 则被判定为垃圾邮件
-# JUNK_MAIL_CHECK_LIST = = ["spf", "dkim", "dmarc"]
-# 垃圾邮件检查配置, 任何一项 不存在 或者 不通过 则被判定为垃圾邮件
-# JUNK_MAIL_FORCE_PASS_LIST = ["spf", "dkim", "dmarc"]
-# 如果附件大小超过 2MB，则删除附件，邮件可能由于解析而丢失一些信息
-# REMOVE_EXCEED_SIZE_ATTACHMENT = true
-# 移除所有附件，邮件可能由于解析而丢失一些信息
-# REMOVE_ALL_ATTACHMENT = true
-# 是否开启其他 worker 处理邮件
-# ENABLE_ANOTHER_WORKER = false
-# 其他 worker 处理邮件的配置，可以配置多个其他 worker。
-# 通过关键词筛选，调用对应绑定的 worker 的方法（默认方法名为 rpcEmail）
-# keywords必填，否则 worker 将不会被触发
-#ANOTHER_WORKER_LIST ="""
-#[
-#    {
-#        "binding":"AUTH_INBOX",
-#        "method":"rpcEmail",
-#        "keywords":[
-#            "验证码","激活码","激活链接","确认链接","验证邮箱","确认邮件","账号激活","邮件验证","账户确认","安全码","认证码","安全验证","登陆码","确认码","启用账户","激活账户","账号验证","注册确认",
-#            "account","activation","verify","verification","activate","confirmation","email","code","validate","registration","login","code","expire","confirm"
-#        ]
-#    }
-#]
-#"""

 # D1 数据库的名称和 ID 可以在 cloudflare 控制台查看
 [[d1_databases]]
@@ -157,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]
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dream Hunter	b5c229b6c4	feat: v1.0.6 (#743 )	2025-10-12 18:24:36 +08:00
Dream Hunter	2728e9667b	fix: 针对角色配置不同的绑定地址数量上限 (#742 )	2025-10-12 18:21:22 +08:00
Dream Hunter	6109ab9e82	feat: add role-based address limit configuration (#741 ) - Add RoleAddressConfig component in admin panel - Implement role_address_config API endpoints (GET/POST) - Add getMaxAddressCount function with validation chain - Priority: role config > global settings - Support editable table with clearable input - Add extensible RoleConfig type for future fields - Use context for current user, query DB for target user - Optimize state management (remove redundant roleConfigsMap) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>	2025-10-12 18:12:36 +08:00
Dream Hunter	09a6cac8fe	feat: upgrade dependencies (#740 )	2025-10-12 13:47:40 +08:00
Dream Hunter	5f752c94f9	feat: add cleanup for unbound addresses feature (#739 ) - Add unboundAddress cleanup type to backend cleanup logic - Update CleanupSettings model with unbound address fields - Add scheduled task for automatic unbound address cleanup - Add UI controls in admin Maintenance panel for manual cleanup - Add i18n support (en/zh) for unbound address cleanup labels - Clean addresses not bound to any user created before n days 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>	2025-10-12 13:46:13 +08:00
Dream Hunter	a2f3634c7e	feat: add multi-select batch operations for admin account management (#737 ) - Add multi-select functionality with native Naive UI selection column - Implement batch operations: delete, clear inbox, clear sent items - Create reusable executeBatchOperation function to eliminate code duplication - Add error recovery mechanism: failed items remain selected for retry - Add progress modal with real-time percentage display - Support smart skip logic: skip addresses with no mails/sent items - Add i18n support for English and Chinese - Update CHANGELOG.md with new features 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>	2025-10-04 20:04:26 +08:00
Dream Hunter	b62a3cbc3e	fix: require explicit 'true' value for debug mode in deployment (#735 ) - Update GitHub Actions workflow to only enable debug mode when DEBUG_MODE secret is exactly 'true' - Previously debug mode was enabled for any non-empty value, which could lead to accidental activation - Change from `[ -n "$debug_mode" ]` to `[ "$debug_mode" = "true" ]` for precise control 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>	2025-09-26 19:14:46 +08:00
Dream Hunter	8edb75587e	fix: code bugs (#734 )	2025-09-26 19:05:08 +08:00
Dream Hunter	de48661d0d	fix: code bugs (#733 )	2025-09-26 19:02:57 +08:00
Dream Hunter	a905ba5f06	feat: implement address password authentication feature (#731 ) * feat: implement address password authentication feature - Add password field to address table for storing hashed passwords - Implement address authentication APIs (login, change password) - Add automatic password generation for new addresses - Support password login alongside credential login in frontend - Add password management in account settings and admin panel - Add ENABLE_ADDRESS_PASSWORD environment variable for feature control - Update documentation and i18n support - Enhance security with SHA-256 password hashing 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * feat: upgrade dependencies --------- Co-authored-by: Claude <noreply@anthropic.com>	2025-09-26 14:52:05 +08:00
Dream Hunter	6ae90be3bf	feat: support github action deploy telegram mini app frontend (#730 )	2025-09-22 21:25:15 +08:00
Dream Hunter	5e24817de6	feat: upgrade version (#726 )	2025-09-15 10:43:53 +08:00
Dream Hunter	732189482e	feat: db schema index update (#725 ) * feat: db schema index update * feat: upgrade dependencies	2025-09-15 10:41:14 +08:00
Dream Hunter	2bbde15f53	feat: add clear inbox and sent items functionality (#720 ) - Add clear inbox/sent items APIs for users and admins - Implement ENABLE_USER_DELETE_EMAIL permission checks - Fix multilingual support for success messages - Update Vue to 3.5.21 and Wrangler to 4.34.0 - Add UI components for clearing email data in account settings 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>	2025-09-05 20:43:28 +08:00
Dream Hunter	37cf0776b5	feat: enhance webhook security with configurable allow list (#719 ) - Add enableAllowList flag to webhook settings for flexible access control - Update frontend UI with toggle switch and improved user experience - Maintain backward compatibility with default allow-all behavior - Add input validation hints and better form controls across admin panels 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Claude <noreply@anthropic.com>	2025-09-05 17:24:30 +08:00
Dream Hunter	3fbace871c	feat: add var DISABLE_CUSTOM_ADDRESS_NAME and CREATE_ADDRESS_DEFAULT_… (#717 ) * feat: add var DISABLE_CUSTOM_ADDRESS_NAME and CREATE_ADDRESS_DEFAULT_DOMAIN_FIRST * fix: enhance input validation with trim() for address creation - Add trim() handling in newAddress() function to prevent whitespace issues - Add trim() handling for address prefixes to ensure consistent formatting - Add trim() handling in Telegram API address parsing for robustness - Prevents edge cases with whitespace-only or padded input strings 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>	2025-09-04 21:04:42 +08:00
Dream Hunter	648e9f7adf	feat: add simplemode button at index (#714 )	2025-08-27 20:22:52 +08:00
Dream Hunter	ab2bfdd00f	feat: 邮件页面增加上一封/下一封按钮 (#712 )	2025-08-24 19:14:50 +08:00
Dream Hunter	0565978930	feat: 账号设置页面增加邮件转发规则和禁止接收未知地址邮件配置 (#710 )	2025-08-23 16:19:53 +08:00
Dream Hunter	89d8944e60	Docs: update UI install docs (#709 )	2025-08-23 01:14:41 +08:00
Dream Hunter	4084771621	feat: \|UI\| Optimized minimalist mode homepage, added all email page f… (#708 ) feat: \|UI\| Optimized minimalist mode homepage, added all email page functions (delete/download/attachments/...)	2025-08-23 00:23:47 +08:00
Dream Hunter	840496c48f	feat: telegram check addrss exists (#705 )	2025-08-08 13:26:45 +08:00
Dream Hunter	9843b35f54	feat: telegram use the random domain when not set (#704 )	2025-08-08 13:07:00 +08:00
Dream Hunter	bfd66f5019	fix: worker node compat (#699 )	2025-07-28 13:18:47 +08:00
Dream Hunter	0bc31360b0	feat: upgrade dependencies (#698 )	2025-07-28 12:58:47 +08:00
Dream Hunter	267d9bb93e	fix: oauth2 callback failed (#691 )	2025-07-20 17:09:23 +08:00
Dream Hunter	2cc84d565c	feat: upgrade dependencies (#690 )	2025-07-19 13:26:10 +08:00
Dream Hunter	c96d180591	feat(oauth2): add default role assignment for new OAuth2 users (#688 ) - Add default role assignment logic in OAuth2 login flow - Import getStringValue and getUserRoles utilities - Validate default role exists in system before assignment - Use ON CONFLICT DO NOTHING to preserve existing user roles - Add proper error handling for role assignment failures	2025-07-14 23:55:36 +08:00
Dream Hunter	1303b0f2a9	feat: \|UI\| add simple index (#684 )	2025-06-28 15:52:19 +08:00
Dream Hunter	9f535a0a90	feature: update dependencies (#682 )	2025-06-24 18:27:45 +08:00
Dream Hunter	70109785c6	feature: update readme (#680 )	2025-06-22 20:41:21 +08:00
Dream Hunter	7fd10f2775	feature: update readme (#679 )	2025-06-22 20:38:49 +08:00
Dream Hunter	f59b8c7a1b	feature: update readme (#678 )	2025-06-22 20:21:04 +08:00
Dream Hunter	312ac13185	feature: update readme (#677 )	2025-06-22 20:08:07 +08:00
Dream Hunter	e6c582be9f	feature: update address updated_at in multi api (#676 )	2025-06-21 01:48:35 +08:00
Dream Hunter	483c429feb	feature: update address updated_at in multi api (#675 )	2025-06-21 01:41:28 +08:00
Dream Hunter	da5482e095	feature: update dependencies (#674 )	2025-06-21 01:06:37 +08:00
Dream Hunter	de4646876a	fix: imap cannot update message (#673 )	2025-06-21 01:00:46 +08:00
Dream Hunter	bbc8a96811	fix: imap cannot update message (#672 )	2025-06-21 00:57:44 +08:00
Dream Hunter	9ac9cd46b0	feat: cleanup support address and inactive address (#671 )	2025-06-18 17:31:15 +08:00
Dream Hunter	c694b07380	fix: cron job not run when clean days is 0 (#670 )	2025-06-18 13:15:32 +08:00
Dream Hunter	672c4c7273	fix: \|UI\| user mail page query word bug (#665 )	2025-06-09 19:26:18 +08:00
Dream Hunter	ee023ac2e9	feat: update changelog (#664 )	2025-06-09 19:09:28 +08:00
Dream Hunter	cc77bdf36d	feat: add ALWAYS_SHOW_ANNOUNCEMENT option (#663 )	2025-06-09 19:06:49 +08:00
Dream Hunter	dec309a0fd	fix: github actions node version (#660 )	2025-06-02 11:28:41 +08:00
Dream Hunter	9488543e44	fix: ui admin portal show after fetch user data (#659 )	2025-05-20 17:55:33 +08:00
Dream Hunter	50326bcc98	feature: support init db in admin portal (#658 )	2025-05-20 17:45:55 +08:00
Dream Hunter	272b624b9b	feature: utils import (#652 )	2025-05-07 00:54:47 +08:00
Dream Hunter	e230801a1c	feature: update dependencies (#651 )	2025-05-07 00:13:26 +08:00
Zyx-A	07833d5ca9	feature: 基于子域名转发到不同的邮箱中去 (#645 ) (#647 )	2025-04-30 10:41:09 +08:00
Dream Hunter	101a561894	feature: auto refresh user token when token exp in 7 days (#644 )	2025-04-26 21:22:26 +08:00
Dream Hunter	327962432a	fix: some oauth2 need redirect_uri when get token (#643 )	2025-04-26 20:56:47 +08:00
Dream Hunter	6051d49315	feature: version 0.10.0 (#640 )	2025-04-24 02:04:40 +08:00
Dream Hunter	95f361743b	feature: add /user_api/mails with filter params address and keyword (#639 )	2025-04-24 02:01:21 +08:00
Dream Hunter	c6afc5d425	feat: support admin api bind address to user (#635 )	2025-04-16 13:36:41 +08:00
Dream Hunter	466f53254b	feat: docs: update worker doc (#633 )	2025-04-16 00:07:12 +08:00
Dream Hunter	ce0a10e6de	feat: \|Admin Portal\| optimized UI (#632 )	2025-04-12 20:24:11 +08:00
Dream Hunter	26995982af	feat: oatuh2 email key support jsonpath (#631 )	2025-04-12 19:57:03 +08:00
Dream Hunter	0894ac0dc9	feat: support admin api bind address to user (#630 )	2025-04-12 19:49:59 +08:00
Dream Hunter	47e2cb56b4	feat: support deploy worker with UI assets (#627 )	2025-04-12 15:37:34 +08:00
Dream Hunter	32767176f0	feat: s3 attachment add delete (#625 )	2025-04-07 20:17:56 +08:00
Dream Hunter	31eb6c23d1	feat: admin portal user page add user address manangement (#623 )	2025-04-07 19:47:44 +08:00
Dream Hunter	91a859bbcf	feat: support cleanDays max 1000 (#622 )	2025-04-07 19:24:21 +08:00
Dream Hunter	525f5e2dce	feat: support auto login with url query parameter (#606 )	2025-03-16 14:20:24 +08:00
Dream Hunter	908fc0cc86	feat: \|Doc\| use shadow DOM render mail html (#604 )	2025-03-08 10:53:45 +08:00
Dream Hunter	97d24b2087	feat: \|Doc\| add Google ads doc (#598 )	2025-02-27 00:58:56 +08:00
Dream Hunter	983300acf4	feat: \|UI\| add loading for lazy load component (#597 )	2025-02-27 00:36:13 +08:00
Dream Hunter	144a792cb2	feat: \|UI\| change SideMargin size base on gridMaxCols (#596 )	2025-02-27 00:14:04 +08:00
Dream Hunter	278f0112d0	feat: \|UI\| change SideMargin size (#595 )	2025-02-27 00:08:06 +08:00
Dream Hunter	764faebf9f	feat: update dependencies && version to 0.9.1 (#594 )	2025-02-26 23:58:37 +08:00
Dream Hunter	d4f0c82e42	feat: update dependencies && version to 0.9.1 (#593 )	2025-02-26 23:36:08 +08:00
Dream Hunter	cf680e6349	feat: \|UI\| support google ads (#592 )	2025-02-26 23:01:57 +08:00
Dream Hunter	c3987d364c	feat: \|Actions\| Tag build add worker-with-wasm-mail-parser.zip (#590 )	2025-02-22 18:51:44 +08:00
Dream Hunter	3a542a8391	feat: \|Worker\| NO_LIMIT_SEND_ROLE support multi role splited by ',' (#588 )	2025-02-22 16:58:48 +08:00
Dream Hunter	241e0b7b28	feat: \|Worker\| multi language add messages (#587 )	2025-02-20 01:41:34 +08:00
Dream Hunter	b43353ea47	feat: \|Worker\| multi language add messages (#586 )	2025-02-20 01:05:02 +08:00
Dream Hunter	6c334d32f6	feat: \|Worker\| add var DEFAULT_LANG, zh/en (#585 )	2025-02-20 00:42:48 +08:00
Dream Hunter	7889d2edea	feat: \|Worker\| support multi language (#584 )	2025-02-20 00:37:39 +08:00
Dream Hunter	2426e0b51a	feat: update dependencies (#581 )	2025-02-15 18:54:15 +08:00
Dream Hunter	61434ab6f7	feat: \|Worker\| support send mail by SMTP (#580 )	2025-02-15 18:17:14 +08:00
Dream Hunter	7f6a02ca38	fix: \|UI\| date parse error at mobile devices (#575 )	2025-01-30 22:42:27 +08:00
Dream Hunter	6ae3b0d85e	feat: update docs (#574 )	2025-01-24 17:36:59 +08:00
Dream Hunter	01e6cb1075	feat: \|worker\| health_check add JWT_SECRET and DOMAINS (#573 )	2025-01-24 15:00:50 +08:00
Dream Hunter	814f6fada2	feat: \|UI\| admin worker config page add overflow: auto (#572 )	2025-01-22 23:34:49 +08:00
Dream Hunter	31901aacc5	feat: update docs (#571 )	2025-01-22 23:25:40 +08:00
Dream Hunter	fb9b9f6ae4	feat: update CHANGE LOG (#570 )	2025-01-22 23:19:53 +08:00
Dream Hunter	095951ab45	feat: update docs (#569 )	2025-01-22 23:14:38 +08:00
Dream Hunter	37614ce6fa	feat: footer support html (#567 )	2025-01-21 10:24:13 +08:00
Dream Hunter	3f81fbee6d	feat: announcement support html (#566 ) * feat: announcement support html * feat: update dependencies	2025-01-20 13:53:40 +08:00