歌曲搜索框新增清理按钮

FAQ.md

@@ -189,7 +189,7 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看上面的
 注意：**绿色版**的软件自动更新功能**不可用**，建议使用安装版！！<br>
 注意：**Mac版**、**Linux**版不支持自动更新！
 
-### Windows 安装版在自动升级后，卸载了旧版本，但没有安装新版本
+### Windows 安装版在升级后，卸载了旧版本，但没有安装新版本
 
 出现这个问题的原因一般是你当初在安装本软件的时候是以管理员身份安装的，运行软件的时候没有以管理员身份运行，所以卸载后无法再装上。
 

publish/changeLog.md

@@ -1,3 +1,7 @@
+### 新增
+
+- 歌曲搜索框新增清理按钮，点击此按钮可以清理搜索框并返回初始搜索界面
+
 ### 修复
 
 - 修复某些情况下同步功能会导致切歌混乱的问题

src/renderer/components/material/SearchInput.vue

@@ -9,6 +9,10 @@ div(:class="$style.container")
             @keyup.40.prevent="handleKeyDown"
             @keyup.38.prevent="handleKeyUp"
             @contextmenu="handleContextMenu")
+      transition(enter-active-class="animated zoomIn" leave-active-class="animated zoomOut")
+        button(type="button" @click="handleClearList" v-show="text")
+          svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 24 24' space='preserve')
+            use(xlink:href='#icon-window-close')
       button(type="button" @click="handleSearch")
         slot
           svg(version='1.1' xmlns='http://www.w3.org/2000/svg' xlink='http://www.w3.org/1999/xlink' height='100%' viewBox='0 0 30.239 30.239' space='preserve')
@@ -144,6 +148,11 @@ export default {
       this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
       this.$emit('input', this.text)
     },
+    handleClearList() {
+      this.text = ''
+      this.$emit('input', this.text)
+      this.sendEvent('submit')
+    },
   },
 }
 </script>
@@ -210,14 +219,17 @@ export default {
       // background-color: @color-search-form-background;
       background-color: transparent;
       outline: none;
-      border-top-right-radius: 3px;
-      border-bottom-right-radius: 3px;
       cursor: pointer;
       height: 100%;
       padding: 6px 7px;
       color: @color-btn;
       transition: background-color .2s ease;
 
+      &:last-child {
+        border-top-right-radius: 3px;
+        border-bottom-right-radius: 3px;
+      }
+
       &:hover {
         background-color: @color-theme-hover;
       }