feat:聚合搜索基础版本

Author: Taois

dashboard/src/components/Header.vue

@@ -2,30 +2,57 @@
   <a-layout-header class="header">
     <!-- 左侧控制按钮 -->
     <div class="header-left">
-      <a-button shape="circle" @click="goBack">
-        <template #icon>
-          <icon-left/>
-        </template>
-      </a-button>
-      <a-button shape="circle" @click="goForward">
-        <template #icon>
-          <icon-right/>
-        </template>
-      </a-button>
-      <a-button shape="circle" @click="refreshPage">
-        <template #icon>
-          <icon-refresh/>
-        </template>
-      </a-button>
+      <!-- 聚合搜索页面模式 -->
+      <template v-if="isSearchAggregationPage">
+        <a-button shape="circle" @click="goBackFromSearch">
+          <template #icon>
+            <icon-left/>
+          </template>
+        </a-button>
+        <span class="search-page-title">聚合搜索</span>
+      </template>
+      <!-- 普通页面模式 -->
+      <template v-else>
+        <a-button shape="circle" @click="goBack">
+          <template #icon>
+            <icon-left/>
+          </template>
+        </a-button>
+        <a-button shape="circle" @click="goForward">
+          <template #icon>
+            <icon-right/>
+          </template>
+        </a-button>
+        <a-button shape="circle" @click="refreshPage">
+          <template #icon>
+            <icon-refresh/>
+          </template>
+        </a-button>
+      </template>
     </div>
 
     <!-- 中间搜索框 -->
-    <div class="header-center" v-if="searchAggregationEnabled">
-      <a-input-search
-          placeholder="搜索内容..."
-          enter-button="搜索"
-          @search="onSearch"
-      />
+    <div class="header-center" :class="{ 'search-page-mode': isSearchAggregationPage }" v-if="searchAggregationEnabled">
+      <div class="search-container">
+        <a-input-search
+            v-model="searchValue"
+            placeholder="搜索内容..."
+            enter-button="搜索"
+            @search="onSearch"
+            @click="handleSearchClick"
+            @input="handleSearchInput"
+        />
+        <a-button 
+            class="search-settings-btn" 
+            shape="circle" 
+            @click="openSearchSettings"
+            :title="'搜索设置'"
+        >
+          <template #icon>
+            <icon-settings/>
+          </template>
+        </a-button>
+      </div>
     </div>
 
     <!-- 右侧控制按钮 -->
@@ -68,17 +95,35 @@
         </div>
       </div>
     </div>
+
+    <!-- 搜索设置弹窗 -->
+    <SearchSettingsModal 
+      v-model:visible="showSearchSettings" 
+      @confirm="onSearchSettingsConfirm"
+    />
   </a-layout-header>
 </template>
 
 <script>
-import {defineComponent, ref, computed} from 'vue';
+import {defineComponent, ref, computed, watch} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
 import {Message} from '@arco-design/web-vue';
