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

publish/changeLog.md

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

src/renderer/components/base/Input.vue

@@ -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()
+      let value = event.target.value
-      event.target.value = 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>

src/renderer/components/common/ListAddModal.vue

@@ -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;
+  background: none !important;
-  outline: none;
   font-size: 14px;
   text-align: center;
   font-family: inherit;
   box-sizing: border-box;
   padding: 0 10px;
+  border-radius: 0;
   display: none;
 }
 

src/renderer/components/common/ListAddMultipleModal.vue

@@ -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;
+  background: none !important;
-  outline: none;
   font-size: 14px;
   text-align: center;
-  font-family: inherit;
   box-sizing: border-box;
   padding: 0 10px;
+  border-radius: 0;
   display: none;
 }
 

src/renderer/components/material/SearchInput.vue

@@ -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"

src/renderer/views/List/MusicList/components/SearchList.vue

@@ -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;

src/renderer/views/List/MyList/index.vue

@@ -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
+          <base-input
-            ref="dom_listsNewInput" :class="$style.listsInput" type="text" :placeholder="$t('lists__new_list_input')" @contextmenu.stop
+            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;
+  background: none !important;
-  outline: none;
+  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;
   }

src/renderer/views/List/MyList/useEditList.ts

@@ -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(() => {

src/renderer/views/Setting/components/PlayTimeoutModal.vue

@@ -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 = ''

src/renderer/views/Setting/components/SettingHotKey.vue

@@ -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>

src/renderer/views/Setting/components/SettingSync.vue

@@ -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>