mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-05-13 17:46:02 +00:00
feat(frontend): Phase 5d-iv — settings Telegram tab
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>
This commit is contained in:
MHSanaei
parent
bd20b8fd7f
commit
f89b95956a
2 changed files with 122 additions and 1 deletions
|
|
@ -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>
|
||||
|
|
|
|||
120
frontend/src/pages/settings/TelegramTab.vue
Normal file
120
frontend/src/pages/settings/TelegramTab.vue
Normal file
|
|
@ -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>
|
||||
<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>
|
||||
Loading…
Reference in a new issue