feat: 邮件页面增加 上一封/下一封 按钮 (#712)

CHANGELOG.md

@@ -4,6 +4,9 @@
 ## main(v1.0.4)
 
 - feat: |UI| 优化极简模式主页, 增加全部邮件页面功能(删除/下载/附件/...), 可在 `外观` 中切换
+- feat: admin 账号设置页面增加 `邮件转发规则` 配置
+- feat: admin 账号设置页面增加 `禁止接收未知地址邮件` 配置
+- feat: 邮件页面增加 上一封/下一封 按钮
 
 ## v1.0.3
 

frontend/src/components/MailBox.vue

@@ -1,9 +1,9 @@
 <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 } from '@vicons/material'
+import { CloudDownloadRound, ArrowBackIosNewFilled, ArrowForwardIosFilled } from '@vicons/material'
 import { useIsMobile } from '../utils/composables'
 import { processItem } from '../utils/email-parser'
 import { utcToLocalDate } from '../utils';
@@ -62,6 +62,48 @@ const count = ref(0)
 const page = ref(1)
 const pageSize = ref(20)
 
+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 multiActionMode = ref(false)
@@ -91,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: '成功',
@@ -111,6 +155,8 @@ const { t } = useI18n({
       cancelMultiAction: '取消多选',
       selectAll: '全选本页',
       unselectAll: '取消全选',
+      prevMail: '上一封',
+      nextMail: '下一封',
     }
   }
 });
@@ -400,12 +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;">
             <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
               :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
