From 8587977627ba1c8635b6b536dc88aeb5c067da5c Mon Sep 17 00:00:00 2001
From: viarotel <viarotel@qq.com>
Date: Tue, 14 May 2024 19:16:46 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=F0=9F=9A=80=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=9F=A5=E6=89=BE=E5=B7=A5=E5=85=B7=E6=80=A7?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                               |   3 +-
 copilot/App.vue                               |   2 +-
 .../components/Transmission/Message/index.vue |   8 +-
 copilot/main.js                               |  10 +-
 .../configs/android-platform-tools/index.js   |   2 +-
 electron/configs/gnirehtet/index.js           |   2 +-
 electron/configs/index.js                     |   2 +-
 electron/configs/scrcpy/index.js              |   2 +-
 electron/events/handles/index.js              |   3 -
 electron/events/index.js                      |   6 +-
 electron/events/search/index.js               |  29 -----
 electron/events/shortcuts/index.js            |  13 +++
 electron/events/{handles => }/theme/index.js  |   0
 electron/events/tray/index.js                 |   6 +-
 electron/events/updater/index.js              |   2 +-
 electron/exposes/adbkit/index.js              |   4 +-
 electron/exposes/gnirehtet/index.js           |   4 +-
 electron/exposes/index.js                     |  13 ++-
 electron/exposes/log/index.js                 |   2 +-
 electron/exposes/scrcpy/index.js              |   6 +-
 electron/{events => exposes}/search/helper.js |   0
 electron/exposes/search/index.js              |  57 ++++++++++
 electron/helpers/console.js                   |   3 +-
 electron/helpers/log.js                       |   2 +-
 electron/main.js                              |   4 +
 jsconfig.json                                 |  10 +-
 package.json                                  |   3 +-
 src/App.vue                                   |  20 ++--
 src/components/About/index.vue                |   2 +-
 src/components/AppSearch/index.vue            | 105 +++++-------------
 .../ControlBar/AppInstall/index.vue           |   2 +-
 .../components/ControlBar/Gnirehtet/index.vue |   2 +-
 .../ControlBar/MirrorGroup/index.vue          |   2 +-
 .../components/ControlBar/Rotation/index.vue  |   2 +-
 .../ControlBar/Screenshot/index.vue           |   2 +-
 .../Device/components/MirrorAction/index.vue  |   2 +-
 .../MoreDropdown/components/Camera/index.vue  |   2 +-
 .../MoreDropdown/components/Otg/index.vue     |   2 +-
 .../MoreDropdown/components/Record/index.vue  |   2 +-
 .../components/WirelessAction/index.vue       |   2 +-
 src/components/Device/index.vue               |   2 +-
 .../components/LanguageSelect/index.vue       |   2 +-
 src/components/Preference/index.vue           |   4 +-
 src/configs/index.js                          |   1 +
 src/main.js                                   |   4 +-
 src/store/device/index.js                     |   4 +-
 src/store/preference/index.js                 |   2 +-
 unocss.config.js                              |   3 +-
 vite.config.js                                |  12 +-
 49 files changed, 189 insertions(+), 190 deletions(-)
 delete mode 100644 electron/events/search/index.js
 create mode 100644 electron/events/shortcuts/index.js
 rename electron/events/{handles => }/theme/index.js (100%)
 rename electron/{events => exposes}/search/helper.js (100%)
 create mode 100644 electron/exposes/search/index.js
 create mode 100644 src/configs/index.js

diff --git a/components.d.ts b/components.d.ts
index 76a0740..768124d 100644
--- a/components.d.ts
+++ b/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']
diff --git a/copilot/App.vue b/copilot/App.vue
index 75737c6..155f276 100644
--- a/copilot/App.vue
+++ b/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
diff --git a/copilot/components/Transmission/Message/index.vue b/copilot/components/Transmission/Message/index.vue
index 67c53c2..2f0cbc5 100644
--- a/copilot/components/Transmission/Message/index.vue
+++ b/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: {
diff --git a/copilot/main.js b/copilot/main.js
index b1737cb..cb22172 100644
--- a/copilot/main.js
+++ b/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)
 
