feat: add configurable GPU acceleration toggle

- Add disableHardwareAcceleration setting to electron-store
- Add GPU toggle UI in settings page with tooltip
- Show restart prompt when toggle changes
- Add i18n support for 5 languages (zh/en/tr/ja/hu)
- Update TypeScript types and Vuex store

Author: ysfscream

src/background.ts

@@ -40,12 +40,23 @@ declare const __static: string
 
 const Store = require('electron-store')
 const electronStore = new Store()
+const DISABLE_HARDWARE_ACCELERATION_SETTING_KEY = 'settings.disableHardwareAcceleration'
 let theme: Theme = 'light'
 let syncOsTheme = false
 let autoCheckUpdate: boolean = true
 const isDevelopment: boolean = process.env.NODE_ENV !== 'production'
 const isMac: boolean = process.platform === 'darwin'
 
+const disableHardwareAccelerationBySetting =
+  electronStore.get(DISABLE_HARDWARE_ACCELERATION_SETTING_KEY, false) === true
+
+// Hardware acceleration must be configured before the app is ready, so this
+// setting is read from electron-store instead of the database settings table.
+if (disableHardwareAccelerationBySetting) {
+  app.disableHardwareAcceleration()
+  console.log('[GPU] Hardware acceleration disabled')
+}
+
 // Keep a global reference of the window object, if you don't, the window will
 // be closed automatically when the JavaScript object is garbage collected.
 let win: BrowserWindow | null
@@ -222,6 +233,7 @@ async function createWindow() {
         logLevel: setting.logLevel,
         ignoreQoS0Message: setting.ignoreQoS0Message,
         topicWhitespaceDetection: electronStore.get('settings.topicWhitespaceDetection', false),
+        disableHardwareAcceleration: disableHardwareAccelerationBySetting,
       }
     }
   } catch (error) {
@@ -234,6 +246,7 @@ async function createWindow() {
       currentLang: 'en',
       syncOsTheme: false,
       topicWhitespaceDetection: electronStore.get('settings.topicWhitespaceDetection', false),
+      disableHardwareAcceleration: disableHardwareAccelerationBySetting,
     }
   }
   // Create the browser window.

src/lang/settings.ts

@@ -153,6 +153,48 @@ export default {
     ja: 'トピック内の空白を示し、送受信の不一致を防ぐための確認に役立ちます。',
     hu: 'Highlights whitespace in topics to help prevent publish/subscribe mismatches.',
   },
