💄 change delete prompt Notification to Modal (#382)

Author: MoeexT

frontend/src/i18n/locales/en/common.json

@@ -90,6 +90,7 @@
         "stopSuccess": "Task stop request sent",
         "deleteSuccess": "Task deleted",
         "deleteConfirm": "Are you sure you want to delete this task? This action cannot be undone.",
+        "deleteConfirmMessage": "Are you sure you want to delete task \"{{taskName}}\"? This action cannot be undone.",
         "confirmDelete": "Delete",
         "cancel": "Cancel"
       }

frontend/src/i18n/locales/zh/common.json

@@ -90,6 +90,7 @@
         "stopSuccess": "任务停止请求已发送",
         "deleteSuccess": "任务已删除",
         "deleteConfirm": "确定要删除该任务吗？此操作不可撤销。",
+        "deleteConfirmMessage": "确定要删除任务「{{taskName}}」吗？删除后将无法恢复。",
         "confirmDelete": "删除",
         "cancel": "取消"
       }

frontend/src/pages/DataCollection/Home/TaskManagement.tsx

@@ -1,4 +1,4 @@
-import { App, Button, Card, Popconfirm, Table, Tag, Tooltip } from "antd";
+import { App, Button, Card, Modal, Table, Tag, Tooltip } from "antd";
 import {
   DeleteOutlined,
   PauseCircleOutlined,
@@ -17,13 +17,24 @@ import { getStatusMap, mapCollectionTask } from "../collection.const";
 import useFetchData from "@/hooks/useFetchData";
 import { useNavigate } from "react-router";
 import { useTranslation } from "react-i18next";
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 
 export default function TaskManagement() {
   const { message } = App.useApp();
   const navigate = useNavigate();
   const { t } = useTranslation();
   const statusMap = getStatusMap(t);
+
+  // 删除确认弹窗状态
+  const [deleteModal, setDeleteModal] = useState<{
+    visible: boolean;
+    taskId: string;
+    taskName: string;
+  }>({
+    visible: false,
+    taskId: "",
+    taskName: "",
+  });
   const filters = [
     {
       key: "status",
@@ -78,9 +89,18 @@ export default function TaskManagement() {
   const handleDeleteTask = async (taskId: string) => {
     await deleteTaskByIdUsingDelete(taskId);
     message.success(t("dataCollection.taskManagement.messages.deleteSuccess"));
+    setDeleteModal({ visible: false, taskId: "", taskName: "" });
     fetchData();
   };
 
+  const showDeleteConfirm = (taskId: string, taskName: string) => {
+    setDeleteModal({ visible: true, taskId, taskName });
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteModal({ visible: false, taskId: "", taskName: "" });
+  };
+
   const taskOperations = (record: CollectionTask) => {
     const isStopped = record.status === TaskStatus.STOPPED;
     const startButton = {
@@ -110,13 +130,13 @@ export default function TaskManagement() {
         label: t("dataCollection.taskManagement.actions.delete"),
         danger: true,
         icon: <DeleteOutlined />,
-        confirm: {
+        modal: {
           title: t("dataCollection.taskManagement.messages.deleteConfirm"),
           okText: t("dataCollection.taskManagement.messages.confirmDelete"),
           cancelText: t("dataCollection.taskManagement.messages.cancel"),
           okType: "danger",
         },
-        onClick: () => handleDeleteTask(record.id),
+        onClick: () => showDeleteConfirm(record.id, record.name),
       },
     ];
   };
@@ -203,7 +223,7 @@ export default function TaskManagement() {
       fixed: "right" as const,
       render: (_: any, record: CollectionTask) => {
         return taskOperations(record).map((op) => {
-          const button = (
+          return (
             <Tooltip key={op.key} title={op.label}>
               <Button
                 type="text"
@@ -213,23 +233,6 @@ export default function TaskManagement() {
               />
             </Tooltip>
           );
-          if (op.confirm) {
-            return (
-              <Popconfirm
-                key={op.key}
-                title={op.confirm.title}
-                okText={op.confirm.okText}
-                cancelText={op.confirm.cancelText}
-                okType={op.danger ? "danger" : "primary"}
-                onConfirm={() => op.onClick()}
-              >
-                <Tooltip key={op.key} title={op.label}>
-                  <Button type="text" icon={op.icon} danger={op?.danger} />
-                </Tooltip>
-              </Popconfirm>
-            );
-          }
-          return button;
         });
       },
     },
@@ -279,6 +282,23 @@ export default function TaskManagement() {
           scroll={{ x: "max-content", y: "calc(100vh - 25rem)" }}
         />
       </Card>
+
+      {/* 删除确认弹窗 */}
+      <Modal
+        title={t("dataCollection.taskManagement.messages.deleteConfirm")}
+        open={deleteModal.visible}
+        onOk={() => handleDeleteTask(deleteModal.taskId)}
+        onCancel={handleCancelDelete}
+        okType="danger"
+        okText={t("dataCollection.taskManagement.messages.confirmDelete")}
+        cancelText={t("dataCollection.taskManagement.messages.cancel")}
+      >
+        <p>
+          {t("dataCollection.taskManagement.messages.deleteConfirmMessage", {
+            taskName: deleteModal.taskName,
+          })}
+        </p>
+      </Modal>
     </div>
   );
 }