1

simple-demo/memos.html

@@ -260,9 +260,10 @@
                   >
                   <br />
                   <br />
-                  <el-button size="small" type="warning" @click="del(item)"
-                    >删除</el-button
-                  >
+                  <el-button size="small" type="warning" @click="del(item)">
+                    {{ item.pendingDelete ? `恢复(${item.countdown}s)` : '删除'
+                    }}
+                  </el-button>
                 </div>
                 <div class="editClass" style="margin-left: 30px">
                   <el-checkbox
@@ -752,30 +753,49 @@
               // this.search();
             }
           },
+          // 修正后的删除逻辑，总计时3秒支持撤销
           del(item) {
-            // 提醒是否删除
-            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
-              confirmButtonText: "确定",
-              cancelButtonText: "取消",
-              type: "warning",
-            }).then(() => {
-              requestUtil
-                .async(
-                  `https://web_history.tianyunperfect.cn/memos/delete`,
-                  "post",
-                  { id: item.id },
-                  {}
-                )
-                .then((res) => {
-                  if (res.code === 200) {
-                    this.msg("删除成功");
-                    // 在 this.contentList 上直接去除
-                    this.contentList = this.contentList.filter(
-                      (it) => it.id !== item.id
-                    );
-                  }
-                });
-            });
+            // 如果正在等待删除，则取消删除
+            if (item.pendingDelete) {
+              clearInterval(item.countdownInterval);
+              this.$set(item, "pendingDelete", false);
+              this.$set(item, "countdown", 0);
+              this.$notify({
+                type: "info",
+                title: "已取消",
+                message: "已取消删除操作",
+                duration: 1500,
+              });
+              return;
+            }
+
+            // 开始删除倒计时
+            this.$set(item, "pendingDelete", true);
+            this.$set(item, "countdown", 5);
+
+            // 设置倒计时通知
+            item.countdownInterval = setInterval(() => {
+              this.$set(item, "countdown", item.countdown - 1);
+              if (item.countdown <= 0) {
+                clearInterval(item.countdownInterval);
+                // 执行删除请求
+                requestUtil
+                  .async(
+                    `https://web_history.tianyunperfect.cn/memos/delete`,
+                    "post",
+                    { id: item.id },
+                    {}
+                  )
+                  .then((res) => {
+                    if (res.code === 200) {
+                      this.msg("删除成功");
+                      this.contentList = this.contentList.filter(
+                        (it) => it.id !== item.id
+                      );
+                    }
+                  });
+              }
+            }, 1000);
           },
           archive(item) {
             requestUtil