feat: add subtitle search functionality and download feature

- Added subtitle search results support in zh-TW locale. - Enhanced resource page to handle subtitle search results, including new computed properties and methods for managing subtitle data. - Introduced SubtitleCard and SubtitleItem components for displaying subtitle information. - Created AddSubtitleDownloadDialog for managing subtitle downloads with directory selection and media ID options. - Implemented subtitle download caching mechanism to track downloaded subtitles.
2026-07-05 14:31:31 +08:00 · 2026-06-09 06:47:09 +08:00
parent 19710a5f0f
commit b1cb07ae8c
10 changed files with 1062 additions and 22 deletions
--- a/src/pages/resource.vue
+++ b/src/pages/resource.vue
@@ -3,9 +3,11 @@ import { debounce } from 'lodash-es'
 import type { LocationQuery } from 'vue-router'
 import NoDataFound from '@/components/NoDataFound.vue'
 import api from '@/api'
-import type { Context } from '@/api/types'
+import type { Context, SubtitleInfo } from '@/api/types'
 import TorrentCard from '@/components/cards/TorrentCard.vue'
 import TorrentItem from '@/components/cards/TorrentItem.vue'
+import SubtitleCard from '@/components/cards/SubtitleCard.vue'
+import SubtitleItem from '@/components/cards/SubtitleItem.vue'
 import ProgressiveCardGrid from '@/components/misc/ProgressiveCardGrid.vue'
 import TorrentFilterBar from '@/components/filter/TorrentFilterBar.vue'
 import { useI18n } from 'vue-i18n'
@@ -42,13 +44,14 @@ interface SearchParams {
  year: string
  season: string
  sites: string
+  result_type: string
 }

 interface LastSearchContextResponse {
  success?: boolean
  data?: {
    params?: Partial<SearchParams>
-    results?: Context[]
+    results?: Array<Context | SubtitleInfo>
  }
 }

@@ -63,6 +66,7 @@ function createSearchParams(query: LocationQuery): SearchParams {
    year: query?.year?.toString() ?? '',
    season: query?.season?.toString() ?? '',
    sites: query?.sites?.toString() ?? '',
+    result_type: query?.result_type?.toString() === 'subtitle' ? 'subtitle' : 'torrent',
  }
 }

@@ -75,6 +79,7 @@ function normalizeSearchParams(params?: Partial<SearchParams> | null): SearchPar
    year: params?.year?.toString() ?? '',
    season: params?.season?.toString() ?? '',
    sites: params?.sites?.toString() ?? '',
+    result_type: params?.result_type?.toString() === 'subtitle' ? 'subtitle' : 'torrent',
  }
 }

@@ -189,6 +194,12 @@ const season = computed(() => activeSearchParams.value.season)
 // 搜索站点，以,分离多个
 const sites = computed(() => activeSearchParams.value.sites)

+// 搜索结果类型
+const resultType = computed(() => (activeSearchParams.value.result_type === 'subtitle' ? 'subtitle' : 'torrent'))
+
+// 是否为字幕搜索
+const isSubtitleSearch = computed(() => resultType.value === 'subtitle')
+
 // 视图类型，从localStorage中读取
 const viewType = ref<string>(localStorage.getItem('MPTorrentsViewType') ?? 'card')

@@ -218,6 +229,9 @@ const enableFilterAnimation = ref(true)
 // 原始数据列表（未筛选）
 const rawDataList = ref<Array<Context>>([])

+// 原始字幕数据列表
+const rawSubtitleDataList = ref<Array<SubtitleInfo>>([])
+
 // 筛选后的数据列表（用于行视图）
 const filteredRowDataList = ref<Array<Context>>([])

@@ -298,15 +312,21 @@ const searchStreamDoneCloseDelay = 1500

 const streamTotalCount = ref(0)
 const streamPreviewDataList = ref<Array<Context>>([])
+const streamPreviewSubtitleDataList = ref<Array<SubtitleInfo>>([])

 const displayResourceCount = computed(() =>
-  progressActive.value ? streamTotalCount.value : torrentFilter.totalFilteredCount.value,
+  progressActive.value
+    ? streamTotalCount.value
+    : isSubtitleSearch.value
+      ? rawSubtitleDataList.value.length
+      : torrentFilter.totalFilteredCount.value,
 )

 // 搜索中只显示进度区域，避免结果抬头和进度条同时占用顶部空间。
 const showResultHeader = computed(() => isRefreshed.value && !progressActive.value)

 let pendingStreamItems: Array<Context> = []
