perf: ⬆️ Optimize the performance of the floating control bar

control/App.vue

@@ -68,12 +68,6 @@ import { ElMessage } from 'element-plus'
 const themeStore = useThemeStore()
 const deviceStore = useDeviceStore()
 
-themeStore.init()
-
-onMounted(() => {
-  window.electron.ipcRenderer.send('control-mounted')
-})
-
 const locale = computed(() => {
   const i18nLocale = i18n.global.locale.value
 
@@ -84,31 +78,37 @@ const locale = computed(() => {
 
 const deviceInfo = ref({})
 
-window.electron.ipcRenderer.on('device-change', (event, data) => {
-  deviceInfo.value = data
-})
-
-window.electron.ipcRenderer.on('language-change', (event, data) => {
-  i18n.global.locale.value = data
-})
-
-window.electron.ipcRenderer.on('theme-change', (event, data) => {
-  themeStore.update(data)
-})
+const deviceList = ref([])
 
 function handleClose() {
   window.electron.ipcRenderer.send('hide-active-window')
 }
 
-const deviceList = ref([])
-
 async function switchDevice(e) {
   e.preventDefault()
 
   const data = await deviceStore.getList()
 
-  window.electron.ipcRenderer.invoke('open-control-device-menu', data)
+  window.electron.ipcRenderer.send('open-control-device-menu', data)
 }
+
+onMounted(() => {
+  window.electron.ipcRenderer.send('control-mounted')
+
+  themeStore.init()
+
+  window.electron.ipcRenderer.on('device-change', (event, data) => {
+    deviceInfo.value = data
+  })
+
+  window.electron.ipcRenderer.on('language-change', (event, data) => {
+    i18n.global.locale.value = data
+  })
+
+  window.electron.ipcRenderer.on('theme-change', (event, data) => {
+    themeStore.update(data)
+  })
+})
 </script>
 
 <style lang="postcss">

control/electron/events/devices/index.js

@@ -2,7 +2,7 @@ import { BrowserWindow, ipcMain, Menu } from 'electron'
 import { openControlWindow } from '$control/electron/helpers/index.js'
 
 export default function (controlWindow) {
-  ipcMain.handle('open-control-device-menu', (event, deviceList) => {
+  ipcMain.on('open-control-device-menu', (event, deviceList) => {
     const template = deviceList.map((item) => {
       let label = item.$remark || item.$name
 

control/electron/events/gnirehtet/index.js

@@ -1,7 +1,7 @@
 import { BrowserWindow, ipcMain, Menu } from 'electron'
 
 export default function (controlWindow) {
-  ipcMain.handle('open-device-gnirehtet-menu', openDeviceGnirehtetMenu)
+  ipcMain.on('open-device-gnirehtet-menu', openDeviceGnirehtetMenu)
 
   function openDeviceGnirehtetMenu(event, args = {}) {
     const { options = [] } = args

control/electron/events/rotation/index.js

@@ -1,7 +1,7 @@
 import { BrowserWindow, ipcMain, Menu } from 'electron'
 
 export default function (controlWindow) {
-  ipcMain.handle('open-device-rotation-menu', openDeviceRotationMenu)
+  ipcMain.on('open-device-rotation-menu', openDeviceRotationMenu)
 
   function openDeviceRotationMenu(event, args = {}) {
     const { options = [] } = args

control/electron/events/volume/index.js

@@ -1,7 +1,7 @@
 import { BrowserWindow, ipcMain, Menu } from 'electron'
 
 export default function (controlWindow) {
-  ipcMain.handle('open-device-volume-menu', openDeviceVolumeMenu)
+  ipcMain.on('open-device-volume-menu', openDeviceVolumeMenu)
 
   function openDeviceVolumeMenu(event, args = {}) {
     const { options = [] } = args

control/electron/helpers/index.js

@@ -12,8 +12,8 @@ export function initControlWindow(mainWindow) {
     icon: getLogoPath(),
     width: 500,
     minWidth: 500,
-    height: 30,
-    maxHeight: 30,
+    height: 28,
+    maxHeight: 28,
     frame: false,
     show: false,
     autoHideMenuBar: true,

control/electron/main.js

@@ -34,8 +34,8 @@ export default (mainWindow) => {
     controlWindow = initControlWindow(mainWindow)
 
     ipcMain.on('control-mounted', () => {
-      onControlMounted(controlWindow)
       openControlWindow(controlWindow, data)
+      onControlMounted(controlWindow)
     })
   })
 }

src/components/Device/components/ControlBar/Gnirehtet/index.vue

@@ -69,7 +69,7 @@ export default {
         },
       ]
 
-      window.electron.ipcRenderer.invoke('open-device-gnirehtet-menu', {
+      window.electron.ipcRenderer.send('open-device-gnirehtet-menu', {
         options,
       })
     },

src/components/Device/components/ControlBar/Rotation/index.vue

@@ -82,7 +82,7 @@ export default {
 
       const options = toRaw(this.options)
 
-      window.electron.ipcRenderer.invoke('open-device-rotation-menu', {
+      window.electron.ipcRenderer.send('open-device-rotation-menu', {
         options,
       })
     },

src/components/Device/components/ControlBar/Synergy/index.vue

@@ -1,6 +1,7 @@
 <template>
   <el-dropdown :disabled="loading" @command="handleCommand">
     <slot :loading />
+
     <template #dropdown>
       <el-dropdown-menu>
         <template v-if="!loading">

src/components/Device/components/ControlBar/Volume/index.vue

@@ -76,7 +76,7 @@ export default {
 
       const options = toRaw(this.options)
 
-      window.electron.ipcRenderer.invoke('open-device-volume-menu', {
+      window.electron.ipcRenderer.send('open-device-volume-menu', {
         options,
       })
     },