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.
This commit is contained in:
jxxghp
2026-06-09 06:47:09 +08:00
parent 19710a5f0f
commit b1cb07ae8c
10 changed files with 1062 additions and 22 deletions

View File

@@ -0,0 +1,210 @@
<script lang="ts" setup>
import type { PropType } from 'vue'
import { formatDateDifference, formatFileSize } from '@/@core/utils/formatters'
import api from '@/api'
import type { SubtitleInfo } from '@/api/types'
import { getCachedSiteIcon } from '@/utils/siteIconCache'
import { downloadedSubtitleMap, markSubtitleDownloaded } from '@/utils/subtitleDownloadCache'
import { openSharedDialog } from '@/composables/useSharedDialog'
import { useI18n } from 'vue-i18n'
const AddSubtitleDownloadDialog = defineAsyncComponent(() => import('../dialog/AddSubtitleDownloadDialog.vue'))
// 多语言支持
const { t } = useI18n()
// 输入参数
const props = defineProps({
subtitle: Object as PropType<SubtitleInfo>,
width: String,
})
// 字幕信息
const subtitle = ref(props.subtitle)
// 站点图标
const siteIcon = ref('')
const isDownloaded = computed(() => Boolean(subtitle.value?.enclosure && downloadedSubtitleMap[subtitle.value.enclosure]))
// 查询站点图标
async function getSiteIcon() {
if (!subtitle.value?.site) {
siteIcon.value = ''
return
}
try {
siteIcon.value = await getCachedSiteIcon(subtitle.value.site, async () => {
try {
const response = await api.get(`site/icon/${subtitle.value?.site}`)
return response?.data?.icon || ''
} catch (error) {
console.error('Failed to load site icon:', error)
return ''
}
})
} catch (error) {
console.error('Failed to load site icon:', error)
siteIcon.value = ''
}
}
// 添加字幕下载成功
function addDownloadSuccess(url: string) {
markSubtitleDownloaded(url)
}
// 添加字幕下载失败
function addDownloadError(error: string) {
console.error(error)
}
// 询问并下载字幕
async function handleAddDownload() {
openSharedDialog(
AddSubtitleDownloadDialog,
{
title: subtitle.value?.title,
subtitle: subtitle.value,
},
{
done: addDownloadSuccess,
error: addDownloadError,
},
{ closeOn: ['close', 'done', 'error'] },
)
}
// 打开字幕详情页面
function openSubtitleDetail() {
if (!subtitle.value?.page_url) return
window.open(subtitle.value.page_url, '_blank')
}
// 打开字幕举报页面
function openReportPage() {
if (!subtitle.value?.report_url) return
window.open(subtitle.value.report_url, '_blank')
}
watch(
() => props.subtitle,
value => {
subtitle.value = value
getSiteIcon()
},
{ immediate: true },
)
</script>
<template>
<div class="h-full">
<VCard
:width="props.width || '100%'"
:variant="isDownloaded ? 'outlined' : 'flat'"
@click="handleAddDownload"
class="h-full cursor-pointer transition-transform hover:-translate-y-1 duration-300 d-flex flex-column overflow-hidden subtitle-card"
:class="{ 'border-success border-2 opacity-85': isDownloaded }"
hover
>
<VCardItem class="pt-3 pb-0">
<div class="d-flex justify-space-between align-center flex-wrap gap-2 mb-2">
<div class="d-flex align-center min-w-0">
<VImg
v-if="siteIcon"
:src="siteIcon"
:alt="subtitle?.site_name"
class="mr-2 rounded"
width="20"
height="20"
/>
<VAvatar v-else size="20" class="mr-2 text-caption bg-surface-variant" color="surface-variant">
{{ subtitle?.site_name?.substring(0, 1) }}
</VAvatar>
<span class="font-weight-bold text-body-2 text-truncate">{{ subtitle?.site_name }}</span>
</div>
<div class="d-flex align-center gap-2">
<VChip v-if="subtitle?.language" size="x-small" color="info" variant="tonal" class="rounded-sm">
<VImg
v-if="subtitle?.language_icon"
:src="subtitle.language_icon"
:alt="subtitle.language"
width="14"
height="14"
class="me-1"
/>
{{ subtitle.language }}
</VChip>
<VChip v-if="isDownloaded" size="x-small" color="success" variant="tonal" class="rounded-sm">
{{ t('dialog.addSubtitleDownload.downloaded') }}
</VChip>
</div>
</div>
</VCardItem>
<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-2 break-all" :title="subtitle?.title">
{{ subtitle?.title }}
</div>
<div
v-if="subtitle?.description"
class="text-body-2 text-medium-emphasis mb-2 break-all"
:title="subtitle?.description"
>
{{ subtitle.description }}
</div>
<div class="d-flex flex-wrap align-center gap-2 mb-2">
<span v-if="subtitle?.pubdate || subtitle?.date_elapsed" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="grey" icon="mdi-clock-outline" class="me-1"></VIcon>
{{ subtitle?.date_elapsed || formatDateDifference(subtitle.pubdate || '') }}
</span>
<span v-if="subtitle?.grabs !== undefined" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="primary" icon="mdi-download-outline" class="me-1"></VIcon>
{{ subtitle.grabs }}
</span>
<span v-if="subtitle?.uploader" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="grey" icon="mdi-account-outline" class="me-1"></VIcon>
{{ subtitle.uploader }}
</span>
</div>
<div class="d-flex flex-wrap gap-1">
<VChip v-if="subtitle?.torrent_id" size="x-small" variant="tonal" class="rounded-sm">
TID {{ subtitle.torrent_id }}
</VChip>
<VChip v-if="subtitle?.subtitle_id" size="x-small" variant="tonal" class="rounded-sm">
SID {{ subtitle.subtitle_id }}
</VChip>
</div>
</VCardText>
<VCardActions class="border-t border-opacity-10 mt-auto pa-2">
<VChip v-if="subtitle?.size" color="primary" size="x-small" variant="elevated" class="rounded-sm">
{{ formatFileSize(subtitle.size) }}
</VChip>
<VSpacer />
<VBtn v-if="subtitle?.report_url" icon size="small" variant="text" color="warning" @click.stop="openReportPage">
<VIcon icon="mdi-alert-outline"></VIcon>
</VBtn>
<VBtn v-if="subtitle?.page_url" icon size="small" variant="text" color="primary" @click.stop="openSubtitleDetail">
<VIcon icon="mdi-information-outline"></VIcon>
</VBtn>
</VCardActions>
</VCard>
</div>
</template>
<style scoped>
.subtitle-card {
border: 1px solid transparent;
}
.subtitle-card:hover {
border-color: rgba(var(--v-theme-primary), 0.3);
}
</style>

