feat: add task cancellation support

- Add CancelTask function to cancel running/waiting tasks
- Add /api/cancelTask endpoint
- Add cancel button in task list for running/waiting tasks
- Check cancellation status during download and merge operations

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

web/src/task/data.ts

@@ -71,4 +71,9 @@ type ActiveTask = {
 export const deleteTask = async (id: number) => {
     const res = await fetch(`/api/deleteTask?id=${id}`).then(res => res.json()) as ResJSON
     if (!res.success) throw new Error(res.message)
+}
+
+export const cancelTask = async (id: number) => {
+    const res = await fetch(`/api/cancelTask?id=${id}`).then(res => res.json()) as ResJSON
+    if (!res.success) throw new Error(res.message)
 }

web/src/task/index.ts

@@ -1,7 +1,7 @@
 import van, { State } from 'vanjs-core'
 import { Route, goto, now } from 'vanjs-router'
 import { checkLogin, GLOBAL_HAS_LOGIN, GLOBAL_HIDE_PAGE, ResJSON, VanComponent } from '../mixin'
-import { deleteTask, getActiveTask, getTaskList, showFile } from './data'
+import { deleteTask, getActiveTask, getTaskList, showFile, cancelTask } from './data'
 import { TaskInDB, TaskStatus } from '../work/type'
 import { LoadingBox } from '../view'
 import { PlayerModalComp } from './playerModal'
@@ -156,6 +156,24 @@ export class TaskRoute implements VanComponent {
                                         _that.DeleteSVG()
                                     )
                                 ),
+                                div({
+                                    class: 'me-4',
+                                    hidden: task.statusState.val != 'waiting' && task.statusState.val != 'running'
+                                },
+                                    div({
+                                        class: 'hover-btn text-danger', title: '取消任务',
+                                        onclick() {
+                                            if (!confirm('确定要取消该任务吗？')) return
+                                            cancelTask(task.id).then(() => {
+                                                task.statusState.val = 'error'
+                                            }).catch(error => {
+                                                alert(error.message)
+                                            })
+                                        }
+                                    },
+                                        _that.CancelSVG()
+                                    )
+                                ),
                             )
                         })
                     )
@@ -226,6 +244,13 @@ export class TaskRoute implements VanComponent {
         )
     }
 
+    CancelSVG() {
+        return svg({ style: `width: 1em; height: 1em`, fill: "currentColor", class: "bi bi-x-circle", viewBox: "0 0 16 16" },
+            path({ "d": "M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" }),
+            path({ "d": "M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" }),
+        )
+    }
+
     FolderSVG() {
         return svg({ style: `width: 1em; height: 1em`, fill: "currentColor", class: "bi bi-folder2", viewBox: "0 0 16 16" },
             path({ "d": "M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v7a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 12.5zM2.5 3a.5.5 0 0 0-.5.5V6h12v-.5a.5.5 0 0 0-.5-.5H9c-.964 0-1.71-.629-2.174-1.154C6.374 3.334 5.82 3 5.264 3zM14 7H2v5.5a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5z" }),