kjqwdw/pixiv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复取消下载响应慢的问题

Browse Source
This commit is contained in:
kjqwer
2025-10-06 07:49:19 +08:00
parent 9a4cd48c3b
commit d915be42dd
5 changed files with 170 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ui/src/components/common/DownloadProgressWidget.vue
+4 -1
View File
@@ -151,7 +151,10 @@ const getStatusText = (status: string) => {
'failed': '失败',
'cancelled': '已取消',
'partial': '部分完成',
'paused': '已暂停'
'paused': '已暂停',
'pausing': '暂停中',
'resuming': '恢复中',
'cancelling': '取消中'
};
return statusMap[status] || status;
};
ui/src/components/download/DownloadProgress.vue
+30 -21
View File
@@ -3,15 +3,17 @@
<div class="progress-header">
<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' || task.status === 'pausing'" @click="pauseTask" class="btn btn-sm btn-secondary"
:disabled="loading || task.status === 'pausing'">
{{ task.status === 'pausing' ? '暂停中...' : '暂停' }}
</button>
<button v-if="task.status === 'paused'" @click="resumeTask" class="btn btn-sm btn-primary" :disabled="loading">
恢复
<button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask" class="btn btn-sm btn-primary"
:disabled="loading || task.status === 'resuming'">
{{ task.status === 'resuming' ? '恢复中...' : '恢复' }}
</button>
<button @click="cancelTask" class="btn btn-sm btn-danger" :disabled="loading">
取消
<button @click="cancelTask" class="btn btn-sm btn-danger"
:disabled="loading || task.status === 'cancelling'">
{{ task.status === 'cancelling' ? '取消中...' : '取消' }}
</button>
</div>
</div>
@@ -74,7 +76,7 @@
<script setup lang="ts">
import { computed } from 'vue';
import downloadService from '@/services/download';
import { useDownloadStore } from '@/stores/download';
import type { DownloadTask } from '@/types';
interface Props {
@@ -83,6 +85,7 @@ interface Props {
}
const props = defineProps<Props>();
const downloadStore = useDownloadStore();
const emit = defineEmits<{
update: [task: DownloadTask];
@@ -130,7 +133,10 @@ const getStatusText = (status: string) => {
failed: '失败',
partial: '部分完成',
cancelled: '已取消',
paused: '已暂停'
paused: '已暂停',
pausing: '暂停中',
resuming: '恢复中',
cancelling: '取消中'
};
return statusMap[status] || status;
};
@@ -144,34 +150,37 @@ const formatTime = (timeString: string) => {
const pauseTask = async () => {
try {
const response = await downloadService.pauseTask(props.task.id);
if (response.success) {
emit('update', { ...props.task, status: 'paused' });
}
await downloadStore.pauseTask(props.task.id);
} catch (error) {
console.error('暂停任务失败:', error);
// 显示用户友好的错误提示
if (error instanceof Error) {
alert(`暂停失败: ${error.message}`);
}
}
};
const resumeTask = async () => {
try {
const response = await downloadService.resumeTask(props.task.id);
if (response.success) {
emit('update', { ...props.task, status: 'downloading' });
}
await downloadStore.resumeTask(props.task.id);
} catch (error) {
console.error('恢复任务失败:', error);
// 显示用户友好的错误提示
if (error instanceof Error) {
alert(`恢复失败: ${error.message}`);
}
}
};
const cancelTask = async () => {
try {
const response = await downloadService.cancelTask(props.task.id);
if (response.success) {
emit('remove', props.task.id);
}
await downloadStore.cancelTask(props.task.id);
} catch (error) {
console.error('取消任务失败:', error);
// 显示用户友好的错误提示
if (error instanceof Error) {
alert(`取消失败: ${error.message}`);
}
}
};
</script>
ui/src/stores/download.ts
+107 -14
View File
@@ -156,7 +156,22 @@ export const useDownloadStore = defineStore('download', () => {
// 更新任务状态
const index = tasks.value.findIndex(t => t.id === taskId);
if (index !== -1) {
tasks.value[index] = task;
// 保留临时状态（如pausing, resuming, cancelling）
const currentTask = tasks.value[index];
const isTemporaryStatus = ['pausing', 'resuming', 'cancelling'].includes(currentTask.status);
if (!isTemporaryStatus) {
tasks.value[index] = task;
} else {
// 只更新进度相关字段，保留临时状态
tasks.value[index] = {
...currentTask,
progress: task.progress,
completed_files: task.completed_files,
failed_files: task.failed_files,
recent_completed: task.recent_completed
};
}
} else {
// 如果是新任务，添加到列表
tasks.value.push(task);
@@ -285,18 +300,42 @@ export const useDownloadStore = defineStore('download', () => {
// 取消任务
const cancelTask = async (taskId: string) => {
try {
// 立即停止SSE连接
stopTaskStreaming(taskId);
// 立即更新本地状态为取消中
updateTask(taskId, { status: 'cancelling' as any });
const response = await downloadService.cancelTask(taskId);
if (response.success) {
// 立即停止SSE连接
stopTaskStreaming(taskId);
await fetchTasks();
// 立即从任务列表中移除
removeTask(taskId);
// 异步刷新任务列表以确保同步
setTimeout(() => fetchTasks(), 500);
} else {
// 如果取消失败，恢复原状态
await fetchTasks();
throw new Error(response.error || '取消任务失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '取消任务失败';
// 如果是网络错误或超时，提供更友好的错误信息
let errorMessage = '取消任务失败';
if (err instanceof Error) {
if (err.message.includes('timeout') || err.message.includes('network')) {
errorMessage = '网络连接超时，请检查网络连接后重试';
} else if (err.message.includes('404')) {
errorMessage = '任务不存在或已被删除';
} else {
errorMessage = err.message;
}
}
error.value = errorMessage;
console.error('取消任务失败:', err);
throw err;
// 恢复任务状态
await fetchTasks();
throw new Error(errorMessage);
}
};
@@ -305,6 +344,10 @@ export const useDownloadStore = defineStore('download', () => {
try {
// 获取任务信息以确定类型
const task = getTask(taskId);
// 立即更新本地状态为恢复中
updateTask(taskId, { status: 'resuming' as any });
let response;
// 判断是否为批量下载任务（batch、artist、art类型都是批量下载）
@@ -317,16 +360,38 @@ export const useDownloadStore = defineStore('download', () => {
}
if (response.success) {
await fetchTasks();
// 重新管理SSE连接
manageSSEConnections();
// 立即更新状态为下载中
updateTask(taskId, { status: 'downloading' });
// 立即建立SSE连接
startTaskStreaming(taskId);
// 异步刷新任务列表以确保同步
setTimeout(() => fetchTasks(), 500);
} else {
// 如果恢复失败，恢复原状态
await fetchTasks();
throw new Error(response.error || '恢复任务失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '恢复任务失败';
// 提供更友好的错误信息
let errorMessage = '恢复任务失败';
if (err instanceof Error) {
if (err.message.includes('timeout') || err.message.includes('network')) {
errorMessage = '网络连接超时，请检查网络连接后重试';
} else if (err.message.includes('404')) {
errorMessage = '任务不存在或已被删除';
} else if (err.message.includes('already running')) {
errorMessage = '任务已在运行中';
} else {
errorMessage = err.message;
}
}
error.value = errorMessage;
console.error('恢复任务失败:', err);
throw err;
// 恢复任务状态
await fetchTasks();
throw new Error(errorMessage);
}
};
@@ -335,6 +400,10 @@ export const useDownloadStore = defineStore('download', () => {
try {
// 获取任务信息以确定类型
const task = getTask(taskId);
// 立即更新本地状态为暂停中
updateTask(taskId, { status: 'pausing' as any });
let response;
// 判断是否为批量下载任务（batch、artist、art类型都是批量下载）
@@ -347,14 +416,38 @@ export const useDownloadStore = defineStore('download', () => {
}
if (response.success) {
await fetchTasks();
// 立即更新状态为已暂停
updateTask(taskId, { status: 'paused' });
// 停止SSE连接
stopTaskStreaming(taskId);
// 异步刷新任务列表以确保同步
setTimeout(() => fetchTasks(), 500);
} else {
// 如果暂停失败，恢复原状态
await fetchTasks();
throw new Error(response.error || '暂停任务失败');
}
} catch (err) {
error.value = err instanceof Error ? err.message : '暂停任务失败';
// 提供更友好的错误信息
let errorMessage = '暂停任务失败';
if (err instanceof Error) {
if (err.message.includes('timeout') || err.message.includes('network')) {
errorMessage = '网络连接超时，请检查网络连接后重试';
} else if (err.message.includes('404')) {
errorMessage = '任务不存在或已被删除';
} else if (err.message.includes('already paused')) {
errorMessage = '任务已暂停';
} else {
errorMessage = err.message;
}
}
error.value = errorMessage;
console.error('暂停任务失败:', err);
throw err;
// 恢复任务状态
await fetchTasks();
throw new Error(errorMessage);
}
};
ui/src/types/index.ts
+1 -1
View File
@@ -99,7 +99,7 @@ export interface LoginStatus {
export interface DownloadTask {
id: string;
type: 'artwork' | 'batch' | 'artist' | 'art';
status: 'downloading' | 'completed' | 'failed' | 'partial' | 'cancelled' | 'paused';
status: 'downloading' | 'completed' | 'failed' | 'partial' | 'cancelled' | 'paused' | 'pausing' | 'resuming' | 'cancelling';
progress: number;
total_files: number;
completed_files: number;
ui/src/views/DownloadsView.vue
+28 -9
View File
@@ -62,17 +62,21 @@
</span>
</div>
<div class="task-actions">
<button v-if="task.status === 'downloading'" @click="pauseTask(task.id)" class="btn btn-warning btn-sm">
暂停
<button v-if="task.status === 'downloading' || task.status === 'pausing'" @click="pauseTask(task.id)"
class="btn btn-warning btn-sm" :disabled="task.status === 'pausing'">
{{ task.status === 'pausing' ? '暂停中...' : '暂停' }}
</button>
<button v-if="task.status === 'downloading'" @click="cancelTask(task.id)" class="btn btn-danger btn-sm">
取消
<button v-if="task.status === 'downloading' || task.status === 'cancelling'" @click="cancelTask(task.id)"
class="btn btn-danger btn-sm" :disabled="task.status === 'cancelling'">
{{ task.status === 'cancelling' ? '取消中...' : '取消' }}
</button>
<button v-if="task.status === 'paused'" @click="resumeTask(task.id)" class="btn btn-primary btn-sm">
恢复
<button v-if="task.status === 'paused' || task.status === 'resuming'" @click="resumeTask(task.id)"
class="btn btn-primary btn-sm" :disabled="task.status === 'resuming'">
{{ task.status === 'resuming' ? '恢复中...' : '恢复' }}
</button>
<button v-if="task.status === 'paused'" @click="cancelTask(task.id)" class="btn btn-danger btn-sm">
删除
<button v-if="task.status === 'paused' || task.status === 'cancelling'" @click="cancelTask(task.id)"
class="btn btn-danger btn-sm" :disabled="task.status === 'cancelling'">
{{ task.status === 'cancelling' ? '删除中...' : '删除' }}
</button>
</div>
</div>
@@ -242,7 +246,10 @@ const getStatusText = (status: string) => {
'failed': '失败',
'cancelled': '已取消',
'partial': '部分完成',
'paused': '已暂停'
'paused': '已暂停',
'pausing': '暂停中',
'resuming': '恢复中',
'cancelling': '取消中'
};
return statusMap[status] || status;
};
@@ -360,6 +367,10 @@ const cancelTask = async (taskId: string) => {
} catch (err) {
error.value = err instanceof Error ? err.message : '取消任务失败';
console.error('取消任务失败:', err);
// 显示用户友好的错误提示
if (err instanceof Error) {
alert(`取消失败: ${err.message}`);
}
}
};
@@ -370,6 +381,10 @@ const resumeTask = async (taskId: string) => {
} catch (err) {
error.value = err instanceof Error ? err.message : '恢复任务失败';
console.error('恢复任务失败:', err);
// 显示用户友好的错误提示
if (err instanceof Error) {
alert(`恢复失败: ${err.message}`);
}
}
};
@@ -380,6 +395,10 @@ const pauseTask = async (taskId: string) => {
} catch (err) {
error.value = err instanceof Error ? err.message : '暂停任务失败';
console.error('暂停任务失败:', err);
// 显示用户友好的错误提示
if (err instanceof Error) {
alert(`暂停失败: ${err.message}`);
}
}
};