View File

@@ -0,0 +1,213 @@
<script lang="ts" setup>
import type { PropType } from 'vue'
import { formatDateDifference, formatFileSize } from '@/@core/utils/formatters'
import api from '@/api'
import type { SubtitleInfo } from '@/api/types'
import { getCachedSiteIcon } from '@/utils/siteIconCache'
import { downloadedSubtitleMap, markSubtitleDownloaded } from '@/utils/subtitleDownloadCache'
import { openSharedDialog } from '@/composables/useSharedDialog'
import { useI18n } from 'vue-i18n'
const AddSubtitleDownloadDialog = defineAsyncComponent(() => import('../dialog/AddSubtitleDownloadDialog.vue'))
// 多语言支持
const { t } = useI18n()
// 输入参数
const props = defineProps({
subtitle: Object as PropType<SubtitleInfo>,
})
// 字幕信息
const subtitle = ref(props.subtitle)
// 站点图标
const siteIcon = ref('')
const isDownloaded = computed(() => Boolean(subtitle.value?.enclosure && downloadedSubtitleMap[subtitle.value.enclosure]))
// 查询站点图标
async function getSiteIcon() {
if (!subtitle.value?.site) {
siteIcon.value = ''
return
}
try {
siteIcon.value = await getCachedSiteIcon(subtitle.value.site, async () => {
try {
const response = await api.get(`site/icon/${subtitle.value?.site}`)
return response?.data?.icon || ''
} catch (error) {
console.error('Failed to load site icon:', error)
return ''
}
})
} catch (error) {
console.error('Failed to load site icon:', error)
siteIcon.value = ''
}
}
// 询问并下载字幕
async function handleAddDownload() {
openSharedDialog(
AddSubtitleDownloadDialog,
{
title: subtitle.value?.title,
subtitle: subtitle.value,
},
{
done: addDownloadSuccess,
error: addDownloadError,
},
{ closeOn: ['close', 'done', 'error'] },
)
}
// 添加字幕下载成功
function addDownloadSuccess(url: string) {
markSubtitleDownloaded(url)
}
// 添加字幕下载失败
function addDownloadError(error: string) {
console.error(error)
}
// 打开字幕详情页面
function openSubtitleDetail() {
if (!subtitle.value?.page_url) return
window.open(subtitle.value.page_url, '_blank')
}
// 打开字幕举报页面
function openReportPage() {
if (!subtitle.value?.report_url) return
window.open(subtitle.value.report_url, '_blank')
}
watch(
() => props.subtitle,
value => {
subtitle.value = value
getSiteIcon()
},
{ immediate: true },
)
</script>
<template>
<div class="w-100">
<VListItem
:value="subtitle?.enclosure"
class="pa-3 mb-2 rounded subtitle-item transition-all duration-300 hover:-translate-y-1 overflow-hidden"
:class="{ 'border-start border-success border-3 opacity-85': isDownloaded }"
@click="handleAddDownload"
>
<template #prepend>
<div class="d-flex flex-column align-center pr-3" :title="subtitle?.site_name">
<VImg
v-if="siteIcon"
:src="siteIcon"
:alt="subtitle?.site_name"
class="rounded mb-1 site-icon"
width="32"
height="32"
/>
<VAvatar
v-else
size="32"
class="mb-1 text-caption bg-primary-lighten-4 text-primary font-weight-bold site-icon"
>
{{ subtitle?.site_name?.substring(0, 1) }}
</VAvatar>
</div>
</template>
<VListItemTitle class="whitespace-normal">
<div class="d-flex flex-row flex-wrap align-center gap-2 mb-2">
<span class="text-h6 font-weight-bold me-1">{{ subtitle?.site_name }}</span>
<VChip v-if="subtitle?.language" size="x-small" color="info" variant="tonal" class="rounded-sm">
<VImg
v-if="subtitle?.language_icon"
:src="subtitle.language_icon"
:alt="subtitle.language"
width="14"
height="14"
class="me-1"
/>
{{ subtitle.language }}
</VChip>
<VChip v-if="isDownloaded" size="x-small" color="success" variant="tonal" class="rounded-sm">
{{ t('dialog.addSubtitleDownload.downloaded') }}
</VChip>
</div>
<div class="text-subtitle-2 font-weight-medium mb-2 break-all" :title="subtitle?.title">
{{ subtitle?.title }}
</div>
<div v-if="subtitle?.description" class="text-body-2 text-medium-emphasis mb-2 break-all" :title="subtitle.description">
{{ subtitle.description }}
</div>
<div class="d-flex flex-wrap gap-2 mb-2">
<span v-if="subtitle?.pubdate || subtitle?.date_elapsed" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="grey" icon="mdi-clock-outline" class="me-1"></VIcon>
{{ subtitle?.date_elapsed || formatDateDifference(subtitle.pubdate || '') }}
</span>
<span v-if="subtitle?.grabs !== undefined" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="primary" icon="mdi-download-outline" class="me-1"></VIcon>
{{ subtitle.grabs }}
</span>
<span v-if="subtitle?.uploader" class="d-flex align-center text-sm text-medium-emphasis">
<VIcon size="small" color="grey" icon="mdi-account-outline" class="me-1"></VIcon>
{{ subtitle.uploader }}
</span>
</div>
</VListItemTitle>
<template #append>
<div class="d-flex flex-column align-end gap-2">
<VChip v-if="subtitle?.size" color="primary" size="x-small" variant="elevated" class="rounded-sm">
{{ formatFileSize(subtitle.size) }}
</VChip>
<div class="d-flex align-center">
<VBtn
v-if="subtitle?.report_url"
icon
size="small"
variant="text"
color="warning"
@click.stop="openReportPage"
>
<VIcon icon="mdi-alert-outline"></VIcon>
</VBtn>
<VBtn
v-if="subtitle?.page_url"
icon
size="small"
variant="text"
color="primary"
@click.stop="openSubtitleDetail"
>
<VIcon icon="mdi-information-outline"></VIcon>
</VBtn>
</div>
</div>
</template>
</VListItem>
</div>
</template>
<style scoped>
.subtitle-item {
border: 1px solid transparent;
}
.subtitle-item:hover {
border-color: rgba(var(--v-theme-primary), 0.3);
}
</style>

