feat: add remove action to remove task and images for MJ and SD task list page

web/src/assets/css/image-mj.css

@@ -299,6 +299,7 @@
   overflow: hidden;
   border-radius: 6px;
   transition: all 0.3s ease; /* 添加过渡效果 */
+  position: relative;
 }
 .page-mj .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
   margin: 6px 0;
@@ -327,6 +328,15 @@
   font-size: 20px;
   cursor: pointer;
 }
+.page-mj .inner .task-list-box .finish-job-list .job-item .remove {
+  display: none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.page-mj .inner .task-list-box .finish-job-list .job-item:hover .remove {
+  display: block;
+}
 .page-mj .inner .task-list-box .finish-job-list .animate:hover {
   box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */

web/src/assets/css/image-sd.css

@@ -184,6 +184,7 @@
   overflow: hidden;
   border-radius: 6px;
   transition: all 0.3s ease; /* 添加过渡效果 */
+  position: relative;
 }
 .page-sd .inner .task-list-box .finish-job-list .job-item .opt .opt-line {
   margin: 6px 0;
@@ -212,6 +213,15 @@
   font-size: 20px;
   cursor: pointer;
 }
+.page-sd .inner .task-list-box .finish-job-list .job-item .remove {
+  display: none;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+}
+.page-sd .inner .task-list-box .finish-job-list .job-item:hover .remove {
+  display: block;
+}
 .page-sd .inner .task-list-box .finish-job-list .animate:hover {
   box-shadow: 0 0 10px rgba(71,255,241,0.6); /* 添加阴影效果 */
   transform: translateY(-10px); /* 向上移动10像素 */

web/src/assets/css/task-list.styl

@@ -148,6 +148,7 @@
       overflow hidden
       border-radius 6px
       transition: all 0.3s ease; /* 添加过渡效果 */
+      position relative
 
       .opt {
         .opt-line {
@@ -183,6 +184,19 @@
           }
         }
       }
+
+      .remove {
+        display none
+        position absolute
+        right 10px
+        top 10px
+      }
+
+      &:hover{
+        .remove {
+          display block
+        }
+      }
     }
 
     .animate {

web/src/views/ImageMj.vue

@@ -417,6 +417,10 @@
                       </ul>
                     </div>
                   </div>
+
+                  <div class="remove">
+                    <el-button type="danger" :icon="Delete" @click="removeImage(scope.item)" circle/>
+                  </div>
                 </div>
               </template>
             </ItemList>
@@ -434,7 +438,7 @@
 <script setup>
 import {onMounted, ref} from "vue"
 import {
-  ChromeFilled,
+  ChromeFilled, Delete,
   DeleteFilled,
   DocumentCopy,
   InfoFilled,
@@ -444,7 +448,7 @@ import {
 } from "@element-plus/icons-vue";
 import Compressor from "compressorjs";
 import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElNotification} from "element-plus";
+import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import ItemList from "@/components/ItemList.vue";
 import Clipboard from "clipboard";
 import {checkSession} from "@/action/session";
@@ -581,10 +585,11 @@ const fetchRunningJobs = (userId) => {
     }
     runningJobs.value = _jobs
 
-    setTimeout(() => fetchRunningJobs(userId), 3000)
+    setTimeout(() => fetchRunningJobs(userId), 1000)
 
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
+    setTimeout(() => fetchRunningJobs(userId), 5000)
   })
 }
 
@@ -592,9 +597,10 @@ const fetchFinishJobs = (userId) => {
   // 获取已完成的任务
   httpGet(`/api/mj/jobs?status=1&user_id=${userId}`).then(res => {
     finishedJobs.value = res.data
-    setTimeout(() => fetchFinishJobs(userId), 3000)
+    setTimeout(() => fetchFinishJobs(userId), 1000)
   }).catch(e => {
     ElMessage.error("获取任务失败：" + e.message)
+    setTimeout(() => fetchFinishJobs(userId), 5000)
   })
 }
 
@@ -674,6 +680,25 @@ const send = (url, index, item) => {
   })
 }
 
+const removeImage = (item) => {
+  ElMessageBox.confirm(
+      '此操作将会删除任务和图片，继续操作码?',
+      '删除提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(() => {
+    httpPost("/api/mj/remove", {id: item.id, img_url: item.img_url}).then(() => {
+      ElMessage.success("任务删除成功")
+    }).catch(e => {
+      ElMessage.error("任务删除失败：" + e.message)
+    })
+  }).catch(() => {
+  })
+}
+
 </script>
 
 <style lang="stylus">

web/src/views/ImageSd.vue

@@ -371,6 +371,10 @@
                       </div>
                     </template>
                   </el-image>
+
+                  <div class="remove">
+                    <el-button type="danger" :icon="Delete" @click="removeImage($event,scope.item)" circle/>
+                  </div>
                 </div>
               </template>
             </ItemList>
@@ -498,9 +502,9 @@
 
 <script setup>
 import {onMounted, ref} from "vue"
-import {DocumentCopy, InfoFilled, Orange, Picture, Refresh} from "@element-plus/icons-vue";
+import {Delete, DocumentCopy, InfoFilled, Orange, Picture, Refresh} from "@element-plus/icons-vue";
 import {httpGet, httpPost} from "@/utils/http";
-import {ElMessage, ElNotification} from "element-plus";
+import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
 import ItemList from "@/components/ItemList.vue";
 import Clipboard from "clipboard";
 import {checkSession} from "@/action/session";
@@ -598,9 +602,10 @@ onMounted(() => {
       }
       runningJobs.value = _jobs
 
-      setTimeout(() => fetchRunningJobs(userId), 3000)
+      setTimeout(() => fetchRunningJobs(userId), 1000)
     }).catch(e => {
       ElMessage.error("获取任务失败：" + e.message)
+      setTimeout(() => fetchRunningJobs(userId), 5000)
     })
   }
 
@@ -608,9 +613,10 @@ onMounted(() => {
   const fetchFinishJobs = (userId) => {
     httpGet(`/api/sd/jobs?status=1&user_id=${userId}`).then(res => {
       finishedJobs.value = res.data
-      setTimeout(() => fetchFinishJobs(userId), 3000)
+      setTimeout(() => fetchFinishJobs(userId), 1000)
     }).catch(e => {
       ElMessage.error("获取任务失败：" + e.message)
+      setTimeout(() => fetchFinishJobs(userId), 5000)
     })
   }
 
@@ -654,6 +660,26 @@ const copyParams = (row) => {
   showTaskDialog.value = false
 }
 
+const removeImage = (event, item) => {
+  event.stopPropagation()
+  ElMessageBox.confirm(
+      '此操作将会删除任务和图片，继续操作码?',
+      '删除提示',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  ).then(() => {
+    httpPost("/api/sd/remove", {id: item.id, img_url: item.img_url}).then(() => {
+      ElMessage.success("任务删除成功")
+    }).catch(e => {
+      ElMessage.error("任务删除失败：" + e.message)
+    })
+  }).catch(() => {
+  })
+}
+
 </script>
 
 <style lang="stylus">