feat: add about page (#235)

frontend/src/api/index.js

@@ -66,6 +66,7 @@ const getOpenSettings = async (message) => {
             enableUserCreateEmail: res["enableUserCreateEmail"] || false,
             enableUserDeleteEmail: res["enableUserDeleteEmail"] || false,
             enableAutoReply: res["enableAutoReply"] || false,
+            enableIndexAbout: res["enableIndexAbout"] || false,
             copyright: res["copyright"] || openSettings.value.copyright,
             cfTurnstileSiteKey: res["cfTurnstileSiteKey"] || "",
         });

frontend/src/store/index.js

@@ -13,6 +13,7 @@ export const useGlobalState = createGlobalState(
             enableUserCreateEmail: false,
             enableUserDeleteEmail: false,
             enableAutoReply: false,
+            enableIndexAbout: false,
             domains: [],
             copyright: 'Dream Hunter',
             cfTurnstileSiteKey: '',

frontend/src/views/Admin.vue

@@ -14,6 +14,7 @@ import UserManagement from './admin/UserManagement.vue';
 import UserSettings from './admin/UserSettings.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 Appearance from './common/Appearance.vue';
 
@@ -48,6 +49,7 @@ const { t } = useI18n({
       statistics: 'Statistics',
       maintenance: 'Maintenance',
       appearance: 'Appearance',
+      about: 'About',
       ok: 'OK',
     },
     zh: {
@@ -65,6 +67,7 @@ const { t } = useI18n({
       statistics: '统计',
       maintenance: '维护',
       appearance: '外观',
+      about: '关于',
       ok: '确定',
     }
   }
@@ -127,6 +130,9 @@ onMounted(async () => {
       <n-tab-pane name="appearance" :tab="t('appearance')">
         <Appearance />
       </n-tab-pane>
+      <n-tab-pane name="about" :tab="t('about')">
+        <About />
+      </n-tab-pane>
     </n-tabs>
   </div>
 </template>

frontend/src/views/Index.vue

@@ -10,6 +10,7 @@ import AutoReply from './index/AutoReply.vue';
 import SendBox from './index/SendBox.vue';
 import SendMail from './index/SendMail.vue';
 import AccountSettings from './index/AccountSettings.vue';
+import About from './common/About.vue';
 
 const { localeCache, settings, openSettings, indexTab, globalTabplacement } = useGlobalState()
 
@@ -22,6 +23,7 @@ const { t } = useI18n({
       sendmail: 'Send Mail',
       auto_reply: 'Auto Reply',
       accountSettings: 'Account Settings',
+      about: 'About',
     },
     zh: {
       mailbox: '收件箱',
@@ -29,6 +31,7 @@ const { t } = useI18n({
       sendmail: '发送邮件',
       auto_reply: '自动回复',
       accountSettings: '账户设置',
+      about: '关于',
     }
   }
 });
@@ -62,6 +65,9 @@ const deleteMail = async (curMailId) => {
       <n-tab-pane v-if="openSettings.enableAutoReply" name="auto_reply" :tab="t('auto_reply')">
         <AutoReply />
       </n-tab-pane>
+      <n-tab-pane v-if="openSettings.enableIndexAbout" name="about" :tab="t('about')">
+        <About />
+      </n-tab-pane>
     </n-tabs>
   </div>
 </template>

frontend/src/views/common/About.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { GithubAlt, Discord, Telegram } from '@vicons/fa'
+</script>
+
+<template>
+    <div class="center">
+        <n-card>
+            <n-button tag="a" target="_blank" href="https://github.com/dreamhunter2333/cloudflare_temp_email" secondary
+                block strong>
+                <template #icon>
+                    <n-icon :component="GithubAlt" />
+                </template>
+                Github
+            </n-button>
+            <n-button tag="a" target="_blank" href="https://discord.gg/dQEwTWhA6Q" secondary
+                block strong>
+                <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>
+                <template #icon>
+                    <n-icon :component="Telegram" />
+                </template>
+                Telegram
+            </n-button>
+        </n-card>
+    </div>
+</template>
+
+<style scoped>
+.center {
+    display: flex;
+    justify-content: center;
+}
+
+.n-card {
+    max-width: 800px;
+    text-align: left;
+}
+
+.n-button {
+    margin-top: 10px;
+}
+</style>

worker/src/commom_api.js

@@ -21,6 +21,7 @@ api.get('/open_api/settings', async (c) => {
         "enableUserCreateEmail": getBooleanValue(c.env.ENABLE_USER_CREATE_EMAIL),
         "enableUserDeleteEmail": getBooleanValue(c.env.ENABLE_USER_DELETE_EMAIL),
         "enableAutoReply": getBooleanValue(c.env.ENABLE_AUTO_REPLY),
+        "enableIndexAbout": getBooleanValue(c.env.ENABLE_INDEX_ABOUT),
         "copyright": c.env.COPYRIGHT,
         "cfTurnstileSiteKey": c.env.CF_TURNSTILE_SITE_KEY,
         "version": CONSTANTS.VERSION,