feat(desktop-client): adapt title bar and drag region for Windows/Linux

- Add appTitleBarStyle() and appTitleBarOverlay() helpers for cross-platform title bar - Use titleBarOverlay on Windows/Linux so system caption buttons render correctly - Disable minimize button on login window (non-resizable, no need to minimize) - Detect platform at renderer startup and set data-platform on <html> for CSS targeting - DesktopShell: flip drag bar layout — full-width minus caption area on Win/Linux, traffic-light gap on macOS - LoginView: move top-bar to Win/Linux caption area (top: 34px), mirror to left on macOS Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-01 18:02:52 +08:00
parent b7e096ae37
commit 5cd5d6685b
4 changed files with 43 additions and 8 deletions
@@ -33,6 +33,8 @@ function syncWindowMode(authenticated: boolean): void {

 const rendererWindowMode = resolveRendererWindowMode();
 document.documentElement.dataset.windowMode = rendererWindowMode;
+document.documentElement.dataset.platform =
+  navigator.platform.toLowerCase().includes("mac") ? "darwin" : "win32";
 const usesAutomaticWindowMode = rendererWindowMode === "auto";
 const showsSettingsSurface = rendererWindowMode === "settings";
 const showsMainSurface = computed(() =>
@@ -170,11 +170,17 @@ function openSettingsWindow() {
 .window-drag-bar {
  position: fixed;
  top: 0;
+  left: 0;
+  right: 144px;
+  height: 24px;
+  z-index: 1000;
+  -webkit-app-region: drag;
+}
+
+:global(html[data-platform="darwin"]) .window-drag-bar {
  left: 80px;
  right: 0;
  height: 28px;
-  z-index: 1000;
-  -webkit-app-region: drag;
 }

 .app-shell :where(button, a, input, select, textarea, [role="button"], [role="link"]) {
@@ -260,12 +260,17 @@ onBeforeUnmount(() => {

 .top-bar {
  position: absolute;
-  top: 10px;
-  right: 10px;
+  top: 34px;
+  right: 14px;
  z-index: 10;
  -webkit-app-region: no-drag;
 }

+:global(html[data-platform="darwin"]) .top-bar {
+  left: 52px;
+  right: auto;
+}
+
 .menu-trigger {
  width: 28px;
  height: 28px;