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 class="webhook-url">{{ webhook.url }}</div>
</div> </div>
<div class="webhook-actions"> <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]"> <a-button type="text" size="small" @click="testWebhook(webhook)" :loading="testingWebhooks[webhook.id]">
<template #icon> <template #icon>
<PlayCircleOutlined /> <PlayCircleOutlined />
@@ -163,7 +171,9 @@ import {
EditOutlined, EditOutlined,
DeleteOutlined, DeleteOutlined,
PlayCircleOutlined, PlayCircleOutlined,
ApiOutlined ApiOutlined,
CheckCircleOutlined,
StopOutlined
} from '@ant-design/icons-vue' } from '@ant-design/icons-vue'
import type { CustomWebhook } from '@/types/settings' import type { CustomWebhook } from '@/types/settings'
import { WEBHOOK_TEMPLATES, TEMPLATE_VARIABLES } from '@/utils/webhookTemplates' import { WEBHOOK_TEMPLATES, TEMPLATE_VARIABLES } from '@/utils/webhookTemplates'
@@ -233,6 +243,20 @@ const editWebhook = (webhook: CustomWebhook) => {
modalVisible.value = true 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 // 删除 Webhook
const deleteWebhook = (webhook: CustomWebhook) => { const deleteWebhook = (webhook: CustomWebhook) => {
const newWebhooks = webhooks.value.filter(w => w.id !== webhook.id) const newWebhooks = webhooks.value.filter(w => w.id !== webhook.id)
@@ -442,6 +466,11 @@ const handleCancel = () => {
display: flex; display: flex;
gap: 4px; gap: 4px;
flex-shrink: 0; flex-shrink: 0;
align-items: center;
}
.webhook-switch {
margin-right: 8px;
} }
.empty-state { .empty-state {