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>
2026-05-06 20:32:55 +08:00 · 2025-09-05 20:43:28 +08:00
parent 37cf0776b5
commit 2bbde15f53
12 changed files with 1543 additions and 1322 deletions
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -30,7 +30,7 @@
    "naive-ui": "^2.42.0",
    "postal-mime": "^2.4.4",
    "vooks": "^0.2.12",
-    "vue": "^3.5.20",
+    "vue": "^3.5.21",
    "vue-clipboard3": "^2.0.0",
    "vue-i18n": "^11.1.11",
    "vue-router": "^4.5.1"
@@ -47,7 +47,7 @@
    "vite-plugin-wasm": "^3.5.0",
    "workbox-build": "^7.3.0",
    "workbox-window": "^7.3.0",
-    "wrangler": "^4.33.0"
+    "wrangler": "^4.34.0"
  },
  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/src/views/admin/Account.vue
+++ b/frontend/src/views/admin/Account.vue
@@ -33,7 +33,12 @@ const { t } = useI18n({
            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: '名称',
@@ -52,7 +57,12 @@ const { t } = useI18n({
            itemCount: '总数',
            query: '查询',
            addressQueryTip: '留空查询所有地址',
+            clearInbox: '清空收件箱',
+            clearSentItems: '清空发件箱',
+            clearInboxTip: '确定要清空这个邮箱的收件箱吗？',
+            clearSentItemsTip: '确定要清空这个邮箱的发件箱吗？',
            actions: '操作',
+            success: '成功',
        }
    }
 });