+let pendingSubtitleStreamItems: Array<SubtitleInfo> = []
 let streamFlushTimer: ReturnType<typeof setTimeout> | null = null
 let streamFinalResultApplied = false
 let pendingProgressText: string | null = null
@@ -324,6 +344,8 @@ watch(

 // 应用筛选
 function applyFilter() {
+  if (isSubtitleSearch.value) return
+
  if (viewType.value === 'row') {
    filteredRowDataList.value = torrentFilter.filterRowData(rawDataList.value)
  } else {
@@ -432,10 +454,12 @@ function clearStreamFlushTimer() {
 function clearStreamPreviewState(resetFinalState: boolean = false) {
  clearStreamFlushTimer()
  pendingStreamItems = []
+  pendingSubtitleStreamItems = []
  pendingProgressText = null
  pendingProgressValue = null
  pendingStreamTotalCount = null
  streamPreviewDataList.value = []
+  streamPreviewSubtitleDataList.value = []
  if (resetFinalState) {
    streamFinalResultApplied = false
  }
@@ -459,6 +483,15 @@ function flushBufferedStreamState() {
  pendingProgressValue = null
  pendingStreamTotalCount = null

+  if (pendingSubtitleStreamItems.length) {
+    streamPreviewSubtitleDataList.value = [...pendingSubtitleStreamItems, ...streamPreviewSubtitleDataList.value].slice(
+      0,
+      streamPreviewLimit,
+    )
+    pendingSubtitleStreamItems = []
+    isRefreshed.value = true
+  }
+
  if (!pendingStreamItems.length) return

  streamPreviewDataList.value = [...pendingStreamItems, ...streamPreviewDataList.value].slice(0, streamPreviewLimit)
@@ -493,9 +526,18 @@ function setSearchParam(params: URLSearchParams, key: string, value: unknown) {
 // 构建搜索流URL
 function buildSearchStreamUrl(params: SearchParams, requestToken?: string) {
  const isMediaSearch = /^[a-zA-Z]+:/.test(params.keyword)
-  const url = getApiUrl(isMediaSearch ? `search/media/${encodeURIComponent(params.keyword)}/stream` : 'search/title/stream')
+  const url = getApiUrl(
+    params.result_type === 'subtitle'
+      ? 'search/subtitle/title/stream'
+      : isMediaSearch
+        ? `search/media/${encodeURIComponent(params.keyword)}/stream`
+        : 'search/title/stream',
+  )

-  if (isMediaSearch) {
+  if (params.result_type === 'subtitle') {
+    setSearchParam(url.searchParams, 'keyword', params.keyword)
+    setSearchParam(url.searchParams, 'sites', params.sites)
+  } else if (isMediaSearch) {
    setSearchParam(url.searchParams, 'mtype', params.type)
    setSearchParam(url.searchParams, 'area', params.area)
    setSearchParam(url.searchParams, 'title', params.title)
@@ -518,6 +560,7 @@ function buildSearchStreamUrl(params: SearchParams, requestToken?: string) {
 function resetSearchResults() {
  clearStreamPreviewState(true)
  rawDataList.value = []
+  rawSubtitleDataList.value = []
  originalDataList.value = []
  streamTotalCount.value = 0
  aiRecommended.value = false
@@ -531,7 +574,8 @@ function resetSearchResults() {

 // 判断当前页面是否已经完成过一次带关键词的空结果搜索，避免 keep-alive 返回时自动重搜。
 function hasLoadedEmptySearchResult() {
-  return isRefreshed.value && !progressActive.value && rawDataList.value.length === 0 && hasSearchKeyword(activeSearchParams.value)
+  const dataLength = isSubtitleSearch.value ? rawSubtitleDataList.value.length : rawDataList.value.length
+  return isRefreshed.value && !progressActive.value && dataLength === 0 && hasSearchKeyword(activeSearchParams.value)
 }

 // 更新搜索进度
@@ -558,6 +602,7 @@ function updateSearchProgress(eventData: { [key: string]: any }, flushNow: boole
 function setStreamResults(items: Context[]) {
  clearStreamPreviewState()
  rawDataList.value = items
+  rawSubtitleDataList.value = []
  originalDataList.value = items
  if (!progressActive.value) {
    streamTotalCount.value = items.length
@@ -566,6 +611,18 @@ function setStreamResults(items: Context[]) {
  applyFilter()
 }

+// 设置字幕搜索结果
+function setSubtitleStreamResults(items: SubtitleInfo[]) {
+  clearStreamPreviewState()
+  rawSubtitleDataList.value = items
+  rawDataList.value = []
+  originalDataList.value = []
+  if (!progressActive.value) {
+    streamTotalCount.value = items.length
+  }
+  isRefreshed.value = true
+}
+
 // 追加流式搜索预览结果
 function appendStreamResults(items: Context[]) {
  if (!items.length) return
@@ -577,12 +634,30 @@ function appendStreamResults(items: Context[]) {
  scheduleStreamFlush()
 }

+// 追加流式字幕搜索预览结果
+function appendSubtitleStreamResults(items: SubtitleInfo[]) {
+  if (!items.length) return
+
+  pendingSubtitleStreamItems.unshift(...items)
+  if (pendingSubtitleStreamItems.length > streamPreviewBufferLimit) {
+    pendingSubtitleStreamItems = pendingSubtitleStreamItems.slice(0, streamPreviewBufferLimit)
+  }
+  scheduleStreamFlush()
+}
+
 function applyFinalStreamResults(items: Context[]) {
  streamFinalResultApplied = true
  flushBufferedStreamState()
  setStreamResults(items)
 }

+// 应用最终字幕搜索结果
+function applyFinalSubtitleStreamResults(items: SubtitleInfo[]) {
+  streamFinalResultApplied = true
+  flushBufferedStreamState()
+  setSubtitleStreamResults(items)
+}
+
 // 获取磁力链接的key
 function getTorrentItemKey(item: Context, index: number) {
  return (
@@ -593,6 +668,16 @@ function getTorrentItemKey(item: Context, index: number) {
  )
 }

+// 获取字幕结果的key
+function getSubtitleItemKey(item: SubtitleInfo, index: number) {
+  return (
+    item.enclosure ||
+    item.page_url ||
+    `${item.site_name || ''}-${item.subtitle_id || ''}-${item.title || ''}` ||
+    `subtitle-${index}`
+  )
+}
+
 // 处理搜索流消息
 function handleSearchStreamMessage(eventData: { [key: string]: any }) {
  if (eventData.type === 'error') {
@@ -601,6 +686,23 @@ function handleSearchStreamMessage(eventData: { [key: string]: any }) {
    return
  }

+  if (isSubtitleSearch.value) {
+    const subtitleItems = Array.isArray(eventData.items) ? (eventData.items as SubtitleInfo[]) : []
+    if (eventData.type === 'append') {
+      updateSearchProgress(eventData)
+      appendSubtitleStreamResults(subtitleItems)
+    } else if (eventData.type === 'replace') {
+      updateSearchProgress(eventData, true)
+      applyFinalSubtitleStreamResults(subtitleItems)
+    } else if (eventData.type === 'done' && subtitleItems.length > 0 && !streamFinalResultApplied) {
+      updateSearchProgress(eventData, true)
+      applyFinalSubtitleStreamResults(subtitleItems)
+    } else {
+      updateSearchProgress(eventData)
+    }
+    return
+  }
+
  const items = Array.isArray(eventData.items) ? (eventData.items as Context[]) : []
  if (eventData.type === 'append') {
    updateSearchProgress(eventData)
@@ -620,14 +722,26 @@ function handleSearchStreamMessage(eventData: { [key: string]: any }) {
 async function searchByRequest(params: SearchParams, requestToken?: string) {
  const items = await requestSearchResults(params, requestToken)
  streamTotalCount.value = items.length
-  setStreamResults(items)
+  if (params.result_type === 'subtitle') {
+    setSubtitleStreamResults(items as SubtitleInfo[])
+  } else {
+    setStreamResults(items as Context[])
+  }
 }

 // 静默刷新使用普通请求，保留当前结果直到新数据完整返回，避免返回页面时露出搜索进度态。
 async function requestSearchResults(params: SearchParams, requestToken?: string) {
  let result: { [key: string]: any }
  // 如果keyword的格式是 xxxx:xxxxx 且:前面的xxxx为字符，则按照媒体ID格式搜索
-  if (/^[a-zA-Z]+:/.test(params.keyword)) {
+  if (params.result_type === 'subtitle') {
+    result = await api.get('search/subtitle/title', {
+      params: {
+        keyword: params.keyword,
+        sites: params.sites,
+        _ts: requestToken,
+      },
+    })
+  } else if (/^[a-zA-Z]+:/.test(params.keyword)) {
    result = await api.get(`search/media/${params.keyword}`, {
      params: {
        mtype: params.type,
@@ -651,7 +765,7 @@ async function requestSearchResults(params: SearchParams, requestToken?: string)
  }

  if (result && result.success) {
-    return (result.data || []) as Context[]
+    return (result.data || []) as Array<Context | SubtitleInfo>
  }

  errorDescription.value = result?.message || t('resource.noResourceFound')
@@ -744,19 +858,28 @@ async function fetchData(options: { force?: boolean; params?: SearchParams; sile
    rememberSearchParams(currentSearchParams)
  }
  const requestToken = options.force || Boolean(currentSearchParams.keyword) ? createSearchRequestToken() : undefined
-  const silentRefresh = Boolean(options.silent && isRefreshed.value && rawDataList.value.length > 0)
+  const hasCurrentResults = isSubtitleSearch.value ? rawSubtitleDataList.value.length > 0 : rawDataList.value.length > 0
+  const silentRefresh = Boolean(options.silent && isRefreshed.value && hasCurrentResults)

  try {
    enableFilterAnimation.value = true
    if (!hasSearchKeyword(currentSearchParams)) {
      // 查询上次搜索结果，并同步可重放的搜索参数
      const results = await fetchLastSearchContext()
-      setStreamResults(results || [])
+      if (activeSearchParams.value.result_type === 'subtitle') {
+        setSubtitleStreamResults((results || []) as SubtitleInfo[])
+      } else {
+        setStreamResults((results || []) as Context[])
+      }
    } else if (silentRefresh) {
      // keep-alive 重新进入时后台刷新，旧结果继续显示，等新结果完整返回后一次性替换。
      const results = await requestSearchResults(currentSearchParams, requestToken)
      streamTotalCount.value = results.length
-      setStreamResults(results)
+      if (currentSearchParams.result_type === 'subtitle') {
+        setSubtitleStreamResults(results as SubtitleInfo[])
+      } else {
+        setStreamResults(results as Context[])
+      }
    } else {
      resetSearchResults()
      startLoadingProgress()
@@ -1054,6 +1177,13 @@ async function checkAiRecommendStatus() {

 // 计算当前显示的数据是否有数据
 const hasData = computed(() => {
+  if (isSubtitleSearch.value) {
+    if (progressActive.value) {
+      return streamPreviewSubtitleDataList.value.length > 0 || rawSubtitleDataList.value.length > 0
+    }
+    return rawSubtitleDataList.value.length > 0
+  }
+
  if (progressActive.value) {
    return streamPreviewDataList.value.length > 0 || rawDataList.value.length > 0
  }
@@ -1071,6 +1201,7 @@ watchEffect(() => {
  // 需要满足：AI 功能启用、数据已加载、尚未检查
  if (
    aiRecommendEnabled.value &&
+    !isSubtitleSearch.value &&
    originalDataList.value.length > 0 &&
    !progressActive.value &&
    !aiStatusChecked.value
@@ -1187,7 +1318,7 @@ onUnmounted(() => {
    <div v-if="showResultHeader" class="resource-page-header d-flex justify-space-between align-center mb-4">
      <div class="resource-page-header__copy">
        <VPageContentTitle
-          :title="t('resource.searchResults')"
+          :title="isSubtitleSearch ? t('resource.subtitleSearchResults') : t('resource.searchResults')"
          class="resource-page-header__title my-0"
          style="margin-block: 0"
        />
@@ -1210,7 +1341,7 @@ onUnmounted(() => {

        <!-- AI操作按钮组 -->
        <div
-          v-if="aiRecommendEnabled && originalDataList.length > 0"
+          v-if="!isSubtitleSearch && aiRecommendEnabled && originalDataList.length > 0"
          class="ai-action-group"
          :class="{ 'ai-action-group--active': showingAiResults }"
        >
@@ -1255,7 +1386,7 @@ onUnmounted(() => {
    <div v-if="isRefreshed && hasData" class="search-results-container">
      <!-- 筛选栏 -->
      <TorrentFilterBar
-        v-if="!progressActive"
+        v-if="!progressActive && !isSubtitleSearch"
        :filter-form="torrentFilter.filterForm"
        :filter-options="torrentFilter.filterOptions"
        :sort-field="torrentFilter.sortField.value"
@@ -1278,7 +1409,29 @@ onUnmounted(() => {
        <!-- 卡片视图模式 -->
        <div v-if="viewType === 'card'" key="card">
          <div
-            v-if="progressActive && streamPreviewDataList.length > 0"
+            v-if="isSubtitleSearch && progressActive && streamPreviewSubtitleDataList.length > 0"
+            class="grid gap-4 grid-torrent-card items-start"
+          >
+            <SubtitleCard
+              v-for="(item, index) in streamPreviewSubtitleDataList"
+              :key="getSubtitleItemKey(item, index)"
+              :subtitle="item"
+              class="stream-result-item"
+            />
+          </div>
+          <ProgressiveCardGrid
+            v-else-if="isSubtitleSearch && rawSubtitleDataList.length > 0"
+            :items="rawSubtitleDataList"
+            :get-item-key="getSubtitleItemKey"
+            :min-item-width="300"
+            :estimated-item-height="320"
+          >
+            <template #default="{ item }">
+              <SubtitleCard :subtitle="item" />
+            </template>
+          </ProgressiveCardGrid>
+          <div
+            v-else-if="!isSubtitleSearch && progressActive && streamPreviewDataList.length > 0"
            class="grid gap-4 grid-torrent-card items-start"
          >
            <TorrentCard
@@ -1300,7 +1453,14 @@ onUnmounted(() => {
            </template>
          </ProgressiveCardGrid>
          <!-- 无结果时显示 -->
-          <div v-if="!progressActive && filteredCardDataList.length === 0" class="no-results">
+          <div
+            v-if="
+              !progressActive &&
+              ((isSubtitleSearch && rawSubtitleDataList.length === 0) ||
+                (!isSubtitleSearch && filteredCardDataList.length === 0))
+            "
+            class="no-results"
+          >
            <VIcon icon="mdi-file-search-outline" size="64" color="grey-lighten-1" />
            <div class="text-h6 text-grey mt-4">{{ t('torrent.noResults') }}</div>
          </div>
@@ -1310,11 +1470,49 @@ onUnmounted(() => {
        <div v-else-if="viewType === 'row'" key="row">
          <VCard class="resource-list-container">
            <!-- 无结果时显示 -->
-            <div v-if="!progressActive && filteredRowDataList.length === 0" class="no-results">
+            <div
+              v-if="
+                !progressActive &&
+                ((isSubtitleSearch && rawSubtitleDataList.length === 0) ||
+                  (!isSubtitleSearch && filteredRowDataList.length === 0))
+              "
+              class="no-results"
+            >
              <VIcon icon="mdi-file-search-outline" size="64" color="grey-lighten-1" />
              <div class="text-h6 text-grey mt-4">{{ t('torrent.noResults') }}</div>
            </div>
-            <div v-else-if="progressActive && streamPreviewDataList.length > 0" class="resource-list overflow-visible">
+            <div
+              v-else-if="isSubtitleSearch && progressActive && streamPreviewSubtitleDataList.length > 0"
+              class="resource-list overflow-visible"
+            >
+              <div
+                v-for="(item, index) in streamPreviewSubtitleDataList"
+                :key="getSubtitleItemKey(item, index)"
+                class="stream-result-item"
+              >
+                <SubtitleItem :subtitle="item" />
+                <VDivider v-if="index < streamPreviewSubtitleDataList.length - 1" class="my-2" />
+              </div>
+            </div>
+            <div v-else-if="isSubtitleSearch && rawSubtitleDataList.length > 0" class="resource-list">
+              <ProgressiveCardGrid
+                :items="rawSubtitleDataList"
+                :columns="1"
+                :gap="8"
+                :estimated-item-height="190"
+                :overscan-rows="6"
+                :get-item-key="getSubtitleItemKey"
+              >
+                <template #default="{ item, index }">
+                  <SubtitleItem :subtitle="item" />
+                  <VDivider v-if="index < rawSubtitleDataList.length - 1" class="my-2" />
+                </template>
+              </ProgressiveCardGrid>
+            </div>
+            <div
+              v-else-if="!isSubtitleSearch && progressActive && streamPreviewDataList.length > 0"
+              class="resource-list overflow-visible"
+            >
              <div
                v-for="(item, index) in streamPreviewDataList"
                :key="getTorrentItemKey(item, index)"
@@ -1324,7 +1522,7 @@ onUnmounted(() => {
                <VDivider v-if="index < streamPreviewDataList.length - 1" class="my-2" />
              </div>
            </div>
-            <div v-else-if="filteredRowDataList.length > 0" class="resource-list">
+            <div v-else-if="!isSubtitleSearch && filteredRowDataList.length > 0" class="resource-list">
              <ProgressiveCardGrid
                :items="filteredRowDataList"
                :columns="1"