fix(desktop): restore Windows top border

This commit is contained in:
zipg 2026-07-08 22:51:33 +08:00 committed by GitHub
parent 1b13d2176b
commit 08067320f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 32 additions and 2 deletions

View File

@ -31,6 +31,7 @@ import { useTauriEvents } from "@/composables/useTauriEvents";
import { useCloseActionPrompt, type AppCloseAction, type AppCloseRequestOptions } from "@/composables/useCloseActionPrompt";
import { useVisibilityChange } from "@/composables/useVisibilityChange";
import { useWebDavAutoUpload } from "@/composables/useWebDavAutoUpload";
import { shouldDrawDesktopWindowFrame } from "@/composables/useWindowControls";
import "@/i18n";
import { translateBackendError } from "@/i18n/backend-errors";
import * as api from "@/lib/backend/api";
@ -113,6 +114,7 @@ const { checkingUpdates, updateInfo, updateCheckMessage, showUpdateDialog, isDow
const { setupFileDrop } = useFileDrop();
const isDesktop = isTauriRuntime();
const drawDesktopWindowFrame = shouldDrawDesktopWindowFrame(isMacOS(), isDesktop);
const UPDATE_CHECK_INTERVAL_MS = 60 * 60 * 1000;
let updateCheckTimer: ReturnType<typeof setInterval> | undefined;
const needsAuth = ref(!isDesktop);
@ -1719,7 +1721,7 @@ onUnmounted(() => {
<LoginPage v-if="setupRequired || (needsAuth && !authenticated)" :setup-mode="setupRequired" @authenticated="onLoginSuccess" />
<div v-show="!setupRequired && (!needsAuth || authenticated)" class="fixed inset-0 h-screen w-screen overflow-hidden">
<TooltipProvider :delay-duration="300">
<div class="h-screen w-screen max-w-full min-w-[760px] min-h-[600px] flex flex-col bg-background text-foreground overflow-hidden" :style="appUiFontFamilyStyle">
<div class="h-screen w-screen max-w-full min-w-[760px] min-h-[600px] flex flex-col bg-background text-foreground overflow-hidden" :class="{ 'dbx-desktop-window-frame': drawDesktopWindowFrame }" :style="appUiFontFamilyStyle">
<AppToolbar
:is-dark="isDark"
:theme-mode="themeMode"

View File

@ -1,5 +1,5 @@
import { describe, expect, it } from "vitest";
import { shouldReserveMacTrafficLightInset, shouldShowWindowControls } from "@/composables/useWindowControls";
import { shouldDrawDesktopWindowFrame, shouldReserveMacTrafficLightInset, shouldShowWindowControls } from "@/composables/useWindowControls";
describe("window controls", () => {
it("shows custom controls for non-macOS desktop windows", () => {
@ -14,6 +14,12 @@ describe("window controls", () => {
expect(shouldShowWindowControls(false, false)).toBe(false);
});
it("draws an app frame only for self-decorated desktop windows", () => {
expect(shouldDrawDesktopWindowFrame(false, true)).toBe(true);
expect(shouldDrawDesktopWindowFrame(true, true)).toBe(false);
expect(shouldDrawDesktopWindowFrame(false, false)).toBe(false);
});
it("reserves traffic light inset only for non-fullscreen macOS desktop windows", () => {
expect(shouldReserveMacTrafficLightInset(true, false, true)).toBe(true);
expect(shouldReserveMacTrafficLightInset(true, true, true)).toBe(false);

View File

@ -11,6 +11,10 @@ export function shouldShowWindowControls(isMac: boolean, isDesktop = true): bool
return isDesktop && !isMac;
}
export function shouldDrawDesktopWindowFrame(isMac: boolean, isDesktop = true): boolean {
return isDesktop && !isMac;
}
export function useWindowControls() {
const isMaximized = ref(false);
const isFullscreen = ref(false);

View File

@ -119,6 +119,7 @@
--sidebar-accent-foreground: rgb(23 23 23);
--sidebar-border: rgb(229 229 229);
--sidebar-ring: rgb(161 161 161);
--dbx-window-top-border: rgb(0 0 0 / 0.35);
}
.dark {
@ -154,6 +155,7 @@
--sidebar-accent-foreground: rgb(221 221 226);
--sidebar-border: rgb(110 110 114 / 0.28);
--sidebar-ring: rgb(133 134 139);
--dbx-window-top-border: rgb(255 255 255 / 0.18);
}
html.theme-soft {
@ -1314,6 +1316,22 @@ body.dbx-table-reference-dragging * {
}
}
.dbx-desktop-window-frame {
position: relative;
}
.dbx-desktop-window-frame::before {
content: "";
position: absolute;
z-index: 80;
top: 0;
right: 0;
left: 0;
height: 1px;
pointer-events: none;
background: var(--dbx-window-top-border);
}
.dbx-editor-font-family {
font-family: var(--dbx-editor-font-family, var(--font-mono, monospace));
}