github
/
lx-music-desktop
mirror of https://github.com/lyswhut/lx-music-desktop
1
0
Fork 0
Code Issues Releases Wiki Activity

为所有文本输入框添加右键快速粘贴的功能

pull/1211/head
lyswhut 2023-02-05 15:32:11 +08:00
parent 83000b75ca
commit dd5bffe071
11 changed files with 82 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
publish/changeLog.md
View File

@ -10,6 +10,7 @@
- 微调了桌面歌词逐行字体阴影，使其看起来更匀称
- 调整了桌面歌词在启用滚动到顶部时的距离，现在滚动到顶部的歌词更靠边，不再受字体大小、歌词间距影响
- 优化更新弹窗内容的显示，添加了自动更新失败时的更新指引
- 为所有文本输入框添加右键快速粘贴的功能，右击输入框可以自动粘贴剪贴板的文字，若选中文字时将粘贴并替换选中文字
### 修复

44
src/renderer/components/base/Input.vue
View File

@ -10,10 +10,13 @@
@input="handleInput"
@change="$emit('change', $event.target.value.trim())"
@keyup.enter="$emit('submit', $event.target.value.trim())"
@contextmenu="handleContextMenu"
>
</template>
<script>
import { clipboardReadText } from '@common/utils/electron'
export default {
props: {
placeholder: {
@ -32,17 +35,54 @@ export default {
type: String,
default: 'text',
},
trim: {
type: Boolean,
default: true,
},
stopContentEventPropagation: {
type: Boolean,
default: true,
},
autoPaste: {
type: Boolean,
default: true,
},
// bindValue: {
// type: Boolean,
// default: true,
// },
},
emits: ['update:modelValue', 'submit', 'change'],
methods: {
handleInput(event) {
let value = event.target.value.trim()
event.target.value = value
let value = event.target.value
if (this.trim) {
value = value.trim()
event.target.value = value
}
this.$emit('update:modelValue', value)
},
focus() {
this.$refs.dom_input.focus()
},
handleContextMenu(event) {
if (this.stopContentEventPropagation) event.stopPropagation()
if (!this.autoPaste) return
let dom_input = this.$refs.dom_input
if (dom_input.selectionStart === null) return
let str = clipboardReadText()
str = str.trim()
str = str.replace(/\t|\r\n|\n|\r/g, ' ')
str = str.replace(/\s+/g, ' ')
const text = dom_input.value
// if (dom_input.selectionStart == dom_input.selectionEnd) {
const value = text.substring(0, dom_input.selectionStart) + str + text.substring(dom_input.selectionEnd, text.length)
event.target.value = value
this.$emit('update:modelValue', value)
// } else {
// clipboardWriteText(text.substring(dom_input.selectionStart, dom_input.selectionEnd))
// }
},
},
}
</script>

10
src/renderer/components/common/ListAddModal.vue
View File

@ -8,7 +8,7 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42" space="preserve">
<use xlink:href="#icon-addTo" />
</svg>
<input :class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)">
<base-input :class="$style.newListInput" :value="newListName" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)" />
</base-btn>
<span v-for="i in spaceNum" :key="i" :class="$style.btn" />
</div>
@ -170,7 +170,7 @@ export default {
handleSaveList(event) {
let name = event.target.value
this.newListName = event.target.value = ''
this.isEditing = false
// this.isEditing = false
if (!name) return
createUserList({ name })
},
@ -256,16 +256,14 @@ export default {
top: 0;
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
background: none !important;
font-size: 14px;
text-align: center;
font-family: inherit;
box-sizing: border-box;
padding: 0 10px;
border-radius: 0;
display: none;
}

9
src/renderer/components/common/ListAddMultipleModal.vue
View File

@ -8,7 +8,7 @@
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" viewBox="0 0 42 42" space="preserve">
<use xlink:href="#icon-addTo" />
</svg>
<input :class="$style.newListInput" :value="newListName" type="text" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)">
<base-input :class="$style.newListInput" :value="newListName" :placeholder="$t('lists__new_list_input')" @keyup.enter="handleSaveList($event)" @blur="handleSaveList($event)" />
</base-btn>
<span v-for="i in spaceNum" :key="i" :class="$style.btn" />
</div>
@ -213,16 +213,13 @@ export default {
top: 0;
width: 100%;
height: 34px;
border: none;
padding: 0;
line-height: 34px;
background: none;
outline: none;
background: none !important;
font-size: 14px;
text-align: center;
font-family: inherit;
box-sizing: border-box;
padding: 0 10px;
border-radius: 0;
display: none;
}

