chore(pkg): bump electron version to 22.0.0

package.json

@@ -12,7 +12,7 @@
     "electron:build-win": "yarn run gen:version && vue-cli-service electron:build --win",
     "electron:build-linux": "export NODE_OPTIONS=--openssl-legacy-provider && yarn run gen:version && vue-cli-service electron:build --linux",
     "electron:build-mac": "export NODE_OPTIONS=--openssl-legacy-provider && yarn run gen:version && vue-cli-service electron:build --mac",
-    "electron:serve": "yarn run gen:version && vue-cli-service electron:serve",
+    "electron:serve": "export NODE_OPTIONS=\"--dns-result-order=ipv4first\" && yarn run gen:version && vue-cli-service electron:serve",
     "electron:serve:sql_debug": "export VUE_APP_SQL_DEBUG=true && yarn electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
@@ -39,6 +39,7 @@
     "@ai-sdk/deepseek": "^0.1.12",
     "@ai-sdk/openai": "^1.1.14",
     "@ai-sdk/xai": "^1.1.12",
+    "@electron/remote": "^2.1.2",
     "ai": "^4.1.46",
     "appdata-path": "^1.0.0",
     "avsc": "^5.7.7",
@@ -49,8 +50,8 @@
     "crypto-js": "^4.2.0",
     "csvtojson": "^2.0.10",
     "echarts": "^5.4.3",
-    "electron-store": "^8.0.2",
-    "electron-updater": "^5.0.5",
+    "electron-store": "^8.1.0",
+    "electron-updater": "^5.3.0",
     "element-ui": "^2.15.5",
     "fs-extra": "^8.1.0",
     "js-yaml": "^4.1.0",
@@ -113,7 +114,7 @@
     "babel-plugin-component": "^1.1.1",
     "babel-plugin-prismjs": "^2.1.0",
     "chai": "^4.1.2",
-    "electron": "^13.6.6",
+    "electron": "^22.0.0",
     "electron-devtools-installer": "^3.2.0",
     "eslint": "6.5.1",
     "eslint-config-prettier": "^6.11.0",
@@ -147,7 +148,7 @@
   "license": "Apache-2.0",
   "repository": "https://github.com/emqx/MQTTX",
   "resolutions": {
-    "electron-builder": "23.0.2",
+    "electron-builder": "23.6.0",
     "webpack": "4.47.0"
   }
 }

src/background.ts

@@ -19,6 +19,7 @@ import useServices from '@/database/useServices'
 import { dialog } from 'electron'
 import ORMConfig from './database/database.config'
 import version from '@/version'
+import { initialize } from '@electron/remote/main'
 
 declare const __static: string
 
@@ -39,8 +40,6 @@ let menu: Menu | null
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
 