View File

@@ -0,0 +1,270 @@
<script setup lang="ts">
import { useToast } from 'vue-toastification'
import api from '@/api'
import { doneNProgress, startNProgress } from '@/api/nprogress'
import type { SubtitleInfo, TransferDirectoryConf } from '@/api/types'
import { formatFileSize } from '@/@core/utils/formatters'
import { useI18n } from 'vue-i18n'
import MediaIdSelector from '../misc/MediaIdSelector.vue'
import { numberValidator } from '@/@validators'
import { useGlobalSettingsStore } from '@/stores'
// 多语言支持
const { t } = useI18n()
// 从 provide 中获取全局设置
const globalSettingsStore = useGlobalSettingsStore()
const globalSettings = globalSettingsStore.globalSettings
// 当前识别类型
const mediaSource = ref(globalSettings.RECOGNIZE_SOURCE || 'themoviedb')
// 输入参数
const props = defineProps({
title: String,
subtitle: Object as PropType<SubtitleInfo>,
})
// 定义成功和失败事件
const emit = defineEmits(['done', 'error', 'close'])
// 提示框
const $toast = useToast()
// 选择的保存目录
const selectedDirectory = ref<string | null>(null)
// 所有目录设置
const directories = ref<TransferDirectoryConf[]>([])
// 是否正在加载
const loading = ref(false)
// 是否显示高级选项
const showAdvancedOptions = ref(false)
// TMDB ID
const tmdbid = ref<number | undefined>(undefined)
// 豆瓣ID
const doubanId = ref<string | undefined>(undefined)
// TMDB选择对话框
const mediaSelectorDialog = ref(false)
// 计算按钮图标
const icon = computed(() => (loading.value ? 'mdi-progress-download' : 'mdi-download'))
// 计算按钮文字
const buttonText = computed(() =>
loading.value ? t('dialog.addSubtitleDownload.downloading') : t('dialog.addSubtitleDownload.startDownload'),
)
// 加载目录设置
async function loadDirectories() {
try {
const result: { [key: string]: any } = await api.get('system/setting/Directories')
directories.value = result.data?.value ?? []
} catch (error) {
console.log(error)
}
}
function convertToUri(item: TransferDirectoryConf) {
if (!item.download_path) {
return undefined
}
if (item.storage === 'local') {
return item.download_path
}
return item.storage + ':' + item.download_path
}
// 获取保存目录
const targetDirectories = computed(() => {
const downloadDirectories = directories.value
.map(item => convertToUri(item))
.filter((item): item is string => item !== undefined)
return [...new Set(downloadDirectories)]
})
// 下载字幕
async function addSubtitleDownload() {
startNProgress()
loading.value = true
try {
const payload: any = {
subtitle_in: props.subtitle,
save_path: selectedDirectory.value,
}
if (tmdbid.value) {
payload.tmdbid = tmdbid.value
}
if (doubanId.value) {
payload.doubanid = doubanId.value
}
const result: { [key: string]: any } = await api.post('download/subtitle', payload)
if (result && result.success) {
$toast.success(
t('dialog.addSubtitleDownload.downloadSuccess', {
site: props.subtitle?.site_name,
title: props.subtitle?.title,
}),
)
emit('done', props.subtitle?.enclosure)
} else {
$toast.error(
t('dialog.addSubtitleDownload.downloadFailed', {
site: props.subtitle?.site_name,
title: props.subtitle?.title,
message: result?.message,
}),
)
emit('error', result?.message)
}
} catch (error) {
console.error(error)
emit('error', String(error))
}
loading.value = false
doneNProgress()
}
onMounted(() => {
loadDirectories()
})
</script>
<template>
<VDialog max-width="35rem" scrollable>
<VCard>
<VCardItem class="py-2">
<template #prepend>
<VIcon icon="mdi-subtitles-outline" class="me-2" />
</template>
<VCardTitle>{{ t('dialog.addSubtitleDownload.confirmDownload') }}</VCardTitle>
<VCardSubtitle>{{ subtitle?.site_name }} - {{ title }}</VCardSubtitle>
</VCardItem>
<VDialogCloseBtn @click="emit('close')" />
<VDivider />
<VCardText>
<VList lines="one">
<VListItem>
<template #prepend>
<VIcon icon="mdi-web"></VIcon>
</template>
<VListItemTitle>
<span class="whitespace-break-spaces me-2">{{ subtitle?.title }}</span>
</VListItemTitle>
</VListItem>
<VListItem v-if="subtitle?.description">
<template #prepend>
<VIcon icon="mdi-text-box-outline"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-2 whitespace-break-spaces">{{ subtitle?.description }}</span>
</VListItemTitle>
</VListItem>
<VListItem v-if="subtitle?.language || subtitle?.uploader">
<template #prepend>
<VIcon icon="mdi-translate"></VIcon>
</template>
<VListItemTitle>
<span class="text-body-2">
{{ subtitle?.language || t('common.unknown') }}
<span v-if="subtitle?.uploader" class="text-medium-emphasis ms-2">{{ subtitle.uploader }}</span>
</span>
</VListItemTitle>
</VListItem>
<VListItem v-if="subtitle?.size">
<template #prepend>
<VIcon icon="mdi-database"></VIcon>
</template>
<VListItemTitle>
<VChip variant="tonal" label>
{{ formatFileSize(subtitle?.size || 0) }}
</VChip>
</VListItemTitle>
</VListItem>
</VList>
<VRow class="px-5">
<VCol cols="12">
<VCombobox
v-model="selectedDirectory"
:items="targetDirectories"
:label="t('dialog.addSubtitleDownload.saveDirectory')"
:placeholder="t('dialog.addSubtitleDownload.autoPlaceholder')"
variant="underlined"
density="comfortable"
prepend-inner-icon="mdi-folder"
/>
</VCol>
</VRow>
<VRow class="px-5 mt-2">
<VCol cols="12">
<VBtn
variant="text"
:prepend-icon="showAdvancedOptions ? 'mdi-chevron-up' : 'mdi-chevron-down'"
@click="showAdvancedOptions = !showAdvancedOptions"
>
{{
showAdvancedOptions
? t('dialog.addDownload.hideAdvancedOptions')
: t('dialog.addDownload.showAdvancedOptions')
}}
</VBtn>
</VCol>
</VRow>
<VRow v-show="showAdvancedOptions" class="px-5">
<VCol cols="12">
<VTextField
v-if="mediaSource === 'themoviedb'"
v-model="tmdbid"
:label="t('dialog.reorganize.tmdbId')"
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
:rules="[numberValidator]"
append-inner-icon="mdi-magnify"
:hint="t('dialog.reorganize.mediaIdHint')"
persistent-hint
prepend-inner-icon="mdi-identifier"
variant="underlined"
density="comfortable"
@click:append-inner="mediaSelectorDialog = true"
/>
<VTextField
v-else
v-model="doubanId"
:label="t('dialog.reorganize.doubanId')"
:placeholder="t('dialog.reorganize.mediaIdPlaceholder')"
:rules="[numberValidator]"
append-inner-icon="mdi-magnify"
:hint="t('dialog.reorganize.mediaIdHint')"
persistent-hint
prepend-inner-icon="mdi-identifier"
variant="underlined"
density="comfortable"
@click:append-inner="mediaSelectorDialog = true"
/>
</VCol>
</VRow>
</VCardText>
<VCardText class="text-center">
<VBtn variant="elevated" :disabled="loading" @click="addSubtitleDownload" :prepend-icon="icon" class="px-5">
{{ buttonText }}
</VBtn>
</VCardText>
</VCard>
<VDialog v-model="mediaSelectorDialog" width="40rem" scrollable max-height="85vh">
<MediaIdSelector
v-if="mediaSource === 'themoviedb'"
v-model="tmdbid"
@close="mediaSelectorDialog = false"
:type="mediaSource"
/>
<MediaIdSelector v-else v-model="doubanId" @close="mediaSelectorDialog = false" :type="mediaSource" />
</VDialog>
</VDialog>
</template>

