feat(settings): add webhook test functionality

- Add test button to webhook settings dialog
- Implement webhook test API endpoint
- Replace alert with notification system
- Style test button to match existing UI
This commit is contained in:
2026-05-05 23:42:42 +08:00
parent a7dd302acb
commit a97cb90c43
3 changed files with 57 additions and 4 deletions

View File

@@ -41,7 +41,9 @@ export const systemApi = {
return api.get(url);
},
setSettings: (settings) =>
api.post('/system/settings/set', settings)
api.post('/system/settings/set', settings),
testWebhook: (webhookConfig) =>
api.post('/system/webhook/test', webhookConfig)
};
export const authApi = {

View File

@@ -195,6 +195,7 @@
}
.cancel-btn,
.test-btn,
.submit-btn {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
flex: 1;
@@ -218,6 +219,16 @@
background: var(--surface-hover);
}
.test-btn {
background: var(--surface-hover);
color: var(--text-color);
border: 3px solid var(--border-color);
}
.test-btn:hover {
background: var(--surface-hover-hover);
}
.submit-btn {
background: var(--primary-color);
color: white;

View File

@@ -116,6 +116,7 @@
</div>
<div class="form-actions">
<button @click="showWebhookDialog = false" class="cancel-btn">Cancel</button>
<button @click="WebhookTestBtn" class="test-btn">Test</button>
<button @click="saveWebhookSettings" class="submit-btn">Save</button>
</div>
</div>
@@ -126,6 +127,7 @@
<script>
import { ref, reactive, onMounted } from 'vue';
import { systemApi } from '../api/index.js';
import { showNotification } from '../utils/functions.js';
export default {
name: 'Settings',
@@ -211,12 +213,49 @@ export default {
const result = await systemApi.setSettings(payload);
if (result.success) {
showWebhookDialog.value = false;
alert('WebHook settings saved successfully');
showNotification('WebHook settings saved successfully', 'success');
} else {
alert(result.message || 'Failed to save WebHook settings');
showNotification(result.message || 'Failed to save WebHook settings', 'error');
}
} catch (error) {
alert('Failed to save WebHook settings');
showNotification('Failed to save WebHook settings', 'error');
}
};
const WebhookTestBtn = async () => {
try {
let testBody = webhookSettings.body || '';
testBody = testBody.replace(/\{\{\s*exceptionType\s*\}\}/g, 'Test Process Dead');
testBody = testBody.replace(/\{\{\s*serviceName\s*\}\}/g, 'superfrpc_test_test');
testBody = testBody.replace(/\{\{\s*exceptionMsg\s*\}\}/g, 'WebHook Test');
const headers = {};
if (webhookSettings.headers) {
webhookSettings.headers.split('\n').forEach(line => {
const colonIndex = line.indexOf(':');
if (colonIndex > 0) {
const key = line.substring(0, colonIndex).trim();
const value = line.substring(colonIndex + 1).trim();
if (key) {
headers[key] = value;
}
}
});
}
const response = await fetch(webhookSettings.url, {
method: webhookSettings.method,
headers: headers,
body: webhookSettings.method !== 'GET' ? testBody : undefined
});
if (response.ok) {
showNotification('WebHook test successful', 'success');
} else {
showNotification(`WebHook test failed: HTTP ${response.status}`, 'error');
}
} catch (error) {
showNotification(`WebHook test failed: ${error.message}`, 'error');
}
};
@@ -229,6 +268,7 @@ export default {
webhookSettings,
isSaving,
showWebhookDialog,
WebhookTestBtn,
saveSettings,
saveWebhookSettings
};