-app.allowRendererProcessReuse = false
-
 const { ConnectionInit, ConnectionDestroy } = useConnection()
 
 function handleIpcMessages() {
@@ -170,7 +169,6 @@ async function createWindow() {
     webPreferences: {
       devTools: isDevelopment,
       webSecurity: false,
-      enableRemoteModule: true,
       nodeIntegration: true,
       contextIsolation: false,
     },
@@ -179,6 +177,11 @@ async function createWindow() {
     icon: `${__static}/app.ico`,
   })
 
+  initialize()
+  if (win) {
+    require('@electron/remote/main').enable(win.webContents)
+  }
+
   // Restore window state
   restoreWindowState(win)
 
@@ -268,12 +271,9 @@ app.on('activate', () => {
 
 // Disabled create new window
 app.on('web-contents-created', (event, contents) => {
-  // tslint:disable-next-line:no-shadowed-variable
-  contents.on('new-window', async (event, navigationUrl) => {
-    // In this example, we'll ask the operating system
-    // to open this event's url in the default browser.
-    event.preventDefault()
-    await shell.openExternal(navigationUrl)
+  contents.setWindowOpenHandler(({ url }) => {
+    shell.openExternal(url)
+    return { action: 'deny' }
   })
 })
 

src/components/ImportData.vue

@@ -78,7 +78,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import fs from 'fs'
-import { remote } from 'electron'
+import { dialog } from '@electron/remote'
 import MyDialog from './MyDialog.vue'
 import YAML from 'js-yaml'
 import XMLConvert from 'xml-js'
@@ -148,7 +148,7 @@ export default class ImportData extends Vue {
   private getFileData() {
     let loading: ElLoadingComponent | undefined = undefined
     const extensionName = this.getExtensionName()
-    remote.dialog
+    dialog
       .showOpenDialog({
         properties: ['openFile'],
         filters: [{ name: '', extensions: [`${extensionName}`] }],

src/components/ImportScript.vue

@@ -48,7 +48,7 @@
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter } from 'vuex-class'
 import fs from 'fs'
-import { remote } from 'electron'
+import { dialog } from '@electron/remote'
 import MyDialog from './MyDialog.vue'
 import { ElLoadingComponent } from 'element-ui/types/loading'
 
@@ -81,7 +81,7 @@ export default class ImportScript extends Vue {
   private getFileData() {
     let loading: ElLoadingComponent | undefined = undefined
     const extensions = this.extension === 'avsc' ? ['avsc', 'json'] : [`${this.extension}`]
-    remote.dialog
+    dialog
       .showOpenDialog({
         properties: ['openFile'],
         filters: [{ name: '', extensions }],

src/main/newWindow.ts

@@ -1,5 +1,6 @@
 import { BrowserWindow } from 'electron'
 import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+import { enable } from '@electron/remote/main'
 
 interface WindowOptions {
   theme: Theme
@@ -24,7 +25,6 @@ const newWindow = (id: string, options: WindowOptions) => {
     y,
     webPreferences: {
       webSecurity: false,
-      enableRemoteModule: true,
       nodeIntegration: true,
       contextIsolation: false,
     },
@@ -44,6 +44,8 @@ const newWindow = (id: string, options: WindowOptions) => {
     // Load the index.html when not in development
     createWindow.loadURL(`app://./index.html/#${options.path}/${id}`)
   }
+  // 添加 @electron/remote 初始化
+  enable(createWindow.webContents)
   createWindow.on('closed', () => {
     createWindow = null
   })

src/main/updateDownloader.ts

@@ -2,6 +2,7 @@ import axios from 'axios'
 import { BrowserWindow, IpcMainEvent, ipcMain } from 'electron'
 import version from '@/version'
 import { getCurrentLang, versionDetail } from './updateChecker'
+import { enable } from '@electron/remote/main'
 
 const { autoUpdater } = require('electron-updater')
 
@@ -53,9 +54,9 @@ export async function createUpdateWindow() {
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,
-        enableRemoteModule: true,
       },
     })
+    enable(updateWindow.webContents)
     updateWindow.loadURL(link)
   } catch (e) {
     return

src/store/modules/app.ts

@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import useServices from '@/database/useServices'
-import { remote } from 'electron'
+import { getGlobal } from '@electron/remote'
 
 const TOGGLE_THEME = 'TOGGLE_THEME'
 const TOGGLE_LANG = 'TOGGLE_LANG'
@@ -38,7 +38,7 @@ const getShowConnectionList = (): boolean => {
   return JSON.parse(_showConnectionList)
 }
 
-const settingData = remote.getGlobal('sharedData')
+const settingData = getGlobal('sharedData')
 
 const app = {
   state: {

src/utils/logger.ts

@@ -1,12 +1,18 @@
 import log4js from 'log4js'
-import { app, remote } from 'electron'
+import { app } from 'electron'
+
+// Determine if we're in renderer process and import appropriate app module
+const isRenderer = process.type === 'renderer'
+// Use @electron/remote for renderer process, direct app module for main process
+const electronApp = isRenderer ? require('@electron/remote').app : app
+
 import fs from 'fs-extra'
 import path from 'path'
 
 export const getOrCreateLogDir = () => {
   const isRenderer: boolean = process.type === 'renderer'
   // Render process use remote app
-  const APP: Electron.App = isRenderer ? remote.app : app
+  const APP: Electron.App = isRenderer ? electronApp : app
 
   const STORE_PATH: string = APP.getPath('userData')
   const LOG_DIR: string = path.join(STORE_PATH, 'logs')

src/views/Home.vue

@@ -12,7 +12,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
-import { remote } from 'electron'
+import { nativeTheme } from '@electron/remote'
 import Ipc from '@/components/Ipc.vue'
 import Leftbar from '@/components/Leftbar.vue'
 import DatabaseError from '@/components/DatabaseError.vue'
@@ -38,7 +38,7 @@ export default class Home extends Vue {
   private updateActive: boolean = false
 
   private setTheme(theme: Theme): void {
-    const { shouldUseDarkColors } = remote.nativeTheme
+    const { shouldUseDarkColors } = nativeTheme
     let currentTheme = theme
     if (this.syncOsTheme) {
       currentTheme = shouldUseDarkColors ? 'night' : 'light'

src/views/connections/ConnectionForm.vue

@@ -216,7 +216,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="2">
-                  <a href="javascript:;" class="icon-oper" @click="getFilePath('ca')">
+                  <a href="javascript:;" class="icon-oper" @click="getFileContent('ca')">
                     <i class="el-icon-folder-opened"></i>
                   </a>
                 </el-col>
@@ -226,7 +226,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="2">
-                  <a href="javascript:;" class="icon-oper" @click="getFilePath('cert')">
+                  <a href="javascript:;" class="icon-oper" @click="getFileContent('cert')">
                     <i class="el-icon-folder-opened"></i>
                   </a>
                 </el-col>
@@ -236,7 +236,7 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="2">
-                  <a href="javascript:;" class="icon-oper" @click="getFilePath('key')">
+                  <a href="javascript:;" class="icon-oper" @click="getFileContent('key')">
                     <i class="el-icon-folder-opened"></i>
                   </a>
                 </el-col>
@@ -594,9 +594,9 @@
 </template>
 
 <script lang="ts">
-import { remote } from 'electron'
 import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
+import { dialog } from '@electron/remote'
 import _ from 'lodash'
 import time from '@/utils/time'
 import useServices from '@/database/useServices'
@@ -776,8 +776,8 @@ export default class ConnectionForm extends Vue {
     this.record.clientIdWithTime = !this.record.clientIdWithTime
   }
 
-  private getFilePath(key: 'ca' | 'cert' | 'key') {
-    remote.dialog
+  private getFileContent(key: 'ca' | 'cert' | 'key') {
+    dialog
       .showOpenDialog({
         properties: ['openFile'],
         filters: [{ name: 'CA', extensions: ['crt', 'key', 'pem', 'jks', 'der', 'cer', 'pfx'] }],

src/views/connections/ConnectionsDetail.vue

@@ -2128,7 +2128,7 @@ export default class ConnectionsDetail extends Vue {
         button.addEventListener('click', () => {
           const sendMsg = promptInfo ? `${promptInfo}\n${msgTitle}` : msgTitle
           this.askCopilot(
-            `${this.$tc('common.promptError')}\n\`\`\`${sendMsg}\`\`\`\n${this.$tc('common.myConnectionInfo')}`,
+            `${this.$tc('copilot.promptError')}\n\`\`\`${sendMsg}\`\`\`\n${this.$tc('copilot.myConnectionInfo')}`,
           )
           notify.close()
           callback?.()

src/views/settings/index.vue

@@ -420,7 +420,8 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
-import { ipcRenderer, remote } from 'electron'
+import { ipcRenderer } from 'electron'
+import { nativeTheme } from '@electron/remote'
 import ImportData from '@/components/ImportData.vue'
 import ExportData from '@/components/ExportData.vue'
 import ClearUpHistoryData from '@/components/ClearUpHistoryData.vue'
@@ -518,7 +519,7 @@ export default class Settings extends Vue {
 
   private handleSyncOsThemeSwitchChange(value: boolean) {
     if (value) {
-      const theme = remote.nativeTheme.shouldUseDarkColors ? 'night' : 'light'
+      const theme = nativeTheme.shouldUseDarkColors ? 'night' : 'light'
       this.handleSelectChange('theme', theme)
     }
     this.actionSyncOsTheme({ syncOsTheme: value })