From 14b959fcc2ea157a00bf6e87dde173875703dced Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Tue, 31 Mar 2026 23:04:05 +0800
Subject: [PATCH] feat(proxy): add edit and delete functionality for proxies

- Add new API endpoints for modifying and deleting proxies
- Implement UI components for edit and delete actions
- Update proxy form to handle both create and edit modes
- Add confirmation modal for delete operation
---
 src/api/index.js             |   6 +-
 src/styles/common.css        |  16 ++++
 src/views/InstanceDetail.vue | 146 +++++++++++++++++++++++++++++++++--
 3 files changed, 160 insertions(+), 8 deletions(-)

diff --git a/src/api/index.js b/src/api/index.js
index b63daf4..c316860 100644
--- a/src/api/index.js
+++ b/src/api/index.js
@@ -94,7 +94,11 @@ export const instanceApi = {
     getInstanceProxies: (instanceID) => 
         api.get(`/frpcAct/proxyMgr/list?instanceID=${instanceID}`),
     createProxy: (instanceID, proxyInfo) => 
-        api.post('/frpcAct/proxyMgr/create', { instanceID, proxyInfo })
+        api.post('/frpcAct/proxyMgr/create', { instanceID, proxyInfo }),
+    modifyProxy: (instanceID, proxyInfo) => 
+        api.post('/frpcAct/proxyMgr/modify', { instanceID, proxyInfo }),
+    deleteProxy: (instanceID, proxyName) => 
+        api.post('/frpcAct/proxyMgr/delete', { instanceID, proxyName })
 };
 
 export const logApi = {
diff --git a/src/styles/common.css b/src/styles/common.css
index 5fcc6d5..035b59c 100644
--- a/src/styles/common.css
+++ b/src/styles/common.css
@@ -539,6 +539,12 @@
     transition: color 0.3s;
 }
 
