feat: Windows 采用自定义标题栏，样式优化符合主题样式

Author: ErlichLiu

apps/electron/src/main/index.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, Menu, screen, shell } from 'electron'
+import { app, BrowserWindow, Menu, nativeTheme, screen, shell } from 'electron'
 import { join } from 'path'
 import { existsSync } from 'fs'
 
@@ -15,6 +15,7 @@ if (!app.requestSingleInstanceLock()) {
 }
 
 import { getSettings } from './lib/settings-service'
+import { resolveOverlayColors } from './lib/titlebar-overlay'
 
 // 处理 EPIPE 错误：当 stdout/stderr 管道被关闭时（如 electronmon 重启），忽略写入错误
 // 这在开发环境热重载时经常发生，不影响应用功能
@@ -163,22 +164,43 @@ function createWindow(): void {
     console.warn('App icon not found at:', iconPath)
   }
 
+  const isMac = process.platform === 'darwin'
+  const isWindows = process.platform === 'win32'
+
+  const titleBarOptions = isMac
+    ? {
+        titleBarStyle: 'hiddenInset' as const,
+        trafficLightPosition: { x: 18, y: 18 },
+        vibrancy: 'under-window' as const,
+        visualEffectState: 'followWindow' as const,
+      }
+    : isWindows
+      ? (() => {
+          const settings = getSettings()
+          return {
+            titleBarStyle: 'hidden' as const,
+            titleBarOverlay: resolveOverlayColors(
+              settings.themeMode,
+              settings.themeStyle,
+              nativeTheme.shouldUseDarkColors
+            ),
+          }
+        })()
+      : {}
+
   mainWindow = new BrowserWindow({
     width: 1400,
     height: 900,
     minWidth: 800,
     minHeight: 600,
     icon: iconExists ? iconPath : undefined,
-    show: false, // Don't show until ready
+    show: false,
     webPreferences: {
       preload: join(__dirname, 'preload.cjs'),
       contextIsolation: true,
       nodeIntegration: false,
     },
-    titleBarStyle: 'hiddenInset', // macOS style
-    trafficLightPosition: { x: 18, y: 18 },
-    vibrancy: 'under-window', // macOS glass effect
-    visualEffectState: 'followWindow',
+    ...titleBarOptions,
   })
 
   // Load the renderer

apps/electron/src/main/ipc.ts

@@ -123,6 +123,7 @@ import { extractTextFromAttachment } from './lib/document-parser'
 import { getTutorialContent, createWelcomeConversation } from './lib/tutorial-service'
 import { getUserProfile, updateUserProfile } from './lib/user-profile-service'
 import { getSettings, updateSettings } from './lib/settings-service'
+import { updateWindowTitleBarOverlay } from './lib/titlebar-overlay'
 import { checkEnvironment } from './lib/environment-checker'
 import { fetchInstallerManifest, findInstallerSource } from './lib/installer-manifest'
 import {
@@ -686,6 +687,8 @@ export function registerIpcHandlers(): void {
           if (win.webContents.id !== event.sender.id) {
             win.webContents.send(SETTINGS_IPC_CHANNELS.ON_THEME_SETTINGS_CHANGED, payload)
           }
+          // Windows: 更新标题栏 overlay 颜色
+          updateWindowTitleBarOverlay(win)
         })
       }
 
@@ -721,6 +724,12 @@ export function registerIpcHandlers(): void {
     BrowserWindow.getAllWindows().forEach((win) => {
       win.webContents.send(SETTINGS_IPC_CHANNELS.ON_SYSTEM_THEME_CHANGED, isDark)
     })
+    // Windows: system 模式下同步更新标题栏 overlay
+    if (process.platform === 'win32' && getSettings().themeMode === 'system') {
+      BrowserWindow.getAllWindows().forEach((win) => {
+        updateWindowTitleBarOverlay(win)
+      })
+    }
   })
 
   // ===== 应用图标切换 =====

apps/electron/src/main/lib/file-preview-service.ts

@@ -27,6 +27,8 @@ import {
   type FSWatcher,
 } from 'node:fs'
 import { tmpdir } from 'node:os'
+import { resolveOverlayColors } from './titlebar-overlay'
+import { getSettings } from './settings-service'
 
 /** 文件大小限制：50MB */
 const MAX_FILE_SIZE = 50 * 1024 * 1024
