feat: add configurable Status menu button (#851)

frontend/src/api/index.js

@@ -92,6 +92,7 @@ const getOpenSettings = async (message, notification) => {
             enableWebhook: res["enableWebhook"] || false,
             isS3Enabled: res["isS3Enabled"] || false,
             enableAddressPassword: res["enableAddressPassword"] || false,
+            statusUrl: res["statusUrl"] || "",
         });
         if (openSettings.value.needAuth) {
             showAuth.value = true;

frontend/src/store/index.js

@@ -38,6 +38,7 @@ export const useGlobalState = createGlobalState(
             showGithub: true,
             disableAdminPasswordCheck: false,
             enableAddressPassword: false,
+            statusUrl: '',
         })
         const settings = ref({
             fetched: false,

frontend/src/views/Header.vue

@@ -6,7 +6,7 @@ import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useIsMobile } from '../utils/composables'
 import {
     DarkModeFilled, LightModeFilled, MenuFilled,
-    AdminPanelSettingsFilled
+    AdminPanelSettingsFilled, MonitorHeartFilled
 } from '@vicons/material'
 import { GithubAlt, Language, User, Home } from '@vicons/fa'
 
@@ -59,6 +59,7 @@ const { locale, t } = useI18n({
             home: 'Home',
             menu: 'Menu',
             user: 'User',
+            status: 'Status',
             ok: 'OK',
         },
         zh: {
@@ -70,6 +71,7 @@ const { locale, t } = useI18n({
             home: '主页',
             menu: '菜单',
             user: '用户',
+            status: '状态',
             ok: '确定',
         }
     }
@@ -179,6 +181,25 @@ const menuOptions = computed(() => [
         ),
         key: "lang"
     },
+    {
+        label: () => h(
+            NButton,
+            {
+                text: true,
+                size: "small",
+                style: "width: 100%",
+                tag: "a",
+                target: "_blank",
+                href: openSettings.value?.statusUrl,
+            },
+            {
+                default: () => t('status'),
+                icon: () => h(NIcon, { component: MonitorHeartFilled })
+            }
+        ),
+        show: !!openSettings.value?.statusUrl,
+        key: "status"
+    },
     {
         label: () => h(
             NButton,

vitepress-docs/docs/en/guide/worker-vars.md

@@ -100,6 +100,7 @@
 | `COPYRIGHT`                | Text        | Custom frontend footer text, supports html                               | `Dream Hunter`        |
 | `ADMIN_CONTACT`            | Text        | Admin contact information, can be any string, hidden if not configured   | `xxx@gmail.com`       |
 | `DISABLE_SHOW_GITHUB`      | Text/JSON   | Whether to show GitHub link                                              | `true`                |
+| `STATUS_URL`               | Text        | Status monitoring page URL, shows Status menu button when configured     | `https://status.example.com` |
 | `CF_TURNSTILE_SITE_KEY`    | Text/Secret | Turnstile CAPTCHA configuration                                          | `xxx`                 |
 | `CF_TURNSTILE_SECRET_KEY`  | Text/Secret | Turnstile CAPTCHA configuration                                          | `xxx`                 |
 

vitepress-docs/docs/zh/guide/worker-vars.md

@@ -100,6 +100,7 @@
 | `COPYRIGHT`                | 文本        | 自定义前端界面页脚文本，支持 html                | `Dream Hunter`        |
 | `ADMIN_CONTACT`            | 文本        | admin 联系方式，可配置任意字符串, 不配置则不显示 | `xxx@gmail.com`       |
 | `DISABLE_SHOW_GITHUB`      | 文本/JSON   | 是否显示 GitHub 链接                             | `true`                |
+| `STATUS_URL`               | 文本        | 状态监控页面 URL，配置后显示 Status 菜单按钮     | `https://status.example.com` |
 | `CF_TURNSTILE_SITE_KEY`    | 文本/Secret | Turnstile 人机验证配置                           | `xxx`                 |
 | `CF_TURNSTILE_SECRET_KEY`  | 文本/Secret | Turnstile 人机验证配置                           | `xxx`                 |
 

worker/src/commom_api.ts

@@ -43,7 +43,8 @@ api.get('/open_api/settings', async (c) => {
         "version": CONSTANTS.VERSION,
         "showGithub": !utils.getBooleanValue(c.env.DISABLE_SHOW_GITHUB),
         "disableAdminPasswordCheck": utils.getBooleanValue(c.env.DISABLE_ADMIN_PASSWORD_CHECK),
-        "enableAddressPassword": utils.getBooleanValue(c.env.ENABLE_ADDRESS_PASSWORD)
+        "enableAddressPassword": utils.getBooleanValue(c.env.ENABLE_ADDRESS_PASSWORD),
+        "statusUrl": utils.getStringValue(c.env.STATUS_URL)
     });
 })
 

worker/src/types.d.ts

@@ -47,6 +47,7 @@ type Bindings = {
     NO_LIMIT_SEND_ROLE: string | undefined | null
     ADMIN_CONTACT: string | undefined
     COPYRIGHT: string | undefined
+    STATUS_URL: string | undefined
     DISABLE_SHOW_GITHUB: string | boolean | undefined
     FORWARD_ADDRESS_LIST: string | string[] | undefined
 

worker/wrangler.toml.template

@@ -76,6 +76,8 @@ ENABLE_AUTO_REPLY = false
 # Footer text
 # COPYRIGHT = "Dream Hunter"
 # DISABLE_SHOW_GITHUB = true
+# Status monitoring page URL
+# STATUS_URL = "https://status.example.com"
 # default send balance, if not set, it will be 0
 # DEFAULT_SEND_BALANCE = 1
 # the role which can send emails without limit, multiple roles can be separated by ,