+import SearchSettingsModal from './SearchSettingsModal.vue';
 
 export default defineComponent({
-  components: {},
+  components: {
+    SearchSettingsModal
+  },
   setup() {
+    const route = useRoute();
+    const router = useRouter();
     const showConfirmModal = ref(false);
+    const searchValue = ref('');
+    
+    // 检测是否在聚合搜索页面
+    const isSearchAggregationPage = computed(() => {
+      return route.name === 'SearchAggregation';
+    });
     
     // 从localStorage获取聚搜功能状态
     const getSearchAggregationStatus = () => {
@@ -108,16 +153,38 @@ export default defineComponent({
     // 定期检查状态变化（用于同一页面内的状态更新）
     const checkInterval = setInterval(updateSearchAggregationStatus, 1000);
     
+    // 监听路由变化，同步搜索关键词
+    watch(() => route.query.keyword, (keyword) => {
+      if (keyword && isSearchAggregationPage.value) {
+        searchValue.value = keyword;
+      }
+    }, { immediate: true });
+    
+    // 监听路由变化，清空搜索框（当离开搜索页面时）
+    watch(() => route.name, (routeName) => {
+      if (routeName !== 'SearchAggregation') {
+        searchValue.value = '';
+      }
+    });
+    
     return {
       showConfirmModal,
-      searchAggregationEnabled
+      searchAggregationEnabled,
+      searchValue,
+      showSearchSettings: ref(false),
+      isSearchAggregationPage,
+      router
     };
   },
   methods: {
     goBack() {
       Message.info("前进按钮");
       // 执行前进逻辑
     },
+    goBackFromSearch() {
+      // 从聚合搜索页面返回到上一页
+      this.$router.go(-1);
+    },
     goForward() {
       Message.info("后退按钮");
       // 执行后退逻辑
@@ -128,8 +195,45 @@ export default defineComponent({
       window.location.reload();
     },
     onSearch(value) {
-      Message.info(`搜索内容: ${value}`);
-      // 执行搜索逻辑
+      if (!value || !value.trim()) {
+        Message.warning('请输入搜索内容');
+        return;
+      }
+      
+      if (this.isSearchAggregationPage) {
+        // 如果已经在搜索页面，直接更新查询参数
+        this.$router.push({
+          name: 'SearchAggregation',
+          query: { keyword: value.trim() }
+        });
+      } else {
+        // 如果不在搜索页面，跳转到聚合搜索页面并执行搜索
+        this.$router.push({
+          name: 'SearchAggregation',
+          query: { keyword: value.trim() }
+        });
+      }
+    },
+    handleSearchClick() {
+      // 点击搜索框时的处理
+      if (!this.isSearchAggregationPage) {
+        // 如果不在搜索页面，跳转到搜索页面
+        this.$router.push({ name: 'SearchAggregation' });
+      }
+    },
+    handleSearchInput(value) {
+      // 搜索输入时的处理（可以用于实时搜索建议等）
+      // 暂时不做特殊处理
+    },
+    openSearchSettings() {
+      // 打开搜索设置弹窗
+      this.showSearchSettings = true;
+    },
+    onSearchSettingsConfirm(settings) {
+      // 处理搜索设置确认
+      const selectedCount = settings.selectedSources ? settings.selectedSources.length : 0;
+      Message.success(`已选择 ${selectedCount} 个搜索源`);
+      this.showSearchSettings = false;
     },
     minimize() {
       Message.info("最小化窗口");
@@ -226,6 +330,17 @@ export default defineComponent({
   gap: 8px;
 }
 
+.search-page-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text-1);
+  margin-left: 12px;
+  white-space: nowrap;
+  user-select: none;
+  display: flex;
+  align-items: center;
+}
+
 .header-center {
   flex: 1;
   display: flex;
@@ -285,53 +400,103 @@ export default defineComponent({
   box-shadow: 0 2px 8px rgba(255, 71, 87, 0.3);
 }
 
-/* 搜索框样式 */
-.header-center :deep(.arco-input-search) {
+/* 搜索容器样式 */
+.search-container {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   width: 100%;
-  max-width: 400px;
+  max-width: 450px;
+}
+
+/* 搜索框样式 */
+.search-container :deep(.arco-input-search) {
+  flex: 1;
   border-radius: 8px;
   background: var(--color-bg-1);
   border: 1px solid var(--color-border-2);
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
   transition: all 0.2s ease;
+  cursor: pointer;
 }
 
-.header-center :deep(.arco-input-search:hover) {
+.search-container :deep(.arco-input-search:hover) {
   border-color: var(--color-border-3);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-.header-center :deep(.arco-input-search:focus-within) {
+/* 聚合搜索页面时的搜索框样式 */
+.header-center.search-page-mode .search-container :deep(.arco-input-search) {
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.header-center.search-page-mode .search-container :deep(.arco-input-search .arco-input-wrapper) {
+  border: 2px solid var(--color-border-2);
+  transition: all 0.2s ease;
+}
+
+.header-center.search-page-mode .search-container :deep(.arco-input-search .arco-input-wrapper:focus-within) {
+  border-color: var(--color-primary-6);
+  box-shadow: 0 0 0 3px rgba(var(--primary-6), 0.1);
+}
+
+/* 搜索设置按钮样式 */
+.search-settings-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;
+}
+
+.search-settings-btn:hover {
+  background: var(--color-fill-3) !important;
+  border-color: var(--color-border-3) !important;
+  color: var(--color-text-1) !important;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
+}
+
+.search-settings-btn:active {
+  transform: translateY(0) !important;
+  background: var(--color-fill-4) !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);
 }
 
-.header-center :deep(.arco-input-wrapper) {
+.search-container :deep(.arco-input-wrapper) {
   border-radius: 8px;
   background: transparent;
   border: none;
 }
 
-.header-center :deep(.arco-input) {
+.search-container :deep(.arco-input) {
   background: transparent;
   border: none;
   color: var(--color-text-1);
   font-size: 14px;
 }
 
-.header-center :deep(.arco-input::placeholder) {
+.search-container :deep(.arco-input::placeholder) {
   color: var(--color-text-3);
 }
 
-.header-center :deep(.arco-input-search-btn) {
+.search-container :deep(.arco-input-search-btn) {
   border-radius: 0 8px 8px 0;
   background: var(--color-primary-6);
   border: none;
   color: white;
   transition: background-color 0.2s ease;
 }
 
-.header-center :deep(.arco-input-search-btn:hover) {
+.search-container :deep(.arco-input-search-btn:hover) {
   background: var(--color-primary-7);
 }
 
@@ -454,8 +619,8 @@ export default defineComponent({
     margin: 0 10px;
   }
   
-  .header-center :deep(.arco-input-search) {
-    max-width: 250px;
+  .search-container {
+    max-width: 280px;
   }
   
   .confirm-modal {
@@ -484,8 +649,8 @@ export default defineComponent({
     margin: 0 5px;
   }
   
-  .header-center :deep(.arco-input-search) {
-    max-width: 200px;
+  .search-container {
+    max-width: 220px;
   }
   
   .header-left :deep(.arco-btn),