feat: telegram bot (#238)

frontend/src/views/Admin.vue

@@ -17,6 +17,7 @@ import MailsUnknow from './admin/MailsUnknow.vue';
 import About from './common/About.vue';
 import Maintenance from './admin/Maintenance.vue';
 import Appearance from './common/Appearance.vue';
+import Telegram from './admin/Telegram.vue';
 
 const {
   localeCache, adminAuth, showAdminAuth, adminTab, loading, globalTabplacement
@@ -46,6 +47,7 @@ const { t } = useI18n({
       unknow: 'Mails with unknow receiver',
       senderAccess: 'Sender Access Control',
       sendBox: 'Send Box',
+      telegram: 'Telegram Bot',
       statistics: 'Statistics',
       maintenance: 'Maintenance',
       appearance: 'Appearance',
@@ -64,6 +66,7 @@ const { t } = useI18n({
       unknow: '无收件人邮件',
       senderAccess: '发件权限控制',
       sendBox: '发件箱',
+      telegram: '电报机器人',
       statistics: '统计',
       maintenance: '维护',
       appearance: '外观',
@@ -121,6 +124,9 @@ onMounted(async () => {
       <n-tab-pane name="sendBox" :tab="t('sendBox')">
         <SendBox />
       </n-tab-pane>
+      <n-tab-pane name="telegram" :tab="t('telegram')">
+        <Telegram />
+      </n-tab-pane>
       <n-tab-pane name="statistics" :tab="t('statistics')">
         <Statistics />
       </n-tab-pane>

frontend/src/views/admin/Telegram.vue

@@ -0,0 +1,77 @@
+<script setup>
+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: {
+            init: 'Init',
+            successTip: 'Success',
+            status: 'Check Status',
+        },
+        zh: {
+            init: '初始化',
+            successTip: '成功',
+            status: '查看状态',
+        }
+    }
+});
+
+const status = ref({
+    fetched: false,
+})
+
+const fetchData = async () => {
+    try {
+        const res = await api.fetch(`/admin/telegram/status`)
+        Object.assign(status.value, res)
+        status.value.fetched = true
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+
+const save = async () => {
+    try {
+        await api.fetch(`/admin/telegram/init`, {
+            method: 'POST',
+        })
+        message.success(t('successTip'))
+    } catch (error) {
+        message.error(error.message || "error");
+    }
+}
+</script>
+
+<template>
+    <div class="center">
+        <n-card style="max-width: 800px; overflow: auto;">
+            <n-button @click="save" type="primary" block>
+                {{ t('init') }}
+            </n-button>
+            <n-button @click="fetchData" secondary block>
+                {{ t('status') }}
+            </n-button>
+            <pre v-if="status.fetched">{{ JSON.stringify(status, null, 2) }}</pre>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    text-align: left;
+    place-items: center;
+    justify-content: center;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

frontend/src/views/common/About.vue

@@ -5,22 +5,19 @@ import { GithubAlt, Discord, Telegram } from '@vicons/fa'
 <template>
     <div class="center">
         <n-card>
-            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email" secondary
-                block strong>
+            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email">
                 <template #icon>
                     <n-icon :component="GithubAlt" />
                 </template>
                 Github
             </n-button>
-            <n-button tag="a" target="_blank" href="https://discord.gg/dQEwTWhA6Q" secondary
-                block strong>
+            <n-button tag="a" target="_blank" href="https://discord.gg/dQEwTWhA6Q">
                 <template #icon>
                     <n-icon :component="Discord" />
                 </template>
                 Discord
             </n-button>
-            <n-button tag="a" target="_blank" href="https://t.me/cloudflare_temp_email" secondary
-                block strong>
+            <n-button tag="a" target="_blank" href="https://t.me/cloudflare_temp_email">
                 <template #icon>
                     <n-icon :component="Telegram" />
                 </template>
@@ -38,10 +35,10 @@ import { GithubAlt, Discord, Telegram } from '@vicons/fa'
 
 .n-card {
     max-width: 800px;
-    text-align: left;
 }
 
 .n-button {
     margin-top: 10px;
+    margin-left: 10px;
 }
 </style>