feat: 增加推送通知配置
This commit is contained in:
yml2213
@@ -0,0 +1,79 @@
|
||||
import { apiClient } from '@/shared/api/client'
|
||||
import type { ApiResponse } from '@/shared/types/types'
|
||||
|
||||
export interface PushChannel {
|
||||
id: number
|
||||
name: string
|
||||
type: 'bark' | 'wpush'
|
||||
config: Record<string, string>
|
||||
enabled: boolean
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface PushRule {
|
||||
id: number
|
||||
event: string
|
||||
enabled: boolean
|
||||
threshold: number
|
||||
message_template: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface CreateChannelPayload {
|
||||
name: string
|
||||
type: 'bark' | 'wpush'
|
||||
config: Record<string, string>
|
||||
}
|
||||
|
||||
export interface UpdateChannelPayload {
|
||||
name?: string
|
||||
config?: Record<string, string>
|
||||
enabled?: boolean
|
||||
}
|
||||
|
||||
export interface UpdateRulePayload {
|
||||
enabled?: boolean
|
||||
threshold?: number
|
||||
message_template?: string
|
||||
}
|
||||
|
||||
// ── 渠道 ──
|
||||
|
||||
export async function fetchPushChannels() {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: PushChannel[] }>>('/admin/push-channels')
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export async function createPushChannel(payload: CreateChannelPayload) {
|
||||
const { data } = await apiClient.post<ApiResponse<PushChannel>>('/admin/push-channels', payload)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function updatePushChannel(id: number, payload: UpdateChannelPayload) {
|
||||
const { data } = await apiClient.put<ApiResponse<PushChannel>>(`/admin/push-channels/${id}`, payload)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function deletePushChannel(id: number) {
|
||||
const { data } = await apiClient.delete<ApiResponse<{ deleted: boolean }>>(`/admin/push-channels/${id}`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
export async function testPushChannel(id: number) {
|
||||
const { data } = await apiClient.post<ApiResponse<{ sent: boolean }>>(`/admin/push-channels/${id}/test`)
|
||||
return data.data
|
||||
}
|
||||
|
||||
// ── 规则 ──
|
||||
|
||||
export async function fetchPushRules() {
|
||||
const { data } = await apiClient.get<ApiResponse<{ items: PushRule[] }>>('/admin/push-rules')
|
||||
return data.data.items
|
||||
}
|
||||
|
||||
export async function updatePushRule(id: number, payload: UpdateRulePayload) {
|
||||
const { data } = await apiClient.put<ApiResponse<PushRule>>(`/admin/push-rules/${id}`, payload)
|
||||
return data.data
|
||||
}
|
||||
@@ -0,0 +1,351 @@
|
||||
<script setup lang="ts">
|
||||
import { Check, Delete, Edit, Plus, Refresh } from '@element-plus/icons-vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
import {
|
||||
createPushChannel,
|
||||
deletePushChannel,
|
||||
fetchPushChannels,
|
||||
fetchPushRules,
|
||||
testPushChannel,
|
||||
updatePushChannel,
|
||||
updatePushRule,
|
||||
type CreateChannelPayload,
|
||||
type PushChannel,
|
||||
type PushRule,
|
||||
} from '@/features/admin/api/adminPush'
|
||||
|
||||
// ── 渠道状态 ──
|
||||
const channels = ref<PushChannel[]>([])
|
||||
const channelsLoading = ref(false)
|
||||
const channelDialogVisible = ref(false)
|
||||
const editingChannel = ref<PushChannel | null>(null)
|
||||
const channelForm = ref<CreateChannelPayload>({ name: '', type: 'bark', config: {} })
|
||||
|
||||
// ── 规则状态 ──
|
||||
const rules = ref<PushRule[]>([])
|
||||
const rulesLoading = ref(false)
|
||||
const ruleDialogVisible = ref(false)
|
||||
const editingRule = ref<PushRule | null>(null)
|
||||
const ruleForm = ref({ enabled: true, threshold: 5, message_template: '' })
|
||||
|
||||
const channelTypeOptions = [
|
||||
{ label: 'iOS Bark', value: 'bark' },
|
||||
{ label: 'WPush', value: 'wpush' },
|
||||
]
|
||||
|
||||
const channelTypeLabel: Record<string, string> = {
|
||||
bark: 'Bark',
|
||||
wpush: 'WPush',
|
||||
}
|
||||
|
||||
const eventNameLabel: Record<string, string> = {
|
||||
qrcode_low_stock: '二维码库存预警',
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadChannels()
|
||||
loadRules()
|
||||
})
|
||||
|
||||
// ── 渠道方法 ──
|
||||
|
||||
async function loadChannels() {
|
||||
channelsLoading.value = true
|
||||
try {
|
||||
channels.value = await fetchPushChannels()
|
||||
} finally {
|
||||
channelsLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openCreateChannel() {
|
||||
editingChannel.value = null
|
||||
channelForm.value = { name: '', type: 'bark', config: {} }
|
||||
channelDialogVisible.value = true
|
||||
}
|
||||
|
||||
function openEditChannel(row: PushChannel) {
|
||||
editingChannel.value = row
|
||||
channelForm.value = {
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
config: { ...row.config },
|
||||
}
|
||||
channelDialogVisible.value = true
|
||||
}
|
||||
|
||||
async function saveChannel() {
|
||||
if (!channelForm.value.name) {
|
||||
ElMessage.warning('请输入渠道名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
if (editingChannel.value) {
|
||||
await updatePushChannel(editingChannel.value.id, {
|
||||
name: channelForm.value.name,
|
||||
config: channelForm.value.config,
|
||||
})
|
||||
ElMessage.success('更新成功')
|
||||
} else {
|
||||
await createPushChannel(channelForm.value)
|
||||
ElMessage.success('创建成功')
|
||||
}
|
||||
channelDialogVisible.value = false
|
||||
await loadChannels()
|
||||
} catch {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleChannel(row: PushChannel) {
|
||||
try {
|
||||
await updatePushChannel(row.id, { enabled: !row.enabled })
|
||||
ElMessage.success(row.enabled ? '已禁用' : '已启用')
|
||||
await loadChannels()
|
||||
} catch {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDeleteChannel(row: PushChannel) {
|
||||
try {
|
||||
await ElMessageBox.confirm(`确定删除渠道「${row.name}」？`, '确认删除', { type: 'warning' })
|
||||
await deletePushChannel(row.id)
|
||||
ElMessage.success('已删除')
|
||||
await loadChannels()
|
||||
} catch {
|
||||
// 取消
|
||||
}
|
||||
}
|
||||
|
||||
async function handleTestChannel(row: PushChannel) {
|
||||
try {
|
||||
await testPushChannel(row.id)
|
||||
ElMessage.success('测试消息已发送，请检查是否收到')
|
||||
} catch {
|
||||
ElMessage.error('测试发送失败，请检查配置')
|
||||
}
|
||||
}
|
||||
|
||||
function channelConfigFields(type: string) {
|
||||
if (type === 'bark') {
|
||||
return [
|
||||
{ key: 'device_key', label: 'DeviceKey', placeholder: 'Bark 推送 DeviceKey' },
|
||||
{ key: 'server', label: '服务地址', placeholder: 'https://api.day.app（可选）' },
|
||||
]
|
||||
}
|
||||
if (type === 'wpush') {
|
||||
return [{ key: 'api_key', label: 'APIKey', placeholder: 'WPush 推送 APIKey' }]
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
// ── 规则方法 ──
|
||||
|
||||
async function loadRules() {
|
||||
rulesLoading.value = true
|
||||
try {
|
||||
rules.value = await fetchPushRules()
|
||||
} finally {
|
||||
rulesLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function openEditRule(row: PushRule) {
|
||||
editingRule.value = row
|
||||
ruleForm.value = {
|
||||
enabled: row.enabled,
|
||||
threshold: row.threshold,
|
||||
message_template: row.message_template,
|
||||
}
|
||||
ruleDialogVisible.value = true
|
||||
}
|
||||
|
||||
async function saveRule() {
|
||||
if (!editingRule.value) return
|
||||
try {
|
||||
await updatePushRule(editingRule.value.id, ruleForm.value)
|
||||
ElMessage.success('更新成功')
|
||||
ruleDialogVisible.value = false
|
||||
await loadRules()
|
||||
} catch {
|
||||
ElMessage.error('操作失败')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<div class="page-header-row">
|
||||
<div class="page-header">
|
||||
<p class="eyebrow">Push Notifications</p>
|
||||
<h1>推送通知</h1>
|
||||
<p>配置站外推送渠道和通知规则，二维码库存不足时自动预警。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 渠道管理 -->
|
||||
<div class="section-header">
|
||||
<h2>推送渠道</h2>
|
||||
<div class="section-actions">
|
||||
<el-button :icon="Refresh" :loading="channelsLoading" @click="loadChannels">刷新</el-button>
|
||||
<el-button type="primary" :icon="Plus" @click="openCreateChannel">新增渠道</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="channelsLoading" :data="channels" class="table-panel">
|
||||
<el-table-column label="名称" prop="name" min-width="120" />
|
||||
<el-table-column label="类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag effect="plain">{{ channelTypeLabel[row.type] || row.type }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="配置" min-width="200">
|
||||
<template #default="{ row }">
|
||||
<code class="config-preview">{{ JSON.stringify(row.config) }}</code>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.enabled ? 'success' : 'info'" effect="plain">
|
||||
{{ row.enabled ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="260" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" :icon="Edit" @click="openEditChannel(row)">编辑</el-button>
|
||||
<el-button size="small" type="primary" @click="handleTestChannel(row)">测试</el-button>
|
||||
<el-button size="small" :type="row.enabled ? 'warning' : 'success'" @click="toggleChannel(row)">
|
||||
{{ row.enabled ? '禁用' : '启用' }}
|
||||
</el-button>
|
||||
<el-button size="small" type="danger" :icon="Delete" @click="handleDeleteChannel(row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<el-empty v-if="!channelsLoading && channels.length === 0" description="暂无推送渠道，点击上方按钮新增" />
|
||||
|
||||
<!-- 规则管理 -->
|
||||
<div class="section-header" style="margin-top: 32px">
|
||||
<h2>通知规则</h2>
|
||||
<el-button :icon="Refresh" :loading="rulesLoading" @click="loadRules">刷新</el-button>
|
||||
</div>
|
||||
|
||||
<el-table v-loading="rulesLoading" :data="rules" class="table-panel">
|
||||
<el-table-column label="事件" min-width="160">
|
||||
<template #default="{ row }">
|
||||
<span>{{ eventNameLabel[row.event] || row.event }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="80">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.enabled ? 'success' : 'info'" effect="plain">
|
||||
{{ row.enabled ? '启用' : '禁用' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="阈值" width="100" prop="threshold" />
|
||||
<el-table-column label="消息模板" min-width="250" prop="message_template" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button size="small" type="primary" :icon="Edit" @click="openEditRule(row)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 渠道编辑弹窗 -->
|
||||
<el-dialog
|
||||
v-model="channelDialogVisible"
|
||||
:title="editingChannel ? '编辑渠道' : '新增渠道'"
|
||||
width="500px"
|
||||
>
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="channelForm.name" placeholder="如：我的 Bark" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型">
|
||||
<el-select v-model="channelForm.type" :disabled="!!editingChannel">
|
||||
<el-option
|
||||
v-for="opt in channelTypeOptions"
|
||||
:key="opt.value"
|
||||
:label="opt.label"
|
||||
:value="opt.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item v-for="field in channelConfigFields(channelForm.type)" :key="field.key" :label="field.label">
|
||||
<el-input
|
||||
v-model="channelForm.config[field.key]"
|
||||
:placeholder="field.placeholder"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="channelDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :icon="Check" @click="saveChannel">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 规则编辑弹窗 -->
|
||||
<el-dialog v-model="ruleDialogVisible" title="编辑规则" width="500px">
|
||||
<el-form label-width="80px">
|
||||
<el-form-item label="启用">
|
||||
<el-switch v-model="ruleForm.enabled" />
|
||||
</el-form-item>
|
||||
<el-form-item label="阈值">
|
||||
<el-input-number v-model="ruleForm.threshold" :min="1" :max="999" />
|
||||
<span class="form-hint">库存低于此值时触发预警</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="消息模板">
|
||||
<el-input v-model="ruleForm.message_template" type="textarea" :rows="3" placeholder="支持 {{.Count}} 占位符" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="ruleDialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :icon="Check" @click="saveRule">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.section-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.config-preview {
|
||||
display: inline-block;
|
||||
max-width: 200px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
background: #f4f5f7;
|
||||
color: #5b6575;
|
||||
font-size: 12px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.form-hint {
|
||||
margin-left: 8px;
|
||||
color: #9ca3af;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user