mirror of
https://github.com/jxxghp/MoviePilot-Frontend.git
synced 2026-06-03 06:41:09 +08:00
295 lines
8.9 KiB
Vue
295 lines
8.9 KiB
Vue
<script lang="ts" setup>
|
||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||
import { formatFileSize } from '@/@core/utils/formatters'
|
||
import api from '@/api'
|
||
import { FileItem, TransferQueue } from '@/api/types'
|
||
import { useDisplay } from 'vuetify'
|
||
import { useI18n } from 'vue-i18n'
|
||
import { useBackgroundOptimization } from '@/composables/useBackgroundOptimization'
|
||
|
||
// 多语言支持
|
||
const { t } = useI18n()
|
||
const { useProgressSSE } = useBackgroundOptimization()
|
||
|
||
// 显示器宽度
|
||
const display = useDisplay()
|
||
// 定义触发的自定义事件
|
||
const emit = defineEmits(['close'])
|
||
|
||
// 数据列表
|
||
const dataList = ref<TransferQueue[]>([])
|
||
|
||
// 整体进度相关
|
||
const overallProgress = ref({
|
||
enable: false,
|
||
value: 0,
|
||
text: t('dialog.transferQueue.processing'),
|
||
data: {
|
||
current: '',
|
||
finished: [] as string[],
|
||
},
|
||
})
|
||
|
||
// 当前文件进度相关
|
||
const currentFileProgress = ref({
|
||
enable: false,
|
||
value: 0,
|
||
})
|
||
|
||
// 数据可刷新标志
|
||
const refreshFlag = ref(false)
|
||
|
||
// 进度是否激活
|
||
const progressActive = ref(false)
|
||
|
||
// 活动标签
|
||
const activeTab = ref('')
|
||
|
||
// 状态标签
|
||
const stateDict: { [key: string]: string } = {
|
||
'waiting': t('dialog.transferQueue.waitingState'),
|
||
'running': t('dialog.transferQueue.runningState'),
|
||
'completed': t('dialog.transferQueue.finishedState'),
|
||
'failed': t('dialog.transferQueue.failedState'),
|
||
'cancelled': t('dialog.transferQueue.cancelledState'),
|
||
}
|
||
|
||
// 获取状态颜色
|
||
function getStateColor(state: string) {
|
||
if (state === 'waiting') return 'gray'
|
||
else if (state === 'running') return 'primary'
|
||
else if (state === 'completed') return 'success'
|
||
else return 'error'
|
||
}
|
||
|
||
// 从dataList中提取所有的媒体信息
|
||
const mediaList = computed(() => {
|
||
return dataList.value.map(item => item.media)
|
||
})
|
||
|
||
// 按media计算总数和完成数，返回 x/x
|
||
function getMediaCount(title_year: string) {
|
||
// 按title_year查询出所有media列表
|
||
const medias = dataList.value.filter(item => item.media.title_year === title_year)
|
||
// 计算media下任务的总数
|
||
const total = medias.reduce((acc, cur) => acc + cur.tasks.length, 0)
|
||
// 计算media下任务的完成数
|
||
const completed = medias.reduce((acc, cur) => acc + cur.tasks.filter(task => task.state === 'completed').length, 0)
|
||
return `${completed} / ${total}`
|
||
}
|
||
|
||
// 根据媒体信息获取对应的整理任务
|
||
const activeTasks = computed(() => {
|
||
return dataList.value.find(item => item.media.title_year === activeTab.value)?.tasks
|
||
})
|
||
|
||
// 调用API获取队列信息
|
||
async function get_transfer_queue() {
|
||
try {
|
||
dataList.value = await api.get('transfer/queue')
|
||
if (dataList.value.length > 0) {
|
||
if (!activeTab.value || activeTasks.value?.length == 0) activeTab.value = dataList.value[0].media.title_year || ''
|
||
}
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
|
||
// 移除队列任务
|
||
async function remove_queue_task(fileitem: FileItem) {
|
||
try {
|
||
await api.delete(`transfer/queue`, { data: fileitem })
|
||
get_transfer_queue()
|
||
} catch (error) {
|
||
console.error(error)
|
||
}
|
||
}
|
||
|
||
// 整体进度SSE消息处理函数
|
||
function handleOverallProgressMessage(event: MessageEvent) {
|
||
try {
|
||
const progress = JSON.parse(event.data)
|
||
if (progress) {
|
||
overallProgress.value = {
|
||
enable: progress.enable || false,
|
||
value: progress.value || 0,
|
||
text: progress.text || t('dialog.transferQueue.processing'),
|
||
data: {
|
||
current: progress.data?.current || '',
|
||
finished: progress.data?.finished || [],
|
||
},
|
||
}
|
||
|
||
// 如果进度完成或禁用，刷新队列数据
|
||
if (!progress.enable || progress.value >= 100) {
|
||
if (refreshFlag.value) {
|
||
refreshFlag.value = false
|
||
get_transfer_queue()
|
||
}
|
||
} else {
|
||
refreshFlag.value = true
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('解析整体进度消息失败:', error)
|
||
}
|
||
}
|
||
|
||
// 当前文件进度SSE消息处理函数
|
||
function handleCurrentFileProgressMessage(event: MessageEvent) {
|
||
try {
|
||
const progress = JSON.parse(event.data)
|
||
if (progress) {
|
||
currentFileProgress.value = {
|
||
enable: progress.enable || false,
|
||
value: progress.value || 0,
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('解析当前文件进度消息失败:', error)
|
||
}
|
||
}
|
||
|
||
// 使用优化的进度SSE连接 - 整体进度
|
||
const overallProgressSSE = useProgressSSE(
|
||
`${import.meta.env.VITE_API_BASE_URL}system/progress/filetransfer`,
|
||
handleOverallProgressMessage,
|
||
'transfer-queue-overall-progress',
|
||
progressActive,
|
||
)
|
||
|
||
// 当前文件进度SSE连接
|
||
let currentFileProgressSSE: any = null
|
||
|
||
// 启动当前文件进度监听
|
||
function startCurrentFileProgress(filePath: string) {
|
||
if (currentFileProgressSSE) {
|
||
currentFileProgressSSE.stop()
|
||
}
|
||
|
||
if (filePath) {
|
||
const encodedPath = encodeURIComponent(filePath)
|
||
currentFileProgressSSE = useProgressSSE(
|
||
`${import.meta.env.VITE_API_BASE_URL}system/progress/${encodedPath}`,
|
||
handleCurrentFileProgressMessage,
|
||
'transfer-queue-current-file-progress',
|
||
progressActive,
|
||
)
|
||
currentFileProgressSSE.start()
|
||
}
|
||
}
|
||
|
||
// 停止当前文件进度监听
|
||
function stopCurrentFileProgress() {
|
||
if (currentFileProgressSSE) {
|
||
currentFileProgressSSE.stop()
|
||
currentFileProgressSSE = null
|
||
}
|
||
}
|
||
|
||
// 监听当前文件变化，自动切换进度监听
|
||
watch(
|
||
() => overallProgress.value.data.current,
|
||
newCurrentFile => {
|
||
if (newCurrentFile) {
|
||
startCurrentFileProgress(newCurrentFile)
|
||
} else {
|
||
stopCurrentFileProgress()
|
||
currentFileProgress.value = { enable: false, value: 0 }
|
||
}
|
||
},
|
||
)
|
||
|
||
// 使用SSE监听加载进度
|
||
function startLoadingProgress() {
|
||
overallProgress.value.text = t('dialog.transferQueue.processing')
|
||
progressActive.value = true
|
||
overallProgressSSE.start()
|
||
}
|
||
|
||
// 停止监听加载进度
|
||
function stopLoadingProgress() {
|
||
progressActive.value = false
|
||
overallProgressSSE.stop()
|
||
stopCurrentFileProgress()
|
||
}
|
||
|
||
onMounted(() => {
|
||
get_transfer_queue()
|
||
startLoadingProgress()
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
stopLoadingProgress()
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<VDialog scrollable max-width="60rem" :fullscreen="!display.mdAndUp.value">
|
||
<VCard class="mx-auto" width="100%">
|
||
<VCardItem>
|
||
<VCardTitle>{{ t('dialog.transferQueue.title') }}</VCardTitle>
|
||
</VCardItem>
|
||
<VDialogCloseBtn @click="emit('close')" />
|
||
|
||
<!-- 整体进度显示 -->
|
||
<VProgressLinear v-if="dataList.length > 0" :value="overallProgress.value" color="primary" :height="2" />
|
||
<VDivider v-else />
|
||
<div v-if="overallProgress.enable && overallProgress.value > 0" class="pt-2 text-center">
|
||
<div class="text-sm font-medium">（{{ overallProgress.value.toFixed(1) }}%）{{ overallProgress.text }}</div>
|
||
</div>
|
||
|
||
<VCardText v-if="dataList.length === 0" class="text-center">
|
||
{{ t('dialog.transferQueue.noTasks') }}
|
||
</VCardText>
|
||
|
||
<VCardText v-if="dataList.length > 0">
|
||
<VTabs v-model="activeTab" show-arrows class="v-tabs-pill" stacked>
|
||
<VTab
|
||
v-for="media in mediaList"
|
||
:value="media.title_year"
|
||
selected-class="v-slide-group-item--active v-tab--selected"
|
||
>
|
||
<div class="font-bold text-lg">{{ media.title }}</div>
|
||
<div>({{ getMediaCount(media.title_year || '') }})</div>
|
||
</VTab>
|
||
</VTabs>
|
||
<VWindow v-model="activeTab" class="mt-5 disable-tab-transition" :touch="false">
|
||
<VWindowItem v-for="media in mediaList" :value="media.title_year">
|
||
<VList>
|
||
<VListItem v-for="task in activeTasks" :key="task.fileitem.path">
|
||
<VListItemTitle>{{ task.fileitem.name }}</VListItemTitle>
|
||
<VListItemSubtitle class="py-1">
|
||
{{ t('dialog.transferQueue.sizeTitle') }}：{{ formatFileSize(task.fileitem.size || 0) }}
|
||
<VChip size="small" :color="getStateColor(task.state)" class="mx-2">
|
||
{{ stateDict[task.state] }}
|
||
</VChip>
|
||
</VListItemSubtitle>
|
||
|
||
<!-- 当前文件进度显示 -->
|
||
<div
|
||
v-if="overallProgress.data.current === task.fileitem.path && currentFileProgress.enable"
|
||
class="mt-2"
|
||
>
|
||
<VProgressLinear :value="currentFileProgress.value" color="success" :height="1" class="mb-1" />
|
||
<div class="text-xs text-medium-emphasis text-center">
|
||
{{ currentFileProgress.value.toFixed(1) }}%
|
||
</div>
|
||
</div>
|
||
<template #append>
|
||
<IconBtn
|
||
size="small"
|
||
icon="mdi-cancel"
|
||
@click="remove_queue_task(task.fileitem)"
|
||
:disabled="overallProgress.data.current === task.fileitem.path"
|
||
/>
|
||
</template>
|
||
</VListItem>
|
||
</VList>
|
||
</VWindowItem>
|
||
</VWindow>
|
||
</VCardText>
|
||
</VCard>
|
||
</VDialog>
|
||
</template>
|