feat: add clear inbox and sent items functionality (#720)

- Add clear inbox/sent items APIs for users and admins
- Implement ENABLE_USER_DELETE_EMAIL permission checks
- Fix multilingual support for success messages
- Update Vue to 3.5.21 and Wrangler to 4.34.0
- Add UI components for clearing email data in account settings

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>

.flake8

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

.github/config/mail-parser-wasm-worker.patch

@@ -0,0 +1,44 @@
+diff --git a/worker/src/common.ts b/worker/src/common.ts
+index bd9bcc9..e7e2748 100644
+--- a/worker/src/common.ts
++++ b/worker/src/common.ts
+@@ -273,23 +273,23 @@ export const commonParseMail = async (parsedEmailContext: ParsedEmailContext): P
+     }
+     const raw_mail = parsedEmailContext.rawEmail;
+     // TODO: WASM parse email
+-    // try {
+-    //     const { parse_message_wrapper } = await import('mail-parser-wasm-worker');
++    try {
++        const { parse_message_wrapper } = await import('mail-parser-wasm-worker');
+ 
+-    //     const parsedEmail = parse_message_wrapper(raw_mail);
+-    //     parsedEmailContext.parsedEmail = {
+-    //         sender: parsedEmail.sender || "",
+-    //         subject: parsedEmail.subject || "",
+-    //         text: parsedEmail.text || "",
+-    //         headers: parsedEmail.headers?.map(
+-    //             (header) => ({ key: header.key, value: header.value })
+-    //         ) || [],
+-    //         html: parsedEmail.body_html || "",
+-    //     };
+-    //     return parsedEmailContext.parsedEmail;
+-    // } catch (e) {
+-    //     console.error("Failed use mail-parser-wasm-worker to parse email", e);
+-    // }
++        const parsedEmail = parse_message_wrapper(raw_mail);
++        parsedEmailContext.parsedEmail = {
++            sender: parsedEmail.sender || "",
++            subject: parsedEmail.subject || "",
++            text: parsedEmail.text || "",
++            headers: parsedEmail.headers?.map(
++                (header) => ({ key: header.key, value: header.value })
++            ) || [],
++            html: parsedEmail.body_html || "",
++        };
++        return parsedEmailContext.parsedEmail;
++    } catch (e) {
++        console.error("Failed use mail-parser-wasm-worker to parse email", e);
++    }
+     try {
+         const { default: PostalMime } = await import('postal-mime');
+         const parsedEmail = await PostalMime.parse(raw_mail);

.github/workflows/backend_deploy.yaml

@@ -1,6 +1,9 @@
-name: Deploy Backend Production
+name: Deploy Backend
 
 on:
+  workflow_run:
+    workflows: [Upstream Sync]
+    types: [completed]
   push:
     tags:
       - "*"
@@ -18,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -29,14 +32,36 @@ jobs:
 
       - name: Deploy Backend for ${{ github.ref_name }}
         run: |
+          export use_worker_assets=${{ secrets.USE_WORKER_ASSETS }}
+          if [ -n "$use_worker_assets" ]; then
+            cd frontend/
+            pnpm install --no-frozen-lockfile
+            pnpm build:pages
+            cd ..
+          fi
+
+          export debug_mode=${{ secrets.DEBUG_MODE }}
+          export use_mail_wasm_parser=${{ secrets.BACKEND_USE_MAIL_WASM_PARSER }}
           cd worker/
           echo '${{ secrets.BACKEND_TOML }}' > wrangler.toml
           pnpm install --no-frozen-lockfile
-          output=$(pnpm run deploy 2>&1)
-          if [ $? -ne 0 ]; then
-              code=$?
-              echo "Command failed with exit code $code"
-              exit $code
+
+          if [ -n "$use_mail_wasm_parser" ]; then
+            echo "Using mail-parser-wasm-worker"
+            pnpm add mail-parser-wasm-worker
+            git apply ../.github/config/mail-parser-wasm-worker.patch
+            echo "Applied mail-parser-wasm-worker patch"
+          fi
+
+          if [ -n "$debug_mode" ]; then
+            pnpm run deploy
+          else
+            output=$(pnpm run deploy 2>&1)
+            if [ $? -ne 0 ]; then
+                code=$?
+                echo "Command failed with exit code $code"
+                exit $code
+            fi
           fi
           echo "Deployed for tag ${{ github.ref_name }}"
         env:

.github/workflows/docs_deploy.yml

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

.github/workflows/frontend_deploy.yaml

@@ -1,9 +1,10 @@
 name: Deploy Frontend
 
 on:
+  workflow_run:
+    workflows: [Upstream Sync]
+    types: [completed]
   push:
-    paths:
-      - "frontend/**"
     tags:
       - "*"
   workflow_dispatch:
@@ -20,7 +21,7 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - uses: pnpm/action-setup@v3
         name: Install pnpm
@@ -38,12 +39,12 @@ jobs:
           export frontend_branch=${{ secrets.FRONTEND_BRANCH }}
           if [ -n "$frontend_branch" ]; then
             echo "Deploying branch $frontend_branch"
-            pnpm run deploy:actions --project-name=$project_name
+            pnpm run deploy:actions --project-name=$project_name --branch $frontend_branch
           else
-            echo "Deploying branch prodcution"
+            echo "Deploying branch production"
             pnpm run deploy --project-name=$project_name
           fi
-          echo "Deploying prodcution for ${{ github.ref_name }}"
+          echo "Deploying production for ${{ github.ref_name }}"
           echo "Deployed for tag ${{ github.ref_name }}"
 
           export tg_mini_app_project_name=${{ secrets.TG_FRONTEND_NAME }}
@@ -51,9 +52,9 @@ jobs:
             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
+              pnpm run deploy:actions:telegram --project-name=$tg_mini_app_project_name --branch $frontend_branch
             else
-              echo "Deploying telegram mini app branch prodcution"
+              echo "Deploying telegram mini app branch production"
               pnpm run deploy:telegram --project-name=$tg_mini_app_project_name
             fi
             echo "Deployed telegram mini app for ${{ github.ref_name }}"

.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: 20
+
+      - 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 }}

.github/workflows/pr_agent.yml

@@ -0,0 +1,25 @@
+name: Codium PR Agent
+
+on:
+  pull_request:
+    types: [opened, reopened, ready_for_review]
+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: docker://codiumai/pr-agent:0.29-github_action
+        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 }}

.github/workflows/sync.yaml

@@ -0,0 +1,25 @@
+name: Upstream Sync
+
+on:
+  schedule:
+    - cron: "0 0 * * 1"
+  workflow_dispatch:
+
+jobs:
+  sync_latest_from_upstream:
+    name: Sync latest commits from upstream repo
+    runs-on: ubuntu-latest
+    if: ${{ github.event.repository.fork }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Sync upstream changes
+        id: sync
+        uses: aormsby/Fork-Sync-With-Upstream-action@v3.4
+        with:
+          upstream_sync_repo: dreamhunter2333/cloudflare_temp_email
+          upstream_sync_branch: main
+          target_sync_branch: main
+          target_repo_token: ${{ secrets.GITHUB_TOKEN }} # automatically generated, no need to set
+          test_mode: false

.github/workflows/tag_build.yml

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

.gitignore

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

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "ms-python.vscode-pylance",
+    "1yib.rust-bundle",
+    "rust-lang.rust-analyzer",
+    "vue.volar"
+  ]
+}

CHANGELOG.md

@@ -1,6 +1,211 @@
 <!-- markdownlint-disable-file MD004 MD024 MD034 MD036 -->
 # CHANGE LOG
 