@@ -1309,9 +1311,30 @@ function docxPreviewHtml(filePath: string, filename: string, base64Data: string)
 /** 创建预览窗口并绑定脏状态关闭确认 */
 function createPreviewWindow(filename: string): BrowserWindow {
   const isMac = process.platform === 'darwin'
+  const isWindows = process.platform === 'win32'
   const { workArea } = screen.getPrimaryDisplay()
   const width = Math.min(1200, workArea.width)
   const height = workArea.height
+
+  const titleBarOptions = isMac
+    ? {
+        titleBarStyle: 'hiddenInset' as const,
+        trafficLightPosition: { x: 16, y: 14 },
+      }
+    : isWindows
+      ? (() => {
+          const settings = getSettings()
+          return {
+            titleBarStyle: 'hidden' as const,
+            titleBarOverlay: resolveOverlayColors(
+              settings.themeMode,
+              settings.themeStyle,
+              nativeTheme.shouldUseDarkColors
+            ),
+          }
+        })()
+      : {}
+
   const previewWindow = new BrowserWindow({
     width,
     height,
@@ -1320,8 +1343,7 @@ function createPreviewWindow(filename: string): BrowserWindow {
     minWidth: 480,
     minHeight: 360,
     title: filename,
-    titleBarStyle: isMac ? 'hiddenInset' : 'default',
-    trafficLightPosition: isMac ? { x: 16, y: 14 } : undefined,
+    ...titleBarOptions,
     backgroundColor: nativeTheme.shouldUseDarkColors ? '#1e1e1e' : '#fafaf8',
     webPreferences: {
       preload: join(__dirname, 'file-preview-preload.cjs'),

apps/electron/src/main/lib/titlebar-overlay.ts

@@ -0,0 +1,60 @@
+import { BrowserWindow, nativeTheme } from 'electron'
+import type { ThemeMode, ThemeStyle } from '../../types'
+import { getSettings } from './settings-service'
+
+interface OverlayColors {
+  color: string
+  symbolColor: string
+  height: number
+}
+
+const OVERLAY_HEIGHT = 40
+
+const THEME_COLORS: Record<string, { color: string; symbolColor: string }> = {
+  'default-light': { color: '#ffffff', symbolColor: '#0a0a0a' },
+  'default-dark': { color: '#121212', symbolColor: '#fafafa' },
+  'ocean-light': { color: '#ecf2f7', symbolColor: '#1b2632' },
+  'ocean-dark': { color: '#182434', symbolColor: '#e7ebef' },
+  'forest-light': { color: '#eff5f1', symbolColor: '#1d3026' },
+  'forest-dark': { color: '#212c26', symbolColor: '#e3e8e5' },
+  'slate-light': { color: '#e3e1dc', symbolColor: '#312f2a' },
+  'slate-dark': { color: '#1d1b20', symbolColor: '#e9e6e3' },
+}
+
+export function resolveOverlayColors(
+  themeMode: ThemeMode,
+  themeStyle: ThemeStyle | undefined,
+  systemIsDark: boolean
+): OverlayColors {
+  let key: string
+
+  if (themeMode === 'special' && themeStyle && themeStyle !== 'default') {
+    key = themeStyle
+  } else if (themeMode === 'system') {
+    key = systemIsDark ? 'default-dark' : 'default-light'
+  } else if (themeMode === 'dark') {
+    key = 'default-dark'
+  } else {
+    key = 'default-light'
+  }
+
+  const colors = THEME_COLORS[key] ?? THEME_COLORS['default-dark']!
+  return { color: colors.color, symbolColor: colors.symbolColor, height: OVERLAY_HEIGHT }
+}
+
+export function updateWindowTitleBarOverlay(win: BrowserWindow): void {
+  if (process.platform !== 'win32') return
+  if (win.isDestroyed()) return
+
+  try {
+    const settings = getSettings()
+    const { color, symbolColor, height } = resolveOverlayColors(
+      settings.themeMode,
+      settings.themeStyle,
+      nativeTheme.shouldUseDarkColors
+    )
+    win.setTitleBarOverlay({ color, symbolColor, height })
+  } catch {
+    // frameless 窗口（如 quick-task）不支持 setTitleBarOverlay，静默忽略
+  }
+}

apps/electron/src/renderer/components/onboarding/OnboardingView.tsx

@@ -22,22 +22,13 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import { TutorialViewer } from '@/components/tutorial/TutorialViewer'
 import { EnvironmentCheckPanel } from '@/components/environment/EnvironmentCheckPanel'
 import { isShellEnvironmentOkAtom } from '@/atoms/environment'
+import { detectIsWindows } from '@/lib/platform'
 
 interface OnboardingViewProps {
   /** 完成回调（进入主界面） */
   onComplete: () => void
 }
 
-function detectIsWindows(): boolean {
-  const platform =
-    typeof navigator !== 'undefined' &&
-    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform
-  if (typeof platform === 'string' && platform.toLowerCase().includes('win')) {
-    return true
-  }
-  return typeof navigator !== 'undefined' && /win/i.test(navigator.platform || '')
-}
-
 export function OnboardingView({ onComplete }: OnboardingViewProps) {
   const [showTutorial, setShowTutorial] = useState(false)
   const [step, setStep] = useState<'welcome' | 'environment'>('welcome')

apps/electron/src/renderer/components/settings/AppearanceSettings.tsx

@@ -24,6 +24,7 @@ import {
   applyThemeToDOM,
 } from '@/atoms/theme'
 import { cn } from '@/lib/utils'
+import { detectIsWindows } from '@/lib/platform'
 import type { ThemeMode, ThemeStyle } from '../../../types'
 
 // ===== Logo 资源导入（用于图标选择器） =====
@@ -214,7 +215,7 @@ function AppIconPicker(): React.ReactElement {
     })
   }, [])
 
-  const isWindows = typeof navigator !== 'undefined' && navigator.userAgent.includes('Windows')
+  const isWindows = React.useMemo(() => detectIsWindows(), [])
 
   const handleIconSelect = React.useCallback(async (variantId: string) => {
     if (isWindows) {

apps/electron/src/renderer/components/tabs/TabBar.tsx

@@ -30,6 +30,8 @@ import { appModeAtom } from '@/atoms/app-mode'
 import { TabBarItem } from './TabBarItem'
 import { TabCloseConfirmDialog } from './TabCloseConfirmDialog'
 import { useCloseTab } from '@/hooks/useCloseTab'
+import { detectIsWindows } from '@/lib/platform'
+import { cn } from '@/lib/utils'
 
 export function TabBar(): React.ReactElement {
   const tabs = useAtomValue(tabsAtom)
@@ -153,7 +155,7 @@ function TabBarInner({
   const enterTimerRef = React.useRef<ReturnType<typeof setTimeout>>()
   const leaveTimerRef = React.useRef<ReturnType<typeof setTimeout>>()
   const fadeTimerRef = React.useRef<ReturnType<typeof setTimeout>>()
-
+  const isWindows = React.useMemo(() => detectIsWindows(), [])
   React.useEffect(() => {
     return () => {
       if (enterTimerRef.current) clearTimeout(enterTimerRef.current)
@@ -199,7 +201,7 @@ function TabBarInner({
     <div className="flex items-end h-[34px] tabbar-bg relative">
       <div className="absolute inset-0 titlebar-drag-region" />
 
-      <div className="relative flex items-end flex-1 min-w-0 overflow-x-clip titlebar-no-drag">
+      <div className={cn("relative flex items-end flex-1 min-w-0 overflow-x-clip titlebar-no-drag", isWindows && "pr-[140px]")}>
         {tabs.map((tab) => (
           <TabBarItem
             key={tab.id}

apps/electron/src/renderer/lib/platform.ts

@@ -0,0 +1,19 @@
+export function detectIsWindows(): boolean {
+  const platform =
+    typeof navigator !== 'undefined' &&
+    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform
+  if (typeof platform === 'string' && platform.toLowerCase().includes('win')) {
+    return true
+  }
+  return typeof navigator !== 'undefined' && /win/i.test(navigator.platform || '')
+}
+
+export function detectIsMac(): boolean {
+  const platform =
+    typeof navigator !== 'undefined' &&
+    (navigator as Navigator & { userAgentData?: { platform?: string } }).userAgentData?.platform
+  if (typeof platform === 'string' && platform.toLowerCase().includes('mac')) {
+    return true
+  }
+  return typeof navigator !== 'undefined' && /mac/i.test(navigator.platform || '')
+}