1
src/renderer/components/material/SearchInput.vue
View File

@ -11,6 +11,7 @@
@input="$emit('update:modelValue', text)"
@change="sendEvent('change')"
@keyup.enter="handleSearch"
@keydown.arrow-down.arrow-up.prevent
@keyup.arrow-down.prevent="handleKeyDown"
@keyup.arrow-up.prevent="handleKeyUp"
@contextmenu="handleContextMenu"

17
src/renderer/views/List/MusicList/components/SearchList.vue
View File

@ -6,13 +6,14 @@
<div :class="$style.form">
<input
ref="dom_input" v-model.trim="text" class="ignore-esc" :placeholder="placeholder" @input="handleDelaySearch"
@keyup.enter="handleTemplistClick(selectIndex)" @keyup.arrow-down.prevent.exact="handleKeyDown" @keyup.arrow-up.prevent.exact="handleKeyUp"
@keydown.arrow-down.arrow-up.prevent @keyup.arrow-down.prevent.exact="handleKeyDown" @keyup.arrow-up.prevent.exact="handleKeyUp"
@keyup.enter="handleTemplistClick(selectIndex)"
@keyup.escape.prevent.exact="handleKeyEsc" @keydown.control.prevent="handle_key_mod_down" @keydown.meta.prevent="handle_key_mod_down"
@keyup.control.prevent="handle_key_mod_up" @keyup.meta.prevent="handle_key_mod_up" @contextmenu="handleContextMenu"
>
<button type="button" @click="handleHide">
<slot>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 212.982 212.982" space="preserve">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="70%" viewBox="0 0 212.982 212.982" space="preserve">
<use xlink:href="#icon-delete" />
</svg>
</slot>
@ -191,10 +192,18 @@ export default {
},
handleContextMenu() {
let str = clipboardReadText()
str = str.trim()
str = str.replace(/\t|\r\n|\n|\r/g, ' ')
str = str.replace(/\s+/g, ' ')
let dom_input = this.$refs.dom_input
this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
const text = dom_input.value
// if (dom_input.selectionStart == dom_input.selectionEnd) {
const value = text.substring(0, dom_input.selectionStart) + str + text.substring(dom_input.selectionEnd, text.length)
// event.target.value = value
this.text = value
// } else {
// clipboardWriteText(text.substring(dom_input.selectionStart, dom_input.selectionEnd))
// }
},
async handleSearch() {
if (!this.text.length) return this.resultList = []
@ -279,7 +288,7 @@ export default {
border-bottom-right-radius: 4px;
cursor: pointer;
height: 100%;
padding: 6px 7px;
padding: 6px 9px;
color: var(--color-button-font);
transition: background-color .2s ease;
opacity: 0.8;

23
src/renderer/views/List/MyList/index.vue
View File

@ -57,17 +57,17 @@
</transition>
{{ item.name }}
</span>
<input
<base-input
:class="$style.listsInput" type="text" :value="item.name"
:placeholder="item.name" @contextmenu.stop @keyup.enter="handleSaveListName(index, $event)" @blur="handleSaveListName(index, $event)"
>
:placeholder="item.name" @keyup.enter="handleSaveListName(index, $event)" @blur="handleSaveListName(index, $event)"
/>
</li>
<transition enter-active-class="animated-fast slideInLeft" leave-active-class="animated-fast fadeOut" @after-leave="isNewListLeave = false" @after-enter="$refs.dom_listsNewInput.focus()">
<li v-if="isShowNewList" :class="[$style.listsItem, $style.listsNew, {[$style.newLeave]: isNewListLeave}]">
<input
ref="dom_listsNewInput" :class="$style.listsInput" type="text" :placeholder="$t('lists__new_list_input')" @contextmenu.stop
<base-input
ref="dom_listsNewInput" :class="$style.listsInput" type="text" :placeholder="$t('lists__new_list_input')"
@keyup.enter="handleCreateList" @blur="handleCreateList"
>
/>
</li>
</transition>
</ul>
@ -378,20 +378,21 @@ export default {
.listsInput {
width: 100%;
height: @lists-item-height;
border: none;
// border: none;
padding: 0;
// padding-bottom: 1px;
line-height: @lists-item-height;
background: none;
outline: none;
background: none !important;
border-radius: 0;
// outline: none;
font-size: 13px;
display: none;
font-family: inherit;
// font-family: inherit;
}
.listsNew {
padding: 0 10px;
background-color: var(--color-primary-background-hover);
background-color: var(--color-primary-background-hover) !important;
.listsInput {
display: block;
}

2
src/renderer/views/List/MyList/useEditList.ts
View File

@ -11,7 +11,7 @@ export default ({ dom_lists_list }: {
const styles = useCssModule()
const handleRename = (index: number) => {
console.log(index)
// console.log(index)
const dom = dom_lists_list.value?.querySelectorAll('.user-list')[index]
if (!dom) return
void nextTick(() => {

4
src/renderer/views/Setting/components/PlayTimeoutModal.vue
View File

@ -1,5 +1,5 @@
<template lang="pug">
material-modal(:show="modelValue" bg-close @close="handleCloseModal" @after-enter="$refs.dom_input.focus()" teleport="#view")
material-modal(:show="modelValue" @close="handleCloseModal" @after-enter="$refs.dom_input.focus()" teleport="#view")
main(:class="$style.main")
h2 {{$t('play_timeout')}}
div(:class="$style.content")
@ -52,7 +52,7 @@ export default {
if (rxp.test(text)) {
text = RegExp.$1
if (parseInt(text) > MAX_MIN) {
text = text.substring(0, text.length - 1)
text = MAX_MIN
}
} else {
text = ''

4
src/renderer/views/Setting/components/SettingHotKey.vue
View File

@ -7,7 +7,7 @@ dd
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(:class="$style.hotKeyItemInput" readonly @keyup.prevent :placeholder="$t('setting__hot_key_unset_input')"
base-input(:class="$style.hotKeyItemInput" readonly @keyup.prevent :auto-paste="false" :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')")
@ -19,7 +19,7 @@ dd
div(:class="$style.hotKeyItem" v-for="item in allHotKeys.global")
h4(:class="$style.hotKeyItemTitle") {{$t('setting__hot_key_' + item.name)}}
base-input(: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')"
:value="hotKeyConfig.global[item.name] && formatHotKeyName(hotKeyConfig.global[item.name].key)" @input.prevent :auto-paste="false" readonly :placeholder="$t('setting__hot_key_unset_input')"
@focus="handleHotKeyFocus($event, item, 'global')"
@blur="handleHotKeyBlur($event, item, 'global')")
</template>

2
src/renderer/views/Setting/components/SettingSync.vue
View File

@ -15,7 +15,7 @@ dd
h3#sync_port {{$t('setting__sync_port')}}
div
p
base-input.gap-left(:modelValue="appSetting['sync.port']" @update:modelValue="setSyncPort" :placeholder="$t('setting__sync_port_tip')")
base-input.gap-left(:modelValue="appSetting['sync.port']" type="number" @update:modelValue="setSyncPort" :placeholder="$t('setting__sync_port_tip')")
</template>
<script>