feat: init send mail (#113)

* feat: init send mail

* feat: init send mail

frontend/src/views/Admin.vue

@@ -6,7 +6,8 @@ import { User, UserCheck, MailBulk } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
 import { api } from '../api'
-import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
+import { processItem } from '../utils/email-parser'
+import SenderAccess from './admin/SenderAccess.vue'
 
 const { localeCache, adminAuth, showAdminAuth } = useGlobalState()
 const router = useRouter()
@@ -49,6 +50,7 @@ const { t } = useI18n({
       account: 'Account',
       unknow: 'Unknow',
       addressQueryTip: 'Leave blank to query all addresses',
+      senderAccess: 'Sender Access Control',
     },
     zh: {
       title: '临时邮件 Admin',
@@ -72,6 +74,7 @@ const { t } = useI18n({
       account: '账号',
       unknow: '未知',
       addressQueryTip: '留空查询所有地址',
+      senderAccess: '发件权限控制',
     }
   }
 });
@@ -396,6 +399,9 @@ const fetchMailUnknowData = async () => {
           </n-list-item>
         </n-list>
       </n-tab-pane>
+      <n-tab-pane name="senderAccess" :tab="t('senderAccess')">
+        <SenderAccess />
+      </n-tab-pane>
     </n-tabs>
   </div>
 </template>

frontend/src/views/Header.vue

@@ -4,7 +4,7 @@ import { ref, h, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRoute, useRouter } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
-import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled } from '@vicons/material'
+import { DarkModeFilled, LightModeFilled, MenuFilled, AdminPanelSettingsFilled, SendFilled } from '@vicons/material'
 import { GithubAlt, Language, User, Home, Copy } from '@vicons/fa'
 
 import { useGlobalState } from '../store'
@@ -73,6 +73,8 @@ const { t } = useI18n({
             home: 'Home',
             menu: 'Menu',
             user: 'User',
+            sendbox: 'Send Box',
+            sendMail: 'Send Mail',
             pleaseGetNewEmail: 'Please login or click "Get New Email" button to get a new email address',
             getNewEmail: 'Get New Email',
             getNewEmailTip1: 'Please input the email you want to use. only allow ., a-z, A-Z and 0-9',
@@ -104,6 +106,8 @@ const { t } = useI18n({
             home: '主页',
             menu: '菜单',
             user: '用户',
+            sendbox: '发件箱',
+            sendMail: '发送邮件',
             pleaseGetNewEmail: '请"登录"或点击 "获取新邮箱" 按钮来获取一个新的邮箱地址',
             getNewEmail: '获取新邮箱',
             getNewEmailTip1: '请输入你想要使用的邮箱地址, 只允许 ., a-z, A-Z, 0-9',
@@ -176,6 +180,19 @@ const menuOptions = computed(() => [
         show: showUserMenu.value,
         key: "user",
         children: [
+            {
+                label: () => h(
+                    NButton,
+                    {
+                        tertiary: true,
+                        ghost: true,
+                        size: "small",
+                        onClick: () => router.push('/sendbox')
+                    },
+                    { default: () => t('sendbox') }
+                ),
+                key: "sendbox"
+            },
             {
                 label: () => h(
                     NButton,
@@ -358,6 +375,7 @@ const deleteAccount = async () => {
 onMounted(async () => {
     await api.getOpenSettings(message);
     emailDomain.value = openSettings.value.domains ? openSettings.value.domains[0].value : "";
+    await api.getSettings();
 });
 </script>
 
@@ -386,6 +404,10 @@ onMounted(async () => {
                 <n-alert type="info" show-icon>
                     <span>
                         <b>{{ t('yourAddress') }} <b>{{ settings.address }}</b></b>
+                        <n-button style="margin-left: 10px" @click="router.push('/send')" size="small" tertiary round
+                            type="primary">
+                            <n-icon :component="SendFilled" /> {{ t('sendMail') }}
+                        </n-button>
                         <n-button style="margin-left: 10px" @click="copy" size="small" tertiary round type="primary">
                             <n-icon :component="Copy" /> {{ t('copy') }}
                         </n-button>

frontend/src/views/Index.vue

@@ -1,298 +1,11 @@
 <script setup>
-import { watch, onMounted, ref } from "vue";
-import { useMessage } from 'naive-ui'
-import { useI18n } from 'vue-i18n'
+import MailBox from './MailBox.vue';
 import { useGlobalState } from '../store'
-import { api } from '../api'
-import { CloudDownloadRound } from '@vicons/material'
-import { useIsMobile } from '../utils/composables'
-import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
-
-const message = useMessage()
-const isMobile = useIsMobile()
-
-const { settings, themeSwitch } = useGlobalState()
-const autoRefresh = ref(false)
-const data = ref([])
-const timer = ref(null)
-
-const count = ref(0)
-const page = ref(1)
-const pageSize = ref(20)
-
-const showAttachments = ref(false)
-const curAttachments = ref([])
-const curMail = ref(null);
-
-const { t } = useI18n({
-  locale: 'zh',
-  messages: {
-    en: {
-      autoRefresh: 'Auto Refresh',
-      refresh: 'Refresh',
-      attachments: 'Show Attachments',
-      downloadMail: 'Download Mail',
-      pleaseSelectMail: "Please select a mail to view."
-    },
-    zh: {
-      autoRefresh: '自动刷新',
-      refresh: '刷新',
-      downloadMail: '下载邮件',
-      attachments: '查看附件',
-      pleaseSelectMail: "请选择一封邮件查看。"
-    }
-  }
-});
-
-const setupAutoRefresh = async (autoRefresh) => {
-  if (autoRefresh) {
-    timer.value = setInterval(async () => {
-      await refresh();
-    }, 30000)
-  } else {
-    clearInterval(timer.value)
-    timer.value = null
-  }
-}
-
-watch(autoRefresh, async (autoRefresh, old) => {
-  setupAutoRefresh(autoRefresh)
-})
-
-watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
-  if (page !== oldPage || pageSize !== oldPageSize) {
-    await refresh();
-  }
-})
-
-const refresh = async () => {
-  if (typeof settings.value.address != 'string' || settings.value.address.trim() === '') {
-    return;
-  }
-  try {
-    const { results, count: totalCount } = await api.fetch(
-      `/api/mails`
-      + `?limit=${pageSize.value}`
-      + `&offset=${(page.value - 1) * pageSize.value}`
-    );
-    data.value = await Promise.all(results.map(async (item) => {
-      return await processItem(item);
-    }));
-    if (totalCount > 0) {
-      count.value = totalCount;
-    }
-    if (!isMobile.value && !curMail.value && data.value.length > 0) {
-      curMail.value = data.value[0];
-    }
-  } catch (error) {
-    message.error(error.message || "error");
-    console.error(error);
-  }
-};
-
-const clickRow = async (row) => {
-  curMail.value = row;
-};
-
-const getAttachments = (attachments) => {
-  curAttachments.value = attachments;
-  showAttachments.value = true;
-};
-
-const mailItemClass = (row) => {
-  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
-};
-
-onMounted(async () => {
-  await api.getSettings();
-  await refresh();
-});
+const { settings } = useGlobalState()
 </script>
 
 <template>
   <div>
-    <n-layout v-if="settings.address">
-      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
-        <template #1>
-          <div>
-            <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-              <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-            </div>
-            <n-switch v-model:value="autoRefresh" size="small">
-              <template #checked>
-                {{ t('autoRefresh') }}
-              </template>
-              <template #unchecked>
-                {{ t('autoRefresh') }}
-              </template></n-switch>
-            <n-button class="center" @click="refresh" size="small" type="primary">
-              {{ t('refresh') }}
-            </n-button>
-          </div>
-          <div style="overflow: auto; height: 80vh;">
-            <n-list hoverable clickable>
-              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
-                :class="mailItemClass(row)">
-                <n-thing class="center" :title="row.subject">
-                  <template #description>
-                    <n-tag type="info">
-                      ID: {{ row.id }}
-                    </n-tag>
-                    <n-tag type="info">
-                      {{ row.created_at }}
-                    </n-tag>
-                    <div style="word-break: break-all; font-size: small;">
-                      FROM: {{ row.source }}
-                    </div>
-                  </template>
-                </n-thing>
-              </n-list-item>
-            </n-list>
-          </div>
-        </template>
-        <template #2>
-          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
-            <n-space>
-              <n-tag type="info">
-                ID: {{ curMail.id }}
-              </n-tag>
-              <n-tag type="info">
-                {{ curMail.created_at }}
-              </n-tag>
-              <n-tag type="info">
-                FROM: {{ curMail.source }}
-              </n-tag>
-              <n-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)">
-                <n-icon :component="CloudDownloadRound" />
-                {{ t('downloadMail') }}
-              </n-button>
-            </n-space>
-            <div v-html="curMail.message" style="margin-top: 10px;"></div>
-          </n-card>
-          <n-card class="mail-item" v-else>
-            <n-result status="info" :title="t('pleaseSelectMail')">
-            </n-result>
-          </n-card>
-        </template>
-      </n-split>
-      <div class="left" v-else>
-        <div>
-          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
-            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
-          </div>
-          <n-switch v-model:value="autoRefresh" size="small">
-            <template #checked>
-              {{ t('autoRefresh') }}
-            </template>
-            <template #unchecked>
-              {{ t('autoRefresh') }}
-            </template></n-switch>
-          <n-button class="center" @click="refresh" size="small" type="primary">
-            {{ t('refresh') }}
-          </n-button>
-        </div>
-        <div id="drawer-target" style="overflow: auto; height: 80vh;">
-          <n-list hoverable clickable>
-            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
-              <n-thing class="center" :title="row.subject">
-                <template #description>
-                  <n-tag type="info">
-                    ID: {{ row.id }}
-                  </n-tag>
-                  <n-tag type="info">
-                    {{ row.created_at }}
-                  </n-tag>
-                  <div style="word-break: break-all; font-size: small;">
-                    FROM: {{ row.source }}
-                  </div>
-                </template>
-              </n-thing>
-            </n-list-item>
-          </n-list>
-        </div>
-        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
-          <n-drawer-content :title="curMail.subject" closable>
-            <n-card style="overflow: auto;">
-              <n-space>
-                <n-tag type="info">
-                  ID: {{ curMail.id }}
-                </n-tag>
-                <n-tag type="info">
-                  {{ curMail.created_at }}
-                </n-tag>
-                <n-tag type="info">
-                  FROM: {{ curMail.source }}
-                </n-tag>
-                <n-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-space>
-              <div v-html="curMail.message" style="margin-top: 10px;"></div>
-            </n-card>
-          </n-drawer-content>
-        </n-drawer>
-      </div>
-    </n-layout>
-    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
-      <template #header>
-        <div>{{ t("attachments") }}</div>
-      </template>
-      <n-list hoverable clickable>
-        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
-          <n-thing class="center" :title="row.filename">
-            <template #description>
-              <n-space>
-                <n-tag type="info">
-                  Size: {{ row.size }}
-                </n-tag>
-              </n-space>
-            </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>
-      <template #action>
-      </template>
-    </n-modal>
+    <MailBox v-if="settings.address" />
   </div>
 </template>
-
-<style scoped>
-.left {
-  text-align: left;
-}
-
-.overlay {
-  width: 100%;
-  height: 100%;
-  z-index: 1000;
-}
-
-.overlay-dark-backgroud {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-.overlay-light-backgroud {
-  background-color: rgba(0, 0, 0, 0.1);
-}
-
-.mail-item {
-  height: 100%;
-}
-</style>

frontend/src/views/MailBox.vue

@@ -0,0 +1,294 @@
+<script setup>
+import { watch, onMounted, ref } from "vue";
+import { useMessage } from 'naive-ui'
+import { useI18n } from 'vue-i18n'
+import { useGlobalState } from '../store'
+import { api } from '../api'
+import { CloudDownloadRound } from '@vicons/material'
+import { useIsMobile } from '../utils/composables'
+import { processItem, getDownloadEmlUrl } from '../utils/email-parser'
+
+const message = useMessage()
+const isMobile = useIsMobile()
+
+const { settings, themeSwitch } = useGlobalState()
+const autoRefresh = ref(false)
+const data = ref([])
+const timer = ref(null)
+
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const showAttachments = ref(false)
+const curAttachments = ref([])
+const curMail = ref(null);
+
+const { t } = useI18n({
+  locale: 'zh',
+  messages: {
+    en: {
+      autoRefresh: 'Auto Refresh',
+      refresh: 'Refresh',
+      attachments: 'Show Attachments',
+      downloadMail: 'Download Mail',
+      pleaseSelectMail: "Please select a mail to view."
+    },
+    zh: {
+      autoRefresh: '自动刷新',
+      refresh: '刷新',
+      downloadMail: '下载邮件',
+      attachments: '查看附件',
+      pleaseSelectMail: "请选择一封邮件查看。"
+    }
+  }
+});
+
+const setupAutoRefresh = async (autoRefresh) => {
+  if (autoRefresh) {
+    timer.value = setInterval(async () => {
+      await refresh();
+    }, 30000)
+  } else {
+    clearInterval(timer.value)
+    timer.value = null
+  }
+}
+
+watch(autoRefresh, async (autoRefresh, old) => {
+  setupAutoRefresh(autoRefresh)
+})
+
+watch([page, pageSize], async ([page, pageSize], [oldPage, oldPageSize]) => {
+  if (page !== oldPage || pageSize !== oldPageSize) {
+    await refresh();
+  }
+})
+
+const refresh = async () => {
+  try {
+    const { results, count: totalCount } = await api.fetch(
+      `/api/mails`
+      + `?limit=${pageSize.value}`
+      + `&offset=${(page.value - 1) * pageSize.value}`
+    );
+    data.value = await Promise.all(results.map(async (item) => {
+      return await processItem(item);
+    }));
+    if (totalCount > 0) {
+      count.value = totalCount;
+    }
+    if (!isMobile.value && !curMail.value && data.value.length > 0) {
+      curMail.value = data.value[0];
+    }
+  } catch (error) {
+    message.error(error.message || "error");
+    console.error(error);
+  }
+};
+
+const clickRow = async (row) => {
+  curMail.value = row;
+};
+
+const getAttachments = (attachments) => {
+  curAttachments.value = attachments;
+  showAttachments.value = true;
+};
+
+const mailItemClass = (row) => {
+  return curMail.value && row.id == curMail.value.id ? (themeSwitch.value ? 'overlay overlay-dark-backgroud' : 'overlay overlay-light-backgroud') : '';
+};
+
+onMounted(async () => {
+  await refresh();
+});
+</script>
+
+<template>
+  <div>
+    <n-layout v-if="settings.address">
+      <n-split class="left" v-if="!isMobile" direction="horizontal" :max="0.75" :min="0.25" :default-size="0.25">
+        <template #1>
+          <div>
+            <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+              <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+            </div>
+            <n-switch v-model:value="autoRefresh" size="small">
+              <template #checked>
+                {{ t('autoRefresh') }}
+              </template>
+              <template #unchecked>
+                {{ t('autoRefresh') }}
+              </template></n-switch>
+            <n-button class="center" @click="refresh" size="small" type="primary">
+              {{ t('refresh') }}
+            </n-button>
+          </div>
+          <div style="overflow: auto; height: 80vh;">
+            <n-list hoverable clickable>
+              <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)"
+                :class="mailItemClass(row)">
+                <n-thing class="center" :title="row.subject">
+                  <template #description>
+                    <n-tag type="info">
+                      ID: {{ row.id }}
+                    </n-tag>
+                    <n-tag type="info">
+                      {{ row.created_at }}
+                    </n-tag>
+                    <div style="word-break: break-all; font-size: small;">
+                      FROM: {{ row.source }}
+                    </div>
+                  </template>
+                </n-thing>
+              </n-list-item>
+            </n-list>
+          </div>
+        </template>
+        <template #2>
+          <n-card v-if="curMail" class="mail-item" :title="curMail.subject" style="overflow: auto; max-height: 100vh;">
+            <n-space>
+              <n-tag type="info">
+                ID: {{ curMail.id }}
+              </n-tag>
+              <n-tag type="info">
+                {{ curMail.created_at }}
+              </n-tag>
+              <n-tag type="info">
+                FROM: {{ curMail.source }}
+              </n-tag>
+              <n-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)">
+                <n-icon :component="CloudDownloadRound" />
+                {{ t('downloadMail') }}
+              </n-button>
+            </n-space>
+            <div v-html="curMail.message" style="margin-top: 10px;"></div>
+          </n-card>
+          <n-card class="mail-item" v-else>
+            <n-result status="info" :title="t('pleaseSelectMail')">
+            </n-result>
+          </n-card>
+        </template>
+      </n-split>
+      <div class="left" v-else>
+        <div>
+          <div style="display: inline-block; margin-top: 10px; margin-bottom: 10px;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" simple size="small" />
+          </div>
+          <n-switch v-model:value="autoRefresh" size="small">
+            <template #checked>
+              {{ t('autoRefresh') }}
+            </template>
+            <template #unchecked>
+              {{ t('autoRefresh') }}
+            </template></n-switch>
+          <n-button class="center" @click="refresh" size="small" type="primary">
+            {{ t('refresh') }}
+          </n-button>
+        </div>
+        <div id="drawer-target" style="overflow: auto; height: 80vh;">
+          <n-list hoverable clickable>
+            <n-list-item v-for="row in data" v-bind:key="row.id" @click="() => clickRow(row)">
+              <n-thing class="center" :title="row.subject">
+                <template #description>
+                  <n-tag type="info">
+                    ID: {{ row.id }}
+                  </n-tag>
+                  <n-tag type="info">
+                    {{ row.created_at }}
+                  </n-tag>
+                  <div style="word-break: break-all; font-size: small;">
+                    FROM: {{ row.source }}
+                  </div>
+                </template>
+              </n-thing>
+            </n-list-item>
+          </n-list>
+        </div>
+        <n-drawer v-model:show="curMail" width="100%" :trap-focus="false" :block-scroll="false" to="#drawer-target">
+          <n-drawer-content :title="curMail.subject" closable>
+            <n-card style="overflow: auto;">
+              <n-space>
+                <n-tag type="info">
+                  ID: {{ curMail.id }}
+                </n-tag>
+                <n-tag type="info">
+                  {{ curMail.created_at }}
+                </n-tag>
+                <n-tag type="info">
+                  FROM: {{ curMail.source }}
+                </n-tag>
+                <n-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-space>
+              <div v-html="curMail.message" style="margin-top: 10px;"></div>
+            </n-card>
+          </n-drawer-content>
+        </n-drawer>
+      </div>
+    </n-layout>
+    <n-modal v-model:show="showAttachments" preset="dialog" title="Dialog">
+      <template #header>
+        <div>{{ t("attachments") }}</div>
+      </template>
+      <n-list hoverable clickable>
+        <n-list-item v-for="row in curAttachments" v-bind:key="row.id">
+          <n-thing class="center" :title="row.filename">
+            <template #description>
+              <n-space>
+                <n-tag type="info">
+                  Size: {{ row.size }}
+                </n-tag>
+              </n-space>
+            </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>
+      <template #action>
+      </template>
+    </n-modal>
+  </div>
+</template>
+
+<style scoped>
+.left {
+  text-align: left;
+}
+
+.overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+}
+
+.overlay-dark-backgroud {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.overlay-light-backgroud {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.mail-item {
+  height: 100%;
+}
+</style>

frontend/src/views/Settings.vue

@@ -2,7 +2,6 @@
 import { useI18n } from 'vue-i18n'
 import { onMounted, ref } from 'vue'
 
-import Header from './Header.vue'
 import { useGlobalState } from '../store'
 import { api } from '../api'
 
@@ -43,7 +42,6 @@ const { t } = useI18n({
 });
 
 const getSettings = async () => {
-    await api.getSettings()
     sourcePrefix.value = settings.value.auto_reply.source_prefix || ""
     enableAutoReply.value = settings.value.auto_reply.enabled || false
     name.value = settings.value.auto_reply.name || ""

frontend/src/views/admin/SenderAccess.vue

@@ -0,0 +1,189 @@
+<script setup>
+import { ref, h, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { localeCache } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+  locale: localeCache.value || 'zh',
+  messages: {
+    en: {
+      address: 'Address',
+      success: 'Success',
+      enable: 'Enable',
+      disable: 'Disable',
+      modify: 'Modify',
+      created_at: 'Created At',
+      action: 'Action',
+      itemCount: 'itemCount',
+      modalTip: 'Please input the sender balance',
+      balance: 'Balance',
+      refresh: 'Refresh',
+      ok: 'OK'
+    },
+    zh: {
+      address: '地址',
+      success: '成功',
+      enable: '启用',
+      disable: '禁用',
+      modify: '修改',
+      created_at: '创建时间',
+      action: '操作',
+      itemCount: '总数',
+      modalTip: '请输入发件额度',
+      balance: '余额',
+      refresh: '刷新',
+      ok: '确定'
+    }
+  }
+});
+const data = ref([])
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const curRow = ref({})
+const showModal = ref(false)
+const senderBalance = ref(0)
+const senderEnabled = ref(false)
+
+
+const updateData = async () => {
+  try {
+    await api.fetch(`/admin/address_sender`, {
+      method: 'POST',
+      body: JSON.stringify({
+        address_id: curRow.value.id,
+        balance: senderBalance.value,
+        enabled: senderEnabled.value ? 1 : 0
+      })
+    });
+    showModal.value = false;
+    message.success(t("success"));
+    await fetchData()
+  } catch (error) {
+    message.error(error.message || "error");
+  }
+}
+
+const fetchData = async () => {
+  try {
+    const { results, count: addressCount } = await api.fetch(
+      `/admin/address_sender`
+      + `?limit=${pageSize.value}`
+      + `&offset=${(page.value - 1) * pageSize.value}`
+    );
+    data.value = results;
+    if (addressCount > 0) {
+      count.value = addressCount;
+    }
+  } catch (error) {
+    console.log(error)
+    message.error(error.message || "error");
+  }
+}
+
+const columns = [
+  {
+    title: "ID",
+    key: "id"
+  },
+  {
+    title: t('address'),
+    key: "address"
+  },
+  {
+    title: t('created_at'),
+    key: "created_at"
+  },
+  {
+    title: t('balance'),
+    key: "balance"
+  },
+  {
+    title: "Enabled",
+    key: "enabled",
+    render(row) {
+      return h('div', [
+        h('span', row.enabled ? t('enable') : t('disable'))
+      ])
+    }
+  },
+  {
+    title: t('action'),
+    key: 'actions',
+    render(row) {
+      return h('div', [
+        h(NButton,
+          {
+            type: 'success',
+            ghost: true,
+            onClick: () => {
+              showModal.value = true;
+              curRow.value = row;
+              senderBalance.value = row.balance
+            }
+          },
+          { default: () => t('modify') }
+        )
+      ])
+    }
+  }
+]
+
+watch([page, pageSize], async () => {
+  await fetchData()
+})
+
+
+onMounted(async () => {
+  await fetchData()
+})
+</script>
+
+<template>
+  <div>
+    <n-modal v-model:show="showModal" preset="dialog">
+      <p>{{ curRow.address }}</p>
+      <p>{{ t('modalTip') }}</p>
+      <n-form-item :show-label="false">
+        <n-checkbox v-model:checked="senderEnabled">
+          {{ t('enable') }}
+        </n-checkbox>
+      </n-form-item>
+      <n-form-item :show-label="false">
+        <n-input-number v-model:value="senderBalance" :min="0" :max="1000" />
+      </n-form-item>
+      <template #action>
+        <n-button @click="updateData()" size="small" tertiary round type="primary">
+          {{ t('ok') }}
+        </n-button>
+      </template>
+    </n-modal>
+    <div style="display: inline-block;">
+      <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count" :page-sizes="[20, 50, 100]"
+        show-size-picker>
+        <template #prefix="{ itemCount }">
+          {{ t('itemCount') }}: {{ itemCount }}
+        </template>
+        <template #suffix>
+          <n-button @click="fetchData" type="primary" size="small" ghost>
+            {{ t('refresh') }}
+          </n-button>
+        </template>
+      </n-pagination>
+    </div>
+    <n-data-table :columns="columns" :data="data" :bordered="false" />
+  </div>
+</template>
+
+<style scoped>
+.n-pagination {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+</style>

frontend/src/views/send/SendBox.vue

@@ -0,0 +1,156 @@
+<script setup>
+import { ref, h, onMounted, watch } from 'vue';
+import { useI18n } from 'vue-i18n'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+
+const { localeCache, settings } = useGlobalState()
+const message = useMessage()
+
+const { t } = useI18n({
+    locale: localeCache.value || 'zh',
+    messages: {
+        en: {
+            address: 'Address',
+            success: 'Success',
+            to_mail: 'To Mail',
+            subject: 'Subject',
+            created_at: 'Created At',
+            action: 'Action',
+            refresh: 'Refresh',
+            itemCount: 'itemCount',
+            view: 'View',
+            ok: 'OK'
+        },
+        zh: {
+            address: '地址',
+            success: '成功',
+            to_mail: '收件人邮箱',
+            subject: '主题',
+            created_at: '创建时间',
+            action: '操作',
+            refresh: '刷新',
+            itemCount: '总数',
+            view: '查看',
+            ok: '确定'
+        }
+    }
+});
+const data = ref([])
+const count = ref(0)
+const page = ref(1)
+const pageSize = ref(20)
+
+const curRow = ref({})
+const showModal = ref(false)
+
+const fetchData = async () => {
+    try {
+        const { results, count: addressCount } = await api.fetch(
+            `/api/sendbox`
+            + `?limit=${pageSize.value}`
+            + `&offset=${(page.value - 1) * pageSize.value}`
+        );
+        data.value = results.map((item) => {
+            try {
+                const data = JSON.parse(item.raw);
+                item.to_mail = data?.personalizations?.map(
+                    (p) => p.to?.map((t) => t.email).join(',')
+                ).join(';');
+                item.subject = data.subject;
+                item.raw = JSON.stringify(data, null, 2);
+            } catch (error) {
+                console.log(error);
+            }
+            return item;
+        });
+        if (addressCount > 0) {
+            count.value = addressCount;
+        }
+    } catch (error) {
+        console.log(error)
+        message.error(error.message || "error");
+    }
+}
+
+const columns = [
+    {
+        title: "ID",
+        key: "id"
+    },
+    {
+        title: t('address'),
+        key: "address"
+    },
+    {
+        title: t('to_mail'),
+        key: "to_mail"
+    },
+    {
+        title: t('subject'),
+        key: "subject"
+    },
+    {
+        title: t('created_at'),
+        key: "created_at"
+    },
+    {
+        title: t('action'),
+        key: 'actions',
+        render(row) {
+            return h('div', [
+                h(NButton,
+                    {
+                        type: 'success',
+                        ghost: true,
+                        onClick: () => {
+                            showModal.value = true;
+                            curRow.value = row;
+                        }
+                    },
+                    { default: () => t('view') }
+                )
+            ])
+        }
+    }
+]
+
+watch([page, pageSize], async () => {
+    await fetchData()
+})
+
+
+onMounted(async () => {
+    await fetchData()
+})
+</script>
+
+<template>
+    <div v-if="settings.address">
+        <n-modal v-model:show="showModal" preset="dialog">
+            <pre>{{ curRow.raw }}</pre>
+        </n-modal>
+        <div style="display: inline-block;">
+            <n-pagination v-model:page="page" v-model:page-size="pageSize" :item-count="count"
+                :page-sizes="[20, 50, 100]" show-size-picker>
+                <template #prefix="{ itemCount }">
+                    {{ t('itemCount') }}: {{ itemCount }}
+                </template>
+                <template #suffix>
+                    <n-button @click="fetchData" type="primary" size="small" ghost>
+                        {{ t('refresh') }}
+                    </n-button>
+                </template>
+            </n-pagination>
+        </div>
+        <n-data-table :columns="columns" :data="data" :bordered="false" />
+    </div>
+</template>
+
+<style scoped>
+.n-pagination {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+</style>

frontend/src/views/send/SendMail.vue

@@ -0,0 +1,189 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { ref } from 'vue'
+import { useStorage } from '@vueuse/core'
+
+import { useGlobalState } from '../../store'
+import { api } from '../../api'
+import router from '../../router'
+
+const message = useMessage()
+const isPreview = ref(false)
+
+const mailModel = useStorage('mailModelCache', {
+    fromName: "",
+    toName: "",
+    toMail: "",
+    subject: "",
+    isHtml: false,
+    content: "",
+})
+
+const { settings } = useGlobalState()
+
+const { t } = useI18n({
+    locale: 'zh',
+    messages: {
+        en: {
+            successSend: 'Please check your sendbox. If failed, please check your balance or 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',
+            isHtml: 'Enable HTML',
+            edit: 'Edit',
+            preview: 'Preview',
+            content: 'Content',
+            send: 'Send',
+            requestAccess: 'Request Access',
+            requestAccessTip: 'You need to request access to send mail',
+            send_balance: 'Send Mail Balance Left',
+        },
+        zh: {
+            successSend: '请查看您的发件箱, 如果失败, 请检查您的余额或稍后重试。',
+            fromName: '你的名称和地址，名称不填写则使用邮箱地址',
+            toName: '收件人名称和地址，名称不填写则使用邮箱地址',
+            subject: '主题',
+            options: '选项',
+            isHtml: '启用HTML',
+            edit: '编辑',
+            preview: '预览',
+            content: '内容',
+            send: '发送',
+            requestAccess: '申请权限',
+            requestAccessTip: '您需要申请权限才能发送邮件',
+            send_balance: '剩余发送邮件额度',
+        }
+    }
+});
+
+const send = async () => {
+    try {
+        await api.fetch(`/api/send_mail`,
+            {
+                method: 'POST',
+                body:
+                    JSON.stringify({
+                        from_name: mailModel.value.fromName,
+                        to_name: mailModel.value.toName,
+                        to_mail: mailModel.value.toMail,
+                        subject: mailModel.value.subject,
+                        is_html: mailModel.value.isHtml,
+                        content: mailModel.value.content,
+                    })
+            })
+        mailModel.value = {
+            fromName: "",
+            toName: "",
+            toMail: "",
+            subject: "",
+            isHtml: false,
+            content: "",
+        }
+    } catch (error) {
+        message.error(error.message || "error");
+    } finally {
+        message.success(t("successSend"));
+        router.push('/');
+    }
+}
+
+const requestAccess = async () => {
+    try {
+        await api.fetch(`/api/requset_send_mail_access`,
+            {
+                method: 'POST',
+                body: JSON.stringify({})
+            }
+        )
+        message.success(t("success"))
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+</script>
+
+<template>
+    <div class="center" v-if="settings.address">
+        <n-card>
+            <div v-if="!settings.send_balance || settings.send_balance <= 0">
+                <n-alert type="warning" show-icon>
+                    {{ t('requestAccessTip') }}
+                    <n-button type="primary" ghost @click="requestAccess">{{ t('requestAccess') }}</n-button>
+                </n-alert>
+                <br />
+            </div>
+            <div v-else>
+                <n-alert type="info" show-icon>
+                    {{ t('send_balance') }}: {{ settings.send_balance }}
+                </n-alert>
+                <div class="right">
+                    <n-button type="primary" @click="send">{{ t('send') }}</n-button>
+                </div>
+                <div class="left">
+                    <n-form :model="mailModel">
+                        <n-form-item :label="t('fromName')" label-placement="top">
+                            <n-input-group>
+                                <n-input v-model:value="mailModel.fromName" />
+                                <n-input :value="settings.address" disabled />
+                            </n-input-group>
+                        </n-form-item>
+                        <n-form-item :label="t('toName')" label-placement="top">
+                            <n-input-group>
+                                <n-input v-model:value="mailModel.toName" />
+                                <n-input v-model:value="mailModel.toMail" />
+                            </n-input-group>
+                        </n-form-item>
+                        <n-form-item :label="t('subject')" label-placement="top">
+                            <n-input v-model:value="mailModel.subject" />
+                        </n-form-item>
+                        <n-form-item :label="t('options')" label-placement="top">
+                            <n-checkbox v-model:checked="mailModel.isHtml">
+                                {{ t('isHtml') }}
+                            </n-checkbox>
+                            <n-button v-if="mailModel.isHtml" @click="isPreview = !isPreview">
+                                {{ isPreview ? t('edit') : t('preview') }}
+                            </n-button>
+                        </n-form-item>
+                        <n-form-item :label="t('content')" label-placement="top">
+                            <div v-if="isPreview" v-html="mailModel.content" />
+                            <n-input v-else type="textarea" v-model:value="mailModel.content" :autosize="{
+                                minRows: 3
+                            }" />
+                        </n-form-item>
+                    </n-form>
+                </div>
+            </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;
+}
+
+.right {
+    text-align: right;
+    place-items: right;
+    justify-content: right;
+}
+</style>