优化透明窗口边框显示效果，修复全屏模式下的相关问题

publish/changeLog.md

@@ -6,7 +6,10 @@ Any Listen 的项目地址为 https://github.com/any-listen/any-listen
 ### 优化
 
 - 优化 tx 推荐歌单列表
+- 优化禁用透明窗口的窗口边框显示效果
 
 ### 修复
 
 - 修复打开某些 kg 歌单时歌曲丢失的问题
+- 修复 Windows 7 无法启动的问题
+- 修复禁用透明窗口时按 F11 无法全屏的问题

src/common/utils/index.ts

@@ -1,4 +1,5 @@
 import log from 'electron-log/node'
+import os from 'node:os'
 
 
 export const isLinux = process.platform == 'linux'
@@ -13,7 +14,12 @@ export const getPlatform = (platform: NodeJS.Platform = process.platform) => {
     default: return 'linux'
   }
 }
-
+export const getOSVersion = (): string => {
+  const release = os.release()
+  const versionMatch = /^(\d+)/.exec(release)
+  // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+  return versionMatch?.[1] || release
+}
 
 // https://stackoverflow.com/a/53387532
 export function compareVer(currentVer: string, targetVer: string): -1 | 0 | 1 {

src/main/modules/winMain/main.ts

@@ -1,7 +1,7 @@
 import { BrowserWindow, dialog, session } from 'electron'
 import path from 'node:path'
 import { createTaskBarButtons, getWindowSizeInfo } from './utils'
-import { getPlatform, isLinux, isWin } from '@common/utils'
+import { getOSVersion, getPlatform, isLinux, isMac, isWin } from '@common/utils'
 import { getProxy, openDevTools as handleOpenDevTools } from '@main/utils'
 import { mainSend } from '@common/mainIpc'
 import { sendFocus, sendTaskbarButtonClick } from './rendererEvent'
@@ -40,6 +40,19 @@ const winEvent = () => {
   browserWindow.on('blur', () => {
     global.lx.event_app.main_window_blur()
   })
+  browserWindow.on('enter-full-screen', () => {
+    global.lx.event_app.main_window_fullscreen(true)
+  })
+  browserWindow.on('leave-full-screen', () => {
+    global.lx.event_app.main_window_fullscreen(false)
+
+    // macOS needs here to set resizable to false after exiting full screen
+    if (isMac) {
+      if (browserWindow?.resizable) {
+        browserWindow.setResizable(false)
+      }
+    }
+  })
 
   browserWindow.once('ready-to-show', () => {
     if (!global.envParams.cmdParams.hidden) {
@@ -107,7 +120,7 @@ export const createWindow = () => {
   browserWindow = new BrowserWindow(options)
 
   const winURL = process.env.NODE_ENV !== 'production' ? 'http://localhost:9080' : `file://${path.join(encodePath(__dirname), 'index.html')}`
-  void browserWindow.loadURL(winURL + `?os=${getPlatform()}&dt=${global.envParams.cmdParams.dt}&dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
+  void browserWindow.loadURL(winURL + `?os=${getPlatform()}&osver=${encodeURIComponent(getOSVersion())}&dt=${global.envParams.cmdParams.dt}&dark=${shouldUseDarkColors}&theme=${encodeURIComponent(JSON.stringify(theme))}`)
 
   winEvent()
 
@@ -228,13 +241,17 @@ export const toggleDevTools = () => {
 
 export const setFullScreen = (isFullscreen: boolean): boolean => {
   if (!browserWindow) return false
-  if (isLinux) { // linux 需要先设置为可调整窗口大小才能全屏
+  // https://github.com/any-listen/any-listen/issues/190
+  // in electron ^41.2.0, windows -dt mode need to set resizable to true before setting full screen
+  if (!!global.envParams.cmdParams.dt || isLinux) {
+    // linux 需要先设置为可调整窗口大小才能全屏
     if (isFullscreen) {
       browserWindow.setResizable(isFullscreen)
       browserWindow.setFullScreen(isFullscreen)
     } else {
       browserWindow.setFullScreen(isFullscreen)
-      browserWindow.setResizable(isFullscreen)
+      // windows/linux need to set resizable to true after exiting full screen
+      if (!isMac) browserWindow.setResizable(isFullscreen)
     }
   } else {
     browserWindow.setFullScreen(isFullscreen)

src/renderer/App.vue

@@ -99,8 +99,11 @@ body {
 .disableTransparent {
   background-color: var(--color-content-background);
 
-  #body {
+  &.linux #body {
-    border: 1Px solid var(--color-primary-light-500);
+    border: 1px solid var(--color-primary-light-500);
+  }
+  &.windows:not(.windows-11, .fullscreen) #body {
+    border-top: 1px solid #aaa;
   }
 
   #right {

src/renderer/index.html

@@ -15,31 +15,35 @@
   <div id="root" style="display: none;">
   </div>
   <script>
-    const formatLang = (lang = 'en') => {
+    (() => {
-      if (lang === 'zh-cn') return 'zh-Hans'
+      const formatLang = (lang = 'en') => {
-      if (lang === 'zh-tw') return 'zh-Hant'
+        if (lang === 'zh-cn') return 'zh-Hans'
-      return lang.split('-')[0]
+        if (lang === 'zh-tw') return 'zh-Hant'
-    }
+        return lang.split('-')[0]
-    window.setLang = (lang = navigator.language.toLocaleLowerCase()) => {
+      }
-      document.documentElement.setAttribute('lang', formatLang(lang))
+      window.setLang = (lang = navigator.language.toLocaleLowerCase()) => {
-    }
+        document.documentElement.setAttribute('lang', formatLang(lang))
-    window.setLang()
+      }
-    document.documentElement.classList.add(/os=(\w+)/.exec(window.location.search)[1])
+      window.setLang()
-    window.shouldUseDarkColors = /dark=true/.test(window.location.search)
+      const os = /os=(\w+)/.exec(window.location.search)?.[1]
-    window.dt = /dt=true/.test(window.location.search)
+      const osver = decodeURIComponent(/osver=([^&]+)/.exec(window.location.search)?.[1] || '')
-    document.documentElement.classList.add(window.dt ? 'disableTransparent' : 'transparent')
+      document.documentElement.classList.add(os, `${os}-${osver}`)
+      window.shouldUseDarkColors = /dark=true/.test(window.location.search)
+      window.dt = /dt=true/.test(window.location.search)
+      document.documentElement.classList.add(window.dt ? 'disableTransparent' : 'transparent')
 
-    window.dom_style = document.createElement('style')
+      window.dom_style = document.createElement('style')
 
-    window.setTheme = colors => {
+      window.setTheme = colors => {
-      window.dom_style.innerText = `:root {${(Object.entries(colors)).map(([key, value]) => `${key}:${value};`).join('')}}`
+        window.dom_style.innerText = `:root {${(Object.entries(colors)).map(([key, value]) => `${key}:${value};`).join('')}}`
-    }
+      }
-    const applyThemeColor = (theme) => {
+      const applyThemeColor = (theme) => {
-      theme = JSON.parse(decodeURIComponent(theme))
+        theme = JSON.parse(decodeURIComponent(theme))
-      window.setTheme(theme.colors)
+        window.setTheme(theme.colors)
-      document.body.appendChild(window.dom_style)
+        document.body.appendChild(window.dom_style)
-    }
+      }
-    if (/theme=(.+)(#|$)/.test(window.location.search)) applyThemeColor(RegExp.$1)
+      if (/theme=(.+)(#|$)/.test(window.location.search)) applyThemeColor(RegExp.$1)
+    })()
   </script>
 </body>
 </html>