-              :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
-              :onSaveToS3="saveToS3Proxy" />
+              :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')">
@@ -459,8 +524,8 @@ onBeforeUnmount(() => {
           <n-card :bordered="false" embedded style="overflow: auto;">
             <MailContentRenderer :mail="curMail" :showEMailTo="showEMailTo"
               :enableUserDeleteEmail="enableUserDeleteEmail" :showReply="showReply" :showSaveS3="showSaveS3"
-              :useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail"
-              :onForward="forwardMail" :onSaveToS3="saveToS3Proxy" />
+              :useUTCDate="useUTCDate" :onDelete="deleteMail" :onReply="replyMail" :onForward="forwardMail"
+              :onSaveToS3="saveToS3Proxy" />
           </n-card>
         </n-drawer-content>
       </n-drawer>

frontend/src/views/admin/AccountSettings.vue

@@ -1,11 +1,12 @@
 <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({
@@ -20,6 +21,20 @@ const { t } = useI18n({
             noLimitSendAddressList: 'No Balance Limit Send Address List',
             verified_address_list: 'Verified Address List(Can send email by cf internal api)',
             fromBlockList: 'Block Keywords for receive email',
+            block_receive_unknow_address_email: 'Block receive unknow address email',
+            email_forwarding_config: 'Email Forwarding Configuration',
+            domain_list: 'Domain List',
+            forward_address: 'Forward Address',
+            actions: 'Actions',
+            select_domain: 'Select Domain',
+            forward_placeholder: 'forward@example.com',
+            delete_rule: 'Delete',
+            delete_rule_confirm: 'Are you sure you want to delete this rule?',
+            delete_success: 'Delete Success',
+            forwarding_rule_warning: 'Each rule will run, if domains is empty, all emails will be forwarded, forward address needs to be a verified address',
+            add: 'Add',
+            cancel: 'Cancel',
+            config: 'Config',
         },
         zh: {
             tip: '您可以手动输入以下多选输入框, 回车增加',
@@ -31,6 +46,20 @@ const { t } = useI18n({
             noLimitSendAddressList: '无余额限制发送地址列表',
             verified_address_list: '已验证地址列表(可通过 cf 内部 api 发送邮件)',
             fromBlockList: '接收邮件地址屏蔽关键词',
+            block_receive_unknow_address_email: '禁止接收未知地址邮件',
+            email_forwarding_config: '邮件转发配置',
+            domain_list: '域名列表',
+            forward_address: '转发地址',
+            actions: '操作',
+            select_domain: '选择域名',
+            forward_placeholder: 'forward@example.com',
+            delete_rule: '删除',
+            delete_rule_confirm: '确定要删除这条规则吗？',
+            delete_success: '删除成功',
+            forwarding_rule_warning: '每条规则都会运行，如果 domains 为空，则转发所有邮件，转发地址需要为已验证的地址',
+            add: '添加',
+            cancel: '取消',
+            config: '配置',
         }
     }
 });
@@ -40,6 +69,90 @@ const sendAddressBlockList = ref([])
 const noLimitSendAddressList = ref([])
 const verifiedAddressList = ref([])
 const fromBlockList = ref([])
+const emailRuleSettings = ref({
+    blockReceiveUnknowAddressEmail: false,
+    emailForwardingList: []
+})
+
+const showEmailForwardingModal = ref(false)
+const emailForwardingList = ref([])
+
+
+const emailForwardingColumns = [
+    {
+        title: t('domain_list'),
+        key: 'domains',
+        render: (row, index) => {
+            return h(NSelect, {
+                value: Array.isArray(row.domains) ? row.domains : [],
+                onUpdateValue: (val) => {
+                    emailForwardingList.value[index].domains = val
+                },
+                options: openSettings.value?.domains || [],
+                multiple: true,
+                filterable: true,
+                tag: true,
+                placeholder: t('select_domain')
+            })
+        }
+    },
+    {
+        title: t('forward_address'),
+        key: 'forward',
+        render: (row, index) => {
+            return h(NInput, {
+                value: row.forward,
+                onUpdateValue: (val) => {
+                    emailForwardingList.value[index].forward = val
+                },
+                placeholder: 'forward@example.com'
+            })
+        }
+    },
+    {
+        title: t('actions'),
+        key: 'actions',
+        render: (row, index) => {
+            return h('div', { style: 'display: flex; gap: 8px;' }, [
+                h(NPopconfirm, {
+                    onPositiveClick: () => {
+                        emailForwardingList.value = emailForwardingList.value.filter((_, i) => i !== index)
+                        message.success(t('delete_success'))
+                    }
+                }, {
+                    default: () => t('delete_rule_confirm'),
+                    trigger: () => h(NButton, {
+                        size: 'small',
+                        type: 'error'
+                    }, { default: () => t('delete_rule') })
+                })
+            ])
+        }
+    }
+]
+
+const openEmailForwardingModal = () => {
+    // 从 emailRuleSettings 转换出列表数据
+    emailForwardingList.value = emailRuleSettings.value.emailForwardingList ?
+        [...emailRuleSettings.value.emailForwardingList] : []
+    showEmailForwardingModal.value = true
+}
+
+const addNewEmailForwardingItem = () => {
+    emailForwardingList.value = [
+        ...emailForwardingList.value,
+        {
+            domains: [],
+            forward: ''
+        }
+    ]
+}
+
+const saveEmailForwardingConfig = () => {
+    emailRuleSettings.value.emailForwardingList = [...emailForwardingList.value]
+    showEmailForwardingModal.value = false
+}
+
 
 const fetchData = async () => {
     try {
@@ -49,6 +162,10 @@ const fetchData = async () => {
         verifiedAddressList.value = res.verifiedAddressList || []
         fromBlockList.value = res.fromBlockList || []
         noLimitSendAddressList.value = res.noLimitSendAddressList || []
+        emailRuleSettings.value = res.emailRuleSettings || {
+            blockReceiveUnknowAddressEmail: false,
+            emailForwardingList: []
+        }
     } catch (error) {
         message.error(error.message || "error");
     }
@@ -64,6 +181,7 @@ const save = async () => {
                 verifiedAddressList: verifiedAddressList.value || [],
                 fromBlockList: fromBlockList.value || [],
                 noLimitSendAddressList: noLimitSendAddressList.value || [],
+                emailRuleSettings: emailRuleSettings.value,
             })
         })
         message.success(t('successTip'))
@@ -81,9 +199,14 @@ onMounted(async () => {
 <template>
     <div class="center">
         <n-card :bordered="false" embedded style="max-width: 600px;">
-            <n-alert :show-icon="false" type="warning" style="margin-bottom: 10px;">
-                {{ t("tip") }}
+            <n-alert :show-icon="false" :bordered="false" type="warning" style="margin-bottom: 10px;">
+                <span>{{ t("tip") }}</span>
             </n-alert>
+            <n-flex justify="end">
+                <n-button @click="save" type="primary" :loading="loading">
+                    {{ t('save') }}
+                </n-button>
+            </n-flex>
             <n-form-item-row :label="t('address_block_list')">
                 <n-select v-model:value="addressBlockList" filterable multiple tag
                     :placeholder="t('address_block_list_placeholder')" />
@@ -103,11 +226,31 @@ onMounted(async () => {
             <n-form-item-row :label="t('fromBlockList')">
                 <n-select v-model:value="fromBlockList" filterable multiple tag :placeholder="t('fromBlockList')" />
             </n-form-item-row>
-            <n-button @click="save" type="primary" block :loading="loading">
-                {{ t('save') }}
-            </n-button>
+            <n-form-item-row :label="t('block_receive_unknow_address_email')">
+                <n-checkbox v-model:checked="emailRuleSettings.blockReceiveUnknowAddressEmail" />
+            </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-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>

worker/src/admin_api/index.ts

@@ -14,6 +14,7 @@ import worker_config from './worker_config'
 import admin_mail_api from './admin_mail_api'
 import { sendMailbyAdmin } from './send_mail'
 import db_api from './db_api'
+import { EmailRuleSettings } from '../models'
 
 export const api = new Hono<HonoCustomType>()
 
@@ -217,13 +218,15 @@ api.get('/admin/account_settings', async (c) => {
         const sendBlockList = await getJsonSetting(c, CONSTANTS.SEND_BLOCK_LIST_KEY);
         const verifiedAddressList = await getJsonSetting(c, CONSTANTS.VERIFIED_ADDRESS_LIST_KEY);
         const fromBlockList = c.env.KV ? await c.env.KV.get<string[]>(CONSTANTS.EMAIL_KV_BLACK_LIST, 'json') : [];
+        const emailRuleSettings = await getJsonSetting<EmailRuleSettings>(c, CONSTANTS.EMAIL_RULE_SETTINGS_KEY);
         const noLimitSendAddressList = await getJsonSetting(c, CONSTANTS.NO_LIMIT_SEND_ADDRESS_LIST_KEY);
         return c.json({
             blockList: blockList || [],
             sendBlockList: sendBlockList || [],
             verifiedAddressList: verifiedAddressList || [],
             fromBlockList: fromBlockList || [],
-            noLimitSendAddressList: noLimitSendAddressList || []
+            noLimitSendAddressList: noLimitSendAddressList || [],
+            emailRuleSettings: emailRuleSettings || {}
         })
     } catch (error) {
         console.error(error);
@@ -235,7 +238,7 @@ api.post('/admin/account_settings', async (c) => {
     /** @type {{ blockList: Array<string>, sendBlockList: Array<string> }} */
     const {
         blockList, sendBlockList, noLimitSendAddressList,
-        verifiedAddressList, fromBlockList
+        verifiedAddressList, fromBlockList, emailRuleSettings
     } = await c.req.json();
     if (!blockList || !sendBlockList || !verifiedAddressList) {
         return c.text("Invalid blockList or sendBlockList", 400)
@@ -265,6 +268,10 @@ api.post('/admin/account_settings', async (c) => {
         c, CONSTANTS.NO_LIMIT_SEND_ADDRESS_LIST_KEY,
         JSON.stringify(noLimitSendAddressList || [])
     )
+    await saveSetting(
+        c, CONSTANTS.EMAIL_RULE_SETTINGS_KEY,
+        JSON.stringify(emailRuleSettings || {})
+    )
     return c.json({
         success: true
     })

worker/src/constants.ts

@@ -13,6 +13,7 @@ export const CONSTANTS = {
     OAUTH2_SETTINGS_KEY: 'oauth2_settings',
     VERIFIED_ADDRESS_LIST_KEY: 'verified_address_list',
     NO_LIMIT_SEND_ADDRESS_LIST_KEY: 'no_limit_send_address_list',
+    EMAIL_RULE_SETTINGS_KEY: 'email_rule_settings',
 
     // KV
     TG_KV_PREFIX: "temp-mail-telegram",

worker/src/email/index.ts

@@ -1,12 +1,14 @@
 import { Context } from "hono";
 
-import { getEnvStringList, getJsonObjectValue } from "../utils";
+import { getEnvStringList, getJsonObjectValue, getJsonSetting } from "../utils";
 import { sendMailToTelegram } from "../telegram_api";
 import { auto_reply } from "./auto_reply";
 import { isBlocked } from "./black_list";
 import { triggerWebhook, triggerAnotherWorker, commonParseMail } from "../common";
 import { check_if_junk_mail } from "./check_junk";
 import { remove_attachment_if_need } from "./check_attachment";
+import { EmailRuleSettings } from "../models";
+import { CONSTANTS } from "../constants";
 
 
 async function email(message: ForwardableEmailMessage, env: Bindings, ctx: ExecutionContext) {
@@ -32,6 +34,25 @@ async function email(message: ForwardableEmailMessage, env: Bindings, ctx: Execu
         console.error("check junk mail error", error);
     }
 
+    // check if unknown address mail
+    try {
+        const emailRuleSettings = await getJsonSetting<EmailRuleSettings>(
+            { env: env } as Context<HonoCustomType>, CONSTANTS.EMAIL_RULE_SETTINGS_KEY
+        );
+        if (emailRuleSettings?.blockReceiveUnknowAddressEmail) {
+            const db_address_id = await env.DB.prepare(
+                `SELECT id FROM address where name = ? `
+            ).bind(message.to).first("id");
+            if (!db_address_id) {
+                message.setReject("Unknown address");
+                console.log(`Unknown address mail from ${message.from} to ${message.to}`);
+                return;
+            }
+        }
+    } catch (error) {
+        console.error("check unknown address mail error", error);
+    }
+
     // remove attachment if configured or size > 2MB
     try {
         await remove_attachment_if_need(env, parsedEmailContext, message.from, message.to, message.rawSize);
@@ -70,11 +91,19 @@ async function email(message: ForwardableEmailMessage, env: Bindings, ctx: Execu
     try {
         // 遍历 FORWARD_ADDRESS_LIST
         const subdomainForwardAddressList = getJsonObjectValue<SubdomainForwardAddressList[]>(env.SUBDOMAIN_FORWARD_ADDRESS_LIST) || [];
-        for (const subdomainForwardAddress of subdomainForwardAddressList) {
+        const emailRuleSettings = await getJsonSetting<EmailRuleSettings>(
+            { env: env } as Context<HonoCustomType>, CONSTANTS.EMAIL_RULE_SETTINGS_KEY
+        );
+        // 合并两个配置, env 里的配置优先级更高
+        const allSubdomainForwardAddressList = [
+            ...(subdomainForwardAddressList || []),
+            ...(emailRuleSettings?.emailForwardingList || []),
+        ];
+        for (const subdomainForwardAddress of allSubdomainForwardAddressList) {
             // 检查邮件是否匹配 domains
             if (subdomainForwardAddress.domains && subdomainForwardAddress.domains.length > 0) {
                 for (const domain of subdomainForwardAddress.domains) {
-                    if (message.to.endsWith(domain)) {
+                    if (message.to.endsWith(domain) && subdomainForwardAddress.forward) {
                         // 转发邮件
                         await message.forward(subdomainForwardAddress.forward);
                         // 支持多邮箱转发收件，不进行截止

worker/src/models/index.ts

@@ -145,3 +145,8 @@ export type UserOauth2Settings = {
     enableMailAllowList?: boolean | undefined;
     mailAllowList?: string[] | undefined;
 }
+
+export type EmailRuleSettings = {
+    blockReceiveUnknowAddressEmail: boolean;
+    emailForwardingList: SubdomainForwardAddressList[]
+}