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

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

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