feature: 新增搜索框功能，快捷键：`Ctrl + F`
王良
parent
3f5049ad91
commit
759bfe8029
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -298,28 +298,38 @@ function createWindow (startHideWindow, autoQuitIfError = true) {
|
|||
})
|
||||
|
||||
const shortcut = (event, input) => {
|
||||
if (input.key === 'F12' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
|
||||
// 按 F12，打开/关闭 开发者工具
|
||||
if (input.key === 'F12') {
|
||||
// 阻止默认的按键事件行为
|
||||
event.preventDefault()
|
||||
// 切换开发者工具显示状态
|
||||
switchDevTools()
|
||||
// eslint-disable-next-line style/brace-style
|
||||
}
|
||||
} else if (input.key === 'F5' && input.type === 'keyUp' && !input.control && !input.shift && !input.alt && !input.meta) {
|
||||
// 按 F5，刷新页面
|
||||
else if (input.key === '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)
|
||||
|
|
|
|||
|
|
@ -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` 配置
|
||||
// 你还可以传别的配置参数, 不过先这么简单着吧。
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
<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'
|
||||
|
|
@ -6,6 +8,7 @@ import { colorTheme } from './composables/theme'
|
|||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
SearchBar,
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -13,6 +16,7 @@ export default {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,8 +155,8 @@ 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
|
||||
}
|
||||
|
|
@ -178,6 +164,10 @@ export default {
|
|||
// 拼接键值
|
||||
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">
|
||||
|
|
|
|||
|
|
@ -239,4 +239,13 @@ $dark-input: #777; //输入框：背景色
|
|||
border-color: #8b2929;
|
||||
}
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
div {
|
||||
color: #000;
|
||||
}
|
||||
span {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,6 +108,9 @@ importers:
|
|||
sass-loader:
|
||||
specifier: ^16.0.3
|
||||
version: 16.0.3(sass@1.81.0)(webpack@5.96.1)
|
||||
search-bar-vue2:
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0(vue@2.7.16)
|
||||
vue:
|
||||
specifier: ^2.7.16
|
||||
version: 2.7.16
|
||||
|
|
@ -6011,6 +6014,11 @@ packages:
|
|||
resolution: {integrity: sha512-3A6sD0WYP7+QrjbfNA2FN3FsOaGGFoekCVgTyypy53gPxhbkCIjtO6YWgdrfM+n/8sI8JeXZOIxsHjMTNxQ4nQ==}
|
||||
engines: {node: ^14.0.0 || >=16.0.0}
|
||||
|
||||
search-bar-vue2@1.0.0:
|
||||
resolution: {integrity: sha512-e65f34kiWo/ub6fOsXGC7SU1A2HWyTUhQUn3AhZfO/f002XcCOaRghkWM0sADE8/OaL5MWHZ1sxDjzq2T9vWIQ==}
|
||||
peerDependencies:
|
||||
vue: ^2.6.14
|
||||
|
||||
select-hose@2.0.0:
|
||||
resolution: {integrity: sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==}
|
||||
|
||||
|
|
@ -13910,6 +13918,10 @@ snapshots:
|
|||
refa: 0.12.1
|
||||
regexp-ast-analysis: 0.7.1
|
||||
|
||||
search-bar-vue2@1.0.0(vue@2.7.16):
|
||||
dependencies:
|
||||
vue: 2.7.16
|
||||
|
||||
select-hose@2.0.0: {}
|
||||
|
||||
selfsigned@2.4.1:
|
||||
|
|
|
|||
Loading…
Reference in New Issue