修复开发模式下 vue devtools 扩展没有加载的问题

src/main/app.ts

@@ -18,6 +18,53 @@ export const initGlobalData = () => {
     cmdParams: envParams.cmdParams,
     deeplink: envParams.deeplink,
   }
+  global.lx = {
+    inited: false,
+    isSkipTrayQuit: false,
+    // mainWindowClosed: true,
+    event_app: createAppEvent(),
+    event_list: createListEvent(),
+    event_dislike: createDislikeEvent(),
+    appSetting: defaultSetting,
+    worker: createWorkers(),
+    hotKey: {
+      enable: true,
+      config: {
+        local: {
+          enable: false,
+          keys: {},
+        },
+        global: {
+          enable: false,
+          keys: {},
+        },
+      },
+      state: new Map(),
+    },
+    theme: {
+      shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
+      theme: {
+        id: '',
+        name: '',
+        isDark: false,
+        colors: {},
+      },
+    },
+    player_status: {
+      status: 'stoped',
+      name: '',
+      singer: '',
+      albumName: '',
+      picUrl: '',
+      progress: 0,
+      duration: 0,
+      playbackRate: 1,
+      lyricLineText: '',
+      lyricLineAllText: '',
+      lyric: '',
+      collect: false,
+    },
+  }
 
   global.staticPath =
     process.env.NODE_ENV !== 'production'
@@ -209,48 +256,11 @@ const initTheme = () => {
 
 let isInitialized = false
 export const initAppSetting = async() => {
-  if (!global.lx) {
+  if (!global.lx.inited) {
     const config = await initHotKey()
-    global.lx = {
-      isSkipTrayQuit: false,
-      // mainWindowClosed: true,
-      event_app: createAppEvent(),
-      event_list: createListEvent(),
-      event_dislike: createDislikeEvent(),
-      appSetting: defaultSetting,
-      worker: createWorkers(),
-      hotKey: {
-        enable: true,
-        config: {
-          local: config.local,
-          global: config.global,
-        },
-        state: new Map(),
-      },
-      theme: {
-        shouldUseDarkColors: nativeTheme.shouldUseDarkColors,
-        theme: {
-          id: '',
-          name: '',
-          isDark: false,
-          colors: {},
-        },
-      },
-      player_status: {
-        status: 'stoped',
-        name: '',
-        singer: '',
-        albumName: '',
-        picUrl: '',
-        progress: 0,
-        duration: 0,
-        playbackRate: 1,
-        lyricLineText: '',
-        lyricLineAllText: '',
-        lyric: '',
-        collect: false,
-      },
-    }
+    global.lx.hotKey.config.local = config.local
+    global.lx.hotKey.config.global = config.global
+    global.lx.inited = true
   }
 
   if (!isInitialized) {

src/main/event/AppEvent.ts

@@ -1,6 +1,7 @@
 import { EventEmitter } from 'events'
 
 import { saveAppHotKeyConfig, updateSetting } from '@main/utils'
+import type { BrowserWindow } from 'electron'
 
 export class Event extends EventEmitter {
   // closeAll() {
@@ -69,6 +70,10 @@ export class Event extends EventEmitter {
     this.emit('hot_key_config_update', config)
   }
 
+  main_window_created(win: BrowserWindow) {
+    this.emit('main_window_created', win)
+  }
+
   main_window_ready_to_show() {
     this.emit('main_window_ready_to_show')
   }
@@ -100,6 +105,10 @@ export class Event extends EventEmitter {
   main_window_fullscreen(isFullscreen: boolean) {
     this.emit('main_window_fullscreen', isFullscreen)
   }
+
+  desktop_lyric_window_created(win: BrowserWindow) {
+    this.emit('desktop_lyric_window_created', win)
+  }
 }
 
 

src/main/index-dev.ts

@@ -8,21 +8,35 @@
 import { app } from 'electron'
 import electronDebug from 'electron-debug'
 import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
+import { openDevTools } from './utils'
 // Install `electron-debug` with `devtron`
 electronDebug({
-  showDevTools: true,
+  showDevTools: false,
   devToolsMode: 'undocked',
 })
 
 // Install `vue-devtools`
 app.on('ready', () => {
-  installExtension(VUEJS_DEVTOOLS)
-    .then((name: string) => {
-      console.log(`Added Extension:  ${name}`)
-    })
-    .catch((err: Error) => {
-      console.log('An error occurred: ', err)
-    })
+  global.lx.event_app.on('main_window_created', (win) => {
+    openDevTools(win.webContents)
+    installExtension(VUEJS_DEVTOOLS, { session: win.webContents.session })
+      .then((name: string) => {
+        console.log(`[main window] Added Extension:  ${name}`)
+      })
+      .catch((err: Error) => {
+        console.log('[main window] An error occurred: ', err)
+      })
+  })
+  global.lx.event_app.on('desktop_lyric_window_created', (win) => {
+    openDevTools(win.webContents)
+    installExtension(VUEJS_DEVTOOLS, { session: win.webContents.session })
+      .then((name: string) => {
+        console.log(`[lyric window] Added Extension:  ${name}`)
+      })
+      .catch((err: Error) => {
+        console.log('[lyric window] An error occurred: ', err)
+      })
+  })
 })
 
 // Require `main` process to boot app

src/main/modules/winLyric/main.ts

@@ -145,6 +145,7 @@ export const createWindow = () => {
 
   winEvent()
   // browserWindow.webContents.openDevTools()
+  global.lx.event_app.desktop_lyric_window_created(browserWindow)
 }
 export const isExistWindow = (): boolean => !!browserWindow
 

src/main/modules/winMain/main.ts

@@ -117,6 +117,7 @@ export const createWindow = () => {
 
   // global.lx.mainWindowClosed = false
   // browserWindow.webContents.openDevTools()
+  global.lx.event_app.main_window_created(browserWindow)
 }
 
 export const isExistWindow = (): boolean => !!browserWindow

src/main/types/app.d.ts

@@ -5,6 +5,7 @@ import { type DislikeType, type AppType, type ListType } from '@main/event'
 import { type DBSeriveTypes } from '@main/worker/utils'
 
 interface Lx {
+  inited: boolean
   appSetting: LX.AppSetting
   hotKey: {
     enable: boolean