From c377469dad5620b3eb0822f45e08fe24e7535e5d Mon Sep 17 00:00:00 2001
From: lyswhut <lyswhut@qq.com>
Date: Mon, 16 Aug 2021 15:46:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=AD=8C=E6=9B=B2=E6=90=9C=E7=B4=A2=E6=A1=86?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=B8=85=E7=90=86=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FAQ.md                                           |  2 +-
 publish/changeLog.md                             |  4 ++++
 src/renderer/components/material/SearchInput.vue | 16 ++++++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/FAQ.md b/FAQ.md
index 6d9246f7..4fb3bdd6 100644
--- a/FAQ.md
+++ b/FAQ.md
@@ -189,7 +189,7 @@ Windows 7 未开启 Aero 效果时桌面歌词会有问题，详情看上面的
 注意：**绿色版**的软件自动更新功能**不可用**，建议使用安装版！！<br>
 注意：**Mac版**、**Linux**版不支持自动更新！
 
-### Windows 安装版在自动升级后，卸载了旧版本，但没有安装新版本
+### Windows 安装版在升级后，卸载了旧版本，但没有安装新版本
 
 出现这个问题的原因一般是你当初在安装本软件的时候是以管理员身份安装的，运行软件的时候没有以管理员身份运行，所以卸载后无法再装上。
 
diff --git a/publish/changeLog.md b/publish/changeLog.md
index 91f91b8b..cabf148d 100644
--- a/publish/changeLog.md
+++ b/publish/changeLog.md
@@ -1,3 +1,7 @@
+### 新增
+
+- 歌曲搜索框新增清理按钮，点击此按钮可以清理搜索框并返回初始搜索界面
+
 ### 修复
 
 - 修复某些情况下同步功能会导致切歌混乱的问题
diff --git a/src/renderer/components/material/SearchInput.vue b/src/renderer/components/material/SearchInput.vue
index 142d5a00..da47bdc3 100644
--- a/src/renderer/components/material/SearchInput.vue
+++ b/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;
       }