feat(SearchBar): 添加站点搜索功能，支持多选和过滤

src/pages/resource.vue

@@ -31,6 +31,9 @@ const year = route.query?.year
 // 搜索季
 const season = route.query?.season?.toString() ?? ''
 
+// 搜索站点，以,分离多个
+const sites = route.query?.sites?.toString() ?? ''
+
 // 视图类型，从localStorage中读取
 const viewType = ref<string>(localStorage.getItem('MPTorrentsViewType') ?? 'card')
 
@@ -97,6 +100,7 @@ async function fetchData() {
             title,
             year,
             season,
+            sites,
           },
         })
       } else {
@@ -104,6 +108,7 @@ async function fetchData() {
         result = await api.get(`search/title`, {
           params: {
             keyword,
+            sites,
           },
         })
       }

src/views/system/SearchBarView.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import api from '@/api'
-import type { Plugin, Subscribe } from '@/api/types'
+import type { Plugin, Site, Subscribe } from '@/api/types'
 import { SystemNavMenus, SettingTabs } from '@/router/menu'
 import { NavMenu } from '@/@layouts/types'
 import store from '@/store'
@@ -123,6 +123,12 @@ const matchedPluginItems = computed(() => {
 // 所有订阅数据
 const SubscribeItems = ref<Subscribe[]>([])
 
+// 所有站点
+const allSites = ref<Site[]>([])
+
+// 选中的站点
+const selectedSites = ref<number[]>([])
+
 // 获取订阅列表数据
 async function fetchSubscribes() {
   try {
@@ -132,6 +138,29 @@ async function fetchSubscribes() {
   }
 }
 
+// 查询所有站点
+async function querySites() {
+  try {
+    const data: Site[] = await api.get('site/')
+
+    // 过滤站点，只有启用的站点才显示
+    allSites.value = data.filter(item => item.is_active)
+  } catch (error) {
+    console.log(error)
+  }
+}
+
+// 查询用户选中的站点
+async function querySelectedSites() {
+  try {
+    const result: { [key: string]: any } = await api.get('system/setting/IndexerSites')
+
+    selectedSites.value = result.data?.value ?? []
+  } catch (error) {
+    console.log(error)
+  }
+}
+
 // 匹配的订阅列表
 const matchedSubscribeItems = computed(() => {
   if (!searchWord.value) return []
@@ -165,6 +194,7 @@ function searchTorrent() {
     query: {
       keyword: searchWord.value,
       area: 'title',
+      sites: selectedSites.value.join(','),
     },
   })
   emit('close')
@@ -228,6 +258,8 @@ onMounted(() => {
   fetchInstalledPlugins()
   fetchSubscribes()
   loadRecentSearches()
+  querySites()
+  querySelectedSites()
 })
 </script>
 <template>
@@ -304,10 +336,28 @@ onMounted(() => {
           </VHover>
           <VHover>
             <template #default="hover">
-              <VListItem prepend-icon="mdi-search-web" link v-bind="hover.props" @click="searchTorrent">
+              <VListItem
+                prepend-icon="mdi-file-search"
+                link
+                v-bind="hover.props"
+                @click="searchTorrent"
+                :ripple="false"
+              >
                 <VListItemTitle class="break-words whitespace-break-spaces">
                   搜索 <span class="font-bold">{{ searchWord }}</span> 相关的【站点资源】 ...
                 </VListItemTitle>
+                <VChipGroup v-if="hover.isHovering" v-model="selectedSites" column multiple @click.stop>
+                  <VChip
+                    v-for="site in allSites"
+                    :key="site.id"
+                    :color="selectedSites.includes(site.id) ? 'primary' : ''"
+                    filter
+                    variant="outlined"
+                    :value="site.id"
+                  >
+                    {{ site.name }}
+                  </VChip>
+                </VChipGroup>
                 <template #append>
                   <VIcon v-if="hover.isHovering" icon="ri-corner-down-left-line" />
                 </template>