From c9c84e518bca294fbdde80635bed172f38e7b199 Mon Sep 17 00:00:00 2001
From: xiyidaiwa <g17729830615@163.com>
Date: Tue, 14 Apr 2026 14:07:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=90=9C=E7=B4=A2):=20=E4=B8=BA=E6=90=9C?=
 =?UTF-8?q?=E7=B4=A2=E8=BE=93=E5=85=A5=E6=A1=86=E6=B7=BB=E5=8A=A0=E6=B8=85?=
 =?UTF-8?q?=E9=99=A4=E6=8C=89=E9=92=AE=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在AppHeader和UpdateCenterToolbar组件中为搜索输入框添加清除按钮
点击按钮可清空搜索内容并触发相应事件
---
 src/components/AppHeader.vue                  | 19 +++++++++++++++++++
 .../update-center/UpdateCenterToolbar.vue     | 15 ++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/AppHeader.vue b/src/components/AppHeader.vue
index a8620f1a..f12137fb 100644
--- a/src/components/AppHeader.vue
+++ b/src/components/AppHeader.vue
@@ -22,7 +22,17 @@
             placeholder="搜索应用名 / 包名 / 标签，按回车键搜索"
             @keydown.enter="handleSearch"
             @focus="handleSearchFocus"
+            @input="handleInput"
           />
+          <button
+            v-if="localSearchQuery"
+            type="button"
+            class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors"
+            @click="clearSearch"
+            title="清除搜索"
+          >
+            <i class="fas fa-times-circle"></i>
+          </button>
         </div>
         <button
           type="button"
@@ -78,6 +88,15 @@ const handleSearchFocus = () => {
   emit("search-focus");
 };
 
+const handleInput = () => {
+  emit("update-search", localSearchQuery.value);
+};
+
+const clearSearch = () => {
+  localSearchQuery.value = "";
+  emit("update-search", "");
+};
+
 watch(
   () => props.searchQuery,
   (newVal) => {
diff --git a/src/components/update-center/UpdateCenterToolbar.vue b/src/components/update-center/UpdateCenterToolbar.vue
index 7db4becc..43165779 100644
--- a/src/components/update-center/UpdateCenterToolbar.vue
+++ b/src/components/update-center/UpdateCenterToolbar.vue
@@ -58,7 +58,7 @@
       </span>
     </div>
 
-    <label class="block">
+    <label class="block relative">
       <span class="sr-only">搜索更新</span>
       <input
         :value="searchQuery"
@@ -67,6 +67,15 @@
         class="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-900 outline-none transition focus:border-brand/60 focus:bg-white dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100 dark:focus:bg-slate-900"
         @input="handleInput"
       />
+      <button
+        v-if="searchQuery"
+        type="button"
+        class="absolute right-4 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:text-slate-500 dark:hover:text-slate-300 transition-colors"
+        @click="clearSearch"
+        title="清除搜索"
+      >
+        <i class="fas fa-times-circle"></i>
+      </button>
     </label>
   </div>
 </template>
@@ -106,4 +115,8 @@ const handleInput = (event: Event): void => {
   const target = event.target as HTMLInputElement | null;
   emit("update:search-query", target?.value ?? props.searchQuery);
 };
+
+const clearSearch = () => {
+  emit("update:search-query", "");
+};
 </script>