perf: ♻️ FindInPage API

components.d.ts

@@ -30,16 +30,6 @@ declare module 'vue' {
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElIconArrowDownBold: typeof import('@element-plus/icons-vue')['ArrowDownBold']
     ElIconArrowUpBold: typeof import('@element-plus/icons-vue')['ArrowUpBold']
-    ElIconCaretLeft: typeof import('@element-plus/icons-vue')['CaretLeft']
-    ElIconCaretRight: typeof import('@element-plus/icons-vue')['CaretRight']
-    ElIconClose: typeof import('@element-plus/icons-vue')['Close']
-    ElIconCloseBold: typeof import('@element-plus/icons-vue')['CloseBold']
-    ElIconEditPen: typeof import('@element-plus/icons-vue')['EditPen']
-    ElIconLoading: typeof import('@element-plus/icons-vue')['Loading']
-    ElIconOperation: typeof import('@element-plus/icons-vue')['Operation']
-    ElIconQuestionFilled: typeof import('@element-plus/icons-vue')['QuestionFilled']
-    ElIconSelect: typeof import('@element-plus/icons-vue')['Select']
-    ElIconWarningFilled: typeof import('@element-plus/icons-vue')['WarningFilled']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElLink: typeof import('element-plus/es')['ElLink']
     ElOption: typeof import('element-plus/es')['ElOption']
@@ -69,7 +59,6 @@ declare module 'vue' {
     Remark: typeof import('./src/components/Device/components/Remark/index.vue')['default']
     Rotation: typeof import('./src/components/Device/components/ControlBar/Rotation/index.vue')['default']
     Screenshot: typeof import('./src/components/Device/components/ControlBar/Screenshot/index.vue')['default']
-    Search: typeof import('./src/components/Search/index.vue')['default']
     TerminalAction: typeof import('./src/components/Device/components/TerminalAction/index.vue')['default']
     TerminalDialog: typeof import('./src/components/Device/components/TerminalAction/components/TerminalDialog/index.vue')['default']
     VideoCodecSelect: typeof import('./src/components/Preference/components/VideoCodecSelect/index.vue')['default']

electron/events/handles/index.js

@@ -1,11 +1,9 @@
 import fs from 'fs-extra'
 import { dialog, ipcMain, shell } from 'electron'
 import themeHandles from './theme/index.js'
-import searchHandles from './search/index.js'
 
 export default (mainWindow) => {
   themeHandles(mainWindow)
-  searchHandles(mainWindow)
 
   ipcMain.handle(
     'show-open-dialog',

electron/events/index.js

@@ -3,14 +3,17 @@ import { app, ipcMain } from 'electron'
 import updater from './updater/index.js'
 import handles from './handles/index.js'
 import tray from './tray/index.js'
+// import search from './search/index.js'
 
 export default (mainWindow) => {
   ipcMain.on('restart-app', () => {
     app.isQuiting = true
     app.relaunch()
     app.quit()
   })
+
   handles(mainWindow)
   updater(mainWindow)
   tray(mainWindow)
+  // search(mainWindow)
 }

electron/events/search/helper.js

@@ -0,0 +1,40 @@
+export class FindInPageManager {
+  constructor(webContents) {
+    this.webContents = webContents
+    this.text = ''
+  }
+
+  update({ webContents } = {}) {
+    this.webContents = webContents
+  }
+
+  async start({ text, args = {} } = {}) {
+    this.text = text
+
+    this.webContents.on('found-in-page', (event, result) => {
+      console.log('found-in-page.result', result)
+    })
+
+    return this.webContents.findInPage(this.text, { findNext: false, ...args })
+  }
+
+  async next({ ...args } = {}) {
+    return this.webContents.findInPage(this.text, {
+      forward: true,
+      findNext: true,
+      ...args,
+    })
+  }
+
+  async prev({ ...args } = {}) {
+    return this.webContents.findInPage(this.text, {
+      forward: false,
+      findNext: true,
+      ...args,
+    })
+  }
+
+  async stop(action = 'clearSelection') {
+    return this.webContents.stopFindInPage(action)
+  }
+}

electron/events/search/index.js

@@ -0,0 +1,29 @@
+import { globalShortcut, ipcMain } from 'electron'
+import { FindInPageManager } from './helper.js'
+
+export default (mainWindow) => {
+  mainWindow.on('focus', () => {
+    globalShortcut.register('CommandOrControl+F', (event) => {
+      mainWindow.webContents.send('focus-on-search')
+    })
+  })
+
+  mainWindow.on('blur', () => {
+    globalShortcut.unregister('CommandOrControl+F')
+  })
+
+  const findInPageManager = new FindInPageManager(mainWindow.webContents)
+
+  ipcMain.handle('findInPageStart', async (event, args = {}) => {
+    return findInPageManager.start(args)
+  })
+  ipcMain.handle('findInPageNext', async (event, args = {}) => {
+    return findInPageManager.next(args)
+  })
+  ipcMain.handle('findInPagePrev', async (event, args = {}) => {
+    return findInPageManager.prev(args)
+  })
+  ipcMain.handle('findInPageStop', async (event, args = {}) => {
+    return findInPageManager.stop(args)
+  })
+}

eslint.config.js

@@ -45,6 +45,7 @@ export default antfu(
       'no-restricted-syntax': 'off',
       'no-new': 'off',
       'prefer-promise-reject-errors': 'off',
+      'no-unused-expressions': 'off',
 
       'vue/html-self-closing': 'off',
       'vue/block-order': 'off',

package.json

@@ -21,6 +21,8 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "electron-find-in-page": "^1.0.8",
+    "electron-in-page-search": "^1.3.2",
     "vue": "^3.4.26"
   },
   "devDependencies": {
@@ -35,7 +37,7 @@
     "@viarotel-org/unocss-preset-shades": "^0.8.2",
     "@vitejs/plugin-vue": "^5.0.4",
     "dayjs": "^1.11.11",
-    "electron": "^30.0.2",
+    "electron": "^30.0.3",
     "electron-builder": "^24.13.3",
     "electron-context-menu": "^4.0.0",
     "electron-log": "^5.1.2",

src/App.vue

@@ -3,9 +3,9 @@
     <el-tabs
       v-model="activeTab"
       class="el-tabs-flex"
-      addable
       @tab-change="onTabChange"
     >
+      <!-- addable -->
       <template #add-icon>
         <AppSearch />
       </template>

src/components/AppSearch/index.vue

@@ -1,31 +1,35 @@
 <template>
-  <div class="absolute -bottom-1 right-0 z-10">
+  <div class="absolute -bottom-[5px] right-0 z-10">
     <el-input
       ref="elInputRef"
       v-model="keyword"
       prefix-icon="Search"
-      placeholder="搜索"
+      :placeholder="$t('common.search')"
       clearable
       class="transition-all overflow-hidden"
-      :class="activated || keyword ? '!w-96' : '!w-24'"
+      :class="activated || keyword ? '!w-96' : '!w-26'"
       @focus="onFocus"
       @blur="onBlur"
-      @input="onInput"
+      @change="onChange"
       @clear="onClear"
     >
       <template v-if="keyword" #append>
-        <div
-          class="flex flex-col size-full absolute inset-0 justify-center items-center"
-        >
-          <div class="flex-1 h-0 flex items-end">
+        <div class="flex flex-col size-full absolute inset-0 justify-center">
+          <div
+            class="flex-1 h-0 flex items-end justify-center apply-search-button"
+            @click="handlePrev"
+          >
             <el-icon size="12">
               <ElIconArrowUpBold />
             </el-icon>
           </div>
 
-          <div class="h-px w-full border-[0.5px] border-gray-200"></div>
+          <div class="h-px w-full bg-gray-200 dark:bg-gray-600"></div>
 
-          <div class="flex-1 h-0 flex items-start">
+          <div
+            class="flex-1 h-0 flex items-start justify-center apply-search-button"
+            @click="handleNext"
+          >
             <el-icon size="12">
               <ElIconArrowDownBold />
             </el-icon>
@@ -55,20 +59,35 @@ function onBlur() {
 }
 
 function onClear() {
-  window.electron.ipcRenderer.invoke('stop-find-in-page', 'clearSelection')
+  window.electron.ipcRenderer.invoke('findInPageStop')
 }
 
-function onInput(value) {
+async function onChange(value) {
   if (!value) {
     onClear()
     return false
   }
 
-  window.electron.ipcRenderer.invoke('find-in-page', {
+  window.electron.ipcRenderer.invoke('findInPageStart', {
     text: value,
-    findNext: true,
   })
 }
+
+function handlePrev() {
+  window.electron.ipcRenderer.invoke('findInPagePrev')
+}
+
+function handleNext() {
+  window.electron.ipcRenderer.invoke('findInPageNext')
+}
+
+window.electron.ipcRenderer.on('focus-on-search', (event, ret) => {
+  handleFocus()
+})
 </script>
 
-<style></style>
+<style lang="postcss">
+.apply-search-button {
+  @apply hover:bg-gray-200 dark:hover:bg-gray-700 !active:bg-gray-300 !dark:active:bg-gray-600 !active:text-primary-500;
+}
+</style>

src/locales/languages/en_US.json

@@ -9,6 +9,7 @@
   "common.success": "Operation successful",
   "common.progress": "Starting",
   "common.loading": "Loading",
+  "common.search": "Search",
 
   "common.language.name": "Language",
   "common.language.placeholder": "Select language",

src/locales/languages/zh_CN.json

@@ -9,6 +9,7 @@
   "common.success": "操作成功",
   "common.progress": "启动中",
   "common.loading": "加载中",
+  "common.search": "搜索",
 
   "common.language.name": "语言",
   "common.language.placeholder": "选择你需要的语言",

src/locales/languages/zh_TW.json

@@ -9,6 +9,7 @@
   "common.success": "操作成功",
   "common.progress": "啟動中",
   "common.loading": "載入中",
+  "common.search": "搜尋",
 
   "common.language.name": "語言",
   "common.language.placeholder": "選擇你要的語言",