perf: 🚀 优化页面查找工具性能

components.d.ts

@@ -28,8 +28,7 @@ declare module 'vue' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElIconArrowDownBold: typeof import('@element-plus/icons-vue')['ArrowDownBold']
-    ElIconArrowUpBold: typeof import('@element-plus/icons-vue')['ArrowUpBold']
+    ElIconSearch: typeof import('@element-plus/icons-vue')['Search']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']

copilot/App.vue

@@ -2,7 +2,7 @@
   <div class="flex flex-col absolute inset-0 h-full overflow-hidden">
     <div class="py-4 px-4 flex items-center flex-none">
       <a class="block" :href="escrcpyURL" target="_blank">
-        <img src="@electron/resources/build/logo.png" class="h-9" alt="" />
+        <img src="#electron/resources/build/logo.png" class="h-9" alt="" />
       </a>
       <div class="pl-2 text-sm">
         Escrcpy Copilot

copilot/components/Transmission/Message/index.vue

@@ -25,10 +25,10 @@
 </template>
 
 <script>
-import logoURL from '@electron/resources/build/logo.png'
-import userURL from '@/assets/user.png'
-import mobileURL from '@/assets/mobile.png'
-import computerURL from '@/assets/computer.png'
+import logoURL from '#electron/resources/build/logo.png'
+import userURL from '#/assets/user.png'
+import mobileURL from '#/assets/mobile.png'
+import computerURL from '#/assets/computer.png'
 
 export default {
   props: {

copilot/main.js

@@ -2,14 +2,14 @@ import { createApp, toRaw } from 'vue'
 import App from './App.vue'
 import { mockAPI } from './utils/index.js'
 import ws from './utils/ws.js'
-import { i18n, t } from '@/locales/index.js'
-import plugins from '@/plugins/index.js'
-import icons from '@/icons/index.js'
+import { i18n, t } from '#/locales/index.js'
+import plugins from '#/plugins/index.js'
+import icons from '#/icons/index.js'
 
-import { replaceIP, restoreIP } from '@/utils/index.js'
+import { replaceIP, restoreIP } from '#/utils/index.js'
 
 import 'virtual:uno.css'
-import '@/styles/index.js'
+import '#/styles/index.js'
 
 const app = createApp(App)
 

electron/configs/android-platform-tools/index.js

@@ -1,4 +1,4 @@
-import { extraResolve } from '@electron/helpers/index.js'
+import { extraResolve } from '#electron/helpers/index.js'
 
 export const getAdbPath = () => {
   switch (process.platform) {

electron/configs/gnirehtet/index.js

@@ -1,5 +1,5 @@
-import { extraResolve } from '@electron/helpers/index.js'
 import which from 'which'
+import { extraResolve } from '#electron/helpers/index.js'
 
 export const getGnirehtetPath = () => {
   switch (process.platform) {

electron/configs/index.js

@@ -1,6 +1,6 @@
 import { resolve } from 'node:path'
 
-import { buildResolve, extraResolve } from '@electron/helpers/index.js'
+import { buildResolve, extraResolve } from '#electron/helpers/index.js'
 
 export { adbPath } from './android-platform-tools/index.js'
 

electron/configs/scrcpy/index.js

@@ -1,5 +1,5 @@
-import { extraResolve } from '@electron/helpers/index.js'
 import which from 'which'
+import { extraResolve } from '#electron/helpers/index.js'
 
 export const getScrcpyPath = () => {
   switch (process.platform) {

electron/events/handles/index.js

@@ -1,10 +1,7 @@
 import fs from 'fs-extra'
 import { dialog, ipcMain, shell } from 'electron'
-import themeHandles from './theme/index.js'
 
 export default (mainWindow) => {
-  themeHandles(mainWindow)
-
   ipcMain.handle(
     'show-open-dialog',
     async (_, { preset = '', ...options } = {}) => {

electron/events/index.js

@@ -1,9 +1,10 @@
 import { app, ipcMain } from 'electron'
 
+import shortcuts from './shortcuts/index.js'
 import updater from './updater/index.js'
 import handles from './handles/index.js'
 import tray from './tray/index.js'
-// import search from './search/index.js'
+import theme from './theme/index.js'
 
 export default (mainWindow) => {
   ipcMain.on('restart-app', () => {
@@ -15,5 +16,6 @@ export default (mainWindow) => {
   handles(mainWindow)
   updater(mainWindow)
   tray(mainWindow)
-  // search(mainWindow)
+  theme(mainWindow)
+  shortcuts(mainWindow)
 }

electron/events/shortcuts/index.js

@@ -0,0 +1,13 @@
+import { globalShortcut } from 'electron'
+
+export default (mainWindow) => {
+  mainWindow.on('focus', () => {
+    globalShortcut.register('CommandOrControl+F', (event) => {
+      mainWindow.webContents.send('focus-on-search')
+    })
+  })
+
+  mainWindow.on('blur', () => {
+    globalShortcut.unregister('CommandOrControl+F')
+  })
+}

electron/events/tray/index.js

@@ -1,7 +1,7 @@
 import { Menu, Tray, app, dialog } from 'electron'
-import { trayPath } from '@electron/configs/index.js'
-import appStore from '@electron/helpers/store.js'
-import { executeI18n } from '@electron/helpers/index.js'
+import { trayPath } from '#electron/configs/index.js'
+import appStore from '#electron/helpers/store.js'
+import { executeI18n } from '#electron/helpers/index.js'
 
 export default (mainWindow) => {
   const t = value => executeI18n(mainWindow, value)

electron/events/updater/index.js

@@ -1,7 +1,7 @@
 import { app, ipcMain } from 'electron'
 import { is } from '@electron-toolkit/utils'
 import electronUpdater from 'electron-updater'
-import { devPublishPath } from '@electron/configs/index.js'
+import { devPublishPath } from '#electron/configs/index.js'
 
 const { autoUpdater } = electronUpdater
 

electron/exposes/adbkit/index.js

@@ -4,9 +4,9 @@ import path from 'node:path'
 import fs from 'node:fs'
 import dayjs from 'dayjs'
 import { Adb } from '@devicefarmer/adbkit'
-import appStore from '@electron/helpers/store.js'
-import { adbPath } from '@electron/configs/index.js'
 import { uniq } from 'lodash-es'
+import appStore from '#electron/helpers/store.js'
+import { adbPath } from '#electron/configs/index.js'
 
 const exec = util.promisify(_exec)
 

electron/exposes/gnirehtet/index.js

@@ -1,10 +1,10 @@
 import { spawn } from 'node:child_process'
-import appStore from '@electron/helpers/store.js'
+import appStore from '#electron/helpers/store.js'
 import {
   adbPath,
   gnirehtetApkPath,
   gnirehtetPath,
-} from '@electron/configs/index.js'
+} from '#electron/configs/index.js'
 
 const appDebug = appStore.get('common.debug') || false
 

electron/exposes/index.js

@@ -1,15 +1,14 @@
 import path from 'node:path'
 
-import appLog from '@electron/helpers/log.js'
-import '@electron/helpers/console.js'
-
-import store from '@electron/helpers/store.js'
-import * as configs from '@electron/configs/index.js'
-
+import '#electron/helpers/console.js'
 import electron from './electron/index.js'
 import adbkit from './adbkit/index.js'
 import scrcpy from './scrcpy/index.js'
 import gnirehtet from './gnirehtet/index.js'
+import search from './search/index.js'
+import * as configs from '#electron/configs/index.js'
+import store from '#electron/helpers/store.js'
+import appLog from '#electron/helpers/log.js'
 
 export default {
   init(expose) {
@@ -31,5 +30,7 @@ export default {
     expose('scrcpy', scrcpy({ adbkit: adbkitExecute }))
 
     expose('gnirehtet', gnirehtet({ adbkit: adbkitExecute }))
+
+    expose('findInPageModal', search())
   },
 }

electron/exposes/log/index.js

@@ -1,5 +1,5 @@
 import log from 'electron-log/main.js'
-import { createProxy } from '@electron/helpers/index'
+import { createProxy } from '#electron/helpers/index'
 
 const levels = Object.keys(log.functions)
 

electron/exposes/scrcpy/index.js

@@ -1,8 +1,8 @@
 import util from 'node:util'
 import { exec as _exec, spawn } from 'node:child_process'
-import appStore from '@electron/helpers/store.js'
-import { adbPath, scrcpyPath } from '@electron/configs/index.js'
-import { replaceIP, sleep } from '@renderer/utils/index.js'
+import { replaceIP, sleep } from '#renderer/utils/index.js'
+import appStore from '#electron/helpers/store.js'
+import { adbPath, scrcpyPath } from '#electron/configs/index.js'
 
 let adbkit
 

electron/exposes/search/index.js

@@ -0,0 +1,57 @@
+import remote from '@electron/remote'
+import { FindInPage } from 'electron-find-in-page'
+import { primaryColor } from '#renderer/configs/index.js'
+
+export default () => {
+  const theme = {
+    isDark: false,
+  }
+
+  let findInPage = create()
+
+  async function open({ isDark = false } = {}) {
+    if (theme.isDark !== isDark) {
+      theme.isDark = isDark
+      await update()
+    }
+
+    return findInPage.openFindWindow()
+  }
+
+  function close() {
+    return findInPage.closeFindWindow()
+  }
+
+  async function update() {
+    try {
+      await findInPage.destroy()
+    }
+    catch (error) {
+      console.warn('error', error.message)
+    }
+
+    findInPage = create()
+  }
+
+  function create() {
+    return new FindInPage(remote.getCurrentWebContents(), {
+      preload: true,
+      inputFocusColor: primaryColor,
+      ...(theme.isDark
+        ? {
+            boxShadowColor: '#4C4D4F',
+            boxBgColor: '#262727',
+            inputColor: '#CFD3DC',
+            inputBgColor: '#141414',
+            textColor: '#CFD3DC',
+            textHoverBgColor: '#4C4D4F',
+          }
+        : {}),
+    })
+  }
+
+  return {
+    open,
+    close,
+  }
+}

electron/helpers/console.js

@@ -1,7 +1,6 @@
-import log from '@electron/helpers/log.js'
-
 import appStore from './store.js'
 import { createProxy } from './index.js'
+import log from '#electron/helpers/log.js'
 
 const debug = appStore.get('common.debug') || false
 

electron/helpers/log.js

@@ -1,6 +1,6 @@
 import { shell } from 'electron'
 import log from 'electron-log/main.js'
-import { createProxy } from '@electron/helpers/index'
+import { createProxy } from '#electron/helpers/index'
 
 log.transports.console.level = false
 

electron/main.js

@@ -5,6 +5,7 @@ import { fileURLToPath } from 'node:url'
 import { BrowserWindow, app, shell } from 'electron'
 import { electronApp, optimizer } from '@electron-toolkit/utils'
 import contextMenu from 'electron-context-menu'
+import remote from '@electron/remote/main'
 
 // process.js 必须位于非依赖项的顶部
 import './helpers/process.js'
@@ -91,6 +92,9 @@ function createWindow() {
     backgroundColor: 'white',
   })
 
+  remote.enable(mainWindow.webContents)
+  remote.initialize()
+
   mainWindow.on('ready-to-show', () => {
     mainWindow.show()
   })

jsconfig.json

@@ -2,11 +2,11 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": ["src/*"],
-      "@copilot/*": ["copilot/*"],
-      "@root/*": ["*"],
-      "@electron/*": ["electron/*"],
-      "@renderer/*": ["src/*"]
+      "#/*": ["src/*"],
+      "#copilot/*": ["copilot/*"],
+      "#root/*": ["*"],
+      "#electron/*": ["electron/*"],
+      "#renderer/*": ["src/*"]
     }
   },
   "exclude": ["node_modules", "dist", "dist-electron", "dist-release"],

package.json

@@ -21,7 +21,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "electron-find-in-page": "^1.0.8",
     "electron-in-page-search": "^1.3.2",
     "vue": "^3.4.26"
   },
@@ -30,6 +29,7 @@
     "@devicefarmer/adbkit": "^3.2.6",
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
+    "@electron/remote": "^2.1.2",
     "@hono/node-server": "^1.11.1",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@unocss/reset": "^0.59.4",
@@ -40,6 +40,7 @@
     "electron": "^30.0.3",
     "electron-builder": "^24.13.3",
     "electron-context-menu": "^4.0.0",
+    "electron-find-in-page": "^1.0.8",
     "electron-log": "^5.1.2",
     "electron-store": "^9.0.0",
     "electron-updater": "^6.1.8",