+## main(v1.0.5)
+
+- feat: 新增 `DISABLE_CUSTOM_ADDRESS_NAME` 配置: 禁用自定义邮箱地址名称功能
+- feat: 新增 `CREATE_ADDRESS_DEFAULT_DOMAIN_FIRST` 配置: 创建地址时优先使用第一个域名
+- feat: |UI| 主页增加进入极简模式按钮
+- feat: |Webhook| 增加白名单开关功能，支持灵活控制访问权限
+
+## v1.0.4
+
+- feat: |UI| 优化极简模式主页, 增加全部邮件页面功能(删除/下载/附件/...), 可在 `外观` 中切换
+- feat: admin 账号设置页面增加 `邮件转发规则` 配置
+- feat: admin 账号设置页面增加 `禁止接收未知地址邮件` 配置
+- feat: 邮件页面增加 上一封/下一封 按钮
+
+## v1.0.3
+
+- fix: 修复 github actions 部署问题
+- feat: telegram /new 不指定域名时, 使用随机地址
+
+## v1.0.2
+
+- fix: 修复 oauth2 登录失败的问题
+
+## v1.0.1
+
+- feat: |UI| 增加极简模式主页, 可在 `外观` 中切换
+- fix: 修复 oauth2 登录时，default role 不生效的问题
+
+## v1.0.0
+
+- fix: |UI| 修复 User 查看收件箱，不选择地址时，关键词查询不生效
+- fix: 修复自动清理任务，时间为 0 时不生效的问题
+- feat: 清理功能增加 创建 n 天前地址清理，n 天前未活跃地址清理
+- fix: |IMAP Proxy| 修复 IMAP Proxy 服务器，无法查看新邮件的问题
+
+## v0.10.0
+
+- feat: 支持 User 查看收件箱，`/user_api/mails` 接口, 支持 `address` 和 `keyword` 过滤
+- fix: 修复 Oauth2 登录获取 Token 时，一些 Oauth2 需要 `redirect_uri` 参数的问题
+- feat: 用户访问网页时，如果 `user token` 在 7 天内过期，自动刷新
+- feat: admin portal 中增加初始化 db 的功能
+- feat: 增加 `ALWAYS_SHOW_ANNOUNCEMENT` 变量，用于配置是否总是显示公告
+
+## v0.9.1
+
+- feat: |UI| support google ads
+- feat: |UI| 使用 shadow DOM 防止样式污染
+- feat: |UI| 支持 URL jwt 参数自动登录邮箱，jwt 参数会覆盖浏览器中的 jwt
+- fix: |CleanUP| 修复清理邮件时，清理时间超过 30 天报错的 bug
+- feat: admin 用户管理页面: 增加 用户地址查看功能
+- feat: | S3 附件| 增加 S3 附件删除功能
+- feat: | Admin API| 增加 admin 绑定用户和地址的 api
+- feat: | Oauth2 | Oatuh2 获取用户信息时，支持 `JSONPATH` 表达式
+
+## v0.9.0
+
+- feat: | Worker | 支持多语言
+- feat: | Worker | `NO_LIMIT_SEND_ROLE` 配置支持多角色, 逗号分割
+- feat: | Actions | build 里增加 `worker-with-wasm-mail-parser.zip` 支持 UI 部署带 `wasm` 的 worker
+
+## v0.8.7
+
+- fix: |UI| 修复移动设备日期显示问题
+- feat: |Worker| 支持通过 `SMTP` 发送邮件, 使用 [zou-yu/worker-mailer](https://github.com/zou-yu/worker-mailer/blob/main/README_zh-CN.md)
+
+## v0.8.6
+
+- feat: |UI| 公告支持 html 格式
+- feat: |UI| `COPYRIGHT` 支持 html 格式
+- feat: |Doc| 优化部署文档，补充了 `Github Actions 部署文档`，增加了 `Worker 变量说明`
+
+## v0.8.5
+
+- feat: |mail-parser-wasm-worker| 修复 `initSync` 函数调用时的 `deprecated` 参数警告
+- feat: rpc headers covert & typo (#559)
+- fix: telegram mail page use iframe show email (#561)
+- feat: |Worker| 增加 `REMOVE_ALL_ATTACHMENT` 和 `REMOVE_EXCEED_SIZE_ATTACHMENT` 用于移除邮件附件，由于是解析邮件的一些信息会丢失，比如图片等.
+
+## v0.8.4
+
+- fix: |UI| 修复 admin portal 无收件人邮箱删除调用api 错误
+- feat: |Telegram Bot| 增加 telegram bot 清理无效地址凭证命令
+- feat: 增加 worker 配置 `DISABLE_ANONYMOUS_USER_CREATE_EMAIL` 禁用匿名用户创建邮箱地址，只允许登录用户创建邮箱地址
+- feat: 增加 worker 配置 `ENABLE_ANOTHER_WORKER` 及 `ANOTHER_WORKER_LIST` ，用于调用其他 worker 的 rpc 接口 (#547)
+- feat: |UI| 自动刷新配置保存到浏览器，可配置刷新间隔
+- feat: 垃圾邮件检测增加存在时才检查的列表 `JUNK_MAIL_CHECK_LIST` 配置
+- feat: | Worker | 增加 `ParsedEmailContext` 类用于缓存解析后的邮件内容，减少解析次数
+- feat: |Github Action| Worker 部署增加 `DEBUG_MODE` 输出日志, `BACKEND_USE_MAIL_WASM_PARSER` 配置是否使用 wasm 解析邮件
+
+## v0.8.3
+
+- feat: |Github Action| 增加自动更新并部署功能
+- feat: |UI| admin 用户设置，支持 oauth2 配置的删除
+- feat: 增加垃圾邮件检测必须通过的列表 `JUNK_MAIL_FORCE_PASS_LIST` 配置
+
+## v0.8.2
+
+- fix: |Doc| 修复文档中的一些错误
+- fix: |Github Action| 修复 frontend 部署分支错误的问题
+- feat: admin 发送邮件功能
+- feat: admin 后台，账号配置页面添加无限发送邮件的地址列表
+
+## v0.8.1
+
+- feat: |Doc| 更新 UI 安装的文档
+- feat: |UI| 对用户隐藏邮箱账号的 ID
+- feat: |UI| 增加邮件详情页的 `转发` 按钮
+
+## v0.8.0
+
+- feat: |UI| 随机生成地址时不超过最大长度
+- feat: |UI| 邮件时间显示浏览器时区，可在设置中切换显示为 UTC 时间
+- feat: 支持转移邮件到其他用户
+
+## v0.7.6
+
+### Breaking Changes
+
+UI 部署 worker 需要点击 Settings -> Runtime, 修改 Compatibility flags, 增加 `nodejs_compat`
+
+![worker-runtime](vitepress-docs/docs/public/ui_install/worker-runtime.png)
+
+### Changes
+
+- feat: 支持提前设置 bot info, 降低 telegram 回调延迟 (#441)
+- feat: 增加 telegram mini app 的 build 压缩包
+- feat: 增加是否启用垃圾邮件检查 `ENABLE_CHECK_JUNK_MAIL` 配置
+
+## v0.7.5
+
+- fix: 修复 `name` 的校验检查
+
+## v0.7.4
+
+- feat: UI 列表页面增加最小宽度
+- fix: 修复 `name` 的校验检查
+- fix: 修复 `DEFAULT_DOMAINS` 配置为空不生效的问题
+
+## v0.7.3
+
+- feat: worker 增加 `ADDRESS_CHECK_REGEX`, address name 的正则表达式, 只用于检查，符合条件将通过检查
+- fix: UI 修复登录页面 tab 激活图标错位
+- fix: UI 修复 admin 页面刷新弹框输入密码的问题
+- feat: support `Oath2` 登录, 可以通过 `Github` `Authentik` 等第三方登录, 详情查看 [OAuth2 第三方登录](https://temp-mail-docs.awsl.uk/zh/guide/feature/user-oauth2.html)
+
+## v0.7.2
+
+### Breaking Changes
+
+`webhook` 的结构增加了 `enabled` 字段，已经配置了的需要重新在页面开启并保存。
+
+### Changes
+
+- fix: worker 增加 `NO_LIMIT_SEND_ROLE` 配置, 加载失败的问题
+- feat: worker 增加 `# ADDRESS_REGEX = "[^a-z.0-9]"` 配置, 替换非法符号的正则表达式，如果不设置，默认为 [^a-z0-9], 需谨慎使用, 有些符号可能导致无法收件
+- feat: worker 优化 webhook 逻辑, 支持 admin 配置全局 webhook, 添加 `message pusher` 集成示例
+
+## v0.7.1
+
+- fix: 修复用户角色加载失败的问题
+- feat: admin 账号设置增加来源邮件地址黑名单配置
+
+## 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
@@ -292,7 +497,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

README.md

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

README_EN.md

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

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);

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);

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,
@@ -22,7 +10,7 @@ CREATE TABLE IF NOT EXISTS raw_mails (
 CREATE INDEX IF NOT EXISTS idx_raw_mails_address ON raw_mails(address);
 
 CREATE TABLE IF NOT EXISTS address (
-    id INTEGER PRIMARY KEY,
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
     name TEXT UNIQUE,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
     updated_at DATETIME DEFAULT CURRENT_TIMESTAMP
@@ -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);

frontend/.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare_temp_email",
-  "version": "0.5.3",
+  "version": "1.0.5",
   "private": true,
   "type": "module",
   "scripts": {
@@ -8,7 +8,9 @@
     "build": "vite build -m prod --emptyOutDir",
     "build:release": "vite build -m example --emptyOutDir",
     "build:pages": "vite build -m pages --emptyOutDir",
+    "build:pages:nopwa": "VITE_PWA_DISABLED=true vite build -m pages --emptyOutDir",
     "build:telegram": "VITE_IS_TELEGRAM=true vite build -m prod --emptyOutDir",
+    "build:telegram:release": "VITE_IS_TELEGRAM=true vite build -m example --emptyOutDir",
     "preview": "vite preview",
     "deploy:telegram": "npm run build:telegram && wrangler pages deploy ./dist --branch production",
     "deploy:actions:telegram": "npm run build:telegram && wrangler pages deploy ./dist",
@@ -17,32 +19,35 @@
     "deploy:actions": "npm run build && wrangler pages deploy ./dist"
   },
   "dependencies": {
-    "@unhead/vue": "^1.9.14",
-    "@vicons/material": "^0.12.0",
-    "@vueuse/core": "^10.11.0",
+    "@simplewebauthn/browser": "10.0.0",
+    "@unhead/vue": "^1.11.20",
+    "@vueuse/core": "^12.8.2",
     "@wangeditor/editor": "^5.1.23",
     "@wangeditor/editor-for-vue": "^5.1.12",
-    "axios": "^1.7.2",
+    "axios": "^1.11.0",
     "jszip": "^3.10.1",
-    "mail-parser-wasm": "^0.1.8",
-    "naive-ui": "^2.38.2",
-    "postal-mime": "^2.2.5",
+    "mail-parser-wasm": "^0.2.1",
+    "naive-ui": "^2.42.0",
+    "postal-mime": "^2.4.4",
     "vooks": "^0.2.12",
-    "vue": "^3.4.31",
+    "vue": "^3.5.21",
     "vue-clipboard3": "^2.0.0",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.0"
+    "vue-i18n": "^11.1.11",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@vicons/fa": "^0.12.0",
-    "@vitejs/plugin-vue": "^5.0.5",
-    "unplugin-auto-import": "^0.17.6",
-    "unplugin-vue-components": "^0.27.2",
-    "vite": "^5.3.2",
-    "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.62.0"
-  }
+    "@vicons/fa": "^0.13.0",
+    "@vicons/material": "^0.13.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "unplugin-auto-import": "^19.3.0",
+    "unplugin-vue-components": "^28.8.0",
+    "vite": "^6.3.5",
+    "vite-plugin-pwa": "^1.0.3",
+    "vite-plugin-top-level-await": "^1.6.0",
+    "vite-plugin-wasm": "^3.5.0",
+    "workbox-build": "^7.3.0",
+    "workbox-window": "^7.3.0",
+    "wrangler": "^4.34.0"
+  },
+  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }

frontend/src/App.vue

@@ -1,24 +1,35 @@
 <script setup>
 import { darkTheme, NGlobalStyle, zhCN } from 'naive-ui'
 import { computed, onMounted } from 'vue'
+import { useScript } from '@unhead/vue'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from './store'
 import { useIsMobile } from './utils/composables'
 import Header from './views/Header.vue';
 import Footer from './views/Footer.vue';
-
+import { api } from './api'
 
 const {
   isDark, loading, useSideMargin, telegramApp, isTelegram
 } = useGlobalState()
+const adClient = import.meta.env.VITE_GOOGLE_AD_CLIENT;
+const adSlot = import.meta.env.VITE_GOOGLE_AD_SLOT;
 const { locale } = useI18n({});
 const theme = computed(() => isDark.value ? darkTheme : null)
 const localeConfig = computed(() => locale.value == 'zh' ? zhCN : null)
 const isMobile = useIsMobile()
 const showSideMargin = computed(() => !isMobile.value && useSideMargin.value);
-
+const showAd = computed(() => !isMobile.value && adClient && adSlot);
+const gridMaxCols = computed(() => showAd.value ? 8 : 12);
 
 onMounted(async () => {
+
+  try {
+    await api.getUserSettings();
+  } catch (error) {
+    console.error(error);
+  }
+
   const token = import.meta.env.VITE_CF_WEB_ANALY_TOKEN;
 
   const exist = document.querySelector('script[src="https://static.cloudflareinsights.com/beacon.min.js"]') !== null
@@ -30,6 +41,18 @@ onMounted(async () => {
     document.body.appendChild(script);
   }
 
+  // check if google ad is enabled
+  if (showAd.value) {
+    useScript({
+      src: `https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${adClient}`,
+      async: true,
+      crossorigin: "anonymous",
+    });
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }
+
+
   // check if telegram is enabled
   const enableTelegram = import.meta.env.VITE_IS_TELEGRAM;
   if (
@@ -54,24 +77,36 @@ onMounted(async () => {
   <n-config-provider :locale="localeConfig" :theme="theme">
     <n-global-style />
     <n-spin description="loading..." :show="loading">
-      <n-message-provider>
-        <n-grid x-gap="12" :cols="12">
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
-          <n-gi :span="!showSideMargin ? 12 : 10">
-            <div class="main">
-              <n-space vertical>
-                <n-layout style="min-height: 80vh;">
-                  <Header />
-                  <router-view></router-view>
-                </n-layout>
-                <Footer />
-              </n-space>
-            </div>
-          </n-gi>
-          <n-gi v-if="showSideMargin" span="1"></n-gi>
-        </n-grid>
-        <n-back-top />
-      </n-message-provider>
+      <n-notification-provider container-style="margin-top: 60px;">
+        <n-message-provider container-style="margin-top: 20px;">
+          <n-grid x-gap="12" :cols="gridMaxCols">
+            <n-gi v-if="showSideMargin" span="1">
+              <div class="side" v-if="showAd">
+                <ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot"
+                  data-ad-format="auto" data-full-width-responsive="true"></ins>
+              </div>
+            </n-gi>
+            <n-gi :span="!showSideMargin ? gridMaxCols : (gridMaxCols - 2)">
+              <div class="main">
+                <n-space vertical>
+                  <n-layout style="min-height: 80vh;">
+                    <Header />
+                    <router-view></router-view>
+                  </n-layout>
+                  <Footer />
+                </n-space>
+              </div>
+            </n-gi>
+            <n-gi v-if="showSideMargin" span="1">
+              <div class="side" v-if="showAd">
+                <ins class="adsbygoogle" style="display:block" :data-ad-client="adClient" :data-ad-slot="adSlot"
+                  data-ad-format="auto" data-full-width-responsive="true"></ins>
+              </div>
+            </n-gi>
+          </n-grid>
+          <n-back-top />
+        </n-message-provider>
+      </n-notification-provider>
     </n-spin>
   </n-config-provider>
 </template>

frontend/src/api/index.js

@@ -1,16 +1,20 @@
 import { useGlobalState } from '../store'
+import { h } from 'vue'
 import axios from 'axios'
 
+import i18n from '../i18n'
+
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const {
     loading, auth, jwt, settings, openSettings,
-    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 = {}) => {
@@ -20,23 +24,23 @@ const apiFetch = async (path, options = {}) => {
             method: options.method || 'GET',
             data: options.body || null,
             headers: {
-                'x-user-token': userJwt.value,
+                'x-lang': i18n.global.locale.value,
+                'x-user-token': options.userJwt || userJwt.value,
+                'x-user-access-token': userSettings.value.access_token,
                 'x-custom-auth': auth.value,
                 'x-admin-auth': adminAuth.value,
                 '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;
         }
         if (response.status >= 300) {
-            throw new Error(`${response.status} ${response.data}` || "error");
+            throw new Error(`[${response.status}]: ${response.data}` || "error");
         }
         const data = response.data;
         return data;
@@ -50,16 +54,21 @@ const apiFetch = async (path, options = {}) => {
     }
 }
 
-const getOpenSettings = async (message) => {
+const getOpenSettings = async (message, notification) => {
     try {
         const res = await api.fetch("/open_api/settings");
         const domainLabels = res["domainLabels"] || [];
+        if (res["domains"]?.length < 1) {
+            message.error("No domains found, please check your worker settings");
+        }
         Object.assign(openSettings.value, {
+            ...res,
             title: res["title"] || "",
             prefix: res["prefix"] || "",
             minAddressLen: res["minAddressLen"] || 1,
             maxAddressLen: res["maxAddressLen"] || 30,
             needAuth: res["needAuth"] || false,
+            defaultDomains: res["defaultDomains"] || [],
             domains: res["domains"].map((domain, index) => {
                 return {
                     label: domainLabels.length > index ? domainLabels[index] : domain,
@@ -68,6 +77,8 @@ const getOpenSettings = async (message) => {
             }),
             adminContact: res["adminContact"] || "",
             enableUserCreateEmail: res["enableUserCreateEmail"] || false,
+            disableAnonymousUserCreateEmail: res["disableAnonymousUserCreateEmail"] || false,
+            disableCustomAddressName: res["disableCustomAddressName"] || false,
             enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
             enableAutoReply: res["enableAutoReply"] || false,
             enableIndexAbout: res["enableIndexAbout"] || false,
@@ -79,8 +90,24 @@ const getOpenSettings = async (message) => {
         if (openSettings.value.needAuth) {
             showAuth.value = true;
         }
+        if (openSettings.value.announcement
+            && !openSettings.value.fetched
+            && (openSettings.value.announcement != announcement.value
+                || openSettings.value.alwaysShowAnnouncement)
+        ) {
+            announcement.value = openSettings.value.announcement;
+            notification.info({
+                content: () => {
+                    return h("div", {
+                        innerHTML: announcement.value
+                    });
+                }
+            });
+        }
     } catch (error) {
         message.error(error.message || "error");
+    } finally {
+        openSettings.value.fetched = true;
     }
 }
 
@@ -107,6 +134,8 @@ const getUserOpenSettings = async (message) => {
         Object.assign(userOpenSettings.value, res);
     } catch (error) {
         message.error(error.message || "fetch settings failed");
+    } finally {
+        userOpenSettings.value.fetched = true;
     }
 }
 
@@ -115,8 +144,21 @@ const getUserSettings = async (message) => {
         if (!userJwt.value) return;
         const res = await api.fetch("/user_api/settings")
         Object.assign(userSettings.value, res)
+        // auto refresh user jwt
+        if (userSettings.value.new_user_token) {
+            try {
+                await api.fetch("/user_api/settings", {
+                    userJwt: userSettings.value.new_user_token,
+                })
+                userJwt.value = userSettings.value.new_user_token;
+                console.log("User JWT updated successfully");
+            }
+            catch (error) {
+                console.error("Failed to update user JWT", error);
+            }
+        }
     } catch (error) {
-        message.error(error.message || "error");
+        message?.error(error.message || "error");
     } finally {
         userSettings.value.fetched = true;
     }

frontend/src/components/MailBox.vue

@@ -1,11 +1,13 @@
 <script setup>
-import { watch, onMounted, ref, onBeforeUnmount } from "vue";
+import { watch, onMounted, ref, onBeforeUnmount, computed } from "vue";
 import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
-import { CloudDownloadRound, ReplyFilled } from '@vicons/material'
+import { CloudDownloadRound, ArrowBackIosNewFilled, ArrowForwardIosFilled } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
-import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
+import { processItem } from '../utils/email-parser'
+import { utcToLocalDate } from '../utils';
+import MailContentRenderer from "./MailContentRenderer.vue";
 
 const message = useMessage()
 const isMobile = useIsMobile()
@@ -14,46 +16,45 @@ const props = defineProps({
   enableUserDeleteEmail: {
     type: Boolean,
     default: false,
-    requried: false
+    required: false
   },
   showEMailTo: {
     type: Boolean,
     default: true,
-    requried: false
+    required: false
   },
   fetchMailData: {
     type: Function,
     default: () => { },
-    requried: true
+    required: true
   },
   deleteMail: {
     type: Function,
     default: () => { },
-    requried: false
+    required: false
   },
   showReply: {
     type: Boolean,
     default: false,
-    requried: false
+    required: false
   },
   showSaveS3: {
     type: Boolean,
     default: false,
-    requried: false
+    required: false
   },
   saveToS3: {
     type: Function,
     default: (mail_id, filename, blob) => { },
-    requried: false
+    required: false
   },
 })
 
 const {
-  isDark, mailboxSplitSize, indexTab, loading,
-  useIframeShowMail, sendMailModel, preferShowTextMail
+  isDark, mailboxSplitSize, indexTab, loading, useUTCDate,
+  autoRefresh, configAutoRefreshInterval, sendMailModel
 } = useGlobalState()
-const autoRefresh = ref(false)
-const autoRefreshInterval = ref(30)
+const autoRefreshInterval = ref(configAutoRefreshInterval.value)
 const data = ref([])
 const timer = ref(null)
 
@@ -61,10 +62,49 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 
-const showAttachments = ref(false)
-const curAttachments = ref([])
+const canGoPrevMail = computed(() => {
+  if (!curMail.value) return false
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+  return currentIndex > 0 || page.value > 1
+})
+
+const canGoNextMail = computed(() => {
+  if (!curMail.value) return false
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+  return currentIndex < data.value.length - 1 || count.value > page.value * pageSize.value
+})
+
+const prevMail = async () => {
+  if (!canGoPrevMail.value) return
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+
+  if (currentIndex > 0) {
+    curMail.value = data.value[currentIndex - 1]
+  } else if (page.value > 1) {
+    page.value--
+    await refresh()
+    if (data.value.length > 0) {
+      curMail.value = data.value[data.value.length - 1]
+    }
+  }
+}
+
+const nextMail = async () => {
+  if (!canGoNextMail.value) return
+  const currentIndex = data.value.findIndex(mail => mail.id === curMail.value.id)
+
+  if (currentIndex < data.value.length - 1) {
+    curMail.value = data.value[currentIndex + 1]
+  } else if (count.value > page.value * pageSize.value) {
+    page.value++
+    await refresh()
+    if (data.value.length > 0) {
+      curMail.value = data.value[0]
+    }
+  }
+}
+
 const curMail = ref(null);
-const showTextMail = ref(preferShowTextMail.value)
 
 const multiActionMode = ref(false)
 const showMultiActionDownload = ref(false)
@@ -85,6 +125,7 @@ const { t } = useI18n({
       delete: 'Delete',
       deleteMailTip: 'Are you sure you want to delete mail?',
       reply: 'Reply',
+      forwardMail: 'Forward',
       showTextMail: 'Show Text Mail',
       showHtmlMail: 'Show Html Mail',
       saveToS3: 'Save to S3',
@@ -92,6 +133,8 @@ const { t } = useI18n({
       cancelMultiAction: 'Cancel Multi Action',
       selectAll: 'Select All of This Page',
       unselectAll: 'Unselect All',
+      prevMail: 'Previous',
+      nextMail: 'Next',
     },
     zh: {
       success: '成功',
@@ -104,6 +147,7 @@ const { t } = useI18n({
       delete: '删除',
       deleteMailTip: '确定要删除邮件吗?',
       reply: '回复',
+      forwardMail: '转发',
       showTextMail: '显示纯文本邮件',
       showHtmlMail: '显示HTML邮件',
       saveToS3: '保存到S3',
@@ -111,19 +155,23 @@ const { t } = useI18n({
       cancelMultiAction: '取消多选',
       selectAll: '全选本页',
       unselectAll: '取消全选',
+      prevMail: '上一封',
+      nextMail: '下一封',
     }
   }
 });
 
 const setupAutoRefresh = async (autoRefresh) => {
-  // auto refresh every 30 seconds
-  autoRefreshInterval.value = 30;
+  // auto refresh every configAutoRefreshInterval seconds
+  autoRefreshInterval.value = configAutoRefreshInterval.value;
   if (autoRefresh) {
+    clearInterval(timer.value);
     timer.value = setInterval(async () => {
+      if (loading.value) return;
       autoRefreshInterval.value--;
       if (autoRefreshInterval.value <= 0) {
-        autoRefreshInterval.value = 30;
-        await refresh();
+        autoRefreshInterval.value = configAutoRefreshInterval.value;
+        await backFirstPageAndRefresh();
       }
     }, 1000)
   } else {
@@ -134,7 +182,7 @@ const setupAutoRefresh = async (autoRefresh) => {
 
 watch(autoRefresh, async (autoRefresh, old) => {
   setupAutoRefresh(autoRefresh)
-})
+}, { immediate: true })
 
 watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
   if (page !== oldPage || pageSize !== oldPageSize) {
@@ -147,6 +195,7 @@ 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);
@@ -161,9 +210,16 @@ const refresh = async () => {
   } catch (error) {
     message.error(error.message || "error");
     console.error(error);
+  } finally {
+    loading.value = false;
   }
 };
 
+const backFirstPageAndRefresh = async () => {
+  page.value = 1;
+  await refresh();
+}
+
 const clickRow = async (row) => {
   if (multiActionMode.value) {
     row.checked = !row.checked;
@@ -172,10 +228,6 @@ const clickRow = async (row) => {
   curMail.value = row;
 };
 
-const getAttachments = (attachments) => {
-  curAttachments.value = attachments;
-  showAttachments.value = true;
-};
 
 const mailItemClass = (row) => {
   return curMail.value && row.id == curMail.value.id ? (isDark.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
@@ -211,18 +263,21 @@ const replyMail = async () => {
   indexTab.value = 'sendmail';
 };
 
+const forwardMail = async () => {
+  Object.assign(sendMailModel.value, {
+    subject: `${t('forwardMail')}: ${curMail.value.subject}`,
+    contentType: curMail.value.message ? 'html' : 'text',
+    content: curMail.value.message || curMail.value.text,
+  });
+  indexTab.value = 'sendmail';
+};
+
 const onSpiltSizeChange = (size) => {
   mailboxSplitSize.value = size;
 }
 
-const attachmentLoding = ref(false)
 const saveToS3Proxy = async (filename, blob) => {
-  attachmentLoding.value = true
-  try {
-    await props.saveToS3(curMail.value.id, filename, blob);
-  } finally {
-    attachmentLoding.value = false
-  }
+  await props.saveToS3(curMail.value.id, filename, blob);
 }
 
 const multiActionModeClick = (enableMulti) => {
@@ -351,7 +406,7 @@ onBeforeUnmount(() => {
               {{ t('autoRefresh') }}
             </template>
           </n-switch>
-          <n-button @click="refresh" type="primary" tertiary>
+          <n-button @click="backFirstPageAndRefresh" type="primary" tertiary>
             {{ t('refresh') }}
           </n-button>
         </n-space>
@@ -359,7 +414,7 @@ onBeforeUnmount(() => {
       <n-split class="left" direction="horizontal" :max="0.75" :min="0.25" :default-size="mailboxSplitSize"
         :on-update:size="onSpiltSizeChange">
         <template #1>
-          <div style="overflow: auto; height: 80vh;">
+          <div style="overflow: auto; min-height: 50vh; max-height: 100vh;">
             <n-list hoverable clickable>
               <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
                 :class="mailItemClass(row)">
@@ -372,13 +427,17 @@ onBeforeUnmount(() => {
                       ID: {{ row.id }}
                     </n-tag>
                     <n-tag type="info">
-                      {{ `${row.created_at} UTC` }}
+                      {{ utcToLocalDate(row.created_at, useUTCDate) }}
                     </n-tag>
                     <n-tag type="info">
-                      FROM: {{ row.source }}
+                      <n-ellipsis style="max-width: 240px;">
+                        {{ showEMailTo ? "FROM: " + row.source : row.source }}
+                      </n-ellipsis>
                     </n-tag>
                     <n-tag v-if="showEMailTo" type="info">
-                      TO: {{ row.address }}
+                      <n-ellipsis style="max-width: 240px;">
+                        TO: {{ row.address }}
+                      </n-ellipsis>
                     </n-tag>
                   </template>
                 </n-thing>
@@ -387,53 +446,31 @@ onBeforeUnmount(() => {
           </div>
         </template>
         <template #2>
+          <div v-if="curMail" style="margin: 8px;">
+            <n-flex justify="space-between">
+              <n-button @click="prevMail" :disabled="!canGoPrevMail" text size="small">
+                <template #icon>
+                  <n-icon>
+                    <ArrowBackIosNewFilled />
+                  </n-icon>
+                </template>
+                {{ t('prevMail') }}
+              </n-button>
+              <n-button @click="nextMail" :disabled="!canGoNextMail" text size="small" icon-placement="right">
+                <template #icon>
+                  <n-icon>
+                    <ArrowForwardIosFilled />
+                  </n-icon>
+                </template>
+                {{ t('nextMail') }}
+              </n-button>
+            </n-flex>
+          </div>
           <n-card :bordered="false" embedded v-if="curMail" class="mail-item" :title="curMail.subject"
             style="overflow: auto; max-height: 100vh;">
-            <n-space>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </n-tag>
-              <n-tag type="info">
-                {{ `${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>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
+              :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
           </n-card>
           <n-card :bordered="false" embedded class="mail-item" v-else>
             <n-result status="info" :title="t('pleaseSelectMail')">
@@ -455,7 +492,7 @@ onBeforeUnmount(() => {
             {{ t('autoRefresh') }}
           </template>
         </n-switch>
-        <n-button @click="refresh" tertiary size="small" type="primary">
+        <n-button @click="backFirstPageAndRefresh" tertiary size="small" type="primary">
           {{ t('refresh') }}
         </n-button>
       </n-space>
@@ -468,10 +505,10 @@ onBeforeUnmount(() => {
                   ID: {{ row.id }}
                 </n-tag>
                 <n-tag type="info">
-                  {{ `${row.created_at} UTC` }}
+                  {{ utcToLocalDate(row.created_at, useUTCDate) }}
                 </n-tag>
                 <n-tag type="info">
-                  FROM: {{ row.source }}
+                  {{ showEMailTo ? "FROM: " + row.source : row.source }}
                 </n-tag>
                 <n-tag v-if="showEMailTo" type="info">
                   TO: {{ row.address }}
@@ -485,83 +522,14 @@ onBeforeUnmount(() => {
         style="height: 80vh;">
         <n-drawer-content :title="curMail ? curMail.subject : ''" closable>
           <n-card :bordered="false" embedded style="overflow: auto;">
-            <n-space>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </n-tag>
-              <n-tag type="info">
-                {{ `${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)">
-                <n-icon :component="CloudDownloadRound" />
-                {{ t('downloadMail') }}
-              </n-button>
-              <n-button v-if="showReply" size="small" tertiary type="info" @click="replyMail">
-                <template #icon>
-                  <n-icon :component="ReplyFilled" />
-                </template>
-                {{ t('reply') }}
-              </n-button>
-              <n-button size="small" tertiary type="info" @click="showTextMail = !showTextMail">
-                {{ showTextMail ? t('showHtmlMail') : t('showTextMail') }}
-              </n-button>
-            </n-space>
-            <pre v-if="showTextMail" style="margin-top: 10px;">{{ curMail.text }}</pre>
-            <iframe v-else-if="useIframeShowMail" :srcdoc="curMail.message"
-              style="margin-top: 10px;width: 100%; height: 100%;">
-            </iframe>
-            <div v-else v-html="curMail.message" style="margin-top: 10px;"></div>
+            <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
+              :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
+              :useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
+              :onSaveToS3="saveToS3Proxy" />
           </n-card>
         </n-drawer-content>
       </n-drawer>
     </div>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("attachments") }}</div>
-      </template>
-      <n-spin v-model:show="attachmentLoding">
-        <n-list hoverable clickable>
-          <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-            <n-thing class="center" :title="row.filename">
-              <template #description>
-                <n-space>
-                  <n-tag type="info">
-                    Size: {{ row.size }}
-                  </n-tag>
-                  <n-button v-if="showSaveS3" @click="saveToS3Proxy(row.filename, row.blob)" ghost type="info"
-                    size="small">
-                    {{ t('saveToS3') }}
-                  </n-button>
-                </n-space>
-              </template>
-            </n-thing>
-            <template #suffix>
-              <n-button tag="a" target="_blank" tertiary type="info" size="small" :download="row.filename"
-                :href="row.url">
-                <n-icon :component="CloudDownloadRound" />
-              </n-button>
-            </template>
-          </n-list-item>
-        </n-list>
-      </n-spin>
-    </n-modal>
     <n-modal v-model:show="showMultiActionDownload" preset="dialog" :title="t('downloadMail')">
       <n-tag type="info">
         {{ multiActionDownloadZip.filename }}

frontend/src/components/MailContentRenderer.vue

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

frontend/src/components/SendBox.vue

@@ -4,6 +4,7 @@ import { useMessage } from 'naive-ui'
 import { useI18n } from 'vue-i18n'
 import { useGlobalState } from '../store'
 import { useIsMobile } from '../utils/composables'
+import { utcToLocalDate } from '../utils';
 
 const message = useMessage()
 const isMobile = useIsMobile()
@@ -12,7 +13,7 @@ const props = defineProps({
   enableUserDeleteEmail: {
     type: Boolean,
     default: false,
-    requried: false
+    required: false
   },
   showEMailFrom: {
     type: Boolean,
@@ -21,16 +22,16 @@ const props = defineProps({
   fetchMailData: {
     type: Function,
     default: () => { },
-    requried: true
+    required: true
   },
   deleteMail: {
     type: Function,
     default: () => { },
-    requried: false
+    required: false
   },
 })
 
-const { isDark, mailboxSplitSize, loading } = useGlobalState()
+const { isDark, mailboxSplitSize, loading, useUTCDate } = useGlobalState()
 const data = ref([])
 
 const count = ref(0)
@@ -251,7 +252,7 @@ onMounted(async () => {
                       ID: {{ row.id }}
                     </n-tag>
                     <n-tag type="info">
-                      {{ `${row.created_at} UTC` }}
+                      {{ utcToLocalDate(row.created_at, useUTCDate) }}
                     </n-tag>
                     <n-tag v-if="showEMailFrom" type="info">
                       FROM: {{ row.address }}
@@ -273,7 +274,7 @@ onMounted(async () => {
                 ID: {{ curMail.id }}
               </n-tag>
               <n-tag type="info">
-                {{ `${curMail.created_at} UTC` }}
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
               </n-tag>
               <n-tag type="info">
                 FROM: {{ curMail.address }}
@@ -320,7 +321,7 @@ onMounted(async () => {
                   ID: {{ row.id }}
                 </n-tag>
                 <n-tag type="info">
-                  {{ `${row.created_at} UTC` }}
+                  {{ utcToLocalDate(row.created_at, useUTCDate) }}
                 </n-tag>
                 <n-tag v-if="showEMailFrom" type="info">
                   FROM: {{ row.address }}
@@ -342,7 +343,7 @@ onMounted(async () => {
                 ID: {{ curMail.id }}
               </n-tag>
               <n-tag type="info">
-                {{ `${curMail.created_at} UTC` }}
+                {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
               </n-tag>
               <n-tag type="info">
                 FROM: {{ curMail.address }}

frontend/src/components/ShadowHtmlComponent.vue

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

frontend/src/components/Turnstile.vue

@@ -1,5 +1,5 @@
 <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 { openSettings, isDark } = useGlobalState()

frontend/src/components/WebhookComponent.vue

@@ -0,0 +1,179 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const props = defineProps({
+    fetchData: {
+        type: Function,
+        default: () => { },
+        required: true
+    },
+    saveSettings: {
+        type: Function,
+        default: (webhookSettings: WebhookSettings) => { },
+        required: true
+    },
+    testSettings: {
+        type: Function,
+        default: (webhookSettings: WebhookSettings) => { },
+        required: true
+    },
+})
+
+// @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',
+            enable: 'Enable',
+            messagePusherDemo: 'Fill with Message Pusher Demo',
+            messagePusherDoc: 'Message Pusher Doc',
+            fillInDemoTip: 'Please modify the URL and other settings to your own',
+        },
+        zh: {
+            successTip: '成功',
+            test: '测试',
+            save: '保存',
+            notEnabled: 'Webhook 未开启，请联系管理员开启',
+            urlMissing: 'URL 不能为空',
+            enable: '启用',
+            messagePusherDemo: '填入MessagePusher示例',
+            messagePusherDoc: 'MessagePusher文档',
+            fillInDemoTip: '请修改URL和其他设置为您自己的配置',
+        }
+    }
+});
+
+class WebhookSettings {
+    enabled: boolean = false
+    url: string = ''
+    method: string = 'POST'
+    headers: string = JSON.stringify({}, null, 2)
+    body: string = JSON.stringify({}, null, 2)
+}
+
+const messagePusherDocLink = "https://github.com/songquanpeng/message-pusher";
+
+const messagePusherDemo = {
+    enabled: true,
+    url: 'https://msgpusher.com/push/username',
+    method: 'POST',
+    headers: JSON.stringify({
+        'Content-Type': 'application/json',
+    }, null, 2),
+    body: JSON.stringify({
+        "token": "token",
+        "title": "${subject}",
+        "description": "${subject}",
+        "content": "*${subject}*\n\nFrom: ${from}\nTo: ${to}\n\n${parsedText}\n"
+    }, null, 2),
+} as WebhookSettings;
+
+const fillMessagePuhserDemo = () => {
+    Object.assign(webhookSettings.value, messagePusherDemo)
+    message.success(t('fillInDemoTip'))
+}
+
+const webhookSettings = ref<WebhookSettings>(new WebhookSettings())
+const enableWebhook = ref(false)
+
+const fetchData = async () => {
+    try {
+        const res = await props.fetchData()
+        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 props.saveSettings(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 props.testSettings(webhookSettings.value)
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded v-if="enableWebhook" style="max-width: 800px; overflow: auto;">
+            <n-flex justify="end">
+                <n-button tag="a" :href="messagePusherDocLink" target="_blank" secondary>
+                    {{ t('messagePusherDoc') }}
+                </n-button>
+                <n-button @click="fillMessagePuhserDemo" secondary>
+                    {{ t('messagePusherDemo') }}
+                </n-button>
+                <n-button v-if="webhookSettings.enabled" @click="testSettings" secondary>
+                    {{ t('test') }}
+                </n-button>
+                <n-button @click="saveSettings" type="primary">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
+            <n-form-item-row :label="t('enable')">
+                <n-switch v-model:value="webhookSettings.enabled" :round="false" />
+            </n-form-item-row>
+            <div v-if="webhookSettings.enabled">
+                <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>
+            </div>
+        </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>

frontend/src/constant/index.ts

@@ -0,0 +1,8 @@
+const COMMOM_MAIL = [
+    "gmail.com", "163.com", "126.com", "qq.com", "outlook.com", "hotmail.com",
+    "icloud.com", "yahoo.com", "foxmail.com"
+]
+
+export default {
+    COMMOM_MAIL
+}

frontend/src/i18n.ts

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

frontend/src/main.js

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

frontend/src/models/index.ts

@@ -0,0 +1,15 @@
+export type UserOauth2Settings = {
+    name: string;
+    clientID: string;
+    clientSecret: string;
+    authorizationURL: string;
+    accessTokenURL: string;
+    accessTokenFormat?: string;
+    userInfoURL: string;
+    redirectURL: string;
+    logoutURL?: string;
+    userEmailKey: string;
+    scope: string;
+    enableMailAllowList?: boolean | undefined;
+    mailAllowList?: string[] | undefined;
+}

frontend/src/router/index.js

@@ -1,8 +1,12 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import Index from '../views/Index.vue'
 import User from '../views/User.vue'
+import UserOauth2Callback from '../views/user/UserOauth2Callback.vue'
+import i18n from '../i18n'
 import { useGlobalState } from '../store'
 
+const { jwt } = useGlobalState()
+
 const router = createRouter({
     history: createWebHistory(),
     routes: [
@@ -16,6 +20,11 @@ const router = createRouter({
             alias: "/:lang/user",
             component: User
         },
+        {
+            path: '/user/oauth2/callback',
+            alias: "/:lang/user/oauth2/callback",
+            component: UserOauth2Callback
+        },
         {
             path: '/admin',
             alias: "/:lang/admin",
@@ -32,6 +41,20 @@ const router = createRouter({
             redirect: '/'
         }
     ]
-})
+});
+
+
+router.beforeEach((to, from, next) => {
+    if (to.params.lang && ['en', 'zh'].includes(to.params.lang)) {
+        i18n.global.locale.value = to.params.lang
+    } else {
+        i18n.global.locale.value = 'zh'
+    }
+    // check if query parameter has jwt, set it to store
+    if (to.query.jwt) {
+        jwt.value = to.query.jwt;
+    }
+    next()
+});
 
 export default router

frontend/src/store/index.js

@@ -1,26 +1,41 @@
-import { ref } from "vue";
-import { createGlobalState, useStorage, useDark, useToggle } from '@vueuse/core'
+import { computed, ref } from "vue";
+import {
+    createGlobalState, useStorage, useDark, useToggle,
+    useLocalStorage, useSessionStorage
+} from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
     () => {
         const isDark = useDark()
         const toggleDark = useToggle(isDark)
         const loading = ref(false);
+        const announcement = useLocalStorage('announcement', '');
+        const useSimpleIndex = useLocalStorage('useSimpleIndex', false);
         const openSettings = ref({
+            fetched: false,
             title: '',
+            announcement: '',
+            alwaysShowAnnouncement: false,
             prefix: '',
+            addressRegex: '',
             needAuth: false,
             adminContact: '',
             enableUserCreateEmail: false,
+            disableAnonymousUserCreateEmail: false,
+            disableCustomAddressName: false,
             enableUserDeleteEmail: false,
             enableAutoReply: false,
             enableIndexAbout: false,
+            /** @type {string[]} */
+            defaultDomains: [],
             /** @type {Array<{label: string, value: string}>} */
             domains: [],
             copyright: 'Dream Hunter',
             cfTurnstileSiteKey: '',
             enableWebhook: false,
             isS3Enabled: false,
+            showGithub: true,
+            disableAdminPasswordCheck: false,
         })
         const settings = ref({
             fetched: false,
@@ -34,7 +49,7 @@ export const useGlobalState = createGlobalState(
                 name: '',
             }
         });
-        const sendMailModel = useStorage('sendMailModel', {
+        const sendMailModel = useSessionStorage('sendMailModel', {
             fromName: "",
             toName: "",
             toMail: "",
@@ -48,20 +63,26 @@ export const useGlobalState = createGlobalState(
         const auth = useStorage('auth', '');
         const adminAuth = useStorage('adminAuth', '');
         const jwt = useStorage('jwt', '');
-        const adminTab = ref("account");
+        const adminTab = useSessionStorage('adminTab', "account");
         const adminMailTabAddress = ref("");
         const adminSendBoxTabAddress = ref("");
         const mailboxSplitSize = useStorage('mailboxSplitSize', 0.25);
         const useIframeShowMail = useStorage('useIframeShowMail', false);
         const preferShowTextMail = useStorage('preferShowTextMail', false);
         const userJwt = useStorage('userJwt', '');
-        const userTab = useStorage('userTab', 'user_settings');
-        const indexTab = useStorage('indexTab', 'mailbox');
+        const userTab = useSessionStorage('userTab', 'address_management');
+        const indexTab = useSessionStorage('indexTab', 'mailbox');
         const globalTabplacement = useStorage('globalTabplacement', 'top');
         const useSideMargin = useStorage('useSideMargin', true);
+        const useUTCDate = useStorage('useUTCDate', false);
+        const autoRefresh = useStorage('autoRefresh', false);
+        const configAutoRefreshInterval = useStorage("configAutoRefreshInterval", 60);
         const userOpenSettings = ref({
+            fetched: false,
             enable: false,
             enableMailVerify: false,
+            /** @type {{ clientID: string, name: string }[]} */
+            oauth2ClientIDs: [],
         });
         const userSettings = ref({
             /** @type {boolean} */
@@ -70,15 +91,31 @@ export const useGlobalState = createGlobalState(
             user_email: '',
             /** @type {number} */
             user_id: 0,
+            /** @type {boolean} */
+            is_admin: false,
+            /** @type {string | null} */
+            access_token: null,
+            /** @type {string | null} */
+            new_user_token: null,
+            /** @type {null | {domains: string[] | undefined | null, role: string, prefix: string | undefined | null}} */
+            user_role: null,
         });
+        const showAdminPage = computed(() =>
+            !!adminAuth.value
+            || userSettings.value.is_admin
+            || openSettings.value.disableAdminPasswordCheck
+        );
         const telegramApp = ref(window.Telegram?.WebApp || {});
         const isTelegram = ref(!!window.Telegram?.WebApp?.initData);
+        const userOauth2SessionState = useSessionStorage('userOauth2SessionState', '');
+        const userOauth2SessionClientID = useSessionStorage('userOauth2SessionClientID', '');
         return {
             isDark,
             toggleDark,
             loading,
             settings,
             sendMailModel,
+            announcement,
             openSettings,
             showAuth,
             showAddressCredential,
@@ -99,8 +136,15 @@ export const useGlobalState = createGlobalState(
             userSettings,
             globalTabplacement,
             useSideMargin,
+            useUTCDate,
+            autoRefresh,
+            configAutoRefreshInterval,
             telegramApp,
             isTelegram,
+            showAdminPage,
+            userOauth2SessionState,
+            userOauth2SessionClientID,
+            useSimpleIndex,
         }
     },
 )

frontend/src/utils/index.ts

@@ -11,3 +11,20 @@ export const getRouterPathWithLang = (path: string, lang: string) => {
     }
     return `/${lang}${path}`;
 }
+
+export const utcToLocalDate = (utcDate: string, useUTCDate: boolean) => {
+    const utcDateString = `${utcDate} UTC`;
+    if (useUTCDate) {
+        return utcDateString;
+    }
+    try {
+        const date = new Date(utcDateString);
+        // if invalid date string
+        if (isNaN(date.getTime())) return utcDateString;
+
+        return date.toLocaleString();
+    } catch (e) {
+        console.error(e);
+    }
+    return utcDateString;
+}

frontend/src/views/Admin.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n'
 
 import { useGlobalState } from '../store'
+import { api } from '../api'
 
 import SenderAccess from './admin/SenderAccess.vue'
 import Statistics from "./admin/Statistics.vue"
@@ -12,21 +13,33 @@ import CreateAccount from './admin/CreateAccount.vue';
 import AccountSettings from './admin/AccountSettings.vue';
 import UserManagement from './admin/UserManagement.vue';
 import UserSettings from './admin/UserSettings.vue';
+import UserOauth2Settings from './admin/UserOauth2Settings.vue';
 import Mails from './admin/Mails.vue';
 import MailsUnknow from './admin/MailsUnknow.vue';
 import About from './common/About.vue';
 import Maintenance from './admin/Maintenance.vue';
+import DatabaseManager from './admin/DatabaseManager.vue';
 import Appearance from './common/Appearance.vue';
 import Telegram from './admin/Telegram.vue';
 import Webhook from './admin/Webhook.vue';
+import MailWebhook from './admin/MailWebhook.vue';
+import WorkerConfig from './admin/WorkerConfig.vue';
 
 const {
-  adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
+  adminAuth, showAdminAuth, adminTab, loading,
+  globalTabplacement, showAdminPage, userSettings
 } = useGlobalState()
 const message = useMessage()
 
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./admin/SendMail.vue')
+    .finally(() => loading.value = false);
+});
+
 const authFunc = async () => {
   try {
+    adminAuth.value = tmpAdminAuth.value;
     location.reload()
   } catch (error) {
     message.error(error.message || "error");
@@ -39,70 +52,99 @@ const { t } = useI18n({
       accessHeader: 'Admin Password',
       accessTip: 'Please enter the admin password',
       mails: 'Emails',
+      sendMail: 'Send Mail',
+      qucickSetup: 'Quick Setup',
       account: 'Account',
       account_create: 'Create Account',
       account_settings: 'Account Settings',
       user: 'User',
       user_management: 'User Management',
       user_settings: 'User Settings',
+      userOauth2Settings: 'Oauth2 Settings',
       unknow: 'Mails with unknow receiver',
       senderAccess: 'Sender Access Control',
       sendBox: 'Send Box',
       telegram: 'Telegram Bot',
-      webhook: 'Webhook',
+      webhookSettings: 'Webhook Settings',
       statistics: 'Statistics',
       maintenance: 'Maintenance',
+      database: 'Database',
+      workerconfig: 'Worker Config',
       appearance: 'Appearance',
       about: 'About',
       ok: 'OK',
+      mailWebhook: 'Mail Webhook',
     },
     zh: {
       accessHeader: 'Admin 密码',
       accessTip: '请输入 Admin 密码',
       mails: '邮件',
+      sendMail: '发送邮件',
+      qucickSetup: '快速设置',
       account: '账号',
       account_create: '创建账号',
       account_settings: '账号设置',
       user: '用户',
       user_management: '用户管理',
       user_settings: '用户设置',
+      userOauth2Settings: 'Oauth2 设置',
       unknow: '无收件人邮件',
       senderAccess: '发件权限控制',
       sendBox: '发件箱',
       telegram: '电报机器人',
-      webhook: 'Webhook',
+      webhookSettings: 'Webhook 设置',
       statistics: '统计',
       maintenance: '维护',
+      database: '数据库',
+      workerconfig: 'Worker 配置',
       appearance: '外观',
       about: '关于',
       ok: '确定',
+      mailWebhook: '邮件 Webhook',
     }
   }
 });
 
+const showAdminPasswordModal = computed(() => !showAdminPage.value || showAdminAuth.value)
+const tmpAdminAuth = ref('')
+
 onMounted(async () => {
-  if (!adminAuth.value) {
-    showAdminAuth.value = true;
-    return;
-  }
+  // make sure user_id is fetched
+  if (!userSettings.value.user_id) await api.getUserSettings(message);
 })
 </script>
 
 <template>
-  <div>
-    <n-modal v-model:show="showAdminAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
-      :title="t('accessHeader')">
+  <div v-if="userSettings.fetched">
+    <n-modal v-model:show="showAdminPasswordModal" :closable="false" :closeOnEsc="false" :maskClosable="false"
+      preset="dialog" :title="t('accessHeader')">
       <p>{{ t('accessTip') }}</p>
-      <n-input v-model:value="adminAuth" type="textarea" :autosize="{ minRows: 3 }" />
+      <n-input v-model:value="tmpAdminAuth" type="password" show-password-on="click" />
       <template #action>
         <n-button @click="authFunc" type="primary" :loading="loading">
           {{ t('ok') }}
         </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="qucickSetup" :tab="t('qucickSetup')">
+        <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="database" :tab="t('database')">
+            <DatabaseManager />
+          </n-tab-pane>
+          <n-tab-pane name="account_settings" :tab="t('account_settings')">
+            <AccountSettings />
+          </n-tab-pane>
+          <n-tab-pane name="user_settings" :tab="t('user_settings')">
+            <UserSettings />
+          </n-tab-pane>
+          <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
+            <WorkerConfig />
+          </n-tab-pane>
+        </n-tabs>
+      </n-tab-pane>
       <n-tab-pane name="account" :tab="t('account')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" animated>
           <n-tab-pane name="account" :tab="t('account')">
             <Account />
           </n-tab-pane>
@@ -115,34 +157,43 @@ onMounted(async () => {
           <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
             <SenderAccess />
           </n-tab-pane>
-          <n-tab-pane name="webhook" :tab="t('webhook')">
+          <n-tab-pane name="webhook" :tab="t('webhookSettings')">
             <Webhook />
           </n-tab-pane>
         </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="user" :tab="t('user')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" 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-tab-pane name="userOauth2Settings" :tab="t('userOauth2Settings')">
+            <UserOauth2Settings />
+          </n-tab-pane>
         </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="mails" :tab="t('mails')">
-        <n-tabs type="bar" animated>
+        <n-tabs type="bar" justify-content="center" 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-tab-pane name="sendBox" :tab="t('sendBox')">
+            <SendBox />
+          </n-tab-pane>
+          <n-tab-pane name="sendMail" :tab="t('sendMail')">
+            <SendMail />
+          </n-tab-pane>
+          <n-tab-pane name="mailWebhook" :tab="t('mailWebhook')">
+            <MailWebhook />
+          </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>
@@ -150,7 +201,17 @@ onMounted(async () => {
         <Statistics />
       </n-tab-pane>
       <n-tab-pane name="maintenance" :tab="t('maintenance')">
-        <Maintenance />
+        <n-tabs type="bar" justify-content="center" animated>
+          <n-tab-pane name="database" :tab="t('database')">
+            <DatabaseManager />
+          </n-tab-pane>
+          <n-tab-pane name="workerconfig" :tab="t('workerconfig')">
+            <WorkerConfig />
+          </n-tab-pane>
+          <n-tab-pane name="maintenance" :tab="t('maintenance')">
+            <Maintenance />
+          </n-tab-pane>
+        </n-tabs>
       </n-tab-pane>
       <n-tab-pane name="appearance" :tab="t('appearance')">
         <Appearance />

frontend/src/views/Footer.vue

@@ -21,9 +21,14 @@ const { t } = useI18n({
     <div>
         <n-divider class="footer-divider" />
         <div style="text-align: center; padding: 20px">
-            <n-text depth="3">
-                {{ t('copyright') }} © 2023-{{ new Date().getFullYear() }} {{ openSettings.copyright }}
-            </n-text>
+            <n-space justify="center">
+                <n-text depth="3">
+                    {{ t('copyright') }} © 2023-{{ new Date().getFullYear() }}
+                </n-text>
+                <n-text depth="3">
+                    <div v-html="openSettings.copyright"></div>
+                </n-text>
+            </n-space>
         </div>
     </div>
 </template>

frontend/src/views/Header.vue

@@ -15,10 +15,11 @@ import { api } from '../api'
 import { getRouterPathWithLang } from '../utils'
 
 const message = useMessage()
+const notification = useNotification()
 
 const {
-    toggleDark, isDark, isTelegram,
-    showAuth, adminAuth, auth, loading, openSettings
+    toggleDark, isDark, isTelegram, showAdminPage,
+    showAuth, auth, loading, openSettings, userSettings
 } = useGlobalState()
 const route = useRoute()
 const router = useRouter()
@@ -125,7 +126,9 @@ const menuOptions = computed(() => [
                 type: menuValue.value == "admin" ? "primary" : "default",
                 style: "width: 100%",
                 onClick: async () => {
+                    loading.value = true;
                     await router.push(getRouterPathWithLang('/admin', locale.value));
+                    loading.value = false;
                     showMobileMenu.value = false;
                 }
             },
@@ -134,7 +137,7 @@ const menuOptions = computed(() => [
                 icon: () => h(NIcon, { component: AdminPanelSettingsFilled }),
             }
         ),
-        show: !!adminAuth.value,
+        show: showAdminPage.value,
         key: "admin"
     },
     {
@@ -192,6 +195,7 @@ const menuOptions = computed(() => [
                 icon: () => h(NIcon, { component: GithubAlt })
             }
         ),
+        show: openSettings.value?.showGithub,
         key: "github"
     }
 ]);
@@ -203,8 +207,30 @@ useHead({
     ]
 });
 
+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");
+        loading.value = true;
+        await router.push(getRouterPathWithLang('/admin', locale.value));
+        loading.value = false;
+    } 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);
+    await api.getOpenSettings(message, notification);
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
 });
 </script>
 
@@ -215,7 +241,9 @@ onMounted(async () => {
                 <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>
@@ -237,7 +265,7 @@ onMounted(async () => {
         <n-modal v-model:show="showAuth" :closable="false" :closeOnEsc="false" :maskClosable="false" preset="dialog"
             :title="t('accessHeader')">
             <p>{{ t('accessTip') }}</p>
-            <n-input v-model:value="auth" type="textarea" :autosize="{ minRows: 3 }" />
+            <n-input v-model:value="auth" type="password" show-password-on="click" />
             <template #action>
                 <n-button :loading="loading" @click="authFunc" type="primary">
                     {{ t('ok') }}

frontend/src/views/Index.vue

@@ -1,22 +1,34 @@
 <script setup>
-import { defineAsyncComponent } from 'vue'
+import { defineAsyncComponent, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
+import { useIsMobile } from '../utils/composables'
+import { FullscreenExitOutlined } from '@vicons/material'
 
 import AddressBar from './index/AddressBar.vue';
 import MailBox from '../components/MailBox.vue';
 import SendBox from '../components/SendBox.vue';
 import AutoReply from './index/AutoReply.vue';
 import AccountSettings from './index/AccountSettings.vue';
+import Appearance from './common/Appearance.vue';
 import Webhook from './index/Webhook.vue';
 import Attachment from './index/Attachment.vue';
 import About from './common/About.vue';
+import SimpleIndex from './index/SimpleIndex.vue';
 
-const SendMail = defineAsyncComponent(() => import('./index/SendMail.vue'));
-const { settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
+const { loading, settings, openSettings, indexTab, globalTabplacement, useSimpleIndex } = useGlobalState()
 const message = useMessage()
+const route = useRoute()
+const isMobile = useIsMobile()
+
+const SendMail = defineAsyncComponent(() => {
+  loading.value = true;
+  return import('./index/SendMail.vue')
+    .finally(() => loading.value = false);
+});
 
 const { t } = useI18n({
   messages: {
@@ -26,24 +38,37 @@ const { t } = useI18n({
       sendmail: 'Send Mail',
       auto_reply: 'Auto Reply',
       accountSettings: 'Account Settings',
+      appearance: 'Appearance',
       about: 'About',
       s3Attachment: 'S3 Attachment',
       saveToS3Success: 'save to s3 success',
+      webhookSettings: 'Webhook Settings',
+      query: 'Query',
+      enterSimpleMode: 'Simple Mode',
     },
     zh: {
       mailbox: '收件箱',
       sendbox: '发件箱',
       sendmail: '发送邮件',
       auto_reply: '自动回复',
-      accountSettings: '账户设置',
+      accountSettings: '账户',
+      appearance: '外观',
       about: '关于',
       s3Attachment: 'S3附件',
       saveToS3Success: '保存到s3成功',
+      webhookSettings: 'Webhook 设置',
+      query: '查询',
+      enterSimpleMode: '极简模式',
     }
   }
 });
 
 const fetchMailData = async (limit, offset) => {
+  if (mailIdQuery.value > 0) {
+    const singleMail = await api.fetch(`/api/mail/${mailIdQuery.value}`);
+    if (singleMail) return { results: [singleMail], count: 1 };
+    return { results: [], count: 0 };
+  }
   return await api.fetch(`/api/mails?limit=${limit}&offset=${offset}`);
 };
 
@@ -78,39 +103,89 @@ const saveToS3 = async (mail_id, filename, blob) => {
     message.error(error.message || "save to s3 error");
   }
 }
+
+const mailBoxKey = ref("")
+const mailIdQuery = ref("")
+const showMailIdQuery = ref(false)
+
+const queryMail = () => {
+  mailBoxKey.value = Date.now();
+}
+
+watch(route, () => {
+  if (!route.query.mail_id) {
+    showMailIdQuery.value = false;
+    mailIdQuery.value = "";
+    queryMail();
+  }
+})
+
+onMounted(() => {
+  if (route.query.mail_id) {
+    showMailIdQuery.value = true;
+    mailIdQuery.value = route.query.mail_id;
+    queryMail();
+  }
+})
 </script>
 
 <template>
   <div>
-    <AddressBar />
-    <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
-      <n-tab-pane name="mailbox" :tab="t('mailbox')">
-        <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 :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
-          :deleteMail="deleteSenboxMail" />
-      </n-tab-pane>
-      <n-tab-pane name="sendmail" :tab="t('sendmail')">
-        <SendMail />
-      </n-tab-pane>
-      <n-tab-pane name="accountSettings" :tab="t('accountSettings')">
-        <AccountSettings />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
-        <AutoReply />
-      </n-tab-pane>
-      <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('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 v-if="useSimpleIndex">
+      <SimpleIndex />
+    </div>
+    <div v-else>
+      <AddressBar />
+      <n-tabs v-if="settings.address" type="card" v-model:value="indexTab" :placement="globalTabplacement">
+        <template #prefix v-if="!isMobile">
+          <n-button @click="useSimpleIndex = true" tertiary size="small">
+            <template #icon>
+              <n-icon>
+                <FullscreenExitOutlined />
+              </n-icon>
+            </template>
+            {{ t('enterSimpleMode') }}
+          </n-button>
+        </template>
+        <n-tab-pane name="mailbox" :tab="t('mailbox')">
+          <div v-if="showMailIdQuery" style="margin-bottom: 10px;">
+            <n-input-group>
+              <n-input v-model:value="mailIdQuery" />
+              <n-button @click="queryMail" type="primary" tertiary>
+                {{ t('query') }}
+              </n-button>
+            </n-input-group>
+          </div>
+          <MailBox :key="mailBoxKey" :showEMailTo="false" :showReply="true" :showSaveS3="openSettings.isS3Enabled"
+            :saveToS3="saveToS3" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+            :fetchMailData="fetchMailData" :deleteMail="deleteMail" />
+        </n-tab-pane>
+        <n-tab-pane name="sendbox" :tab="t('sendbox')">
+          <SendBox :fetchMailData="fetchSenboxData" :enableUserDeleteEmail="openSettings.enableUserDeleteEmail"
+            :deleteMail="deleteSenboxMail" />
+        </n-tab-pane>
+        <n-tab-pane name="sendmail" :tab="t('sendmail')">
+          <SendMail />
+        </n-tab-pane>
+        <n-tab-pane name="accountSettings" :tab="t('accountSettings')">
+          <AccountSettings />
+        </n-tab-pane>
+        <n-tab-pane name="appearance" :tab="t('appearance')">
+          <Appearance :showUseSimpleIndex="true" />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
+          <AutoReply />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.enableWebhook" name="webhook" :tab="t('webhookSettings')">
+          <Webhook />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.isS3Enabled" name="s3_attachment" :tab="t('s3Attachment')">
+          <Attachment />
+        </n-tab-pane>
+        <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
+          <About />
+        </n-tab-pane>
+      </n-tabs>
+    </div>
   </div>
 </template>

frontend/src/views/User.vue

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

frontend/src/views/admin/Account.vue

@@ -9,8 +9,8 @@ import { NButton, NMenu } from 'naive-ui';
 import { MenuFilled } from '@vicons/material'
 
 const {
-    adminAuth, showAdminAuth, loading,
-    adminTab, adminMailTabAddress, adminSendBoxTabAddress
+    loading, adminTab,
+    adminMailTabAddress, adminSendBoxTabAddress
 } = useGlobalState()
 const message = useMessage()
 
@@ -27,13 +27,18 @@ const { t } = useI18n({
             addressCredentialTip: 'Please copy the Mail Address Credential and you can use it to login to your email account.',
             delete: 'Delete',
             deleteTip: 'Are you sure to delete this email?',
-            delteAccount: 'Delete Account',
+            deleteAccount: 'Delete Account',
             viewMails: 'View Mails',
             viewSendBox: 'View SendBox',
             itemCount: 'itemCount',
             query: 'Query',
             addressQueryTip: 'Leave blank to query all addresses',
-            actions: 'Actions'
+            clearInbox: 'Clear Inbox',
+            clearSentItems: 'Clear Sent Items',
+            clearInboxTip: 'Are you sure to clear inbox for this email?',
+            clearSentItemsTip: 'Are you sure to clear sent items for this email?',
+            actions: 'Actions',
+            success: 'Success',
         },
         zh: {
             name: '名称',
@@ -46,13 +51,18 @@ const { t } = useI18n({
             addressCredentialTip: '请复制邮箱地址凭证，你可以使用它登录你的邮箱。',
             delete: '删除',
             deleteTip: '确定要删除这个邮箱吗？',
-            delteAccount: '删除邮箱',
+            deleteAccount: '删除邮箱',
             viewMails: '查看邮件',
             viewSendBox: '查看发件箱',
             itemCount: '总数',
             query: '查询',
             addressQueryTip: '留空查询所有地址',
+            clearInbox: '清空收件箱',
+            clearSentItems: '清空发件箱',
+            clearInboxTip: '确定要清空这个邮箱的收件箱吗？',
+            clearSentItemsTip: '确定要清空这个邮箱的发件箱吗？',
             actions: '操作',
+            success: '成功',
         }
     }
 });
@@ -60,6 +70,8 @@ const { t } = useI18n({
 const showEmailCredential = ref(false)
 const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
+const curClearInboxAddressId = ref(0);
+const curClearSentItemsAddressId = ref(0);
 
 const addressQuery = ref("")
 
@@ -68,6 +80,8 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 const showDeleteAccount = ref(false)
+const showClearInbox = ref(false)
+const showClearSentItems = ref(false)
 
 const showCredential = async (id) => {
     try {
@@ -83,7 +97,7 @@ const showCredential = async (id) => {
 const deleteEmail = async () => {
     try {
         await api.adminDeleteAddress(curDeleteAddressId.value)
-        message.success("success");
+        message.success(t("success"));
         await fetchData()
     } catch (error) {
         message.error(error.message || "error");
@@ -92,8 +106,37 @@ const deleteEmail = async () => {
     }
 }
 
+const clearInbox = async () => {
+    try {
+        await api.fetch(`/admin/clear_inbox/${curClearInboxAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearInbox.value = false
+    }
+}
+
+const clearSentItems = async () => {
+    try {
+        await api.fetch(`/admin/clear_sent_items/${curClearSentItemsAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearSentItems.value = false
+    }
+}
+
 const fetchData = async () => {
     try {
+        addressQuery.value = addressQuery.value.trim()
         const { results, count: addressCount } = await api.fetch(
             `/admin/address`
             + `?limit=${pageSize.value}`
@@ -211,7 +254,8 @@ const columns = [
                                             }
                                         },
                                         { default: () => t('viewMails') }
-                                    )
+                                    ),
+                                    show: row.mail_count > 0
                                 },
                                 {
                                     label: () => h(NButton,
@@ -223,7 +267,34 @@ const columns = [
                                             }
                                         },
                                         { default: () => t('viewSendBox') }
-                                    )
+                                    ),
+                                    show: row.send_count > 0
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curClearInboxAddressId.value = row.id;
+                                                showClearInbox.value = true;
+                                            }
+                                        },
+                                        { default: () => t('clearInbox') }
+                                    ),
+                                    show: row.mail_count > 0
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curClearSentItemsAddressId.value = row.id;
+                                                showClearSentItems.value = true;
+                                            }
+                                        },
+                                        { default: () => t('clearSentItems') }
+                                    ),
+                                    show: row.send_count > 0
                                 },
                                 {
                                     label: () => h(NButton,
@@ -251,10 +322,6 @@ watch([page, pageSize], async () => {
 })
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
     await fetchData()
 })
 </script>
@@ -274,29 +341,48 @@ onMounted(async () => {
             <template #action>
             </template>
         </n-modal>
-        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('delteAccount')">
+        <n-modal v-model:show="showDeleteAccount" preset="dialog" :title="t('deleteAccount')">
             <p>{{ t('deleteTip') }}</p>
             <template #action>
                 <n-button :loading="loading" @click="deleteEmail" size="small" tertiary type="error">
-                    {{ t('delteAccount') }}
+                    {{ t('deleteAccount') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearInbox" preset="dialog" :title="t('clearInbox')">
+            <p>{{ t('clearInboxTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearInbox" size="small" tertiary type="error">
+                    {{ t('clearInbox') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-modal v-model:show="showClearSentItems" preset="dialog" :title="t('clearSentItems')">
+            <p>{{ t('clearSentItemsTip') }}</p>
+            <template #action>
+                <n-button :loading="loading" @click="clearSentItems" size="small" tertiary type="error">
+                    {{ t('clearSentItems') }}
                 </n-button>
             </template>
         </n-modal>
         <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>
         </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 style="overflow: auto;">
+            <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" embedded />
         </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
 
@@ -305,4 +391,8 @@ onMounted(async () => {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.n-data-table {
+    min-width: 1000px;
+}
 </style>

frontend/src/views/admin/AccountSettings.vue

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

frontend/src/views/admin/CreateAccount.vue

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

frontend/src/views/admin/DatabaseManager.vue

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

frontend/src/views/admin/MailWebhook.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// @ts-ignore
+import { api } from '../../api'
+
+// @ts-ignore
+import WebhookComponent from '../../components/WebhookComponent.vue'
+
+const fetchData = async () => {
+    return await api.fetch(`/admin/mail_webhook/settings`)
+}
+
+const saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/admin/mail_webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
+}
+
+</script>
+
+<template>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
+</template>

frontend/src/views/admin/Mails.vue

@@ -6,10 +6,7 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import MailBox from '../../components/MailBox.vue';
 
-const {
-    adminAuth, showAdminAuth,
-    adminMailTabAddress
-} = useGlobalState()
+const { adminMailTabAddress } = useGlobalState()
 
 const { t } = useI18n({
     messages: {
@@ -29,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();
 }
 
@@ -51,20 +45,14 @@ const fetchMailData = async (limit, offset) => {
 const deleteMail = async (curMailId) => {
     await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
 };
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-})
 </script>
 
 <template>
     <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>

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`
@@ -16,19 +11,12 @@ const fetchMailUnknowData = async (limit, offset) => {
 }
 
 const deleteMail = async (curMailId) => {
-    await api.fetch(`/api/mails/${curMailId}`, { method: 'DELETE' });
+    await api.fetch(`/admin/mails/${curMailId}`, { method: 'DELETE' });
 };
-
-onMounted(async () => {
-    if (!adminAuth.value) {
-        showAdminAuth.value = true;
-        return;
-    }
-})
 </script>
 
 <template>
-    <div v-if="adminAuth" style="margin-top: 10px;">
+    <div style="margin-top: 10px;">
         <MailBox :enableUserDeleteEmail="true" :fetchMailData="fetchMailUnknowData" :deleteMail="deleteMail" />
     </div>
 </template>

frontend/src/views/admin/Maintenance.vue

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

frontend/src/views/admin/SendBox.vue

@@ -21,6 +21,7 @@ const { t } = useI18n({
 });
 
 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}` : '')
@@ -35,7 +36,7 @@ const deleteSenboxMail = async (curMailId) => {
 <template>
     <div>
         <n-input-group>
-            <n-input v-model:value="adminSendBoxTabAddress" :placeholder="t('queryTip')" />
+            <n-input v-model:value="adminSendBoxTabAddress" :placeholder="t('queryTip')" @keydown.enter="fetchData" />
             <n-button @click="fetchData" type="primary" tertiary>
                 {{ t('query') }}
             </n-button>

frontend/src/views/admin/SendMail.vue

@@ -0,0 +1,199 @@
+<script setup>
+import '@wangeditor/editor/dist/css/style.css'
+import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
+import { useI18n } from 'vue-i18n'
+import { onBeforeUnmount, ref, shallowRef } from 'vue'
+import { useSessionStorage } from '@vueuse/core'
+import { api } from '../../api'
+
+const message = useMessage()
+const isPreview = ref(false)
+const editorRef = shallowRef()
+
+const sendMailModel = useSessionStorage('sendMailByAdminModel', {
+    fromName: "",
+    fromMail: "",
+    toName: "",
+    toMail: "",
+    subject: "",
+    contentType: 'text',
+    content: "",
+});
+
+const { t } = useI18n({
+    locale: 'zh',
+    messages: {
+        en: {
+            successSend: 'Please check your sendbox. If failed, please try again later.',
+            fromName: 'Your Name and Address, leave Name blank to use email address',
+            toName: 'Recipient Name and Address, leave Name blank to use email address',
+            subject: 'Subject',
+            options: 'Options',
+            edit: 'Edit',
+            preview: 'Preview',
+            content: 'Content',
+            send: 'Send',
+            text: 'Text',
+            html: 'HTML',
+            'rich text': 'Rich Text',
+            tooLarge: 'Too large file, please upload file less than 1MB.',
+        },
+        zh: {
+            successSend: '请查看您的发件箱, 如果失败, 请检查稍后重试。',
+            fromName: '你的名称和地址，名称不填写则使用邮箱地址',
+            toName: '收件人名称和地址，名称不填写则使用邮箱地址',
+            subject: '主题',
+            options: '选项',
+            edit: '编辑',
+            preview: '预览',
+            content: '内容',
+            send: '发送',
+            text: '文本',
+            html: 'HTML',
+            'rich text': '富文本',
+            tooLarge: '文件过大, 请上传小于1MB的文件。',
+        }
+    }
+});
+
+const contentTypes = [
+    { label: t('text'), value: 'text' },
+    { label: t('html'), value: 'html' },
+    { label: t('rich text'), value: 'rich' },
+]
+
+const send = async () => {
+    try {
+        await api.fetch(`/admin/send_mail`,
+            {
+                method: 'POST',
+                body:
+                    JSON.stringify({
+                        from_name: sendMailModel.value.fromName,
+                        from_mail: sendMailModel.value.fromMail,
+                        to_name: sendMailModel.value.toName,
+                        to_mail: sendMailModel.value.toMail,
+                        subject: sendMailModel.value.subject,
+                        is_html: sendMailModel.value.contentType != 'text',
+                        content: sendMailModel.value.content,
+                    })
+            })
+        sendMailModel.value = {
+            fromName: "",
+            fromMail: "",
+            toName: "",
+            toMail: "",
+            subject: "",
+            contentType: 'text',
+            content: "",
+        }
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        message.success(t("successSend"));
+    }
+}
+
+const toolbarConfig = {
+    excludeKeys: ["uploadVideo"]
+}
+
+const editorConfig = {
+    MENU_CONF: {
+        'uploadImage': {
+            async customUpload() {
+                message.error(t('tooLarge'))
+            },
+            maxFileSize: 1 * 1024 * 1024,
+            base64LimitSize: 1 * 1024 * 1024,
+        }
+    }
+}
+
+onBeforeUnmount(() => {
+    const editor = editorRef.value
+    if (editor == null) return
+    editor.destroy()
+})
+
+const handleCreated = (editor) => {
+    editorRef.value = editor;
+}
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded>
+            <n-flex justify="end">
+                <n-button type="primary" @click="send">{{ t('send') }}</n-button>
+            </n-flex>
+            <div class="left">
+                <n-form :model="sendMailModel">
+                    <n-form-item :label="t('fromName')" label-placement="top">
+                        <n-input-group>
+                            <n-input v-model:value="sendMailModel.fromName" />
+                            <n-input v-model:value="sendMailModel.fromMail" />
+                        </n-input-group>
+                    </n-form-item>
+                    <n-form-item :label="t('toName')" label-placement="top">
+                        <n-input-group>
+                            <n-input v-model:value="sendMailModel.toName" />
+                            <n-input v-model:value="sendMailModel.toMail" />
+                        </n-input-group>
+                    </n-form-item>
+                    <n-form-item :label="t('subject')" label-placement="top">
+                        <n-input v-model:value="sendMailModel.subject" />
+                    </n-form-item>
+                    <n-form-item :label="t('options')" label-placement="top">
+                        <n-radio-group v-model:value="sendMailModel.contentType">
+                            <n-radio-button v-for="option in contentTypes" :key="option.value" :value="option.value"
+                                :label="option.label" />
+                        </n-radio-group>
+                        <n-button v-if="sendMailModel.contentType != 'text'" @click="isPreview = !isPreview"
+                            style="margin-left: 10px;">
+                            {{ isPreview ? t('edit') : t('preview') }}
+                        </n-button>
+                    </n-form-item>
+                    <n-form-item :label="t('content')" label-placement="top">
+                        <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">
+                            <Toolbar style="border-bottom: 1px solid #ccc" :defaultConfig="toolbarConfig"
+                                :editor="editorRef" mode="default" />
+                            <Editor style="height: 500px; overflow-y: hidden;" v-model="sendMailModel.content"
+                                :defaultConfig="editorConfig" mode="default" @onCreated="handleCreated" />
+                        </div>
+                        <n-input v-else type="textarea" v-model:value="sendMailModel.content" :autosize="{
+                            minRows: 3
+                        }" />
+                    </n-form-item>
+                </n-form>
+            </div>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.n-card {
+    max-width: 800px;
+}
+
+.n-button {
+    text-align: left;
+    margin-right: 10px;
+}
+
+.center {
+    display: flex;
+    text-align: center;
+    place-items: center;
+    justify-content: center;
+}
+
+.left {
+    text-align: left;
+    place-items: left;
+    justify-content: left;
+}
+</style>

frontend/src/views/admin/SenderAccess.vue

@@ -79,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}`
@@ -192,20 +193,22 @@ 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>
     </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 style="overflow: auto;">
+      <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" embedded />
     </div>
-    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
   </div>
 </template>
 
@@ -214,4 +217,8 @@ onMounted(async () => {
   margin-top: 10px;
   margin-bottom: 10px;
 }
+
+.n-data-table {
+  min-width: 700px;
+}
 </style>

frontend/src/views/admin/Statistics.vue

@@ -4,23 +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 { adminAuth } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
     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: '发送邮件总数'
         }
@@ -28,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");
@@ -50,44 +58,68 @@ const fetchStatistics = async () => {
 }
 
 onMounted(async () => {
-    if (!adminAuth.value) {
-        return;
-    }
     await fetchStatistics()
 })
 </script>
 
 <template>
-    <n-card :bordered="false" embedded>
-        <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>

frontend/src/views/admin/Telegram.vue

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

frontend/src/views/admin/UserAddressManagement.vue

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

frontend/src/views/admin/UserManagement.vue

@@ -1,14 +1,16 @@
 <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 { loading } = useGlobalState()
+import UserAddressManagement from './UserAddressManagement.vue'
+
+const { loading, openSettings } = useGlobalState()
 const message = useMessage()
 
 const { t } = useI18n({
@@ -16,6 +18,7 @@ const { t } = useI18n({
         en: {
             success: 'Success',
             user_email: 'User Email',
+            role: 'Role',
             address_count: 'Address Count',
             created_at: 'Created At',
             actions: 'Actions',
@@ -29,10 +32,16 @@ const { t } = useI18n({
             createUser: 'Create User',
             email: 'Email',
             password: 'Password',
+            changeRole: 'Change Role',
+            prefix: 'Prefix',
+            domains: 'Domains',
+            roleDonotExist: 'Current Role does not exist',
+            userAddressManagement: 'Address Management',
         },
         zh: {
             success: '成功',
             user_email: '用户邮箱',
+            role: '角色',
             address_count: '地址数量',
             created_at: '创建时间',
             actions: '操作',
@@ -46,6 +55,11 @@ const { t } = useI18n({
             createUser: '创建用户',
             email: '邮箱',
             password: '密码',
+            changeRole: '更改角色',
+            prefix: '前缀',
+            domains: '域名',
+            roleDonotExist: '当前角色不存在',
+            userAddressManagement: '地址管理',
         }
     }
 });
@@ -64,9 +78,32 @@ const user = ref({
     email: "",
     password: ""
 })
+const showChangeRole = ref(false)
+const showUserAddressManagement = 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}`
@@ -138,6 +175,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",
@@ -147,16 +202,42 @@ 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",
         render(row) {
-            return h(NBadge, {
-                value: row.address_count,
-                'show-zero': true,
-                max: 99,
-                type: "success"
-            })
+            return h(NButton,
+                {
+                    text: true,
+                    onClick: () => {
+                        if (row.address_count <= 0) return;
+                        curUserId.value = row.id;
+                        showUserAddressManagement.value = true;
+                    }
+                },
+                {
+                    icon: () => h(NBadge, {
+                        value: row.address_count,
+                        'show-zero': true,
+                        max: 99,
+                        type: "success"
+                    }),
+                    default: () => row.address_count > 0 ? t('userAddressManagement') : ""
+                }
+            )
         }
     },
     {
@@ -176,6 +257,32 @@ const columns = [
                             icon: () => h(MenuFilled),
                             key: "action",
                             children: [
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                showUserAddressManagement.value = true;
+                                            }
+                                        },
+                                        { default: () => t('userAddressManagement') }
+                                    ),
+                                    show: row.address_count > 0
+                                },
+                                {
+                                    label: () => h(NButton,
+                                        {
+                                            text: true,
+                                            onClick: () => {
+                                                curUserId.value = row.id;
+                                                curUserRole.value = row.role_text;
+                                                showChangeRole.value = true;
+                                            }
+                                        },
+                                        { default: () => t('changeRole') }
+                                    ),
+                                },
                                 {
                                     label: () => h(NButton,
                                         {
@@ -212,12 +319,29 @@ 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>
 
@@ -256,27 +380,45 @@ 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-modal v-model:show="showUserAddressManagement" preset="card" :title="t('userAddressManagement')">
+            <UserAddressManagement :user_id="curUserId" />
+        </n-modal>
         <n-input-group>
-            <n-input v-model:value="userQuery" />
+            <n-input v-model:value="userQuery" @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>
-                <template #suffix>
-                    <n-button @click="showCreateUser = true" size="small" tertiary type="primary"
-                        style="margin-left: 10px">
-                        {{ t('createUser') }}
-                    </n-button>
-                </template>
-            </n-pagination>
+        <div style="overflow: auto;">
+            <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="showCreateUser = true" size="small" tertiary type="primary"
+                            style="margin-left: 10px">
+                            {{ t('createUser') }}
+                        </n-button>
+                    </template>
+                </n-pagination>
+            </div>
+            <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
         </div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
     </div>
 </template>
 
@@ -285,4 +427,8 @@ onMounted(async () => {
     margin-top: 10px;
     margin-bottom: 10px;
 }
+
+.n-data-table {
+    min-width: 800px;
+}
 </style>

frontend/src/views/admin/UserOauth2Settings.vue

@@ -0,0 +1,274 @@
+<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'
+import constant from '../../constant'
+import { UserOauth2Settings } from '../../models';
+
+const { loading } = useGlobalState()
+// @ts-ignore
+const message = useMessage()
+
+const { t } = useI18n({
+    messages: {
+        en: {
+            save: 'Save',
+            delete: 'Delete',
+            successTip: 'Save Success',
+            enable: 'Enable',
+            enableMailAllowList: 'Enable Mail Address Allow List(Manually enterable)',
+            manualInputPrompt: 'Type and press Enter to add',
+            mailAllowList: 'Mail Address Allow List',
+            addOauth2: 'Add Oauth2',
+            name: 'Name',
+            oauth2Type: 'Oauth2 Type',
+            tip: 'Third-party login will automatically use the user\'s email to register an account (the same email will be regarded as the same account), this account is the same as the registered account, and you can also set the password through the forget password',
+        },
+        zh: {
+            save: '保存',
+            delete: '删除',
+            successTip: '保存成功',
+            enable: '启用',
+            enableMailAllowList: '启用邮件地址白名单(可手动输入, 回车增加)',
+            manualInputPrompt: '输入后按回车键添加',
+            mailAllowList: '邮件地址白名单',
+            addOauth2: '添加 Oauth2',
+            name: '名称',
+            oauth2Type: 'Oauth2 类型',
+            tip: '第三方登录会自动使用用户邮箱注册账号(邮箱相同将视为同一账号), 此账号和注册的账号相同, 也可以通过忘记密码设置密码',
+        }
+    }
+});
+
+const mailAllowOptions = constant.COMMOM_MAIL.map((item) => {
+    return { label: item, value: item }
+})
+
+const userOauth2Settings = ref([] as UserOauth2Settings[])
+const showAddOauth2 = ref(false)
+const newOauth2Name = ref('')
+const newOauth2Type = ref('custom')
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/user_oauth2_settings`)
+        Object.assign(userOauth2Settings.value, res)
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/user_oauth2_settings`, {
+            method: 'POST',
+            body: JSON.stringify(userOauth2Settings.value)
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error((error as Error).message || "error");
+    }
+}
+
+const addNewOauth2 = () => {
+    const authorizationURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://github.com/login/oauth/authorize'
+            case 'authentik':
+                return 'https://youdomain/application/o/authorize/'
+            default:
+                return ''
+        }
+    }
+    const accessTokenURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://github.com/login/oauth/access_token'
+            case 'authentik':
+                return 'https://youdomain/application/o/token/'
+            default:
+                return ''
+        }
+    }
+    const accessTokenFormat = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'json'
+            case 'authentik':
+                return 'urlencoded'
+            default:
+                return ''
+        }
+    }
+    const userInfoURL = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'https://api.github.com/user'
+            case 'authentik':
+                return 'https://youdomain/application/o/userinfo/'
+            default:
+                return ''
+        }
+    }
+    const userEmailKey = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'email'
+            case 'authentik':
+                return 'email'
+            default:
+                return ''
+        }
+    }
+    const scope = () => {
+        switch (newOauth2Type.value) {
+            case 'github':
+                return 'user:email'
+            case 'authentik':
+                return 'email openid'
+            default:
+                return ''
+        }
+    }
+    userOauth2Settings.value.push({
+        name: newOauth2Name.value,
+        clientID: '',
+        clientSecret: '',
+        authorizationURL: authorizationURL(),
+        accessTokenURL: accessTokenURL(),
+        accessTokenFormat: accessTokenFormat(),
+        userInfoURL: userInfoURL(),
+        userEmailKey: userEmailKey(),
+        redirectURL: `${window.location.origin}/user/oauth2/callback`,
+        logoutURL: '',
+        scope: scope(),
+        enableMailAllowList: false,
+        mailAllowList: constant.COMMOM_MAIL
+    } as UserOauth2Settings)
+    newOauth2Name.value = ''
+    showAddOauth2.value = false
+}
+
+const accessTokenFormatOptions = [
+    { label: 'json', value: 'json' },
+    { label: 'urlencoded', value: 'urlencoded' },
+]
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-modal v-model:show="showAddOauth2" preset="dialog" :title="t('addOauth2')">
+            <n-form>
+                <n-form-item-row :label="t('name')" required>
+                    <n-input v-model:value="newOauth2Name" />
+                </n-form-item-row>
+                <n-form-item-row :label="t('oauth2Type')" required>
+                    <n-radio-group v-model:value="newOauth2Type">
+                        <n-radio-button value="github" label="Github" />
+                        <n-radio-button value="authentik" label="Authentik" />
+                        <n-radio-button value="custom" label="Custom" />
+                    </n-radio-group>
+                </n-form-item-row>
+            </n-form>
+            <template #action>
+                <n-button :loading="loading" @click="addNewOauth2" size="small" tertiary type="primary">
+                    {{ t('addOauth2') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-card :bordered="false" embedded style="max-width: 600px;">
+            <n-alert :show-icon="false" :bordered="false" type="warning" closable style="margin-bottom: 10px;">
+                {{ t("tip") }}
+            </n-alert>
+            <n-flex justify="end">
+                <n-button @click="showAddOauth2 = true" secondary :loading="loading">
+                    {{ t('addOauth2') }}
+                </n-button>
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
+            <n-divider />
+            <n-collapse default-expanded-names="1" accordion :trigger-areas="['main', 'arrow']">
+                <n-collapse-item v-for="(item, index) in userOauth2Settings" :key="index" :title="item.name">
+                    <template #header-extra>
+                        <n-popconfirm @positive-click="userOauth2Settings.splice(index, 1)">
+                            <template #trigger>
+                                <n-button tertiary type="error">
+                                    {{ t('delete') }}
+                                </n-button>
+                            </template>
+                            {{ t('delete') }}
+                        </n-popconfirm>
+                    </template>
+                    <n-form :model="item">
+                        <n-form-item-row :label="t('name')" required>
+                            <n-input v-model:value="item.name" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Client ID" required>
+                            <n-input v-model:value="item.clientID" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Client Secret" required>
+                            <n-input v-model:value="item.clientSecret" type="password" show-password-on="click" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Authorization URL" required>
+                            <n-input v-model:value="item.authorizationURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Access Token URL" required>
+                            <n-input v-model:value="item.accessTokenURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Access Token Params Format" required>
+                            <n-select v-model:value="item.accessTokenFormat" :options="accessTokenFormatOptions" />
+                        </n-form-item-row>
+                        <n-form-item-row label="User Info URL" required>
+                            <n-input v-model:value="item.userInfoURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="User Email Key (Support JSONPATH like $[0].email)" required>
+                            <n-input v-model:value="item.userEmailKey" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Redirect URL" required>
+                            <n-input v-model:value="item.redirectURL" />
+                        </n-form-item-row>
+                        <n-form-item-row label="Scope" required>
+                            <n-input v-model:value="item.scope" />
+                        </n-form-item-row>
+                        <n-form-item-row :label="t('enableMailAllowList')">
+                            <n-input-group>
+                                <n-checkbox v-model:checked="item.enableMailAllowList" style="width: 20%;">
+                                    {{ t('enable') }}
+                                </n-checkbox>
+                                <n-select v-model:value="item.mailAllowList" v-if="item.enableMailAllowList" filterable
+                                    multiple tag style="width: 80%;" :options="mailAllowOptions"
+                                    :placeholder="t('mailAllowList')">
+                                    <template #empty>
+                                        <n-text depth="3">
+                                            {{ t('manualInputPrompt') }}
+                                        </n-text>
+                                    </template>
+                                </n-select>
+                            </n-input-group>
+                        </n-form-item-row>
+                    </n-form>
+                </n-collapse-item>
+            </n-collapse>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/admin/UserSettings.vue

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

frontend/src/views/admin/Webhook.vue

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

frontend/src/views/admin/WorkerConfig.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { loading } = useGlobalState()
+const message = useMessage()
+
+const settings = ref({})
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/worker/configs`)
+        Object.assign(settings.value, res)
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+onMounted(async () => {
+    await fetchData();
+})
+</script>
+
+<template>
+    <div class="center">
+        <n-card :bordered="false" embedded style="max-width: 800px; overflow: auto;">
+            <pre>{{ JSON.stringify(settings, null, 2) }}</pre>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+</style>

frontend/src/views/common/About.vue

@@ -1,10 +1,13 @@
 <script setup>
 import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+import { useGlobalState } from '../../store'
+const { announcement } = useGlobalState()
 </script>
 
 <template>
     <div class="center">
         <n-card :bordered="false" embedded>
+            <div v-html="announcement"></div>
             <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
                 <template #icon>
                     <n-icon :component="GithubAlt" />

frontend/src/views/common/Appearance.vue

@@ -3,16 +3,23 @@ import { useI18n } from 'vue-i18n'
 
 import { useIsMobile } from '../../utils/composables'
 import { useGlobalState } from '../../store'
+const props = defineProps({
+    showUseSimpleIndex: {
+        type: Boolean,
+        default: false
+    }
+})
 
 const {
-    mailboxSplitSize, useIframeShowMail, preferShowTextMail,
-    globalTabplacement, useSideMargin
+    mailboxSplitSize, useIframeShowMail, preferShowTextMail, configAutoRefreshInterval,
+    globalTabplacement, useSideMargin, useUTCDate, useSimpleIndex
 } = useGlobalState()
 const isMobile = useIsMobile()
 
 const { t } = useI18n({
     messages: {
         en: {
+            useSimpleIndex: 'Use Simple Index',
             mailboxSplitSize: 'Mailbox Split Size',
             useIframeShowMail: 'Use iframe Show HTML Mail',
             preferShowTextMail: 'Display text Mail by default',
@@ -22,8 +29,11 @@ const { t } = useI18n({
             top: 'top',
             right: 'right',
             bottom: 'bottom',
+            useUTCDate: 'Use UTC Date',
+            autoRefreshInterval: 'Auto Refresh Interval(Sec)',
         },
         zh: {
+            useSimpleIndex: '使用极简主页',
             mailboxSplitSize: '邮箱界面分栏大小',
             preferShowTextMail: '默认以文本显示邮件',
             useIframeShowMail: '使用iframe显示HTML邮件',
@@ -33,6 +43,8 @@ const { t } = useI18n({
             top: '顶部',
             right: '右侧',
             bottom: '底部',
+            useUTCDate: '使用 UTC 时间',
+            autoRefreshInterval: '自动刷新间隔(秒)',
         }
     }
 });
@@ -48,12 +60,23 @@ const { t } = useI18n({
                     0.75: '0.75'
                 }" />
             </n-form-item-row>
+            <n-form-item-row :label="t('autoRefreshInterval')">
+                <n-slider v-model:value="configAutoRefreshInterval" :min="30" :max="300" :step="1" :marks="{
+                    60: '60', 120: '120', 180: '180', 240: '240'
+                }" />
+            </n-form-item-row>
+            <n-form-item-row v-if="props.showUseSimpleIndex" :label="t('useSimpleIndex')">
+                <n-switch v-model:value="useSimpleIndex" :round="false" />
+            </n-form-item-row>
             <n-form-item-row :label="t('preferShowTextMail')">
                 <n-switch v-model:value="preferShowTextMail" :round="false" />
             </n-form-item-row>
             <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('useUTCDate')">
+                <n-switch v-model:value="useUTCDate" :round="false" />
+            </n-form-item-row>
             <n-form-item-row v-if="!isMobile" :label="t('useSideMargin')">
                 <n-switch v-model:value="useSideMargin" :round="false" />
             </n-form-item-row>

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'
@@ -15,7 +15,7 @@ const props = defineProps({
     bindUserAddress: {
         type: Function,
         default: async () => { await api.bindUserAddress(); },
-        requried: true
+        required: true
     },
     newAddressPath: {
         type: Function,
@@ -29,11 +29,12 @@ const props = defineProps({
                 }),
             });
         },
-        requried: true
+        required: true
     },
 })
 
 const message = useMessage()
+const notification = useNotification()
 const router = useRouter()
 
 const {
@@ -70,9 +71,10 @@ const { locale, t } = useI18n({
     messages: {
         en: {
             login: 'Login',
+            loginAndBind: 'Login and Bind',
             pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
             getNewEmail: 'Create New Email',
-            getNewEmailTip1: 'Please input the email you want to use. only allow ., a-z, A-Z and 0-9',
+            getNewEmailTip1: 'Please input the email you want to use. only allow: ',
             getNewEmailTip2: 'Levaing it blank will generate a random email address.',
             getNewEmailTip3: 'You can choose a domain from the dropdown list.',
             credential: 'Email Address Credential',
@@ -82,12 +84,14 @@ const { locale, t } = useI18n({
             credentialInput: 'Please input the Mail Address Credential',
             bindUserInfo: 'Logged in user, login without binding email or create new email address will bind to current user',
             bindUserAddressError: 'Error when bind email address to user',
+            autoGeneratedName: 'Auto-generated name',
         },
         zh: {
             login: '登录',
+            loginAndBind: '登录并绑定',
             pleaseGetNewEmail: '请"登录"或点击 "注册新邮箱" 按钮来获取一个新的邮箱地址',
             getNewEmail: '创建新邮箱',
-            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
+            getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许: ',
             getNewEmailTip2: '留空将会生成一个随机的邮箱地址。',
             getNewEmailTip3: '你可以从下拉列表中选择一个域名。',
             credential: '邮箱地址凭据',
@@ -97,10 +101,30 @@ const { locale, t } = useI18n({
             credentialInput: '请输入邮箱地址凭据',
             bindUserInfo: '已登录用户, 登录未绑定邮箱或创建新邮箱地址将绑定到当前用户',
             bindUserAddressError: '绑定邮箱地址到用户时错误',
+            autoGeneratedName: '自动生成名称',
         }
     }
 });
 
+const loginAndBindTag = computed(() => {
+    if (userSettings.value.user_email) {
+        return t('loginAndBind')
+    }
+    return t('login')
+})
+
+const addressRegex = computed(() => {
+    try {
+        if (openSettings.value.addressRegex) {
+            return new RegExp(openSettings.value.addressRegex, 'g');
+        }
+    } catch (error) {
+        console.error(error);
+        message.error(`Invalid addressRegex: ${openSettings.value.addressRegex}`);
+    }
+    return /[^a-z0-9]/g;
+});
+
 const generateNameLoading = ref(false);
 const generateName = async () => {
     try {
@@ -110,8 +134,12 @@ const generateName = async () => {
             .split('@')[0]
             .replace(/\s+/g, '.')
             .replace(/\.{2,}/g, '.')
-            .replace(/[^a-zA-Z0-9.]/g, '')
+            .replace(addressRegex.value, '')
             .toLowerCase();
+        // support maxAddressLen
+        if (emailName.value.length > openSettings.value.maxAddressLen) {
+            emailName.value = emailName.value.slice(0, openSettings.value.maxAddressLen);
+        }
     } catch (error) {
         message.error(error.message || "error");
     } finally {
@@ -121,8 +149,10 @@ const generateName = async () => {
 
 const newEmail = async () => {
     try {
+        // If custom names are disabled, send empty name to trigger backend auto-generation
+        const nameToSend = openSettings.value.disableCustomAddressName ? "" : emailName.value;
         const res = await props.newAddressPath(
-            emailName.value,
+            nameToSend,
             emailDomain.value,
             cfToken.value
         );
@@ -140,11 +170,48 @@ 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);
+    });
+});
+
+const showNewAddressTab = computed(() => {
+    if (openSettings.value.disableAnonymousUserCreateEmail
+        && !userSettings.value.user_email
+    ) {
+        return false;
+    }
+    return openSettings.value.enableUserCreateEmail;
+});
+
 onMounted(async () => {
     if (!openSettings.value.domains || openSettings.value.domains.length === 0) {
-        await api.getOpenSettings();
+        await api.getOpenSettings(message, notification);
     }
-    emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0]?.value : "";
+    emailDomain.value = domainsOptions.value ? domainsOptions.value[0]?.value : "";
 });
 </script>
 
@@ -153,8 +220,8 @@ onMounted(async () => {
         <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">
-            <n-tab-pane name="signin" :tab="t('login')">
+        <n-tabs v-if="openSettings.fetched" v-model:value="tabValue" size="large" justify-content="space-evenly">
+            <n-tab-pane name="signin" :tab="loginAndBindTag">
                 <n-form>
                     <n-form-item-row :label="t('credential')" required>
                         <n-input v-model:value="credential" type="textarea" :autosize="{ minRows: 3 }" />
@@ -163,10 +230,9 @@ onMounted(async () => {
                         <template #icon>
                             <n-icon :component="EmailOutlined" />
                         </template>
-                        {{ t('login') }}
+                        {{ loginAndBindTag }}
                     </n-button>
-                    <n-button v-if="openSettings.enableUserCreateEmail" @click="tabValue = 'register'" block secondary
-                        strong>
+                    <n-button v-if="showNewAddressTab" @click="tabValue = 'register'" block secondary strong>
                         <template #icon>
                             <n-icon :component="NewLabelOutlined" />
                         </template>
@@ -174,26 +240,27 @@ onMounted(async () => {
                     </n-button>
                 </n-form>
             </n-tab-pane>
-            <n-tab-pane v-if="openSettings.enableUserCreateEmail" name="register" :tab="t('getNewEmail')">
+            <n-tab-pane v-if="showNewAddressTab" name="register" :tab="t('getNewEmail')">
                 <n-spin :show="generateNameLoading">
                     <n-form>
                         <span>
-                            <p>{{ t("getNewEmailTip1") }}</p>
-                            <p>{{ t("getNewEmailTip2") }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip1") + addressRegex.source }}</p>
+                            <p v-if="!openSettings.disableCustomAddressName">{{ t("getNewEmailTip2") }}</p>
                             <p>{{ t("getNewEmailTip3") }}</p>
                         </span>
-                        <n-button @click="generateName" style="margin-bottom: 10px;">
+                        <n-button v-if="!openSettings.disableCustomAddressName" @click="generateName" style="margin-bottom: 10px;">
                             {{ t('generateName') }}
                         </n-button>
                         <n-input-group>
-                            <n-input-group-label v-if="openSettings.prefix">
-                                {{ openSettings.prefix }}
+                            <n-input-group-label v-if="addressPrefix">
+                                {{ addressPrefix }}
                             </n-input-group-label>
-                            <n-input v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
+                            <n-input v-if="!openSettings.disableCustomAddressName" v-model:value="emailName" show-count :minlength="openSettings.minAddressLen"
                                 :maxlength="openSettings.maxAddressLen" />
+                            <n-input v-else :value="t('autoGeneratedName')" disabled />
                             <n-input-group-label>@</n-input-group-label>
                             <n-select v-model:value="emailDomain" :consistent-menu-width="false"
-                                :options="openSettings.domains" />
+                                :options="domainsOptions" />
                         </n-input-group>
                         <Turnstile v-model:value="cfToken" />
                         <n-button type="primary" block secondary strong @click="newEmail" :loading="loading">

frontend/src/views/index/AccountSettings.vue

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

frontend/src/views/index/AddressBar.vue

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

frontend/src/views/index/Attachment.vue

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

frontend/src/views/index/LocalAddress.vue

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

frontend/src/views/index/SendMail.vue

@@ -13,7 +13,7 @@ const isPreview = ref(false)
 const editorRef = shallowRef()
 
 
-const { settings, sendMailModel, indexTab } = useGlobalState()
+const { settings, sendMailModel, indexTab, userSettings } = useGlobalState()
 
 const { t } = useI18n({
     locale: 'zh',
@@ -136,6 +136,8 @@ const handleCreated = (editor) => {
 }
 
 onMounted(async () => {
+    // make sure user_id is fetched
+    if (!userSettings.value.user_id) await api.getUserSettings(message);
     await api.getSettings();
 })
 </script>
@@ -149,16 +151,15 @@ onMounted(async () => {
                     <n-button type="primary" tertiary @click="requestAccess" size="small">{{ t('requestAccess')
                         }}</n-button>
                 </n-alert>
-                <br />
                 <AdminContact />
             </div>
             <div v-else>
-                <n-alert type="info" :show-icon="false" :bordered="false">
+                <n-alert type="info" :show-icon="false" :bordered="false" closable>
                     {{ t('send_balance') }}: {{ settings.send_balance }}
                 </n-alert>
-                <div class="right">
+                <n-flex justify="end">
                     <n-button type="primary" @click="send">{{ t('send') }}</n-button>
-                </div>
+                </n-flex>
                 <div class="left">
                     <n-form :model="sendMailModel">
                         <n-form-item :label="t('fromName')" label-placement="top">
@@ -230,9 +231,7 @@ onMounted(async () => {
     justify-content: left;
 }
 
-.right {
-    text-align: right;
-    place-items: right;
-    justify-content: right;
+.n-alert {
+    margin-bottom: 10px;
 }
 </style>

frontend/src/views/index/SimpleIndex.vue

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

frontend/src/views/index/Webhook.vue

@@ -1,129 +1,28 @@
 <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)
+import WebhookComponent from '../../components/WebhookComponent.vue'
 
 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");
-    }
+    return await api.fetch(`/api/webhook/settings`)
 }
 
-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 saveSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/settings`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
 }
 
-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");
-    }
+const testSettings = async (webhookSettings: any) => {
+    await api.fetch(`/api/webhook/test`, {
+        method: 'POST',
+        body: JSON.stringify(webhookSettings),
+    })
 }
-
-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>
+    <WebhookComponent :fetchData="fetchData" :saveSettings="saveSettings" :testSettings="testSettings" />
 </template>
-
-<style scoped>
-.center {
-    display: flex;
-    text-align: left;
-    place-items: center;
-    justify-content: center;
-}
-
-.n-button {
-    margin-top: 10px;
-}
-</style>

frontend/src/views/telegram/Mail.vue

@@ -5,8 +5,9 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { onMounted, watch } from 'vue';
 import { processItem } from '../../utils/email-parser'
+import { utcToLocalDate } from '../../utils';
 
-const { telegramApp } = useGlobalState()
+const { telegramApp, loading, useUTCDate } = useGlobalState()
 const route = useRoute()
 
 const curMail = ref({});
@@ -26,12 +27,16 @@ const fetchMailData = async () => {
                 mailId: route.query.mail_id
             })
         });
+        loading.value = true;
         return await processItem(res);
     }
     catch (error) {
         console.error(error);
         return {};
     }
+    finally {
+        loading.value = false;
+    }
 };
 
 onMounted(async () => {
@@ -41,12 +46,12 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-card :bordered="false" embedded v-if="curMail.message" style="max-width: 800px; overflow: auto;">
+        <n-card :bordered="false" embedded v-if="curMail.message" style="max-width: 800px; height: 100%;">
             <n-tag type="info">
                 ID: {{ curMail.id }}
             </n-tag>
             <n-tag type="info">
-                Date: {{ curMail.created_at }}
+                Date: {{ utcToLocalDate(curMail.created_at, useUTCDate) }}
             </n-tag>
             <n-tag type="info">
                 FROM: {{ curMail.source }}
@@ -54,7 +59,8 @@ onMounted(async () => {
             <n-tag v-if="showEMailTo" type="info">
                 TO: {{ curMail.address }}
             </n-tag>
-            <div v-html="curMail.message" style="margin-top: 10px;"></div>
+            <iframe :srcdoc="curMail.message" style="margin-top: 10px;width: 100%; height: 100%;">
+            </iframe>
         </n-card>
     </div>
 </template>
@@ -66,5 +72,6 @@ onMounted(async () => {
     text-align: left;
     place-items: center;
     justify-content: center;
+    height: 80vh;
 }
 </style>

frontend/src/views/user/AddressManagement.vue

@@ -8,6 +8,8 @@ import { useGlobalState } from '../../store'
 import { api } from '../../api'
 import { getRouterPathWithLang } from '../../utils'
 
+import Login from '../common/Login.vue';
+
 const { jwt } = useGlobalState()
 const message = useMessage()
 const router = useRouter()
@@ -20,9 +22,14 @@ const { locale, t } = useI18n({
             mail_count: 'Mail Count',
             send_count: 'Send Count',
             actions: 'Actions',
-            changeMailAddress: 'Change Mail Address',
+            changeMailAddress: 'Change Address',
             unbindAddress: 'Unbind Address',
             unbindAddressTip: 'Before unbinding, please switch to this email address and save the email address credential.',
+            transferAddress: 'Transfer Address',
+            targetUserEmail: 'Target User Email',
+            transferAddressTip: 'Transfer address to another user will remove the address from your account and transfer it to another user. Are you sure to transfer the address?',
+            address: 'Address',
+            create_or_bind: 'Create or Bind',
         },
         zh: {
             success: '成功',
@@ -30,14 +37,23 @@ const { locale, t } = useI18n({
             mail_count: '邮件数量',
             send_count: '发送数量',
             actions: '操作',
-            changeMailAddress: '切换邮箱地址',
+            changeMailAddress: '切换地址',
             unbindAddress: '解绑地址',
             unbindAddressTip: '解绑前请切换到此邮箱地址并保存邮箱地址凭证。',
+            transferAddress: '转移地址',
+            targetUserEmail: '目标用户邮箱',
+            transferAddressTip: '转移地址到其他用户将会从你的账户中移除此地址并转移给其他用户。确定要转移地址吗？',
+            address: '地址',
+            create_or_bind: '创建或绑定',
         }
     }
 });
 
 const data = ref([])
+const showTranferAddress = ref(false)
+const currentAddress = ref("")
+const currentAddressId = ref(0)
+const targetUserEmail = ref('')
 
 const changeMailAddress = async (address_id) => {
     try {
@@ -70,15 +86,41 @@ const unbindAddress = async (address_id) => {
     }
 }
 
+const transferAddress = async () => {
+    if (!targetUserEmail.value) {
+        message.error("targetUserEmail is required");
+        return;
+    }
+    if (!currentAddressId.value) {
+        message.error("currentAddressId is required");
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/transfer_address`, {
+            method: 'POST',
+            body: JSON.stringify({
+                address_id: currentAddressId.value,
+                target_user_email: targetUserEmail.value
+            })
+        });
+        message.success(t('transferAddress') + " " + t('success'));
+        await fetchData();
+        showTranferAddress.value = false;
+        currentAddressId.value = 0;
+        currentAddress.value = "";
+        targetUserEmail.value = "";
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
 const fetchData = async () => {
     try {
-        const { results, count: addressCount } = await api.fetch(
+        const { results } = await api.fetch(
             `/user_api/bind_address`
         );
         data.value = results;
-        if (addressCount > 0) {
-            count.value = addressCount;
-        }
     } catch (error) {
         console.log(error)
         message.error(error.message || "error");
@@ -86,10 +128,6 @@ const fetchData = async () => {
 }
 
 const columns = [
-    {
-        title: "ID",
-        key: "id"
-    },
     {
         title: t('name'),
         key: "name"
@@ -138,6 +176,18 @@ const columns = [
                         default: () => `${t('changeMailAddress')}?`
                     }
                 ),
+                h(NButton,
+                    {
+                        tertiary: true,
+                        type: "primary",
+                        onClick: () => {
+                            currentAddressId.value = row.id;
+                            currentAddress.value = row.name;
+                            showTranferAddress.value = true;
+                        }
+                    },
+                    { default: () => t('transferAddress') }
+                ),
                 h(NPopconfirm,
                     {
                         onPositiveClick: () => unbindAddress(row.id)
@@ -165,6 +215,33 @@ onMounted(async () => {
 
 <template>
     <div>
-        <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+        <n-modal v-model:show="showTranferAddress" preset="dialog" :title="t('transferAddress')">
+            <span>
+                <p>{{ t("transferAddressTip") }}</p>
+                <p>{{ t('transferAddress') + ": " + currentAddress }}</p>
+                <n-input v-model:value="targetUserEmail" :placeholder="t('targetUserEmail')" />
+            </span>
+            <template #action>
+                <n-button :loading="loading" @click="transferAddress" size="small" tertiary type="error">
+                    {{ t('transferAddress') }}
+                </n-button>
+            </template>
+        </n-modal>
+        <n-tabs type="segment">
+            <n-tab-pane name="address" :tab="t('address')">
+                <div style="overflow: auto;">
+                    <n-data-table :columns="columns" :data="data" :bordered="false" embedded />
+                </div>
+            </n-tab-pane>
+            <n-tab-pane name="create_or_bind" :tab="t('create_or_bind')">
+                <Login />
+            </n-tab-pane>
+        </n-tabs>
     </div>
 </template>
+
+<style scoped>
+.n-data-table {
+    min-width: 700px;
+}
+</style>

frontend/src/views/user/UserBar.vue

@@ -31,7 +31,8 @@ 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>
 

frontend/src/views/user/UserLogin.vue

@@ -1,18 +1,21 @@
 <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 { KeyFilled } from '@vicons/material'
 
 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, userTab, userOpenSettings, openSettings } = useGlobalState()
+const {
+    userJwt, userOpenSettings, openSettings,
+    userOauth2SessionState, userOauth2SessionClientID
+} = useGlobalState()
 const message = useMessage();
-const router = useRouter();
 
 const { t } = useI18n({
     messages: {
@@ -33,6 +36,8 @@ const { t } = useI18n({
             pleaseInputCode: 'Please input code',
             pleaseCompleteTurnstile: 'Please complete turnstile',
             pleaseLogin: 'Please login',
+            loginWithPasskey: 'Login with Passkey',
+            loginWith: 'Login with {provider}',
         },
         zh: {
             login: '登录',
@@ -51,6 +56,8 @@ const { t } = useI18n({
             pleaseInputCode: '请输入验证码',
             pleaseCompleteTurnstile: '请完成人机验证',
             pleaseLogin: '请登录',
+            loginWithPasskey: '使用 Passkey 登录',
+            loginWith: '使用 {provider} 登录',
         }
     }
 });
@@ -156,6 +163,45 @@ 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)
+    }
+};
+
+const oauth2Login = async (clientID) => {
+    try {
+        userOauth2SessionClientID.value = clientID;
+        userOauth2SessionState.value = Math.random().toString(36).substring(2);
+        const res = await api.fetch(`/user_api/oauth2/login_url?clientID=${clientID}&state=${userOauth2SessionState.value}`);
+        // redirect to oauth2 login page
+        location.href = res.url;
+    } catch (error) {
+        message.error(error.message || "login failed");
+    }
+};
+
 onMounted(async () => {
 
 });
@@ -163,7 +209,7 @@ onMounted(async () => {
 
 <template>
     <div class="center">
-        <n-tabs v-model:value="tabValue" size="large" justify-content="space-evenly">
+        <n-tabs v-model:value="tabValue" size="large" v-if="userOpenSettings.fetched" justify-content="space-evenly">
             <n-tab-pane name="signin" :tab="t('login')">
                 <n-form>
                     <n-form-item-row :label="t('email')" required>
@@ -178,6 +224,17 @@ 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>
+                        <template #icon>
+                            <n-icon :component="KeyFilled" />
+                        </template>
+                        {{ t('loginWithPasskey') }}
+                    </n-button>
+                    <n-button @click="oauth2Login(item.clientID)" v-for="item in userOpenSettings.oauth2ClientIDs"
+                        :key="item.clientID" block secondary strong>
+                        {{ t('loginWith', { provider: item.name }) }}
+                    </n-button>
                 </n-form>
             </n-tab-pane>
             <n-tab-pane v-if="userOpenSettings.enable" name="signup" :tab="t('register')">
@@ -244,4 +301,8 @@ onMounted(async () => {
     place-items: center;
     justify-content: center;
 }
+
+.n-button {
+    margin-top: 10px;
+}
 </style>

frontend/src/views/user/UserMailBox.vue

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

frontend/src/views/user/UserOauth2Callback.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router';
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api';
+
+const {
+    userJwt, userOauth2SessionState, userOauth2SessionClientID
+} = useGlobalState()
+
+const message = useMessage();
+const route = useRoute()
+const router = useRouter()
+const errorInfo = ref('')
+const { t } = useI18n({
+    messages: {
+        en: {
+            logging: 'Logging in...',
+            stateNotMatch: 'state not match',
+        },
+        zh: {
+            logging: '登录中...',
+            stateNotMatch: 'state 不匹配',
+        }
+    }
+});
+
+onMounted(async () => {
+    const state = route.query.state;
+    if (state != userOauth2SessionState.value) {
+        console.error('state not match');
+        message.error(t('stateNotMatch'));
+        return;
+    }
+    const code = route.query.code;
+    if (!code) {
+        console.error('code not found');
+        message.error('code not found');
+        return;
+    }
+    try {
+        const res = await api.fetch(`/user_api/oauth2/callback`, {
+            method: 'POST',
+            body: JSON.stringify({
+                code: code,
+                clientID: userOauth2SessionClientID.value
+            })
+        });
+        userJwt.value = res.jwt;
+        router.push('/user');
+    } catch (error) {
+        console.error(error);
+        message.error(error.message || 'error');
+    }
+});
+</script>
+
+<template>
+    <n-card :bordered="false" embedded>
+        <n-result status="info" :title="t('logging')" :description="errorInfo">
+        </n-result>
+    </n-card>
+</template>

frontend/src/views/user/UserSettings.vue

@@ -1,16 +1,22 @@
 <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, userSettings, } = useGlobalState()
-const router = useRouter()
 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({
     messages: {
@@ -18,11 +24,35 @@ const { t } = useI18n({
             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 名称',
         }
     }
 });
@@ -33,17 +63,144 @@ 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 :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') }}
@@ -53,10 +210,29 @@ 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>
-                <n-button :loading="loading" @click="logout" size="small" tertiary type="primary">
+                <n-button :loading="loading" @click="logout" size="small" tertiary type="warning">
                     {{ t('logout') }}
                 </n-button>
             </template>
@@ -78,5 +254,6 @@ onMounted(async () => {
 
 .n-button {
     margin-top: 10px;
+    margin-bottom: 10px;
 }
 </style>

frontend/vite.config.js

@@ -24,6 +24,7 @@ export default defineConfig({
         {
           'naive-ui': [
             'useMessage',
+            'useNotification',
             'NButton',
             'NPopconfirm',
             'NIcon',
@@ -35,13 +36,16 @@ export default defineConfig({
       resolvers: [NaiveUiResolver()]
     }),
     VitePWA({
-      registerType: 'autoUpdate',
+      registerType: null,
       devOptions: {
-        enabled: true
+        enabled: false
       },
       workbox: {
         disableDevLogs: true,
-        globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        globPatterns: [],
+        runtimeCaching: [],
+        navigateFallback: null,
+        cleanupOutdatedCaches: true,
       },
       manifest: {
         name: 'Temp Email',
@@ -65,5 +69,10 @@ export default defineConfig({
   },
   define: {
     'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version),
+  },
+  esbuild: {
+    supported: {
+      'top-level-await': true
+    },
   }
 })

mail-parser-wasm/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "mail-parser-wasm"
-version = "0.1.8"
+version = "0.2.1"
 edition = "2021"
 description = "A simple mail parser for wasm"
 license = "MIT"
@@ -9,5 +9,5 @@ license = "MIT"
 crate-type = ["cdylib"]
 
 [dependencies]
-mail-parser = "0.9.3"
-wasm-bindgen = "0.2.92"
+mail-parser = "0.9.4"
+wasm-bindgen = "0.2.99"

mail-parser-wasm/src/lib.rs

@@ -35,10 +35,31 @@ impl AttachmentResult {
     }
 }
 
+#[derive(Clone)]
+#[wasm_bindgen]
+pub struct MessageHeader {
+    key: String,
+    value: String,
+}
+
+#[wasm_bindgen]
+impl MessageHeader {
+    #[wasm_bindgen(getter)]
+    pub fn key(&self) -> String {
+        self.key.clone()
+    }
+
+    #[wasm_bindgen(getter)]
+    pub fn value(&self) -> String {
+        self.value.clone()
+    }
+}
+
 #[wasm_bindgen]
 pub struct MessageResult {
     sender: String,
     subject: String,
+    headers: Vec<MessageHeader>,
     body_html: String,
     text: String,
     attachments: Vec<AttachmentResult>,
@@ -56,6 +77,11 @@ impl MessageResult {
         self.subject.clone()
     }
 
+    #[wasm_bindgen(getter)]
+    pub fn headers(&self) -> Vec<MessageHeader> {
+        self.headers.clone()
+    }
+
     #[wasm_bindgen(getter)]
     pub fn body_html(&self) -> String {
         self.body_html.clone()
@@ -119,6 +145,7 @@ pub fn parse_message(raw_message: &str) -> MessageResult {
         return MessageResult {
             sender: String::new(),
             subject: String::new(),
+            headers: Vec::new(),
             body_html: String::new(),
             text: String::new(),
             attachments: Vec::new(),
@@ -146,6 +173,14 @@ pub fn parse_message(raw_message: &str) -> MessageResult {
             .subject()
             .map(|subject| subject.to_owned())
             .unwrap_or(String::new()),
+        headers: message
+            .headers()
+            .iter()
+            .map(|header| MessageHeader {
+                key: header.name().to_owned(),
+                value: header.value().as_text().unwrap_or("").to_owned(),
+            })
+            .collect(),
         body_html: message
             .body_html(0)
             .map(|html| html.into_owned())

mail-parser-wasm/worker/index.js

@@ -1,12 +1,12 @@
 import initAsync, { initSync, parse_message } from './mail_parser_wasm';
 import MODULE from './mail_parser_wasm_bg.wasm';
 
-initSync(MODULE);
+initSync({ module: MODULE });
 
 
 export { initAsync, MODULE };
 export * from './mail_parser_wasm';
 export const parse_message_wrapper = (raw_message) => {
-    initSync(MODULE);
+    initSync({ module: MODULE });
     return parse_message(raw_message);
 }

mail-parser-wasm/worker/package.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/dreamhunter2333/cloudflare_temp_email",
     "directory": "mail-parser-wasm"
   },
-  "version": "0.1.8",
+  "version": "0.2.1",
   "license": "MIT",
   "files": [
     "mail_parser_wasm_bg.wasm",

pages/functions/_middleware.js

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

pages/package.json

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

scripts/update-dependencies.sh

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

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"

smtp_proxy_server/imap_server.py

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

smtp_proxy_server/parse_email.py

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

smtp_proxy_server/requirements.txt

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

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

@@ -27,10 +27,19 @@ export default defineConfig({
     }
   },
   themeConfig: {
-
     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'

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

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

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

@@ -28,6 +28,7 @@ export const zh = defineConfig({
         },
 
         outline: {
+            level: 'deep',
             label: '页面导航'
         },
 
@@ -96,7 +97,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         },
         {
             text: '通过命令行部署',
-            collapsed: true,
+            collapsed: false,
             items: [
                 { text: '命令行部署准备', link: 'cli/pre-requisite' },
                 { text: 'D1 数据库', link: 'cli/d1' },
@@ -108,7 +109,7 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
         },
         {
             text: '通过用户界面部署',
-            collapsed: true,
+            collapsed: false,
             items: [
                 { text: 'D1 数据库', link: 'ui/d1' },
                 { text: 'Cloudflare workers 后端', link: 'ui/worker' },
@@ -121,12 +122,25 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
             text: '通过 Github Actions 部署',
             collapsed: true,
             items: [
-                { text: '通过 Github Actions 部署', link: 'github-action' },
+                { text: 'Github Actions 部署准备', link: 'actions/pre-requisite' },
+                { text: 'D1 数据库', link: 'actions/d1' },
+                { text: 'Github Actions 配置', link: 'actions/github-action' },
+                { text: '配置邮件转发', link: 'email-routing.md' },
+                { text: '配置发送邮件', link: 'config-send-mail' },
+                { text: '自动更新配置', link: 'actions/auto-update' },
+            ]
+        },
+        {
+            text: '通用',
+            collapsed: false,
+            items: [
+                { text: 'worker变量说明', link: 'worker-vars' },
+                { text: '常见问题', link: 'common-issues' },
             ]
         },
         {
             text: '附加功能',
-            collapsed: true,
+            collapsed: false,
             items: [
                 { text: '配置 SMTP IMAP 代理服务', link: 'feature/config-smtp-proxy' },
                 { text: '发送邮件 API', link: 'feature/send-mail-api' },
@@ -135,12 +149,16 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
                 { text: '配置 Telegram Bot', link: 'feature/telegram' },
                 { text: '配置 S3 附件', link: 'feature/s3-attachment' },
                 { text: '配置 worker 使用 wasm 解析邮件', link: 'feature/mail_parser_wasm_worker' },
+                { text: '配置 webhook', link: 'feature/webhook' },
                 { text: '新建邮箱地址 API', link: 'feature/new-address-api' },
+                { text: 'Oauth2 第三方登录', link: 'feature/user-oauth2' },
+                { text: '配置其他worker增强', link: 'feature/another-worker-enhanced' },
+                { text: '给网页增加 Google Ads', link: 'feature/google-ads.md' },
             ]
         },
         {
             text: '功能简介',
-            collapsed: true,
+            collapsed: false,
             items: [
                 { text: 'Admin 控制台', link: 'feature/admin' },
                 { text: 'Admin 用户管理', link: 'feature/admin-user-management' },

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
 ```
@@ -61,8 +61,8 @@ pnpm run deploy
 ```toml
 name = "cloudflare_temp_email"
 main = "src/worker.ts"
-compatibility_date = "2023-08-14"
-node_compat = true
+compatibility_date = "2024-09-23"
+compatibility_flags = [ "nodejs_compat" ]
 
 # enable cron if you want set auto clean up
 # [triggers]
@@ -74,24 +74,44 @@ node_compat = true
 # ]
 
 [vars]
+# DEFAULT_LANG = "zh"
 # TITLE = "Custom Title" # The title of the site
 PREFIX = "tmp" # The mailbox name prefix to be processed
 # (min, max) length of the adderss, if not set, the default is (1, 30)
 # MIN_ADDRESS_LEN = 1
 # MAX_ADDRESS_LEN = 30
+# ANNOUNCEMENT = "Custom Announcement"
+# always show ANNOUNCEMENT even no changes
+# ALWAYS_SHOW_ANNOUNCEMENT = true
+# address check REGEX, if not set, will not check
+# ADDRESS_CHECK_REGEX = "^(?!.*admin).*"
+# address name replace REGEX, if not set, the default is [^a-z0-9]
+# ADDRESS_REGEX = "[^a-z0-9]"
 # 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
 ENABLE_USER_CREATE_EMAIL = true
+# Disable anonymous user create email, if set true, users can only create email addresses after logging in
+# DISABLE_ANONYMOUS_USER_CREATE_EMAIL = true
 # Allow users to delete messages
 ENABLE_USER_DELETE_EMAIL = true
 # Allow automatic replies to emails
@@ -100,15 +120,32 @@ ENABLE_AUTO_REPLY = false
 # 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
+# the role which can send emails without limit, multiple roles can be separated by ,
+# NO_LIMIT_SEND_ROLE = "vip"
 # Turnstile verification configuration
 # CF_TURNSTILE_SITE_KEY = ""
 # CF_TURNSTILE_SECRET_KEY = ""
 # telegram bot
-# TG_MAX_ACCOUNTS = 5
+# TG_MAX_ADDRESS = 5
+# telegram bot info, predefined bot info can reduce latency of the webhook
+# TG_BOT_INFO = "{}"
 # global forward address list, if set, all emails will be forwarded to these addresses
 # FORWARD_ADDRESS_LIST = ["xxx@xxx.com"]
+# Frontend URL
+# FRONTEND_URL = "https://xxxx.xxx"
+# Enable check junk mail
+# ENABLE_CHECK_JUNK_MAIL = false
+# junk mail check list, if status exists and status is not pass, will be marked as junk mail
+# JUNK_MAIL_CHECK_LIST = = ["spf", "dkim", "dmarc"]
+# junk mail force check pass list, if no status or status is not pass, will be marked as junk mail
+# JUNK_MAIL_FORCE_PASS_LIST = ["spf", "dkim", "dmarc"]
+# remove attachment if size exceed 2MB, mail maybe mising some information due to parsing
+# REMOVE_EXCEED_SIZE_ATTACHMENT = true
+# remove all attachment, mail maybe mising some information due to parsing
+# REMOVE_ALL_ATTACHMENT = true
 
 [[d1_databases]]
 binding = "DB"

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

vitepress-docs/docs/index.md

@@ -15,14 +15,17 @@ hero:
     - theme: alt
       text: 通过用户界面部署
       link: /zh/guide/quick-start
+    - theme: alt
+      text: 通过 Github Actions 部署
+      link: /zh/guide/quick-start
 
 features:
-  - title: 免费托管在 CloudFlare，无需服务器
-    details: Cloudflare D1 数据库，Cloudflare Pages 前端，Cloudflare Workers 后端， Cloudflare Email Routing
-  - title: 仅需域名即可私有部署
-    details: 支持 password 登录邮箱，使用访问密码可作为私人站点，支持附件功能
+  - title: 仅需域名即可私有部署, 免费托管在 CloudFlare，无需服务器
+    details: 支持 password 登录邮箱, 用户注册，使用访问密码可作为私人站点，支持附件功能。
   - title:  使用 rust wasm 解析邮件
     details: 使用 rust wasm 解析邮件，支持邮件各种RFC标准，支持附件, 速度极快
+  - title:  支持 Telegram Bot 和 Webhook
+    details: 邮件可转发到 Telegram 或者 webhook, Telegram Bot 支持绑定邮箱，查看邮件, Telegram 小程序
   - title: 支持发送邮件(UI/API/SMTP)
     details: 支持通过域名邮箱发送 txt 或者 html 邮件，支持 DKIM 签名, UI/API/SMTP 发送邮件
 ---