在 Electron 环境中开启缩放页面功能

frontend/src/useful/env.ts

@@ -12,10 +12,41 @@ const isElectron = !!(nodeProcess?.versions?.electron)
 
 const openAlwaysOnTopWindow = (url: string, target = '_blank') => {
   if (isElectron) {
-    const opener: any = window.open(url, target, 'frame=true,alwaysOnTop=true')
+    const opener: any = window.open(url, target, 'nodeIntegration=yes,frame=true,alwaysOnTop=true,enableRemoteModule=true')
 
-    // 让弹出的窗口置顶
-    opener.eval("require('electron').remote.getCurrentWindow().setAlwaysOnTop(true)")
+    const preload = `
+      // 在 Electron 环境中开启鼠标滚轮缩放页面
+      const webContents = require('electron').remote.getCurrentWebContents()
+
+      const changeZoomFactor = zoomIn => {
+        const currentZoomFactor = webContents.getZoomFactor()
+        const factor = currentZoomFactor + (zoomIn ? 0.1 : -0.1)
+
+        if (factor > 0.2 && factor < 3) {
+          webContents.setZoomFactor(factor)
+        }
+      }
+
+      window.addEventListener('keydown', e => {
+        if (e.ctrlKey) {
+          if (e.key === '0') {
+            webContents.setZoomFactor(1)
+          } else if (e.key === '=') {
+            changeZoomFactor(true)
+          } else if (e.key === '-') {
+            changeZoomFactor(false)
+          }
+        }
+      })
+
+      window.addEventListener('mousewheel', e => {
+        if (e.ctrlKey) {
+          changeZoomFactor(e.deltaY < 0)
+        }
+      })
+    `
+
+    opener.eval(preload)
 
     return opener
   } else {

frontend/src/useful/startup.ts

@@ -2,6 +2,7 @@ import { useStore } from 'vuex'
 import { useBus } from './bus'
 import RunPlugin from '@/plugins/RunPlugin'
 import { copyText } from './copy-text'
+import env from './env'
 
 export default function startup () {
   const bus = useBus()
@@ -19,4 +20,38 @@ export default function startup () {
   })
 
   bus.on('copy-text', copyText)
+
+  // 在 Electron 环境中开启缩放页面功能
+  if (env.isElectron) {
+    const webContents = env.require('electron').remote.getCurrentWebContents()
+
+    const changeZoomFactor = (zoomIn: boolean) => {
+      const currentZoomFactor = webContents.getZoomFactor()
+      const factor = currentZoomFactor + (zoomIn ? 0.1 : -0.1)
+
+      if (factor > 0.2 && factor < 3) {
+        webContents.setZoomFactor(factor)
+      }
+    }
+
+    window.addEventListener('keydown', e => {
+      if (e.ctrlKey) {
+        if (e.key === '0') {
+          webContents.setZoomFactor(1)
+        } else if (e.key === '=') {
+          changeZoomFactor(true)
+        } else if (e.key === '-') {
+          changeZoomFactor(false)
+        }
+      }
+    })
+
+    window.addEventListener('mousewheel', event => {
+      const e = event as WheelEvent
+
+      if (e.ctrlKey) {
+        changeZoomFactor(e.deltaY < 0)
+      }
+    })
+  }
 }

src/app.ts

@@ -52,7 +52,8 @@ const createWindow = () => {
     backgroundColor: '#282a2b',
     webPreferences: {
       webSecurity: false,
-      nodeIntegration: true
+      nodeIntegration: true,
+      enableRemoteModule: true,
     },
   })