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); return api.get(url);
}, },
setSettings: (settings) => 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 = { export const authApi = {

View File

@@ -195,6 +195,7 @@
} }
.cancel-btn, .cancel-btn,
.test-btn,
.submit-btn { .submit-btn {
font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
flex: 1; flex: 1;
@@ -218,6 +219,16 @@
background: var(--surface-hover); 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 { .submit-btn {
background: var(--primary-color); background: var(--primary-color);
color: white; color: white;

View File

@@ -116,6 +116,7 @@
</div> </div>
<div class="form-actions"> <div class="form-actions">
<button @click="showWebhookDialog = false" class="cancel-btn">Cancel</button> <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> <button @click="saveWebhookSettings" class="submit-btn">Save</button>
</div> </div>
</div> </div>
@@ -126,6 +127,7 @@
<script> <script>
import { ref, reactive, onMounted } from 'vue'; import { ref, reactive, onMounted } from 'vue';
import { systemApi } from '../api/index.js'; import { systemApi } from '../api/index.js';
import { showNotification } from '../utils/functions.js';
export default { export default {
name: 'Settings', name: 'Settings',
@@ -211,12 +213,49 @@ export default {
const result = await systemApi.setSettings(payload); const result = await systemApi.setSettings(payload);
if (result.success) { if (result.success) {
showWebhookDialog.value = false; showWebhookDialog.value = false;
alert('WebHook settings saved successfully'); showNotification('WebHook settings saved successfully', 'success');
} else { } else {
alert(result.message || 'Failed to save WebHook settings'); showNotification(result.message || 'Failed to save WebHook settings', 'error');
} }
} catch (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, webhookSettings,
isSaving, isSaving,
showWebhookDialog, showWebhookDialog,
WebhookTestBtn,
saveSettings, saveSettings,
saveWebhookSettings saveWebhookSettings
}; };