refactor(webhook): 添加切换Webhook启用状态功能,优化UI交互

This commit is contained in:
2025-09-27 17:14:47 +08:00
parent 14a8a308c5
commit 837af62a60

View File

@@ -28,6 +28,14 @@
<div class="webhook-url">{{ webhook.url }}</div>
</div>
<div class="webhook-actions">
<a-switch
v-model:checked="webhook.enabled"
@change="toggleWebhookEnabled(webhook)"
size="small"
:checked-children="'启用'"
:un-checked-children="'禁用'"
class="webhook-switch"
/>
<a-button type="text" size="small" @click="testWebhook(webhook)" :loading="testingWebhooks[webhook.id]">
<template #icon>
<PlayCircleOutlined />
@@ -163,7 +171,9 @@ import {
EditOutlined,
DeleteOutlined,
PlayCircleOutlined,
ApiOutlined
ApiOutlined,
CheckCircleOutlined,
StopOutlined
} from '@ant-design/icons-vue'
import type { CustomWebhook } from '@/types/settings'
import { WEBHOOK_TEMPLATES, TEMPLATE_VARIABLES } from '@/utils/webhookTemplates'
@@ -233,6 +243,20 @@ const editWebhook = (webhook: CustomWebhook) => {
modalVisible.value = true
}
// 切换 Webhook 启用状态
const toggleWebhookEnabled = (webhook: CustomWebhook) => {
// 由于 a-switch 已经改变了 webhook.enabled 的值,我们需要根据新值来更新
const newEnabled = webhook.enabled
const newWebhooks = webhooks.value.map(w =>
w.id === webhook.id
? { ...w, enabled: newEnabled }
: w
)
webhooks.value = newWebhooks
emit('change')
message.success(`Webhook "${webhook.name}" 已${newEnabled ? '启用' : '禁用'}`)
}
// 删除 Webhook
const deleteWebhook = (webhook: CustomWebhook) => {
const newWebhooks = webhooks.value.filter(w => w.id !== webhook.id)
@@ -442,6 +466,11 @@ const handleCancel = () => {
display: flex;
gap: 4px;
flex-shrink: 0;
align-items: center;
}
.webhook-switch {
margin-right: 8px;
}
.empty-state {