feature: 新增内容搜索功能，快捷键：Ctrl + F

Author: wangliang181230

packages/gui/package.json

@@ -34,6 +34,7 @@
     "request-progress": "^3.0.0",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
+    "search-bar-vue2": "^1.0.0",
     "vue": "^2.7.16",
     "vue-json-editor-fix-cn": "^1.4.3",
     "vue-router": "^3.6.5"

packages/gui/src/background.js

@@ -298,28 +298,38 @@ function createWindow (startHideWindow, autoQuitIfError = true) {
   })
 
   const shortcut = (event, input) => {
-    // 按 F12，打开/关闭 开发者工具
-    if (input.key === 'F12') {
-      // 阻止默认的按键事件行为
+    if (input.key === 'F12' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+      // 按 F12，打开/关闭 开发者工具
       event.preventDefault()
-      // 切换开发者工具显示状态
       switchDevTools()
-      // eslint-disable-next-line style/brace-style
-    }
-    // 按 F5，刷新页面
-    else if (input.key === 'F5') {
-      // 阻止默认的按键事件行为
+    } else if (input.key === 'F5' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+      // 按 F5，刷新页面
       event.preventDefault()
-      // 刷新页面
       win.webContents.reload()
+    } else {
+      // 全文检索框（SearchBar）相关快捷键
+      if ((input.key === 'F' || input.key === 'f') && input.type === 'keyDown' && input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 Ctrl + F，显示或隐藏全文检索框（SearchBar）
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'show-hide' })
+      } else if (input.key === 'Escape' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 ESC，隐藏全文检索框（SearchBar）
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'hide' })
+      } else if (input.key === 'F3' && input.type === 'keyDown' && !input.control && !input.shift && !input.alt && !input.meta) {
+        // 按 F3，全文检索框（SearchBar）定位到下一个
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'next' })
+      } else if (input.key === 'F3' && input.type === 'keyDown' && !input.control && input.shift && !input.alt && !input.meta) {
+        // 按 Shift + F3，全文检索框（SearchBar）定位到上一个
+        event.preventDefault()
+        win.webContents.send('search-bar', { key: 'previous' })
+      }
     }
   }
 
   // 监听键盘事件
   win.webContents.on('before-input-event', (event, input) => {
-    if (input.type !== 'keyUp' || input.control || input.alt || input.shift || input.meta) {
-      return
-    }
     win.webContents.executeJavaScript('config')
       .then((value) => {
         console.info('window.config:', value, ', key:', input.key)

packages/gui/src/main.js

@@ -1,6 +1,7 @@
 import antd from 'ant-design-vue'
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import SearchBar from 'search-bar-vue2'
 import { ipcRenderer } from 'electron'
 import view from './view'
 import App from './view/App.vue'
@@ -25,6 +26,7 @@ try {
   Vue.config.productionTip = false
   Vue.use(antd)
   Vue.use(VueRouter)
+  Vue.use(SearchBar)
   Vue.component(DsContainer)
   // 3. 创建 router 实例，然后传 `routes` 配置
   // 你还可以传别的配置参数, 不过先这么简单着吧。

packages/gui/src/view/App.vue

@@ -1,4 +1,5 @@
 <script>
+import { ipcRenderer } from 'electron'
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { colorTheme } from './composables/theme'
@@ -11,6 +12,9 @@ export default {
       info: {},
       menus: undefined,
       config: undefined,
+      hideSearchBar: true,
+      searchBarIsFocused: false,
+      searchBarInputKeyupTimeout: null,
     }
   },
   computed: {
@@ -35,13 +39,95 @@ export default {
     this.$api.info.get().then((ret) => {
       this.info = ret
     })
+
+    ipcRenderer.on('search-bar', (_, message) => {
+      if (window.config.disableSearchBar) {
+        this.hideSearchBar = true
+        return
+      }
+
+      // 如果不是显示/隐藏操作，并且还未显示检索框，先按显示操作处理
+      if (!message.key.includes('hide') && this.hideSearchBar) {
+        message = { key: 'show-hide' }
+      }
+
+      try {
+        if (message.key === 'show-hide') { // 显示/隐藏
+          const hide = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
+
+          // 如果为隐藏操作，但SearchBar未隐藏且未获取焦点，则获取焦点
+          if (hide && !this.hideSearchBar && !this.searchBarIsFocused) {
+            this.doSearchBarInputFocus()
+            return
+          }
+
+          this.hideSearchBar = hide
+
+          // 显示后，获取输入框焦点
+          if (!this.hideSearchBar) {
+            this.doSearchBarInputFocus()
+          } else {
+            this.searchBarIsFocused = false
+          }
+        } else if (message.key === 'hide') { // 隐藏
+          this.hideSearchBar = true
+          this.searchBarIsFocused = false
+        } else if (message.key === 'next') { // 下一项
+          this.$refs.searchBar.next()
+        } else if (message.key === 'previous') { // 上一项
+          this.$refs.searchBar.previous()
+        }
+      } catch (e) {
+        console.error('操作SearchBar出现异常：', e)
+      }
+
+      const input = this.getSearchBarInput()
+      if (input) {
+        input.addEventListener('focus', this.onSearchBarInputFocus)
+        input.addEventListener('blur', this.onSearchBarInputBlur)
+        input.addEventListener('keydown', this.onSearchBarInputKeydown)
+        input.addEventListener('keyup', this.onSearchBarInputKeyup)
+      }
+    })
   },
   methods: {
+    getSearchBarInput () {
+      return this.$refs.searchBar.$el.querySelector('input[type=text]')
+    },
+    onSearchBarInputFocus () {
+      this.searchBarIsFocused = true
+    },
+    onSearchBarInputBlur () {
+      this.searchBarIsFocused = false
+    },
+    onSearchBarInputKeydown () {
+      clearTimeout(this.searchBarInputKeyupTimeout)
+    },
+    onSearchBarInputKeyup (e) {
+      if (!this.$refs.searchBar || e.key === 'Enter' || e.key === 'F3') {
+        return
+      }
+      clearTimeout(this.searchBarInputKeyupTimeout)
+      this.searchBarInputKeyupTimeout = setTimeout(() => {
+        // 连续调用以下两个方法，为了获取检索结果中的第一项
+        this.$refs.searchBar.next()
+        this.$refs.searchBar.previous()
+      }, 150)
+    },
+    doSearchBarInputFocus () {
+      setTimeout(() => {
+        const input = this.getSearchBarInput()
+        if (input) {
+          input.focus()
+        }
+      }, 100)
+    },
     titleClick (item) {
       console.log('title click:', item)
     },
     menuClick (item) {
       console.log('menu click:', item)
+      window.config.disableSearchBar = false
       this.$router.replace(item.path)
     },
   },
@@ -51,6 +137,13 @@ export default {
 <template>
   <a-config-provider :locale="locale">
     <div class="ds_layout" :class="themeClass">
+      <SearchBar ref="searchBar"
+                 :root="'#document'"
+                 :highlightClass="'search-bar-highlight'"
+                 :selectedClass="'selected-highlight'"
+                 :hiden.sync="hideSearchBar"
+                 style="inset:auto auto 53px 210px; background-color:#ddd"
+      />
       <a-layout>
         <a-layout-sider :theme="theme">
           <div class="logo" />
@@ -78,7 +171,7 @@ export default {
         <a-layout>
           <!-- <a-layout-header>Header</a-layout-header> -->
           <a-layout-content>
-            <router-view />
+            <router-view id="document" />
           </a-layout-content>
           <a-layout-footer>
             <div class="footer">
@@ -139,4 +232,12 @@ body {
     border: 0;
   }
 }
+.search-bar-highlight {
+  background-color: #ef0fff;
+  color: #fdfdfd;
+
+  &.selected-highlight {
+    background-color: #17a450;
+  }
+}
 </style>

packages/gui/src/view/pages/setting.vue

@@ -169,15 +169,19 @@ export default {
         shortcut += 'Meta + '
       }
 
-      // 如果以上按钮都没有按下，并且当前键不是F1~F4、F6~F11时，则直接返回（注：F5已经是刷新页面快捷键、F12已经是打开DevTools的快捷键了）
-      if (shortcut === '' && !key.match(/^F([1-46-9]|1[01])$/g)) {
+      // 如果以上按钮都没有按下，并且当前键不是F1、F2、F4、F6~F11时，则直接返回（注：F5已经是刷新页面快捷键、F12已经是打开DevTools的快捷键了）
+      if (shortcut === '' && !key.match(/^F([1246-9]|1[01])$/g)) {
         this.config.app.showHideShortcut = '无'
         return
       }
 
       // 拼接键值
       shortcut += key
 
+      if (shortcut === 'Ctrl + F' || shortcut === 'Shift + F3') {
+        shortcut = '无' // 如果是其他已被占用快捷键，则设置为 '无'
+      }
+
       this.config.app.showHideShortcut = shortcut
     },
     async applyBefore () {
@@ -430,7 +434,7 @@ export default {
       <a-form-item label="打开窗口快捷键" :label-col="labelCol" :wrapper-col="wrapperCol">
         <a-input v-model="config.app.showHideShortcut" @change="shortcutChange" @keydown="shortcutKeyDown" @keyup="shortcutKeyUp" />
         <div class="form-help">
-          部分快捷键已被占用：F5=刷新页面，F12=开发者工具（DevTools）
+          部分快捷键已被占用：<code>F5</code>、<code>F12</code>、<code>Ctrl+F</code>、<code>F3</code>、<code>Shift+F3</code>
         </div>
       </a-form-item>
       <a-form-item label="启动时窗口状态" :label-col="labelCol" :wrapper-col="wrapperCol">

packages/gui/src/view/style/theme/dark.scss

@@ -239,4 +239,13 @@ $dark-input: #777; //输入框：背景色
       border-color: #8b2929;
     }
   }
+
+  .search-bar {
+    div {
+      color: #000;
+    }
+    span {
+      color: #000;
+    }
+  }
 }