From d70193c15d7319e8214f058faa7904720cfa721b Mon Sep 17 00:00:00 2001
From: NanamiAdmin <yzt114@yeah.net>
Date: Wed, 25 Mar 2026 10:49:08 +0800
Subject: [PATCH] feat(InstanceDetail): add delete instance button and
 functionality

Implement instance deletion feature with confirmation notification and navigation back to instances list. Also adjust header layout to accommodate the new button.
---
 src/views/InstanceDetail.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/views/InstanceDetail.vue b/src/views/InstanceDetail.vue
index d35c3b4..10ccfbd 100644
--- a/src/views/InstanceDetail.vue
+++ b/src/views/InstanceDetail.vue
@@ -5,6 +5,9 @@
                 <i class="fas fa-arrow-left"></i> Back
             </button>
             <h2>{{ instanceName }} - Details</h2>
+            <button class="common-btn" @click="deleteInstance">
+                <i class="fas fa-trash"></i> Delete
+            </button>
         </div>
 
         <div class="detail-content">
@@ -355,6 +358,16 @@ export default {
             }
         };
 
+        const deleteInstance = async () => {
+            try {
+                await instanceApi.deleteInstance(instanceID.value);
+                showNotification('Instance deleted successfully', 'success');
+                router.push('/instances');
+            } catch (error) {
+                showNotification(error.message || 'Delete instance failed', 'error');
+            }
+        };
+
         const restartInstance = async () => {
             try {
                 await instanceApi.restartInstance(instanceID.value);
@@ -544,7 +557,8 @@ export default {
             handleEditConfiguration,
             handleAddProxySubmit,
             handleStatusClick,
-            restartInstance
+            restartInstance,
+            deleteInstance
         };
     }
 };
@@ -561,6 +575,7 @@ export default {
     display: flex;
     align-items: center;
     gap: 16px;
+    justify-content: space-between;
 }
 
 .detail-content {