From f89b95956a3fa3c36f2fba06537de5bd729de925 Mon Sep 17 00:00:00 2001
From: MHSanaei <ho3ein.sanaei@gmail.com>
Date: Fri, 8 May 2026 13:09:35 +0200
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20Phase=205d-iv=20=E2=80=94=20s?=
 =?UTF-8?q?ettings=20Telegram=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ports the panel/telegram partial: bot enable/token/chatId/lang in the
General panel, schedule/backup/login/CPU-threshold in Notifications,
and proxy/API-server overrides in the third panel. All bindings live
on the shared AllSetting reactive — no fetch/save logic in this tab.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/pages/settings/SettingsPage.vue |   3 +-
 frontend/src/pages/settings/TelegramTab.vue  | 120 +++++++++++++++++++
 2 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/settings/TelegramTab.vue

diff --git a/frontend/src/pages/settings/SettingsPage.vue b/frontend/src/pages/settings/SettingsPage.vue
index 493b6c88..08a02d94 100644
--- a/frontend/src/pages/settings/SettingsPage.vue
+++ b/frontend/src/pages/settings/SettingsPage.vue
@@ -16,6 +16,7 @@ import AppSidebar from '@/components/AppSidebar.vue';
 import { useAllSetting } from './useAllSetting.js';
 import GeneralTab from './GeneralTab.vue';
 import SecurityTab from './SecurityTab.vue';
+import TelegramTab from './TelegramTab.vue';
 
 const antdThemeConfig = computed(() => ({
   algorithm: themeState.isDark ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm,
@@ -222,7 +223,7 @@ const alertVisible = ref(true);
                         <MessageOutlined />
                         <span>Telegram</span>
                       </template>
-                      <a-empty description="Telegram — coming in 5d-iv" />
+                      <TelegramTab :all-setting="allSetting" />
                     </a-tab-pane>
                     <a-tab-pane key="4" class="tab-pane">
                       <template #tab>
diff --git a/frontend/src/pages/settings/TelegramTab.vue b/frontend/src/pages/settings/TelegramTab.vue
new file mode 100644
index 00000000..8eee6096
--- /dev/null
+++ b/frontend/src/pages/settings/TelegramTab.vue
@@ -0,0 +1,120 @@
+<script setup>
+import { LanguageManager } from '@/utils';
+import SettingListItem from '@/components/SettingListItem.vue';
+
+defineProps({
+  allSetting: { type: Object, required: true },
+});
+</script>
+
+<template>
+  <a-collapse default-active-key="1">
+    <a-collapse-panel key="1" header="General">
+      <SettingListItem paddings="small">
+        <template #title>Enable Telegram bot</template>
+        <template #description>Toggle the in-bot notification flow.</template>
+        <template #control>
+          <a-switch v-model:checked="allSetting.tgBotEnable" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Bot token</template>
+        <template #description>Token issued by @BotFather.</template>
+        <template #control>
+          <a-input v-model:value="allSetting.tgBotToken" type="text" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Chat ID</template>
+        <template #description>Telegram chat that receives notifications.</template>
+        <template #control>
+          <a-input v-model:value="allSetting.tgBotChatId" type="text" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Bot language</template>
+        <template #control>
+          <a-select v-model:value="allSetting.tgLang" :style="{ width: '100%' }">
+            <a-select-option
+              v-for="l in LanguageManager.supportedLanguages"
+              :key="l.value"
+              :value="l.value"
+              :label="l.value"
+            >
+              <span role="img" :aria-label="l.name">{{ l.icon }}</span>
+              &nbsp;&nbsp;<span>{{ l.name }}</span>
+            </a-select-option>
+          </a-select>
+        </template>
+      </SettingListItem>
+    </a-collapse-panel>
+
+    <a-collapse-panel key="2" header="Notifications">
+      <SettingListItem paddings="small">
+        <template #title>Notification schedule</template>
+        <template #description>Cron expression — e.g. <code>@daily</code> or <code>0 0 * * *</code>.</template>
+        <template #control>
+          <a-input v-model:value="allSetting.tgRunTime" type="text" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Send database backup</template>
+        <template #description>Attach a backup of x-ui.db on each scheduled notification.</template>
+        <template #control>
+          <a-switch v-model:checked="allSetting.tgBotBackup" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Notify on login</template>
+        <template #description>Send a message whenever the panel is logged into.</template>
+        <template #control>
+          <a-switch v-model:checked="allSetting.tgBotLoginNotify" />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>CPU notification threshold (%)</template>
+        <template #description>Notify when CPU usage stays above this for a sustained window. 0 disables.</template>
+        <template #control>
+          <a-input-number
+            v-model:value="allSetting.tgCpu"
+            :min="0"
+            :max="100"
+            :style="{ width: '100%' }"
+          />
+        </template>
+      </SettingListItem>
+    </a-collapse-panel>
+
+    <a-collapse-panel key="3" header="Proxy and API server">
+      <SettingListItem paddings="small">
+        <template #title>Bot proxy</template>
+        <template #description>Outbound proxy used to reach the Telegram API.</template>
+        <template #control>
+          <a-input
+            v-model:value="allSetting.tgBotProxy"
+            type="text"
+            placeholder="socks5://user:pass@host:port"
+          />
+        </template>
+      </SettingListItem>
+
+      <SettingListItem paddings="small">
+        <template #title>Telegram API server</template>
+        <template #description>Override the default api.telegram.org endpoint.</template>
+        <template #control>
+          <a-input
+            v-model:value="allSetting.tgBotAPIServer"
+            type="text"
+            placeholder="https://api.example.com"
+          />
+        </template>
+      </SettingListItem>
+    </a-collapse-panel>
+  </a-collapse>
+</template>