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.
This commit is contained in:
t8y2
2026-05-27 02:52:59 +08:00
parent e6e5309807
commit 2dc462808c
2 changed files with 23 additions and 17 deletions
@@ -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 }) }}
@@ -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 }) }}