+.proxy-actions-right {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
 .proxy-type {
     display: inline-block;
     padding: 4px 12px;
@@ -607,3 +613,13 @@
     outline: none;
     border-color: var(--primary-color);
 }
+
+.proxy-actions {
+    display: flex;
+    gap: 8px;
+}
+
+.proxy-actions .common-btn {
+    padding: 6px 12px;
+    font-size: 12px;
+}
diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index f3e5f32..6e235fa 100644
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -175,7 +175,23 @@
                     <div v-for="proxy in proxies" :key="proxy.name" class="proxy-item">
                         <div class="proxy-header">
                             <span class="proxy-name">{{ proxy.name }}</span>
-                            <span class="proxy-type">{{ proxy.type }}</span>
+                            <div class="proxy-actions-right">
+                                <span class="proxy-type">{{ proxy.type }}</span>
+                                <div class="proxy-actions">
+                                    <button 
+                                        class="common-btn edit-btn" 
+                                        @click="editProxy(proxy)"
+                                    >
+                                        <i class="fas fa-edit"></i> Edit
+                                    </button>
+                                    <button 
+                                        class="common-btn delete-btn" 
+                                        @click="deleteProxy(proxy)"
+                                    >
+                                        <i class="fas fa-trash"></i> Delete
+                                    </button>
+                                </div>
+                            </div>
                         </div>
                         <div class="proxy-details">
                             <div class="config-item proxy-detail">
@@ -196,8 +212,8 @@
 
             <div v-if="showAddProxyModal" class="modal-overlay" @click="closeAddProxyModal">
                 <div class="modal" @click.stop>
-                    <h3>Add Proxy</h3>
-                    <form @submit.prevent="handleAddProxySubmit" class="form">
+                    <h3>{{ isEditProxy ? 'Edit Proxy' : 'Add Proxy' }}</h3>
+                    <form @submit.prevent="handleProxySubmit" class="form">
                         <div class="form-group">
                             <label>Proxy Name</label>
                             <input 
@@ -246,12 +262,25 @@
                         </div>
                         <div class="form-actions">
                             <button type="button" class="cancel-btn" @click="closeAddProxyModal">Cancel</button>
-                            <button type="submit" class="submit-btn" :disabled="loading">{{ loading ? 'Processing...' : 'Submit' }}</button>
+                            <button type="submit" class="submit-btn" :disabled="loading">{{ loading ? 'Processing...' : (isEditProxy ? 'Save' : 'Submit') }}</button>
                         </div>
                     </form>
                 </div>
             </div>
 
+            <div v-if="showDeleteProxyModal" class="modal-overlay" @click="closeDeleteProxyModal">
+                <div class="modal" @click.stop>
+                    <h3>Delete Proxy</h3>
+                    <p>Are you sure you want to delete proxy <strong>{{ selectedProxyName }}</strong>?</p>
+                    <div class="form-actions">
+                        <button type="button" class="cancel-btn" @click="closeDeleteProxyModal">Cancel</button>
+                        <button type="button" class="submit-btn delete-btn" @click="confirmDeleteProxy" :disabled="loading">
+                            {{ loading ? 'Processing...' : 'Delete' }}
+                        </button>
+                    </div>
+                </div>
+            </div>
+
             <div class="section">
                 <h3>Logs</h3>
                 <div class="logs-container">
@@ -291,6 +320,9 @@ export default {
         const statusInfo = ref({});
         const showEditConfigModal = ref(false);
         const showAddProxyModal = ref(false);
+        const showDeleteProxyModal = ref(false);
+        const isEditProxy = ref(false);
+        const selectedProxyName = ref('');
         const loading = ref(false);
         const userType = ref(getCookie('user-type') || 'visitor');
         const formData = ref({
@@ -484,15 +516,108 @@ export default {
         };
 
         const addProxy = () => {
+            isEditProxy.value = false;
+            formData.value = {
+                name: '',
+                type: '',
+                localIP: '',
+                localPort: '',
+                remotePort: '',
+                auth_method: formData.value.auth_method,
+                serverAddr: formData.value.serverAddr,
+                serverPort: formData.value.serverPort,
+                token: formData.value.token,
+                clientId: formData.value.clientId,
+                clientSecret: formData.value.clientSecret,
+                audience: formData.value.audience,
+                tokenEndpoint: formData.value.tokenEndpoint,
+                bootAtStart: formData.value.bootAtStart,
+                runUser: formData.value.runUser
+            };
             showAddProxyModal.value = true;
         }
 
+        const editProxy = (proxy) => {
+            isEditProxy.value = true;
+            formData.value = {
+                name: proxy.name,
+                type: proxy.type,
+                localIP: proxy.localIP,
+                localPort: parseInt(proxy.localPort),
+                remotePort: parseInt(proxy.remotePort),
+                auth_method: formData.value.auth_method,
+                serverAddr: formData.value.serverAddr,
+                serverPort: formData.value.serverPort,
+                token: formData.value.token,
+                clientId: formData.value.clientId,
+                clientSecret: formData.value.clientSecret,
+                audience: formData.value.audience,
+                tokenEndpoint: formData.value.tokenEndpoint,
+                bootAtStart: formData.value.bootAtStart,
+                runUser: formData.value.runUser
+            };
+            showAddProxyModal.value = true;
+        }
+
+        const deleteProxy = (proxy) => {
+            selectedProxyName.value = proxy.name;
+            showDeleteProxyModal.value = true;
+        }
+
+        const closeDeleteProxyModal = () => {
+            showDeleteProxyModal.value = false;
+            selectedProxyName.value = '';
+        }
+
+        const closeAddProxyModal = () => {
+            showAddProxyModal.value = false;
+            selectedProxyName.value = '';
+        };
+
         const closeEditConfigModal = () => {
             showEditConfigModal.value = false;
         };
 
-        const closeAddProxyModal = () => {
-            showAddProxyModal.value = false;
+        const confirmDeleteProxy = async () => {
+            loading.value = true;
+            try {
+                await instanceApi.deleteProxy(instanceID.value, selectedProxyName.value);
+                showNotification('Proxy deleted successfully', 'success');
+                closeDeleteProxyModal();
+                await loadProxies();
+            } catch (error) {
+                showNotification(error.message || 'Delete proxy failed', 'error');
+            } finally {
+                loading.value = false;
+            }
+        };
+
+        const handleProxySubmit = async () => {
+            loading.value = true;
+            try {
+                const proxyInfo = {
+                    name: formData.value.name,
+                    type: formData.value.type,
+                    localIP: formData.value.localIP,
+                    localPort: formData.value.localPort.toString(),
+                    remotePort: formData.value.remotePort.toString()
+                };
+                
+                if (isEditProxy.value) {
+                    await instanceApi.modifyProxy(instanceID.value, proxyInfo);
+                    showNotification('Proxy updated successfully', 'success');
+                } else {
+                    await instanceApi.createProxy(instanceID.value, proxyInfo);
+                    showNotification('Proxy created successfully', 'success');
+                }
+                
+                closeAddProxyModal();
+                await loadProxies();
+            } catch (error) {
+                showNotification(error.message || (isEditProxy.value ? 'Update proxy failed' : 'Create proxy failed'), 'error');
+            } finally {
+                loading.value = false;
+            }
         };
 
         const handleEditConfiguration = async () => {
@@ -586,15 +711,22 @@ export default {
             userType,
             showEditConfigModal,
             showAddProxyModal,
+            showDeleteProxyModal,
+            isEditProxy,
+            selectedProxyName,
             loading,
             formData,
             goBack,
             editConfig,
             closeEditConfigModal,
             addProxy,
+            editProxy,
+            deleteProxy,
             closeAddProxyModal,
+            closeDeleteProxyModal,
+            confirmDeleteProxy,
             handleEditConfiguration,
-            handleAddProxySubmit,
+            handleProxySubmit,
             handleStatusClick,
             restartInstance,
             deleteInstance