feat:最近搜索记录和热门搜索点击处理事件

Author: Taois

dashboard/src/components/Header.vue

@@ -55,6 +55,17 @@
             <icon-settings/>
           </template>
         </a-button>
+        <a-button 
+            v-if="hasSearchResults"
+            class="close-search-btn" 
+            shape="circle" 
+            @click="closeSearchResults"
+            :title="'关闭搜索结果'"
+        >
+          <template #icon>
+            <icon-close/>
+          </template>
+        </a-button>
       </div>
     </div>
 
@@ -128,6 +139,11 @@ export default defineComponent({
       return route.name === 'SearchAggregation';
     });
     
+    // 检测是否有搜索结果（当在搜索页面且有搜索关键词时）
+    const hasSearchResults = computed(() => {
+      return isSearchAggregationPage.value && route.query.keyword;
+    });
+    
     // 从localStorage获取聚搜功能状态
     const getSearchAggregationStatus = () => {
       try {
@@ -176,6 +192,7 @@ export default defineComponent({
       searchValue,
       showSearchSettings: ref(false),
       isSearchAggregationPage,
+      hasSearchResults,
       router
     };
   },
@@ -255,6 +272,11 @@ export default defineComponent({
       Message.success(`已选择 ${selectedCount} 个搜索源`);
       this.showSearchSettings = false;
     },
+    closeSearchResults() {
+      // 关闭搜索结果，回到搜索页面的初始状态
+      this.searchValue = '';
+      this.$router.push({ name: 'SearchAggregation' });
+    },
     minimize() {
       Message.info("最小化窗口");
       // 最小化窗口的逻辑，可以通过调用系统接口来实现
@@ -486,6 +508,31 @@ export default defineComponent({
   background: var(--color-fill-4) !important;
 }
 
+/* 关闭搜索按钮样式 */
+.close-search-btn {
+  width: 36px !important;
+  height: 36px !important;
+  border-radius: 8px !important;
+  border: 1px solid var(--color-border-2) !important;
+  background: var(--color-bg-2) !important;
+  color: var(--color-text-2) !important;
+  transition: all 0.2s ease !important;
+  flex-shrink: 0;
+}
+
+.close-search-btn:hover {
+  background: var(--color-danger-light-1) !important;
+  border-color: var(--color-danger-light-3) !important;
+  color: var(--color-danger-6) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(245, 63, 63, 0.15) !important;
+}
+
+.close-search-btn:active {
+  transform: translateY(0) !important;
+  background: var(--color-danger-light-2) !important;
+}
+
 .search-container :deep(.arco-input-search:focus-within) {
   border-color: var(--color-primary-6);
   box-shadow: 0 0 0 2px var(--color-primary-1);

dashboard/src/views/SearchAggregation.vue

@@ -12,14 +12,19 @@
               <icon-history class="title-icon"/>
               最近搜索记录
             </h3>
-            <a-button type="text" size="small" class="refresh-btn" @click="clearRecentSearches">清空</a-button>
+            <a-button type="text" size="small" class="refresh-btn" @click="clearRecentSearches">
+              <template #icon>
+                <icon-delete/>
+              </template>
+              清空
+            </a-button>
           </div>
           <div class="recent-search-tags">
             <a-tag 
                 v-for="tag in recentSearches" 
                 :key="tag"
                 class="recent-tag"
-                @click="performSearch(tag)"
+                @click="searchRecentTag(tag)"
             >
               {{ tag }}
             </a-tag>
@@ -218,7 +223,8 @@ import {
   IconCheckCircle, 
   IconCloseCircle, 
   IconExclamationCircle, 
-  IconEmpty 
+  IconEmpty,
+  IconDelete 
 } from '@arco-design/web-vue/es/icon';
 import SearchSettingsModal from '@/components/SearchSettingsModal.vue';
 import siteService from '@/api/services/site';
@@ -235,7 +241,8 @@ export default defineComponent({
     IconCheckCircle,
     IconCloseCircle,
     IconExclamationCircle,
-    IconEmpty
+    IconEmpty,
+    IconDelete
   },
   setup() {
     const route = useRoute();
@@ -497,13 +504,24 @@ export default defineComponent({
     };
     
     const searchHotTag = (tag) => {
-      searchKeyword.value = tag;
-      performSearch(tag);
+      router.push({
+        name: 'SearchAggregation',
+        query: { keyword: tag }
+      });
     };
     
     const searchSuggestion = (suggestion) => {
-      searchKeyword.value = suggestion;
-      performSearch(suggestion);
+      router.push({
+        name: 'SearchAggregation',
+        query: { keyword: suggestion }
+      });
+    };
+    
+    const searchRecentTag = (tag) => {
+      router.push({
+        name: 'SearchAggregation',
+        query: { keyword: tag }
+      });
     };
     
     const onSearchSettingsConfirm = (settings) => {
@@ -580,6 +598,13 @@ export default defineComponent({
       if (keyword) {
         searchKeyword.value = keyword;
         performSearch(keyword);
+      } else {
+        // 当没有keyword参数时，重置搜索状态
+        hasSearched.value = false;
+        searchKeyword.value = '';
+        searchResults.value = {};
+        activeSource.value = '';
+        currentPage.value = 1;
       }
     }, { immediate: true });
     // 监听输入草稿用于生成建议
@@ -627,6 +652,7 @@ export default defineComponent({
       onSearchInput,
       searchHotTag,
       searchSuggestion,
+      searchRecentTag,
       onSearchSettingsConfirm,
       playVideo,
       handleImageError,