mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-05-12 02:21:06 +08:00
481 lines
17 KiB
Vue
481 lines
17 KiB
Vue
<script lang="ts" setup>
|
||
import { useToast } from 'vue-toast-notification'
|
||
import api from '@/api'
|
||
import type { NotificationSwitch } from '@/api/types'
|
||
|
||
const messagemTypes = ref<NotificationSwitch[]>([])
|
||
|
||
// 选中的消息渠道
|
||
const selectedChannels = ref([])
|
||
|
||
// 消息渠道标签页
|
||
const messagerTab = ref('wechat')
|
||
|
||
// 消息设置
|
||
const notificationSettings = ref({
|
||
WECHAT_CORPID: '',
|
||
WECHAT_APP_SECRET: '',
|
||
WECHAT_APP_ID: '',
|
||
WECHAT_PROXY: '',
|
||
WECHAT_TOKEN: '',
|
||
WECHAT_ENCODING_AESKEY: '',
|
||
WECHAT_ADMINS: '',
|
||
TELEGRAM_TOKEN: '',
|
||
TELEGRAM_CHAT_ID: '',
|
||
TELEGRAM_USERS: '',
|
||
TELEGRAM_ADMINS: '',
|
||
SLACK_OAUTH_TOKEN: '',
|
||
SLACK_APP_TOKEN: '',
|
||
SLACK_CHANNEL: '',
|
||
SYNOLOGYCHAT_WEBHOOK: '',
|
||
SYNOLOGYCHAT_TOKEN: '',
|
||
VOCECHAT_HOST: '',
|
||
VOCECHAT_API_KEY: '',
|
||
VOCECHAT_CHANNEL_ID: '',
|
||
})
|
||
|
||
// 消息渠道
|
||
const NotificationChannels = [
|
||
{
|
||
title: '微信',
|
||
value: 'wechat',
|
||
},
|
||
{
|
||
title: 'Telegram',
|
||
value: 'telegram',
|
||
},
|
||
{
|
||
title: 'Slack',
|
||
value: 'slack',
|
||
},
|
||
{
|
||
title: 'SynologyChat',
|
||
value: 'synologychat',
|
||
},
|
||
{
|
||
title: 'VoceChat',
|
||
value: 'vocechat',
|
||
},
|
||
{
|
||
title: 'WebPush',
|
||
value: 'webpush',
|
||
},
|
||
]
|
||
|
||
// 提示框
|
||
const $toast = useToast()
|
||
|
||
// 调用API查询消息开关
|
||
async function loadNotificationSwitchs() {
|
||
try {
|
||
const result: NotificationSwitch[] = await api.get('message/switchs')
|
||
|
||
messagemTypes.value = result
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
// 调用API保存消息开关
|
||
async function saveNotificationSwitchs() {
|
||
try {
|
||
const result: { [key: string]: any } = await api.post('message/switchs', messagemTypes.value)
|
||
|
||
if (result.success) $toast.success('保存通知消息设置成功')
|
||
else $toast.error('保存通知消息设置失败！')
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
// 调用API查询消息渠道设置
|
||
async function loadNotificationSettings() {
|
||
try {
|
||
const result1: { [key: string]: any } = await api.get('system/setting/MESSAGER')
|
||
if (result1.success)
|
||
selectedChannels.value = result1.data && result1.data.value ? result1.data.value.split(',') : []
|
||
|
||
const result2: { [key: string]: any } = await api.get('system/env')
|
||
if (result2.success) {
|
||
const {
|
||
WECHAT_CORPID,
|
||
WECHAT_APP_SECRET,
|
||
WECHAT_APP_ID,
|
||
WECHAT_PROXY,
|
||
WECHAT_TOKEN,
|
||
WECHAT_ENCODING_AESKEY,
|
||
WECHAT_ADMINS,
|
||
TELEGRAM_TOKEN,
|
||
TELEGRAM_CHAT_ID,
|
||
TELEGRAM_USERS,
|
||
TELEGRAM_ADMINS,
|
||
SLACK_OAUTH_TOKEN,
|
||
SLACK_APP_TOKEN,
|
||
SLACK_CHANNEL,
|
||
SYNOLOGYCHAT_WEBHOOK,
|
||
SYNOLOGYCHAT_TOKEN,
|
||
VOCECHAT_HOST,
|
||
VOCECHAT_API_KEY,
|
||
VOCECHAT_CHANNEL_ID,
|
||
} = result2.data
|
||
notificationSettings.value = {
|
||
WECHAT_CORPID,
|
||
WECHAT_APP_SECRET,
|
||
WECHAT_APP_ID,
|
||
WECHAT_PROXY,
|
||
WECHAT_TOKEN,
|
||
WECHAT_ENCODING_AESKEY,
|
||
WECHAT_ADMINS,
|
||
TELEGRAM_TOKEN,
|
||
TELEGRAM_CHAT_ID,
|
||
TELEGRAM_USERS,
|
||
TELEGRAM_ADMINS,
|
||
SLACK_OAUTH_TOKEN,
|
||
SLACK_APP_TOKEN,
|
||
SLACK_CHANNEL,
|
||
SYNOLOGYCHAT_WEBHOOK,
|
||
SYNOLOGYCHAT_TOKEN,
|
||
VOCECHAT_HOST,
|
||
VOCECHAT_API_KEY,
|
||
VOCECHAT_CHANNEL_ID,
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
// 调用API保存消息渠道设置
|
||
async function saveNotificationSettings() {
|
||
try {
|
||
const result1: { [key: string]: any } = await api.post('system/setting/MESSAGER', selectedChannels.value.join(','))
|
||
|
||
const result2: { [key: string]: any } = await api.post('system/env', notificationSettings.value)
|
||
|
||
if (result1.success && result2.success) {
|
||
$toast.success('保存通知渠道设置成功')
|
||
reloadModule()
|
||
} else {
|
||
$toast.error('保存通知渠道设置失败！')
|
||
}
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
// 调用API接口重新加载模块
|
||
async function reloadModule() {
|
||
try {
|
||
const result: { [key: string]: any } = await api.get('system/reload')
|
||
if (result.success) $toast.success('重新加载模块成功')
|
||
else $toast.error('重新加载模块失败！')
|
||
} catch (error) {
|
||
console.log(error)
|
||
}
|
||
}
|
||
|
||
// 加载数据
|
||
onMounted(() => {
|
||
loadNotificationSwitchs()
|
||
loadNotificationSettings()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<VRow>
|
||
<VCol cols="12">
|
||
<VCard>
|
||
<VCardItem>
|
||
<VCardTitle>通知渠道</VCardTitle>
|
||
<VCardSubtitle>只有选中的渠道才会发送消息。</VCardSubtitle>
|
||
</VCardItem>
|
||
<VCardText>
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="6">
|
||
<VSelect
|
||
v-model="selectedChannels"
|
||
multiple
|
||
chips
|
||
:items="NotificationChannels"
|
||
label="当前使用通知渠道"
|
||
hint="消息通知渠道总开关"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
<VRow>
|
||
<VCol>
|
||
<VTabs v-model="messagerTab" stacked>
|
||
<VTab value="wechat"> 微信 </VTab>
|
||
<VTab value="telegram"> Telegram </VTab>
|
||
<VTab value="slack"> Slack </VTab>
|
||
<VTab value="synologychat"> SynologyChat </VTab>
|
||
<VTab value="vocechat"> VoceChat </VTab>
|
||
</VTabs>
|
||
<VWindow v-model="messagerTab" class="mt-5 disable-tab-transition" :touch="false">
|
||
<VWindowItem value="wechat">
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_CORPID"
|
||
label="企业ID"
|
||
hint="企业微信后台企业信息中的企业ID"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_APP_ID"
|
||
label="应用 AgentId"
|
||
hint="企业微信自建应用的AgentId"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_APP_SECRET"
|
||
label="应用 Secret"
|
||
hint="企业微信自建应用的Secret"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_PROXY"
|
||
label="代理地址"
|
||
hint="微信消息的转发代理地址，2022年6月20日后创建的自建应用才需要，不使用代理时需要保留默认值"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_TOKEN"
|
||
label="Token"
|
||
hint="微信企业自建应用->API接收消息配置中的Token"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_ENCODING_AESKEY"
|
||
label="EncodingAESKey"
|
||
hint="微信企业自建应用->API接收消息配置中的EncodingAESKey"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.WECHAT_ADMINS"
|
||
label="管理员白名单"
|
||
placeholder="多个用,分隔"
|
||
hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VWindowItem>
|
||
<VWindowItem value="telegram">
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.TELEGRAM_TOKEN"
|
||
label="Bot Token"
|
||
hint="Telegram机器人token，格式：123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.TELEGRAM_CHAT_ID"
|
||
label="Chat ID"
|
||
hint="接受消息通知的用户、群组或频道Chat ID"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.TELEGRAM_USERS"
|
||
label="用户白名单"
|
||
placeholder="多个用,分隔"
|
||
hint="可使用Telegram机器人的用户ID清单，多个用户用,分隔，不填写则所有用户都能使用"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.TELEGRAM_ADMINS"
|
||
label="管理员白名单"
|
||
placeholder="多个用,分隔"
|
||
hint="可使用管理菜单及命令的用户ID列表，多个ID使用,分隔"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VWindowItem>
|
||
<VWindowItem value="slack">
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="5">
|
||
<VTextField
|
||
v-model="notificationSettings.SLACK_OAUTH_TOKEN"
|
||
label="Slack Bot User OAuth Token"
|
||
placeholder="xoxb-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
|
||
hint="Slack应用`OAuth & Permissions`页面中的`Bot User OAuth Token`"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="5">
|
||
<VTextField
|
||
v-model="notificationSettings.SLACK_APP_TOKEN"
|
||
label="Slack App-Level Token"
|
||
placeholder="xapp-xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxx"
|
||
hint="Slack应用`OAuth & Permissions`页面中的`App-Level Token`"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="2">
|
||
<VTextField
|
||
v-model="notificationSettings.SLACK_CHANNEL"
|
||
label="频道名称"
|
||
placeholder="全体"
|
||
hint="消息发送频道，默认`全体`"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VWindowItem>
|
||
<VWindowItem value="synologychat">
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.SYNOLOGYCHAT_WEBHOOK"
|
||
label="机器人传入URL"
|
||
hint="Synology Chat机器人传入URL"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="6">
|
||
<VTextField
|
||
v-model="notificationSettings.SYNOLOGYCHAT_TOKEN"
|
||
label="令牌"
|
||
hint="Synology Chat机器人令牌"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VWindowItem>
|
||
<VWindowItem value="vocechat">
|
||
<VForm>
|
||
<VRow>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.VOCECHAT_HOST"
|
||
label="地址"
|
||
hint="VoceChat服务端地址，格式：http(s)://ip:port"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.VOCECHAT_API_KEY"
|
||
label="机器人密钥"
|
||
hint="VoceChat机器人密钥"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
<VCol cols="12" md="4">
|
||
<VTextField
|
||
v-model="notificationSettings.VOCECHAT_CHANNEL_ID"
|
||
label="频道ID"
|
||
placeholder="不包含#号"
|
||
hint="VoceChat的频道ID，不包含#号"
|
||
persistent-hint
|
||
/>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VWindowItem>
|
||
</VWindow>
|
||
</VCol>
|
||
</VRow>
|
||
</VForm>
|
||
</VCardText>
|
||
<VCardText>
|
||
<VForm @submit.prevent="() => {}">
|
||
<div class="d-flex flex-wrap gap-4 mt-4">
|
||
<VBtn mtype="submit" @click="saveNotificationSettings"> 保存 </VBtn>
|
||
</div>
|
||
</VForm>
|
||
</VCardText>
|
||
</VCard>
|
||
</VCol>
|
||
</VRow>
|
||
<VRow>
|
||
<VCol cols="12">
|
||
<VCard>
|
||
<VCardItem>
|
||
<VCardTitle>消息类型</VCardTitle>
|
||
<VCardSubtitle>对应消息类型只会发送给选中的消息渠道。</VCardSubtitle>
|
||
</VCardItem>
|
||
<VTable class="text-no-wrap">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">消息类型</th>
|
||
<th scope="col">微信</th>
|
||
<th scope="col">Telegram</th>
|
||
<th scope="col">Slack</th>
|
||
<th scope="col">SynologyChat</th>
|
||
<th scope="col">VoceChat</th>
|
||
<th scope="col">WebPush</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr v-for="message in messagemTypes" :key="message.mtype">
|
||
<td>
|
||
{{ message.mtype }}
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.wechat" />
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.telegram" />
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.slack" />
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.synologychat" />
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.vocechat" />
|
||
</td>
|
||
<td>
|
||
<VCheckbox v-model="message.webpush" />
|
||
</td>
|
||
</tr>
|
||
<tr v-if="messagemTypes.length === 0">
|
||
<td colspan="6" class="text-center">没有设置任何通知渠道</td>
|
||
</tr>
|
||
</tbody>
|
||
</VTable>
|
||
<VDivider />
|
||
<VCardText>
|
||
<VForm @submit.prevent="() => {}">
|
||
<div class="d-flex flex-wrap gap-4 mt-4">
|
||
<VBtn mtype="submit" @click="saveNotificationSwitchs"> 保存 </VBtn>
|
||
</div>
|
||
</VForm>
|
||
</VCardText>
|
||
</VCard>
|
||
</VCol>
|
||
</VRow>
|
||
</template>
|