View File

@@ -79,6 +79,7 @@ const SubscribeItems = ref<Subscribe[]>([])
const chooseSiteDialog = ref(false)
const selectedSites = ref<number[]>([])
const allSites = ref<Site[]>([])
const siteSearchType = ref<'torrent' | 'subtitle'>('torrent')
// 定义事件
const emit = defineEmits(['close', 'update:modelValue'])
@@ -247,7 +248,8 @@ async function queryAllSites() {
}
// 打开站点选择对话框
const openSiteDialog = () => {
const openSiteDialog = (type: 'torrent' | 'subtitle' = 'torrent') => {
siteSearchType.value = type
chooseSiteDialog.value = true
}
@@ -265,6 +267,10 @@ const matchedSubscribeItems = computed(() => {
function searchSites(sites: number[]) {
chooseSiteDialog.value = false
selectedSites.value = sites
if (siteSearchType.value === 'subtitle') {
searchSubtitle()
return
}
searchTorrent()
}
@@ -279,6 +285,7 @@ function searchTorrent() {
query: {
keyword: searchWord.value,
area: 'title',
result_type: 'torrent',
sites: selectedSites.value.join(','),
},
})
@@ -287,6 +294,23 @@ function searchTorrent() {
emit('close')
}
// 搜索字幕资源
function searchSubtitle() {
if (!searchWord.value) return
saveRecentSearches(searchWord.value)
router.push({
path: '/resource',
query: {
keyword: searchWord.value,
area: 'title',
result_type: 'subtitle',
sites: selectedSites.value.join(','),
},
})
dialog.value = false
emit('close')
}
// 跳转媒体搜索页面
function searchMedia(searchType: string) {
// 搜索类型 media/person
@@ -537,6 +561,33 @@ onMounted(() => {
{{ subscribe.type }}
</VListItemSubtitle>
</VListItem>
<VListItem density="comfortable" link @click="searchSubtitle" class="search-result-item mx-2 my-1">
<template #prepend>
<div class="result-icon-wrapper">
<VIcon icon="mdi-subtitles-outline" size="small" color="medium-emphasis" />
</div>
</template>
<VListItemTitle class="font-weight-medium text-body-2">{{
t('dialog.searchBar.searchSubtitlesInSites')
}}</VListItemTitle>
<VListItemSubtitle class="text-caption text-medium-emphasis">
{{ t('common.search') }} <span class="primary-text font-weight-medium">{{ searchWord }}</span>
{{ t('dialog.searchBar.relatedSubtitles') }}
</VListItemSubtitle>
<template #append>
<VBtn
v-if="hasManagePermission"
size="x-small"
variant="tonal"
color="primary"
rounded="pill"
@click.stop="openSiteDialog('subtitle')"
>
{{ t('dialog.searchBar.selectSites') }}
</VBtn>
</template>
</VListItem>
</template>
<!-- 匹配的菜单/功能 -->
@@ -622,7 +673,7 @@ onMounted(() => {
variant="tonal"
color="primary"
rounded="pill"
@click.stop="openSiteDialog"
@click.stop="openSiteDialog('torrent')"
>
{{ t('dialog.searchBar.selectSites') }}
</VBtn>