+  disableHardwareAcceleration: {
+    zh: '禁用 GPU 加速',
+    en: 'Disable GPU Acceleration',
+    tr: 'Disable GPU Acceleration',
+    ja: 'Disable GPU Acceleration',
+    hu: 'Disable GPU Acceleration',
+  },
+  disableHardwareAccelerationDesc: {
+    zh: 'GPU 加速利用显卡硬件渲染界面，可使操作更流畅并降低 CPU 占用。如遇画面卡顿、花屏或兼容性问题，可尝试关闭此选项。',
+    en: 'GPU acceleration uses graphics hardware to render the UI, making operations smoother and reducing CPU usage. Disable this option if you experience screen lag, artifacts, or compatibility issues.',
+    tr: 'GPU acceleration uses graphics hardware to render the UI, making operations smoother and reducing CPU usage. Disable this option if you experience screen lag, artifacts, or compatibility issues.',
+    ja: 'GPU acceleration uses graphics hardware to render the UI, making operations smoother and reducing CPU usage. Disable this option if you experience screen lag, artifacts, or compatibility issues.',
+    hu: 'GPU acceleration uses graphics hardware to render the UI, making operations smoother and reducing CPU usage. Disable this option if you experience screen lag, artifacts, or compatibility issues.',
+  },
+  restartRequired: {
+    zh: '需要重启',
+    en: 'Restart Required',
+    tr: 'Restart Required',
+    ja: 'Restart Required',
+    hu: 'Restart Required',
+  },
+  restartRequiredDesc: {
+    zh: 'GPU 加速设置已更新。需要重启应用才能生效，是否立即重启？',
+    en: 'The GPU acceleration setting has been updated. Restart the app now to apply the change?',
+    tr: 'The GPU acceleration setting has been updated. Restart the app now to apply the change?',
+    ja: 'The GPU acceleration setting has been updated. Restart the app now to apply the change?',
+    hu: 'The GPU acceleration setting has been updated. Restart the app now to apply the change?',
+  },
+  restartNow: {
+    zh: '立即重启',
+    en: 'Restart Now',
+    tr: 'Restart Now',
+    ja: 'Restart Now',
+    hu: 'Restart Now',
+  },
+  restartLater: {
+    zh: '稍后重启',
+    en: 'Later',
+    tr: 'Later',
+    ja: 'Later',
+    hu: 'Later',
+  },
   autoResubDesc: {
     zh: '开启后，MQTTX 连接后会自动重新订阅本地保存的所有订阅',
     en: 'Once enabled, MQTTX will automatically resubscribe to all locally saved subscriptions after connecting',

src/store/getter.ts

@@ -26,6 +26,7 @@ const getters = {
   ignoreQoS0Message: (state: State) => state.app.ignoreQoS0Message,
   topicWhitespaceDetection: (state: State) => state.app.topicWhitespaceDetection,
   maxPayloadDisplaySize: (state: State) => state.app.maxPayloadDisplaySize,
+  disableHardwareAcceleration: (state: State) => state.app.disableHardwareAcceleration,
 }
 
 export default getters

src/store/modules/app.ts

@@ -35,6 +35,8 @@ const SET_DATABASE_FAIL_MESSAGE = 'SET_DATABASE_FAIL_MESSAGE'
 const TOGGLE_IGNORE_QOS0_MESSAGE = 'TOGGLE_IGNORE_QOS0_MESSAGE'
 const TOGGLE_TOPIC_WHITESPACE_DETECTION = 'TOGGLE_TOPIC_WHITESPACE_DETECTION'
 const SET_MAX_PAYLOAD_DISPLAY_SIZE = 'SET_MAX_PAYLOAD_DISPLAY_SIZE'
+const TOGGLE_DISABLE_HARDWARE_ACCELERATION = 'TOGGLE_DISABLE_HARDWARE_ACCELERATION'
+const DISABLE_HARDWARE_ACCELERATION_SETTING_KEY = 'settings.disableHardwareAcceleration'
 
 const getShowConnectionList = (): boolean => {
   const _showConnectionList: string | null = localStorage.getItem('showConnectionList')
@@ -77,6 +79,9 @@ const app = {
     maxPayloadDisplaySize: normalizeMaxPayloadDisplaySize(
       electronStore.get('settings.maxPayloadDisplaySize', DEFAULT_MAX_PAYLOAD_DISPLAY_SIZE),
     ),
+    disableHardwareAcceleration:
+      settingData.disableHardwareAcceleration ??
+      electronStore.get(DISABLE_HARDWARE_ACCELERATION_SETTING_KEY, false) === true,
   },
   mutations: {
     [TOGGLE_THEME](state: App, currentTheme: Theme) {
@@ -190,6 +195,9 @@ const app = {
     [SET_MAX_PAYLOAD_DISPLAY_SIZE](state: App, maxPayloadDisplaySize: number) {
       state.maxPayloadDisplaySize = maxPayloadDisplaySize
     },
+    [TOGGLE_DISABLE_HARDWARE_ACCELERATION](state: App, disableHardwareAcceleration: boolean) {
+      state.disableHardwareAcceleration = disableHardwareAcceleration
+    },
   },
   actions: {
     async TOGGLE_THEME({ commit }: any, payload: App) {
@@ -325,6 +333,11 @@ const app = {
       commit(SET_MAX_PAYLOAD_DISPLAY_SIZE, normalizedValue)
       electronStore.set('settings.maxPayloadDisplaySize', normalizedValue)
     },
+    TOGGLE_DISABLE_HARDWARE_ACCELERATION({ commit }: any, payload: App) {
+      commit(TOGGLE_DISABLE_HARDWARE_ACCELERATION, payload.disableHardwareAcceleration)
+      settingData.disableHardwareAcceleration = payload.disableHardwareAcceleration
+      electronStore.set(DISABLE_HARDWARE_ACCELERATION_SETTING_KEY, payload.disableHardwareAcceleration)
+    },
   },
 }
 

src/types/global.d.ts

@@ -116,6 +116,7 @@ declare global {
     ignoreQoS0Message: boolean
     topicWhitespaceDetection: boolean
     maxPayloadDisplaySize: number
+    disableHardwareAcceleration: boolean
   }
 
   interface State {

src/views/settings/index.vue

@@ -370,6 +370,32 @@
       </el-row>
       <el-divider></el-divider>
 
+      <el-row class="settings-item" type="flex" justify="space-between">
+        <el-col :span="20">
+          <label>{{ $t('settings.disableHardwareAcceleration') }}</label>
+          <el-tooltip
+            placement="top"
+            :effect="currentTheme !== 'light' ? 'light' : 'dark'"
+            :open-delay="500"
+            :content="$t('settings.disableHardwareAccelerationDesc')"
+          >
+            <a href="javascript:;" class="icon-oper">
+              <i class="el-icon-warning-outline"></i>
+            </a>
+          </el-tooltip>
+        </el-col>
+        <el-col :span="4">
+          <el-switch
+            :value="disableHardwareAcceleration"
+            active-color="#13ce66"
+            inactive-color="#A2A9B0"
+            @change="handleDisableHardwareAccelerationChange"
+          >
+          </el-switch>
+        </el-col>
+      </el-row>
+      <el-divider></el-divider>
+
       <ImportData :visible.sync="showImportData" />
       <ExportData :visible.sync="showExportData" />
       <ClearUpHistoryData :visible.sync="showHistoryData" />
@@ -474,7 +500,7 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { Getter, Action } from 'vuex-class'
 import { ipcRenderer } from 'electron'
-import { nativeTheme } from '@electron/remote'
+import { app as remoteApp, nativeTheme } from '@electron/remote'
 import ImportData from '@/components/ImportData.vue'
 import ExportData from '@/components/ExportData.vue'
 import ClearUpHistoryData from '@/components/ClearUpHistoryData.vue'
@@ -521,6 +547,9 @@ export default class Settings extends Vue {
   @Action('SET_MAX_PAYLOAD_DISPLAY_SIZE') private actionSetMaxPayloadDisplaySize!: (payload: {
     maxPayloadDisplaySize: number
   }) => void
+  @Action('TOGGLE_DISABLE_HARDWARE_ACCELERATION') private actionToggleDisableHardwareAcceleration!: (payload: {
+    disableHardwareAcceleration: boolean
+  }) => void
 
   @Getter('currentTheme') private currentTheme!: Theme
   @Getter('currentLang') private currentLang!: Language
@@ -538,6 +567,7 @@ export default class Settings extends Vue {
   @Getter('ignoreQoS0Message') private ignoreQoS0Message!: boolean
   @Getter('topicWhitespaceDetection') private topicWhitespaceDetection!: boolean
   @Getter('maxPayloadDisplaySize') private maxPayloadDisplaySize!: number
+  @Getter('disableHardwareAcceleration') private disableHardwareAcceleration!: boolean
 
   private showAIModelsSelect = false
 
@@ -630,6 +660,11 @@ export default class Settings extends Vue {
     this.actionToggleTopicWhitespaceDetection({ topicWhitespaceDetection: value })
   }
 
+  private handleDisableHardwareAccelerationChange(value: boolean) {
+    this.actionToggleDisableHardwareAcceleration({ disableHardwareAcceleration: value })
+    this.promptAppRestart()
+  }
+
   private handleInputChanged(value: number) {
     this.actionMaxReconnectTimes({ maxReconnectTimes: value })
   }
@@ -701,14 +736,30 @@ export default class Settings extends Vue {
     this.showAIModelsSelect = false
   }
 
-  private queryAIAPIHost(queryString: string, cb: (r: any[]) => {}) {
+  private queryAIAPIHost(queryString: string, cb: (r: any[]) => void) {
     cb(queryString ? this.AIAPIHostOptions.filter((item) => item.value.includes(queryString)) : this.AIAPIHostOptions)
   }
 
   private handleIgnoreQoS0MessageSwitchChange(value: boolean) {
     this.actionToggleIgnoreQoS0Message({ ignoreQoS0Message: value })
   }
 
+  private promptAppRestart() {
+    this.$confirm(this.$t('settings.restartRequiredDesc') as string, {
+      title: this.$t('settings.restartRequired') as string,
+      showClose: false,
+      closeOnClickModal: false,
+      confirmButtonText: this.$t('settings.restartNow') as string,
+      cancelButtonText: this.$t('settings.restartLater') as string,
+      type: 'warning',
+    })
+      .then(() => {
+        remoteApp.relaunch()
+        remoteApp.exit()
+      })
+      .catch(() => undefined)
+  }
+
   private created() {
     this.getAIConfigs()
     this.payloadDisplaySizeValue = this.maxPayloadDisplaySize