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: 'show-hide', hideSearchBar: true })
+      } 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,18 +1,22 @@
 <script>
+import { ipcRenderer } from 'electron'
+import { SearchBar } from 'search-bar-vue2'
 import createMenus from '@/view/router/menu'
 import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
 import { colorTheme } from './composables/theme'
 
 export default {
   name: 'App',
   components: {
+    SearchBar,
   },
   data () {
     return {
       locale: zhCN,
       info: {},
       menus: undefined,
       config: undefined,
+      hideSearchBar: true,
     }
   },
   computed: {
@@ -37,16 +41,48 @@ export default {
     this.$api.info.get().then((ret) => {
       this.info = ret
     })
+
+    ipcRenderer.on('search-bar', (_, message) => {
+      console.info(_, message)
+      if (message.key === 'show-hide') {
+        if (window.config.disableSearchBar) {
+          this.hideSearchBar = true
+          return
+        }
+
+        this.hideSearchBar = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar
+
+        // 显示后，获取输入框焦点
+        if (!this.hideSearchBar) {
+          setTimeout(() => {
+            try {
+              this.$refs.searchBar.$el.querySelector('input').focus()
+            } catch {
+            }
+          }, 100)
+        }
+      } else {
+        // 如果还未显示检索框，先显示出来
+        if (this.hideSearchBar) {
+          this.hideSearchBar = false
+          return
+        }
+
+        if (message.key === 'next' && !this.hideSearchBar) {
+          this.$refs.searchBar.next()
+        } else if (message.key === 'previous' && !this.hideSearchBar) {
+          this.$refs.searchBar.previous()
+        }
+      }
+    })
   },
   methods: {
-    handleClick (e) {
-      console.log('click', e)
-    },
     titleClick (item) {
       console.log('title click:', item)
     },
     menuClick (item) {
       console.log('menu click:', item)
+      window.config.disableSearchBar = false
       this.$router.replace(item.path)
     },
   },
@@ -56,6 +92,12 @@ 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"
+      />
       <a-layout>
         <a-layout-sider :theme="theme">
           <div class="logo" />
@@ -82,7 +124,7 @@ export default {
         </a-layout-sider>
         <a-layout>
           <!-- <a-layout-header>Header</a-layout-header> -->
-          <a-layout-content>
+          <a-layout-content id="document">
             <router-view />
           </a-layout-content>
           <a-layout-footer>
@@ -144,4 +186,11 @@ body {
     border: 0;
   }
 }
+.search-bar-highlight {
+  background-color: #ef0fff;
+
+  &.selected-highlight {
+    background-color: #38d878;
+  }
+}
 </style>

packages/gui/src/view/api.js

@@ -27,6 +27,9 @@ export function apiInit (app) {
         ipcRenderer.removeAllListeners(channel)
       },
       invoke,
+      postMessage (channel, ...args) {
+        ipcRenderer.postMessage(channel, ...args)
+      },
       send,
       async openExternal (href) {
         await shell.openExternal(href)

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

@@ -170,13 +170,18 @@ export default {
     },
     async handleTabChange (key) {
       if (key !== '2' && key !== '3' && key !== '5' && key !== '6' && key !== '7') {
-        return
-      }
+        // 没有 JsonEditor
+        window.config.disableSearchBar = false
+      } else {
+        // 有 JsonEditor
+        window.config.disableSearchBar = true
+        this.$api.ipc.postMessage('search-bar', { key: 'show-hide', hideSearchBar: true })
 
-      // 规避 vue-json-editor 内容只填充输入框一半的问题
-      setTimeout(() => {
-        window.dispatchEvent(new Event('resize'))
-      }, 10)
+        // 规避 vue-json-editor 内容只填充输入框一半的问题
+        setTimeout(() => {
+          window.dispatchEvent(new Event('resize'))
+        }, 10)
+      }
     },
   },
 }
