GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-06-06 16:19:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix settings layout

Browse Source
This commit is contained in:
jxxghp
2024-07-14 11:07:17 +08:00
parent a467fdb43f
commit cfc2e407a4
23 changed files with 523 additions and 2073 deletions
Download Patch File Download Diff File Expand all files Collapse all files

434
src/views/setting/AccountSettingNotification.vue
View File

@@ -1,38 +1,12 @@
<script lang="ts" setup>
import { useToast } from 'vue-toast-notification'
import api from '@/api'
import type { NotificationSwitch } from '@/api/types'
import draggable from 'vuedraggable'
import type { NotificationConf } from '@/api/types'
import NotificationChannelCard from '@/components/cards/NotificationChannelCard.vue'
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 notifications = ref<NotificationConf[]>([])
// 消息渠道
const NotificationChannels = [
@@ -65,120 +39,8 @@ const NotificationChannels = [
// 提示框
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()
})
onMounted(() => {})
</script>
<template>
@@ -187,231 +49,28 @@ onMounted(() => {
<VCard>
<VCardItem>
<VCardTitle>通知渠道</VCardTitle>
<VCardSubtitle>只有选中的渠道才会发送消息。</VCardSubtitle>
<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>
<draggable
v-model="notifications"
handle=".cursor-move"
item-key="name"
tag="div"
:component-data="{ 'class': 'grid gap-3 grid-app-card' }"
>
<template #item="{ element }">
<NotificationChannelCard notification="element" />
</template>
</draggable>
</VCardText>
<VCardText>
<VForm @submit.prevent="() => {}">
<div class="d-flex flex-wrap gap-4 mt-4">
<VBtn mtype="submit" @click="saveNotificationSettings"> 保存 </VBtn>
<VBtn mtype="submit" @click=""> 保存 </VBtn>
<VBtn color="success" variant="tonal" @click="">
<VIcon icon="mdi-plus" />
</VBtn>
</div>
</VForm>
</VCardText>
@@ -422,55 +81,14 @@ onMounted(() => {
<VCol cols="12">
<VCard>
<VCardItem>
<VCardTitle>消息类型</VCardTitle>
<VCardSubtitle>对应消息类型只会发送给选中的消息渠道。</VCardSubtitle>
<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>
<VBtn mtype="submit" @click=""> 保存 </VBtn>
</div>
</VForm>
</VCardText>