diff --git a/electron/configs/android-platform-tools/index.js b/electron/configs/android-platform-tools/index.js
index 52415f4..deb1074 100644
--- a/electron/configs/android-platform-tools/index.js
+++ b/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) {
diff --git a/electron/configs/gnirehtet/index.js b/electron/configs/gnirehtet/index.js
index fa05e93..301a2b4 100644
--- a/electron/configs/gnirehtet/index.js
+++ b/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) {
diff --git a/electron/configs/index.js b/electron/configs/index.js
index 03bb8e6..9670e32 100644
--- a/electron/configs/index.js
+++ b/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'
 
diff --git a/electron/configs/scrcpy/index.js b/electron/configs/scrcpy/index.js
index 2db5b40..f1fcbf0 100644
--- a/electron/configs/scrcpy/index.js
+++ b/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) {
diff --git a/electron/events/handles/index.js b/electron/events/handles/index.js
index b1832a6..7c89d5a 100644
--- a/electron/events/handles/index.js
+++ b/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 } = {}) => {
diff --git a/electron/events/index.js b/electron/events/index.js
index 1429086..3783c16 100644
--- a/electron/events/index.js
+++ b/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)
 }
diff --git a/electron/events/search/index.js b/electron/events/search/index.js
deleted file mode 100644
index fd763b0..0000000
--- a/electron/events/search/index.js
+++ /dev/null
@@ -1,29 +0,0 @@
-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)
-  })
-}
diff --git a/electron/events/shortcuts/index.js b/electron/events/shortcuts/index.js
new file mode 100644
index 0000000..28866f6
--- /dev/null
+++ b/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')
+  })
+}
diff --git a/electron/events/handles/theme/index.js b/electron/events/theme/index.js
similarity index 100%
rename from electron/events/handles/theme/index.js
rename to electron/events/theme/index.js
diff --git a/electron/events/tray/index.js b/electron/events/tray/index.js
index 1a47de2..d0db36d 100644
--- a/electron/events/tray/index.js
+++ b/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)
diff --git a/electron/events/updater/index.js b/electron/events/updater/index.js
index a56906b..fdd52a5 100644
--- a/electron/events/updater/index.js
+++ b/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
 
diff --git a/electron/exposes/adbkit/index.js b/electron/exposes/adbkit/index.js
index c2fe136..f3a9d48 100644
--- a/electron/exposes/adbkit/index.js
+++ b/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)
 
diff --git a/electron/exposes/gnirehtet/index.js b/electron/exposes/gnirehtet/index.js
index afd008f..daa9f53 100644
--- a/electron/exposes/gnirehtet/index.js
+++ b/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
 
diff --git a/electron/exposes/index.js b/electron/exposes/index.js
index c203d94..5cbefc0 100644
--- a/electron/exposes/index.js
+++ b/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())
   },
 }
diff --git a/electron/exposes/log/index.js b/electron/exposes/log/index.js
index d72e8a0..14dba39 100644
--- a/electron/exposes/log/index.js
+++ b/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)
 
diff --git a/electron/exposes/scrcpy/index.js b/electron/exposes/scrcpy/index.js
index 01f8ad2..40afc22 100644
--- a/electron/exposes/scrcpy/index.js
+++ b/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
 
diff --git a/electron/events/search/helper.js b/electron/exposes/search/helper.js
similarity index 100%
rename from electron/events/search/helper.js
rename to electron/exposes/search/helper.js
diff --git a/electron/exposes/search/index.js b/electron/exposes/search/index.js
new file mode 100644
index 0000000..299151c
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/electron/helpers/console.js b/electron/helpers/console.js
index 20712a6..3208914 100644
--- a/electron/helpers/console.js
+++ b/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
 
diff --git a/electron/helpers/log.js b/electron/helpers/log.js
index bdd5e11..0dff4cf 100644
--- a/electron/helpers/log.js
+++ b/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
 
diff --git a/electron/main.js b/electron/main.js
index 0a17bb7..0207fad 100644
--- a/electron/main.js
+++ b/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()
   })
diff --git a/jsconfig.json b/jsconfig.json
index e5934dd..32964f3 100644
--- a/jsconfig.json
+++ b/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"],
diff --git a/package.json b/package.json
index 9f86c27..86dee6e 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.vue b/src/App.vue
index aeb43e8..a72082b 100644
--- a/src/App.vue
+++ b/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>
@@ -35,8 +35,8 @@ import Preference from './components/Preference/index.vue'
 import About from './components/About/index.vue'
 import AppSearch from './components/AppSearch/index.vue'
 
