Add button to clear pending tasks

Author: huchenlei

src/components/sidebar/tabs/QueueSidebarTab.vue

@@ -31,6 +31,15 @@
           class="toggle-expanded-button"
           v-tooltip="$t('sideToolbar.queueTab.showFlatList')"
         />
+        <Button
+          v-if="queueStore.hasPendingTasks"
+          icon="pi pi-stop"
+          text
+          severity="danger"
+          @click="clearPendingTasks"
+          class="clear-pending-button"
+          v-tooltip="$t('sideToolbar.queueTab.clearPendingTasks')"
+        />
         <Button
           icon="pi pi-trash"
           text
@@ -221,6 +230,16 @@ const confirmRemoveAll = (event: Event) => {
   })
 }
 
+const clearPendingTasks = async () => {
+  await queueStore.clear(['queue'])
+  toast.add({
+    severity: 'info',
+    summary: 'Confirmed',
+    detail: 'Pending tasks deleted',
+    life: 3000
+  })
+}
+
 const onStatus = async () => {
   await queueStore.update()
   updateVisibleTasks()

src/i18n.ts

@@ -54,7 +54,8 @@ const messages = {
         showFlatList: 'Show Flat List',
         backToAllTasks: 'Back to All Tasks',
         containImagePreview: 'Fill Image Preview',
-        coverImagePreview: 'Fit Image Preview'
+        coverImagePreview: 'Fit Image Preview',
+        clearPendingTasks: 'Clear Pending Tasks'
       }
     }
   },
@@ -97,7 +98,8 @@ const messages = {
       },
       queueTab: {
         showFlatList: '平铺结果',
-        backToAllTasks: '返回'
+        backToAllTasks: '返回',
+        clearPendingTasks: '清除待处理任务'
       }
     }
   }

src/stores/queueStore.ts

@@ -277,6 +277,9 @@ export const useQueueStore = defineStore('queue', {
     },
     lastHistoryQueueIndex(state) {
       return state.historyTasks.length ? state.historyTasks[0].queueIndex : -1
+    },
+    hasPendingTasks(state) {
+      return state.pendingTasks.length > 0
     }
   },
   actions: {
@@ -325,10 +328,11 @@ export const useQueueStore = defineStore('queue', {
         this.isLoading = false
       }
     },
-    async clear() {
-      await Promise.all(
-        ['queue', 'history'].map((type) => api.clearItems(type))
-      )
+    async clear(targets: ('queue' | 'history')[] = ['queue', 'history']) {
+      if (targets.length === 0) {
+        return
+      }
+      await Promise.all(targets.map((type) => api.clearItems(type)))
       await this.update()
     },
     async delete(task: TaskItemImpl) {