From a97cb90c4334ccf10413a928ee28d5877daecd6c Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Tue, 5 May 2026 23:42:42 +0800
Subject: [PATCH] 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
---
 src/api/index.js       |  4 +++-
 src/styles/common.css  | 11 ++++++++++
 src/views/Settings.vue | 46 +++++++++++++++++++++++++++++++++++++++---
 3 files changed, 57 insertions(+), 4 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index 505bc1f..1d07dcb 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -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 = {
diff --git a/src/styles/common.css b/src/styles/common.css
index 15e76e2..88e6a2e 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -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;
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index 5d95dad..f6cdd38 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -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
         };