xiaoxue_admin
/
dbx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(tabs): contain unsaved changes dialog content

This commit is contained in:
t8y2 2026-07-21 16:38:02 +08:00
parent 8f98e28305
commit 4b95a874e3
2 changed files with 25 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/desktop/src/components/layout/AppTabBar.vue
View File

@ -915,15 +915,16 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
}
"
>
<DialogContent class="sm:max-w-md">
<DialogContent class="min-w-0 sm:max-w-md">
<DialogHeader>
<DialogTitle class="flex items-center gap-2">
<AlertTriangle class="h-5 w-5 text-amber-500" />
{{ t("editor.unsavedChangesTitle") }}
</DialogTitle>
</DialogHeader>
<div class="space-y-2">
<p class="text-sm text-muted-foreground">{{ closeConfirmMessage }}</p>
<!-- Grid items use min-content sizing by default; shrink and wrap long file paths before they can displace the footer actions. -->
<div class="min-w-0 space-y-2">
<p class="wrap-anywhere text-sm text-muted-foreground">{{ closeConfirmMessage }}</p>
<Popover v-if="showCloseConfirmBulkActions" :open="closeConfirmListOpen" @update:open="closeConfirmListOpen = $event">
<PopoverTrigger as-child>
<button
@ -948,7 +949,7 @@ function onOverflowItemKeydown(event: KeyboardEvent, tabId: string, kind: "regul
</PopoverContent>
</Popover>
</div>
<DialogFooter>
<DialogFooter class="min-w-0 sm:flex-wrap">
<Button variant="outline" @click="handleCancelClose">{{ t("common.cancel") }}</Button>
<Button v-if="showCloseConfirmBulkActions" variant="secondary" @click="handleDiscardAllAndClose">{{ t("editor.discardAllChanges") }}</Button>
<Button v-if="showCloseConfirmBulkActions" @click="handleSaveAllAndClose">{{ t("editor.saveAllChanges") }}</Button>

20
apps/desktop/src/components/layout/__tests__/AppTabBar.spec.ts vendored Normal file
View File

@ -0,0 +1,20 @@
import { readFileSync } from "node:fs";
import { describe, expect, it } from "vitest";
const tabBarSource = readFileSync(new URL("../AppTabBar.vue", import.meta.url), "utf8");
describe("AppTabBar close confirmation layout", () => {
it("allows long unbroken tab titles to shrink and wrap inside the dialog", () => {
expect(tabBarSource).toMatch(/<DialogContent class="[^"]*\bmin-w-0\b[^"]*\bsm:max-w-md\b/);
expect(tabBarSource).toMatch(/<div class="[^"]*\bmin-w-0\b[^"]*\bspace-y-2\b">\s*<p class="[^"]*\bwrap-anywhere\b/);
});
it("keeps all single and bulk close actions while allowing the footer to wrap", () => {
expect(tabBarSource).toMatch(/<DialogFooter class="[^"]*\bmin-w-0\b[^"]*\bsm:flex-wrap\b">/);
expect(tabBarSource).toContain('v-if="showCloseConfirmBulkActions" variant="secondary" @click="handleDiscardAllAndClose"');
expect(tabBarSource).toContain('v-if="showCloseConfirmBulkActions" @click="handleSaveAllAndClose"');
expect(tabBarSource).toContain('@click="handleDiscardAndClose"');
expect(tabBarSource).toContain('@click="handleSaveAndClose"');
expect(tabBarSource).toContain('@click="handleCancelClose"');
});
});