From 175e9022512b27bb3d4cb60b27256568745136fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E8=89=AF?= <841369634@qq.com> Date: Wed, 26 Feb 2025 10:01:28 +0800 Subject: [PATCH] =?UTF-8?q?optimize:=20=E4=BC=98=E5=8C=96SearchBar?= =?UTF-8?q?=E7=9A=84=E8=A1=8C=E4=B8=BA=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/gui/src/background.js | 2 +- packages/gui/src/view/App.vue | 65 +++++++++++++++++++++++++++++----- 2 files changed, 58 insertions(+), 9 deletions(-) diff --git a/packages/gui/src/background.js b/packages/gui/src/background.js index b5b4e36..5be8601 100644 --- a/packages/gui/src/background.js +++ b/packages/gui/src/background.js @@ -315,7 +315,7 @@ function createWindow (startHideWindow, autoQuitIfError = true) { } 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 }) + 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() diff --git a/packages/gui/src/view/App.vue b/packages/gui/src/view/App.vue index cf59fb5..a47d7b9 100644 --- a/packages/gui/src/view/App.vue +++ b/packages/gui/src/view/App.vue @@ -13,6 +13,8 @@ export default { menus: undefined, config: undefined, hideSearchBar: true, + searchBarIsFocused: false, + searchBarInputKeyupTimeout: null, } }, computed: { @@ -45,23 +47,31 @@ export default { } // 如果不是显示/隐藏操作,并且还未显示检索框,先按显示操作处理 - if (message.key !== 'show-hide' && this.hideSearchBar) { + if (!message.key.includes('hide') && this.hideSearchBar) { message = { key: 'show-hide' } } try { if (message.key === 'show-hide') { // 显示/隐藏 - this.hideSearchBar = message.hideSearchBar != null ? message.hideSearchBar : !this.hideSearchBar + 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) { - setTimeout(() => { - try { - this.$refs.searchBar.$el.querySelector('input').focus() - } catch { - } - }, 100) + 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') { // 上一项 @@ -70,9 +80,48 @@ export default { } 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) },