feat(search): 添加AI推荐功能并优化相关逻辑

src/components/cards/TorrentCard.vue

@@ -137,7 +137,7 @@ onMounted(() => {
       <!-- 媒体标题 -->
       <VCardItem class="pt-3 pb-0">
         <div class="d-flex flex-row flex-wrap justify-start mb-2 pr-8">
-          <span class="text-h6 font-weight-bold text-truncate me-2">
+          <span class="text-h6 font-weight-bold me-2">
             {{ media?.title ?? meta?.name }}
           </span>
           <VChip
@@ -183,14 +183,14 @@ onMounted(() => {
       <!-- 种子内容 -->
       <VCardText class="d-flex flex-column flex-grow-1 pa-3 overflow-hidden">
         <!-- 种子标题 -->
-        <div class="text-subtitle-2 text-high-emphasis font-weight-medium mb-1" :title="torrent?.title">
+        <div class="text-subtitle-2 text-high-emphasis font-weight-medium mb-1 break-all" :title="torrent?.title">
           {{ torrent?.title }}
         </div>
 
         <!-- 种子描述 -->
         <div
           v-if="meta?.subtitle || torrent?.description"
-          class="text-body-2 text-medium-emphasis mb-2"
+          class="text-body-2 text-medium-emphasis mb-2 break-all"
           :title="meta?.subtitle || torrent?.description"
         >
           {{ meta?.subtitle || torrent?.description }}

src/components/cards/TorrentItem.vue

@@ -140,7 +140,7 @@ onMounted(() => {
         </div>
       </template>
 
-      <VListItemTitle>
+      <VListItemTitle class="whitespace-normal">
         <div class="d-flex flex-row flex-wrap align-center mb-2">
           <span class="text-h6 font-weight-bold me-2">{{ media?.title ?? meta?.name }}</span>
           <VChip
@@ -153,12 +153,12 @@ onMounted(() => {
           </VChip>
         </div>
 
-        <div class="text-subtitle-2 font-weight-medium mb-2" :title="torrent?.title">
+        <div class="text-subtitle-2 font-weight-medium mb-2 break-all" :title="torrent?.title">
           {{ torrent?.title }}
         </div>
 
         <div
-          class="text-body-2 text-medium-emphasis mb-2"
+          class="text-body-2 text-medium-emphasis mb-2 break-all"
           :title="meta?.subtitle || torrent?.description || '暂无描述'"
         >
           {{ meta?.subtitle || torrent?.description || '暂无描述' }}

src/components/dialog/AddDownloadDialog.vue

@@ -223,7 +223,6 @@ onMounted(() => {
             <VSelect
               v-model="selectedDownloader"
               :items="downloaderOptions"
-              size="small"
               :label="t('dialog.addDownload.downloader')"
               variant="underlined"
               :placeholder="t('dialog.addDownload.defaultPlaceholder')"
@@ -236,7 +235,6 @@ onMounted(() => {
               v-model="selectedDirectory"
               :items="targetDirectories"
               :label="t('dialog.addDownload.saveDirectory')"
-              size="small"
               :placeholder="t('dialog.addDownload.autoPlaceholder')"
               variant="underlined"
               density="comfortable"
@@ -248,7 +246,6 @@ onMounted(() => {
           <VCol cols="12">
             <VBtn
               variant="text"
-              size="small"
               :prepend-icon="showAdvancedOptions ? 'mdi-chevron-up' : 'mdi-chevron-down'"
               @click="showAdvancedOptions = !showAdvancedOptions"
             >
@@ -272,7 +269,6 @@ onMounted(() => {
               :hint="t('dialog.reorganize.mediaIdHint')"
               persistent-hint
               prepend-inner-icon="mdi-identifier"
-              size="small"
               variant="underlined"
               density="comfortable"
               @click:append-inner="mediaSelectorDialog = true"
@@ -287,7 +283,6 @@ onMounted(() => {
               :hint="t('dialog.reorganize.mediaIdHint')"
               persistent-hint
               prepend-inner-icon="mdi-identifier"
-              size="small"
               variant="underlined"
               density="comfortable"
               @click:append-inner="mediaSelectorDialog = true"

src/components/dialog/SearchBarDialog.vue

@@ -138,7 +138,7 @@ function getMenus(): NavMenu[] {
     item =>
       item &&
       menus.push({
-        title: t('setting') + ' -> ' + item.title,
+        title: t('navItems.setting') + ' -> ' + item.title,
         icon: item.icon,
         to: `/setting?tab=${item.tab}`,
         header: '',

src/components/dialog/SiteAddEditDialog.vue

@@ -140,7 +140,7 @@ onMounted(async () => {
     await fetchSiteInfo()
     if (siteForm.value.limit_interval || siteForm.value.limit_count || siteForm.value.limit_seconds)
       isLimit.value = true
-    if (siteForm.value.apikey) siteType.value = 'api'
+    if (siteForm.value.apikey || siteForm.value.token) siteType.value = 'api'
   }
   await loadDownloaderSetting()
 })
@@ -224,15 +224,15 @@ onMounted(async () => {
             </VCol>
           </VRow>
           <VTabs v-model="siteType" show-arrows class="v-tabs-pill mt-3">
-            <VTab selected-class="v-tab--selected">
+            <VTab value="cookie" selected-class="v-tab--selected">
               <div>
-                <VIcon size="20" start icon="mdi-cookie" value="cookie" />
+                <VIcon size="20" start icon="mdi-cookie" />
                 Cookie
               </div>
             </VTab>
-            <VTab selected-class="v-tab--selected">
+            <VTab value="api" selected-class="v-tab--selected">
               <div>
-                <VIcon size="20" start icon="mdi-api" value="api" />
+                <VIcon size="20" start icon="mdi-api" />
                 API
               </div>
             </VTab>

src/components/filter/TorrentFilterBar.vue

@@ -0,0 +1,812 @@
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n'
+import { useDisplay } from 'vuetify'
+import { useEventListener } from '@vueuse/core'
+
+// 显示器宽度
+const display = useDisplay()
+
+// 国际化
+const { t } = useI18n()
+
+// 定义输入参数
+const props = defineProps<{
+  // 筛选表单
+  filterForm: Record<string, string[]>
+  // 筛选选项
+  filterOptions: Record<string, string[]>
+  // 排序字段
+  sortField: string
+  // 排序方向
+  sortType: 'asc' | 'desc'
+  // 筛选后的总数量
+  totalFilteredCount: number
+  // 过滤项标题映射
+  filterTitles: Record<string, string>
+  // 排序标题映射
+  sortTitles: Record<string, string>
+  // 是否启用滚动动画
+  enableAnimation?: boolean
+}>()
+
+// 定义事件
+const emit = defineEmits<{
+  'update:sortField': [value: string]
+  'update:sortType': [value: 'asc' | 'desc']
+  'update:filterForm': [key: string, values: string[]]
+  'selectAll': [key: string]
+  'clearFilter': [key: string]
+  'clearAllFilters': []
+  'removeFilter': [key: string, value: string]
+}>()
+
+// 过滤菜单相关
+const filterMenuOpen = ref(false)
+const currentFilter = ref('site')
+const currentFilterTitle = computed(() => props.filterTitles[currentFilter.value])
+const currentFilterOptions = computed(() => {
+  return props.filterOptions[currentFilter.value]
+})
+
+// 添加全部筛选菜单相关
+const allFilterMenuOpen = ref(false)
+
+// 计算已选择的过滤条件数量
+const getFilterCount = computed(() => {
+  let count = 0
+  for (const key in props.filterForm) {
+    count += props.filterForm[key].length
+  }
+  return count
+})
+
+// 计算已选择的过滤条件
+const getSelectedFilters = computed(() => {
+  const filters: Record<string, string[]> = {}
+  for (const key in props.filterForm) {
+    if (props.filterForm[key].length > 0) {
+      filters[key] = [...props.filterForm[key]]
+    }
+  }
+  return filters
+})
+
+// 给定过滤类型返回不同图标
+function getFilterIcon(key: string) {
+  const icons: Record<string, string> = {
+    site: 'mdi-server-network',
+    season: 'mdi-television-classic',
+    freeState: 'mdi-gift-outline',
+    resolution: 'mdi-monitor-screenshot',
+    videoCode: 'mdi-video-vintage',
+    edition: 'mdi-quality-high',
+    releaseGroup: 'mdi-account-group-outline',
+  }
+  return icons[key] || 'mdi-filter-variant'
+}
+
+// 开关全部筛选菜单
+function toggleAllFilterMenu() {
+  allFilterMenuOpen.value = !allFilterMenuOpen.value
+}
+
+// 添加toggleFilterMenu函数
+function toggleFilterMenu(key: string) {
+  if (currentFilter.value === key && filterMenuOpen.value) {
+    filterMenuOpen.value = false
+  } else {
+    currentFilter.value = key
+    filterMenuOpen.value = true
+  }
+}
+
+// 处理筛选值变化
+function handleFilterChange(key: string, values: string[]) {
+  emit('update:filterForm', key, values)
+}
+
+// 全选某个过滤项
+function selectAll(key: string) {
+  emit('selectAll', key)
+}
+
+// 清除某个过滤项
+function clearFilter(key: string) {
+  emit('clearFilter', key)
+}
+
+// 清除所有过滤条件
+function clearAllFilters() {
+  emit('clearAllFilters')
+}
+
+// 移除单个过滤条件
+function removeFilter(key: string, value: string) {
+  emit('removeFilter', key, value)
+}
+
+// 滚动条引用
+const filterBarRef = ref<HTMLElement>()
+
+/**
+ * 自定义平滑滚动
+ * @param element 元素
+ * @param target 目标位置
+ * @param duration 持续时间(ms)
+ */
+function smoothScroll(element: HTMLElement, target: number, duration: number) {
+  const start = element.scrollLeft
+  const change = target - start
+  let startTime: number | null = null
+
+  function animate(currentTime: number) {
+    if (startTime === null) startTime = currentTime
+    const timeElapsed = currentTime - startTime
+    const progress = Math.min(timeElapsed / duration, 1)
+
+    // 使用 ease-in-out 缓动函数
+    const ease = progress < 0.5 ? 2 * progress * progress : -1 + (4 - 2 * progress) * progress
+    element.scrollLeft = start + change * ease
+
+    if (timeElapsed < duration) {
+      requestAnimationFrame(animate)
+    }
+  }
+
+  requestAnimationFrame(animate)
+}
+
+// 初始滚动动画
+onMounted(() => {
+  if (filterBarRef.value) {
+    useEventListener(filterBarRef, 'wheel', (e: WheelEvent) => {
+      if (e.deltaY !== 0) {
+        e.preventDefault()
+        filterBarRef.value!.scrollLeft += e.deltaY
+      }
+    })
+  }
+
+  if (props.enableAnimation === false) return
+
+  nextTick(() => {
+    setTimeout(() => {
+      const el = filterBarRef.value
+      if (el && el.clientWidth > 0 && el.scrollWidth > el.clientWidth) {
+        // 检查当前视口范围内的最后一个元素（即右侧边缘处的元素）
+        const children = Array.from(el.children) as HTMLElement[]
+        const lastInViewport = children.filter(c => (c as HTMLElement).offsetLeft < el.clientWidth).pop() as HTMLElement
+        if (lastInViewport) {
+          const visibleWidth = el.clientWidth - lastInViewport.offsetLeft
+          const visibleRatio = visibleWidth / lastInViewport.offsetWidth
+
+          // 如果视口内最后一个元素显示比例超过30%，则不需要滚动提示
+          if (visibleRatio > 0.3) {
+            return
+          }
+        }
+
+        // 滚动到底部 (1100ms)
+        smoothScroll(el, el.scrollWidth - el.clientWidth, 1100)
+        // 短暂停止后滚动回顶部 (1100ms)
+        setTimeout(() => {
+          smoothScroll(el, 0, 1100)
+        }, 1600)
+      }
+    }, 500)
+  })
+})
+</script>
+
+<template>
+  <!-- PC端头部和筛选栏 -->
+  <div class="search-header d-none d-sm-block">
+    <VCard class="view-header mb-3">
+      <div class="d-flex align-center pa-3">
+        <!-- 固定位置：资源数量和排序 -->
+        <div class="d-flex align-center flex-shrink-0">
+          <VChip
+            color="primary"
+            variant="flat"
+            size="small"
+            class="search-count me-3 flex-shrink-0"
+            prepend-icon="mdi-magnify"
+          >
+            {{ totalFilteredCount }} {{ t('torrent.resources') }}
+          </VChip>
+
+          <VBtn variant="text" size="small" class="sort-btn" :color="undefined">
+            <template #prepend>
+              <VIcon :icon="sortType === 'asc' ? 'mdi-sort-ascending' : 'mdi-sort-descending'" class="me-1" />
+            </template>
+            <span class="text-subtitle-2">{{ sortTitles[sortField] }}</span>
+            <VIcon icon="mdi-chevron-down" size="16" class="ms-1" />
+
+            <VMenu activator="parent" transition="slide-y-transition">
+              <VList density="compact" min-width="120" class="sort-menu-list">
+                <!-- 升序/降序 选项 -->
+                <VListItem
+                  value="asc"
+                  :active="sortType === 'asc'"
+                  color="primary"
+                  @click="emit('update:sortType', 'asc')"
+                  class="px-3"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-sort-ascending" size="small" class="me-2" />
+                  </template>
+                  <VListItemTitle>{{ t('common.ascending') }}</VListItemTitle>
+                </VListItem>
+                <VListItem
+                  value="desc"
+                  :active="sortType === 'desc'"
+                  color="primary"
+                  @click="emit('update:sortType', 'desc')"
+                  class="px-3"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-sort-descending" size="small" class="me-2" />
+                  </template>
+                  <VListItemTitle>{{ t('common.descending') }}</VListItemTitle>
+                </VListItem>
+
+                <VDivider class="my-1" />
+
+                <!-- 排序字段选项 -->
+                <VListItem
+                  v-for="(title, key) in sortTitles"
+                  :key="key"
+                  :value="key"
+                  :active="sortField === key"
+                  color="primary"
+                  @click="emit('update:sortField', key as string)"
+                  class="px-3"
+                >
+                  <VListItemTitle>{{ title }}</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </VBtn>
+
+          <div class="filter-divider"></div>
+        </div>
+
+        <!-- 滚动区域：筛选条件 -->
+        <div class="filter-bar" ref="filterBarRef">
+          <!-- 筛选按钮 -->
+          <VBtn
+            v-for="(title, key) in filterTitles"
+            v-show="filterOptions[key].length > 0"
+            :key="key"
+            variant="tonal"
+            size="small"
+            :color="filterForm[key].length > 0 ? 'primary' : undefined"
+            :prepend-icon="getFilterIcon(key)"
+            class="filter-btn"
+            rounded="pill"
+          >
+            {{ title }}
+            <VChip v-if="filterForm[key].length > 0" size="small" color="primary" class="ms-1" variant="elevated">
+              {{ filterForm[key].length }}
+            </VChip>
+            <VMenu activator="parent" :close-on-content-click="false" scrim>
+              <VCard max-width="20rem">
+                <VCardText class="filter-menu-content">
+                  <div class="flex justify-between">
+                    <VBtn variant="text" size="small" color="primary" @click="selectAll(key)">
+                      {{ t('torrent.selectAll') }}
+                    </VBtn>
+                    <VBtn
+                      v-if="filterForm[key].length > 0"
+                      variant="text"
+                      size="small"
+                      color="error"
+                      @click="clearFilter(key)"
+                    >
+                      {{ t('torrent.clear') }}
+                    </VBtn>
+                  </div>
+                  <VChipGroup
+                    :model-value="filterForm[key]"
+                    @update:model-value="(val: string[]) => handleFilterChange(key, val)"
+                    column
+                    multiple
+                    class="filter-options"
+                  >
+                    <VChip
+                      v-for="option in filterOptions[key]"
+                      :key="option"
+                      :value="option"
+                      filter
+                      variant="elevated"
+                      class="ma-1 filter-chip"
+                      size="small"
+                    >
+                      {{ option }}
+                    </VChip>
+                  </VChipGroup>
+                </VCardText>
+              </VCard>
+            </VMenu>
+          </VBtn>
+
+          <!-- 全部筛选按钮 -->
+          <VBtn
+            variant="tonal"
+            size="small"
+            color="primary"
+            class="filter-btn me-2"
+            prepend-icon="mdi-filter-variant"
+            rounded="pill"
+            @click="toggleAllFilterMenu"
+          >
+            {{ t('torrent.allFilters') }}
+            <VChip v-if="getFilterCount > 0" size="small" color="primary" class="ms-1" variant="elevated">
+              {{ getFilterCount }}
+            </VChip>
+          </VBtn>
+        </div>
+      </div>
+
+      <div v-if="getFilterCount > 0" class="selected-filters">
+        <div class="d-flex align-center">
+          <div class="d-flex flex-wrap align-center flex-grow-1">
+            <template v-for="(values, key) in getSelectedFilters" :key="key">
+              <VChip
+                v-for="(value, index) in values"
+                :key="`${key}-${index}`"
+                color="primary"
+                size="small"
+                closable
+                variant="elevated"
+                class="me-1 mb-1 mt-1 filter-tag"
+                @click:close="removeFilter(key as string, value)"
+              >
+                <VIcon size="small" :icon="getFilterIcon(key as string)" class="me-1"></VIcon>
+                <strong>{{ filterTitles[key as string] }}:</strong> {{ value }}
+              </VChip>
+            </template>
+          </div>
+
+          <VSpacer />
+
+          <!-- 清除全部筛选按钮 -->
+          <VBtn
+            v-if="getFilterCount > 0"
+            variant="text"
+            size="small"
+            color="error"
+            @click="clearAllFilters"
+            class="ms-2 flex-shrink-0"
+            prepend-icon="mdi-close-circle-outline"
+          >
+            {{ t('torrent.clearFilters') }}
+          </VBtn>
+        </div>
+      </div>
+    </VCard>
+  </div>
+
+  <!-- 移动端头部和筛选区域 -->
+  <VCard class="d-block d-sm-none search-header-mobile mb-3">
+    <div class="view-header">
+      <div class="d-flex align-center flex-wrap pa-2">
+        <div class="d-flex align-center w-100">
+          <VChip
+            color="primary"
+            variant="elevated"
+            size="small"
+            class="search-count me-auto"
+            prepend-icon="mdi-magnify"
+          >
+            {{ totalFilteredCount }} {{ t('torrent.resources') }}
+          </VChip>
+
+          <!-- 排序选择 -->
+          <VBtn variant="text" size="small" class="sort-btn mobile-sort-btn" :color="undefined">
+            <template #prepend>
+              <VIcon :icon="sortType === 'asc' ? 'mdi-sort-ascending' : 'mdi-sort-descending'" class="me-1" />
+            </template>
+            <span class="text-subtitle-2">{{ sortTitles[sortField] }}</span>
+            <VIcon icon="mdi-chevron-down" size="16" class="ms-1" />
+
+            <VMenu activator="parent" transition="slide-y-transition">
+              <VList density="compact" min-width="120" class="sort-menu-list">
+                <!-- 升序/降序 选项 -->
+                <VListItem
+                  value="asc"
+                  :active="sortType === 'asc'"
+                  color="primary"
+                  @click="emit('update:sortType', 'asc')"
+                  class="px-3"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-sort-ascending" size="small" class="me-2" />
+                  </template>
+                  <VListItemTitle>{{ t('common.ascending') }}</VListItemTitle>
+                </VListItem>
+                <VListItem
+                  value="desc"
+                  :active="sortType === 'desc'"
+                  color="primary"
+                  @click="emit('update:sortType', 'desc')"
+                  class="px-3"
+                >
+                  <template #prepend>
+                    <VIcon icon="mdi-sort-descending" size="small" class="me-2" />
+                  </template>
+                  <VListItemTitle>{{ t('common.descending') }}</VListItemTitle>
+                </VListItem>
+
+                <VDivider class="my-1" />
+
+                <!-- 排序字段选项 -->
+                <VListItem
+                  v-for="(title, key) in sortTitles"
+                  :key="key"
+                  :value="key"
+                  :active="sortField === key"
+                  color="primary"
+                  @click="emit('update:sortField', key as string)"
+                  class="px-3"
+                >
+                  <VListItemTitle>{{ title }}</VListItemTitle>
+                </VListItem>
+              </VList>
+            </VMenu>
+          </VBtn>
+        </div>
+
+        <!-- 筛选图标按钮区域 -->
+        <div class="filter-buttons-grid w-100 mt-2">
+          <VBtn
+            v-for="(title, key) in filterTitles"
+            v-show="filterOptions[key].length > 0"
+            :key="key"
+            variant="text"
+            color="primary"
+            class="filter-btn-mobile"
+            @click="toggleFilterMenu(key)"
+          >
+            <VIcon :icon="getFilterIcon(key)" class="filter-icon me-1"></VIcon>
+            <span class="filter-label">
+              {{ title }}
+            </span>
+            <VBadge
+              v-if="filterForm[key].length > 0"
+              :content="filterForm[key].length"
+              color="primary"
+              location="top end"
+              offset-x="-10"
+              offset-y="-10"
+            ></VBadge>
+          </VBtn>
+
+          <!-- 全部筛选按钮 -->
+          <VBtn variant="text" color="primary" class="filter-btn-mobile" @click="toggleAllFilterMenu">
+            <VIcon icon="mdi-filter-variant" class="filter-icon me-1"></VIcon>
+            <span class="filter-label">
+              {{ t('torrent.allFilters') }}
+            </span>
+            <VBadge
+              v-if="getFilterCount > 0"
+              :content="getFilterCount"
+              color="primary"
+              location="top end"
+              offset-x="-10"
+              offset-y="-10"
+            ></VBadge>
+          </VBtn>
+        </div>
+      </div>
+    </div>
+  </VCard>
+
+  <!-- 全部筛选弹窗 -->
+  <VDialog
+    v-model="allFilterMenuOpen"
+    max-width="50rem"
+    location="center"
+    scrollable
+    :fullscreen="!display.mdAndUp.value"
+  >
+    <VCard>
+      <VDialogCloseBtn @click="allFilterMenuOpen = false" />
+      <VCardTitle class="py-3 d-flex align-center">
+        <VIcon icon="mdi-filter-variant" class="me-2"></VIcon>
+        <span>{{ t('torrent.allFilters') }}</span>
+        <VSpacer />
+        <VBtn
+          v-if="getFilterCount > 0"
+          class="me-10"
+          variant="text"
+          size="small"
+          color="error"
+          @click="clearAllFilters"
+        >
+          {{ t('torrent.clearAll') }}
+        </VBtn>
+      </VCardTitle>
+      <VDivider />
+      <VCardText>
+        <div class="all-filters-grid">
+          <VCard
+            v-for="(title, key) in filterTitles"
+            variant="tonal"
+            :key="key"
+            class="filter-section"
+            v-show="filterOptions[key].length > 0"
+          >
+            <VCardItem class="py-2">
+              <template #prepend>
+                <VIcon :icon="getFilterIcon(key)" class="me-2"></VIcon>
+              </template>
+              <VCardTitle>{{ title }}</VCardTitle>
+              <template #append>
+                <VBtn variant="text" size="small" color="primary" @click="selectAll(key)">
+                  {{ t('torrent.selectAll') }}
+                </VBtn>
+                <VBtn
+                  v-if="filterForm[key].length > 0"
+                  variant="text"
+                  size="small"
+                  color="error"
+                  @click="clearFilter(key)"
+                >
+                  {{ t('torrent.clear') }}
+                </VBtn>
+              </template>
+            </VCardItem>
+            <VCardText>
+              <VChipGroup
+                :model-value="filterForm[key]"
+                @update:model-value="(val: string[]) => handleFilterChange(key, val)"
+                column
+                multiple
+                class="filter-options"
+              >
+                <VChip
+                  v-for="option in filterOptions[key]"
+                  :key="option"
+                  :value="option"
+                  filter
+                  variant="elevated"
+                  class="ma-1 filter-chip"
+                  size="small"
+                >
+                  {{ option }}
+                </VChip>
+              </VChipGroup>
+            </VCardText>
+          </VCard>
+        </div>
+      </VCardText>
+    </VCard>
+  </VDialog>
+
+  <!-- 筛选弹窗 -->
+  <VDialog v-model="filterMenuOpen" max-width="25rem" max-height="85vh" location="center" scrollable>
+    <VCard>
+      <VCardTitle class="py-3 d-flex align-center">
+        <VIcon :icon="getFilterIcon(currentFilter)" class="me-2"></VIcon>
+        <span>{{ currentFilterTitle }}</span>
+        <VSpacer />
+        <VBtn
+          v-if="filterForm[currentFilter].length > 0"
+          variant="text"
+          size="small"
+          color="error"
+          @click="clearFilter(currentFilter)"
+        >
+          {{ t('torrent.clear') }}
+        </VBtn>
+        <VBtn variant="text" size="small" color="primary" @click="selectAll(currentFilter)">
+          {{ t('torrent.selectAll') }}
+        </VBtn>
+      </VCardTitle>
+      <VDivider />
+      <VCardText>
+        <VChipGroup
+          :model-value="filterForm[currentFilter]"
+          @update:model-value="(val: string[]) => handleFilterChange(currentFilter, val)"
+          column
+          multiple
+          class="filter-options"
+        >
+          <VChip
+            v-for="option in currentFilterOptions"
+            :key="option"
+            :value="option"
+            filter
+            variant="elevated"
+            class="ma-1 filter-chip"
+            size="small"
+          >
+            {{ option }}
+          </VChip>
+        </VChipGroup>
+      </VCardText>
+      <VCardActions>
+        <VSpacer />
+        <VBtn color="primary" prepend-icon="mdi-check" class="px-5" @click="filterMenuOpen = false">
+          {{ t('torrent.confirm') }}
+        </VBtn>
+      </VCardActions>
+    </VCard>
+  </VDialog>
+</template>
+
+<style scoped>
+.search-header {
+  position: sticky;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+  inset-block-start: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.search-header-mobile {
+  position: sticky;
+  z-index: 10;
+  backdrop-filter: blur(10px);
+  inset-block-start: 0;
+  width: 100%;
+  max-width: 100%;
+}
+
+.view-header {
+  overflow: hidden;
+}
+
+.search-count {
+  font-weight: 500;
+}
+
+.sort-btn {
+  height: 32px !important;
+  font-weight: 500;
+  padding-inline: 12px 6px !important;
+}
+
+.sort-btn .v-icon {
+  color: rgba(var(--v-theme-on-surface), 0.6);
+}
+
+.sort-btn :deep(.v-btn__prepend) {
+  margin-inline-end: 2px !important;
+}
+
+.sort-menu-list {
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+}
+
+.sort-menu-list :deep(.v-list-item__prepend > .v-icon) {
+  margin-inline-end: 0px !important;
+}
+
+.filter-bar {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  overflow-x: auto;
+  flex: 1;
+  width: 0;
+  min-width: 0;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.filter-bar::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-bar > * {
+  flex-shrink: 0;
+}
+
+.filter-divider {
+  background-color: rgba(var(--v-theme-on-surface), 0.12);
+  block-size: 24px;
+  inline-size: 1px;
+  margin-block: 0;
+  margin-inline: 8px;
+}
+
+.filter-btn {
+  min-inline-size: 0;
+  transition: opacity 0.2s;
+}
+
+.filter-btn:hover {
+  opacity: 0.8;
+}
+
+.filter-menu-content {
+  max-block-size: 50vh;
+  overflow-y: auto;
+}
+
+.filter-options {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.filter-chip {
+  border: 1px solid rgba(var(--v-theme-primary), 0.2);
+  margin: 4px;
+  background-color: rgba(var(--v-theme-primary), 0.1) !important;
+  color: rgba(var(--v-theme-on-surface), 0.9) !important;
+  font-weight: 500;
+  transition: all 0.2s ease;
+}
+
+.filter-chip:hover {
+  background-color: rgba(var(--v-theme-primary), 0.15) !important;
+}
+
+.filter-chip.v-chip--selected {
+  background-color: rgba(var(--v-theme-primary), 0.85) !important;
+  box-shadow: 0 2px 4px rgba(var(--v-theme-primary), 0.3);
+  color: rgb(var(--v-theme-on-primary)) !important;
+  font-weight: 600;
+}
+
+.filter-tag {
+  font-weight: 500;
+  transition: all 0.2s;
+}
+
+.filter-tag:hover {
+  opacity: 0.8;
+}
+
+.selected-filters {
+  overflow: hidden;
+  background-color: rgba(var(--v-theme-surface-variant), 0.08);
+  padding-block: 8px;
+  padding-inline: 12px;
+}
+
+.filter-buttons-grid {
+  display: grid;
+  gap: 4px;
+  grid-template-columns: repeat(3, 1fr);
+}
+
+.filter-btn-mobile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.08);
+  border-radius: 8px;
+  background-color: rgba(var(--v-theme-surface), 0.5);
+  block-size: auto;
+  min-block-size: 48px;
+  padding-block: 4px;
+  padding-inline: 0;
+}
+
+.filter-icon {
+  font-size: 18px;
+  margin-block-end: 2px;
+}
+
+.filter-label {
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.all-filters-grid {
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+}
+
+.filter-section {
+  background-color: rgba(var(--v-theme-surface-variant), 0.08);
+}
+</style>