Fix accidental close when dragging out of connection form inputs

frontend/src/components/ConnectionForm.vue

@@ -50,8 +50,24 @@ watch(
   { immediate: true }
 )
 
-const error = ref('')
-const loading = ref(false)
+const error = ref('')
+const loading = ref(false)
+const backdropPressed = ref(false)
+
+function handleBackdropMouseDown() {
+  backdropPressed.value = true
+}
+
+function handleBackdropMouseUp() {
+  if (backdropPressed.value) {
+    emit('close')
+  }
+  backdropPressed.value = false
+}
+
+function handleDialogMouseDown() {
+  backdropPressed.value = false
+}
 
 async function handleSubmit() {
   error.value = ''
@@ -108,13 +124,18 @@ async function handleSubmit() {
 </script>
 
 <template>
-  <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4" @click.self="emit('close')">
-    <div
-      class="w-full max-w-lg bg-slate-800 rounded-xl border border-slate-700 shadow-xl"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="form-title"
-    >
+  <div
+    class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4"
+    @mousedown.self="handleBackdropMouseDown"
+    @mouseup.self="handleBackdropMouseUp"
+  >
+    <div
+      class="w-full max-w-lg bg-slate-800 rounded-xl border border-slate-700 shadow-xl"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="form-title"
+      @mousedown="handleDialogMouseDown"
+    >
       <div class="flex items-center justify-between p-4 border-b border-slate-700">
         <h2 id="form-title" class="text-lg font-semibold text-slate-100">
           {{ isEdit ? '编辑连接' : '新建连接' }}