From 8b36f35f194547d4e591011d7beab8b9c9b47b0b Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Thu, 8 May 2025 20:45:58 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9C=A8=E8=BF=9E=E6=8E=A5=E8=A1=A8?=
 =?UTF-8?q?=E5=8D=95=E6=B7=BB=E5=8A=A0=E5=88=A0=E9=99=A4=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddConnectionForm.vue      | 29 ++++++++++++++++++-
 1 file changed, 28 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/AddConnectionForm.vue b/packages/frontend/src/components/AddConnectionForm.vue
index 0407fe1..8e23d8c 100644
--- a/packages/frontend/src/components/AddConnectionForm.vue
+++ b/packages/frontend/src/components/AddConnectionForm.vue
@@ -11,7 +11,7 @@ import TagInput from './TagInput.vue';
 import SshKeySelector from './SshKeySelector.vue'; // +++ Import SSH Key Selector +++
 
 // 定义组件发出的事件
-const emit = defineEmits(['close', 'connection-added', 'connection-updated']);
+const emit = defineEmits(['close', 'connection-added', 'connection-updated', 'connection-deleted']);
 
 // 定义 Props
 const props = defineProps<{
@@ -315,6 +315,29 @@ notes: formData.notes, // 添加备注
   }
 };
 
+// 处理删除连接
+const handleDeleteConnection = async () => {
+  if (!isEditMode.value || !props.connectionToEdit) return;
+
+  // 添加一个确认对话框
+  // 使用模板字符串和 t 函数的默认值功能
+  const connectionName = props.connectionToEdit.name || `ID: ${props.connectionToEdit.id}`;
+  if (!confirm(t('connections.prompts.confirmDelete', { name: connectionName }))) {
+      return;
+  }
+
+  formError.value = null;
+  connectionsStore.error = null; // 清除之前的错误
+
+  const success = await connectionsStore.deleteConnection(props.connectionToEdit.id);
+  if (success) {
+    emit('connection-deleted'); // 发出删除成功事件
+    emit('close'); // 删除成功后关闭表单
+  } else {
+    formError.value = t('connections.form.errorDelete', { error: connectionsStore.error || t('errors.unknown', '未知错误') });
+  }
+};
+
 // --- Tag Creation/Deletion Handling ---
 const handleCreateTag = async (tagName: string) => {
     console.log(`[ConnForm] Received create-tag event for: ${tagName}`); // +++ 添加日志 +++
@@ -655,6 +678,10 @@ const testButtonText = computed(() => {
          <!-- Placeholder for alignment when test button is hidden -->
          <div v-else class="flex-1"></div> <!-- This div ensures the main action buttons are pushed to the right when test area is hidden -->
          <div class="flex space-x-3"> <!-- Main Actions -->
+             <button v-if="isEditMode" type="button" @click="handleDeleteConnection" :disabled="isLoading || (formData.type === 'SSH' && testStatus === 'testing')"
+                     class="px-4 py-2 bg-transparent text-red-600 border border-red-500 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
+               {{ t('connections.actions.delete') }}
+             </button>
              <button type="submit" @click="handleSubmit" :disabled="isLoading || (formData.type === 'SSH' && testStatus === 'testing')"
                      class="px-4 py-2 bg-button text-button-text rounded-md shadow-sm hover:bg-button-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary disabled:opacity-50 disabled:cursor-not-allowed transition duration-150 ease-in-out">
                {{ submitButtonText }}