diff --git a/apps/desktop/src/main/const/theme.ts b/apps/desktop/src/main/const/theme.ts index 57f6f736a6..dfc16df412 100644 --- a/apps/desktop/src/main/const/theme.ts +++ b/apps/desktop/src/main/const/theme.ts @@ -4,8 +4,5 @@ export const BACKGROUND_LIGHT = '#f8f8f8'; export const SYMBOL_COLOR_DARK = '#ffffff80'; export const SYMBOL_COLOR_LIGHT = '#00000080'; -// Window dimensions and constraints -export const TITLE_BAR_HEIGHT = 29; - // Default window configuration export const THEME_CHANGE_DELAY = 100; diff --git a/apps/desktop/src/main/core/browser/Browser.ts b/apps/desktop/src/main/core/browser/Browser.ts index c894d6e611..7fe8bc6365 100644 --- a/apps/desktop/src/main/core/browser/Browser.ts +++ b/apps/desktop/src/main/core/browser/Browser.ts @@ -1,3 +1,4 @@ +import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge'; import { MainBroadcastEventKey, MainBroadcastParams } from '@lobechat/electron-client-ipc'; import { BrowserWindow, @@ -12,7 +13,6 @@ import { join } from 'node:path'; import { preloadDir, resourcesDir } from '@/const/dir'; import { isMac } from '@/const/env'; import { ELECTRON_BE_PROTOCOL_SCHEME } from '@/const/protocol'; -import { TITLE_BAR_HEIGHT } from '@/const/theme'; import RemoteServerConfigCtr from '@/controllers/RemoteServerConfigCtr'; import { backendProxyProtocolManager } from '@/core/infrastructure/BackendProxyProtocolManager'; import { setResponseHeader } from '@/utils/http-headers'; diff --git a/apps/desktop/src/main/core/browser/WindowThemeManager.ts b/apps/desktop/src/main/core/browser/WindowThemeManager.ts index e745b185c0..ca278bd187 100644 --- a/apps/desktop/src/main/core/browser/WindowThemeManager.ts +++ b/apps/desktop/src/main/core/browser/WindowThemeManager.ts @@ -1,3 +1,4 @@ +import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge'; import { BrowserWindow, nativeTheme } from 'electron'; import { join } from 'node:path'; @@ -9,7 +10,6 @@ import { SYMBOL_COLOR_DARK, SYMBOL_COLOR_LIGHT, THEME_CHANGE_DELAY, - TITLE_BAR_HEIGHT, } from '@/const/theme'; import { createLogger } from '@/utils/logger'; @@ -91,7 +91,8 @@ export class WindowThemeManager { icon: isDev ? join(buildDir, 'icon-dev.ico') : undefined, titleBarOverlay: { color: isDarkMode ? BACKGROUND_DARK : BACKGROUND_LIGHT, - height: TITLE_BAR_HEIGHT, + // Reduce 2px to prevent blocking the container border edge + height: TITLE_BAR_HEIGHT - 2, symbolColor: isDarkMode ? SYMBOL_COLOR_DARK : SYMBOL_COLOR_LIGHT, }, titleBarStyle: 'hidden', diff --git a/apps/desktop/src/main/core/browser/__tests__/Browser.test.ts b/apps/desktop/src/main/core/browser/__tests__/Browser.test.ts index d371641fe8..73d9e2bf11 100644 --- a/apps/desktop/src/main/core/browser/__tests__/Browser.test.ts +++ b/apps/desktop/src/main/core/browser/__tests__/Browser.test.ts @@ -108,7 +108,6 @@ vi.mock('@/const/theme', () => ({ SYMBOL_COLOR_DARK: '#ffffff', SYMBOL_COLOR_LIGHT: '#000000', THEME_CHANGE_DELAY: 0, - TITLE_BAR_HEIGHT: 32, })); describe('Browser', () => { diff --git a/apps/desktop/src/main/core/browser/__tests__/WindowThemeManager.test.ts b/apps/desktop/src/main/core/browser/__tests__/WindowThemeManager.test.ts index 02ca1febe5..8794386c9c 100644 --- a/apps/desktop/src/main/core/browser/__tests__/WindowThemeManager.test.ts +++ b/apps/desktop/src/main/core/browser/__tests__/WindowThemeManager.test.ts @@ -38,13 +38,16 @@ vi.mock('@/const/env', () => ({ isWindows: true, })); +vi.mock('@lobechat/desktop-bridge', () => ({ + TITLE_BAR_HEIGHT: 38, +})); + vi.mock('@/const/theme', () => ({ BACKGROUND_DARK: '#1a1a1a', BACKGROUND_LIGHT: '#ffffff', SYMBOL_COLOR_DARK: '#ffffff', SYMBOL_COLOR_LIGHT: '#000000', THEME_CHANGE_DELAY: 0, - TITLE_BAR_HEIGHT: 32, })); describe('WindowThemeManager', () => { @@ -89,7 +92,7 @@ describe('WindowThemeManager', () => { icon: undefined, titleBarOverlay: { color: '#1a1a1a', - height: 32, + height: 36, symbolColor: '#ffffff', }, titleBarStyle: 'hidden', @@ -106,7 +109,7 @@ describe('WindowThemeManager', () => { icon: undefined, titleBarOverlay: { color: '#ffffff', - height: 32, + height: 36, symbolColor: '#000000', }, titleBarStyle: 'hidden', @@ -183,7 +186,7 @@ describe('WindowThemeManager', () => { expect(mockBrowserWindow.setBackgroundColor).toHaveBeenCalledWith('#1a1a1a'); expect(mockBrowserWindow.setTitleBarOverlay).toHaveBeenCalledWith({ color: '#1a1a1a', - height: 32, + height: 36, symbolColor: '#ffffff', }); }); @@ -195,7 +198,7 @@ describe('WindowThemeManager', () => { expect(mockBrowserWindow.setBackgroundColor).toHaveBeenCalledWith('#ffffff'); expect(mockBrowserWindow.setTitleBarOverlay).toHaveBeenCalledWith({ color: '#ffffff', - height: 32, + height: 36, symbolColor: '#000000', }); }); diff --git a/packages/desktop-bridge/src/index.ts b/packages/desktop-bridge/src/index.ts index fd9c3e1f23..5050e59e74 100644 --- a/packages/desktop-bridge/src/index.ts +++ b/packages/desktop-bridge/src/index.ts @@ -7,3 +7,6 @@ export { locales, RouteVariants, } from './routeVariants'; + +// Desktop window constants +export const TITLE_BAR_HEIGHT = 38; diff --git a/src/features/ElectronTitlebar/SimpleTitleBar.tsx b/src/features/ElectronTitlebar/SimpleTitleBar.tsx index b1777eac3e..7614ef18ee 100644 --- a/src/features/ElectronTitlebar/SimpleTitleBar.tsx +++ b/src/features/ElectronTitlebar/SimpleTitleBar.tsx @@ -1,13 +1,12 @@ 'use client'; +import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge'; import { Flexbox } from '@lobehub/ui'; import { type FC } from 'react'; import { ProductLogo } from '@/components/Branding/ProductLogo'; import { electronStylish } from '@/styles/electron'; -import { TITLE_BAR_HEIGHT } from './const'; - /** * A simple, minimal TitleBar for Electron windows. * Provides draggable area without business logic (navigation, updates, etc.) diff --git a/src/features/ElectronTitlebar/const.ts b/src/features/ElectronTitlebar/const.ts deleted file mode 100644 index 4e330dc14e..0000000000 --- a/src/features/ElectronTitlebar/const.ts +++ /dev/null @@ -1 +0,0 @@ -export const TITLE_BAR_HEIGHT = 30; diff --git a/src/features/ElectronTitlebar/index.tsx b/src/features/ElectronTitlebar/index.tsx index 973f14aa86..db59e445f9 100644 --- a/src/features/ElectronTitlebar/index.tsx +++ b/src/features/ElectronTitlebar/index.tsx @@ -1,3 +1,4 @@ +import { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge'; import { Flexbox } from '@lobehub/ui'; import { Divider } from 'antd'; import { memo, useMemo } from 'react'; @@ -11,7 +12,6 @@ import NavigationBar from './NavigationBar'; import { UpdateModal } from './UpdateModal'; import { UpdateNotification } from './UpdateNotification'; import WinControl from './WinControl'; -import { TITLE_BAR_HEIGHT } from './const'; import { useWatchThemeUpdate } from './hooks/useWatchThemeUpdate'; const isMac = isMacOS(); @@ -66,5 +66,5 @@ const TitleBar = memo(() => { export default TitleBar; -export { TITLE_BAR_HEIGHT } from './const'; export { default as SimpleTitleBar } from './SimpleTitleBar'; +export { TITLE_BAR_HEIGHT } from '@lobechat/desktop-bridge';