🐛 fix: enhance the multi-display window opening experience (#8176)

Wxh16144 · web-flow · commit 7a638f7c4d0e · 2025-06-17T10:23:10.000+08:00
diff --git a/apps/desktop/src/main/appBrowsers.ts b/apps/desktop/src/main/appBrowsers.ts
@@ -26,6 +26,7 @@ export const appBrowsers = {
     identifier: 'devtools',
     maximizable: false,
     minWidth: 400,
+    parentIdentifier: 'chat',
     path: '/desktop/devtools',
     titleBarStyle: 'hiddenInset',
     vibrancy: 'under-window',
@@ -37,6 +38,7 @@ export const appBrowsers = {
     identifier: 'settings',
     keepAlive: true,
     minWidth: 600,
+    parentIdentifier: 'chat',
     path: '/settings',
     titleBarStyle: 'hidden',
     vibrancy: 'under-window',
diff --git a/apps/desktop/src/main/core/Browser.ts b/apps/desktop/src/main/core/Browser.ts
@@ -1,5 +1,11 @@
 import { MainBroadcastEventKey, MainBroadcastParams } from '@lobechat/electron-client-ipc';
-import { BrowserWindow, BrowserWindowConstructorOptions, ipcMain, nativeTheme } from 'electron';
+import {
+  BrowserWindow,
+  BrowserWindowConstructorOptions,
+  ipcMain,
+  nativeTheme,
+  screen,
+} from 'electron';
 import os from 'node:os';
 import { join } from 'node:path';
 
@@ -19,6 +25,7 @@ export interface BrowserWindowOpts extends BrowserWindowConstructorOptions {
    */
   identifier: string;
   keepAlive?: boolean;
+  parentIdentifier?: string;
   path: string;
   showOnInit?: boolean;
   title?: string;
@@ -145,9 +152,40 @@ export default class Browser {
 
   show() {
     logger.debug(`Showing window: ${this.identifier}`);
+    this.determineWindowPosition();
     this.browserWindow.show();
   }
 
+  private determineWindowPosition() {
+    const { parentIdentifier } = this.options;
+
+    if (parentIdentifier) {
+      // todo: fix ts type
+      const parentWin = this.app.browserManager.retrieveByIdentifier(parentIdentifier as any);
+      if (parentWin) {
+        logger.debug(`[${this.identifier}] Found parent window: ${parentIdentifier}`);
+
+        const display = screen.getDisplayNearestPoint(parentWin.browserWindow.getContentBounds());
+        if (display) {
+          const {
+            workArea: { x, y, width: displayWidth, height: displayHeight },
+          } = display;
+
+          const { width, height } = this._browserWindow.getContentBounds();
+          logger.debug(
+            `[${this.identifier}] Display bounds: x=${x}, y=${y}, width=${displayWidth}, height=${displayHeight}`,
+          );
+
+          // Calculate new position
+          const newX = Math.floor(Math.max(x + (displayWidth - width) / 2, x));
+          const newY = Math.floor(Math.max(y + (displayHeight - height) / 2, y));
+          logger.debug(`[${this.identifier}] Calculated position: x=${newX}, y=${newY}`);
+          this._browserWindow.setPosition(newX, newY, false);
+        }
+      }
+    }
+  }
+
   hide() {
     logger.debug(`Hiding window: ${this.identifier}`);
     this.browserWindow.hide();
