@lobehub/chat 1.103.1 → 1.104.0

package/apps/desktop/src/main/core/{Browser.ts → browser/Browser.ts}

@@ -6,13 +6,21 @@ import {
   nativeTheme,
   screen,
 } from 'electron';
-import os from 'node:os';
 import { join } from 'node:path';
 
+import { buildDir, preloadDir, resourcesDir } from '@/const/dir';
+import { isDev, isWindows } from '@/const/env';
+import {
+  BACKGROUND_DARK,
+  BACKGROUND_LIGHT,
+  SYMBOL_COLOR_DARK,
+  SYMBOL_COLOR_LIGHT,
+  THEME_CHANGE_DELAY,
+  TITLE_BAR_HEIGHT,
+} from '@/const/theme';
 import { createLogger } from '@/utils/logger';
 
-import { preloadDir, resourcesDir } from '../const/dir';
-import type { App } from './App';
+import type { App } from '../App';
 
 // Create logger
 const logger = createLogger('core:Browser');
@@ -20,9 +28,6 @@ const logger = createLogger('core:Browser');
 export interface BrowserWindowOpts extends BrowserWindowConstructorOptions {
   devTools?: boolean;
   height?: number;
-  /**
-   * URL
-   */
   identifier: string;
   keepAlive?: boolean;
   parentIdentifier?: string;
@@ -34,38 +39,18 @@ export interface BrowserWindowOpts extends BrowserWindowConstructorOptions {
 
 export default class Browser {
   private app: App;
-
-  /**
-   * Internal electron window
-   */
   private _browserWindow?: BrowserWindow;
-
+  private themeListenerSetup = false;
   private stopInterceptHandler;
-  /**
-   * Identifier
-   */
   identifier: string;
-
-  /**
-   * Options at creation
-   */
   options: BrowserWindowOpts;
-
-  /**
-   * Key for storing window state in storeManager
-   */
   private readonly windowStateKey: string;
 
-  /**
-   * Method to expose window externally
-   */
   get browserWindow() {
     return this.retrieveOrInitialize();
   }
-
   get webContents() {
     if (this._browserWindow.isDestroyed()) return null;
-
     return this._browserWindow.webContents;
   }
 
@@ -86,6 +71,101 @@ export default class Browser {
     this.retrieveOrInitialize();
   }
 
+  /**
+   * Get platform-specific theme configuration for window creation
+   */
+  private getPlatformThemeConfig(isDarkMode?: boolean): Record<string, any> {
+    const darkMode = isDarkMode ?? nativeTheme.shouldUseDarkColors;
+
+    if (isWindows) {
+      return this.getWindowsThemeConfig(darkMode);
+    }
+
+    return {};
+  }
+
+  /**
+   * Get Windows-specific theme configuration
+   */
+  private getWindowsThemeConfig(isDarkMode: boolean) {
+    return {
+      backgroundColor: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
+      icon: isDev ? join(buildDir, 'icon-dev.ico') : undefined,
+      titleBarOverlay: {
+        color: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT,
+        height: TITLE_BAR_HEIGHT,
+        symbolColor: isDarkMode ? SYMBOL_COLOR_DARK : SYMBOL_COLOR_LIGHT,
+      },
+      titleBarStyle: 'hidden' as const,
+    };
+  }
+
+  private setupThemeListener(): void {
+    if (this.themeListenerSetup) return;
+
+    nativeTheme.on('updated', this.handleThemeChange);
+    this.themeListenerSetup = true;
+  }
+
+  private handleThemeChange = (): void => {
+    logger.debug(`[${this.identifier}] System theme changed, reapplying visual effects.`);
+    setTimeout(() => {
+      this.applyVisualEffects();
+    }, THEME_CHANGE_DELAY);
+  };
+
+  /**
+   * Handle application theme mode change (called from BrowserManager)
+   */
+  handleAppThemeChange = (): void => {
+    logger.debug(`[${this.identifier}] App theme mode changed, reapplying visual effects.`);
+    setTimeout(() => {
+      this.applyVisualEffects();
+    }, THEME_CHANGE_DELAY);
+  };
+
+  private applyVisualEffects(): void {
+    if (!this._browserWindow || this._browserWindow.isDestroyed()) return;
+
+    logger.debug(`[${this.identifier}] Applying visual effects for platform`);
+    const isDarkMode = this.isDarkMode;
+
+    try {
+      if (isWindows) {
+        this.applyWindowsVisualEffects(isDarkMode);
+      }
+
+      logger.debug(
+        `[${this.identifier}] Visual effects applied successfully (dark mode: ${isDarkMode})`,
+      );
+    } catch (error) {
+      logger.error(`[${this.identifier}] Failed to apply visual effects:`, error);
+    }
+  }
+
+  private applyWindowsVisualEffects(isDarkMode: boolean): void {
+    const config = this.getWindowsThemeConfig(isDarkMode);
+
+    this._browserWindow.setBackgroundColor(config.backgroundColor);
+    this._browserWindow.setTitleBarOverlay(config.titleBarOverlay);
+  }
+
+  private cleanupThemeListener(): void {
+    if (this.themeListenerSetup) {
+      // Note: nativeTheme listeners are global, consider using a centralized theme manager
+      nativeTheme.off('updated', this.handleThemeChange);
+      // for multiple windows to avoid duplicate listeners
+      this.themeListenerSetup = false;
+    }
+  }
+
+  private get isDarkMode() {
+    const themeMode = this.app.storeManager.get('themeMode');
+    if (themeMode === 'auto') return nativeTheme.shouldUseDarkColors;
+
+    return themeMode === 'dark';
+  }
+
   loadUrl = async (path: string) => {
     const initUrl = this.app.nextServerUrl + path;
 
@@ -203,6 +283,7 @@ export default class Browser {
   destroy() {
     logger.debug(`Destroying window instance: ${this.identifier}`);
     this.stopInterceptHandler?.();
+    this.cleanupThemeListener();
     this._browserWindow = undefined;
   }
 
@@ -228,45 +309,37 @@ export default class Browser {
       `[${this.identifier}] Saved window state (only size used): ${JSON.stringify(savedState)}`,
     );
 
-    const { isWindows11, isWindows } = this.getWindowsVersion();
     const isDarkMode = nativeTheme.shouldUseDarkColors;
 
     const browserWindow = new BrowserWindow({
       ...res,
-      ...(isWindows
-        ? {
-            titleBarStyle: 'hidden',
-          }
-        : {}),
-      ...(isWindows11
-        ? {
-            backgroundMaterial: isDarkMode ? 'mica' : 'acrylic',
-            vibrancy: 'under-window',
-            visualEffectState: 'active',
-          }
-        : {}),
       autoHideMenuBar: true,
       backgroundColor: '#00000000',
+      darkTheme: isDarkMode,
       frame: false,
-
       height: savedState?.height || height,
-      // Always create hidden first
       show: false,
       title,
-
+      vibrancy: 'sidebar',
+      visualEffectState: 'active',
       webPreferences: {
-        // Context isolation environment
-        // https://www.electronjs.org/docs/tutorial/context-isolation
+        backgroundThrottling: false,
         contextIsolation: true,
         preload: join(preloadDir, 'index.js'),
       },
       width: savedState?.width || width,
+      ...this.getPlatformThemeConfig(isDarkMode),
     });
 
     this._browserWindow = browserWindow;
     logger.debug(`[${this.identifier}] BrowserWindow instance created.`);
 
-    if (isWindows11) this.applyVisualEffects();
+    // Initialize theme listener for this window to handle theme changes
+    this.setupThemeListener();
+    logger.debug(`[${this.identifier}] Theme listener setup and applying initial visual effects.`);
+
+    // Apply initial visual effects
+    this.applyVisualEffects();
 
     logger.debug(`[${this.identifier}] Setting up nextInterceptor.`);
     this.stopInterceptHandler = this.app.nextInterceptor({
@@ -320,8 +393,9 @@ export default class Browser {
         } catch (error) {
           logger.error(`[${this.identifier}] Failed to save window state on quit:`, error);
         }
-        // Need to clean up intercept handler
+        // Need to clean up intercept handler and theme manager
         this.stopInterceptHandler?.();
+        this.cleanupThemeListener();
         return;
       }
 
@@ -355,8 +429,9 @@ export default class Browser {
         } catch (error) {
           logger.error(`[${this.identifier}] Failed to save window state on close:`, error);
         }
-        // Need to clean up intercept handler
+        // Need to clean up intercept handler and theme manager
         this.stopInterceptHandler?.();
+        this.cleanupThemeListener();
       }
     });
 
@@ -387,16 +462,6 @@ export default class Browser {
     this._browserWindow.webContents.send(channel, data);
   };
 
-  applyVisualEffects() {
-    // Windows 11 can use this new API
-    if (this._browserWindow) {
-      logger.debug(`[${this.identifier}] Setting window background material for Windows 11`);
-      const isDarkMode = nativeTheme.shouldUseDarkColors;
-      this._browserWindow?.setBackgroundMaterial(isDarkMode ? 'mica' : 'acrylic');
-      this._browserWindow?.setVibrancy('under-window');
-    }
-  }
-
   toggleVisible() {
     logger.debug(`Toggling visibility for window: ${this.identifier}`);
     if (this._browserWindow.isVisible() && this._browserWindow.isFocused()) {
@@ -407,35 +472,11 @@ export default class Browser {
     }
   }
 
-  getWindowsVersion() {
-    if (process.platform !== 'win32') {
-      return {
-        isWindows: false,
-        isWindows10: false,
-        isWindows11: false,
-        version: null,
-      };
-    }
-
-    // 获取操作系统版本（如 "10.0.22621"）
-    const release = os.release();
-    const parts = release.split('.');
-
-    // 主版本和次版本
-    const majorVersion = parseInt(parts[0], 10);
-    const minorVersion = parseInt(parts[1], 10);
-
-    // 构建号是第三部分
-    const buildNumber = parseInt(parts[2], 10);
-
-    // Windows 11 的构建号从 22000 开始
-    const isWindows11 = majorVersion === 10 && minorVersion === 0 && buildNumber >= 22_000;
-
-    return {
-      buildNumber,
-      isWindows: true,
-      isWindows11,
-      version: release,
-    };
+  /**
+   * Manually reapply visual effects (useful for fixing lost effects after window state changes)
+   */
+  reapplyVisualEffects(): void {
+    logger.debug(`[${this.identifier}] Manually reapplying visual effects via Browser.`);
+    this.applyVisualEffects();
   }
 }

package/apps/desktop/src/main/core/{BrowserManager.ts → browser/BrowserManager.ts}

@@ -3,15 +3,15 @@ import { WebContents } from 'electron';
 
 import { createLogger } from '@/utils/logger';
 
-import { AppBrowsersIdentifiers, appBrowsers } from '../appBrowsers';
-import type { App } from './App';
+import { AppBrowsersIdentifiers, appBrowsers } from '../../appBrowsers';
+import type { App } from '../App';
 import type { BrowserWindowOpts } from './Browser';
 import Browser from './Browser';
 
 // Create logger
 const logger = createLogger('core:BrowserManager');
 
-export default class BrowserManager {
+export class BrowserManager {
   app: App;
 
   browsers: Map<AppBrowsersIdentifiers, Browser> = new Map();
@@ -194,4 +194,14 @@ export default class BrowserManager {
   getIdentifierByWebContents(webContents: WebContents): AppBrowsersIdentifiers | null {
     return this.webContentsMap.get(webContents) || null;
   }
+
+  /**
+   * Handle application theme mode changes and reapply visual effects to all windows
+   */
+  handleAppThemeChange(): void {
+    logger.debug('Handling app theme change for all browser windows');
+    this.browsers.forEach((browser) => {
+      browser.handleAppThemeChange();
+    });
+  }
 }

package/apps/desktop/src/main/core/{StaticFileServerManager.ts → infrastructure/StaticFileServerManager.ts}

@@ -5,7 +5,7 @@ import { LOCAL_STORAGE_URL_PREFIX } from '@/const/dir';
 import FileService from '@/services/fileSrv';
 import { createLogger } from '@/utils/logger';
 
-import type { App } from './App';
+import type { App } from '../App';
 
 const logger = createLogger('core:StaticFileServerManager');
 
@@ -54,9 +54,12 @@ export class StaticFileServerManager {
     try {
       // 使用 get-port-please 获取可用端口
       this.serverPort = await getPort({
-        port: 33250, // 首选端口
-        ports: [33251, 33252, 33253, 33254, 33255], // 备用端口
+        // 备用端口
         host: '127.0.0.1',
+
+        port: 33_250,
+        // 首选端口
+        ports: [33_251, 33_252, 33_253, 33_254, 33_255],
       });
 
       logger.debug(`Found available port: ${this.serverPort}`);
@@ -64,7 +67,7 @@ export class StaticFileServerManager {
       return new Promise((resolve, reject) => {
         const server = createServer(async (req, res) => {
           // 设置请求超时
-          req.setTimeout(30000, () => {
+          req.setTimeout(30_000, () => {
             logger.warn('Request timeout, closing connection');
             if (!res.destroyed && !res.headersSent) {
               res.writeHead(408, { 'Content-Type': 'text/plain' });
@@ -155,10 +158,13 @@ export class StaticFileServerManager {
 
       // 设置响应头
       res.writeHead(200, {
-        'Content-Type': fileResult.mimeType,
-        'Cache-Control': 'public, max-age=31536000', // 缓存一年
-        'Access-Control-Allow-Origin': 'http://localhost:*', // 允许 localhost 的任意端口
+        // 缓存一年
+        'Access-Control-Allow-Origin': 'http://localhost:*',
+
+        'Cache-Control': 'public, max-age=31536000',
+        // 允许 localhost 的任意端口
         'Content-Length': Buffer.byteLength(fileResult.content),
+        'Content-Type': fileResult.mimeType,
       });
 
       // 发送文件内容

package/apps/desktop/src/main/core/{StoreManager.ts → infrastructure/StoreManager.ts}

@@ -5,7 +5,7 @@ import { ElectronMainStore, StoreKey } from '@/types/store';
 import { makeSureDirExist } from '@/utils/file-system';
 import { createLogger } from '@/utils/logger';
 
-import { App } from './App';
+import { App } from '../App';
 
 // Create logger
 const logger = createLogger('core:StoreManager');

package/apps/desktop/src/main/core/{UpdaterManager.ts → infrastructure/UpdaterManager.ts}

@@ -5,7 +5,7 @@ import { isDev } from '@/const/env';
 import { UPDATE_CHANNEL as channel, updaterConfig } from '@/modules/updater/configs';
 import { createLogger } from '@/utils/logger';
 
-import type { App as AppCore } from './App';
+import type { App as AppCore } from '../App';
 
 // Create logger
 const logger = createLogger('core:UpdaterManager');

package/apps/desktop/src/main/core/{MenuManager.ts → ui/MenuManager.ts}

@@ -3,12 +3,12 @@ import { Menu } from 'electron';
 import { IMenuPlatform, MenuOptions, createMenuImpl } from '@/menus';
 import { createLogger } from '@/utils/logger';
 
-import type { App } from './App';
+import type { App } from '../App';
 
 // Create logger
 const logger = createLogger('core:MenuManager');
 
-export default class MenuManager {
+export class MenuManager {
   app: App;
   private platformImpl: IMenuPlatform;
 

package/apps/desktop/src/main/core/{ShortcutManager.ts → ui/ShortcutManager.ts}

@@ -3,11 +3,22 @@ import { globalShortcut } from 'electron';
 import { DEFAULT_SHORTCUTS_CONFIG } from '@/shortcuts';
 import { createLogger } from '@/utils/logger';
 
-import type { App } from './App';
+import type { App } from '../App';
 
 // Create logger
 const logger = createLogger('core:ShortcutManager');
 
+export interface ShortcutUpdateResult {
+  errorType?:
+    | 'INVALID_ID'
+    | 'INVALID_FORMAT'
+    | 'NO_MODIFIER'
+    | 'CONFLICT'
+    | 'SYSTEM_OCCUPIED'
+    | 'UNKNOWN';
+  success: boolean;
+}
+
 export class ShortcutManager {
   private app: App;
   private shortcuts: Map<string, () => void> = new Map();
@@ -40,18 +51,73 @@ export class ShortcutManager {
   /**
    * Update a single shortcut configuration
    */
-  updateShortcutConfig(id: string, accelerator: string): boolean {
+  updateShortcutConfig(id: string, accelerator: string): ShortcutUpdateResult {
     try {
       logger.debug(`Updating shortcut ${id} to ${accelerator}`);
-      // Update configuration
-      this.shortcutsConfig[id] = accelerator;
+
+      // 1. 检查 ID 是否有效
+      if (!DEFAULT_SHORTCUTS_CONFIG[id]) {
+        logger.error(`Invalid shortcut ID: ${id}`);
+        return { errorType: 'INVALID_ID', success: false };
+      }
+
+      // 2. 基本格式校验
+      if (!accelerator || typeof accelerator !== 'string' || accelerator.trim() === '') {
+        logger.error(`Invalid accelerator format: ${accelerator}`);
+        return { errorType: 'INVALID_FORMAT', success: false };
+      }
+
+      const cleanAccelerator = accelerator.trim().toLowerCase();
+
+      // 3. 检查是否包含 + 号（修饰键格式）
+      if (!cleanAccelerator.includes('+')) {
+        logger.error(
+          `Invalid accelerator format: ${cleanAccelerator}. Must contain modifier keys like 'CommandOrControl+E'`,
+        );
+        return { errorType: 'INVALID_FORMAT', success: false };
+      }
+
+      // 4. 检查是否有基本的修饰键
+      const hasModifier = ['CommandOrControl', 'Command', 'Ctrl', 'Alt', 'Shift'].some((modifier) =>
+        cleanAccelerator.includes(modifier.toLowerCase()),
+      );
+
+      if (!hasModifier) {
+        logger.error(`Invalid accelerator format: ${cleanAccelerator}. Must contain modifier keys`);
+        return { errorType: 'NO_MODIFIER', success: false };
+      }
+
+      // 5. 检查冲突
+      for (const [existingId, existingAccelerator] of Object.entries(this.shortcutsConfig)) {
+        if (
+          existingId !== id &&
+          typeof existingAccelerator === 'string' &&
+          existingAccelerator.toLowerCase() === cleanAccelerator
+        ) {
+          logger.error(`Shortcut conflict: ${cleanAccelerator} already used by ${existingId}`);
+          return { errorType: 'CONFLICT', success: false };
+        }
+      }
+
+      // 6. 尝试注册测试（检查是否被系统占用）
+      const testSuccess = globalShortcut.register(cleanAccelerator, () => {});
+      if (!testSuccess) {
+        logger.error(`Shortcut ${cleanAccelerator} is already registered by system or other app`);
+        return { errorType: 'SYSTEM_OCCUPIED', success: false };
+      } else {
+        // 测试成功，立即取消注册
+        globalShortcut.unregister(cleanAccelerator);
+      }
+
+      // 7. 更新配置
+      this.shortcutsConfig[id] = cleanAccelerator;
 
       this.saveShortcutsConfig();
       this.registerConfiguredShortcuts();
-      return true;
+      return { success: true };
     } catch (error) {
       logger.error(`Error updating shortcut ${id}:`, error);
-      return false;
+      return { errorType: 'UNKNOWN', success: false };
     }
   }
 
@@ -164,6 +230,12 @@ export class ShortcutManager {
     Object.entries(this.shortcutsConfig).forEach(([id, accelerator]) => {
       logger.debug(`Registering shortcut '${id}' with ${accelerator}`);
 
+      // 只注册在 DEFAULT_SHORTCUTS_CONFIG 中存在的快捷键
+      if (!DEFAULT_SHORTCUTS_CONFIG[id]) {
+        logger.debug(`Skipping shortcut '${id}' - not found in DEFAULT_SHORTCUTS_CONFIG`);
+        return;
+      }
+
       const method = this.shortcuts.get(id);
       if (accelerator && method) {
         this.registerShortcut(accelerator, method);