feat: add floating window Compatibility Mode

src/main/resolve/floatingWindow.ts

@@ -41,11 +41,18 @@ async function createFloatingWindow(): Promise<void> {
       file: 'floating-window-state.json'
     })
     await logFloatingWindow('Window state keeper initialized')
-    const { customTheme = 'default.css' } = await getAppConfig()
+    const { customTheme = 'default.css', floatingWindowCompatMode = true } = await getAppConfig()
-    await logFloatingWindow(`App config loaded, theme: ${customTheme}`)
+    await logFloatingWindow(`App config loaded, theme: ${customTheme}, compatMode: ${floatingWindowCompatMode}`)
 
     const safeMode = process.env.FLOATING_SAFE_MODE === 'true'
+    const forceWin10Mode = process.env.FLOATING_WIN10_MODE === 'true'
+    const useCompatMode = floatingWindowCompatMode || forceWin10Mode || safeMode
+
     await logFloatingWindow(`Safe mode: ${safeMode}`)
+    await logFloatingWindow(`Force Win10 mode: ${forceWin10Mode}`)
+    await logFloatingWindow(`Compat mode from config: ${floatingWindowCompatMode}`)
+    await logFloatingWindow(`Platform: ${process.platform}, System version: ${process.getSystemVersion()}`)
+    await logFloatingWindow(`Using compatibility mode: ${useCompatMode}`)
 
     const windowOptions: Electron.BrowserWindowConstructorOptions = {
       width: 120,
@@ -56,13 +63,13 @@ async function createFloatingWindow(): Promise<void> {
       frame: safeMode ? true : false,
       alwaysOnTop: !safeMode,
       resizable: safeMode,
-      transparent: !safeMode,
+      transparent: !safeMode && !useCompatMode, // 兼容模式下禁用透明
       skipTaskbar: !safeMode,
       minimizable: safeMode,
       maximizable: safeMode,
       fullscreenable: false,
       closable: safeMode,
-      backgroundColor: safeMode ? '#ffffff' : '#00000000',
+      backgroundColor: safeMode ? '#ffffff' : (useCompatMode ? '#f0f0f0' : '#00000000'), // 兼容模式使用浅灰色
       webPreferences: {
         preload: join(__dirname, '../preload/index.js'),
         spellcheck: false,
@@ -79,16 +86,39 @@ async function createFloatingWindow(): Promise<void> {
     }
 
     await logFloatingWindow(`Creating BrowserWindow with options: ${JSON.stringify(windowOptions, null, 2)}`)
-    floatingWindow = new BrowserWindow(windowOptions)
-    await logFloatingWindow('BrowserWindow created successfully')
-    floatingWindowState.manage(floatingWindow)
-    await logFloatingWindow('Window state management attached')
 
-    floatingWindow.webContents.on('render-process-gone', async (_, details) => {
+    try {
-      await logFloatingWindow('Render process gone', details.reason)
+      floatingWindow = new BrowserWindow(windowOptions)
-      floatingWindow = null
+      await logFloatingWindow('BrowserWindow created successfully')
-    })
+    } catch (error) {
+      await logFloatingWindow('Failed to create BrowserWindow', error)
+      throw error
+    }
 
+    try {
+      await logFloatingWindow('Attaching window state management...')
+      floatingWindowState.manage(floatingWindow)
+      await logFloatingWindow('Window state management attached')
+    } catch (error) {
+      await logFloatingWindow('Failed to attach window state management', error)
+      throw error
+    }
+
+    await logFloatingWindow('Setting up event listeners...')
+
+    try {
+      await logFloatingWindow('Adding render-process-gone listener...')
+      floatingWindow.webContents.on('render-process-gone', async (_, details) => {
+        await logFloatingWindow('Render process gone', details.reason)
+        floatingWindow = null
+      })
+      await logFloatingWindow('Render-process-gone listener added')
+    } catch (error) {
+      await logFloatingWindow('Failed to add render-process-gone listener', error)
+      throw error
+    }
+
+    await logFloatingWindow('Adding ready-to-show listener...')
     floatingWindow.on('ready-to-show', async () => {
       try {
         await logFloatingWindow('Window ready to show, applying theme...')
@@ -102,16 +132,21 @@ async function createFloatingWindow(): Promise<void> {
         await logFloatingWindow('Error in ready-to-show', error)
       }
     })
+    await logFloatingWindow('Ready-to-show listener added')
 
+    await logFloatingWindow('Adding moved listener...')
     floatingWindow.on('moved', () => {
       if (floatingWindow) floatingWindowState.saveState(floatingWindow)
     })
+    await logFloatingWindow('Moved listener added')
+    await logFloatingWindow('Adding IPC listener...')
     ipcMain.on('updateFloatingWindow', () => {
       if (floatingWindow) {
         floatingWindow?.webContents.send('controledMihomoConfigUpdated')
         floatingWindow?.webContents.send('appConfigUpdated')
       }
     })
+    await logFloatingWindow('IPC listener added')
 
     await logFloatingWindow('Loading page...')
     if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
@@ -145,7 +180,17 @@ export async function showFloatingWindow(): Promise<void> {
     }
   } catch (error) {
     await logFloatingWindow('Failed to show floating window', error)
-    await patchAppConfig({ showFloatingWindow: false })
+
+    // 如果已经是兼容模式还是崩溃，说明问题很严重，自动禁用悬浮窗
+    const { floatingWindowCompatMode = true } = await getAppConfig()
+    if (floatingWindowCompatMode) {
+      await logFloatingWindow('Compatibility mode was already enabled, disabling floating window completely')
+      await patchAppConfig({ showFloatingWindow: false })
+    } else {
+      await logFloatingWindow('Enabling compatibility mode and retrying')
+      await patchAppConfig({ floatingWindowCompatMode: true })
+    }
+
     await logFloatingWindow('Disabled floating window in config due to error')
     throw error
   }

src/main/utils/template.ts

@@ -21,6 +21,7 @@ export const defaultConfig: IAppConfig = {
   useNameserverPolicy: false,
   controlDns: true,
   controlSniff: true,
+  floatingWindowCompatMode: true,
   nameserverPolicy: {},
   siderOrder: [
     'sysproxy',

src/renderer/src/components/settings/general-config.tsx

@@ -48,6 +48,7 @@ const GeneralConfig: React.FC = () => {
     disableTray = false,
     showFloatingWindow: showFloating = false,
     spinFloatingIcon = true,
+    floatingWindowCompatMode = true,
     useWindowFrame = false,
     autoQuitWithoutCore = false,
     autoQuitWithoutCoreDelay = 60,
@@ -236,6 +237,27 @@ const GeneralConfig: React.FC = () => {
                 }}
               />
             </SettingItem>
+            <SettingItem
+              title={t('settings.floatingWindowCompatMode')}
+              divider
+            >
+              <div className="flex items-center gap-2">
+                <Switch
+                  size="sm"
+                  isSelected={floatingWindowCompatMode}
+                  onValueChange={async (v) => {
+                    await patchAppConfig({ floatingWindowCompatMode: v })
+                    closeFloatingWindow()
+                    setTimeout(() => {
+                      showFloatingWindow()
+                    }, 100)
+                  }}
+                />
+                <Tooltip content={t('settings.floatingWindowCompatModeTooltip')}>
+                  <IoIosHelpCircle className="text-default-500 cursor-help" />
+                </Tooltip>
+              </div>
+            </SettingItem>
             <SettingItem title={t('settings.disableTray')} divider>
               <Switch
                 size="sm"

src/renderer/src/locales/en-US.json

@@ -54,6 +54,8 @@
   "settings.envType": "Environment Variable Type",
   "settings.showFloatingWindow": "Show Floating Window",
   "settings.spinFloatingIcon": "Spin Floating Icon Based on Network Speed",
+  "settings.floatingWindowCompatMode": "Floating Window Compatibility Mode (Recommended)",
+  "settings.floatingWindowCompatModeTooltip": "Disables transparency effects to prevent crashes on some Windows systems. Recommended to keep enabled for stability",
   "settings.disableTray": "Disable Tray Icon",
   "settings.proxyInTray": "Show Proxy Info in Tray Menu",
   "settings.showTraffic_windows": "Show Network Speed in Taskbar",

src/renderer/src/locales/zh-CN.json

@@ -54,6 +54,8 @@
   "settings.envType": "环境变量类型",
   "settings.showFloatingWindow": "显示悬浮窗",
   "settings.spinFloatingIcon": "根据网速旋转悬浮窗图标",
+  "settings.floatingWindowCompatMode": "悬浮窗兼容模式（推荐开启）",
+  "settings.floatingWindowCompatModeTooltip": "禁用透明效果以避免在某些 Windows 系统上崩溃，建议保持开启以确保稳定性",
   "settings.disableTray": "禁用托盘图标",
   "settings.proxyInTray": "在托盘菜单显示代理信息",
   "settings.showTraffic_windows": "在任务栏显示网速",

src/shared/types.d.ts

@@ -236,6 +236,7 @@ interface IAppConfig {
   spinFloatingIcon?: boolean
   disableTray?: boolean
   showFloatingWindow?: boolean
+  floatingWindowCompatMode?: boolean
   connectionCardStatus?: CardStatus
   dnsCardStatus?: CardStatus
   logCardStatus?: CardStatus