nicoeri/filebrowser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fetch): enhance download task management with status and error tracking

Browse Source
This commit is contained in:
banbxio 2025-04-02 01:57:47 +08:00
parent 75caff5f5f
commit fdbce4abec
2 changed files with 34 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/api/fetch.tsx
View File

@ -20,7 +20,7 @@ export async function fetchUrlFile(
return taskID; return taskID;
} }
type DownloadTask = { export type DownloadTask = {
filename: string; filename: string;
pathname: string; pathname: string;
progress: number; progress: number;
@ -28,6 +28,8 @@ type DownloadTask = {
taskID: string; taskID: string;
totalSize: number; totalSize: number;
url: string; url: string;
status: string;
error: string;
}; };
export async function queryDownloadTask(taskID: string): Promise<DownloadTask> { export async function queryDownloadTask(taskID: string): Promise<DownloadTask> {

40
frontend/src/components/prompts/Fetch.vue
View File

@ -50,14 +50,17 @@
{{ t("buttons.create") }} {{ t("buttons.create") }}
</button> </button>
</div> </div>
<div v-if="progress > 0" class="material-progress-container"> <div v-if="isDownloading || isFailed" class="material-progress-container">
<div <div
class="material-progress-bar" class="material-progress-bar"
id="downloadProgress" id="downloadProgress"
:style="{ width: Math.floor(progress * 100) + '%' }" :style="{ width: Math.floor(currentTask.progress * 100) + '%' }"
></div> ></div>
<div class="material-progress-label"> <div
{{ Math.floor((progress * 100)) + "%" }} class="material-progress-label"
:style="{ color: isFailed ? '#ff4757' : '' }"
>
{{ Math.floor(currentTask.progress * 100) + "%" }}
</div> </div>
</div> </div>
</div> </div>
@ -67,10 +70,11 @@
import { useLayoutStore } from "@/stores/layout.ts"; import { useLayoutStore } from "@/stores/layout.ts";
import { useFileStore } from "@/stores/file.ts"; import { useFileStore } from "@/stores/file.ts";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import { computed, inject, onMounted, ref, watch } from "vue"; import { computed, inject, onMounted, reactive, ref, watch } from "vue";
import url from "@/utils/url.ts"; import url from "@/utils/url.ts";
import { fetcher as api } from "@/api"; import { fetcher as api } from "@/api";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import type { DownloadTask } from "@/api/fetch.tsx";
const $showError = inject<IToastError>("$showError")!; const $showError = inject<IToastError>("$showError")!;
@ -83,10 +87,28 @@ const { t } = useI18n();
const fetchUrl = ref<string>(""); const fetchUrl = ref<string>("");
const saveName = ref<string>(""); const saveName = ref<string>("");
const taskID = ref<string>(""); const taskID = ref<string>("");
const progress = ref<number>(0); const currentTask = reactive<DownloadTask>({
error: "",
filename: "",
pathname: "",
progress: 0,
savedSize: 0,
status: "",
taskID: "",
totalSize: 0,
url: "",
});
const isDownloading = computed(() => { const isDownloading = computed(() => {
return taskID.value !== "" && progress.value < 1 && progress.value > 0; return (
taskID.value !== "" &&
taskID.value === currentTask.taskID &&
currentTask.status === "downloading"
);
});
const isFailed = computed(() => {
return currentTask.status === "error";
}); });
watch(fetchUrl, (value) => { watch(fetchUrl, (value) => {
@ -139,8 +161,8 @@ onMounted(() => {
const task = await api.queryDownloadTask(taskID.value); const task = await api.queryDownloadTask(taskID.value);
if (!task) return; if (!task) return;
console.log("fetch task info", task); console.log("fetch task info", task);
progress.value = task.progress; Object.assign(currentTask, task);
if (task.progress >= 1) { if (currentTask.status === "completed") {
taskID.value = ""; taskID.value = "";
} }
}, 1000); }, 1000);