refactor(webhook): 添加切换Webhook启用状态功能,优化UI交互
This commit is contained in:
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user