From 2dc462808c243dc3a8effd683890f9366d58b71b Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Wed, 27 May 2026 02:52:59 +0800
Subject: [PATCH] fix: prevent compare dialogs from closing on outside click

Add @interact-outside.prevent to schema diff and data compare dialogs
to avoid accidental dismissal. Move compare action buttons to footer,
matching the SQL file execution dialog layout.
---
 .../src/components/diff/DataCompareDialog.vue | 23 +++++++++++--------
 .../src/components/diff/SchemaDiffDialog.vue  | 17 ++++++++------
 2 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/apps/desktop/src/components/diff/DataCompareDialog.vue b/apps/desktop/src/components/diff/DataCompareDialog.vue
index 757c31cd70..31c2410f1c 100644
--- a/apps/desktop/src/components/diff/DataCompareDialog.vue
+++ b/apps/desktop/src/components/diff/DataCompareDialog.vue
@@ -689,7 +689,7 @@ watch(
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent class="sm:max-w-4xl max-h-[85vh] flex flex-col overflow-hidden">
+    <DialogContent class="sm:max-w-4xl max-h-[85vh] flex flex-col overflow-hidden" @interact-outside.prevent>
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <GitCompareArrows class="w-4 h-4" />
@@ -903,15 +903,6 @@ watch(
           </Select>
         </div>
 
-        <div class="flex items-center gap-3">
-          <Button size="sm" :disabled="!canCompare || comparing" @click="startCompare">
-            <Loader2 v-if="comparing" class="w-3.5 h-3.5 animate-spin mr-1" />
-            <GitCompareArrows v-else class="w-3.5 h-3.5 mr-1" />
-            {{ t("dataCompare.compare") }}
-          </Button>
-          <span v-if="compareProgressLabel" class="text-xs text-muted-foreground">{{ compareProgressLabel }}</span>
-        </div>
-
         <div v-if="hasResults" class="space-y-3">
           <div class="rounded-lg border p-3 text-sm">
             {{ summary }}
@@ -999,6 +990,18 @@ watch(
         </div>
       </div>
 
+      <DialogFooter v-if="!(hasResults && syncSql.trim())">
+        <Button variant="outline" @click="open = false">{{ t("common.close") }}</Button>
+        <span v-if="compareProgressLabel" class="text-xs text-muted-foreground self-center">{{
+          compareProgressLabel
+        }}</span>
+        <Button size="sm" :disabled="!canCompare || comparing" @click="startCompare">
+          <Loader2 v-if="comparing" class="w-3.5 h-3.5 animate-spin mr-1" />
+          <GitCompareArrows v-else class="w-3.5 h-3.5 mr-1" />
+          {{ t("dataCompare.compare") }}
+        </Button>
+      </DialogFooter>
+
       <DialogFooter v-if="hasResults && syncSql.trim()" class="flex items-center gap-2">
         <span v-if="executing" class="text-xs text-muted-foreground mr-auto">
           {{ t("diff.syncProgress", { current: executedCount, total: executeTotal }) }}
diff --git a/apps/desktop/src/components/diff/SchemaDiffDialog.vue b/apps/desktop/src/components/diff/SchemaDiffDialog.vue
index 560a3f15a0..d44f2ea8c8 100644
--- a/apps/desktop/src/components/diff/SchemaDiffDialog.vue
+++ b/apps/desktop/src/components/diff/SchemaDiffDialog.vue
@@ -372,7 +372,7 @@ watch(
 
 <template>
   <Dialog v-model:open="open">
-    <DialogContent class="sm:max-w-2xl max-h-[80vh] flex flex-col overflow-hidden">
+    <DialogContent class="sm:max-w-2xl max-h-[80vh] flex flex-col overflow-hidden" @interact-outside.prevent>
       <DialogHeader>
         <DialogTitle class="flex items-center gap-2">
           <GitCompareArrows class="w-4 h-4" />
@@ -492,12 +492,6 @@ watch(
           </div>
         </div>
 
-        <Button v-if="step === 'select'" size="sm" :disabled="!canCompare || loadingMeta" @click="startCompare">
-          <Loader2 v-if="loadingMeta" class="w-3.5 h-3.5 mr-1 animate-spin" />
-          <GitCompareArrows v-else class="w-3.5 h-3.5 mr-1" />
-          {{ loadingMeta ? t("common.loading") : t("diff.compare") }}
-        </Button>
-
         <!-- Comparing -->
         <div v-if="step === 'comparing'" class="flex items-center justify-center py-8 text-sm text-muted-foreground">
           <Loader2 class="w-4 h-4 animate-spin mr-2" />
@@ -643,6 +637,15 @@ watch(
         </template>
       </div>
 
+      <DialogFooter v-if="!(step === 'result' && diffs.length > 0)" class="flex items-center gap-2">
+        <Button variant="outline" @click="open = false">{{ t("common.close") }}</Button>
+        <Button v-if="step === 'select'" size="sm" :disabled="!canCompare || loadingMeta" @click="startCompare">
+          <Loader2 v-if="loadingMeta" class="w-3.5 h-3.5 mr-1 animate-spin" />
+          <GitCompareArrows v-else class="w-3.5 h-3.5 mr-1" />
+          {{ loadingMeta ? t("common.loading") : t("diff.compare") }}
+        </Button>
+      </DialogFooter>
+
       <DialogFooter v-if="step === 'result' && diffs.length > 0" class="flex items-center gap-2">
         <span v-if="executing" class="text-xs text-muted-foreground mr-auto">
           {{ t("diff.syncProgress", { current: executedCount, total: executeTotal }) }}