-import { useThemeStore } from '@/store/theme/index.js'
-import { usePreferenceStore } from '@/store/preference/index.js'
+import { useThemeStore } from '#/store/theme/index.js'
+import { usePreferenceStore } from '#/store/preference/index.js'
 
 const tabsModel = ref([
   {
@@ -57,6 +57,8 @@ const tabsModel = ref([
 ])
 
 const activeTab = ref('Device')
+provide('activeTab', activeTab)
+
 const renderTab = ref('')
 const rendered = ref(true)
 const renderSign = ref(false)
@@ -78,10 +80,10 @@ async function showTips() {
 
   ElMessageBox.alert(
     `<div>
-          ${window.t('dependencies.lack.content', {
-            name: '<a class="hover:underline text-primary-500" href="https://github.com/Genymobile/scrcpy" target="_blank">scrcpy</a>',
-          })}
-        <div>`,
+      ${window.t('dependencies.lack.content', {
+        name: '<a class="hover:underline text-primary-500" href="https://github.com/Genymobile/scrcpy" target="_blank">scrcpy</a>',
+      })}
+    <div>`,
     window.t('dependencies.lack.title'),
     {
       dangerouslyUseHTMLString: true,
@@ -138,5 +140,9 @@ defineExpose({
   .el-tabs__new-tab {
     @apply !absolute !inset-y-0 !right-0 !border-none;
   }
+
+  .el-tabs__nav-wrap:after {
+    @apply !h-px;
+  }
 }
 </style>
diff --git a/src/components/About/index.vue b/src/components/About/index.vue
index fcb4594..0ef4574 100644
--- a/src/components/About/index.vue
+++ b/src/components/About/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="flex flex-col items-center justify-center h-full -mt-8">
     <a class="block" :href="escrcpyURL" target="_blank">
-      <img src="@electron/resources/build/logo.png" class="h-48" alt="" />
+      <img src="#electron/resources/build/logo.png" class="h-48" alt="" />
     </a>
 
     <div class="pt-4 text-xl text-center italic text-gray-700 dark:text-white">
diff --git a/src/components/AppSearch/index.vue b/src/components/AppSearch/index.vue
index 49ebc2c..ca06655 100644
--- a/src/components/AppSearch/index.vue
+++ b/src/components/AppSearch/index.vue
@@ -1,93 +1,40 @@
 <template>
-  <div class="absolute -bottom-[5px] right-0 z-10">
-    <el-input
-      ref="elInputRef"
-      v-model="keyword"
-      prefix-icon="Search"
-      :placeholder="$t('common.search')"
-      clearable
-      class="transition-all overflow-hidden"
-      :class="activated || keyword ? '!w-96' : '!w-26'"
-      @focus="onFocus"
-      @blur="onBlur"
-      @change="onChange"
-      @clear="onClear"
+  <div class="relative z-10">
+    <el-button
+      class=""
+      circle
+      size="small"
+      :title="$t('common.search')"
+      @click="openPageModal"
     >
-      <template v-if="keyword" #append>
-        <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 bg-gray-200 dark:bg-gray-600"></div>
-
-          <div
-            class="flex-1 h-0 flex items-start justify-center apply-search-button"
-            @click="handleNext"
-          >
-            <el-icon size="12">
-              <ElIconArrowDownBold />
-            </el-icon>
-          </div>
-        </div>
-      </template>
-    </el-input>
+      <el-icon size="12">
+        <ElIconSearch />
+      </el-icon>
+    </el-button>
   </div>
 </template>
 
 <script setup>
-const elInputRef = ref(null)
+import { useThemeStore } from '#/store'
 
-const keyword = ref('')
-const activated = ref(false)
+const themeStore = useThemeStore()
 
-function handleFocus() {
-  elInputRef.value.focus()
-}
+const activeTab = inject('activeTab')
 
-async function onFocus() {
-  activated.value = true
-}
-
-function onBlur() {
-  activated.value = false
-}
-
-function onClear() {
-  window.electron.ipcRenderer.invoke('findInPageStop')
-}
-
-async function onChange(value) {
-  if (!value) {
-    onClear()
-    return false
-  }
-
-  window.electron.ipcRenderer.invoke('findInPageStart', {
-    text: value,
-  })
-}
-
-function handlePrev() {
-  window.electron.ipcRenderer.invoke('findInPagePrev')
-}
-
-function handleNext() {
-  window.electron.ipcRenderer.invoke('findInPageNext')
-}
+watch([() => themeStore.value, () => activeTab.value], () => {
+  closePageModal()
+})
 
 window.electron.ipcRenderer.on('focus-on-search', (event, ret) => {
-  handleFocus()
+  openPageModal()
 })
+
+function openPageModal() {
+  window.findInPageModal.open({ isDark: themeStore.isDark })
+}
+function closePageModal() {
+  window.findInPageModal.close()
+}
 </script>
 
-<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>
+<style lang="postcss"></style>
diff --git a/src/components/Device/components/ControlBar/AppInstall/index.vue b/src/components/Device/components/ControlBar/AppInstall/index.vue
index a8b5f38..db44e12 100644
--- a/src/components/Device/components/ControlBar/AppInstall/index.vue
+++ b/src/components/Device/components/ControlBar/AppInstall/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
+import LoadingIcon from '#/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   props: {
diff --git a/src/components/Device/components/ControlBar/Gnirehtet/index.vue b/src/components/Device/components/ControlBar/Gnirehtet/index.vue
index 4b538ae..4864562 100644
--- a/src/components/Device/components/ControlBar/Gnirehtet/index.vue
+++ b/src/components/Device/components/ControlBar/Gnirehtet/index.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/ControlBar/MirrorGroup/index.vue b/src/components/Device/components/ControlBar/MirrorGroup/index.vue
index 35840f0..f80888e 100644
--- a/src/components/Device/components/ControlBar/MirrorGroup/index.vue
+++ b/src/components/Device/components/ControlBar/MirrorGroup/index.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/ControlBar/Rotation/index.vue b/src/components/Device/components/ControlBar/Rotation/index.vue
index 3fd9719..9d97641 100644
--- a/src/components/Device/components/ControlBar/Rotation/index.vue
+++ b/src/components/Device/components/ControlBar/Rotation/index.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/ControlBar/Screenshot/index.vue b/src/components/Device/components/ControlBar/Screenshot/index.vue
index 85e4aa4..c437e3a 100644
--- a/src/components/Device/components/ControlBar/Screenshot/index.vue
+++ b/src/components/Device/components/ControlBar/Screenshot/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script>
-import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
+import LoadingIcon from '#/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   props: {
diff --git a/src/components/Device/components/MirrorAction/index.vue b/src/components/Device/components/MirrorAction/index.vue
index 5e0277d..1f64931 100644
--- a/src/components/Device/components/MirrorAction/index.vue
+++ b/src/components/Device/components/MirrorAction/index.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/MoreDropdown/components/Camera/index.vue b/src/components/Device/components/MoreDropdown/components/Camera/index.vue
index 4c73aa4..5f41d41 100644
--- a/src/components/Device/components/MoreDropdown/components/Camera/index.vue
+++ b/src/components/Device/components/MoreDropdown/components/Camera/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/MoreDropdown/components/Otg/index.vue b/src/components/Device/components/MoreDropdown/components/Otg/index.vue
index 589a927..54268e9 100644
--- a/src/components/Device/components/MoreDropdown/components/Otg/index.vue
+++ b/src/components/Device/components/MoreDropdown/components/Otg/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/MoreDropdown/components/Record/index.vue b/src/components/Device/components/MoreDropdown/components/Record/index.vue
index 6892cff..3d4b9ba 100644
--- a/src/components/Device/components/MoreDropdown/components/Record/index.vue
+++ b/src/components/Device/components/MoreDropdown/components/Record/index.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   props: {
diff --git a/src/components/Device/components/WirelessAction/index.vue b/src/components/Device/components/WirelessAction/index.vue
index af8e5d3..aaae008 100644
--- a/src/components/Device/components/WirelessAction/index.vue
+++ b/src/components/Device/components/WirelessAction/index.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { sleep } from '@/utils'
+import { sleep } from '#/utils'
 
 export default {
   inheritAttrs: false,
diff --git a/src/components/Device/index.vue b/src/components/Device/index.vue
index 0068ab2..100ea68 100644
--- a/src/components/Device/index.vue
+++ b/src/components/Device/index.vue
@@ -120,7 +120,7 @@ import MirrorAction from './components/MirrorAction/index.vue'
 import MoreDropdown from './components/MoreDropdown/index.vue'
 import WirelessAction from './components/WirelessAction/index.vue'
 
-import { isIPWithPort, sleep } from '@/utils/index.js'
+import { isIPWithPort, sleep } from '#/utils/index.js'
 
 export default {
   components: {
diff --git a/src/components/Preference/components/LanguageSelect/index.vue b/src/components/Preference/components/LanguageSelect/index.vue
index c8f191c..41a08ea 100644
--- a/src/components/Preference/components/LanguageSelect/index.vue
+++ b/src/components/Preference/components/LanguageSelect/index.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { i18n } from '@/locales/index.js'
+import { i18n } from '#/locales/index.js'
 
 export default {
   props: {
diff --git a/src/components/Preference/index.vue b/src/components/Preference/index.vue
index 048599e..67594fd 100644
--- a/src/components/Preference/index.vue
+++ b/src/components/Preference/index.vue
@@ -207,8 +207,8 @@ import AudioCodecSelect from './components/AudioCodecSelect/index.vue'
 import DisplaySelect from './components/DisplaySelect/index.vue'
 import KeyboardInjectSelect from './components/KeyboardInjectSelect/index.vue'
 
-import { usePreferenceStore } from '@/store/index.js'
-import LoadingIcon from '@/components/Device/components/LoadingIcon/index.vue'
+import { usePreferenceStore } from '#/store/index.js'
+import LoadingIcon from '#/components/Device/components/LoadingIcon/index.vue'
 
 export default {
   components: {
diff --git a/src/configs/index.js b/src/configs/index.js
new file mode 100644
index 0000000..17ac92b
--- /dev/null
+++ b/src/configs/index.js
@@ -0,0 +1 @@
+export const primaryColor = '#028d71'
diff --git a/src/main.js b/src/main.js
index a98eb1a..28a8099 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,4 +1,4 @@
-import '@/utils/console.js'
+import '#/utils/console.js'
 
 import { createApp, toRaw } from 'vue'
 import App from './App.vue'
@@ -10,7 +10,7 @@ import icons from './icons/index.js'
 
 import { i18n, t } from './locales/index.js'
 
-import { replaceIP, restoreIP } from '@/utils/index.js'
+import { replaceIP, restoreIP } from '#/utils/index.js'
 
 import 'virtual:uno.css'
 import './styles/index.js'
diff --git a/src/store/device/index.js b/src/store/device/index.js
index bc84fe9..a250929 100644
--- a/src/store/device/index.js
+++ b/src/store/device/index.js
@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia'
 import dayjs from 'dayjs'
 
-import { t } from '@/locales/index.js'
-import { isIPWithPort, replaceIP } from '@/utils/index.js'
+import { t } from '#/locales/index.js'
+import { isIPWithPort, replaceIP } from '#/utils/index.js'
 
 const $appStore = window.appStore
 
diff --git a/src/store/preference/index.js b/src/store/preference/index.js
index e4ead89..be99b4b 100644
--- a/src/store/preference/index.js
+++ b/src/store/preference/index.js
@@ -11,7 +11,7 @@ import {
   setStoreData,
 } from './helpers/index.js'
 
-import { replaceIP, restoreIP } from '@/utils/index.js'
+import { replaceIP, restoreIP } from '#/utils/index.js'
 
 const { adbPath, scrcpyPath, gnirehtetPath } = window.electron?.configs || {}
 
diff --git a/unocss.config.js b/unocss.config.js
index 1e1910d..eda3437 100644
--- a/unocss.config.js
+++ b/unocss.config.js
@@ -1,10 +1,11 @@
 import { defineConfig, presetWind } from 'unocss'
 import transformerDirectives from '@unocss/transformer-directives'
 import { presetShades } from '@viarotel-org/unocss-preset-shades'
+import { primaryColor } from './src/configs/index.js'
 
 const presetMain = presetWind()
 
-const presets = [presetMain, presetShades('#028d71')]
+const presets = [presetMain, presetShades(primaryColor)]
 
 export default defineConfig({
   // @ts-expect-error
diff --git a/vite.config.js b/vite.config.js
index 8abdb42..4555ae0 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,9 +18,9 @@ const merge = (config, { command = '' } = {}) =>
     {
       resolve: {
         alias: {
-          '@root': resolve(),
-          '@electron': resolve('electron'),
-          '@renderer': resolve('src'),
+          '#root': resolve(),
+          '#electron': resolve('electron'),
+          '#renderer': resolve('src'),
         },
       },
       plugins: [...(command === 'serve' ? [notBundle()] : [])],
@@ -41,9 +41,9 @@ export default args =>
       },
       resolve: {
         alias: {
-          '@': resolve('src'),
-          '@copilot': resolve('copilot'),
-          '@electron': resolve('electron'),
+          '#': resolve('src'),
+          '#copilot': resolve('copilot'),
+          '#electron': resolve('electron'),
         },
       },
       plugins: [