@@ -271,7 +276,7 @@ export default {
         </a-tab-pane>
         <a-tab-pane key="2" tab="拦截设置">
           <VueJsonEditor
-            ref="editor" v-model="config.server.intercepts" style="height:100%" mode="code"
+            ref="editor2" v-model="config.server.intercepts" style="height:100%" mode="code"
             :show-btns="false" :expanded-on-start="true"
           />
         </a-tab-pane>
@@ -284,7 +289,7 @@ export default {
             <hr style="margin-bottom:15px">
             <div>这里指定域名的超时时间：<span class="form-help">（域名配置可使用通配符或正则）</span></div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.setting.timeoutMapping" style="flex-grow:1;min-height:300px;margin-top:10px" mode="code"
+              ref="editor3" v-model="config.server.setting.timeoutMapping" style="flex-grow:1;min-height:300px;margin-top:10px" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
@@ -320,7 +325,7 @@ export default {
               说明：<code>自动兼容程序</code>会自动根据错误信息进行兼容性调整，并将兼容设置保存在 <code>~/.dev-sidecar/automaticCompatibleConfig.json</code> 文件中。但并不是所有的兼容设置都是正确的，所以需要通过以下配置来覆盖错误的兼容设置。
             </div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.compatible" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              ref="editor5" v-model="config.server.compatible" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
@@ -332,14 +337,14 @@ export default {
               <span class="form-help">（域名配置可使用通配符或正则）</span>
             </div>
             <VueJsonEditor
-              ref="editor" v-model="config.server.preSetIpList" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
+              ref="editor6" v-model="config.server.preSetIpList" style="flex-grow:1;min-height:300px;margin-top:10px;" mode="code"
               :show-btns="false" :expanded-on-start="true"
             />
           </div>
         </a-tab-pane>
         <a-tab-pane key="7" tab="DNS服务管理">
           <VueJsonEditor
-            ref="editor" v-model="config.server.dns.providers" style="height:100%" mode="code"
+            ref="editor7" v-model="config.server.dns.providers" style="height:100%" mode="code"
             :show-btns="false" :expanded-on-start="true"
           />
         </a-tab-pane>

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

@@ -48,24 +48,18 @@ export default {
         case 'ArrowDown':
         case 'ArrowLeft':
         case 'ArrowRight':
-          return ''
+          return '无'
+
+        // 不支持监听以下几个键，返回空
+        case 'NumpadDivide': // return 'Num/'
+        case 'NumpadMultiply': // return 'Num*'
+        case 'NumpadDecimal': // return 'Num.'
+        case 'NumpadSubtract': // return 'Num-'
+        case 'NumpadAdd': // return 'Num+'
+          return '无'
       }
 
       switch (event.code) {
-        // F1 ~ F12
-        case 'F1': return 'F1'
-        case 'F2': return 'F2'
-        case 'F3': return 'F3'
-        case 'F4': return 'F4'
-        case 'F5': return 'F5'
-        case 'F6': return 'F6'
-        case 'F7': return 'F7'
-        case 'F8': return 'F8'
-        case 'F9': return 'F9'
-        case 'F10': return 'F10'
-        case 'F11': return 'F11'
-        case 'F12': return 'F12'
-
         // 0 ~ 9
         case 'Digit0': return '0'
         case 'Digit1': return '1'
@@ -110,14 +104,6 @@ export default {
         case 'Numpad8': return 'Num8'
         case 'Numpad9': return 'Num9'
         case 'Numpad0': return 'Num0'
-
-        // 不支持监听以下几个键，返回空
-        case 'NumpadDivide': // return 'Num/'
-        case 'NumpadMultiply': // return 'Num*'
-        case 'NumpadDecimal': // return 'Num.'
-        case 'NumpadSubtract': // return 'Num-'
-        case 'NumpadAdd': // return 'Num+'
-          return ''
       }
 
       // 字母
@@ -126,7 +112,7 @@ export default {
       }
 
       console.error(`未能识别的按键：key=${event.key}, code=${event.code}, keyCode=${event.keyCode}`)
-      return ''
+      return '无'
     },
     async disableBeforeInputEvent () {
       clearTimeout(window.enableBeforeInputEventTimeout)
@@ -169,15 +155,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 +420,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;
+    }
+  }
 }