整合下载逻辑,修复下载历史记录和显示问题

This commit is contained in:
2025-09-29 12:15:02 +08:00
parent 9f25573bf8
commit 423d35d42d
10 changed files with 299 additions and 492 deletions
@@ -9,7 +9,7 @@
</div>
</div>
</div>
<!-- 按钮操作区域 - 单独的第二行 -->
<div class="artwork-actions">
<!-- 下载按钮 -->
@@ -267,7 +267,7 @@ const handleCaptionToggleChange = (event: Event) => {
font-weight: 600;
color: var(--color-text-primary);
line-height: 1.3;
max-width: 420px;
max-width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -123,11 +123,21 @@ const indicatorClass = computed(() => {
// 获取任务标题
const getTaskTitle = (task: DownloadTask) => {
// 优先使用后端生成的任务标题
if (task.task_title) {
return task.task_title;
}
// 兼容旧版本的任务标题生成逻辑
if (task.type === 'artwork') {
return task.artwork_title || `作品 ${task.artwork_id}`;
} else if (task.type === 'artist') {
return `作者作品 - ${task.artist_name || '未知作者'}`;
} else if (task.type === 'batch') {
// 如果有任务描述,使用任务描述
if (task.task_description) {
return `${task.task_description} (${task.total_files} 个作品)`;
}
return `批量下载 (${task.total_files} 个作品)`;
}
return '未知任务';
+29 -25
View File
@@ -1,29 +1,16 @@
<template>
<div class="download-progress" v-if="task">
<div class="progress-header">
<h4 class="progress-title">{{ task.artwork_title || '下载中...' }}</h4>
<h4 class="progress-title">{{ getTaskTitle(task) }}</h4>
<div class="progress-actions">
<button
v-if="task.status === 'downloading'"
@click="pauseTask"
class="btn btn-sm btn-secondary"
:disabled="loading"
>
<button v-if="task.status === 'downloading'" @click="pauseTask" class="btn btn-sm btn-secondary"
:disabled="loading">
暂停
</button>
<button
v-if="task.status === 'paused'"
@click="resumeTask"
class="btn btn-sm btn-primary"
:disabled="loading"
>
<button v-if="task.status === 'paused'" @click="resumeTask" class="btn btn-sm btn-primary" :disabled="loading">
恢复
</button>
<button
@click="cancelTask"
class="btn btn-sm btn-danger"
:disabled="loading"
>
<button @click="cancelTask" class="btn btn-sm btn-danger" :disabled="loading">
取消
</button>
</div>
@@ -31,11 +18,7 @@
<div class="progress-overview">
<div class="progress-bar">
<div
class="progress-fill"
:style="{ width: `${task.progress}%` }"
:class="progressClass"
></div>
<div class="progress-fill" :style="{ width: `${task.progress}%` }" :class="progressClass"></div>
</div>
<div class="progress-text">
{{ task.progress }}% ({{ task.completed_files }}/{{ task.total_files }})
@@ -58,7 +41,7 @@
<span class="stat-value">{{ task.total_files - task.completed_files - task.failed_files }}</span>
</div>
</div>
<!-- 最近完成的作品列表 -->
<div v-if="task.recent_completed && task.recent_completed.length > 0" class="recent-completed">
<h4>最近完成:</h4>
@@ -119,6 +102,27 @@ const statusClass = computed(() => {
});
// 方法
const getTaskTitle = (task: DownloadTask) => {
// 优先使用后端生成的任务标题
if (task.task_title) {
return task.task_title;
}
// 兼容旧版本的任务标题生成逻辑
if (task.type === 'artwork') {
return task.artwork_title || `作品 ${task.artwork_id}`;
} else if (task.type === 'artist') {
return `作者作品 - ${task.artist_name || '未知作者'}`;
} else if (task.type === 'batch') {
// 如果有任务描述,使用任务描述
if (task.task_description) {
return `${task.task_description} (${task.total_files} 个作品)`;
}
return `批量下载 (${task.total_files} 个作品)`;
}
return '下载中...';
};
const getStatusText = (status: string) => {
const statusMap: Record<string, string> = {
downloading: '下载中',
@@ -525,4 +529,4 @@ const cancelTask = async () => {
gap: 0.5rem;
}
}
</style>
</style>
+4 -1
View File
@@ -107,6 +107,9 @@ export interface DownloadTask {
artwork_id?: number;
artist_name?: string;
artwork_title?: string;
task_description?: string;
task_title?: string;
mode?: string;
start_time: string;
end_time?: string;
error?: string;
@@ -135,4 +138,4 @@ export interface DownloadParams {
quality?: 'high' | 'medium' | 'low';
format?: 'auto' | 'jpg' | 'png';
concurrent?: number;
}
}
+37 -6
View File
@@ -211,11 +211,21 @@ const activeTasks = computed(() => {
// 获取任务标题
const getTaskTitle = (task: DownloadTask) => {
// 优先使用后端生成的任务标题
if (task.task_title) {
return task.task_title;
}
// 兼容旧版本的任务标题生成逻辑
if (task.type === 'artwork') {
return task.artwork_title || `作品 ${task.artwork_id}`;
} else if (task.type === 'artist') {
return `作者作品 - ${task.artist_name || '未知作者'}`;
} else if (task.type === 'batch') {
// 如果有任务描述,使用任务描述
if (task.task_description) {
return `${task.task_description} (${task.total_files} 个作品)`;
}
return `批量下载 (${task.total_files} 个作品)`;
}
return '未知任务';
@@ -239,6 +249,7 @@ const getTypeText = (type: string) => {
const typeMap: Record<string, string> = {
'artwork': '单个作品',
'artist': '作者作品',
'art': '作者作品',
'batch': '批量下载',
'ranking': '排行榜下载'
};
@@ -251,13 +262,33 @@ const getHistoryTitle = (item: any) => {
const title = item.artwork_title || '未知作品';
const artist = item.artist_name || '未知作者';
return `${title} (${artist})`;
} else if (item.type === 'artist') {
} else if (item.type === 'artist' || item.type === 'art') {
const artist = item.artist_name || '未知作者';
return `作者作品 (${artist})`;
const count = item.total_files || 0;
// 如果有任务描述,优先使用任务描述
if (item.task_description) {
return `${item.task_description} - ${count} 个作品`;
}
return `作者作品 (${artist}) - ${count} 个作品`;
} else if (item.type === 'batch') {
return `批量下载 (${item.total_files || 0} 个作品)`;
const count = item.total_files || 0;
// 如果有任务描述,使用任务描述
if (item.task_description) {
return `${item.task_description} - ${count} 个作品`;
}
return `批量下载 - ${count} 个作品`;
} else if (item.type === 'ranking') {
return `排行榜下载 (${item.total_files || 0} 个作品)`;
const count = item.total_files || 0;
let title = '排行榜下载';
if (item.mode && item.ranking_type) {
const modeText = item.mode === 'daily' ? '日榜' :
item.mode === 'weekly' ? '周榜' :
item.mode === 'monthly' ? '月榜' : item.mode;
const typeText = item.ranking_type === 'illust' ? '插画' :
item.ranking_type === 'manga' ? '漫画' : item.ranking_type;
title = `${modeText}${typeText}`;
}
return `${title} - ${count} 个作品`;
}
return '未知下载任务';
};
@@ -307,10 +338,10 @@ const fetchHistory = async () => {
// 监听任务完成,刷新历史记录
watch(tasks, (newTasks, oldTasks) => {
// 检查是否有任务完成
const completedTasks = newTasks.filter(task =>
const completedTasks = newTasks.filter(task =>
['completed', 'failed', 'cancelled', 'partial'].includes(task.status)
);
if (completedTasks.length > 0) {
// 延迟刷新历史记录
setTimeout(() => {