315 lines
9.3 KiB
Vue
315 lines
9.3 KiB
Vue
<template lang="pug">
|
|
dt#hot_key {{$t('setting__hot_key')}}
|
|
dd
|
|
h3#hot_key_local_title {{$t('setting__hot_key_local_title')}}
|
|
div
|
|
base-checkbox(id="setting_download_hotKeyLocal" v-model="current_hot_key.local.enable" :label="$t('setting__is_enable')" @change="handleHotKeySaveConfig")
|
|
div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.local.enable ? 1 : .6 }")
|
|
div(:class="$style.hotKeyItem" v-for="item in allHotKeys.local")
|
|
h4(:class="$style.hotKeyItemTitle") {{$t('setting__hot_key_' + item.name)}}
|
|
base-input.key-bind(:class="$style.hotKeyItemInput" readonly @keyup.prevent :placeholder="$t('setting__hot_key_unset_input')"
|
|
:value="hotKeyConfig.local[item.name] && formatHotKeyName(hotKeyConfig.local[item.name].key)"
|
|
@focus="handleHotKeyFocus($event, item, 'local')"
|
|
@blur="handleHotKeyBlur($event, item, 'local')")
|
|
|
|
h3#hot_key_global_title {{$t('setting__hot_key_global_title')}}
|
|
div
|
|
base-checkbox(id="setting_download_hotKeyGlobal" v-model="current_hot_key.global.enable" :label="$t('setting__is_enable')" @change="handleEnableHotKey")
|
|
div(:class="$style.hotKeyContainer" :style="{ opacity: current_hot_key.global.enable ? 1 : .6 }")
|
|
div(:class="$style.hotKeyItem" v-for="item in allHotKeys.global")
|
|
h4(:class="$style.hotKeyItemTitle") {{$t('setting__hot_key_' + item.name)}}
|
|
base-input.key-bind(:class="[$style.hotKeyItemInput, hotKeyConfig.global[item.name] && hotKeyStatus[hotKeyConfig.global[item.name].key] && hotKeyStatus[hotKeyConfig.global[item.name].key].status === false ? $style.hotKeyFailed : null]"
|
|
:value="hotKeyConfig.global[item.name] && formatHotKeyName(hotKeyConfig.global[item.name].key)" @input.prevent readonly :placeholder="$t('setting__hot_key_unset_input')"
|
|
@focus="handleHotKeyFocus($event, item, 'global')"
|
|
@blur="handleHotKeyBlur($event, item, 'global')")
|
|
</template>
|
|
|
|
<script>
|
|
import { ref, useI18n, onBeforeUnmount, toRaw } from '@renderer/utils/vueTools'
|
|
import { allHotKeys, hotKeySetEnable, hotKeySetConfig, hotKeyGetStatus } from '@renderer/utils/tools'
|
|
import { isMac } from '@common/utils'
|
|
import { base as eventBaseName } from '@renderer/event/names'
|
|
import { mainWindow as eventsNameMainWindow } from '@main/events/_name'
|
|
|
|
import { currentStting } from '../setting'
|
|
|
|
const formatHotKeyName = (name) => {
|
|
if (name.includes('arrow')) {
|
|
name = name.replace(/arrow(left|right|up|down)/, s => {
|
|
switch (s) {
|
|
case 'arrowleft': return '←'
|
|
case 'arrowright': return '→'
|
|
case 'arrowup': return '↑'
|
|
case 'arrowdown': return '↓'
|
|
}
|
|
})
|
|
}
|
|
if (name.includes('mod')) name = name.replace('mod', isMac ? 'Command' : 'Ctrl')
|
|
name = name.replace(/(\+|^)[a-z]/g, l => l.toUpperCase())
|
|
if (name.length > 1) name = name.replace(/\+/g, ' + ')
|
|
return name
|
|
}
|
|
|
|
export default {
|
|
name: 'SettingHotKey',
|
|
setup() {
|
|
const { t } = useI18n()
|
|
const current_hot_key = ref({
|
|
local: {
|
|
enable: false,
|
|
keys: {},
|
|
},
|
|
global: {
|
|
enable: false,
|
|
keys: {},
|
|
},
|
|
})
|
|
|
|
const hotKeyConfig = ref({
|
|
local: {},
|
|
global: {},
|
|
})
|
|
|
|
const hotKeyStatus = ref({})
|
|
let isEditHotKey = false
|
|
let hotKeyTargetInput
|
|
let newHotKey
|
|
|
|
const initHotKeyConfig = () => {
|
|
let config = {}
|
|
for (const [type, typeInfo] of Object.entries(current_hot_key.value)) {
|
|
let configInfo = config[type] = {}
|
|
for (const [key, info] of Object.entries(typeInfo.keys)) {
|
|
if (info.name == null) continue
|
|
configInfo[info.name] = {
|
|
key,
|
|
info,
|
|
}
|
|
}
|
|
}
|
|
hotKeyConfig.value = config
|
|
}
|
|
|
|
const handleHotKeyFocus = async(event, info, type) => {
|
|
await hotKeySetEnable(false)
|
|
window.isEditingHotKey = true
|
|
isEditHotKey = true
|
|
let config = hotKeyConfig.value[type][info.name]
|
|
newHotKey = config?.key
|
|
hotKeyTargetInput = event.target
|
|
event.target.value = t('setting__hot_key_tip_input')
|
|
}
|
|
|
|
const handleHotKeyBlur = async(event, info, type) => {
|
|
await hotKeySetEnable(true)
|
|
window.isEditingHotKey = false
|
|
isEditHotKey = false
|
|
const prevInput = hotKeyTargetInput
|
|
hotKeyTargetInput = null
|
|
if (prevInput.value == t('setting__hot_key_tip_input')) {
|
|
prevInput.value = newHotKey ? formatHotKeyName(newHotKey) : ''
|
|
return
|
|
}
|
|
let config = hotKeyConfig.value[type][info.name]
|
|
let originKey
|
|
if (type == 'global' && newHotKey && current_hot_key.value.global.enable) {
|
|
try {
|
|
await hotKeySetConfig({
|
|
action: 'register',
|
|
data: {
|
|
key: newHotKey,
|
|
info,
|
|
},
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
return
|
|
}
|
|
}
|
|
if (config) {
|
|
if (config.key == newHotKey) return
|
|
originKey = config.key
|
|
delete current_hot_key.value[type].keys[config.key]
|
|
} else if (!newHotKey) return
|
|
|
|
if (newHotKey) {
|
|
for (const [tempType, tempInfo] of Object.entries(current_hot_key.value)) {
|
|
if (tempType == type) continue
|
|
config = tempInfo.keys[newHotKey]
|
|
if (config) {
|
|
console.log(newHotKey, info, config, info.name, config.name)
|
|
delete current_hot_key.value[tempType].keys[newHotKey]
|
|
break
|
|
}
|
|
}
|
|
current_hot_key.value[type].keys[newHotKey] = info
|
|
}
|
|
|
|
initHotKeyConfig()
|
|
// console.log(this.current_hot_key.global.keys)
|
|
if (originKey && current_hot_key.value.global.enable) {
|
|
try {
|
|
await hotKeySetConfig({
|
|
action: 'unregister',
|
|
data: originKey,
|
|
})
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
await handleHotKeySaveConfig()
|
|
await getHotKeyStatus()
|
|
}
|
|
|
|
const handleKeyDown = ({ event, keys, key, type }) => {
|
|
// if (!event || event.repeat) return
|
|
if (!event || event.repeat || type == 'up' || !isEditHotKey) return
|
|
event.preventDefault()
|
|
// console.log(event, key)
|
|
switch (key) {
|
|
case 'delete':
|
|
case 'backspace':
|
|
key = ''
|
|
break
|
|
}
|
|
hotKeyTargetInput.value = formatHotKeyName(key)
|
|
// console.log(keys, key, type)
|
|
newHotKey = key
|
|
}
|
|
const handleUpdateHotKeyConfig = (config) => {
|
|
// console.log(config)
|
|
for (const [type, info] of Object.entries(config)) {
|
|
current_hot_key.value[type] = info
|
|
}
|
|
}
|
|
const handleHotKeySaveConfig = async() => {
|
|
// console.log(this.current_hot_key)
|
|
window.appHotKeyConfig = current_hot_key.value
|
|
await hotKeySetConfig({
|
|
action: 'config',
|
|
data: toRaw(current_hot_key.value),
|
|
source: eventsNameMainWindow.name,
|
|
})
|
|
}
|
|
const handleEnableHotKey = async() => {
|
|
await hotKeySetConfig({
|
|
action: 'enable',
|
|
data: current_hot_key.value.global.enable,
|
|
source: eventsNameMainWindow.name,
|
|
})
|
|
await handleHotKeySaveConfig()
|
|
await getHotKeyStatus()
|
|
}
|
|
const getHotKeyStatus = () => {
|
|
return hotKeyGetStatus().then(status => {
|
|
// console.log(status)
|
|
hotKeyStatus.value = status
|
|
return status
|
|
})
|
|
}
|
|
|
|
current_hot_key.value = window.appHotKeyConfig
|
|
initHotKeyConfig()
|
|
getHotKeyStatus()
|
|
|
|
window.eventHub.on(eventBaseName.set_hot_key_config, handleUpdateHotKeyConfig)
|
|
window.eventHub.on(eventBaseName.key_down, handleKeyDown)
|
|
|
|
onBeforeUnmount(() => {
|
|
window.eventHub.off(eventBaseName.set_hot_key_config, handleUpdateHotKeyConfig)
|
|
window.eventHub.off(eventBaseName.key_down, handleKeyDown)
|
|
})
|
|
|
|
return {
|
|
currentStting,
|
|
allHotKeys,
|
|
current_hot_key,
|
|
hotKeyConfig,
|
|
hotKeyStatus,
|
|
handleHotKeyFocus,
|
|
handleHotKeyBlur,
|
|
handleEnableHotKey,
|
|
formatHotKeyName,
|
|
handleHotKeySaveConfig,
|
|
}
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" module>
|
|
@import '@renderer/assets/styles/layout.less';
|
|
|
|
.hotKeyContainer {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
// margin-top: -15px;
|
|
margin-bottom: 15px;
|
|
transition: opacity @transition-theme;
|
|
}
|
|
.hotKeyItem {
|
|
width: 30%;
|
|
padding-right: 35px;
|
|
margin-top: 15px;
|
|
box-sizing: border-box;
|
|
}
|
|
.hotKeyItemTitle {
|
|
.mixin-ellipsis-1;
|
|
padding-bottom: 5px;
|
|
color: @color-theme_2-font-label;
|
|
font-size: 12px;
|
|
}
|
|
.hotKeyItemInput {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
// font-family: monospace;
|
|
&:focus {
|
|
background-color: @color-theme_2-active;
|
|
text-decoration: none;
|
|
}
|
|
&::placeholder {
|
|
color: rgba(197, 197, 197, 0.7)!important;
|
|
}
|
|
}
|
|
.hotKeyFailed {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.del-line {
|
|
position: relative;
|
|
&:before {
|
|
display: block;
|
|
height: 1px;
|
|
position: absolute;
|
|
width: 110%;
|
|
content: ' ';
|
|
left: 0;
|
|
background-color: #000;
|
|
transform: rotate(-24deg);
|
|
transform-origin: 0;
|
|
top: 83%;
|
|
z-index: 1;
|
|
}
|
|
&:after {
|
|
display: block;
|
|
height: 1px;
|
|
position: absolute;
|
|
width: 110%;
|
|
content: ' ';
|
|
left: 0;
|
|
background-color: #000;
|
|
transform: rotate(23deg);
|
|
transform-origin: 0px;
|
|
top: 2px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
each(@themes, {
|
|
:global(#root.@{value}) {
|
|
.hotKeyItemTitle {
|
|
color: ~'@{color-@{value}-theme_2-font-label}';
|
|
}
|
|
}
|
|
})
|
|
</style>
|