v0.6.1

feat: worker: newAddress if domain is not set, use the first domain (#358 )
feat: add ANNOUNCEMENT (#357 )
2026-05-11 18:10:01 +08:00 · 2024-07-22 13:09:42 +08:00 · 2024-07-22 13:05:50 +08:00 · 2024-07-22 13:01:38 +08:00 · 2024-07-19 22:40:53 +08:00 · 2024-07-19 22:34:01 +08:00
143 changed files with 11868 additions and 4384 deletions
--- a/.github/workflows/docs_deploy.yml
+++ b/.github/workflows/docs_deploy.yml
@@ -31,6 +31,22 @@ jobs:
          version: 8
          run_install: false

+      - name: check github release done
+        run: |
+          for ((attempt=1; attempt<=10; attempt++)); do
+              if wget -q --spider "https://github.com/dreamhunter2333/cloudflare_temp_email/releases/latest/download/frontend.zip"; then
+                  echo "frontend.zip found."
+                  break
+              else
+                  if [ $attempt -eq 10 ]; then
+                      echo "Exceeded maximum retries. frontend.zip not found."
+                  else
+                      echo "frontend.zip not found. Retrying in 30 seconds..."
+                      sleep 30
+                  fi
+              fi
+          done
+
      - name: Deploy Docs for ${{github.ref_name}}
        run: |
          cd vitepress-docs/
--- a/.github/workflows/frontend_deploy.yaml
+++ b/.github/workflows/frontend_deploy.yaml
@@ -34,11 +34,30 @@ jobs:
          cd frontend/
          echo "${{ secrets.FRONTEND_ENV }}" > .env.prod
          export project_name=${{ secrets.FRONTEND_NAME }}
-          export VITE_VERSION=${{ github.ref_name }}
          pnpm install --no-frozen-lockfile
-          pnpm run deploy --project-name=$project_name
+          export frontend_branch=${{ secrets.FRONTEND_BRANCH }}
+          if [ -n "$frontend_branch" ]; then
+            echo "Deploying branch $frontend_branch"
+            pnpm run deploy:actions --project-name=$project_name
+          else
+            echo "Deploying branch prodcution"
+            pnpm run deploy --project-name=$project_name
+          fi
          echo "Deploying prodcution for ${{ github.ref_name }}"
          echo "Deployed for tag ${{ github.ref_name }}"
+
+          export tg_mini_app_project_name=${{ secrets.TG_FRONTEND_NAME }}
+          if [ -n "$tg_mini_app_project_name" ]; then
+            echo "Deploying telegram mini app $tg_mini_app_project_name"
+            if [ -n "$frontend_branch" ]; then
+              echo "Deploying telegram mini app branch $frontend_branch"
+              pnpm run deploy:actions:telegram --project-name=$tg_mini_app_project_name
+            else
+              echo "Deploying telegram mini app branch prodcution"
+              pnpm run deploy:telegram --project-name=$tg_mini_app_project_name
+            fi
+            echo "Deployed telegram mini app for ${{ github.ref_name }}"
+          fi
        env:
          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
--- a/.github/workflows/frontend_pagefunction_deploy.yaml
+++ b/.github/workflows/frontend_pagefunction_deploy.yaml
@@ -0,0 +1,39 @@
+name: Deploy Frontend with page function
+
+on:
+  workflow_dispatch:
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Install Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+
+      - uses: pnpm/action-setup@v3
+        name: Install pnpm
+        id: pnpm-install
+        with:
+          version: 8
+          run_install: false
+
+      - name: Deploy Frontend for ${{ github.ref_name }}
+        run: |
+          cd frontend/
+          pnpm install --no-frozen-lockfile
+          pnpm build:pages
+          cd ../pages/
+          echo '${{ secrets.PAGE_TOML }}' > wrangler.toml
+          pnpm install --no-frozen-lockfile
+          pnpm run deploy
+          echo "Deploying prodcution for ${{ github.ref_name }}"
+        env:
+          CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,138 @@
 dist/
 test/
 .vscode/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.wrangler
+wrangler.toml
+.dev.vars
+pnpm-lock.yaml
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,12 +1,131 @@
+<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG

-## main branch
+## v0.6.1
+
+- pages github actions && 修复清理邮件天数为 0 不生效 by @tqjason (#355)
+- fix: imap proxy server 不支持 密码 by @dreamhunter2333 (#356)
+- worker 新增 `ANNOUNCEMENT` 配置, 用于配置公告信息 by @dreamhunter2333 (#357)
+- fix: telegram bot 新建地址默认选择第一个域名 by @dreamhunter2333 (#358)
+
+## v0.6.0
+
+### Breaking Changes
+
+DB changes: 增加用户角色表, 需要执行 `db/2024-07-14-patch.sql` 更新 `D1` 数据库
+
+### Changes
+
+worker 配置文件新增 `DEFAULT_DOMAINS`, `USER_ROLES`, `USER_DEFAULT_ROLE`, 具体查看文档 [worker配置](https://temp-mail-docs.awsl.uk/zh/guide/cli/worker.html#%E4%BF%AE%E6%94%B9-wrangler-toml-%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6)
+
+- 移除 `apiV1` 相关代码和相关的数据库表
+- 更新 `admin/statistics` api, 添加用户统计信息
+- 更新地址的规则，只允许小写+数字，对于历史的地址在查询邮件时会进行 `lowercase` 处理
+- 增加用户角色功能，`admin` 可以设置用户角色(目前可配置每个角色域名和前缀)
+- admin 页面搜索优化, 回车自动搜索, 输入内容自动 trim
+
+## v0.5.4
+
+- 点击 logo 5 次进入 admin 页面
+- 修复 401 时无法跳转登录页面(admin 和 网站认证)
+
+## v0.5.3
+
+- 修复 smtp imap proxy sever 的一些 bug
+- 完善用户/admin 删除收件箱/发件箱的功能
+- admin 可以删除 发件权限记录
+- 添加中文邮件别名配置 `DOMAIN_LABELS` [文档](https://temp-mail-docs.awsl.uk/zh/guide/cli/worker.html)
+- 移除 `mail channels` 相关代码
+- github actions 增加 `FRONTEND_BRANCH` 变量用于指定部署的分支 (#324)
+
+## v0.5.1
+
+- 添加 `mail-parser-wasm-worker` 用于 worker 解析邮件, [文档](https://temp-mail-docs.awsl.uk/zh/guide/feature/mail_parser_wasm_worker.html)
+- 添加校验用户邮箱长度配置 `MIN_ADDRESS_LEN` 和 `MAX_ADDRESS_LEN`
+- 修复 `pages function` 未转发 `telegram` api 问题
+
+## v0.5.0
+
+- UI: 增加本地缓存进行地址管理
+- worker: 增加 `FORWARD_ADDRESS_LIST` 全局邮件转发地址(等同于 `catch all`)
+- UI: 多语言使用路由进行切换
+- 添加保存附件到 S3 的功能
+- UI: 增加收取邮件列表 `批量删除` 和 `批量下载`
+
+## v0.4.6
+
+- worker 配置文件添加 `TITLE = "Custom Title"`, 可自定义网站标题
+- 修复 KV 未绑定无法删除地址的问题
+
+## v0.4.5
+
+- UI lazy load 懒加载
+- telegram bot 添加用户全局推送功能(admin 用户)
+- 增加对 cloudflare verified 用户发送邮件
+- 增加使用 `resend` 发送邮件, `resend` 提供 http 和 smtp api, 使用更加方便, 文档: https://temp-mail-docs.awsl.uk/zh/guide/config-send-mail.html
+
+## v0.4.4
+
+- 增加 telegram mini app
+- telegram bot 增加 `ubind`, `delete` 指令
+- 修复 webhook 多行文本的问题
+
+## v0.4.3
+
+### Breaking Changes
+
+配置文件 `main = "src/worker.js"` 改为 `main = "src/worker.ts"`
+
+### Changes
+
+- `telegram bot`  白名单配置
+- `ENABLE_WEBHOOK` 添加 webhook
+- UI: admin 页面使用双层 tab
+- UI: 登录后可直接主页切换地址
+- UI: 发件箱也采用左右分栏显示(类似收件箱)
+- `SMTP IMAP Proxy` 添加发件箱查看
+
+* feat: telegram bot TelegramSettings && webhook by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/244
+* fix build by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/245
+* feat: UI changes by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/247
+* feat: SMTP IMAP Proxy: add sendbox && UI: sendbox use split view by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/248
+
+## v0.4.2
+
+- 修复 smtp imap proxy sever 的一些 bug
+- 修复 UI 界面文字错误, 界面增加版本号
+- 增加  telegram bot 文档 https://temp-mail-docs.awsl.uk/zh/guide/feature/telegram.html
+
+* fix: imap server by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/227
+* fix: Maintenance wrong label by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/229
+* feat: add version for frontend && backend by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/230
+* feat: add page functions proxy to make response faster by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/234
+* feat: add about page by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/235
+* feat: remove mailV1Alert && fix mobile showSideMargin by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/236
+* feat: telegram bot by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/238
+* fix: remove cleanup address due to many table need to be clean by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/240
+* feat: docs: Telegram Bot by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/241
+* fix: smtp_proxy: cannot decode 8bit && tg bot new random address by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/242
+* fix: smtp_proxy: update raise imap4.NoSuchMailbox by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/243
+
+### v0.4.1

 - 用户名限制最长30个字符
 - 修复 `/external/api/send_mail` 未返回的 bug (#222)
 - 添加 `IMAP proxy` 服务，支持 `IMAP` 查看邮件
 - UI 界面增加版本号显示

+* feat: use common function handleListQuery when query by page by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/220
+* fix: typos by @lwd-temp in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/221
+* fix: name max 30 && /external/api/send_mail not return result by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/222
+* fix: smtp_proxy_server support decode from mail charset by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/223
+* feat: add imap proxy server by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/225
+* feat: UI show version by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/226
+
+### New Contributors
+
+* @lwd-temp made their first contribution in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/221
+
 ## v0.4.0

 ### DB Changes/Breaking changes
@@ -146,7 +265,6 @@ set
 - 添加 RATE_LIMITER 限流 发送邮件 和 新建地址
 - 一些 bug 修复

---
 - feat: allow user delete mail && notify when send access changed by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/132
 - feat: requset_send_mail_access default 1 balance by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/143
 - fix: RATE_LIMITER not call jwt by @dreamhunter2333 in https://github.com/dreamhunter2333/cloudflare_temp_email/pull/146
@@ -202,7 +320,7 @@ The `mails` table will be discarded, and the `raw` text of the new `mail` will b
 ```bash
 git checkout v0.2.0
 cd worker
-wrangler d1 execute dev  --file=../db/2024-04-09-patch.sql
+wrangler d1 execute dev  --file=../db/2024-04-09-patch.sql --remote
 pnpm run deploy
 cd ../frontend
 pnpm run deploy
--- a/README.md
+++ b/README.md
@@ -1,17 +1,29 @@
 # 使用 cloudflare 免费服务，搭建临时邮箱

 <p align="center">
-  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/blob/main/LICENSE">
-    <img alt="MIT License" src="https://img.shields.io/github/license/dreamhunter2333/cloudflare_temp_email">
+  <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>
-  <a href="https://github.com/dreamhunter2333/cloudflare_temp_email/graphs/contributors">
-   <img alt="GitHub contributors" src="https://img.shields.io/github/contributors/dreamhunter2333/cloudflare_temp_email">
+</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">
+    <img alt="GitHub top language" src="https://img.shields.io/github/languages/top/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
  </a>
-  <a href="https://discord.gg/dQEwTWhA6Q">
-     <img alt="Join Discord Chat" src="https://img.shields.io/discord/1238705663623036939.svg?label=discord&logo=discord">
+  <a href="">
+    <img src="https://img.shields.io/github/last-commit/dreamhunter2333/cloudflare_temp_email?style=for-the-badge">
  </a>
 </p>

@@ -62,6 +74,7 @@
 - [x] `admin` 后台创建无前缀邮箱
 - [x] 添加 `SMTP proxy server`，支持 `SMTP` 发送邮件, `IMAP` 查看邮件
 - [x] 添加完整的用户注册登录功能，可绑定邮箱地址，绑定后可自动获取邮箱JWT凭证切换不同邮箱
+- [x] `Telegram Bot` 使用，以及 `Telegram` 推送

 ## Reference

@@ -73,3 +86,4 @@
 ## Join Community

 - [Discord](https://discord.gg/dQEwTWhA6Q)
+- [Telegram](https://t.me/cloudflare_temp_email)
--- a/db/2024-07-14-patch.sql
+++ b/db/2024-07-14-patch.sql
@@ -0,0 +1,9 @@
+CREATE TABLE IF NOT EXISTS user_roles (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER UNIQUE NOT NULL,
+    role_text TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_roles_user_id ON user_roles(user_id);
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -1,15 +1,3 @@
-CREATE TABLE IF NOT EXISTS mails (
-    id INTEGER PRIMARY KEY,
-    message_id TEXT,
-    source TEXT,
-    address TEXT,
-    subject TEXT,
-    message TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
-CREATE INDEX IF NOT EXISTS idx_mails_address ON mails(address);
-
 CREATE TABLE IF NOT EXISTS raw_mails (
    id INTEGER PRIMARY KEY,
    message_id TEXT,
@@ -43,15 +31,6 @@ CREATE TABLE IF NOT EXISTS auto_reply_mails (

 CREATE INDEX IF NOT EXISTS idx_auto_reply_mails_address ON auto_reply_mails(address);

-CREATE TABLE IF NOT EXISTS attachments (
-    id INTEGER PRIMARY KEY,
-    source TEXT,
-    address TEXT,
-    message_id TEXT,
-    data TEXT,
-    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
-);
-
 CREATE TABLE IF NOT EXISTS address_sender (
    id INTEGER PRIMARY KEY,
    address TEXT UNIQUE,
@@ -99,3 +78,13 @@ CREATE TABLE IF NOT EXISTS users_address (
 CREATE INDEX IF NOT EXISTS idx_users_address_user_id ON users_address(user_id);

 CREATE INDEX IF NOT EXISTS idx_users_address_address_id ON users_address(address_id);
+
+CREATE TABLE IF NOT EXISTS user_roles (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER UNIQUE NOT NULL,
+    role_text TEXT,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_roles_user_id ON user_roles(user_id);
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -1,2 +1,3 @@
 VITE_API_BASE=https://temp-email-api.xxx.xxx
 VITE_CF_WEB_ANALY_TOKEN=
+VITE_IS_TELEGRAM=false
--- a/frontend/.env.pages
+++ b/frontend/.env.pages
@@ -0,0 +1,2 @@
+VITE_API_BASE=
+VITE_CF_WEB_ANALY_TOKEN=
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -28,5 +28,7 @@ coverage
 *.sw?

 .env.*
+!.env.example
+!.env.pages
 *-dist/
 components.d.ts
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,41 +1,48 @@
 {
  "name": "cloudflare_temp_email",
-  "version": "0.0.0",
+  "version": "0.6.1",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build -m prod --emptyOutDir",
    "build:release": "vite build -m example --emptyOutDir",
+    "build:pages": "vite build -m pages --emptyOutDir",
+    "build:telegram": "VITE_IS_TELEGRAM=true vite build -m prod --emptyOutDir",
    "preview": "vite preview",
+    "deploy:telegram": "npm run build:telegram && wrangler pages deploy ./dist --branch production",
+    "deploy:actions:telegram": "npm run build:telegram && wrangler pages deploy ./dist",
    "deploy:preview": "npm run build && wrangler pages deploy ./dist --branch preview",
-    "deploy": "npm run build && wrangler pages deploy ./dist --branch production"
+    "deploy": "npm run build && wrangler pages deploy ./dist --branch production",
+    "deploy:actions": "npm run build && wrangler pages deploy ./dist"
  },
  "dependencies": {
+    "@unhead/vue": "^1.9.15",
    "@vicons/material": "^0.12.0",
-    "@vueuse/core": "^10.9.0",
+    "@vueuse/core": "^10.11.0",
    "@wangeditor/editor": "^5.1.23",
    "@wangeditor/editor-for-vue": "^5.1.12",
-    "axios": "^1.6.8",
-    "mail-parser-wasm": "^0.1.6",
+    "axios": "^1.7.2",
+    "jszip": "^3.10.1",
+    "mail-parser-wasm": "^0.1.8",
    "naive-ui": "^2.38.2",
    "postal-mime": "^2.2.5",
    "vooks": "^0.2.12",
-    "vue": "^3.4.26",
+    "vue": "^3.4.31",
    "vue-clipboard3": "^2.0.0",
    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.4.0"
  },
  "devDependencies": {
    "@vicons/fa": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.0.4",
-    "unplugin-auto-import": "^0.17.5",
-    "unplugin-vue-components": "^0.27.0",
-    "vite": "^5.2.11",
+    "@vitejs/plugin-vue": "^5.0.5",
+    "unplugin-auto-import": "^0.17.6",
+    "unplugin-vue-components": "^0.27.2",
+    "vite": "^5.3.3",
    "vite-plugin-pwa": "^0.19.8",
    "vite-plugin-top-level-await": "^1.4.1",
    "vite-plugin-wasm": "^3.3.0",
    "workbox-window": "^7.1.0",
-    "wrangler": "^3.53.1"
+    "wrangler": "^3.63.1"
  }
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -8,16 +8,15 @@ import Header from './views/Header.vue';
 import Footer from './views/Footer.vue';


-const { localeCache, isDark, loading, useSideMargin } = useGlobalState()
+const {
+  isDark, loading, useSideMargin, telegramApp, isTelegram
+} = useGlobalState()
+const { locale } = useI18n({});
 const theme = computed(() => isDark.value ? darkTheme : null)
-const localeConfig = computed(() => localeCache.value == 'zh' ? zhCN : null)
+const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
-const showSideMargin = computed(() => !isMobile.value && !useSideMargin.value);
+const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);

-const { locale } = useI18n({
-  useScope: 'global',
-});
-locale.value = localeCache.value;

 onMounted(async () => {
  const token = import.meta.env.VITE_CF_WEB_ANALY_TOKEN;
@@ -31,6 +30,23 @@ onMounted(async () => {
    document.body.appendChild(script);
  }

+  // check if telegram is enabled
+  const enableTelegram = import.meta.env.VITE_IS_TELEGRAM;
+  if (
+    (typeof enableTelegram === 'boolean' && enableTelegram === true)
+    ||
+    (typeof enableTelegram === 'string' && enableTelegram === 'true')
+  ) {
+    await new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = 'https://telegram.org/js/telegram-web-app.js';
+      script.onload = resolve;
+      script.onerror = reject;
+      document.body.appendChild(script);
+    });
+    telegramApp.value = window.Telegram?.WebApp || {};
+    isTelegram.value = !!window.Telegram?.WebApp?.initData;
+  }
 });
 </script>

@@ -38,10 +54,10 @@ onMounted(async () => {
  <n-config-provider :locale="localeConfig" :theme="theme">
    <n-global-style />
    <n-spin description="loading..." :show="loading">
-      <n-message-provider>
+      <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">
+          <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;">
@@ -52,7 +68,7 @@ onMounted(async () => {
              </n-space>
            </div>
          </n-gi>
-          <n-gi v-if="!showSideMargin" span="1"></n-gi>
+          <n-gi v-if="showSideMargin" span="1"></n-gi>
        </n-grid>
        <n-back-top />
      </n-message-provider>
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -4,13 +4,14 @@ import axios from 'axios'
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const {
    loading, auth, jwt, settings, openSettings,
-    userOpenSettings, userSettings,
+    userOpenSettings, userSettings, announcement,
    showAuth, adminAuth, showAdminAuth, userJwt
 } = useGlobalState();

 const instance = axios.create({
    baseURL: API_BASE,
-    timeout: 30000
+    timeout: 30000,
+    validateStatus: (status) => status >= 200 && status <= 500
 });

 const apiFetch = async (path, options = {}) => {
@@ -27,14 +28,14 @@ const apiFetch = async (path, options = {}) => {
                'Content-Type': 'application/json',
            },
        });
-        if (response.status === 401 && openSettings.value.auth) {
-            showAuth.value = true;
-            throw new Error("Unauthorized, you access password is wrong")
-        }
        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");
        }
@@ -53,12 +54,18 @@ const apiFetch = async (path, options = {}) => {
 const getOpenSettings = async (message) => {
    try {
        const res = await api.fetch("/open_api/settings");
+        const domainLabels = res["domainLabels"] || [];
        Object.assign(openSettings.value, {
+            ...res,
+            title: res["title"] || "",
            prefix: res["prefix"] || "",
+            minAddressLen: res["minAddressLen"] || 1,
+            maxAddressLen: res["maxAddressLen"] || 30,
            needAuth: res["needAuth"] || false,
-            domains: res["domains"].map((domain) => {
+            defaultDomains: res["defaultDomains"] || [],
+            domains: res["domains"].map((domain, index) => {
                return {
-                    label: domain,
+                    label: domainLabels.length > index ? domainLabels[index] : domain,
                    value: domain
                }
            }),
@@ -66,12 +73,23 @@ const getOpenSettings = async (message) => {
            enableUserCreateEmail: res["enableUserCreateEmail"] || false,
            enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
            enableAutoReply: res["enableAutoReply"] || false,
+            enableIndexAbout: res["enableIndexAbout"] || false,
            copyright: res["copyright"] || openSettings.value.copyright,
            cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
+            enableWebhook: res["enableWebhook"] || false,
+            isS3Enabled: res["isS3Enabled"] || false,
        });
        if (openSettings.value.needAuth) {
            showAuth.value = true;
        }
+        if (openSettings.value.announcement && openSettings.value.announcement != announcement.value) {
+            announcement.value = openSettings.value.announcement;
+            message.info(announcement.value, {
+                showIcon: false,
+                duration: 0,
+                closable: true
+            });
+        }
    } catch (error) {
        message.error(error.message || "error");
    }
@@ -86,7 +104,6 @@ const getSettings = async () => {
        settings.value = {
            address: res["address"],
            auto_reply: res["auto_reply"],
-            has_v1_mails: res["has_v1_mails"],
            send_balance: res["send_balance"],
        };
    } finally {
--- a/frontend/src/components/MailBox.vue
+++ b/frontend/src/components/MailBox.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { watch, onMounted, ref, onBeforeUnmount } from "vue";
-import { useRouter } from "vue-router";
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
@@ -10,7 +9,6 @@ import { processItem, getDownloadEmlUrl } from '../utils/email-parser'

 const message = useMessage()
 const isMobile = useIsMobile()
-const router = useRouter()

 const props = defineProps({
  enableUserDeleteEmail: {
@@ -37,11 +35,21 @@ const props = defineProps({
    type: Boolean,
    default: false,
    requried: false
-  }
+  },
+  showSaveS3: {
+    type: Boolean,
+    default: false,
+    requried: false
+  },
+  saveToS3: {
+    type: Function,
+    default: (mail_id, filename, blob) => { },
+    requried: false
+  },
 })

 const {
-  localeCache, isDark, mailboxSplitSize, indexTab,
+  isDark, mailboxSplitSize, indexTab, loading,
  useIframeShowMail, sendMailModel, preferShowTextMail
 } = useGlobalState()
 const autoRefresh = ref(false)
@@ -58,8 +66,13 @@ const curAttachments = ref([])
 const curMail = ref(null);
 const showTextMail = ref(preferShowTextMail.value)

+const multiActionMode = ref(false)
+const showMultiActionDownload = ref(false)
+const showMultiActionDelete = ref(false)
+const multiActionDownloadZip = ref({})
+const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
+
 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
  messages: {
    en: {
      success: 'Success',
@@ -68,12 +81,17 @@ const { t } = useI18n({
      refresh: 'Refresh',
      attachments: 'Show Attachments',
      downloadMail: 'Download Mail',
-      pleaseSelectMail: "Please select a mail to view.",
+      pleaseSelectMail: "Please select mail",
      delete: 'Delete',
-      deleteMailTip: 'Are you sure you want to delete this mail?',
+      deleteMailTip: 'Are you sure you want to delete mail?',
      reply: 'Reply',
      showTextMail: 'Show Text Mail',
-      showHtmlMail: 'Show Html Mail'
+      showHtmlMail: 'Show Html Mail',
+      saveToS3: 'Save to S3',
+      multiAction: 'Multi Action',
+      cancelMultiAction: 'Cancel Multi Action',
+      selectAll: 'Select All of This Page',
+      unselectAll: 'Unselect All',
    },
    zh: {
      success: '成功',
@@ -82,12 +100,17 @@ const { t } = useI18n({
      refresh: '刷新',
      downloadMail: '下载邮件',
      attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。",
+      pleaseSelectMail: "请选择邮件",
      delete: '删除',
-      deleteMailTip: '确定要删除这封邮件吗?',
+      deleteMailTip: '确定要删除邮件吗?',
      reply: '回复',
      showTextMail: '显示纯文本邮件',
-      showHtmlMail: '显示HTML邮件'
+      showHtmlMail: '显示HTML邮件',
+      saveToS3: '保存到S3',
+      multiAction: '多选',
+      cancelMultiAction: '取消多选',
+      selectAll: '全选本页',
+      unselectAll: '取消全选',
    }
  }
 });
@@ -125,12 +148,14 @@ const refresh = async () => {
      pageSize.value, (page.value - 1) * pageSize.value
    );
    data.value = await Promise.all(results.map(async (item) => {
+      item.checked = false;
      return await processItem(item);
    }));
    if (totalCount > 0) {
      count.value = totalCount;
    }
-    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+    curMail.value = null;
+    if (!isMobile.value && data.value.length > 0) {
      curMail.value = data.value[0];
    }
  } catch (error) {
@@ -140,6 +165,10 @@ const refresh = async () => {
 };

 const clickRow = async (row) => {
+  if (multiActionMode.value) {
+    row.checked = !row.checked;
+    return;
+  }
  curMail.value = row;
 };

@@ -186,6 +215,92 @@ const onSpiltSizeChange = (size) => {
  mailboxSplitSize.value = size;
 }

+const attachmentLoding = ref(false)
+const saveToS3Proxy = async (filename, blob) => {
+  attachmentLoding.value = true
+  try {
+    await props.saveToS3(curMail.value.id, filename, blob);
+  } finally {
+    attachmentLoding.value = false
+  }
+}
+
+const multiActionModeClick = (enableMulti) => {
+  if (enableMulti) {
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+    multiActionMode.value = true;
+  } else {
+    multiActionMode.value = false;
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+  }
+}
+
+const multiActionSelectAll = (checked) => {
+  data.value.forEach((item) => {
+    item.checked = checked;
+  });
+}
+
+const multiActionDeleteMail = async () => {
+  try {
+    loading.value = true;
+    const selectedMails = data.value.filter((item) => item.checked);
+    if (selectedMails.length === 0) {
+      message.error(t('pleaseSelectMail'));
+      return;
+    }
+    multiActionDeleteProgress.value = {
+      percentage: 0,
+      tip: `0/${selectedMails.length}`
+    };
+    for (const [index, mail] of selectedMails.entries()) {
+      await props.deleteMail(mail.id);
+      showMultiActionDelete.value = true;
+      multiActionDeleteProgress.value = {
+        percentage: Math.floor((index + 1) / selectedMails.length * 100),
+        tip: `${index + 1}/${selectedMails.length}`
+      };
+    }
+    message.success(t("success"));
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  } finally {
+    loading.value = false;
+    showMultiActionDelete.value = true;
+  }
+}
+
+const multiActionDownload = async () => {
+  try {
+    loading.value = true;
+    const selectedMails = data.value.filter((item) => item.checked);
+    if (selectedMails.length === 0) {
+      message.error(t('pleaseSelectMail'));
+      return;
+    }
+    const JSZipModlue = await import('jszip');
+    const JSZip = JSZipModlue.default;
+    const zip = new JSZip();
+    for (const mail of selectedMails) {
+      zip.file(`${mail.id}.eml`, mail.raw);
+    }
+    multiActionDownloadZip.value = {
+      url: URL.createObjectURL(await zip.generateAsync({ type: "blob" })),
+      filename: `mails-${new Date().toISOString().replace(/:/g, '-')}.zip`
+    }
+    showMultiActionDownload.value = true;
+  } catch (error) {
+    message.error(error.message || "error");
+  } finally {
+    loading.value = false;
+  }
+}
+
 onMounted(async () => {
  await refresh();
 });
@@ -197,14 +312,38 @@ onBeforeUnmount(() => {

 <template>
  <div>
-    <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25"
-      :default-size="mailboxSplitSize" :on-update:size="onSpiltSizeChange">
-      <template #1>
-        <div class="center">
-          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-          </div>
-          <n-switch v-model:value="autoRefresh" size="small" :round="false">
+    <div v-if="!isMobile" class="left">
+      <div style="margin-bottom: 10px;">
+        <n-space v-if="multiActionMode">
+          <n-button @click="multiActionModeClick(false)" tertiary>
+            {{ t('cancelMultiAction') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(true)" tertiary>
+            {{ t('selectAll') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(false)" tertiary>
+            {{ t('unselectAll') }}
+          </n-button>
+          <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="multiActionDeleteMail">
+            <template #trigger>
+              <n-button tertiary type="error">{{ t('delete') }}</n-button>
+            </template>
+            {{ t('deleteMailTip') }}
+          </n-popconfirm>
+          <n-button @click="multiActionDownload" tertiary type="info">
+            <template #icon>
+              <n-icon :component="CloudDownloadRound" />
+            </template>
+            {{ t('downloadMail') }}
+          </n-button>
+        </n-space>
+        <n-space v-else>
+          <n-button @click="multiActionModeClick(true)" type="primary" tertiary>
+            {{ t('multiAction') }}
+          </n-button>
+          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
+            show-size-picker />
+          <n-switch v-model:value="autoRefresh" :round="false">
            <template #checked>
              {{ t('refreshAfter', { msg: autoRefreshInterval }) }}
            </template>
@@ -212,91 +351,100 @@ onBeforeUnmount(() => {
              {{ t('autoRefresh') }}
            </template>
          </n-switch>
-          <n-button @click="refresh" size="small" type="primary" tertiary>
+          <n-button @click="refresh" type="primary" tertiary>
            {{ t('refresh') }}
          </n-button>
-        </div>
-        <div style="overflow: auto; height: 80vh;">
-          <n-list hoverable clickable>
-            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-              :class="mailItemClass(row)">
-              <n-thing :title="row.subject">
-                <template #description>
-                  <n-tag type="info">
-                    ID: {{ row.id }}
-                  </n-tag>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </n-tag>
-                  <n-tag type="info">
-                    FROM: {{ row.source }}
-                  </n-tag>
-                  <n-tag v-if="showEMailTo" type="info">
-                    TO: {{ row.address }}
-                  </n-tag>
+        </n-space>
+      </div>
+      <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;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <template #prefix v-if="multiActionMode">
+                  <n-checkbox v-model:checked="row.checked" />
                </template>
-              </n-thing>
-            </n-list-item>
-          </n-list>
-        </div>
-      </template>
-      <template #2>
-        <n-card 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">
-              {{ curMail.created_at }}
-            </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 size="small" tertiary type="info" @click="showTextMail = !showTextMail">
-              {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
-            </n-button>
-          </n-space>
-          <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
-          <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
-            style="margin-top: 10px;width: 100%; height: 100%;">
-          </iframe>
-          <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
-        </n-card>
-        <n-card class="mail-item" v-else>
-          <n-result status="info" :title="t('pleaseSelectMail')">
-          </n-result>
-        </n-card>
-      </template>
-    </n-split>
+                <n-thing :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ `${row.created_at} UTC` }}
+                    </n-tag>
+                    <n-tag type="info">
+                      FROM: {{ row.source }}
+                    </n-tag>
+                    <n-tag v-if="showEMailTo" type="info">
+                      TO: {{ row.address }}
+                    </n-tag>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
+        </template>
+        <template #2>
+          <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">
+                {{ `${curMail.created_at} UTC` }}
+              </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 size="small" tertiary type="info" @click="showTextMail = !showTextMail">
+                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
+              </n-button>
+            </n-space>
+            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
+            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
+              style="margin-top: 10px;width: 100%; height: 100%;">
+            </iframe>
+            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
+          </n-card>
+          <n-card :bordered="false" embedded class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+    </div>
    <div class="left" v-else>
-      <div class="center">
-        <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+      <n-space justify="center">
+        <div style="display: inline-block;">
          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
        </div>
        <n-switch v-model:value="autoRefresh" size="small" :round="false">
@@ -307,10 +455,10 @@ onBeforeUnmount(() => {
            {{ t('autoRefresh') }}
          </template>
        </n-switch>
-        <n-button @click="refresh" size="small" type="primary">
+        <n-button @click="refresh" tertiary size="small" type="primary">
          {{ t('refresh') }}
        </n-button>
-      </div>
+      </n-space>
      <div style="overflow: auto; height: 80vh;">
        <n-list hoverable clickable>
          <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
@@ -320,7 +468,7 @@ onBeforeUnmount(() => {
                  ID: {{ row.id }}
                </n-tag>
                <n-tag type="info">
-                  {{ row.created_at }}
+                  {{ `${row.created_at} UTC` }}
                </n-tag>
                <n-tag type="info">
                  FROM: {{ row.source }}
@@ -336,13 +484,13 @@ onBeforeUnmount(() => {
      <n-drawer v-model:show="curMail" width="100%" placement="bottom" :trap-focus="false" :block-scroll="false"
        style="height: 80vh;">
        <n-drawer-content :title="curMail ? curMail.subject : ''" closable>
-          <n-card style="overflow: auto;">
+          <n-card :bordered="false" embedded style="overflow: auto;">
            <n-space>
              <n-tag type="info">
                ID: {{ curMail.id }}
              </n-tag>
              <n-tag type="info">
-                {{ curMail.created_at }}
+                {{ `${curMail.created_at} UTC` }}
              </n-tag>
              <n-tag type="info">
                FROM: {{ curMail.source }}
@@ -388,25 +536,51 @@ onBeforeUnmount(() => {
      <template #header>
        <div>{{ t("attachments") }}</div>
      </template>
-      <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-space>
+      <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-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-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 }}
+      </n-tag>
+      <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="multiActionDownloadZip.filename"
+        :href="multiActionDownloadZip.url">
+        <n-icon :component="CloudDownloadRound" />
+        {{ t('downloadMail') + " zip" }}
+      </n-button>
+    </n-modal>
+    <n-modal v-model:show="showMultiActionDelete" preset="dialog" :title="t('delete') + t('success')"
+      negative-text="OK">
+      <n-space justify="center">
+        <n-progress type="circle" status="error" :percentage="multiActionDeleteProgress.percentage">
+          <span style="text-align: center">
+            {{ multiActionDeleteProgress.tip }}
+          </span>
+        </n-progress>
+      </n-space>
    </n-modal>
  </div>
 </template>
--- a/frontend/src/components/SendBox.vue
+++ b/frontend/src/components/SendBox.vue
@@ -0,0 +1,404 @@
+<script setup>
+import { watch, onMounted, ref, computed } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { useIsMobile } from '../utils/composables'
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const props = defineProps({
+  enableUserDeleteEmail: {
+    type: Boolean,
+    default: false,
+    requried: false
+  },
+  showEMailFrom: {
+    type: Boolean,
+    default: false
+  },
+  fetchMailData: {
+    type: Function,
+    default: () => { },
+    requried: true
+  },
+  deleteMail: {
+    type: Function,
+    default: () => { },
+    requried: false
+  },
+})
+
+const { isDark, mailboxSplitSize, loading } = useGlobalState()
+const data = ref([])
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const curMail = ref(null);
+const showCode = ref(false)
+
+const multiActionMode = ref(false)
+const showMultiActionDelete = ref(false)
+const multiActionDeleteProgress = ref({ percentage: 0, tip: '0/0' })
+
+const { t } = useI18n({
+  messages: {
+    en: {
+      success: 'Success',
+      refresh: 'Refresh',
+      showCode: 'Change View Original Code',
+      pleaseSelectMail: "Please select a mail to view.",
+      delete: 'Delete',
+      deleteMailTip: 'Are you sure you want to delete mail?',
+      multiAction: 'Multi Action',
+      cancelMultiAction: 'Cancel Multi Action',
+      selectAll: 'Select All of This Page',
+      unselectAll: 'Unselect All',
+    },
+    zh: {
+      success: '成功',
+      refresh: '刷新',
+      showCode: '切换查看元数据',
+      pleaseSelectMail: "请选择一封邮件查看。",
+      delete: '删除',
+      deleteMailTip: '确定要删除邮件吗?',
+      multiAction: '多选',
+      cancelMultiAction: '取消多选',
+      selectAll: '全选本页',
+      unselectAll: '取消全选',
+    }
+  }
+});
+
+watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
+  if (page !== oldPage || pageSize !== oldPageSize) {
+    await refresh();
+  }
+})
+
+const refresh = async () => {
+  try {
+    const { results, count: totalCount } = await props.fetchMailData(
+      pageSize.value, (page.value - 1) * pageSize.value
+    );
+    data.value = results.map((item) => {
+      try {
+        const data = JSON.parse(item.raw);
+        if (data.version == "v2") {
+          item.to_mail = data.to_name ? `${data.to_name} <${data.to_mail}>` : data.to_mail;
+          item.subject = data.subject;
+          item.is_html = data.is_html;
+          item.content = data.content;
+          item.raw = JSON.stringify(data, null, 2);
+        } else {
+          item.to_mail = data?.personalizations?.map(
+            (p) => p.to?.map((t) => t.email).join(',')
+          ).join(';');
+          item.subject = data.subject;
+          item.is_html = (data.content[0]?.type != 'text/plain');
+          item.content = data.content[0]?.value;
+          item.raw = JSON.stringify(data, null, 2);
+        }
+      } catch (error) {
+        console.log(error);
+      }
+      return item;
+    });
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+      curMail.value = data.value[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  }
+};
+
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+const onSpiltSizeChange = (size) => {
+  mailboxSplitSize.value = size;
+}
+
+const deleteMail = async () => {
+  try {
+    await props.deleteMail(curMail.value.id);
+    message.success(t("success"));
+    curMail.value = null;
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+};
+
+const showMultiActionMode = computed(() => {
+  return props.enableUserDeleteEmail;
+});
+
+const multiActionModeClick = (enableMulti) => {
+  if (enableMulti) {
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+    multiActionMode.value = true;
+  } else {
+    multiActionMode.value = false;
+    data.value.forEach((item) => {
+      item.checked = false;
+    });
+  }
+}
+
+const multiActionSelectAll = (checked) => {
+  data.value.forEach((item) => {
+    item.checked = checked;
+  });
+}
+
+const multiActionDeleteMail = async () => {
+  try {
+    loading.value = true;
+    const selectedMails = data.value.filter((item) => item.checked);
+    if (selectedMails.length === 0) {
+      message.error(t('pleaseSelectMail'));
+      return;
+    }
+    multiActionDeleteProgress.value = {
+      percentage: 0,
+      tip: `0/${selectedMails.length}`
+    };
+    for (const [index, mail] of selectedMails.entries()) {
+      await props.deleteMail(mail.id);
+      showMultiActionDelete.value = true;
+      multiActionDeleteProgress.value = {
+        percentage: Math.floor((index + 1) / selectedMails.length * 100),
+        tip: `${index + 1}/${selectedMails.length}`
+      };
+    }
+    message.success(t("success"));
+    await refresh();
+  } catch (error) {
+    message.error(error.message || "error");
+  } finally {
+    loading.value = false;
+    showMultiActionDelete.value = true;
+  }
+}
+
+onMounted(async () => {
+  await refresh();
+});
+</script>
+
+<template>
+  <div>
+    <div v-if="!isMobile" class="left">
+      <div style="margin-bottom: 10px;">
+        <n-space v-if="multiActionMode">
+          <n-button @click="multiActionModeClick(false)" tertiary>
+            {{ t('cancelMultiAction') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(true)" tertiary>
+            {{ t('selectAll') }}
+          </n-button>
+          <n-button @click="multiActionSelectAll(false)" tertiary>
+            {{ t('unselectAll') }}
+          </n-button>
+          <n-popconfirm v-if="enableUserDeleteEmail" @positive-click="multiActionDeleteMail">
+            <template #trigger>
+              <n-button tertiary type="error">{{ t('delete') }}</n-button>
+            </template>
+            {{ t('deleteMailTip') }}
+          </n-popconfirm>
+        </n-space>
+        <n-space v-else>
+          <n-button v-if="showMultiActionMode" @click="multiActionModeClick(true)" type="primary" tertiary>
+            {{ t('multiAction') }}
+          </n-button>
+          <div style="display: inline-block; margin-right: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
+              :page-sizes="[20, 50, 100]" show-size-picker />
+          </div>
+          <n-button @click="refresh" type="primary" tertiary>
+            {{ t('refresh') }}
+          </n-button>
+        </n-space>
+      </div>
+      <n-split direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
+        :on-update:size="onSpiltSizeChange">
+        <template #1>
+          <div style="overflow: auto; height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <template #prefix v-if="multiActionMode">
+                  <n-checkbox v-model:checked="row.checked" />
+                </template>
+                <n-thing :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ `${row.created_at} UTC` }}
+                    </n-tag>
+                    <n-tag v-if="showEMailFrom" type="info">
+                      FROM: {{ row.address }}
+                    </n-tag>
+                    <n-tag type="info">
+                      TO: {{ row.to_mail }}
+                    </n-tag>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
+        </template>
+        <template #2>
+          <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">
+                {{ `${curMail.created_at} UTC` }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.address }}
+              </n-tag>
+              <n-tag type="info">
+                TO: {{ curMail.to_mail }}
+              </n-tag>
+              <n-button size="small" tertiary type="info" @click="showCode = !showCode">
+                {{ t('showCode') }}
+              </n-button>
+              <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-space>
+            <pre v-if="showCode" style="margin-top: 10px;">{{ curMail.raw }}</pre>
+            <pre v-else-if="!curMail.is_html" style="margin-top: 10px;">{{ curMail.content }}</pre>
+            <div v-else v-html="curMail.content" style="margin-top: 10px;"></div>
+          </n-card>
+          <n-card :bordered="false" embedded class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+    </div>
+    <div class="left" v-else>
+      <div class="center">
+        <div style="display: inline-block; margin-right: 10px;">
+          <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+        </div>
+        <n-button @click="refresh" size="small" type="primary">
+          {{ t('refresh') }}
+        </n-button>
+      </div>
+      <div style="overflow: auto; height: 80vh;">
+        <n-list hoverable clickable>
+          <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+            <n-thing :title="row.subject">
+              <template #description>
+                <n-tag type="info">
+                  ID: {{ row.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ `${row.created_at} UTC` }}
+                </n-tag>
+                <n-tag v-if="showEMailFrom" type="info">
+                  FROM: {{ row.address }}
+                </n-tag>
+                <n-tag type="info">
+                  TO: {{ row.to_mail }}
+                </n-tag>
+              </template>
+            </n-thing>
+          </n-list-item>
+        </n-list>
+      </div>
+      <n-drawer v-model:show="curMail" width="100%" placement="bottom" :trap-focus="false" :block-scroll="false"
+        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">
+                {{ `${curMail.created_at} UTC` }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.address }}
+              </n-tag>
+              <n-tag type="info">
+                TO: {{ curMail.to_mail }}
+              </n-tag>
+              <n-button size="small" tertiary type="info" @click="showCode = !showCode">
+                {{ t('showCode') }}
+              </n-button>
+              <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-space>
+            <pre v-if="showCode" style="margin-top: 10px;">{{ curMail.raw }}</pre>
+            <pre v-else-if="!curMail.is_html" style="margin-top: 10px;">{{ curMail.content }}</pre>
+            <div v-else v-html="curMail.content" style="margin-top: 10px;"></div>
+          </n-card>
+        </n-drawer-content>
+      </n-drawer>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.overlay-dark-backgroud {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.overlay-light-backgroud {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mail-item {
+  height: 100%;
+}
+
+pre {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+</style>
--- a/frontend/src/components/Turnstile.vue
+++ b/frontend/src/components/Turnstile.vue
@@ -1,13 +1,12 @@
 <script setup>
-import { ref, watch, defineModel, onMounted } from "vue";
+import { ref, watch, onMounted } from "vue";
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-const { localeCache, openSettings, isDark } = useGlobalState()
+const { openSettings, isDark } = useGlobalState()

 const cfToken = defineModel('value')

-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
            refresh: 'Refresh'
@@ -42,7 +41,7 @@ const checkCfTurnstile = async (remove) => {
            "#cf-turnstile",
            {
                sitekey: openSettings.value.cfTurnstileSiteKey,
-                language: localeCache.value == 'zh' ? 'zh-CN' : 'en-US',
+                language: locale.value == 'zh' ? 'zh-CN' : 'en-US',
                theme: isDark.value ? 'dark' : 'light',
                callback: function (token) {
                    cfToken.value = token;
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,6 +3,7 @@ import App from './App.vue'
 import { createI18n } from 'vue-i18n'
 import router from './router'
 import { registerSW } from 'virtual:pwa-register'
+import { createHead } from '@unhead/vue'

 registerSW({ immediate: true })
 const i18n = createI18n({
@@ -16,7 +17,19 @@ const i18n = createI18n({
        messages: {}
    }
 })
+
+router.beforeEach((to, from) => {
+    if (to.params.lang && ['en', 'zh'].includes(to.params.lang)) {
+        i18n.global.locale.value = to.params.lang
+    } else {
+        i18n.global.locale.value = 'zh'
+    }
+});
+
+
+const head = createHead()
 const app = createApp(App)
 app.use(i18n)
 app.use(router)
+app.use(head)
 app.mount('#app')
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -1,24 +1,35 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Index from '../views/Index.vue'
-import UserLogin from '../views/user/UserLogin.vue'
 import User from '../views/User.vue'
-import SendMail from '../views/index/SendMail.vue'
-import Admin from '../views/Admin.vue'
+import { useGlobalState } from '../store'

 const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
+            alias: "/:lang/",
            component: Index
        },
        {
            path: '/user',
+            alias: "/:lang/user",
            component: User
        },
        {
            path: '/admin',
-            component: Admin
+            alias: "/:lang/admin",
+            component: () => import('../views/Admin.vue')
+        },
+        {
+            path: '/telegram_mail',
+            alias: "/:lang/telegram_mail",
+            component: () => import('../views/telegram/Mail.vue')
+        },
+        {
+            name: 'not-found',
+            path: '/:pathMatch(.*)*',
+            redirect: '/'
        }
    ]
 })
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -1,25 +1,33 @@
 import { ref } from "vue";
-import { createGlobalState, useStorage, useDark, useToggle } from '@vueuse/core'
+import { createGlobalState, useStorage, useDark, useToggle, useLocalStorage } from '@vueuse/core'

 export const useGlobalState = createGlobalState(
    () => {
        const isDark = useDark()
        const toggleDark = useToggle(isDark)
        const loading = ref(false);
+        const announcement = useLocalStorage('announcement', '');
        const openSettings = ref({
+            title: '',
+            announcement: '',
            prefix: '',
            needAuth: false,
            adminContact: '',
            enableUserCreateEmail: false,
            enableUserDeleteEmail: false,
            enableAutoReply: false,
+            enableIndexAbout: false,
+            /** @type {string[]} */
+            defaultDomains: [],
+            /** @type {Array<{label: string, value: string}>} */
            domains: [],
            copyright: 'Dream Hunter',
            cfTurnstileSiteKey: '',
+            enableWebhook: false,
+            isS3Enabled: false,
        })
        const settings = ref({
            fetched: false,
-            has_v1_mails: false,
            send_balance: 0,
            address: '',
            auto_reply: {
@@ -44,7 +52,6 @@ export const useGlobalState = createGlobalState(
        const auth = useStorage('auth', '');
        const adminAuth = useStorage('adminAuth', '');
        const jwt = useStorage('jwt', '');
-        const localeCache = useStorage('locale', 'zh');
        const adminTab = ref("account");
        const adminMailTabAddress = ref("");
        const adminSendBoxTabAddress = ref("");
@@ -67,19 +74,23 @@ export const useGlobalState = createGlobalState(
            user_email: '',
            /** @type {number} */
            user_id: 0,
+            /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
+            user_role: null,
        });
+        const telegramApp = ref(window.Telegram?.WebApp || {});
+        const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
        return {
            isDark,
            toggleDark,
            loading,
            settings,
            sendMailModel,
+            announcement,
            openSettings,
            showAuth,
            showAddressCredential,
            auth,
            jwt,
-            localeCache,
            adminAuth,
            showAdminAuth,
            adminTab,
@@ -95,6 +106,8 @@ export const useGlobalState = createGlobalState(
            userSettings,
            globalTabplacement,
            useSideMargin,
+            telegramApp,
+            isTelegram,
        }
    },
 )
--- a/frontend/src/utils/email-parser.js
+++ b/frontend/src/utils/email-parser.js
@@ -16,11 +16,11 @@ export async function processItem(item) {
        item.message = parsedEmail.body_html || parsedEmail.text || '';
        item.text = parsedEmail.text || '';
        item.attachments = parsedEmail.attachments?.map((a_item) => {
-            const blob_url = URL.createObjectURL(
-                new Blob(
-                    [a_item.content],
-                    { type: a_item.content_type || 'application/octet-stream' }
-                ))
+            const blob = new Blob(
+                [a_item.content],
+                { type: a_item.content_type || 'application/octet-stream' }
+            );
+            const blob_url = URL.createObjectURL(blob);
            if (a_item.content_id && a_item.content_id.length > 0) {
                item.message = item.message.replace(`cid:${a_item.content_id}`, blob_url);
            }
@@ -28,7 +28,8 @@ export async function processItem(item) {
                id: a_item.content_id || Math.random().toString(36).substring(2, 15),
                filename: a_item.filename || a_item.content_id || "",
                size: humanFileSize(a_item.content?.length || 0),
-                url: blob_url
+                url: blob_url,
+                blob: blob
            }
        }) || [];
    } catch (error) {
@@ -49,11 +50,11 @@ export async function processItem(item) {
        item.message = parsedEmail.html || parsedEmail.text || item.raw;
        item.text = parsedEmail.text || '';
        item.attachments = parsedEmail.attachments?.map((a_item) => {
-            const blob_url = URL.createObjectURL(
-                new Blob(
-                    [a_item.content],
-                    { type: a_item.mimeType || 'application/octet-stream' }
-                ))
+            const blob = new Blob(
+                [a_item.content],
+                { type: a_item.mimeType || 'application/octet-stream' }
+            );
+            const blob_url = URL.createObjectURL(blob)
            if (a_item.contentId && a_item.contentId.length > 0) {
                item.message = item.message.replace(`cid:${a_item.contentId}`, blob_url);
            }
@@ -61,7 +62,8 @@ export async function processItem(item) {
                id: a_item.contentId || Math.random().toString(36).substring(2, 15),
                filename: a_item.filename || a_item.contentId || "",
                size: humanFileSize(a_item.content?.length || 0),
-                url: blob_url
+                url: blob_url,
+                blob: blob
            }
        }) || [];
    } catch (error) {
--- a/frontend/src/utils/index.ts
+++ b/frontend/src/utils/index.ts
@@ -1,6 +1,13 @@
-export const hashPassword = async (password) => {
+export const hashPassword = async (password: string) => {
    // user crypto to hash password
    const digest = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(password));
    const hashArray = Array.from(new Uint8Array(digest));
    return hashArray.map(byte => byte.toString(16).padStart(2, '0')).join('');
 }
+
+export const getRouterPathWithLang = (path: string, lang: string) => {
+    if (!lang || lang === 'zh') {
+        return path;
+    }
+    return `/${lang}${path}`;
+}
--- a/frontend/src/views/Admin.vue
+++ b/frontend/src/views/Admin.vue
@@ -14,11 +14,14 @@ import UserManagement from './admin/UserManagement.vue';
 import UserSettings from './admin/UserSettings.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 Appearance from './common/Appearance.vue';
+import Telegram from './admin/Telegram.vue';
+import Webhook from './admin/Webhook.vue';

 const {
-  localeCache, adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
+  adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
 } = useGlobalState()
 const message = useMessage()

@@ -31,7 +34,6 @@ const authFunc = async () => {
 }

 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
  messages: {
    en: {
      accessHeader: 'Admin Password',
@@ -40,14 +42,18 @@ const { t } = useI18n({
      account: 'Account',
      account_create: 'Create Account',
      account_settings: 'Account Settings',
+      user: 'User',
      user_management: 'User Management',
      user_settings: 'User Settings',
      unknow: 'Mails with unknow receiver',
      senderAccess: 'Sender Access Control',
      sendBox: 'Send Box',
+      telegram: 'Telegram Bot',
+      webhook: 'Webhook',
      statistics: 'Statistics',
      maintenance: 'Maintenance',
      appearance: 'Appearance',
+      about: 'About',
      ok: 'OK',
    },
    zh: {
@@ -57,14 +63,18 @@ const { t } = useI18n({
      account: '账号',
      account_create: '创建账号',
      account_settings: '账号设置',
+      user: '用户',
      user_management: '用户管理',
      user_settings: '用户设置',
      unknow: '无收件人邮件',
      senderAccess: '发件权限控制',
      sendBox: '发件箱',
+      telegram: '电报机器人',
+      webhook: 'Webhook',
      statistics: '统计',
      maintenance: '维护',
      appearance: '外观',
+      about: '关于',
      ok: '确定',
    }
  }
@@ -92,32 +102,50 @@ onMounted(async () => {
    </n-modal>
    <n-tabs type="card" v-model:value="adminTab" :placement="globalTabplacement">
      <n-tab-pane name="account" :tab="t('account')">
-        <Account />
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="account" :tab="t('account')">
+            <Account />
+          </n-tab-pane>
+          <n-tab-pane name="account_create" :tab="t('account_create')">
+            <CreateAccount />
+          </n-tab-pane>
+          <n-tab-pane name="account_settings" :tab="t('account_settings')">
+            <AccountSettings />
+          </n-tab-pane>
+          <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
+            <SenderAccess />
+          </n-tab-pane>
+          <n-tab-pane name="webhook" :tab="t('webhook')">
+            <Webhook />
+          </n-tab-pane>
+        </n-tabs>
      </n-tab-pane>
-      <n-tab-pane name="account_create" :tab="t('account_create')">
-        <CreateAccount />
-      </n-tab-pane>
-      <n-tab-pane name="account_settings" :tab="t('account_settings')">
-        <AccountSettings />
-      </n-tab-pane>
-      <n-tab-pane name="user_management" :tab="t('user_management')">
-        <UserManagement />
-      </n-tab-pane>
-      <n-tab-pane name="user_settings" :tab="t('user_settings')">
-        <UserSettings />
+      <n-tab-pane name="user" :tab="t('user')">
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="user_management" :tab="t('user_management')">
+            <UserManagement />
+          </n-tab-pane>
+          <n-tab-pane name="user_settings" :tab="t('user_settings')">
+            <UserSettings />
+          </n-tab-pane>
+        </n-tabs>
      </n-tab-pane>
      <n-tab-pane name="mails" :tab="t('mails')">
-        <Mails />
-      </n-tab-pane>
-      <n-tab-pane name="unknow" :tab="t('unknow')">
-        <MailsUnknow />
-      </n-tab-pane>
-      <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
-        <SenderAccess />
+        <n-tabs type="bar" animated>
+          <n-tab-pane name="mails" :tab="t('mails')">
+            <Mails />
+          </n-tab-pane>
+          <n-tab-pane name="unknow" :tab="t('unknow')">
+            <MailsUnknow />
+          </n-tab-pane>
+        </n-tabs>
      </n-tab-pane>
      <n-tab-pane name="sendBox" :tab="t('sendBox')">
        <SendBox />
      </n-tab-pane>
+      <n-tab-pane name="telegram" :tab="t('telegram')">
+        <Telegram />
+      </n-tab-pane>
      <n-tab-pane name="statistics" :tab="t('statistics')">
        <Statistics />
      </n-tab-pane>
@@ -127,6 +155,9 @@ onMounted(async () => {
      <n-tab-pane name="appearance" :tab="t('appearance')">
        <Appearance />
      </n-tab-pane>
+      <n-tab-pane name="about" :tab="t('about')">
+        <About />
+      </n-tab-pane>
    </n-tabs>
  </div>
 </template>
--- a/frontend/src/views/Footer.vue
+++ b/frontend/src/views/Footer.vue
@@ -1,11 +1,10 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-const { localeCache, openSettings } = useGlobalState()
+const { openSettings } = useGlobalState()


 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            copyright: "Copyright"
--- a/frontend/src/views/Header.vue
+++ b/frontend/src/views/Header.vue
@@ -1,6 +1,7 @@
 <script setup>
 import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useHead } from '@unhead/vue'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import {
@@ -11,11 +12,13 @@ import { GithubAlt, Language, User, Home } from '@vicons/fa'

 import { useGlobalState } from '../store'
 import { api } from '../api'
+import { getRouterPathWithLang } from '../utils'
+
 const message = useMessage()

 const {
-    localeCache, toggleDark, isDark, openSettings,
-    showAuth, adminAuth, auth, loading
+    toggleDark, isDark, isTelegram,
+    showAuth, adminAuth, auth, loading, openSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -36,13 +39,15 @@ const authFunc = async () => {
    }
 }

-const changeLocale = (locale) => {
-    localeCache.value = locale;
-    location.reload()
+const changeLocale = async (lang) => {
+    if (lang == 'zh') {
+        await router.push(route.fullPath.replace('/en', ''));
+    } else {
+        await router.push(`/${lang}${route.fullPath}`);
+    }
 }

-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
            title: 'Cloudflare Temp Email',
@@ -69,6 +74,8 @@ const { t } = useI18n({
    }
 });

+const version = import.meta.env.PACKAGE_VERSION ? `v${import.meta.env.PACKAGE_VERSION}` : "";
+
 const menuOptions = computed(() => [
    {
        label: () => h(NButton,
@@ -77,7 +84,10 @@ const menuOptions = computed(() => [
                size: "small",
                type: menuValue.value == "home" ? "primary" : "default",
                style: "width: 100%",
-                onClick: async () => { await router.push('/'); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/', locale.value));
+                    showMobileMenu.value = false;
+                }
            },
            {
                default: () => t('home'),
@@ -93,7 +103,10 @@ const menuOptions = computed(() => [
                size: "small",
                type: menuValue.value == "user" ? "primary" : "default",
                style: "width: 100%",
-                onClick: async () => { await router.push("/user"); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang("/user", locale.value));
+                    showMobileMenu.value = false;
+                }
            },
            {
                default: () => t('user'),
@@ -101,6 +114,7 @@ const menuOptions = computed(() => [
            }
        ),
        key: "user",
+        show: !isTelegram.value
    },
    {
        label: () => h(
@@ -110,7 +124,10 @@ const menuOptions = computed(() => [
                size: "small",
                type: menuValue.value == "admin" ? "primary" : "default",
                style: "width: 100%",
-                onClick: async () => { await router.push('/admin'); showMobileMenu.value = false; }
+                onClick: async () => {
+                    await router.push(getRouterPathWithLang('/admin', locale.value));
+                    showMobileMenu.value = false;
+                }
            },
            {
                default: () => "Admin",
@@ -145,13 +162,13 @@ const menuOptions = computed(() => [
                text: true,
                size: "small",
                style: "width: 100%",
-                onClick: () => {
-                    localeCache.value == 'zh' ? changeLocale('en') : changeLocale('zh');
+                onClick: async () => {
+                    locale.value == 'zh' ? await changeLocale('en') : await changeLocale('zh');
                    showMobileMenu.value = false;
                }
            },
            {
-                default: () => localeCache.value == 'zh' ? "English" : "中文",
+                default: () => locale.value == 'zh' ? "English" : "中文",
                icon: () => h(
                    NIcon, { component: Language }
                )
@@ -171,7 +188,7 @@ const menuOptions = computed(() => [
                href: "https://github.com/dreamhunter2333/cloudflare_temp_email",
            },
            {
-                default: () => import.meta.env.VITE_VERSION || "Github",
+                default: () => version || "Github",
                icon: () => h(NIcon, { component: GithubAlt })
            }
        ),
@@ -179,6 +196,31 @@ const menuOptions = computed(() => [
    }
 ]);

+useHead({
+    title: () => openSettings.value.title || t('title'),
+    meta: [
+        { name: "description", content: openSettings.value.description || t('title') },
+    ]
+});
+
+const logoClickCount = ref(0);
+const logoClick = async () => {
+    if (route.path.includes("admin")) {
+        logoClickCount.value = 0;
+        return;
+    }
+    if (logoClickCount.value >= 5) {
+        logoClickCount.value = 0;
+        message.info("Change to admin Page");
+        await router.push(getRouterPathWithLang('/admin', locale.value));
+    } else {
+        logoClickCount.value++;
+    }
+    if (logoClickCount.value > 0) {
+        message.info(`Click ${5 - logoClickCount.value + 1} times to enter the admin page`);
+    }
+}
+
 onMounted(async () => {
    await api.getOpenSettings(message);
 });
@@ -188,10 +230,12 @@ onMounted(async () => {
    <div>
        <n-page-header>
            <template #title>
-                <h3>{{ t('title') }}</h3>
+                <h3>{{ openSettings.title || t('title') }}</h3>
            </template>
            <template #avatar>
-                <n-avatar style="margin-left: 10px;" src="/logo.png" />
+                <div @click="logoClick">
+                    <n-avatar style="margin-left: 10px;" src="/logo.png" />
+                </div>
            </template>
            <template #extra>
                <n-space>
--- a/frontend/src/views/Index.vue
+++ b/frontend/src/views/Index.vue
@@ -1,4 +1,5 @@
 <script setup>
+import { defineAsyncComponent } from 'vue'
 import { useI18n } from 'vue-i18n'

 import { useGlobalState } from '../store'
@@ -6,15 +7,18 @@ import { api } from '../api'

 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 SendBox from './index/SendBox.vue';
-import SendMail from './index/SendMail.vue';
 import AccountSettings from './index/AccountSettings.vue';
+import Webhook from './index/Webhook.vue';
+import Attachment from './index/Attachment.vue';
+import About from './common/About.vue';

-const { localeCache, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
+const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const message = useMessage()

 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
  messages: {
    en: {
      mailbox: 'Mail Box',
@@ -22,6 +26,9 @@ const { t } = useI18n({
      sendmail: 'Send Mail',
      auto_reply: 'Auto Reply',
      accountSettings: 'Account Settings',
+      about: 'About',
+      s3Attachment: 'S3 Attachment',
+      saveToS3Success: 'save to s3 success',
    },
    zh: {
      mailbox: '收件箱',
@@ -29,6 +36,9 @@ const { t } = useI18n({
      sendmail: '发送邮件',
      auto_reply: '自动回复',
      accountSettings: '账户设置',
+      about: '关于',
+      s3Attachment: 'S3附件',
+      saveToS3Success: '保存到s3成功',
    }
  }
 });
@@ -40,6 +50,34 @@ const fetchMailData = async (limit, offset) => {
 const deleteMail = async (curMailId) => {
  await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
 };
+
+const deleteSenboxMail = async (curMailId) => {
+  await api.fetch(`/api/sendbox/${curMailId}`, { method: 'DELETE' });
+};
+
+const fetchSenboxData = async (limit, offset) => {
+  return await api.fetch(`/api/sendbox?limit=${limit}&offset=${offset}`);
+};
+
+const saveToS3 = async (mail_id, filename, blob) => {
+  try {
+    const { url } = await api.fetch(`/api/attachment/put_url`, {
+      method: 'POST',
+      body: JSON.stringify({ key: `${mail_id}/${filename}` })
+    });
+    // upload to s3 by formdata
+    const formData = new FormData();
+    formData.append(filename, blob);
+    await fetch(url, {
+      method: 'PUT',
+      body: formData
+    });
+    message.success(t('saveToS3Success'));
+  } catch (error) {
+    console.error(error);
+    message.error(error.message || "save to s3 error");
+  }
+}
 </script>

 <template>
@@ -47,11 +85,13 @@ const deleteMail = async (curMailId) => {
    <AddressBar />
    <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
      <n-tab-pane name="mailbox" :tab="t('mailbox')">
-        <MailBox :showEMailTo="false" :showReply="true" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
-          :fetchMailData="fetchMailData" :deleteMail="deleteMail" />
+        <MailBox :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 />
+        <SendBox :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+          :deleteMail="deleteSenboxMail" />
      </n-tab-pane>
      <n-tab-pane name="sendmail" :tab="t('sendmail')">
        <SendMail />
@@ -62,6 +102,15 @@ const deleteMail = async (curMailId) => {
      <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('webhook')">
+        <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>
 </template>
--- a/frontend/src/views/User.vue
+++ b/frontend/src/views/User.vue
@@ -9,11 +9,10 @@ import UserBar from './user/UserBar.vue';
 import BindAddress from './user/BindAddress.vue';

 const {
-    localeCache, userTab, globalTabplacement, userSettings
+    userTab, globalTabplacement, userSettings
 } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            address_management: 'Address Management',
--- a/frontend/src/views/admin/Account.vue
+++ b/frontend/src/views/admin/Account.vue
@@ -9,13 +9,12 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'

 const {
-    localeCache, adminAuth, showAdminAuth, loading,
+    adminAuth, showAdminAuth, loading,
    adminTab, adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            name: 'Name',
@@ -95,6 +94,7 @@ const deleteEmail = async () => {

 const fetchData = async () => {
    try {
+        addressQuery.value = addressQuery.value.trim()
        const { results, count: addressCount } = await api.fetch(
            `/admin/address`
            + `?limit=${pageSize.value}`
@@ -261,7 +261,7 @@ onMounted(async () => {
 </script>

 <template>
-    <div>
+    <div style="margin-top: 10px;">
        <n-modal v-model:show="showEmailCredential" preset="dialog" title="Dialog">
            <template #header>
                <div>{{ t("addressCredential") }}</div>
@@ -269,7 +269,7 @@ onMounted(async () => {
            <span>
                <p>{{ t("addressCredentialTip") }}</p>
            </span>
-            <n-card>
+            <n-card :bordered="false" embedded>
                <b>{{ curEmailCredential }}</b>
            </n-card>
            <template #action>
@@ -284,7 +284,8 @@ onMounted(async () => {
            </template>
        </n-modal>
        <n-input-group>
-            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')" />
+            <n-input v-model:value="addressQuery" clearable :placeholder="t('addressQueryTip')"
+                @keydown.enter="fetchData" />
            <n-button @click="fetchData" type="primary" tertiary>
                {{ t('query') }}
            </n-button>
@@ -297,7 +298,7 @@ onMounted(async () => {
                </template>
            </n-pagination>
        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
    </div>
 </template>

--- a/frontend/src/views/admin/AccountSettings.vue
+++ b/frontend/src/views/admin/AccountSettings.vue
@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            save: 'Save',
@@ -17,6 +16,7 @@ const { t } = useI18n({
            address_block_list: 'Address Block Keywords for Users(Admin can skip)',
            address_block_list_placeholder: 'Please enter the keywords you want to block',
            send_address_block_list: 'Address Block Keywords for send email',
+            verified_address_list: 'Verified Address List(Can send email by cf internal api)',
        },
        zh: {
            save: '保存',
@@ -24,18 +24,21 @@ const { t } = useI18n({
            address_block_list: '邮件地址屏蔽关键词(管理员可跳过检查)',
            address_block_list_placeholder: '请输入您想要屏蔽的关键词',
            send_address_block_list: '发送邮件地址屏蔽关键词',
+            verified_address_list: '已验证地址列表(可通过 cf 内部 api 发送邮件)',
        }
    }
 });

 const addressBlockList = ref([])
 const sendAddressBlockList = ref([])
+const verifiedAddressList = ref([])

 const fetchData = async () => {
    try {
        const res = await api.fetch(`/admin/account_settings`)
        addressBlockList.value = res.blockList || []
        sendAddressBlockList.value = res.sendBlockList || []
+        verifiedAddressList.value = res.verifiedAddressList || []
    } catch (error) {
        message.error(error.message || "error");
    }
@@ -47,7 +50,8 @@ const save = async () => {
            method: 'POST',
            body: JSON.stringify({
                blockList: addressBlockList.value || [],
-                sendBlockList: sendAddressBlockList.value || []
+                sendBlockList: sendAddressBlockList.value || [],
+                verifiedAddressList: verifiedAddressList.value || []
            })
        })
        message.success(t('successTip'))
@@ -64,7 +68,7 @@ onMounted(async () => {

 <template>
    <div class="center">
-        <n-card style="max-width: 600px;">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
            <n-form-item-row :label="t('address_block_list')">
                <n-select v-model:value="addressBlockList" filterable multiple tag
                    :placeholder="t('address_block_list_placeholder')" />
@@ -73,6 +77,10 @@ onMounted(async () => {
                <n-select v-model:value="sendAddressBlockList" filterable multiple tag
                    :placeholder="t('address_block_list_placeholder')" />
            </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')" />
+            </n-form-item-row>
            <n-button @click="save" type="primary" block :loading="loading">
                {{ t('save') }}
            </n-button>
--- a/frontend/src/views/admin/CreateAccount.vue
+++ b/frontend/src/views/admin/CreateAccount.vue
@@ -6,12 +6,11 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'

 const {
-    localeCache, loading, openSettings,
+    loading, openSettings,
 } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            address: 'Address',
@@ -72,11 +71,11 @@ onMounted(async () => {
    <div class="center">
        <n-modal v-model:show="showReultModal" preset="dialog" :title="t('addressCredential')">
            <p>{{ t('addressCredential') }}</p>
-            <n-card>
+            <n-card :bordered="false" embedded>
                <b>{{ result }}</b>
            </n-card>
        </n-modal>
-        <n-card style="max-width: 600px;">
+        <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-form-item-row>
--- a/frontend/src/views/admin/Mails.vue
+++ b/frontend/src/views/admin/Mails.vue
@@ -7,12 +7,11 @@ import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';

 const {
-    localeCache, adminAuth, showAdminAuth,
+    adminAuth, showAdminAuth,
    adminMailTabAddress
 } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            addressQueryTip: 'Leave blank to query all addresses',
@@ -30,12 +29,9 @@ const { t } = useI18n({
 const mailBoxKey = ref("")
 const mailKeyword = ref("")

-watch([adminMailTabAddress, mailKeyword], () => {
+const queryMail = () => {
    adminMailTabAddress.value = adminMailTabAddress.value.trim();
    mailKeyword.value = mailKeyword.value.trim();
-});
-
-const queryMail = () => {
    mailBoxKey.value = Date.now();
 }

@@ -49,6 +45,10 @@ const fetchMailData = async (limit, offset) => {
    );
 }

+const deleteMail = async (curMailId) => {
+    await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
+};
+
 onMounted(async () => {
    if (!adminAuth.value) {
        showAdminAuth.value = true;
@@ -58,14 +58,17 @@ onMounted(async () => {
 </script>

 <template>
-    <div>
+    <div style="margin-top: 10px;">
        <n-input-group>
-            <n-input v-model:value="adminMailTabAddress" :placeholder="t('addressQueryTip')" />
-            <n-input v-model:value="mailKeyword" :placeholder="t('keywordQueryTip')" />
+            <n-input v-model:value="adminMailTabAddress" :placeholder="t('addressQueryTip')"
+                @keydown.enter="queryMail" />
+            <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>
-        <MailBox :key="mailBoxKey" :enableUserDeleteEmail="false" :fetchMailData="fetchMailData" />
+        <div style="margin-top: 10px;"></div>
+        <MailBox :key="mailBoxKey" :enableUserDeleteEmail="true" :fetchMailData="fetchMailData"
+            :deleteMail="deleteMail" />
    </div>
 </template>
--- a/frontend/src/views/admin/MailsUnknow.vue
+++ b/frontend/src/views/admin/MailsUnknow.vue
@@ -15,6 +15,10 @@ const fetchMailUnknowData = async (limit, offset) => {
    );
 }

+const deleteMail = async (curMailId) => {
+    await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
+};
+
 onMounted(async () => {
    if (!adminAuth.value) {
        showAdminAuth.value = true;
@@ -24,7 +28,7 @@ onMounted(async () => {
 </script>

 <template>
-    <div v-if="adminAuth">
-        <MailBox :enableUserDeleteEmail="false" :fetchMailData="fetchMailUnknowData" />
+    <div v-if="adminAuth" style="margin-top: 10px;">
+        <MailBox :enableUserDeleteEmail="true" :fetchMailData="fetchMailUnknowData" :deleteMail="deleteMail" />
    </div>
 </template>
--- a/frontend/src/views/admin/Maintenance.vue
+++ b/frontend/src/views/admin/Maintenance.vue
@@ -6,7 +6,7 @@ import { CleaningServicesFilled } from '@vicons/material'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, adminAuth, showAdminAuth } = useGlobalState()
+const { adminAuth, showAdminAuth } = useGlobalState()
 const message = useMessage()
 const cleanupModel = ref({
    enableMailsAutoCleanup: false,
@@ -20,14 +20,12 @@ const cleanupModel = ref({
 })

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
-            tip: 'Please input the cleanup days',
-            mailBoxLabel: 'Clean up days for mailbox',
-            mailUnknowLabel: "Clean up days for unknow receiver",
-            addressUnActiveLabel: "Clean up days for unactive address",
-            sendBoxLabel: "Clean up days for sendbox",
+            tip: 'Please input the days',
+            mailBoxLabel: 'Cleanup the inbox before n days',
+            mailUnknowLabel: "Cleanup the unknow mail before n days",
+            sendBoxLabel: "Cleanup the sendbox before n days",
            cleanupNow: "Cleanup now",
            autoCleanup: "Auto cleanup",
            cleanupSuccess: "Cleanup success",
@@ -35,11 +33,10 @@ const { t } = useI18n({
            cronTip: "Enable cron cleanup, need to configure [crons] in worker, please refer to the document",
        },
        zh: {
-            tip: '请输入清理天数',
-            mailBoxLabel: '收件箱清理天数',
-            mailUnknowLabel: "无收件人邮件清理天数",
-            addressUnActiveLabel: "未活跃地址清理天数",
-            sendBoxLabel: "发件箱清理天数",
+            tip: '请输入天数',
+            mailBoxLabel: '清理 n 天前的收件箱',
+            mailUnknowLabel: "清理 n 天前的无收件人邮件",
+            sendBoxLabel: "清理 n 天前的发件箱",
            autoCleanup: "自动清理",
            cleanupSuccess: "清理成功",
            cleanupNow: "立即清理",
@@ -94,8 +91,8 @@ onMounted(async () => {

 <template>
    <div class="center">
-        <n-card>
-            <n-alert :show-icon="false">
+        <n-card :bordered="false" embedded>
+            <n-alert :show-icon="false" :bordered="false">
                <span>{{ t('cronTip') }}</span>
            </n-alert>
            <n-form :model="cleanupModel">
@@ -123,19 +120,7 @@ onMounted(async () => {
                        {{ t('cleanupNow') }}
                    </n-button>
                </n-form-item-row>
-                <n-form-item-row :label="t('addressUnActiveLabel')">
-                    <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('address', cleanupModel.cleanAddressDays)">
-                        <template #icon>
-                            <n-icon :component="CleaningServicesFilled" />
-                        </template>
-                        {{ t('cleanupNow') }}
-                    </n-button>
-                </n-form-item-row>
-                <n-form-item-row :label="t('mailBoxLabel')">
+                <n-form-item-row :label="t('sendBoxLabel')">
                    <n-checkbox v-model:checked="cleanupModel.enableSendBoxAutoCleanup">
                        {{ t('autoCleanup') }}
                    </n-checkbox>
--- a/frontend/src/views/admin/SendBox.vue
+++ b/frontend/src/views/admin/SendBox.vue
@@ -1,153 +1,48 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
 import { useI18n } from 'vue-i18n'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import SendBox from '../../components/SendBox.vue';

-const { localeCache, adminAuth, adminSendBoxTabAddress, showAdminAuth } = useGlobalState()
-const message = useMessage()
+const { adminSendBoxTabAddress } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
-            address: 'Address',
-            success: 'Success',
-            to_mail: 'To Mail',
-            subject: 'Subject',
-            created_at: 'Created At',
-            action: 'Action',
            query: 'Query',
-            itemCount: 'itemCount',
-            view: 'View',
+            queryTip: 'Please input address to query, leave blank to query all',
        },
        zh: {
-            address: '地址',
-            success: '成功',
-            to_mail: '收件人邮箱',
-            subject: '主题',
-            created_at: '创建时间',
-            action: '操作',
            query: '查询',
-            itemCount: '总数',
-            view: '查看',
+            queryTip: '请输入地址查询, 留空则查询所有',
        }
    }
 });
-const data = ref([])
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)

-const curRow = ref({})
-const showModal = ref(false)
-
-const fetchData = async () => {
-    try {
-        const { results, count: addressCount } = await api.fetch(
-            `/admin/sendbox`
-            + `?limit=${pageSize.value}`
-            + `&offset=${(page.value - 1) * pageSize.value}`
-            + (adminSendBoxTabAddress.value ? `&address=${adminSendBoxTabAddress.value}` : '')
-        );
-        data.value = results.map((item) => {
-            try {
-                const data = JSON.parse(item.raw);
-                item.to_mail = data?.personalizations?.map(
-                    (p) => p.to?.map((t) => t.email).join(',')
-                ).join(';');
-                item.subject = data.subject;
-                item.raw = JSON.stringify(data, null, 2);
-            } catch (error) {
-                console.log(error);
-            }
-            return item;
-        });
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
+const fetchData = async (limit, offset) => {
+    adminSendBoxTabAddress.value = adminSendBoxTabAddress.value.trim();
+    return await api.fetch(
+        `/admin/sendbox?limit=${limit}&offset=${offset}`
+        + (adminSendBoxTabAddress.value ? `&address=${adminSendBoxTabAddress.value}` : '')
+    );
 }

-const columns = [
-    {
-        title: "ID",
-        key: "id"
-    },
-    {
-        title: t('address'),
-        key: "address"
-    },
-    {
-        title: t('to_mail'),
-        key: "to_mail"
-    },
-    {
-        title: t('subject'),
-        key: "subject"
-    },
-    {
-        title: t('created_at'),
-        key: "created_at"
-    },
-    {
-        title: t('action'),
-        key: 'actions',
-        render(row) {
-            return h('div', [
-                h(NButton,
-                    {
-                        type: 'success',
-                        tertiary: true,
-                        onClick: () => {
-                            showModal.value = true;
-                            curRow.value = row;
-                        }
-                    },
-                    { default: () => t('view') }
-                )
-            ])
-        }
-    }
-]
-
-watch([page, pageSize], async () => {
-    await fetchData()
-})
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-    await fetchData()
-})
+const deleteSenboxMail = async (curMailId) => {
+    await api.fetch(`/admin/sendbox/${curMailId}`, { method: 'DELETE' });
+};
 </script>

 <template>
    <div>
-        <n-modal v-model:show="showModal" preset="dialog" style="width: 100%;">
-            <pre style="overflow: auto;">{{ curRow.raw }}</pre>
-        </n-modal>
        <n-input-group>
-            <n-input v-model:value="adminSendBoxTabAddress" />
+            <n-input v-model:value="adminSendBoxTabAddress" :placeholder="t('queryTip')" @keydown.enter="fetchData" />
            <n-button @click="fetchData" type="primary" tertiary>
                {{ t('query') }}
            </n-button>
        </n-input-group>
-        <div style="display: inline-block;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
-                :page-sizes="[20, 50, 100]" show-size-picker>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-            </n-pagination>
-        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
+        <SendBox style="margin-top: 10px;" :enableUserDeleteEmail="true" :deleteMail="deleteSenboxMail"
+            :fetchMailData="fetchData" :showEMailFrom="true" />
    </div>
 </template>

--- a/frontend/src/views/admin/SenderAccess.vue
+++ b/frontend/src/views/admin/SenderAccess.vue
@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
  messages: {
    en: {
      address: 'Address',
@@ -18,6 +17,8 @@ const { t } = useI18n({
      enable: 'Enable',
      disable: 'Disable',
      modify: 'Modify',
+      delete: 'Delete',
+      deleteTip: 'Are you sure to delete this?',
      created_at: 'Created At',
      action: 'Action',
      itemCount: 'itemCount',
@@ -33,6 +34,8 @@ const { t } = useI18n({
      enable: '启用',
      disable: '禁用',
      modify: '修改',
+      delete: '删除',
+      deleteTip: '确定删除吗？',
      created_at: '创建时间',
      action: '操作',
      itemCount: '总数',
@@ -76,6 +79,7 @@ const updateData = async () => {

 const fetchData = async () => {
  try {
+    addressQuery.value = addressQuery.value.trim();
    const { results, count: addressCount } = await api.fetch(
      `/admin/address_sender`
      + `?limit=${pageSize.value}`
@@ -135,7 +139,25 @@ const columns = [
            }
          },
          { default: () => t('modify') }
-        )
+        ),
+        h(NPopconfirm,
+          {
+            onPositiveClick: async () => {
+              await api.fetch(`/admin/address_sender/${row.id}`, { method: 'DELETE' });
+              await fetchData();
+            }
+          },
+          {
+            trigger: () => h(NButton,
+              {
+                tertiary: true,
+                type: "error",
+              },
+              { default: () => t('delete') }
+            ),
+            default: () => t('deleteTip')
+          }
+        ),
      ])
    }
  }
@@ -171,7 +193,7 @@ onMounted(async () => {
      </template>
    </n-modal>
    <n-input-group>
-      <n-input v-model:value="addressQuery" />
+      <n-input v-model:value="addressQuery" @keydown.enter="fetchData" />
      <n-button @click="fetchData" type="primary" tertiary>
        {{ t('query') }}
      </n-button>
@@ -184,7 +206,7 @@ onMounted(async () => {
        </template>
      </n-pagination>
    </div>
-    <n-data-table :columns="columns" :data="data" :bordered="false" />
+    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
  </div>
 </template>

--- a/frontend/src/views/admin/Statistics.vue
+++ b/frontend/src/views/admin/Statistics.vue
@@ -7,21 +7,24 @@ import { SendOutlined } from '@vicons/material'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, adminAuth } = useGlobalState()
+const { adminAuth } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
-            userCount: 'Account Count',
-            activeUser: '7 days Active Mail Account',
+            userCount: 'User Count',
+            addressCount: 'Address Count',
+            activeAddressCount7days: '7 days Active Address Count',
+            activeAddressCount30days: '30 days Active Address Count',
            mailCount: 'Mail Count',
            sendMailCount: 'Send Mail Count'
        },
        zh: {
-            userCount: '地址总数',
-            activeUser: '周活跃邮箱地址',
+            userCount: '用户总数',
+            addressCount: '邮箱地址总数',
+            activeAddressCount7days: '7天活跃邮箱地址总数',
+            activeAddressCount30days: '30天活跃邮箱地址总数',
            mailCount: '邮件总数',
            sendMailCount: '发送邮件总数'
        }
@@ -29,21 +32,27 @@ const { t } = useI18n({
 });

 const statistics = ref({
+    addressCount: 0,
    userCount: 0,
    mailCount: 0,
-    activeUserCount7days: 0,
+    activeAddressCount7days: 0,
+    activeAddressCount30days: 0,
    sendMailCount: 0,
 })

 const fetchStatistics = async () => {
    try {
        const {
-            userCount, activeUserCount7days, mailCount, sendMailCount
+            userCount, mailCount, sendMailCount,
+            addressCount, activeAddressCount7days,
+            activeAddressCount30days,
        } = await api.fetch(`/admin/statistics`);
        statistics.value.mailCount = mailCount || 0;
-        statistics.value.userCount = userCount || 0;
-        statistics.value.activeUserCount7days = activeUserCount7days || 0;
        statistics.value.sendMailCount = sendMailCount || 0;
+        statistics.value.userCount = userCount || 0;
+        statistics.value.addressCount = addressCount || 0;
+        statistics.value.activeAddressCount7days = activeAddressCount7days || 0;
+        statistics.value.activeAddressCount30days = activeAddressCount30days || 0;
    } catch (error) {
        console.log(error)
        message.error(error.message || "error");
@@ -59,36 +68,63 @@ onMounted(async () => {
 </script>

 <template>
-    <n-card>
-        <n-row>
-            <n-col :span="6">
-                <n-statistic :label="t('userCount')" :value="statistics.userCount">
-                    <template #prefix>
-                        <n-icon :component="User" />
-                    </template>
-                </n-statistic>
-            </n-col>
-            <n-col :span="6">
-                <n-statistic :label="t('activeUser')" :value="statistics.activeUserCount7days">
-                    <template #prefix>
-                        <n-icon :component="UserCheck" />
-                    </template>
-                </n-statistic>
-            </n-col>
-            <n-col :span="6">
-                <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
-                    <template #prefix>
-                        <n-icon :component="MailBulk" />
-                    </template>
-                </n-statistic>
-            </n-col>
-            <n-col :span="6">
-                <n-statistic :label="t('sendMailCount')" :value="statistics.sendMailCount">
-                    <template #prefix>
-                        <n-icon :component="SendOutlined" />
-                    </template>
-                </n-statistic>
-            </n-col>
-        </n-row>
-    </n-card>
+    <div>
+        <n-card :bordered="false" embedded>
+            <n-row>
+
+                <n-col :span="8">
+                    <n-statistic :label="t('addressCount')" :value="statistics.addressCount">
+                        <template #prefix>
+                            <n-icon :component="User" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('activeAddressCount7days')" :value="statistics.activeAddressCount7days">
+                        <template #prefix>
+                            <n-icon :component="UserCheck" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('activeAddressCount30days')" :value="statistics.activeAddressCount30days">
+                        <template #prefix>
+                            <n-icon :component="UserCheck" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+            </n-row>
+        </n-card>
+        <n-card :bordered="false" embedded>
+            <n-row>
+                <n-col :span="8">
+                    <n-statistic :label="t('userCount')" :value="statistics.userCount">
+                        <template #prefix>
+                            <n-icon :component="User" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('mailCount')" :value="statistics.mailCount">
+                        <template #prefix>
+                            <n-icon :component="MailBulk" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+                <n-col :span="8">
+                    <n-statistic :label="t('sendMailCount')" :value="statistics.sendMailCount">
+                        <template #prefix>
+                            <n-icon :component="SendOutlined" />
+                        </template>
+                    </n-statistic>
+                </n-col>
+            </n-row>
+        </n-card>
+    </div>
 </template>
+
+<style scoped>
+.n-card {
+    margin-bottom: 20px;
+}
+</style>
--- a/frontend/src/views/admin/Telegram.vue
+++ b/frontend/src/views/admin/Telegram.vue
@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            init: 'Init',
+            successTip: 'Success',
+            status: 'Check Status',
+            enableTelegramAllowList: 'Enable Telegram Allow List(Manually input user ID)',
+            enable: 'Enable',
+            telegramAllowList: 'Telegram Allow List',
+            save: 'Save',
+            miniAppUrl: 'Telegram Mini App URL',
+            enableGlobalMailPush: 'Enable Global Mail Push(Manually input telegram user ID)',
+            globalMailPushList: 'Global Mail Push List',
+        },
+        zh: {
+            init: '初始化',
+            successTip: '成功',
+            status: '查看状态',
+            enableTelegramAllowList: '启用 Telegram 白名单(手动输入用户 ID)',
+            enable: '启用',
+            telegramAllowList: 'Telegram 白名单',
+            save: '保存',
+            miniAppUrl: '电报小程序 URL(请输入你部署的电报小程序网页地址)',
+            enableGlobalMailPush: '启用全局邮件推送(手动输入邮箱管理员的 telegram 用户 ID)',
+            globalMailPushList: '全局邮件推送用户列表',
+        }
+    }
+});
+
+const status = ref({
+    fetched: false,
+})
+
+const fetchStatus = async () => {
+    try {
+        const res = await api.fetch(`/admin/telegram/status`)
+        Object.assign(status.value, res)
+        status.value.fetched = true
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const init = async () => {
+    try {
+        await api.fetch(`/admin/telegram/init`, {
+            method: 'POST',
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+class TelegramSettings {
+    enableAllowList: boolean;
+    allowList: string[];
+    miniAppUrl: string;
+    enableGlobalMailPush: boolean;
+    globalMailPushList: string[];
+
+    constructor(
+        enableAllowList: boolean, allowList: string[], miniAppUrl: string,
+        enableGlobalMailPush: boolean, globalMailPushList: string[]
+    ) {
+        this.enableAllowList = enableAllowList;
+        this.allowList = allowList;
+        this.miniAppUrl = miniAppUrl;
+        this.enableGlobalMailPush = enableGlobalMailPush;
+        this.globalMailPushList = globalMailPushList;
+    }
+}
+
+const settings = ref(new TelegramSettings(false, [], '', false, []))
+
+const getSettings = async () => {
+    try {
+        const res = await api.fetch(`/admin/telegram/settings`)
+        Object.assign(settings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    try {
+        await api.fetch(`/admin/telegram/settings`, {
+            method: 'POST',
+            body: JSON.stringify(settings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await getSettings();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+            <n-card :bordered="false" embedded>
+                <n-form-item-row :label="t('enableTelegramAllowList')">
+                    <n-input-group>
+                        <n-checkbox v-model:checked="settings.enableAllowList" style="width: 20%;">
+                            {{ t('enable') }}
+                        </n-checkbox>
+                        <n-select v-model:value="settings.allowList" filterable multiple tag style="width: 80%;"
+                            :placeholder="t('telegramAllowList')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <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')" />
+                    </n-input-group>
+                </n-form-item-row>
+                <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>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>
--- a/frontend/src/views/admin/UserManagement.vue
+++ b/frontend/src/views/admin/UserManagement.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
+import { ref, h, onMounted, watch, computed } from 'vue';
 import { useI18n } from 'vue-i18n'
-import { NMenu, NButton, NBadge } from 'naive-ui';
+import { NMenu, NButton, NBadge, NTag } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { hashPassword } from '../../utils';

-const { localeCache, loading } = useGlobalState()
+const { loading, openSettings } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            success: 'Success',
            user_email: 'User Email',
+            role: 'Role',
            address_count: 'Address Count',
            created_at: 'Created At',
            actions: 'Actions',
@@ -30,10 +30,15 @@ const { t } = useI18n({
            createUser: 'Create User',
            email: 'Email',
            password: 'Password',
+            changeRole: 'Change Role',
+            prefix: 'Prefix',
+            domains: 'Domains',
+            roleDonotExist: 'Current Role does not exist',
        },
        zh: {
            success: '成功',
            user_email: '用户邮箱',
+            role: '角色',
            address_count: '地址数量',
            created_at: '创建时间',
            actions: '操作',
@@ -47,6 +52,10 @@ const { t } = useI18n({
            createUser: '创建用户',
            email: '邮箱',
            password: '密码',
+            changeRole: '更改角色',
+            prefix: '前缀',
+            domains: '域名',
+            roleDonotExist: '当前角色不存在',
        }
    }
 });
@@ -65,9 +74,31 @@ const user = ref({
    email: "",
    password: ""
 })
+const showChangeRole = ref(false)
+const userRoles = ref([])
+const curUserRole = ref('')
+const userRolesOptions = computed(() => {
+    return userRoles.value.map(role => {
+        return {
+            label: role.role,
+            value: role.role
+        }
+    });
+})
+
+const fetchUserRoles = async () => {
+    try {
+        const results = await api.fetch(`/admin/user_roles`);
+        userRoles.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}

 const fetchData = async () => {
    try {
+        userQuery.value = userQuery.value.trim()
        const { results, count: userCount } = await api.fetch(
            `/admin/users`
            + `?limit=${pageSize.value}`
@@ -139,6 +170,24 @@ const deleteUser = async () => {
    }
 }

+const changeRole = async () => {
+    try {
+        await api.fetch(`/admin/user_roles`, {
+            method: "POST",
+            body: JSON.stringify({
+                user_id: curUserId.value,
+                role_text: curUserRole.value
+            })
+        });
+        message.success(t('success'));
+        showChangeRole.value = false;
+        await fetchData();
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
 const columns = [
    {
        title: "ID",
@@ -148,6 +197,19 @@ const columns = [
        title: t('user_email'),
        key: "user_email"
    },
+    {
+        title: t('role'),
+        key: "role_text",
+        render(row) {
+            if (!row.role_text) return null;
+            return h(NTag, {
+                bordered: false,
+                type: "info"
+            }, {
+                default: () => row.role_text
+            })
+        }
+    },
    {
        title: t('address_count'),
        key: "address_count",
@@ -177,6 +239,19 @@ const columns = [
                            icon: () => h(MenuFilled),
                            key: "action",
                            children: [
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                curUserRole.value = row.role_text;
+                                                showChangeRole.value = true;
+                                            }
+                                        },
+                                        { default: () => t('changeRole') }
+                                    ),
+                                },
                                {
                                    label: () => h(NButton,
                                        {
@@ -213,17 +288,34 @@ const columns = [
    }
 ]

+const getRolePrefix = (role) => {
+    const res = userRoles.value.find(r => r.role === role)?.prefix;
+    if (res === undefined || res === null) return openSettings.value.prefix;
+    return res;
+}
+
+const getRoleDomains = (role) => {
+    const res = userRoles.value.find(r => r.role === role)?.domains;
+    if (res === undefined || res === null || res.length == 0) return openSettings.value.defaultDomains;
+    return res;
+}
+
+const roleDonotExist = computed(() => {
+    return curUserRole.value && !userRoles.value.some(r => r.role === curUserRole.value);
+})
+
 watch([page, pageSize], async () => {
    await fetchData()
 })

 onMounted(async () => {
-    await fetchData()
+    await fetchUserRoles();
+    await fetchData();
 })
 </script>

 <template>
-    <div>
+    <div style="margin-top: 10px;">
        <n-modal v-model:show="showCreateUser" preset="dialog" :title="t('createUser')">
            <n-form>
                <n-form-item-row :label="t('email')" required>
@@ -257,8 +349,21 @@ onMounted(async () => {
                </n-button>
            </template>
        </n-modal>
+        <n-modal v-model:show="showChangeRole" preset="dialog" :title="t('changeRole')">
+            <n-alert type="error" :bordered="false" v-if="roleDonotExist">
+                <span>{{ t('roleDonotExist') }}</span>
+            </n-alert>
+            <p>{{ t('prefix') + ": " + getRolePrefix(curUserRole) }}</p>
+            <p>{{ t('domains') + ": " + JSON.stringify(getRoleDomains(curUserRole)) }}</p>
+            <n-select clearable v-model:value="curUserRole" :options="userRolesOptions" />
+            <template #action>
+                <n-button :loading="loading" @click="changeRole" size="small" tertiary type="primary">
+                    {{ t('changeRole') }}
+                </n-button>
+            </template>
+        </n-modal>
        <n-input-group>
-            <n-input v-model:value="userQuery" />
+            <n-input v-model:value="userQuery" @keydown.enter="fetchData" />
            <n-button @click="fetchData" type="primary" tertiary>
                {{ t('query') }}
            </n-button>
@@ -277,7 +382,7 @@ onMounted(async () => {
                </template>
            </n-pagination>
        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
    </div>
 </template>

--- a/frontend/src/views/admin/UserSettings.vue
+++ b/frontend/src/views/admin/UserSettings.vue
@@ -5,11 +5,10 @@ import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, loading } = useGlobalState()
+const { loading } = useGlobalState()
 const message = useMessage()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            save: 'Save',
@@ -83,7 +82,7 @@ onMounted(async () => {

 <template>
    <div class="center">
-        <n-card style="max-width: 600px;">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
            <n-form :model="userSettings">
                <n-form-item-row :label="t('enableUserRegister')">
                    <n-checkbox v-model:checked="userSettings.enable" />
--- a/frontend/src/views/admin/Webhook.vue
+++ b/frontend/src/views/admin/Webhook.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            successTip: 'Success',
+            webhookAllowList: 'Webhook Allow List(Enter the address that is allowed to use webhook)',
+            save: 'Save',
+        },
+        zh: {
+            successTip: '成功',
+            webhookAllowList: 'Webhook 白名单(请输入允许使用webhook 的地址)',
+            save: '保存',
+        }
+    }
+});
+
+class WebhookSettings {
+    allowList: string[];
+
+    constructor(allowList: string[]) {
+        this.allowList = allowList;
+    }
+}
+
+const webhookSettings = ref(new WebhookSettings([]))
+
+const getSettings = async () => {
+    try {
+        const res = await api.fetch(`/admin/webhook/settings`)
+        Object.assign(webhookSettings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    try {
+        await api.fetch(`/admin/webhook/settings`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await getSettings();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+            <n-form-item-row :label="t('webhookAllowList')">
+                <n-select v-model:value="webhookSettings.allowList" filterable multiple tag
+                    :placeholder="t('webhookAllowList')" />
+            </n-form-item-row>
+            <n-button @click="saveSettings" type="primary" block>
+                {{ t('save') }}
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>
--- a/frontend/src/views/common/About.vue
+++ b/frontend/src/views/common/About.vue
@@ -0,0 +1,44 @@
+<script setup>
+import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded>
+            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
+                <template #icon>
+                    <n-icon :component="GithubAlt" />
+                </template>
+                Github
+            </n-button>
+            <n-button tag="a" target="_blank" href="https://discord.gg/dQEwTWhA6Q">
+                <template #icon>
+                    <n-icon :component="Discord" />
+                </template>
+                Discord
+            </n-button>
+            <n-button tag="a" target="_blank" href="https://t.me/cloudflare_temp_email">
+                <template #icon>
+                    <n-icon :component="Telegram" />
+                </template>
+                Telegram
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+.n-card {
+    max-width: 800px;
+}
+
+.n-button {
+    margin-top: 10px;
+    margin-left: 10px;
+}
+</style>
--- a/frontend/src/views/common/AdminContact.vue
+++ b/frontend/src/views/common/AdminContact.vue
@@ -1,10 +1,9 @@
 <script setup>
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../../store'
-const { localeCache, openSettings } = useGlobalState()
+const { openSettings } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            adminContact: 'If you need help, please contact the administrator ({msg})',
@@ -17,7 +16,7 @@ const { t } = useI18n({
 </script>

 <template>
-    <n-alert v-if="openSettings.adminContact" :show-icon="false">
+    <n-alert v-if="openSettings.adminContact" :show-icon="false" :bordered="false">
        <span>{{ t('adminContact', { msg: openSettings.adminContact }) }}</span>
    </n-alert>
 </template>
--- a/frontend/src/views/common/Appearance.vue
+++ b/frontend/src/views/common/Appearance.vue
@@ -1,15 +1,16 @@
 <script setup>
 import { useI18n } from 'vue-i18n'

+import { useIsMobile } from '../../utils/composables'
 import { useGlobalState } from '../../store'

 const {
-    localeCache, mailboxSplitSize, useIframeShowMail, preferShowTextMail,
+    mailboxSplitSize, useIframeShowMail, preferShowTextMail,
    globalTabplacement, useSideMargin
 } = useGlobalState()
+const isMobile = useIsMobile()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            mailboxSplitSize: 'Mailbox Split Size',
@@ -39,8 +40,8 @@ const { t } = useI18n({

 <template>
    <div class="center">
-        <n-card>
-            <n-form-item-row :label="t('mailboxSplitSize')">
+        <n-card :bordered="false" embedded>
+            <n-form-item-row v-if="!isMobile" :label="t('mailboxSplitSize')">
                <n-slider v-model:value="mailboxSplitSize" :min="0.25" :max="0.75" :step="0.01" :marks="{
                    0.25: '0.25',
                    0.5: '0.5',
@@ -53,7 +54,7 @@ const { t } = useI18n({
            <n-form-item-row :label="t('useIframeShowMail')">
                <n-switch v-model:value="useIframeShowMail" :round="false" />
            </n-form-item-row>
-            <n-form-item-row :label="t('useSideMargin')">
+            <n-form-item-row v-if="!isMobile" :label="t('useSideMargin')">
                <n-switch v-model:value="useSideMargin" :round="false" />
            </n-form-item-row>
            <n-form-item-row :label="t('globalTabplacement')">
--- a/frontend/src/views/common/Login.vue
+++ b/frontend/src/views/common/Login.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
 import { NewLabelOutlined, EmailOutlined } from '@vicons/material'
@@ -9,11 +9,35 @@ import Turnstile from '../../components/Turnstile.vue'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
+import { getRouterPathWithLang } from '../../utils'
+
+const props = defineProps({
+    bindUserAddress: {
+        type: Function,
+        default: async () => { await api.bindUserAddress(); },
+        requried: true
+    },
+    newAddressPath: {
+        type: Function,
+        default: async (address_name, domain, cf_token) => {
+            return await api.fetch("/api/new_address", {
+                method: "POST",
+                body: JSON.stringify({
+                    name: address_name,
+                    domain: domain,
+                    cf_token: cf_token,
+                }),
+            });
+        },
+        requried: true
+    },
+})
+
 const message = useMessage()
 const router = useRouter()

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

@@ -32,24 +56,23 @@ const login = async () => {
        jwt.value = credential.value;
        await api.getSettings();
        try {
-            await api.bindUserAddress();
+            await props.bindUserAddress();
        } catch (error) {
            message.error(`${t('bindUserAddressError')}: ${error.message}`);
        }
-        await router.push("/");
+        await router.push(getRouterPathWithLang("/", locale.value));
    } catch (error) {
        message.error(error.message || "error");
    }
 }

-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
            login: 'Login',
            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 ., a-z, A-Z and 0-9',
+            getNewEmailTip1: 'Please input the email you want to use. only allow a-z and 0-9',
            getNewEmailTip2: 'Levaing it blank will generate a random email address.',
            getNewEmailTip3: 'You can choose a domain from the dropdown list.',
            credential: 'Email Address Credential',
@@ -64,7 +87,7 @@ const { t } = useI18n({
            login: '登录',
            pleaseGetNewEmail: '请"登录"或点击 "注册新邮箱" 按钮来获取一个新的邮箱地址',
            getNewEmail: '创建新邮箱',
-            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
+            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 a-z, 0-9',
            getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
            getNewEmailTip3: '你可以从下拉列表中选择一个域名。',
            credential: '邮箱地址凭据',
@@ -87,7 +110,7 @@ const generateName = async () => {
            .split('@')[0]
            .replace(/\s+/g, '.')
            .replace(/\.{2,}/g, '.')
-            .replace(/[^a-zA-Z0-9.]/g, '')
+            .replace(/[^a-z0-9]/g, '')
            .toLowerCase();
    } catch (error) {
        message.error(error.message || "error");
@@ -98,20 +121,17 @@ const generateName = async () => {

 const newEmail = async () => {
    try {
-        const res = await api.fetch(`/api/new_address`, {
-            method: "POST",
-            body: JSON.stringify({
-                name: emailName.value,
-                domain: emailDomain.value,
-                cf_token: cfToken.value,
-            }),
-        });
+        const res = await props.newAddressPath(
+            emailName.value,
+            emailDomain.value,
+            cfToken.value
+        );
        jwt.value = res["jwt"];
        await api.getSettings();
-        await router.push("/");
+        await router.push(getRouterPathWithLang("/", locale.value));
        showAddressCredential.value = true;
        try {
-            await api.bindUserAddress();
+            await props.bindUserAddress();
        } catch (error) {
            message.error(`${t('bindUserAddressError')}: ${error.message}`);
        }
@@ -120,17 +140,45 @@ const newEmail = async () => {
    }
 };

+const addressPrefix = computed(() => {
+    // if user has role, return role prefix
+    if (userSettings.value?.user_role) {
+        return userSettings.value.user_role.prefix || "";
+    }
+    // if user has no role, return default prefix
+    return openSettings.value.prefix;
+});
+
+const domainsOptions = computed(() => {
+    // if user has role, return role domains
+    if (userSettings.value.user_role) {
+        const allDomains = userSettings.value.user_role.domains;
+        if (!allDomains) return openSettings.value.domains;
+        return openSettings.value.domains.filter((domain) => {
+            return allDomains.includes(domain.value);
+        });
+    }
+    // if user has no role, return default domains
+    if (!openSettings.value.defaultDomains) {
+        return openSettings.value.domains;
+    }
+    // if user has no role and no default domains, return all domains
+    return openSettings.value.domains.filter((domain) => {
+        return openSettings.value.defaultDomains.includes(domain.value);
+    });
+});
+
 onMounted(async () => {
    if (!openSettings.value.domains || openSettings.value.domains.length === 0) {
        await api.getOpenSettings();
    }
-    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0]?.value : "";
+    emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
 });
 </script>

 <template>
    <div>
-        <n-alert v-if="userSettings.user_email" :show-icon="false" closable>
+        <n-alert v-if="userSettings.user_email" :show-icon="false" :bordered="false" closable>
            <span>{{ t('bindUserInfo') }}</span>
        </n-alert>
        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
@@ -166,13 +214,14 @@ onMounted(async () => {
                            {{ t('generateName') }}
                        </n-button>
                        <n-input-group>
-                            <n-input-group-label v-if="openSettings.prefix">
-                                {{ openSettings.prefix }}
+                            <n-input-group-label v-if="addressPrefix">
+                                {{ addressPrefix }}
                            </n-input-group-label>
-                            <n-input v-model:value="emailName" />
+                            <n-input v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
+                                :maxlength="openSettings.maxAddressLen" />
                            <n-input-group-label>@</n-input-group-label>
                            <n-select v-model:value="emailDomain" :consistent-menu-width="false"
-                                :options="openSettings.domains" />
+                                :options="domainsOptions" />
                        </n-input-group>
                        <Turnstile v-model:value="cfToken" />
                        <n-button type="primary" block secondary strong @click="newEmail" :loading="loading">
@@ -185,7 +234,7 @@ onMounted(async () => {
                </n-spin>
            </n-tab-pane>
            <n-tab-pane name="help" :tab="t('help')">
-                <n-alert :show-icon="false">
+                <n-alert :show-icon="false" :bordered="false">
                    <span>{{ t('pleaseGetNewEmail') }}</span>
                </n-alert>
                <AdminContact />
--- a/frontend/src/views/index/AccountSettings.vue
+++ b/frontend/src/views/index/AccountSettings.vue
@@ -6,17 +6,17 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Appearance from '../common/Appearance.vue'
+import { getRouterPathWithLang } from '../../utils'

 const {
-    jwt, localeCache, settings, showAddressCredential, loading
+    jwt, settings, showAddressCredential, loading
 } = useGlobalState()
 const router = useRouter()
 const message = useMessage()

 const showLogout = ref(false)
 const showDelteAccount = ref(false)
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
            logout: "Logout",
@@ -39,7 +39,7 @@ const { t } = useI18n({

 const logout = async () => {
    jwt.value = '';
-    await router.push('/')
+    await router.push(getRouterPathWithLang("/", locale.value))
    location.reload()
 }

@@ -49,7 +49,7 @@ const deleteAccount = async () => {
            method: 'DELETE'
        });
        jwt.value = '';
-        await router.push('/')
+        await router.push(getRouterPathWithLang("/", locale.value))
        location.reload()
    } catch (error) {
        message.error(error.message || "error");
@@ -59,7 +59,7 @@ const deleteAccount = async () => {

 <template>
    <div class="center" v-if="settings.address">
-        <n-card>
+        <n-card :bordered="false" embedded>
            <Appearance />
            <n-button @click="showAddressCredential = true" type="primary" secondary block strong>
                {{ t('showAddressCredential') }}
--- a/frontend/src/views/index/AddressBar.vue
+++ b/frontend/src/views/index/AddressBar.vue
@@ -1,43 +1,47 @@
 <script setup>
 import useClipboard from 'vue-clipboard3'
-import { onMounted } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
-import { Copy, User } from '@vicons/fa'
+import { Copy, User, ExchangeAlt } from '@vicons/fa'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import Login from '../common/Login.vue'
+import AddressManagement from '../user/AddressManagement.vue'
+import TelegramAddress from './TelegramAddress.vue'
+import LocalAddress from './LocalAddress.vue'
+import { getRouterPathWithLang } from '../../utils'

 const { toClipboard } = useClipboard()
 const message = useMessage()
 const router = useRouter()

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

-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
-            yourAddress: 'Your email address is',
+            addressManage: 'Address Manage',
+            changeAddress: 'Change Address',
            ok: 'OK',
            copy: 'Copy',
            copied: 'Copied',
            fetchAddressError: 'Mail address credential is invalid or account not exist, it may be network connection issue, please try again later.',
-            mailV1Alert: 'You have some mails in v1, please click here to login and visit your history mails.',
            addressCredential: 'Mail Address Credential',
            addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
            userLogin: 'User Login',
        },
        zh: {
-            yourAddress: '你的邮箱地址是',
+            addressManage: '地址管理',
+            changeAddress: '更换地址',
            ok: '确定',
            copy: '复制',
            copied: '已复制',
            fetchAddressError: '邮箱地址凭证无效或邮箱地址不存在，也可能是网络连接异常，请稍后再尝试。',
-            mailV1Alert: '你有一些 v1 版本的邮件，请点击此处登录查看。',
            addressCredential: '邮箱地址凭证',
            addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
            userLogin: '用户登录',
@@ -45,6 +49,21 @@ const { t } = useI18n({
    }
 });

+const showChangeAddress = ref(false)
+const showTelegramChangeAddress = ref(false)
+const showLocalAddress = ref(false)
+const addressLabel = computed(() => {
+    if (settings.value.address) {
+        const domain = settings.value.address.split('@')[1]
+        const domainLabel = openSettings.value.domains.find(
+            d => d.value === domain
+        )?.label;
+        if (!domainLabel) return settings.value.address;
+        return settings.value.address.replace('@' + domain, `@${domainLabel}`);
+    }
+    return settings.value.address;
+})
+
 const copy = async () => {
    try {
        await toClipboard(settings.value.address)
@@ -54,6 +73,10 @@ const copy = async () => {
    }
 }

+const onUserLogin = async () => {
+    await router.push(getRouterPathWithLang("/user", locale.value))
+}
+
 onMounted(async () => {
    await api.getSettings();
 });
@@ -61,34 +84,42 @@ onMounted(async () => {

 <template>
    <div>
-        <n-card v-if="!settings.fetched">
+        <n-card :bordered="false" embedded v-if="!settings.fetched">
            <n-skeleton style="height: 50vh" />
        </n-card>
        <div v-else-if="settings.address">
-            <n-alert v-if="settings.has_v1_mails" type="warning" :show-icon="false" closable>
+            <n-alert type="info" :show-icon="false" :bordered="false">
                <span>
-                    <n-button tag="a" target="_blank" tertiary type="info" size="small" href="https://mail-v1.awsl.uk">
-                        <b>{{ t('mailV1Alert') }} </b>
+                    <b>{{ addressLabel }}</b>
+                    <n-button v-if="isTelegram" style="margin-left: 10px" @click="showTelegramChangeAddress = true"
+                        size="small" tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('addressManage') }}
+                    </n-button>
+                    <n-button v-else-if="userJwt" style="margin-left: 10px" @click="showChangeAddress = true"
+                        size="small" tertiary type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('changeAddress') }}
+                    </n-button>
+                    <n-button v-else style="margin-left: 10px" @click="showLocalAddress = true" size="small" tertiary
+                        type="primary">
+                        <n-icon :component="ExchangeAlt" /> {{ t('addressManage') }}
                    </n-button>
-                </span>
-            </n-alert>
-            <n-alert type="info" :show-icon="false">
-                <span>
-                    <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
                    <n-button style="margin-left: 10px" @click="copy" size="small" tertiary type="primary">
                        <n-icon :component="Copy" /> {{ t('copy') }}
                    </n-button>
                </span>
            </n-alert>
        </div>
+        <div v-else-if="isTelegram">
+            <TelegramAddress />
+        </div>
        <div v-else class="center">
-            <n-card style="max-width: 600px;">
-                <n-alert v-if="jwt" type="warning" :show-icon="false" closable>
+            <n-card :bordered="false" embedded style="max-width: 600px;">
+                <n-alert v-if="jwt" type="warning" :show-icon="false" :bordered="false" closable>
                    <span>{{ t('fetchAddressError') }}</span>
                </n-alert>
                <Login />
                <n-divider />
-                <n-button @click="router.push('/user')" type="primary" block secondary strong>
+                <n-button @click="onUserLogin" type="primary" block secondary strong>
                    <template #icon>
                        <n-icon :component="User" />
                    </template>
@@ -96,11 +127,20 @@ onMounted(async () => {
                </n-button>
            </n-card>
        </div>
+        <n-modal v-model:show="showTelegramChangeAddress" preset="card" :title="t('changeAddress')">
+            <TelegramAddress />
+        </n-modal>
+        <n-modal v-model:show="showChangeAddress" preset="card" :title="t('changeAddress')">
+            <AddressManagement />
+        </n-modal>
+        <n-modal v-model:show="showLocalAddress" preset="card" :title="t('changeAddress')">
+            <LocalAddress />
+        </n-modal>
        <n-modal v-model:show="showAddressCredential" preset="dialog" :title="t('addressCredential')">
            <span>
                <p>{{ t("addressCredentialTip") }}</p>
            </span>
-            <n-card>
+            <n-card :bordered="false" embedded>
                <b>{{ jwt }}</b>
            </n-card>
        </n-modal>
--- a/frontend/src/views/index/Attachment.vue
+++ b/frontend/src/views/index/Attachment.vue
@@ -0,0 +1,91 @@
+<script setup>
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { api } from '../../api'
+
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            download: 'Download',
+            action: 'Action',
+        },
+        zh: {
+            download: '下载',
+            action: '操作',
+        }
+    }
+});
+const data = ref([])
+const showDownload = ref(false)
+const curRow = ref({})
+const curDownloadUrl = ref('')
+
+const fetchData = async () => {
+    try {
+        const { results } = await api.fetch(
+            `/api/attachment/list`
+        );
+        data.value = results;
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "key",
+        key: "key"
+    },
+    {
+        title: t('action'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NButton,
+                    {
+                        type: 'success',
+                        tertiary: true,
+                        onClick: async () => {
+                            try {
+                                const { url } = await api.fetch(`/api/attachment/get_url`, {
+                                    method: 'POST',
+                                    body: JSON.stringify({ key: row.key })
+                                });
+                                curDownloadUrl.value = url;
+                                curRow.value = row;
+                                showDownload.value = true;
+                            }
+                            catch (error) {
+                                console.error(error);
+                                message.error(error.message || "error");
+                            }
+                        }
+                    },
+                    { default: () => t('download') }
+                )
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-modal v-model:show="showDownload" preset="dialog" :title="t('download')">
+            <n-tag type="info">{{ curRow.key }}</n-tag>
+            <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="curRow.key.replace('/', '_')"
+                :href="curDownloadUrl">
+                {{ t('download') }}
+            </n-button>
+        </n-modal>
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+    </div>
+</template>
--- a/frontend/src/views/index/AutoReply.vue
+++ b/frontend/src/views/index/AutoReply.vue
@@ -81,7 +81,7 @@ onMounted(async () => {

 <template>
    <div class="center">
-        <n-card v-if="settings.address" :title='t("settings")'>
+        <n-card :bordered="false" embedded v-if="settings.address" :title='t("settings")'>
            <div class="right">
                <n-button type="primary" @click="saveData">{{ t('save') }}</n-button>
            </div>
--- a/frontend/src/views/index/LocalAddress.vue
+++ b/frontend/src/views/index/LocalAddress.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { ref, h, computed } from 'vue';
+import { useLocalStorage } from '@vueuse/core';
+import { useI18n } from 'vue-i18n'
+import { NPopconfirm, NButton } from 'naive-ui'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import Login from '../common/Login.vue';
+
+const { jwt } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            tip: 'These addresses are stored in your browser, maybe loss if you clear the browser cache.',
+            success: 'success',
+            address: 'Address',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+            unbindMailAddress: 'Unbind Mail Address credential',
+            bind: 'Bind',
+            bindAddressSuccess: 'Bind Address Success',
+        },
+        zh: {
+            tip: '这些地址存储在您的浏览器中，如果您清除浏览器缓存，可能会丢失。',
+            success: '成功',
+            address: '地址',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+            unbindMailAddress: '解绑邮箱地址',
+            bind: '绑定',
+            bindAddressSuccess: '绑定地址成功',
+        }
+    }
+});
+
+const tabValue = ref('address')
+const localAddressCache = useLocalStorage("LocalAddressCache", []);
+const data = computed(() => {
+    // @ts-ignore
+    if (!localAddressCache.value.includes(jwt.value)) {
+        // @ts-ignore
+        localAddressCache.value.push(jwt.value)
+    }
+    return localAddressCache.value.map((curJwt: string) => {
+        try {
+            var payload = JSON.parse(
+                decodeURIComponent(
+                    atob(curJwt.split(".")[1]
+                        .replace(/-/g, "+").replace(/_/g, "/")
+                    )
+                )
+            );
+            return {
+                valid: true,
+                address: payload.address,
+                jwt: curJwt
+            }
+        } catch (e) {
+            return {
+                valid: false,
+                address: `invalid jwt [${curJwt}]`,
+                jwt: curJwt
+            }
+        }
+    })
+
+})
+
+const bindAddress = async () => {
+    try {
+        // @ts-ignore
+        if (!localAddressCache.value.includes(jwt.value)) {
+            // @ts-ignore
+            localAddressCache.value.push(jwt.value)
+        }
+        tabValue.value = 'address'
+        message.success(t('bindAddressSuccess'));
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row: any) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            jwt.value = row.jwt
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            if (jwt.value === row.jwt) {
+                                return;
+                            }
+                            localAddressCache.value = localAddressCache.value.filter(
+                                (curJwt: string) => curJwt !== row.jwt
+                            );
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                disabled: jwt.value === row.jwt,
+                                type: "warning",
+                            },
+                            { default: () => t('unbindMailAddress') }
+                        ),
+                        default: () => `${t('unbindMailAddress')}?`
+                    }
+                )
+            ])
+        }
+    }
+]
+</script>
+
+<template>
+    <div>
+        <n-alert type="warning" :show-icon="false" :bordered="false">
+            <span>{{ t('tip') }}</span>
+        </n-alert>
+        <n-tabs type="segment" v-model:value="tabValue">
+            <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')">
+                <Login :bindUserAddress="bindAddress" />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>
--- a/frontend/src/views/index/SendBox.vue
+++ b/frontend/src/views/index/SendBox.vue
@@ -1,156 +0,0 @@
-<script setup>
-import { ref, h, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n'
-
-import { useGlobalState } from '../../store'
-import { api } from '../../api'
-
-const { localeCache, settings } = useGlobalState()
-const message = useMessage()
-
-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
-    messages: {
-        en: {
-            address: 'Address',
-            success: 'Success',
-            to_mail: 'To Mail',
-            subject: 'Subject',
-            created_at: 'Created At',
-            action: 'Action',
-            refresh: 'Refresh',
-            itemCount: 'itemCount',
-            view: 'View',
-            ok: 'OK'
-        },
-        zh: {
-            address: '地址',
-            success: '成功',
-            to_mail: '收件人邮箱',
-            subject: '主题',
-            created_at: '创建时间',
-            action: '操作',
-            refresh: '刷新',
-            itemCount: '总数',
-            view: '查看',
-            ok: '确定'
-        }
-    }
-});
-const data = ref([])
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const curRow = ref({})
-const showModal = ref(false)
-
-const fetchData = async () => {
-    try {
-        const { results, count: addressCount } = await api.fetch(
-            `/api/sendbox`
-            + `?limit=${pageSize.value}`
-            + `&offset=${(page.value - 1) * pageSize.value}`
-        );
-        data.value = results.map((item) => {
-            try {
-                const data = JSON.parse(item.raw);
-                item.to_mail = data?.personalizations?.map(
-                    (p) => p.to?.map((t) => t.email).join(',')
-                ).join(';');
-                item.subject = data.subject;
-                item.raw = JSON.stringify(data, null, 2);
-            } catch (error) {
-                console.log(error);
-            }
-            return item;
-        });
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
-    } catch (error) {
-        console.log(error)
-        message.error(error.message || "error");
-    }
-}
-
-const columns = [
-    {
-        title: "ID",
-        key: "id"
-    },
-    {
-        title: t('address'),
-        key: "address"
-    },
-    {
-        title: t('to_mail'),
-        key: "to_mail"
-    },
-    {
-        title: t('subject'),
-        key: "subject"
-    },
-    {
-        title: t('created_at'),
-        key: "created_at"
-    },
-    {
-        title: t('action'),
-        key: 'actions',
-        render(row) {
-            return h('div', [
-                h(NButton,
-                    {
-                        type: 'success',
-                        ghost: true,
-                        onClick: () => {
-                            showModal.value = true;
-                            curRow.value = row;
-                        }
-                    },
-                    { default: () => t('view') }
-                )
-            ])
-        }
-    }
-]
-
-watch([page, pageSize], async () => {
-    await fetchData()
-})
-
-
-onMounted(async () => {
-    await fetchData()
-})
-</script>
-
-<template>
-    <div v-if="settings.address">
-        <n-modal v-model:show="showModal" preset="dialog" style="width: 100%;">
-            <pre style="overflow: auto;">{{ curRow.raw }}</pre>
-        </n-modal>
-        <div style="display: inline-block;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
-                :page-sizes="[20, 50, 100]" show-size-picker>
-                <template #prefix="{ itemCount }">
-                    {{ t('itemCount') }}: {{ itemCount }}
-                </template>
-                <template #suffix>
-                    <n-button @click="fetchData" type="primary" size="small" tertiary>
-                        {{ t('refresh') }}
-                    </n-button>
-                </template>
-            </n-pagination>
-        </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
-    </div>
-</template>
-
-<style scoped>
-.n-pagination {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-</style>
--- a/frontend/src/views/index/SendMail.vue
+++ b/frontend/src/views/index/SendMail.vue
@@ -142,9 +142,9 @@ onMounted(async () => {

 <template>
    <div class="center" v-if="settings.address">
-        <n-card>
+        <n-card :bordered="false" embedded>
            <div v-if="!settings.send_balance || settings.send_balance <= 0">
-                <n-alert type="warning" :show-icon="false">
+                <n-alert type="warning" :show-icon="false" :bordered="false">
                    {{ t('requestAccessTip') }}
                    <n-button type="primary" tertiary @click="requestAccess" size="small">{{ t('requestAccess')
                        }}</n-button>
@@ -153,7 +153,7 @@ onMounted(async () => {
                <AdminContact />
            </div>
            <div v-else>
-                <n-alert type="info" :show-icon="false">
+                <n-alert type="info" :show-icon="false" :bordered="false">
                    {{ t('send_balance') }}: {{ settings.send_balance }}
                </n-alert>
                <div class="right">
@@ -187,7 +187,7 @@ onMounted(async () => {
                            </n-button>
                        </n-form-item>
                        <n-form-item :label="t('content')" label-placement="top">
-                            <n-card v-if="isPreview">
+                            <n-card :bordered="false" embedded v-if="isPreview">
                                <div v-html="sendMailModel.content" />
                            </n-card>
                            <div v-else-if="sendMailModel.contentType == 'rich'" style="border: 1px solid #ccc">
--- a/frontend/src/views/index/TelegramAddress.vue
+++ b/frontend/src/views/index/TelegramAddress.vue
@@ -0,0 +1,158 @@
+<script setup lang="ts">
+import { ref, h, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { NPopconfirm, NButton } from 'naive-ui'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+// @ts-ignore
+import Login from '../common/Login.vue';
+
+const { jwt, telegramApp } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            success: 'success',
+            address: 'Address',
+            actions: 'Actions',
+            changeMailAddress: 'Change Mail Address',
+            unbindMailAddress: 'Unbind Mail Address',
+            bind: 'Bind',
+            bindAddressSuccess: 'Bind Address Success',
+        },
+        zh: {
+            success: '成功',
+            address: '地址',
+            actions: '操作',
+            changeMailAddress: '切换邮箱地址',
+            unbindMailAddress: '解绑邮箱地址',
+            bind: '绑定',
+            bindAddressSuccess: '绑定地址成功',
+        }
+    }
+});
+
+const data = ref([]);
+
+const fetchData = async () => {
+    try {
+        data.value = await api.fetch(`/telegram/get_bind_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData
+            })
+        });
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const newAddressPath = async (address_name: string, domain: string, cf_token: string) => {
+    return await api.fetch("/telegram/new_address", {
+        method: "POST",
+        body: JSON.stringify({
+            initData: telegramApp.value.initData,
+            address: `${address_name}@${domain}`,
+            cf_token: cf_token,
+        }),
+    });
+}
+
+const bindAddress = async () => {
+    try {
+        await api.fetch(`/telegram/bind_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData,
+                jwt: jwt.value
+            })
+        });
+        message.success(t('bindAddressSuccess'));
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row: any) {
+            return h('div', [
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            jwt.value = row.jwt
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "primary",
+                            },
+                            { default: () => t('changeMailAddress') }
+                        ),
+                        default: () => `${t('changeMailAddress')}?`
+                    }
+                ),
+                h(NPopconfirm,
+                    {
+                        onPositiveClick: () => {
+                            api.fetch(`/telegram/unbind_address`, {
+                                method: 'POST',
+                                body: JSON.stringify({
+                                    initData: telegramApp.value.initData,
+                                    address: row.address
+                                })
+                            });
+                            jwt.value = ""
+                            location.reload()
+                        }
+                    },
+                    {
+                        trigger: () => h(NButton,
+                            {
+                                tertiary: true,
+                                type: "warning",
+                            },
+                            { default: () => t('unbindMailAddress') }
+                        ),
+                        default: () => `${t('unbindMailAddress')}?`
+                    }
+                )
+            ])
+        }
+    }
+]
+
+onMounted(async () => {
+    if (!telegramApp.value?.initData || data.value.length > 0) {
+        return
+    }
+    await fetchData()
+})
+</script>
+
+<template>
+    <div>
+        <n-tabs type="segment">
+            <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')">
+                <Login :newAddressPath="newAddressPath" :bindUserAddress="bindAddress" />
+            </n-tab-pane>
+        </n-tabs>
+    </div>
+</template>
--- a/frontend/src/views/index/Webhook.vue
+++ b/frontend/src/views/index/Webhook.vue
@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+// @ts-ignore
+import { useGlobalState } from '../../store'
+// @ts-ignore
+import { api } from '../../api'
+
+const { settings } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            successTip: 'Success',
+            test: 'Test',
+            save: 'Save',
+            notEnabled: 'Webhook is not enabled for you',
+            urlMissing: 'URL is required',
+        },
+        zh: {
+            successTip: '成功',
+            test: '测试',
+            save: '保存',
+            notEnabled: 'Webhook 未开启，请联系管理员开启',
+            urlMissing: 'URL 不能为空',
+        }
+    }
+});
+
+class WebhookSettings {
+    url: string = ''
+    method: string = 'POST'
+    headers: string = JSON.stringify({}, null, 2)
+    body: string = JSON.stringify({}, null, 2)
+}
+
+const webhookSettings = ref<WebhookSettings>(new WebhookSettings())
+const enableWebhook = ref(false)
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/api/webhook/settings`)
+        Object.assign(webhookSettings.value, res)
+        enableWebhook.value = true
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const saveSettings = async () => {
+    if (!webhookSettings.value.url) {
+        message.error(t('urlMissing'))
+        return
+    }
+    try {
+        await api.fetch(`/api/webhook/settings`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const testSettings = async () => {
+    if (!webhookSettings.value.url) {
+        message.error(t('urlMissing'))
+        return
+    }
+    try {
+        await api.fetch(`/api/webhook/test`, {
+            method: 'POST',
+            body: JSON.stringify(webhookSettings.value),
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center" v-if="settings.address">
+        <n-card :bordered="false" embedded v-if="enableWebhook" style="max-width: 800px; overflow: auto;">
+            <n-form-item-row label="URL">
+                <n-input v-model:value="webhookSettings.url" />
+            </n-form-item-row>
+            <n-form-item-row label="METHOD">
+                <n-select v-model:value="webhookSettings.method" tag :options='[
+                    { label: "POST", value: "POST" }
+                ]' />
+            </n-form-item-row>
+            <n-form-item-row label="HEADERS">
+                <n-input v-model:value="webhookSettings.headers" type="textarea" :autosize="{ minRows: 3 }" />
+            </n-form-item-row>
+            <n-form-item-row label="BODY">
+                <n-input v-model:value="webhookSettings.body" type="textarea" :autosize="{ minRows: 3 }" />
+            </n-form-item-row>
+            <n-button @click="testSettings" secondary block strong>
+                {{ t('test') }}
+            </n-button>
+            <n-button @click="saveSettings" type="primary" block>
+                {{ t('save') }}
+            </n-button>
+        </n-card>
+        <n-result v-else status="404" :title="t('notEnabled')" />
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>
--- a/frontend/src/views/telegram/Mail.vue
+++ b/frontend/src/views/telegram/Mail.vue
@@ -0,0 +1,70 @@
+<script setup>
+import { useRoute } from 'vue-router'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import { onMounted, watch } from 'vue';
+import { processItem } from '../../utils/email-parser'
+
+const { telegramApp } = useGlobalState()
+const route = useRoute()
+
+const curMail = ref({});
+
+watch(telegramApp, async () => {
+    if (telegramApp.value.initData) {
+        curMail.value = await fetchMailData();
+    }
+});
+
+const fetchMailData = async () => {
+    try {
+        const res = await api.fetch(`/telegram/get_mail`, {
+            method: 'POST',
+            body: JSON.stringify({
+                initData: telegramApp.value.initData,
+                mailId: route.query.mail_id
+            })
+        });
+        return await processItem(res);
+    }
+    catch (error) {
+        console.error(error);
+        return {};
+    }
+};
+
+onMounted(async () => {
+    curMail.value = await fetchMailData();
+});
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded v-if="curMail.message" style="max-width: 800px; overflow: auto;">
+            <n-tag type="info">
+                ID: {{ curMail.id }}
+            </n-tag>
+            <n-tag type="info">
+                Date: {{ curMail.created_at }}
+            </n-tag>
+            <n-tag type="info">
+                FROM: {{ curMail.source }}
+            </n-tag>
+            <n-tag v-if="showEMailTo" type="info">
+                TO: {{ curMail.address }}
+            </n-tag>
+            <div v-html="curMail.message" style="margin-top: 10px;"></div>
+        </n-card>
+    </div>
+</template>
+
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>
--- a/frontend/src/views/user/AddressManagement.vue
+++ b/frontend/src/views/user/AddressManagement.vue
@@ -6,13 +6,13 @@ import { NBadge, NPopconfirm, NButton } from 'naive-ui'

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

-const { localeCache, jwt } = useGlobalState()
+const { jwt } = useGlobalState()
 const message = useMessage()
 const router = useRouter()

-const { t } = useI18n({
-    locale: localeCache.value || 'zh',
+const { locale, t } = useI18n({
    messages: {
        en: {
            success: 'success',
@@ -48,7 +48,7 @@ const changeMailAddress = async (address_id) => {
            return;
        }
        jwt.value = res.jwt;
-        await router.push('/');
+        await router.push(getRouterPathWithLang("/", locale.value))
        location.reload();
    } catch (error) {
        console.log(error)
@@ -165,6 +165,6 @@ onMounted(async () => {

 <template>
    <div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" />
+        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
    </div>
 </template>
--- a/frontend/src/views/user/BindAddress.vue
+++ b/frontend/src/views/user/BindAddress.vue
@@ -6,10 +6,9 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import Login from '../common/Login.vue'

-const { userJwt, localeCache, userSettings, } = useGlobalState()
+const { userJwt, userSettings, } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            logout: 'Logout',
@@ -30,7 +29,7 @@ onMounted(async () => {

 <template>
    <div class="center" v-if="userSettings.user_email">
-        <n-card style="max-width: 600px;">
+        <n-card :bordered="false" embedded style="max-width: 600px;">
            <Login />
        </n-card>
    </div>
--- a/frontend/src/views/user/UserBar.vue
+++ b/frontend/src/views/user/UserBar.vue
@@ -11,11 +11,10 @@ const message = useMessage()
 const router = useRouter()

 const {
-    localeCache, userSettings, userJwt, userOpenSettings
+    userSettings, userJwt, userOpenSettings
 } = useGlobalState()

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            currentUser: 'Current Login User',
@@ -38,19 +37,19 @@ onMounted(async () => {

 <template>
    <div>
-        <n-card v-if="!userSettings.fetched">
+        <n-card :bordered="false" embedded v-if="!userSettings.fetched">
            <n-skeleton style="height: 50vh" />
        </n-card>
        <div v-else-if="userSettings.user_email">
-            <n-alert type="success" :show-icon="false">
+            <n-alert type="success" :show-icon="false" :bordered="false">
                <span>
                    <b>{{ t('currentUser') }} <b>{{ userSettings.user_email }}</b></b>
                </span>
            </n-alert>
        </div>
        <div v-else class="center">
-            <n-card style="max-width: 600px;">
-                <n-alert v-if="userJwt" type="warning" :show-icon="false" closable>
+            <n-card :bordered="false" embedded style="max-width: 600px;">
+                <n-alert v-if="userJwt" type="warning" :show-icon="false" :bordered="false" closable>
                    <span>{{ t('fetchUserSettingsError') }}</span>
                </n-alert>
                <UserLogin />
--- a/frontend/src/views/user/UserLogin.vue
+++ b/frontend/src/views/user/UserLogin.vue
@@ -10,12 +10,11 @@ import { hashPassword } from '../../utils';

 import Turnstile from '../../components/Turnstile.vue';

-const { userJwt, localeCache, userTab, userOpenSettings } = useGlobalState()
+const { userJwt, userTab, userOpenSettings, openSettings } = useGlobalState()
 const message = useMessage();
 const router = useRouter();

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            login: 'Login',
@@ -99,7 +98,7 @@ const sendVerificationCode = async () => {
        message.error(t('pleaseInputEmail'));
        return;
    }
-    if (!cfToken.value && userOpenSettings.value.enableMailVerify) {
+    if (openSettings.value.cfTurnstileSiteKey && !cfToken.value && userOpenSettings.value.enableMailVerify) {
        message.error(t('pleaseCompleteTurnstile'));
        return;
    }
@@ -229,7 +228,7 @@ onMounted(async () => {
                    {{ t('resetPassword') }}
                </n-button>
            </n-form>
-            <n-alert v-else :show-icon="false">
+            <n-alert v-else :show-icon="false" :bordered="false">
                <span>
                    {{ t('cannotForgotPassword') }}
                </span>
--- a/frontend/src/views/user/UserSettings.vue
+++ b/frontend/src/views/user/UserSettings.vue
@@ -6,14 +6,13 @@ import { useRouter } from 'vue-router'
 import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { userJwt, localeCache, userSettings, } = useGlobalState()
+const { userJwt, userSettings, } = useGlobalState()
 const router = useRouter()
 const message = useMessage()

 const showLogout = ref(false)

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            logout: 'Logout',
@@ -44,8 +43,8 @@ onMounted(async () => {

 <template>
    <div class="center" v-if="userSettings.user_email">
-        <n-card>
-            <n-alert :show-icon="false">
+        <n-card :bordered="false" embedded>
+            <n-alert :show-icon="false" :bordered="false">
                <span>
                    {{ t('passordTip') }}
                </span>
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "skipLibCheck": true,
+    "lib": [
+      "ESNext"
+    ],
+    "types": []
+  },
+}
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -13,15 +13,6 @@ import topLevelAwait from "vite-plugin-top-level-await";
 export default defineConfig({
  build: {
    outDir: './dist',
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes('wangeditor')) {
-            return 'vendor-wangeditor';
-          }
-        }
-      }
-    }
  },
  plugins: [
    vue(),
@@ -71,5 +62,8 @@ export default defineConfig({
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
+  },
+  define: {
+    'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
  }
 })
--- a/mail-parser-wasm/.gitignore
+++ b/mail-parser-wasm/.gitignore
@@ -12,3 +12,4 @@ Cargo.lock

 # MSVC Windows builds of rustc generate these, which store debugging information
 *.pdb
+web/
--- a/mail-parser-wasm/Cargo.toml
+++ b/mail-parser-wasm/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "mail-parser-wasm"
-version = "0.1.6"
+version = "0.1.8"
 edition = "2021"
 description = "A simple mail parser for wasm"
 license = "MIT"
--- a/mail-parser-wasm/README.md
+++ b/mail-parser-wasm/README.md
@@ -1,16 +1,45 @@
-# mail-parser-wasm
+# mail-parser-wasm web and cf worker

-## usage
+## [mail-parser-wasm](https://www.npmjs.com/package/mail-parser-wasm)
+
+### mail-parser-wasm usage
+
+```bash
+pnpm add mail-parser-wasm
+```

 ```js
 import { parse_message } from 'mail-parser-wasm'

-const parsedEmail = parse_message(item.raw);
+const parsedEmail = parse_message(rawEmail);
 ```

-## build
+### mail-parser-wasm build

 ```bash
 wasm-pack build --release
 wasm-pack publish
 ```
+
+## [mail-parser-wasm-worker](https://www.npmjs.com/package/mail-parser-wasm-worker)
+
+### mail-parser-wasm-worker usage
+
+```bash
+pnpm add mail-parser-wasm-worker
+```
+
+```js
+import { parse_message_wrapper } from 'mail-parser-wasm-worker'
+
+const parsedEmail = parse_message_wrapper(rawEmail);
+```
+
+### mail-parser-wasm-worker build
+
+```bash
+wasm-pack build --out-dir web --target web --release
+find web/ -type f ! -name '*.json' ! -name '.gitignore' -exec cp {} worker/ \;
+# modify worker/package.json version or whatever
+pnpm publish worker --no-git-checks
+```
--- a/mail-parser-wasm/worker/index.d.ts
+++ b/mail-parser-wasm/worker/index.d.ts
@@ -0,0 +1,9 @@
+import initAsync, { MessageResult } from './mail_parser_wasm';
+import MODULE from './mail_parser_wasm_bg.wasm';
+export { initAsync, MODULE };
+export * from './mail_parser_wasm';
+/**
+* @param {string} raw_message
+* @returns {MessageResult}
+*/
+export function parse_message_wrapper(raw_message: string): MessageResult;
--- a/mail-parser-wasm/worker/index.js
+++ b/mail-parser-wasm/worker/index.js
@@ -0,0 +1,12 @@
+import initAsync, { initSync, parse_message } from './mail_parser_wasm';
+import MODULE from './mail_parser_wasm_bg.wasm';
+
+initSync(MODULE);
+
+
+export { initAsync, MODULE };
+export * from './mail_parser_wasm';
+export const parse_message_wrapper = (raw_message) => {
+    initSync(MODULE);
+    return parse_message(raw_message);
+}
--- a/mail-parser-wasm/worker/package.json
+++ b/mail-parser-wasm/worker/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "mail-parser-wasm-worker",
+  "description": "A simple mail parser for worker",
+  "homepage": "https://github.com/dreamhunter2333/cloudflare_temp_email/tree/main/mail-parser-wasm",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dreamhunter2333/cloudflare_temp_email",
+    "directory": "mail-parser-wasm"
+  },
+  "version": "0.1.8",
+  "license": "MIT",
+  "files": [
+    "mail_parser_wasm_bg.wasm",
+    "mail_parser_wasm.js",
+    "mail_parser_wasm.d.ts",
+    "index.js",
+    "index.d.ts"
+  ],
+  "module": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "./snippets/*"
+  ]
+}
--- a/pages/.gitignore
+++ b/pages/.gitignore
@@ -0,0 +1,34 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+.env.*
+*-dist/
+components.d.ts
+.wrangler/
+pnpm-lock.yaml
--- a/pages/functions/_middleware.js
+++ b/pages/functions/_middleware.js
@@ -0,0 +1,15 @@
+const API_PATHS = [
+    "/api/",
+    "/open_api/",
+    "/user_api/",
+    "/admin/",
+    "/telegram/"
+];
+
+export async function onRequest(context) {
+    const reqPath = new URL(context.request.url).pathname;
+    if (API_PATHS.map(path => reqPath.startsWith(path)).some(Boolean)) {
+        return context.env.BACKEND.fetch(context.request);
+    }
+    return await context.next();
+}
--- a/pages/package.json
+++ b/pages/package.json
@@ -0,0 +1,16 @@
+{
+  "name": "temp-email-pages",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "wrangler pages dev",
+    "deploy": "wrangler pages deploy --branch production"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "wrangler": "^3.62.0"
+  }
+}
--- a/pages/wrangler.toml
+++ b/pages/wrangler.toml
@@ -0,0 +1,8 @@
+name = "temp-email-pages"
+pages_build_output_dir = "../frontend/dist"
+compatibility_date = "2024-05-13"
+
+[[services]]
+binding = "BACKEND"
+service = "cloudflare_temp_email"
+environment = "production"
--- a/smtp_proxy_server/config.py
+++ b/smtp_proxy_server/config.py
@@ -13,6 +13,7 @@ class Settings(BaseSettings):
    proxy_url: str = "http://localhost:8787"
    port: int = 8025
    imap_port: int = 11143
+    basic_password: str = ""

    class Config:
        env_file = ".env"
--- a/smtp_proxy_server/imap_server.py
+++ b/smtp_proxy_server/imap_server.py
@@ -1,6 +1,6 @@
 import json
 import logging
-import requests
+import httpx

 from io import BytesIO
 from twisted.mail import imap4
@@ -10,7 +10,7 @@ from twisted.internet import protocol, reactor, defer
 from twisted.cred.checkers import ICredentialsChecker, IUsernamePassword

 from config import settings
-from parse_email import parse_email
+from parse_email import generate_email_model, parse_email
 from models import EmailModel

 _logger = logging.getLogger(__name__)
@@ -51,11 +51,15 @@ class SimpleMessage:
    def getFlags(self):
        return ["\\Seen"]

+    def getInternalDate(self):
+        return self.email.headers.get("Date", "Mon, 1 Jan 1900 00:00:00 +0000")
+

@implementer(imap4.IMailboxInfo, imap4.IMailbox)
 class SimpleMailbox:

-    def __init__(self, password):
+    def __init__(self, name, password):
+        self.name = name
        self.password = password
        self.listeners = []
        self.addListener = self.listeners.append
@@ -69,7 +73,7 @@ class SimpleMailbox:
        return 0

    def getMessageCount(self):
-        return 2 ** 31 - 1
+        return self.message_count or 1000

    def getRecentCount(self):
        return 0
@@ -95,19 +99,29 @@ class SimpleMailbox:
        if "UIDNEXT" in names:
            r["UIDNEXT"] = self.getMessageCount() + 1
        if "UIDVALIDITY" in names:
-            r["UIDVALIDITY"] = self.getUID()
+            r["UIDVALIDITY"] = self.getUIDValidity()
        if "UNSEEN" in names:
            r["UNSEEN"] = self.getUnseenCount()
        return defer.succeed(r)

    def fetch(self, messages, uid):
+        if self.name == "INBOX":
+            return self.fetchINBOX(messages)
+        if self.name == "SENT":
+            return self.fetchSENT(messages)
+        return []
+
+    def fetchINBOX(self, messages):
        start, end = messages.ranges[0]
        start = max(start, 1)
-        if start > self.message_count:
+        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 = requests.get(
-            f"{settings.proxy_url}/api/mails?limit=20&offset={start - 1}", headers={
+        res = httpx.get(
+            f"{settings.proxy_url}/api/mails?limit={limit}&offset={start - 1}",
+            headers={
                "Authorization": f"Bearer {self.password}",
+                "x-custom-auth": f"{settings.basic_password}",
                "Content-Type": "application/json"
            }
        )
@@ -124,12 +138,39 @@ class SimpleMailbox:
            for uid, item in enumerate(reversed(res.json()["results"]))
        ]

+    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}]"
+            )
+            raise Exception("Failed to fetch emails")
+        if res.json()["count"] > 0:
+            self.message_count = res.json()["count"]
+        return [
+            (start + uid, SimpleMessage(start + uid, generate_email_model(item)))
+            for uid, item in enumerate(reversed(res.json()["results"]))
+        ]
+
    def getUID(self, message):
        return message.uid

    def store(self, messages, flags, mode, uid):
        # IMailboxIMAP.store
-        pass
+        raise NotImplementedError


 class Account(imap4.MemoryAccount):
@@ -138,11 +179,16 @@ class Account(imap4.MemoryAccount):
        self.password = password
        super().__init__(user)

+    def isSubscribed(self, name):
+        return name.upper() in ["INBOX", "SENT"]
+
    def _emptyMailbox(self, name, id):
        _logger.info(f"New mailbox: {name}, {id}")
-        if name != "INBOX":
-            raise imap4.NoSuchMailbox(name)
-        return SimpleMailbox(self.password)
+        if name == "INBOX":
+            return SimpleMailbox(name, self.password)
+        if name == "SENT":
+            return SimpleMailbox(name, self.password)
+        raise imap4.NoSuchMailbox(name.encode("utf-8"))

    def select(self, name, rw=1):
        return imap4.MemoryAccount.select(self, name)
@@ -154,8 +200,13 @@ class SimpleIMAPServer(imap4.IMAP4Server):
        self.factory = factory

    def lineReceived(self, line):
+        # _logger.info(f"Received: {line}")
        super().lineReceived(line)

+    def sendLine(self, line):
+        # _logger.info(f"Sent: {line}")
+        super().sendLine(line)
+

@implementer(IRealm)
 class SimpleRealm:
@@ -163,6 +214,7 @@ class SimpleRealm:
        res = json.loads(avatarId)
        account = Account(res["username"], res["password"])
        account.addMailbox("INBOX")
+        account.addMailbox("SENT")
        return imap4.IAccount, account, lambda: None


--- a/smtp_proxy_server/parse_email.py
+++ b/smtp_proxy_server/parse_email.py
@@ -1,6 +1,12 @@
-import email
-from email.message import Message
+import datetime
+import json
 import logging
+import email
+
+from email.message import Message
+from email.mime.multipart import MIMEMultipart
+from email.mime.text import MIMEText
+

 from models import EmailModel

@@ -36,3 +42,31 @@ def parse_email(raw: str) -> EmailModel:
            size=len("could not parse email"),
            subparts=[],
        )
+
+
+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.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['To'] = ", ".join(
+            [f"{to['name']} <{to['email']}>" for to in email_json["personalizations"][0]["to"]])
+        message.attach(MIMEText(
+            email_json["content"][0]["value"],
+            "html" if "html" in email_json["content"][0]["type"] else "plain"
+        ))
+    message['Subject'] = email_json["subject"]
+    message["Date"] = datetime.datetime.strptime(
+        item["created_at"], "%Y-%m-%d %H:%M:%S"
+    ).strftime("%a, %d %b %Y %H:%M:%S +0000")
+    return parse_email(message.as_string())
--- a/smtp_proxy_server/requirements.txt
+++ b/smtp_proxy_server/requirements.txt
@@ -1,4 +1,5 @@
-aiosmtpd==1.4.5
+aiosmtpd==1.4.6
 pydantic-settings==2.2.1
-requests==2.31.0
+requests==2.32.0
 twisted==24.3.0
+httpx==0.27.0
--- a/smtp_proxy_server/smtp_server.py
+++ b/smtp_proxy_server/smtp_server.py
@@ -1,7 +1,7 @@
 import asyncio
 import logging
 import email
-import requests
+import httpx

 from aiosmtpd.controller import Controller
 from aiosmtpd.smtp import SMTP, Session, Envelope, AuthResult, LoginPassword
@@ -41,20 +41,33 @@ class CustomSMTPHandler:
            for part in msg.walk():
                content_type = part.get_content_type()
                charset = part.get_content_charset()
-                payload = part.get_payload(decode=True)
+                cte = str(part.get('content-transfer-encoding', '')).lower()
                if content_type not in ["text/plain", "text/html"]:
                    _logger.warning(f"Skipping {content_type}")
                    continue
-                if not payload:
+                if cte == "8bit":
+                    value = part.get_payload(decode=False)
+                else:
+                    payload = part.get_payload(decode=True)
+                    value = payload.decode(charset) if charset else payload
+                if not value:
                    continue
                content_list.append({
                    "type": content_type,
-                    "value": payload.decode(charset)
+                    "value": value
                })
        elif msg.get_content_type() in ["text/plain", "text/html"] and msg.get_payload(decode=True):
+            cte = str(msg.get('content-transfer-encoding', '')).lower()
+            charset = msg.get_content_charset()
+            if cte == "8bit":
+                value = msg.get_payload(decode=False)
+            else:
+                payload = msg.get_payload(decode=True)
+                value = payload.decode(charset) if charset else payload
+            _logger.info(f"Payload {msg._payload} charset {charset}")
            content_list.append({
                "type": msg.get_content_type(),
-                "value": msg.get_payload(decode=True).decode()
+                "value": value
            })

        if not content_list:
@@ -89,7 +102,7 @@ class CustomSMTPHandler:
        }
        _logger.info(f"Send mail {dict(send_body, token='***')}")
        try:
-            res = requests.post(
+            res = httpx.post(
                f"{settings.proxy_url}/external/api/send_mail",
                json=send_body, headers={
                    "Content-Type": "application/json"
--- a/vitepress-docs/docs/.vitepress/config.ts
+++ b/vitepress-docs/docs/.vitepress/config.ts
@@ -31,6 +31,16 @@ export default defineConfig({
    logo: { src: '/logo.png', width: 24, height: 24 },
    search: { provider: 'local' },
    socialLinks: [
+      {
+        icon: 'discord',
+        link: 'https://discord.gg/dQEwTWhA6Q'
+      },
+      {
+        icon: {
+          svg: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512"><path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 17.5l-103-75.9l-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9l190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284L16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z" fill="currentColor"></path></svg>'
+        },
+        link: 'https://t.me/cloudflare_temp_email'
+      },
      {
        icon: 'github',
        link: 'https://github.com/dreamhunter2333/cloudflare_temp_email'
--- a/vitepress-docs/docs/.vitepress/zh.ts
+++ b/vitepress-docs/docs/.vitepress/zh.ts
@@ -96,11 +96,10 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
        },
        {
            text: '通过命令行部署',
-            collapsed: false,
+            collapsed: true,
            items: [
                { text: '命令行部署准备', link: 'cli/pre-requisite' },
                { text: 'D1 数据库', link: 'cli/d1' },
-                { text: '配置 DKIM', link: 'dkim' },
                { text: 'Cloudflare workers 后端', link: 'cli/worker' },
                { text: '配置邮件转发', link: 'email-routing.md' },
                { text: 'Cloudflare Pages 前端', link: 'cli/pages' },
@@ -109,10 +108,9 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
        },
        {
            text: '通过用户界面部署',
-            collapsed: false,
+            collapsed: true,
            items: [
                { text: 'D1 数据库', link: 'ui/d1' },
-                { text: '配置 DKIM', link: 'dkim' },
                { text: 'Cloudflare workers 后端', link: 'ui/worker' },
                { text: '配置邮件转发', link: 'email-routing.md' },
                { text: 'Cloudflare Pages 前端', link: 'ui/pages' },
@@ -121,24 +119,28 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
        },
        {
            text: '通过 Github Actions 部署',
-            collapsed: false,
+            collapsed: true,
            items: [
                { text: '通过 Github Actions 部署', link: 'github-action' },
            ]
        },
        {
            text: '附加功能',
-            collapsed: false,
+            collapsed: true,
            items: [
                { text: '配置 SMTP IMAP 代理服务', link: 'feature/config-smtp-proxy' },
                { text: '发送邮件 API', link: 'feature/send-mail-api' },
                { text: '查看邮件 API', link: 'feature/mail-api' },
                { text: '配置子域名邮箱', link: 'feature/subdomain' },
+                { text: '配置 Telegram Bot', link: 'feature/telegram' },
+                { text: '配置 S3 附件', link: 'feature/s3-attachment' },
+                { text: '配置 worker 使用 wasm 解析邮件', link: 'feature/mail_parser_wasm_worker' },
+                { text: '新建邮箱地址 API', link: 'feature/new-address-api' },
            ]
        },
        {
            text: '功能简介',
-            collapsed: false,
+            collapsed: true,
            items: [
                { text: 'Admin 控制台', link: 'feature/admin' },
                { text: 'Admin 用户管理', link: 'feature/admin-user-management' },
--- a/vitepress-docs/docs/en/cli.md
+++ b/vitepress-docs/docs/en/cli.md
@@ -34,10 +34,10 @@ git clone https://github.com/dreamhunter2333/cloudflare_temp_email.git
 ```bash
 # create a database, and copy the output to wrangler.toml in the next step
 wrangler d1 create dev
-wrangler d1 execute dev --file=db/schema.sql
+wrangler d1 execute dev --file=db/schema.sql --remote
 # schema update, if you have initialized the database before this date, you can execute this command to update
-# wrangler d1 execute dev --file=db/2024-01-13-patch.sql
-# wrangler d1 execute dev --file=db/2024-04-03-patch.sql
+# wrangler d1 execute dev --file=db/2024-01-13-patch.sql --remote
+# wrangler d1 execute dev --file=db/2024-04-03-patch.sql --remote
 # create a namespace, and copy the output to wrangler.toml in the next step
 wrangler kv:namespace create DEV
 ```
@@ -60,7 +60,7 @@ pnpm run deploy

 ```toml
 name = "cloudflare_temp_email"
-main = "src/worker.js"
+main = "src/worker.ts"
 compatibility_date = "2023-08-14"
 node_compat = true

@@ -68,15 +68,34 @@ node_compat = true
 # [triggers]
 # crons = [ "0 0 * * *" ]

+# send mail by cf mail
+# send_email = [
+#    { name = "SEND_MAIL" },
+# ]
+
 [vars]
+# 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)
+# ANNOUNCEMENT = "Custom Announcement"
+# 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
 # ADMIN_PASSWORDS = ["123", "456"]
 # admin contact information. If not configured, it will not be displayed. Any string can be configured.
 # ADMIN_CONTACT = "xx@xx.xxx"
-DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # your domain name
+DEFAULT_DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # domain name for no role users
+DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # all your domain name
+# For chinese domain name, you can use DOMAIN_LABELS to show chinese domain name
+# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
+# USER_DEFAULT_ROLE = "vip" # default role for new users(only when enable mail verification)
+# User roles configuration, if domains is empty will use default_domains, if prefix is null will use default prefix, if prefix is empty string will not use prefix
+# USER_ROLES = [
+#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "vip", prefix = "vip" },
+#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "admin", prefix = "" },
+# ]
 JWT_SECRET = "xxx" # Key used to generate jwt
 BLACK_LIST = "" # Blacklist, used to filter senders, comma separated
 # Allow users to create email addresses
@@ -85,6 +104,8 @@ ENABLE_USER_CREATE_EMAIL = true
 ENABLE_USER_DELETE_EMAIL = true
 # Allow automatic replies to emails
 ENABLE_AUTO_REPLY = false
+# Allow webhook
+# ENABLE_WEBHOOK = true
 # Footer text
 # COPYRIGHT = "Dream Hunter"
 # default send balance, if not set, it will be 0
@@ -92,9 +113,10 @@ ENABLE_AUTO_REPLY = false
 # Turnstile verification configuration
 # CF_TURNSTILE_SITE_KEY = ""
 # CF_TURNSTILE_SECRET_KEY = ""
-# dkim config
-# DKIM_SELECTOR = "mailchannels" # Refer to the DKIM section mailchannels._domainkey for mailchannels
-# DKIM_PRIVATE_KEY = "" # Refer to the contents of priv_key.txt in the DKIM section
+# telegram bot
+# TG_MAX_ACCOUNTS = 5
+# global forward address list, if set, all emails will be forwarded to these addresses
+# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]

 [[d1_databases]]
 binding = "DB"
@@ -142,39 +164,3 @@ pnpm run deploy
 ```

 ![pages](/readme_assets/pages.png)
-
-## Configure sending emails
-
-Find the `SPF` record of `TXT` in the domain name `DNS` record, and add `include:relay.mailchannels.net`
-
-```bash
-v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all
-```
-
-Create a new `_mailchannels` record, the type is `TXT`, the content is `v=mc1 cfid=your worker domain name`
-
- The worker domain name here is the domain name of the back-end api. For example, if I deploy it at `https://temp-email-api.awsl.uk/`, fill in `v=mc1 cfid=awsl.uk`
- If your domain name is `https://temp-email-api.xxx.workers.dev`, fill in `v=mc1 cfid=xxx.workers.dev`
-
-## Configure DKIM
-
-Ref: [Adding-a-DKIM-Signature](https://support.mailchannels.com/hc/en-us/articles/7122849237389-Adding-a-DKIM-Signature)
-
-Creating a DKIM private and public key:
-Private key as PEM file and base64 encoded txt file:
-
-```bash
-openssl genrsa 2048 | tee priv_key.pem | openssl rsa -outform der | openssl base64 -A > priv_key.txt
-```
-
-Public key as DNS record:
-
-```bash
-echo -n "v=DKIM1;p=" > pub_key_record.txt && \
-openssl rsa -in priv_key.pem -pubout -outform der | openssl base64 -A >> pub_key_record.txt
-```
-
-Add `TXT` record in `Cloudflare` all your mail domain `DNS`
-
- `_dmarc`: `v=DMARC1; p=none; adkim=r; aspf=r;`
- `mailchannels._domainkey`: `v=DKIM1; p=<content of the file pub_key_record.txt>`
--- a/vitepress-docs/docs/en/index.md
+++ b/vitepress-docs/docs/en/index.md
@@ -8,7 +8,7 @@ hero:
  actions:
  - theme: brand
    text: Try it now
-    link: https://mail.awsl.uk/
+    link: https://mail.awsl.uk/en
  - theme: alt
    text: command line deployment
    link: /en/cli
--- a/vitepress-docs/docs/public/feature/imap.png
+++ b/vitepress-docs/docs/public/feature/imap.png
--- a/vitepress-docs/docs/public/feature/s3-download.png
+++ b/vitepress-docs/docs/public/feature/s3-download.png
--- a/vitepress-docs/docs/public/feature/s3-save.png
+++ b/vitepress-docs/docs/public/feature/s3-save.png
--- a/vitepress-docs/docs/public/feature/telegram.png
+++ b/vitepress-docs/docs/public/feature/telegram.png
--- a/vitepress-docs/docs/zh/guide/cli/d1.md
+++ b/vitepress-docs/docs/zh/guide/cli/d1.md
@@ -9,7 +9,7 @@ cd worker
 cp wrangler.toml.template wrangler.toml
 # 创建 D1 并执行 schema.sql
 wrangler d1 create dev
-wrangler d1 execute dev --file=../db/schema.sql
+wrangler d1 execute dev --file=../db/schema.sql --remote
 ```

 创建完成后，我们在 cloudflare 的控制台可以看到 D1 数据库
@@ -25,6 +25,6 @@ wrangler d1 execute dev --file=../db/schema.sql

 ```bash
 cd worker
-wrangler d1 execute dev --file=../db/2024-01-13-patch.sql
-wrangler d1 execute dev --file=../db/2024-04-03-patch.sql
+wrangler d1 execute dev --file=../db/2024-01-13-patch.sql --remote
+wrangler d1 execute dev --file=../db/2024-04-03-patch.sql --remote
 ```
--- a/vitepress-docs/docs/zh/guide/cli/pages.md
+++ b/vitepress-docs/docs/zh/guide/cli/pages.md
@@ -1,5 +1,11 @@
 # Cloudflare Pages 前端

+::: warning
+下面两种方式选择一种即可
+:::
+
+## 前后端分离部署
+
 第一次部署会提示创建项目, `production` 分支请填写 `production`

 ```bash
@@ -23,3 +29,19 @@ pnpm run deploy
 部署完成之后你可以在 Cloudflare 控制台看到你的项目, 可以为 `pages` 配置自定义域名

 ![pages](/readme_assets/pages.png)
+
+## 通过 page functions 转发后端请求
+
+从 page functions 转发请求到 worker 后端, 可以获取更快的响应速度
+
+第一次部署会提示创建项目, `production` 分支请填写 `production`
+
+如果你的 worker 后端 名称不为 `cloudflare_temp_email` 请修改 `pages/wrangler.toml`
+
+```bash
+cd frontend
+pnpm install
+pnpm build:pages
+cd ../pages
+pnpm run deploy
+```
--- a/vitepress-docs/docs/zh/guide/cli/worker.md
+++ b/vitepress-docs/docs/zh/guide/cli/worker.md
@@ -12,6 +12,7 @@ cp wrangler.toml.template wrangler.toml

 > [!NOTE]
 > 如果你要启用注册用户功能，并需要发送邮件验证，则需要创建 `KV` 缓存, 不需要可跳过此步骤
+> 如果需要 Telegram Bot，需要创建 `KV` 缓存，不需要可跳过此步骤

 通过命令行创建 KV 缓存，或者在 Cloudflare 控制台创建，然后复制对应配置到 `wrangler.toml` 文件中

@@ -23,7 +24,7 @@ wrangler kv:namespace create DEV

 ```toml
 name = "cloudflare_temp_email"
-main = "src/worker.js"
+main = "src/worker.ts"
 compatibility_date = "2023-12-01"
 # 如果你想使用自定义域名，你需要添加 routes 配置
 # routes = [
@@ -35,15 +36,36 @@ node_compat = true
 # [triggers]
 # crons = [ "0 0 * * *" ]

+# 通过 Cloudflare 发送邮件
+# send_email = [
+#    { name = "SEND_MAIL" },
+# ]
+
 [vars]
+# TITLE = "Custom Title" # 自定义网站标题
 PREFIX = "tmp" # 要处理的邮箱名称前缀，不需要后缀可配置为空字符串
+# (min, max) adderss的长度，如果不设置，默认为(1, 30)
+# ANNOUNCEMENT = "Custom Announcement" # 自定义公告
+# MIN_ADDRESS_LEN = 1
+# MAX_ADDRESS_LEN = 30
 # 如果你想要你的网站私有，取消下面的注释，并修改密码
 # PASSWORDS = ["123", "456"]
 # admin 控制台密码, 不配置则不允许访问控制台
 # ADMIN_PASSWORDS = ["123", "456"]
 # 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"
+# 用户角色配置, 如果 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 = "" # 黑名单，用于过滤发件人，逗号分隔
 # 是否允许用户创建邮件, 不配置则不允许
@@ -52,6 +74,8 @@ ENABLE_USER_CREATE_EMAIL = true
 ENABLE_USER_DELETE_EMAIL = true
 # 允许自动回复邮件
 ENABLE_AUTO_REPLY = false
+# 是否启用 webhook
+# ENABLE_WEBHOOK = true
 # 前端界面页脚文本
 # COPYRIGHT = "Dream Hunter"
 # 默认发送邮件余额，如果不设置，将为 0
@@ -59,9 +83,10 @@ ENABLE_AUTO_REPLY = false
 # Turnstile 人机验证配置
 # CF_TURNSTILE_SITE_KEY = ""
 # CF_TURNSTILE_SECRET_KEY = ""
-# dkim config
-# DKIM_SELECTOR = "mailchannels" # 参考 DKIM 部分 mailchannels._domainkey 的 mailchannels
-# DKIM_PRIVATE_KEY = "" # 参考 DKIM 部分 priv_key.txt 的内容
+# telegram bot 最多绑定邮箱数量
+# TG_MAX_ACCOUNTS = 5
+# 全局转发地址列表，如果不配置则不启用，启用后所有邮件都会转发到列表中的地址
+# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]

 # D1 数据库的名称和 ID 可以在 cloudflare 控制台查看
 [[d1_databases]]
@@ -83,6 +108,17 @@ database_id = "xxx" # D1 数据库 ID
 # simple = { limit = 10, period = 60 }
 ```

+## Telegram Bot 配置
+
+> [!NOTE]
+> 如果不需要 Telegram Bot, 可跳过此步骤
+
+请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 secrets 中
+
+```bash
+pnpm wrangler secret put TELEGRAM_BOT_TOKEN
+```
+
 ## 部署

 第一次部署会提示创建项目, `production` 分支请填写 `production`
--- a/vitepress-docs/docs/zh/guide/config-send-mail.md
+++ b/vitepress-docs/docs/zh/guide/config-send-mail.md
@@ -1,12 +1,25 @@

 # 配置发送邮件

-1. 找到域名 `DNS` 记录的 `TXT` 的 `SPF` 记录, 增加 `include:relay.mailchannels.net`
+## 使用 Cloudflare Workers 给已认证的邮箱发送邮件

-    `v=spf1 include:_spf.mx.cloudflare.net include:relay.mailchannels.net ~all`
+admin 后台 账号配置 `已验证地址列表(可通过 cf 内部 api 发送邮件)`

-2. 新建 `_mailchannels` 记录, 类型为 `TXT`, 内容为 `v=mc1 cfid=你的worker域名`
+## 使用 resend 发送邮件

- 此处 worker 域名为后端 api 的域名，比如我部署在 `https://temp-email-api.awsl.uk/`，则填写 `v=mc1 cfid=awsl.uk`
+注册 `https://resend.com/domains` 根据提示添加 DNS 记录,

- 如果你的域名是 `https://temp-email-api.xxx.workers.dev`，则填写 `v=mc1 cfid=xxx.workers.dev`
+`API KEYS` 页面创建 `api key`
+
+使用 cli 或者直接添加到 `wrangler.toml` 的 `vars`，或者在 cloudflare worker 页面的变量中添加 `RESEND_TOKEN`
+
+```bash
+wrangler secret put RESEND_TOKEN
+```
+
+如果你有多个域名，对应不同的 `api key`，可以在 `wrangler.toml` 中添加多个 secret, 名称为 `RESEND_TOKEN_` + `<. 换成 _ 的 大写域名>`,例如
+
+```bash
+wrangler secret put RESEND_TOKEN_XXX_COM
+wrangler secret put RESEND_TOKEN_DREAMHUNTER2333_XYZ
+```
--- a/vitepress-docs/docs/zh/guide/dkim.md
+++ b/vitepress-docs/docs/zh/guide/dkim.md
@@ -1,33 +0,0 @@
-# 配置 DKIM
-
-如果你不想配置 DKIM，可以跳过这一节。
-
-参考: [Adding-a-DKIM-Signature](https://support.mailchannels.com/hc/en-us/articles/7122849237389-Adding-a-DKIM-Signature)
-
-Creating a DKIM private and public key:
-Private key as PEM file and base64 encoded txt file:
-
-```bash
-openssl genrsa 2048 | tee priv_key.pem | openssl rsa -outform der | openssl base64 -A > priv_key.txt
-```
-
-Public key as DNS record:
-
-```bash
-echo -n "v=DKIM1;p=" > pub_key_record.txt && \
-openssl rsa -in priv_key.pem -pubout -outform der | openssl base64 -A >> pub_key_record.txt
-```
-
-在 `Cloudflare` 的 `DNS` 记录中添加 `TXT` 记录
-
-例如:
-
- `_dmarc`: `v=DMARC1; p=none; adkim=r; aspf=r;`
- `mailchannels._domainkey`: `v=DKIM1; p=<content of the file pub_key_record.txt>`
-
-那我在 `wrangler.toml` 中的配置应该是这样的:
-
-```toml
-DKIM_SELECTOR = "mailchannels"
-DKIM_PRIVATE_KEY = "<priv_key.txt 的内容>"
-```
--- a/vitepress-docs/docs/zh/guide/feature/config-smtp-proxy.md
+++ b/vitepress-docs/docs/zh/guide/feature/config-smtp-proxy.md
@@ -1,5 +1,9 @@
 # 搭建 SMTP IMAP 代理服务

+::: warning
+如果你使用了 `resend`, 可直接使用 `resend` 的 `SMTP` 服务，不需要使用此服务
+:::
+
 ## 为什么需要 SMTP IMAP 代理服务

 `SMTP` `IMAP` 的应用场景更加广泛
@@ -28,6 +32,8 @@ docker-compose up -d

 修改 docker-compose.yaml 中的环境变量, 注意选择合适的 `tag`

+`proxy_url` 为 `worker` 的 URL 地址
+
 ```yaml
 services:
  smtp_proxy_server:
@@ -49,4 +55,6 @@ services:

 下载 [Thunderbird](https://www.thunderbird.net/en-US/)

+密码填写 `邮箱地址凭证`
+
 ![imap](/feature/imap.png)
--- a/vitepress-docs/docs/zh/guide/feature/mail-api.md
+++ b/vitepress-docs/docs/zh/guide/feature/mail-api.md
@@ -7,9 +7,9 @@
 ```python
 limit = 10
 offset = 0
-res = requests.post(
-    f"http://localhost:8787/api/mails?limit={limit}&offset={offset}`;",
-    json=send_body, headers={
+res = requests.get(
+    f"http://localhost:8787/api/mails?limit={limit}&offset={offset}",
+    headers={
        "Authorization": f"Bearer {你的JWT密码}",
        # "x-custom-auth": "<你的网站密码>", # 如果启用了自定义密码
        "Content-Type": "application/json"
--- a/vitepress-docs/docs/zh/guide/feature/mail_parser_wasm_worker.md
+++ b/vitepress-docs/docs/zh/guide/feature/mail_parser_wasm_worker.md
@@ -0,0 +1,63 @@
+# mail-parser-wasm-worker
+
+> [!NOTE]
+> 如果你使用了 webhook 转发，或者 telegram bot 接受邮件，但是邮件内容是乱码，或者无法解析，你对解析的需要更高的要求，可以使用这个功能。
+
+## 修改代码
+
+```bash
+cd worker
+pnpm add mail-parser-wasm-worker
+```
+
+编辑 `worker/src/common.ts`, 取消注释这段代码，使用 mail-parser-wasm-worker 来解析邮件
+
+```ts
+export const commonParseMail = async (raw_mail: string | undefined | null): Promise<{
+    sender: string,
+    subject: string,
+    text: string,
+    html: string
+} | undefined> => {
+    if (!raw_mail) {
+        return undefined;
+    }
+    // 取消注释这段代码，使用 mail-parser-wasm-worker 来解析邮件 start
+    // TODO: WASM parse email
+    try {
+        const { parse_message_wrapper } = await import('mail-parser-wasm-worker');
+
+        const parsedEmail = parse_message_wrapper(raw_mail);
+        return {
+            sender: parsedEmail.sender || "",
+            subject: parsedEmail.subject || "",
+            text: parsedEmail.text || "",
+            html: parsedEmail.body_html || "",
+        };
+    } catch (e) {
+        console.error("Failed use mail-parser-wasm-worker to parse email", e);
+    }
+    // 取消注释这段代码，使用 mail-parser-wasm-worker 来解析邮件 end
+    try {
+        const { default: PostalMime } = await import('postal-mime');
+        const parsedEmail = await PostalMime.parse(raw_mail);
+        return {
+            sender: parsedEmail.from ? `${parsedEmail.from.name} <${parsedEmail.from.address}>` : "",
+            subject: parsedEmail.subject || "",
+            text: parsedEmail.text || "",
+            html: parsedEmail.html || "",
+        };
+    }
+    catch (e) {
+        console.error("Failed use PostalMime to parse email", e);
+    }
+    return undefined;
+}
+```
+
+## 部署
+
+```bash
+cd worker
+pnpm run deploy
+```
--- a/vitepress-docs/docs/zh/guide/feature/new-address-api.md
+++ b/vitepress-docs/docs/zh/guide/feature/new-address-api.md
@@ -0,0 +1,25 @@
+# 新建邮箱地址 API
+
+## 通过 admin API 新建邮箱地址
+
+这是一个 `python` 的例子，使用 `requests` 库发送邮件。
+
+```python
+res = requests.post(
+    # 替换 xxxx.xxxx 为你的 worker 域名
+    "https://xxxx.xxxx/admin/new_address",
+    json={
+        # 是否启用前缀 (True/False)
+        "enablePrefix": True,
+        "name": "<邮箱名称>",
+        "domain": "<邮箱域名>",
+    },
+    headers={
+        'x-admin-auth': "<你的网站admin密码>",
+        "Content-Type": "application/json"
+    }
+)
+
+# 返回值 {"jwt": "<Jwt>"}
+print(res.json())
+```
--- a/vitepress-docs/docs/zh/guide/feature/s3-attachment.md
+++ b/vitepress-docs/docs/zh/guide/feature/s3-attachment.md
@@ -0,0 +1,34 @@
+# 配置 S3 附件
+
+## 配置
+
+> [!NOTE]
+> 如果不需要 S3 附件, 可跳过此步骤
+
+在 Cloudflare 创建一个 R2 bucket, 你也可以使用其他的 S3 服务(如有 bug 请提 issue)
+
+参考: [配置 Cloudflare R2 的 cors](https://developers.cloudflare.com/r2/buckets/cors/#add-cors-policies-from-the-dashboard)
+
+参考 [Cloudflare R2  s3 toke](https://developers.cloudflare.com/r2/api/s3/tokens/) 创建 token, 拿到 `ENDPOINT`, `Access Key ID` 和 `Secret Access Key`，然后执行下面的命令添加到 secrets 中
+
+> [!NOTE]
+> 你也可以在 Cloudflare worker 的 UI 界面中添加 `secrets`
+
+```bash
+cd worker
+pnpm wrangler secret put S3_ENDPOINT
+pnpm wrangler secret put S3_ACCESS_KEY_ID
+pnpm wrangler secret put S3_SECRET_ACCESS_KEY
+# 请注意这里的 bucket 是你的 bucket 名称
+pnpm wrangler secret put S3_BUCKET
+```
+
+## 使用
+
+保存附件
+
+![S3 save](/feature/s3-save.png)
+
+下载附件
+
+![S3 download](/public/feature/s3-download.png)
--- a/vitepress-docs/docs/zh/guide/feature/subdomain.md
+++ b/vitepress-docs/docs/zh/guide/feature/subdomain.md
@@ -1,5 +1,9 @@
 # 配置子域名邮箱

+::: warning
+子域名邮箱发送邮件可能无法发送邮件，建议使用主域名邮箱发送邮件，子域名邮箱仅用于接收邮件。
+:::
+
 参考

 - [配置子域名邮箱](https://github.com/dreamhunter2333/cloudflare_temp_email/issues/164#issuecomment-2082612710)
--- a/vitepress-docs/docs/zh/guide/feature/telegram.md
+++ b/vitepress-docs/docs/zh/guide/feature/telegram.md
@@ -0,0 +1,38 @@
+# 配置 Telegram Bot
+
+## Telegram Bot 配置
+
+> [!NOTE]
+> 如果不需要 Telegram Bot, 可跳过此步骤
+
+请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 secrets 中
+
+你也可以在 Cloudflare 的 UI 界面中添加 `secrets`
+
+```bash
+pnpm wrangler secret put TELEGRAM_BOT_TOKEN
+```
+
+## Bot
+
+- 可设置白名单用户
+- 点击`初始化`即可完成配置。
+- 点击`查看状态`，可以查看当前配置的状态。
+
+![telegram](/feature/telegram.png)
+
+## Mini App
+
+```bash
+cd frontend
+pnpm install
+cp .env.example .env.prod
+# --project-name 可以单独为 mini app 创建一个 pages, 你也可以公用一个 pages，但是可能遇到 js 加载不了的问题
+pnpm run deploy:telegram --project-name=<你的项目名称>
+```
+
+部署完成后，请在 admin 后台的 `设置` -> `电报小程序` 页面 `电报小程序 URL`。
+
+请在 `@BotFather` 处执行 `/setmenubutton`，然后输入你的网页地址，设置左下角的 `Open App` 按钮。
+
+你也可以在 `@BotFather` 处执行 `/newapp` 新建 app 来获得 mini app 的链接
--- a/vitepress-docs/docs/zh/guide/github-action.md
+++ b/vitepress-docs/docs/zh/guide/github-action.md
@@ -17,5 +17,7 @@
 - `BACKEND_TOML`: 后端配置文件，[参考此处](/zh/guide/cli/worker.html#修改-wrangler-toml-配置文件)
 - `FRONTEND_ENV`: 前端配置文件，请复制 `frontend/.env.example` 的内容，[并参考此处修改](/zh/guide/cli/pages.html)
 - `FRONTEND_NAME`: 你在 Cloudflare Pages 创建的项目名称，可通过 [用户界面](https://temp-mail-docs.awsl.uk/zh/guide/ui/pages.html) 或者 [命令行](https://temp-mail-docs.awsl.uk/zh/guide/cli/pages.html) 创建
+- `FRONTEND_BRANCH`: (可选) pages 部署的分支，可不配置，默认 `production`
+- `TG_FRONTEND_NAME`: (可选) 你在 Cloudflare Pages 创建的项目名称，同 `FRONTEND_NAME`，如果需要 Telegram Mini App 功能，请填写

 1. 打开仓库的 `Actions` 页面，找到 `Deploy Backend Production` 和 `Deploy Frontend`，点击 `Run workflow` 选择分支手动部署
--- a/vitepress-docs/docs/zh/guide/ui/worker.md
+++ b/vitepress-docs/docs/zh/guide/ui/worker.md
@@ -45,3 +45,10 @@

    ![worker-kv](/ui_install/worker-kv.png)
    ![worker-kv-bind](/ui_install/worker-kv-bind.png)
+
+9. Telegram Bot 配置
+
+    > [!NOTE]
+    > 如果不需要 Telegram Bot, 可跳过此步骤
+
+    请先创建一个 Telegram Bot，然后获取 `token`，然后执行下面的命令，将 `token` 添加到 `Variables` 中, Name: `TELEGRAM_BOT_TOKEN`
--- a/vitepress-docs/package.json
+++ b/vitepress-docs/package.json
@@ -4,9 +4,9 @@
  "version": "0.2.6",
  "type": "module",
  "devDependencies": {
-    "@types/node": "^20.12.7",
-    "vitepress": "^1.1.0",
-    "wrangler": "^3.50.0"
+    "@types/node": "^20.14.10",
+    "vitepress": "^1.2.3",
+    "wrangler": "^3.63.1"
  },
  "scripts": {
    "dev": "vitepress dev docs",
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dream Hunter	d0ccc3ded1	v0.6.1	2024-07-22 13:09:42 +08:00
Dream Hunter	163d9451f7	feat: worker: newAddress if domain is not set, use the first domain (#358 )	2024-07-22 13:05:50 +08:00
Dream Hunter	60dda7e3fe	feat: add ANNOUNCEMENT (#357 )	2024-07-22 13:01:38 +08:00
Dream Hunter	384eb9b041	fix: imap proxy do not support password && cleanup days translate (#356 )	2024-07-19 22:40:53 +08:00
tqjason	38816cbf0f	Add new workflow action and Fix cleanup bug (#355 ) * Create frontend_pagefunction_deploy.yaml * Update frontend_pagefunction_deploy.yaml * Update cleanup_api.ts * Update common.ts * Update cleanup_api.ts * Update common.ts	2024-07-19 22:34:01 +08:00
Dream Hunter	d7d1ba6b64	feat: wrangler d1 execute dev add --remote (#352 )	2024-07-15 12:04:14 +08:00
Dream Hunter	14725e9e9f	feat: add USER_DEFAULT_ROLE (#351 )	2024-07-14 20:44:03 +08:00
Dream Hunter	2c1e63b8bc	feat: add USER_DEFAULT_ROLE (#350 )	2024-07-14 20:38:55 +08:00
Dream Hunter	f3a1d980c5	fix: roleDonotExist tip (#349 )	2024-07-14 20:09:21 +08:00
Dream Hunter	75c48beb3b	feat: add USER_ROLES && admin pages search when keybord enter && auto trim (#348 ) * feat: add USER_ROLES * feat: admin pages search when keybord enter && auto trim * feat: update version to v0.6.0	2024-07-14 19:57:43 +08:00
Dream Hunter	26ccfdd6e0	feat: only allow address [a-z0-9] (#347 )	2024-07-13 19:03:54 +08:00
刘志聪	aa8f3b4d46	fix: remove useless sql (#342 )	2024-07-10 01:06:00 +08:00
Dream Hunter	a749c829d2	feat: update docs (#340 )	2024-07-08 19:09:37 +08:00
Dream Hunter	4b2caf1a4b	feat: update docs (#339 )	2024-07-08 19:02:14 +08:00
Dream Hunter	80a8848ed8	feat: remove apiV1 and tables && update admin/statistics (#337 )	2024-07-08 12:33:43 +08:00
Dream Hunter	dcfc1b3721	Update CHANGELOG.md	2024-07-07 12:55:29 +08:00
Dream Hunter	b0a0a6a1ef	feat: updage dependencies (#336 )	2024-07-06 20:26:54 +08:00
Dream Hunter	00c671cf14	feat: logo click 5 time to admin page && fix: 401 cannot show auth modal (#335 )	2024-07-06 20:21:21 +08:00
Dream Hunter	0b78d1ff4a	Update CHANGELOG.md	2024-07-04 13:38:00 +08:00
Dream Hunter	d152a7ce9f	feat: allow admin and user delete mail, sendbox, send access(only admin) (#331 )	2024-07-04 13:31:33 +08:00
Dream Hunter	21fed3fb00	feat: allow admin and user delete mail, sendbox, send access(only admin) (#329 )	2024-07-04 13:25:14 +08:00
Dream Hunter	9448b3c754	fix: sendVerificationCode do not check cfToken when no TurnstileSiteKey (#325 )	2024-06-29 01:01:46 +08:00
Dream Hunter	f1827f223a	feat: docs: github actions add FRONTEND_BRANCH (#324 )	2024-06-28 23:10:35 +08:00
Dream Hunter	2a0a34869e	feat: github actions add FRONTEND_BRANCH env (#323 )	2024-06-28 23:04:08 +08:00
Dream Hunter	881e66e484	feat: add DOMAIN_LABELS for chinese domain label (#322 )	2024-06-28 22:25:06 +08:00
Dream Hunter	de7c3d5176	Update README.md	2024-06-12 14:52:16 +08:00
Dream Hunter	720d097ed7	Update README.md	2024-06-12 14:51:32 +08:00
Dream Hunter	53a03dc6a0	Update README.md	2024-06-12 14:35:22 +08:00
Dream Hunter	72b99e0c5e	feat: upgeade npm packages (#311 )	2024-06-12 13:57:26 +08:00
Dream Hunter	c4d9fe1fb9	feat: docs: add new-address-api (#309 )	2024-06-12 13:53:40 +08:00
Dream Hunter	af9f46ba65	fix: smtp imap proxy sever: support senbox v2 (#306 )	2024-06-09 13:35:26 +08:00
Dream Hunter	8bfd76bf71	Update README.md	2024-06-07 00:03:47 +08:00
Dream Hunter	dd477fe2c8	Update CHANGELOG.md	2024-06-06 21:45:57 +08:00
Dream Hunter	0db611bb3e	feat: add MIN_ADDRESS_LEN && MAX_ADDRESS_LEN (#304 )	2024-06-06 21:44:22 +08:00
Dream Hunter	6225f6521a	fix: parseMail tg bot (#302 )	2024-06-04 22:51:28 +08:00
Dream Hunter	da2e72e523	feat: add mail-parser-wasm-worker (#301 )	2024-06-04 21:57:42 +08:00
Dream Hunter	c5d01e09e8	feat: change version (#294 )	2024-06-01 21:31:30 +08:00
Dream Hunter	201c7658be	feat: UI: admin mail page style add margin-top: 10px (#293 )	2024-06-01 21:27:45 +08:00
Dream Hunter	77155299e0	feat: add mailbox multi delete and download (#292 )	2024-06-01 21:23:17 +08:00
Dream Hunter	9725407c77	feat: add s3 attachment (#291 )	2024-06-01 20:08:42 +08:00
Dream Hunter	e91bbe273a	feat: UI i18n depends on router (#290 )	2024-06-01 12:13:44 +08:00
Dream Hunter	b792c196c1	feat: UI i18n depends on router (#289 )	2024-06-01 12:12:13 +08:00
Dream Hunter	7a368d7b23	feat: add global forward address list (#288 )	2024-05-31 23:21:12 +08:00
Dream Hunter	f882e4cf97	feat: add Local Address Manage (#285 )	2024-05-29 13:40:02 +08:00
Dream Hunter	00abf79417	fix: cannot delete addres when not bind KV (#284 )	2024-05-29 12:08:56 +08:00
Dream Hunter	1f8edbc295	feat: add TITLE in worker for custom website title (#276 )	2024-05-26 16:21:27 +08:00
Dream Hunter	268f3d6446	Update CHANGELOG.md	2024-05-26 15:35:18 +08:00
Dream Hunter	8dc9d32a7e	feat: add resend for send mail (#275 )	2024-05-26 15:30:18 +08:00
Dream Hunter	3b6736924b	feat: add resend for send mail (#274 )	2024-05-26 12:37:11 +08:00
Dream Hunter	dc14338b69	fix: telegram bot golbalPush (#273 )	2024-05-25 17:37:39 +08:00
Dream Hunter	954ae2dfb1	fix: telegram bot golbalPush (#272 )	2024-05-25 14:38:33 +08:00
Dream Hunter	6d55acdd42	fix: telegram bot golbalPush (#271 )	2024-05-25 14:34:16 +08:00
Dream Hunter	03bb210016	fix: telegram bot golbalPush (#270 )	2024-05-25 14:20:34 +08:00
Dream Hunter	bf3c372d8c	feat: telegram bot global push (#269 )	2024-05-25 14:07:00 +08:00
Dream Hunter	9414f7a977	Update README.md	2024-05-25 11:53:23 +08:00
Dream Hunter	32440706d2	feat: add sendmail sunset in readme (#267 )	2024-05-23 12:32:07 +08:00
Dream Hunter	c976664f4e	feat: UI: lazy load (#266 )	2024-05-23 12:23:43 +08:00
Dream Hunter	aa04dc4efa	feat: smtp_proxy_server use httpx (#265 )	2024-05-22 22:24:59 +08:00
Dream Hunter	02e3e755e7	feat: docs: Telegram Mini App (#264 )	2024-05-22 20:57:30 +08:00
Dream Hunter	37ed2955ff	fix: webhook JSON.stringify (#263 )	2024-05-22 20:48:03 +08:00
Dream Hunter	dd49768cfc	feat: smtp_proxy_server update package (#262 )	2024-05-21 23:53:32 +08:00
Dream Hunter	9ec11f7040	fix: telegram bot/miniapp bugs (#261 )	2024-05-21 22:45:48 +08:00
Dream Hunter	2533257b68	fix: telegram bot/miniapp bugs (#259 )	2024-05-21 13:32:47 +08:00
Dream Hunter	96ea81e055	fix: telegram bot/miniapp bugs (#258 )	2024-05-21 13:28:02 +08:00
Dream Hunter	8459e0c306	fix: telegram bot/miniapp bugs (#257 )	2024-05-21 13:18:15 +08:00
Dream Hunter	91d7896e65	feat: telegram mini app open mail from bot (#256 )	2024-05-21 02:03:06 +08:00
Dream Hunter	69771fc1d1	feat: telegram bot unbind && delete address (#254 )	2024-05-20 13:23:41 +08:00
Dream Hunter	c00382259a	fix: telegram mini app pipeline (#253 )	2024-05-19 11:37:06 +08:00
Dream Hunter	8ac96bff1f	fix: telegram mini app pipeline (#252 )	2024-05-19 11:34:30 +08:00
Dream Hunter	9f3ff7b980	fix: telegram mini app (#251 )	2024-05-19 11:32:57 +08:00
Dream Hunter	870b7b9198	feat: add telegram mini app (#250 )	2024-05-19 00:35:10 +08:00
Dream Hunter	46576316e6	Update CHANGELOG.md	2024-05-18 17:08:41 +08:00
Dream Hunter	a5ff4f2d90	feat: SMTP IMAP Proxy: add sendbox && UI: sendbox use split view (#248 )	2024-05-18 17:02:21 +08:00
Dream Hunter	745e36f838	feat: UI changes (#247 )	2024-05-18 14:46:24 +08:00
Dream Hunter	a351839408	fix build (#245 )	2024-05-18 14:07:52 +08:00
Dream Hunter	ca00a877ad	feat: telegram bot TelegramSettings && webhook (#244 ) * feat: telegram bot TelegramSettings * feat: webhook	2024-05-18 14:02:18 +08:00
Dream Hunter	53a06fc9d6	Update CHANGELOG.md	2024-05-17 00:12:14 +08:00
Dream Hunter	607c04c810	fix: smtp_proxy: update raise imap4.NoSuchMailbox (#243 )	2024-05-17 00:06:43 +08:00
Dream Hunter	243dac976b	fix: smtp_proxy: cannot decode 8bit && tg bot new random address (#242 )	2024-05-16 18:18:16 +08:00
Dream Hunter	4bd876a5f4	feat: docs: Telegram Bot (#241 )	2024-05-16 13:27:26 +08:00
Dream Hunter	bbc4c05d69	fix: remove cleanup address due to many table need to be clean (#240 )	2024-05-16 13:11:29 +08:00
Dream Hunter	78badf2eaa	feat: telegram bot (#238 )	2024-05-16 12:57:23 +08:00
Dream Hunter	6bb6fa8298	feat: remove mailV1Alert && fix mobile showSideMargin (#236 )	2024-05-14 14:44:47 +08:00
Dream Hunter	a5b5335137	feat: add about page (#235 )	2024-05-14 13:25:27 +08:00
Dream Hunter	f2685f9830	Update README.md	2024-05-14 12:56:34 +08:00
Dream Hunter	45bc5cad9e	Update README.md	2024-05-14 12:52:43 +08:00
Dream Hunter	ea4ce9bf63	feat: add page functions proxy to make response faster (#234 )	2024-05-14 12:43:03 +08:00
Dream Hunter	9de2d23be1	feat: add version for frontend && backend (#230 )	2024-05-12 18:31:43 +08:00
Dream Hunter	62bec9ef90	fix: Maintenance wrong label (#229 )	2024-05-12 18:09:42 +08:00
Dream Hunter	edc110b6ac	fix: imap server (#227 )	2024-05-12 17:47:01 +08:00
Dream Hunter	3fc8bba234	Update CHANGELOG.md	2024-05-12 11:58:48 +08:00