release: v0.7.0 (#387 )

feat: add DISABLE_ADMIN_PASSWORD_CHECK (#386 )
feat: add passkey (#384 )
2026-05-12 11:39:56 +08:00 · 2024-08-11 00:21:15 +08:00 · 2024-08-11 00:10:16 +08:00 · 2024-08-10 23:56:05 +08:00 · 2024-08-04 21:02:11 +08:00 · 2024-08-04 14:36:24 +08:00
151 changed files with 12777 additions and 4476 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/.github/workflows/pr_agent.yml
+++ b/.github/workflows/pr_agent.yml
@@ -0,0 +1,26 @@
+name: Codium PR Agent
+
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+  issue_comment:
+jobs:
+  pr_agent_job:
+    if: ${{ github.event.sender.type != 'Bot' }}
+    runs-on: ubuntu-latest
+    permissions:
+      issues: write
+      pull-requests: write
+    name: Run pr agent on every pull request, respond to user comments
+    steps:
+      - name: PR Agent action step
+        id: pragent
+        uses: Codium-ai/pr-agent@main
+        env:
+          PR_REVIEWER.REQUIRE_TESTS_REVIEW: "false"
+          OPENAI_KEY: ${{ secrets.OPENAI_KEY }}
+          OPENAI_API_BASE: ${{ secrets.OPENAI_API_BASE }}
+          CONFIG.MODEL: "gpt-4o"
+          CONFIG.MODEL_TURBO: "gpt-4o"
+          OPENAI.API_BASE: ${{ secrets.OPENAI_API_BASE }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_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,146 @@
+<!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG

-## main branch
+## v0.7.0
+
+### Breaking Changes
+
+DB changes: 增加用户 `passkey` 表, 需要执行 `db/2024-08-10-patch.sql` 更新 `D1` 数据库
+
+### Changes
+
+- Docs: Update new-address-api.md (#360)
+- feat: worker 增加 `ADMIN_USER_ROLE` 配置, 用于配置管理员用户角色，此角色的用户可访问 admin 管理页面 (#363)
+- feat: worker 增加 `DISABLE_SHOW_GITHUB` 配置, 用于配置是否显示 github 链接
+- feat: worker 增加 `NO_LIMIT_SEND_ROLE` 配置, 用于配置可以无限发送邮件的角色
+- feat: 用户增加 `passkey` 登录方式, 用于用户登录, 无需输入密码
+- feat: worker 增加 `DISABLE_ADMIN_PASSWORD_CHECK` 配置, 用于配置是否禁用 admin 控制台密码检查, 若你的网站只可私人访问，可通过此禁用检查
+
+## 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 +280,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 +335,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/2024-08-10-patch.sql
+++ b/db/2024-08-10-patch.sql
@@ -0,0 +1,14 @@
+CREATE TABLE IF NOT EXISTS user_passkeys (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER NOT NULL,
+    passkey_name TEXT NOT NULL,
+    passkey_id TEXT NOT NULL,
+    passkey TEXT NOT NULL,
+    counter INTEGER DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_passkeys_user_id ON user_passkeys(user_id);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_user_passkeys_user_id_passkey_id ON user_passkeys(user_id, passkey_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,28 @@ 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);
+
+CREATE TABLE IF NOT EXISTS user_passkeys (
+    id INTEGER PRIMARY KEY,
+    user_id INTEGER NOT NULL,
+    passkey_name TEXT NOT NULL,
+    passkey_id TEXT NOT NULL,
+    passkey TEXT NOT NULL,
+    counter INTEGER DEFAULT 0,
+    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX IF NOT EXISTS idx_user_passkeys_user_id ON user_passkeys(user_id);
+
+CREATE UNIQUE INDEX IF NOT EXISTS idx_user_passkeys_user_id_passkey_id ON user_passkeys(user_id, passkey_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,49 @@
 {
  "name": "cloudflare_temp_email",
-  "version": "0.0.0",
+  "version": "0.7.0",
  "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": {
+    "@simplewebauthn/browser": "^10.0.0",
+    "@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 = {}) => {
@@ -21,20 +22,21 @@ const apiFetch = async (path, options = {}) => {
            data: options.body || null,
            headers: {
                'x-user-token': userJwt.value,
+                'x-user-access-token': userSettings.value.access_token,
                'x-custom-auth': auth.value,
                'x-admin-auth': adminAuth.value,
                'Authorization': `Bearer ${jwt.value}`,
                '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 +55,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 +74,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 +105,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: '取消全选',
    }
  }
 });
@@ -124,22 +147,31 @@ const refresh = async () => {
    const { results, count: totalCount } = await props.fetchMailData(
      pageSize.value, (page.value - 1) * pageSize.value
    );
+    loading.value = true;
    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) {
    message.error(error.message || "error");
    console.error(error);
+  } finally {
+    loading.value = false;
  }
 };

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

@@ -186,6 +218,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 +315,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 +354,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 +458,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 +471,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 +487,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 +539,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,34 @@
-import { ref } from "vue";
-import { createGlobalState, useStorage, useDark, useToggle } from '@vueuse/core'
+import { computed, ref } from "vue";
+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,
+            showGithub: true,
        })
        const settings = ref({
            fetched: false,
-            has_v1_mails: false,
            send_balance: 0,
            address: '',
            auto_reply: {
@@ -44,7 +53,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 +75,28 @@ export const useGlobalState = createGlobalState(
            user_email: '',
            /** @type {number} */
            user_id: 0,
+            /** @type {boolean} */
+            is_admin: false,
+            /** @type {string | null} */
+            access_token: null,
+            /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
+            user_role: null,
        });
+        const showAdminPage = computed(() => !!adminAuth.value || userSettings.value.is_admin);
+        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 +112,9 @@ export const useGlobalState = createGlobalState(
            userSettings,
            globalTabplacement,
            useSideMargin,
+            telegramApp,
+            isTelegram,
+            showAdminPage,
        }
    },
 )
--- 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,15 @@ 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, showAdminPage
 } = useGlobalState()
 const message = useMessage()

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

 const { t } = useI18n({
-  locale: localeCache.value || 'zh',
  messages: {
    en: {
      accessHeader: 'Admin Password',
@@ -40,14 +43,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,21 +64,25 @@ const { t } = useI18n({
      account: '账号',
      account_create: '创建账号',
      account_settings: '账号设置',
+      user: '用户',
      user_management: '用户管理',
      user_settings: '用户设置',
      unknow: '无收件人邮件',
      senderAccess: '发件权限控制',
      sendBox: '发件箱',
+      telegram: '电报机器人',
+      webhook: 'Webhook',
      statistics: '统计',
      maintenance: '维护',
      appearance: '外观',
+      about: '关于',
      ok: '确定',
    }
  }
 });

 onMounted(async () => {
-  if (!adminAuth.value) {
+  if (!showAdminPage.value) {
    showAdminAuth.value = true;
    return;
  }
@@ -90,34 +101,52 @@ onMounted(async () => {
        </n-button>
      </template>
    </n-modal>
-    <n-tabs type="card" v-model:value="adminTab" :placement="globalTabplacement">
+    <n-tabs v-if="showAdminPage" 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 +156,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, showAdminPage,
+    showAuth, 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,14 +124,17 @@ 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",
                icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
            }
        ),
-        show: !!adminAuth.value,
+        show: showAdminPage.value,
        key: "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,16 +188,47 @@ 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 })
            }
        ),
+        show: openSettings.value?.showGithub,
        key: "github"
    }
 ]);

+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);
+    try {
+        await api.getUserSettings(message);
+    } catch (error) {
+        console.error(error);
+    }
 });
 </script>

@@ -188,10 +236,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,
-    adminTab, adminMailTabAddress, adminSendBoxTabAddress
+    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}`
@@ -252,16 +252,12 @@ watch([page, pageSize], async () => {
 })

 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
    await fetchData()
 })
 </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 +265,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 +280,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 +294,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
@@ -6,13 +6,9 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';

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

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            addressQueryTip: 'Leave blank to query all addresses',
@@ -30,12 +26,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,23 +42,23 @@ const fetchMailData = async (limit, offset) => {
    );
 }

-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-})
+const deleteMail = async (curMailId) => {
+    await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
+};
 </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
@@ -1,12 +1,7 @@
 <script setup>
-import { onMounted } from 'vue';
-
-import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';

-const { adminAuth, showAdminAuth } = useGlobalState()
-
 const fetchMailUnknowData = async (limit, offset) => {
    return await api.fetch(
        `/admin/mails_unknow`
@@ -15,16 +10,13 @@ const fetchMailUnknowData = async (limit, offset) => {
    );
 }

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

 <template>
-    <div v-if="adminAuth">
-        <MailBox :enableUserDeleteEmail="false" :fetchMailData="fetchMailUnknowData" />
+    <div 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
@@ -1,12 +1,10 @@
 <script setup>
-import { ref, h, onMounted, watch } from 'vue';
+import { ref, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n'
 import { CleaningServicesFilled } from '@vicons/material'

-import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, adminAuth, showAdminAuth } = useGlobalState()
 const message = useMessage()
 const cleanupModel = ref({
    enableMailsAutoCleanup: false,
@@ -20,14 +18,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 +31,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: "立即清理",
@@ -83,10 +78,6 @@ const save = async () => {
 }

 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
    await fetchData();
 })
 </script>
@@ -94,8 +85,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 +114,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
@@ -4,24 +4,25 @@ import { useI18n } from 'vue-i18n'
 import { User, UserCheck, MailBulk } from '@vicons/fa'
 import { SendOutlined } from '@vicons/material'

-import { useGlobalState } from '../../store'
 import { api } from '../../api'

-const { localeCache, 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 +30,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");
@@ -51,44 +58,68 @@ const fetchStatistics = async () => {
 }

 onMounted(async () => {
-    if (!adminAuth.value) {
-        return;
-    }
    await fetchStatistics()
 })
 </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,74 @@
+<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, loading } = 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
+            })
+        });
+        loading.value = true;
+        return await processItem(res);
+    }
+    catch (error) {
+        console.error(error);
+        return {};
+    }
+    finally {
+        loading.value = false;
+    }
+};
+
+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',
@@ -32,25 +31,26 @@ const { t } = useI18n({

 onMounted(async () => {
    await api.getUserOpenSettings(message);
-    await api.getUserSettings(message);
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
 });
 </script>

 <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
@@ -1,21 +1,19 @@
 <script setup>
 import { useMessage } from 'naive-ui'
-import { useRouter } from 'vue-router'
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import { useI18n } from 'vue-i18n'

 import { api } from '../../api';
 import { useGlobalState } from '../../store'
 import { hashPassword } from '../../utils';
+import { startAuthentication } from '@simplewebauthn/browser';

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

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

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            login: 'Login',
@@ -34,6 +32,7 @@ const { t } = useI18n({
            pleaseInputCode: 'Please input code',
            pleaseCompleteTurnstile: 'Please complete turnstile',
            pleaseLogin: 'Please login',
+            loginWithPasskey: 'Login with Passkey',
        },
        zh: {
            login: '登录',
@@ -52,6 +51,7 @@ const { t } = useI18n({
            pleaseInputCode: '请输入验证码',
            pleaseCompleteTurnstile: '请完成人机验证',
            pleaseLogin: '请登录',
+            loginWithPasskey: '使用 Passkey 登录',
        }
    }
 });
@@ -99,7 +99,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;
    }
@@ -157,6 +157,33 @@ const emailSignup = async () => {
    }
 };

+const passkeyLogin = async () => {
+    try {
+        const options = await api.fetch(`/user_api/passkey/authenticate_request`, {
+            method: 'POST',
+            body: JSON.stringify({
+                domain: location.hostname,
+            })
+        })
+        const credential = await startAuthentication(options)
+
+        // Send the result to the server and return the promise.
+        const res = await api.fetch(`/user_api/passkey/authenticate_response`, {
+            method: 'POST',
+            body: JSON.stringify({
+                origin: location.origin,
+                domain: location.hostname,
+                credential
+            })
+        })
+        userJwt.value = res.jwt;
+        location.reload();
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    }
+};
+
 onMounted(async () => {

 });
@@ -179,6 +206,10 @@ onMounted(async () => {
                    <n-button @click="showModal = true" type="info" quaternary size="tiny">
                        {{ t('forgotPassword') }}
                    </n-button>
+                    <n-divider />
+                    <n-button @click="passkeyLogin" type="primary" block secondary strong>
+                        {{ t('loginWithPasskey') }}
+                    </n-button>
                </n-form>
            </n-tab-pane>
            <n-tab-pane v-if="userOpenSettings.enable" name="signup" :tab="t('register')">
@@ -229,7 +260,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
@@ -1,29 +1,58 @@
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { startRegistration } from '@simplewebauthn/browser';
+import { NButton, NPopconfirm } from 'naive-ui'

 import { useGlobalState } from '../../store'
 import { api } from '../../api'

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

 const showLogout = ref(false)
+const showCreatePasskey = ref(false)
+const passkeyName = ref('')
+const showPasskeyList = ref(false)
+const showRenamePasskey = ref(false)
+const currentPasskeyId = ref(null)
+const currentPasskeyName = ref('')

 const { t } = useI18n({
-    locale: localeCache.value || 'zh',
    messages: {
        en: {
            logout: 'Logout',
            logoutConfirm: 'Are you sure you want to logout?',
            passordTip: 'The server will only receive the hash value of the password, and will not receive the plaintext password, so it cannot view or retrieve your password. If the administrator enables email verification, you can reset the password in incognito mode',
+            createPasskey: 'Create Passkey',
+            showPasskeyList: 'Show Passkey List',
+            passkeyCreated: 'Passkey created successfully',
+            passkeyNamePlaceholder: 'Please enter the passkey name or leave it empty to generate a random one',
+            renamePasskey: 'Rename Passkey',
+            deletePasskey: 'Delete Passkey',
+            passkey_name: 'Passkey Name',
+            created_at: 'Created At',
+            updated_at: 'Updated At',
+            actions: 'Actions',
+            renamePasskey: 'Rename Passkey',
+            renamePasskeyNamePlaceholder: 'Please enter the new passkey name',
        },
        zh: {
            logout: '退出登录',
            logoutConfirm: '确定要退出登录吗？',
            passordTip: '服务器只会接收到密码的哈希值，不会接收到明文密码，因此无法查看或者找回您的密码, 如果管理员启用了邮件验证您可以在无痕模式重置密码',
+            createPasskey: '创建 Passkey',
+            showPasskeyList: '查看 Passkey 列表',
+            passkeyCreated: 'Passkey 创建成功',
+            passkeyNamePlaceholder: '请输入 Passkey 名称或者留空自动生成',
+            renamePasskey: '重命名 Passkey',
+            deletePasskey: '删除 Passkey',
+            passkey_name: 'Passkey 名称',
+            created_at: '创建时间',
+            updated_at: '更新时间',
+            actions: '操作',
+            renamePasskey: '重命名 Passkey',
+            renamePasskeyNamePlaceholder: '请输入新的 Passkey 名称',
        }
    }
 });
@@ -34,18 +63,145 @@ const logout = async () => {
    location.reload()
 }

-const fetchData = async () => {
+const createPasskey = async () => {
+    try {
+        const options = await api.fetch(`/user_api/passkey/register_request`, {
+            method: 'POST',
+            body: JSON.stringify({
+                domain: location.hostname,
+            })
+        })
+        const credential = await startRegistration(options)
+
+        // Send the result to the server and return the promise.
+        await api.fetch(`/user_api/passkey/register_response`, {
+            method: 'POST',
+            body: JSON.stringify({
+                origin: location.origin,
+                passkey_name: passkeyName.value || (
+                    (window.navigator.userAgentData?.platform || "Unknown")
+                    + ": " + Math.random().toString(36).substring(7)
+                ),
+                credential
+            })
+        })
+        message.success(t('passkeyCreated'));
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    } finally {
+        passkeyName.value = ''
+        showCreatePasskey.value = false
+    }
 }

-onMounted(async () => {
-    await fetchData()
-})
+const passkeyColumns = [
+    {
+        title: "Passkey ID",
+        key: "passkey_id"
+    },
+    {
+        title: t('passkey_name'),
+        key: "passkey_name"
+    },
+    {
+        title: t('created_at'),
+        key: "created_at"
+    },
+    {
+        title: t('updated_at'),
+        key: "updated_at"
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                [
+                    h(NButton,
+                        {
+                            tertiary: true,
+                            type: "primary",
+                            onClick: () => {
+                                showRenamePasskey.value = true;
+                                currentPasskeyId.value = row.passkey_id;
+                            }
+                        },
+                        { default: () => t('renamePasskey') }
+                    ),
+                    h(NPopconfirm,
+                        {
+                            onPositiveClick: async () => {
+                                try {
+                                    await api.fetch(`/user_api/passkey/${row.passkey_id}`, {
+                                        method: 'DELETE'
+                                    })
+                                    await fetchPasskeyList()
+                                } catch (e) {
+                                    console.error(e)
+                                    message.error(e.message)
+                                }
+                            }
+                        },
+                        {
+                            trigger: () => h(NButton,
+                                {
+                                    tertiary: true,
+                                    type: "error",
+                                },
+                                { default: () => t('deletePasskey') }
+                            ),
+                            default: () => `${t('deletePasskey')}?`
+                        }
+                    ),
+                ]
+            ])
+        }
+    }
+]
+
+const passkeyData = ref([])
+
+const fetchPasskeyList = async () => {
+    try {
+        const data = await api.fetch(`/user_api/passkey`)
+        passkeyData.value = data
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    }
+}
+
+const renamePasskey = async () => {
+    try {
+        await api.fetch(`/user_api/passkey/rename`, {
+            method: 'POST',
+            body: JSON.stringify({
+                passkey_name: currentPasskeyName.value,
+                passkey_id: currentPasskeyId.value
+            })
+        })
+        await fetchPasskeyList()
+    } catch (e) {
+        console.error(e)
+        message.error(e.message)
+    } finally {
+        currentPasskeyName.value = ''
+        showRenamePasskey.value = false
+    }
+}
 </script>

 <template>
    <div class="center" v-if="userSettings.user_email">
-        <n-card>
-            <n-alert :show-icon="false">
+        <n-card :bordered="false" embedded>
+            <n-button @click="showPasskeyList = true; fetchPasskeyList();" secondary block strong>
+                {{ t('showPasskeyList') }}
+            </n-button>
+            <n-button @click="showCreatePasskey = true" type="primary" secondary block strong>
+                {{ t('createPasskey') }}
+            </n-button>
+            <n-alert :show-icon="false" :bordered="false">
                <span>
                    {{ t('passordTip') }}
                </span>
@@ -54,6 +210,25 @@ onMounted(async () => {
                {{ t('logout') }}
            </n-button>
        </n-card>
+        <n-modal v-model:show="showCreatePasskey" preset="dialog" :title="t('createPasskey')">
+            <n-input v-model:value="passkeyName" :placeholder="t('passkeyNamePlaceholder')" />
+            <template #action>
+                <n-button :loading="loading" @click="createPasskey" size="small" tertiary type="primary">
+                    {{ t('createPasskey') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showRenamePasskey" preset="dialog" :title="t('renamePasskey')">
+            <n-input v-model:value="currentPasskeyName" :placeholder="t('renamePasskeyNamePlaceholder')" />
+            <template #action>
+                <n-button :loading="loading" @click="renamePasskey" size="small" tertiary type="primary">
+                    {{ t('renamePasskey') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showPasskeyList" preset="card" :title="t('showPasskeyList')">
+            <n-data-table :columns="passkeyColumns" :data="passkeyData" :bordered="false" embedded />
+        </n-modal>
        <n-modal v-model:show="showLogout" preset="dialog" :title="t('logout')">
            <p>{{ t('logoutConfirm') }}</p>
            <template #action>
@@ -79,5 +254,6 @@ onMounted(async () => {

 .n-button {
    margin-top: 10px;
+    margin-bottom: 10px;
 }
 </style>
--- 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,37 @@ 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"]
+# warning: no password or user check for admin portal
+# DISABLE_ADMIN_PASSWORD_CHECK = false
 # 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)
+# ADMIN_USER_ROLE = "admin" # the role which can access admin panel
+# 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,16 +107,21 @@ 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"
+# DISABLE_SHOW_GITHUB = true # Disable Show GitHub link
 # default send balance, if not set, it will be 0
 # DEFAULT_SEND_BALANCE = 1
+# NO_LIMIT_SEND_ROLE = "vip" # the role which can send emails without limit
 # 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_ADDRESS = 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 +169,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,40 @@ 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"]
+# 警告: 管理员控制台没有密码或用户检查
+# DISABLE_ADMIN_PASSWORD_CHECK = false
 # admin 联系方式，不配置则不显示，可配置任意字符串
 # ADMIN_CONTACT = "xx@xx.xxx"
+# DEFAULT_DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 默认用户可用的域名(未登录或未分配角色的用户)
 DOMAINS = ["xxx.xxx1" , "xxx.xxx2"] # 你的域名, 支持多个域名
+# 对于中文域名，可以使用 DOMAIN_LABELS 显示域名的中文展示名称
+# DOMAIN_LABELS = ["中文.xxx", "xxx.xxx2"]
+# 新用户默认角色, 仅在启用邮件验证时有效
+# USER_DEFAULT_ROLE = "vip"
+# admin 角色配置, 如果用户角色等于 ADMIN_USER_ROLE 则可以访问 admin 控制台
+# ADMIN_USER_ROLE = "admin" # the role which can access admin panel
+# 用户角色配置, 如果 domains 为空将使用 default_domains
+# 如果 prefix 为 null 将使用默认前缀, 如果 prefix 为空字符串将不使用前缀
+# USER_ROLES = [
+#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "vip", prefix = "vip" },
+#    { domains = ["xxx.xxx1" , "xxx.xxx2"], role = "admin", prefix = "" },
+# ]
 JWT_SECRET = "xxx" # 用于生成 jwt 的密钥, jwt 用于给用户登录以及鉴权
 BLACK_LIST = "" # 黑名单，用于过滤发件人，逗号分隔
 # 是否允许用户创建邮件, 不配置则不允许
@@ -52,16 +78,21 @@ ENABLE_USER_CREATE_EMAIL = true
 ENABLE_USER_DELETE_EMAIL = true
 # 允许自动回复邮件
 ENABLE_AUTO_REPLY = false
+# 是否启用 webhook
+# ENABLE_WEBHOOK = true
 # 前端界面页脚文本
 # COPYRIGHT = "Dream Hunter"
+# DISABLE_SHOW_GITHUB = true # 是否显示 GitHub 链接
 # 默认发送邮件余额，如果不设置，将为 0
 # DEFAULT_SEND_BALANCE = 1
+# NO_LIMIT_SEND_ROLE = "vip" # 可以无限发送邮件的角色
 # Turnstile 人机验证配置
 # CF_TURNSTILE_SITE_KEY = ""
 # CF_TURNSTILE_SECRET_KEY = ""
-# dkim config
-# DKIM_SELECTOR = "mailchannels" # 参考 DKIM 部分 mailchannels._domainkey 的 mailchannels
-# DKIM_PRIVATE_KEY = "" # 参考 DKIM 部分 priv_key.txt 的内容
+# telegram bot 最多绑定邮箱数量
+# TG_MAX_ADDRESS = 5
+# 全局转发地址列表，如果不配置则不启用，启用后所有邮件都会转发到列表中的地址
+# FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]

 # D1 数据库的名称和 ID 可以在 cloudflare 控制台查看
 [[d1_databases]]
@@ -83,6 +114,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/admin-user-management.md
+++ b/vitepress-docs/docs/zh/guide/feature/admin-user-management.md
@@ -1,7 +1,5 @@
 # Admin 用户相关

-默认不允许用户注册，可通过
-
 ## 用户管理页面

 ![admin-user-management](/feature/admin-user-management.png)
--- a/vitepress-docs/docs/zh/guide/feature/admin.md
+++ b/vitepress-docs/docs/zh/guide/feature/admin.md
@@ -1,7 +1,15 @@
 # Admin 控制台

-部署前端应用之后，访问 `/admin` 路径即可进入管理控制台。
+> [!NOTE]
+> 需要配置 `ADMIN_PASSWORDS` 或者 `ADMIN_USER_ROLE` 才可以访问 admin 控制台
+> admin 角色配置, 如果用户角色等于 ADMIN_USER_ROLE 则可以访问 admin 控制台

-需要在后端配置 `admin 控制台密码`, 不配置则不允许访问控制台。
+部署前端应用之后，点击 左上角 logo 5 次 或者访问 `/admin` 路径即可进入管理控制台。
+
+需要在后端配置 `ADMIN_PASSWORDS` 或者当前用户角色为 `ADMIN_USER_ROLE`, 则不允许访问控制台。

 ![admin](/feature/admin.png)
+
+## 如果你的网站只可私人访问，可通过此禁用检查
+
+`DISABLE_ADMIN_PASSWORD_CHECK = true`
--- 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,92 @@
+# 新建邮箱地址 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())
+```
+
+# 批量创建随机用户名邮箱地址 API 示例
+
+## 通过 admin API 批量新建邮箱地址
+
+这是一个 `python` 的例子，使用 `requests` 库发送邮件。
+
+```python
+import requests
+import random
+import string
+from concurrent.futures import ThreadPoolExecutor, as_completed
+
+
+def generate_random_name():
+    # 生成5位英文字符
+    letters1 = ''.join(random.choices(string.ascii_lowercase, k=5))
+    # 生成1-3个数字
+    numbers = ''.join(random.choices(string.digits, k=random.randint(1, 3)))
+    # 生成1-3个英文字符
+    letters2 = ''.join(random.choices(string.ascii_lowercase, k=random.randint(1, 3)))
+    # 组合成最终名称
+    return letters1 + numbers + letters2
+
+
+def fetch_email_data(name):
+    try:
+        res = requests.post(
+            "https://<worker 域名>",
+            json={
+                "enablePrefix": True,
+                "name": name,
+                "domain": "<邮箱域名>",
+            },
+            headers={
+                'x-admin-auth': "<你的网站admin密码>",
+                "Content-Type": "application/json"
+            }
+        )
+
+        if res.status_code == 200:
+            response_data = res.json()
+            email = response_data.get("address", "无地址")
+            jwt = response_data.get("jwt", "无jwt")
+            return f"{email}----{jwt}\n"
+        else:
+            print(f"请求失败，状态码: {res.status_code}")
+            return None
+    except requests.RequestException as e:
+        print(f"请求出现错误: {e}")
+        return None
+
+
+def generate_and_save_emails(num_emails):
+    with ThreadPoolExecutor(max_workers=30) as executor, open('email.txt', 'a') as file:
+        futures = [executor.submit(fetch_email_data, generate_random_name()) for _ in range(num_emails)]
+
+        for future in as_completed(futures):
+            result = future.result()
+            if result:
+                file.write(result)
+
+
+# 生成10个邮箱并追加到现有文件
+generate_and_save_emails(10)
+
+```
--- 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/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dream Hunter	bf1243f4c4	release: v0.7.0 (#387 )	2024-08-11 00:21:15 +08:00
Dream Hunter	15063b2e97	feat: add DISABLE_ADMIN_PASSWORD_CHECK (#386 )	2024-08-11 00:10:16 +08:00
Dream Hunter	fc07f1cd87	feat: add passkey (#384 )	2024-08-10 23:56:05 +08:00
Dream Hunter	9246550cc5	feat: add NO_LIMIT_SEND_ROLE (#373 )	2024-08-04 21:02:11 +08:00
Dream Hunter	979b6eae1a	feat: add SHOW_GITHUB config (#372 )	2024-08-04 14:36:24 +08:00
Dream Hunter	10da337a9c	feat: add SHOW_GITHUB config (#371 )	2024-08-04 14:34:35 +08:00
Dream Hunter	9c5e8857af	feat: add loading when process mails (#367 )	2024-07-27 23:14:18 +08:00
Dream Hunter	84b4baa99e	feat: add .github/workflows/pr_agent.yml (#366 )	2024-07-27 23:06:54 +08:00
Dream Hunter	b57d46244a	feat: add loading when process mails (#364 )	2024-07-27 22:30:38 +08:00
Dream Hunter	5faae8796d	feat: add ADMIN_USER_ROLE for user access admin panel (#363 )	2024-07-27 22:04:18 +08:00
666-eth	a0805bc0ce	Docs: Update new-address-api.md (#360 )	2024-07-23 13:47:37 +08:00
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