fix: BrowserWindow rendering bug under linux

package.json

@@ -30,6 +30,9 @@
     "pack:renderer": "webpack --node-env production --progress --color --config .electron-vue/webpack.renderer.config.js",
     "postinstall": "electron-builder install-app-deps && npm run lint:fix"
   },
+  "engines": {
+    "node" : ">=18.0.0"
+  },
   "dependencies": {
     "node-fetch": "^2.6.1",
     "ws": "^8.13.0"

src/main/configs/page.js

@@ -8,8 +8,7 @@ export default {
       height: 768,
       minWidth: 478,
       minHeight: 420,
-      // backgroundColor: '#FFFFFF',
-      transparent: !is.windows()
+      transparent: is.macOS()
     },
     bindCloseToHide: true,
     openDevTools: is.dev(),

src/main/ui/MenuManager.js

@@ -1,12 +1,12 @@
 import { EventEmitter } from 'events'
 import { Menu } from 'electron'
 
+import keymap from '@shared/keymap'
 import {
   translateTemplate,
   flattenMenuItems,
   updateStates
 } from '../utils/menu'
-import keymap from '@shared/keymap'
 import { getI18n } from '../ui/Locale'
 
 export default class MenuManager extends EventEmitter {

src/main/ui/WindowManager.js

@@ -1,24 +1,35 @@
 import { join } from 'path'
 import { EventEmitter } from 'events'
+import { debounce } from 'lodash'
 import { app, shell, screen, BrowserWindow } from 'electron'
 import is from 'electron-is'
+
 import pageConfig from '../configs/page'
 import logger from '../core/Logger'
-import { debounce } from 'lodash'
 
-const defaultBrowserOptions = {
+const baseBrowserOptions = {
   titleBarStyle: 'hiddenInset',
   show: false,
   width: 1024,
   height: 768,
-  vibrancy: 'ultra-dark',
-  visualEffectState: 'active',
-  backgroundColor: is.macOS() ? '#00000000' : '#FFF',
+  backgroundColor: '#fff',
   webPreferences: {
     nodeIntegration: true
   }
 }
 
+// fix: BrowserWindow rendering bug under linux
+const defaultBrowserOptions = is.macOS()
+  ? {
+    ...baseBrowserOptions,
+    vibrancy: 'ultra-dark',
+    visualEffectState: 'active',
+    backgroundColor: '#00000000'
+  }
+  : {
+    ...baseBrowserOptions
+  }
+
 export default class WindowManager extends EventEmitter {
   constructor (options = {}) {
     super()

src/main/utils/index.js

@@ -8,7 +8,6 @@ import {
   ENGINE_MAX_CONNECTION_PER_SERVER,
   IP_VERSION
 } from '@shared/constants'
-
 import engineBinMap from '../configs/engine'
 
 export function getLogPath () {

src/renderer/components/Preference/Basic.vue

@@ -134,7 +134,7 @@
             </el-input-number>
             <el-select
               style="width: 100px;"
-              v-model="uploadUnits"
+              v-model="uploadUnit"
               @change="handleUploadChange"
               :placeholder="$t('preferences.speed-units')">
               <el-option
@@ -157,7 +157,7 @@
             </el-input-number>
             <el-select
               style="width: 100px;"
-              v-model="downloadUnits"
+              v-model="downloadUnit"
               @change="handleDownloadChange"
               :placeholder="$t('preferences.speed-units')">
               <el-option
@@ -303,7 +303,8 @@
     changedConfig,
     checkIsNeedRestart,
     convertLineToComma,
-    diffConfig
+    diffConfig,
+    extractSpeedUnit
   } from '@shared/utils'
   import { APP_RUN_MODE, ENGINE_MAX_CONCURRENT_DOWNLOADS } from '@shared/constants'
   import { reduceTrackerString } from '@shared/utils/tracker'
@@ -413,40 +414,32 @@
           return parseInt(this.form.maxOverallDownloadLimit)
         },
         set (value) {
-          this.form.maxOverallDownloadLimit = value + this.downloadUnits
+          const limit = value > 0 ? `${value}${this.downloadUnit}` : 0
+          this.form.maxOverallDownloadLimit = limit
         }
       },
       maxOverallUploadLimitParsed: {
         get () {
           return parseInt(this.form.maxOverallUploadLimit)
         },
         set (value) {
-          this.form.maxOverallUploadLimit = value + this.uploadUnits
+          const limit = value > 0 ? `${value}${this.uploadUnit}` : 0
+          this.form.maxOverallUploadLimit = limit
         }
       },
-      downloadUnits: {
+      downloadUnit: {
         get () {
-          const speed = this.form.maxOverallDownloadLimit
-          // Fallback to K if Speed is 0 (previously unlimited)
-          if (!speed) return 'K'
-          const speedEnding = speed.slice(-1)
-          // Fall back to KB if the downloadlimit doesnt have a unit
-          if (!speedEnding || !isNaN(parseInt(speedEnding))) return 'K'
-          return speedEnding
+          const { maxOverallDownloadLimit } = this.form
+          return extractSpeedUnit(maxOverallDownloadLimit)
         },
         set (value) {
           return value
         }
       },
-      uploadUnits: {
+      uploadUnit: {
         get () {
-          const speed = this.form.maxOverallUploadLimit
-          // Fallback to K if Speed is 0 (previously unlimited)
-          if (!speed) return 'K'
-          const speedEnding = speed.slice(-1)
-          // Fall back to KB if the downloadlimit doesnt have a unit
-          if (!speedEnding || !isNaN(parseInt(speedEnding))) return 'K'
-          return speedEnding
+          const { maxOverallUploadLimit } = this.form
+          return extractSpeedUnit(maxOverallUploadLimit)
         },
         set (value) {
           return value
@@ -528,13 +521,15 @@
       },
       handleDownloadChange (value) {
         const speedLimit = parseInt(this.form.maxOverallDownloadLimit)
-        this.downloadUnits = value
-        this.form.maxOverallDownloadLimit = `${speedLimit}${value}`
+        this.downloadUnit = value
+        const limit = speedLimit > 0 ? `${speedLimit}${value}` : 0
+        this.form.maxOverallDownloadLimit = limit
       },
       handleUploadChange (value) {
         const speedLimit = parseInt(this.form.maxOverallUploadLimit)
-        this.uploadUnits = value
-        this.form.maxOverallUploadLimit = `${speedLimit}${value}`
+        this.uploadUnit = value
+        const limit = speedLimit > 0 ? `${speedLimit}${value}` : 0
+        this.form.maxOverallUploadLimit = limit
       },
       onKeepSeedingChange (enable) {
         this.form.seedRatio = enable ? 0 : 1

src/shared/utils/index.js

@@ -40,6 +40,21 @@ export function bytesToSize (bytes, precision = 1) {
   return `${(b / (1024 ** i)).toFixed(precision)} ${sizes[i]}`
 }
 
+export const extractSpeedUnit = (speed = '') => {
+  if (parseInt(speed) === 0) {
+    return 'K'
+  }
+
+  const regex = /^(\d+\.?\d*)([KMG])$/
+  const match = regex.exec(speed)
+
+  if (!match) {
+    return 'K'
+  }
+
+  return match[2]
+}
+
 export function bitfieldToPercent (text) {
   const len = text.length - 1
   let p