@@ -60,6 +70,8 @@ const { t } = useI18n({
 const showEmailCredential = ref(false)
 const curEmailCredential = ref("")
 const curDeleteAddressId = ref(0);
+const curClearInboxAddressId = ref(0);
+const curClearSentItemsAddressId = ref(0);

 const addressQuery = ref("")

@@ -68,6 +80,8 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 const showDeleteAccount = ref(false)
+const showClearInbox = ref(false)
+const showClearSentItems = ref(false)

 const showCredential = async (id) => {
    try {
@@ -83,7 +97,7 @@ const showCredential = async (id) => {
 const deleteEmail = async () => {
    try {
        await api.adminDeleteAddress(curDeleteAddressId.value)
-        message.success("success");
+        message.success(t("success"));
        await fetchData()
    } catch (error) {
        message.error(error.message || "error");
@@ -92,6 +106,34 @@ const deleteEmail = async () => {
    }
 }

+const clearInbox = async () => {
+    try {
+        await api.fetch(`/admin/clear_inbox/${curClearInboxAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearInbox.value = false
+    }
+}
+
+const clearSentItems = async () => {
+    try {
+        await api.fetch(`/admin/clear_sent_items/${curClearSentItemsAddressId.value}`, {
+            method: 'DELETE'
+        });
+        message.success(t("success"));
+        await fetchData()
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        showClearSentItems.value = false
+    }
+}
+
 const fetchData = async () => {
    try {
        addressQuery.value = addressQuery.value.trim()
@@ -228,6 +270,32 @@ const columns = [
                                    ),
                                    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,
                                        {
@@ -281,6 +349,22 @@ onMounted(async () => {
                </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')"
                @keydown.enter="fetchData" />
--- a/frontend/src/views/index/AccountSettings.vue
+++ b/frontend/src/views/index/AccountSettings.vue
@@ -8,13 +8,15 @@ import { api } from '../../api'
 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 showDeleteAccount = ref(false)
+const showClearInbox = ref(false)
+const showClearSentItems = ref(false)
 const { locale, t } = useI18n({
    messages: {
        en: {
@@ -24,6 +26,11 @@ const { locale, t } = useI18n({
            logoutConfirm: 'Are you sure to logout?',
            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: '退出登录',
@@ -32,6 +39,11 @@ const { locale, t } = useI18n({
            logoutConfirm: '确定要退出登录吗？',
            deleteAccount: "删除账户",
            deleteAccountConfirm: "确定要删除你的账户和其中的所有邮件吗?",
+            clearInbox: "清空收件箱",
+            clearSentItems: "清空发件箱",
+            clearInboxConfirm: "确定要清空你收件箱中的所有邮件吗？",
+            clearSentItemsConfirm: "确定要清空你发件箱中的所有邮件吗？",
+            success: "成功",
        }
    }
 });
@@ -54,6 +66,32 @@ 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>
@@ -62,10 +100,19 @@ const deleteAccount = async () => {
            <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="showDeleteAccount = true" type="error" secondary block strong>
+            <n-button v-if="openSettings.enableUserDeleteEmail" @click="showDeleteAccount = true" type="error" secondary
+                block strong>
                {{ t('deleteAccount') }}
            </n-button>
        </n-card>
@@ -85,6 +132,22 @@ const deleteAccount = async () => {
                </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>
    </div>
 </template>

--- a/pages/package.json
+++ b/pages/package.json
@@ -11,7 +11,7 @@
  "author": "",
  "license": "ISC",
  "devDependencies": {
-    "wrangler": "^4.33.0"
+    "wrangler": "^4.34.0"
  },
  "packageManager": "pnpm@10.10.0+sha512.d615db246fe70f25dcfea6d8d73dee782ce23e2245e3c4f6f888249fb568149318637dca73c2c5c8ef2a4ca0d5657fb9567188bfab47f566d1ee6ce987815c39"
 }
--- a/vitepress-docs/package.json
+++ b/vitepress-docs/package.json
@@ -4,9 +4,9 @@
  "version": "1.0.5",
  "type": "module",
  "devDependencies": {
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.3.1",
    "vitepress": "^1.6.4",
-    "wrangler": "^4.33.0"
+    "wrangler": "^4.34.0"
  },
  "scripts": {
    "dev": "vitepress dev docs",
--- a/vitepress-docs/pnpm-lock.yaml
+++ b/vitepress-docs/pnpm-lock.yaml
--- a/worker/package.json
+++ b/worker/package.json
@@ -11,20 +11,20 @@
    "build": "wrangler deploy --dry-run --outdir dist --minify"
  },
  "devDependencies": {
-    "@cloudflare/workers-types": "^4.20250826.0",
+    "@cloudflare/workers-types": "^4.20250904.0",
    "@eslint/js": "9.18.0",
    "@simplewebauthn/types": "10.0.0",
-    "@types/node": "^22.18.0",
+    "@types/node": "^22.18.1",
    "eslint": "9.18.0",
    "globals": "^15.15.0",
-    "typescript-eslint": "^8.41.0",
-    "wrangler": "^4.33.0"
+    "typescript-eslint": "^8.42.0",
+    "wrangler": "^4.34.0"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "^3.876.0",
-    "@aws-sdk/s3-request-presigner": "^3.876.0",
+    "@aws-sdk/client-s3": "^3.879.0",
+    "@aws-sdk/s3-request-presigner": "^3.879.0",
    "@simplewebauthn/server": "10.0.1",
-    "hono": "^4.9.4",
+    "hono": "^4.9.6",
    "jsonpath-plus": "^10.3.0",
    "mimetext": "^3.0.27",
    "postal-mime": "^2.4.4",
--- a/worker/pnpm-lock.yaml
+++ b/worker/pnpm-lock.yaml
--- a/worker/src/admin_api/index.ts
+++ b/worker/src/admin_api/index.ts
@@ -89,6 +89,34 @@ api.delete('/admin/delete_address/:id', async (c) => {
    })
 })

+api.delete('/admin/clear_inbox/:id', async (c) => {
+    const { id } = c.req.param();
+    const { success: mailSuccess } = await c.env.DB.prepare(
+        `DELETE FROM raw_mails WHERE address IN`
+        + ` (select name from address where id = ?) `
+    ).bind(id).run();
+    if (!mailSuccess) {
+        return c.text("Failed to clear inbox", 500)
+    }
+    return c.json({
+        success: mailSuccess
+    })
+})
+
+api.delete('/admin/clear_sent_items/:id', async (c) => {
+    const { id } = c.req.param();
+    const { success: sendboxSuccess } = await c.env.DB.prepare(
+        `DELETE FROM sendbox WHERE address IN`
+        + ` (select name from address where id = ?) `
+    ).bind(id).run();
+    if (!sendboxSuccess) {
+        return c.text("Failed to clear sent items", 500)
+    }
+    return c.json({
+        success: sendboxSuccess
+    })
+})
+
 api.get('/admin/show_password/:id', async (c) => {
    const { id } = c.req.param();
    const name = await c.env.DB.prepare(
--- a/worker/src/common.ts
+++ b/worker/src/common.ts
@@ -268,9 +268,7 @@ const batchDeleteAddressWithData = async (
    return true;
 }

-/**
- * TODO: need senbox delete?
- */
+
 export const deleteAddressWithData = async (
    c: Context<HonoCustomType>,
    address: string | undefined | null,
--- a/worker/src/mails_api/index.ts
+++ b/worker/src/mails_api/index.ts
@@ -162,3 +162,39 @@ api.delete('/api/delete_address', async (c) => {
        success: success
    })
 })
+
+api.delete('/api/clear_inbox', async (c) => {
+    const lang = c.get("lang") || c.env.DEFAULT_LANG;
+    const msgs = i18n.getMessages(lang);
+    if (!getBooleanValue(c.env.ENABLE_USER_DELETE_EMAIL)) {
+        return c.text(msgs.UserDeleteEmailDisabledMsg, 403)
+    }
+    const { address } = c.get("jwtPayload")
+    const { success } = await c.env.DB.prepare(
+        `DELETE FROM raw_mails WHERE address = ?`
+    ).bind(address).run();
+    if (!success) {
+        return c.text("Failed to clear inbox", 500)
+    }
+    return c.json({
+        success: success
+    })
+})
+
+api.delete('/api/clear_sent_items', async (c) => {
+    const lang = c.get("lang") || c.env.DEFAULT_LANG;
+    const msgs = i18n.getMessages(lang);
+    if (!getBooleanValue(c.env.ENABLE_USER_DELETE_EMAIL)) {
+        return c.text(msgs.UserDeleteEmailDisabledMsg, 403)
+    }
+    const { address } = c.get("jwtPayload")
+    const { success } = await c.env.DB.prepare(
+        `DELETE FROM sendbox WHERE address = ?`
+    ).bind(address).run();
+    if (!success) {
+        return c.text("Failed to clear sent items", 500)
+    }
+    return c.json({
+        success: success
+    })
+})