Develop/collection status (#403)

* 💄 delete model

* 💄 delete file model

* 💄 add dataset status

* feat: add DeleteConfirmModal component

This component provides unified delete confirmation with customizable messages
and is used by RatioTask and other modules.

Author: MoeexT

frontend/src/components/ActionDropdown.tsx

@@ -1,24 +1,30 @@
-import { Dropdown, Popconfirm, Button, Space } from "antd";
+import { Dropdown, Button, Space } from "antd";
 import { EllipsisOutlined } from "@ant-design/icons";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import DeleteConfirmModal from "./DeleteConfirmModal";
 
 interface ActionItem {
   key: string;
   label: string;
   icon?: React.ReactNode;
   danger?: boolean;
+  disabled?: boolean;
   confirm?: {
-    title: string;
-    description?: string;
+    title?: string;
+    message?: string;
+    itemName?: string | ((item: any) => string);
     okText?: string;
     cancelText?: string;
+    okType?: "default" | "primary" | "danger";
   };
+  onClick?: (item?: any) => void | Promise<void>;
 }
 
 interface ActionDropdownProps {
   actions?: ActionItem[];
-  onAction?: (key: string, action: ActionItem) => void;
+  onAction?: (key: string, action: ActionItem, item?: any) => void;
+  item?: any;
   placement?:
     | "bottomRight"
     | "topLeft"
@@ -33,86 +39,106 @@ interface ActionDropdownProps {
 const ActionDropdown = ({
   actions = [],
   onAction,
+  item,
   placement = "bottomRight",
 }: ActionDropdownProps) => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const handleActionClick = (action: ActionItem) => {
+  const [deleteConfirm, setDeleteConfirm] = useState<{
+    visible: boolean;
+    action: ActionItem | null;
+  }>({
+    visible: false,
+    action: null,
+  });
+
+  const handleActionClick = (action: ActionItem, e: React.MouseEvent) => {
+    e?.stopPropagation();
+
     if (action.confirm) {
-      // 如果有确认框，不立即执行，等待确认
+      // 显示删除确认弹窗
+      setDeleteConfirm({
+        visible: true,
+        action,
+      });
+      setOpen(false);
       return;
     }
+
     // 执行操作
-    onAction?.(action.key, action);
-    // 如果没有确认框，则立即关闭 Dropdown
+    if (action.onClick) {
+      action.onClick(item);
+    }
+    onAction?.(action.key, action, item);
     setOpen(false);
   };
 
+  const handleConfirmDelete = async () => {
+    if (deleteConfirm.action?.onClick) {
+      await deleteConfirm.action.onClick(item);
+    }
+    if (deleteConfirm.action) {
+      onAction?.(deleteConfirm.action.key, deleteConfirm.action, item);
+    }
+    setDeleteConfirm({ visible: false, action: null });
+  };
+
+  const handleCancelDelete = () => {
+    setDeleteConfirm({ visible: false, action: null });
+  };
+
   const dropdownContent = (
     <div className="bg-white p-2 rounded shadow-md">
       <Space direction="vertical" className="w-full">
-        {actions.map((action) => {
-          if (action.confirm) {
-            return (
-              <Popconfirm
-                key={action.key}
-                title={action.confirm.title}
-                description={action.confirm.description}
-                onConfirm={() => {
-                  onAction?.(action.key, action);
-                  setOpen(false);
-                }}
-                okText={action.confirm.okText || t('components.actionDropdown.confirm')}
-                cancelText={action.confirm.cancelText || t('components.actionDropdown.cancel')}
-                okType={action.danger ? "danger" : "primary"}
-                styles={{ root: { zIndex: 9999 } }}
-              >
-                <Button
-                  type="text"
-                  size="small"
-                  disabled={action.disabled || false}
-                  className="w-full text-left"
-                  danger={action.danger}
-                  icon={action.icon}
-                >
-                  {action.label}
-                </Button>
-              </Popconfirm>
-            );
-          }
-
-          return (
-            <Button
-              key={action.key}
-              className="w-full"
-              size="small"
-              type="text"
-              disabled={action.disabled || false}
-              danger={action.danger}
-              icon={action.icon}
-              onClick={() => handleActionClick(action)}
-            >
-              {action.label}
-            </Button>
-          );
-        })}
+        {actions.map((action) => (
+          <Button
+            key={action.key}
+            className="w-full"
+            size="small"
+            type="text"
+            disabled={action.disabled || false}
+            danger={action.danger}
+            icon={action.icon}
+            onClick={(e) => handleActionClick(action, e)}
+          >
+            {action.label}
+          </Button>
+        ))}
       </Space>
     </div>
   );
 
   return (
-    <Dropdown
-      overlay={dropdownContent}
-      trigger={["click"]}
-      placement={placement}
-      open={open}
-      onOpenChange={setOpen}
-    >
-      <Button
-        type="text"
-        icon={<EllipsisOutlined style={{ fontSize: 24 }} />}
-      />
-    </Dropdown>
+    <>
+      <Dropdown
+        menu={{ items: [] }}
+        dropdownRender={() => dropdownContent}
+        trigger={["click"]}
+        placement={placement}
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <Button
+          type="text"
+          icon={<EllipsisOutlined style={{ fontSize: 24 }} />}
+        />
+      </Dropdown>
+
+      {deleteConfirm.action?.confirm && (
+        <DeleteConfirmModal
+          visible={deleteConfirm.visible}
+          title={deleteConfirm.action.confirm.title}
+          message={deleteConfirm.action.confirm.message}
+          itemName={
+            typeof deleteConfirm.action.confirm.itemName === 'function'
+              ? deleteConfirm.action.confirm.itemName(item)
+              : deleteConfirm.action.confirm.itemName
+          }
+          onConfirm={handleConfirmDelete}
+          onCancel={handleCancelDelete}
+        />
+      )}
+    </>
   );
 };
 

frontend/src/components/CardView.tsx

@@ -43,7 +43,15 @@ interface CardViewProps<T> {
         key: string;
         label: string;
         danger?: boolean;
+        disabled?: boolean;
         icon?: React.JSX.Element;
+        confirm?: {
+          title: string;
+          description?: string;
+          okText?: string;
+          cancelText?: string;
+          okType?: "default" | "primary" | "danger";
+        };
         onClick?: (item: T) => void;
       }[]
     | ((item: T) => ItemType[]);
@@ -327,11 +335,9 @@ function CardView<T extends BaseCardDataType>(props: CardViewProps<T>) {
                 {operations && (
                   <ActionDropdown
                     actions={ops(item)}
+                    item={item}
                     onAction={(key) => {
-                      const operation = ops(item).find((op) => op.key === key);
-                      if (operation?.onClick) {
-                        operation.onClick(item);
-                      }
+                      // ActionDropdown 已经处理了 onClick 调用
                     }}
                   />
                 )}

frontend/src/components/DeleteConfirmModal.tsx

@@ -0,0 +1,64 @@
+import { Modal } from "antd";
+import { useTranslation } from "react-i18next";
+
+export interface DeleteConfirmModalProps {
+  visible: boolean;
+  title?: string;
+  message?: string;
+  itemName?: string;
+  onConfirm: () => void | Promise<void>;
+  onCancel: () => void;
+}
+
+/**
+ * 公共删除确认弹窗组件
+ * 样式参考任务管理的删除弹窗
+ *
+ * @example
+ * ```tsx
+ * const [deleteModal, setDeleteModal] = useState({
+ *   visible: false,
+ *   itemName: "",
+ * });
+ *
+ * <DeleteConfirmModal
+ *   visible={deleteModal.visible}
+ *   itemName={deleteModal.itemName}
+ *   onConfirm={async () => {
+ *     await deleteItem(deleteModal.id);
+ *     setDeleteModal({ visible: false, itemName: "" });
+ *   }}
+ *   onCancel={() => setDeleteModal({ visible: false, itemName: "" })}
+ * />
+ * ```
+ */
+export default function DeleteConfirmModal({
+  visible,
+  title,
+  message,
+  itemName,
+  onConfirm,
+  onCancel,
+}: DeleteConfirmModalProps) {
+  const { t } = useTranslation();
+
+  const defaultTitle = title || t("components.deleteConfirm.title");
+  // 如果提供了自定义 message，直接使用；否则使用默认消息并替换占位符
+  const defaultMessage = message
+    ? message.replace("{{itemName}}", itemName || "").replace("{{taskName}}", itemName || "")
+    : t("components.deleteConfirm.message", { itemName: itemName || "" });
+
+  return (
+    <Modal
+      title={defaultTitle}
+      open={visible}
+      onOk={onConfirm}
+      onCancel={onCancel}
+      okType="danger"
+      okText={t("components.deleteConfirm.confirm")}
+      cancelText={t("components.deleteConfirm.cancel")}
+    >
+      <p>{defaultMessage}</p>
+    </Modal>
+  );
+}

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

@@ -95,7 +95,7 @@
         "updateFailed": "Failed to update task",
         "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.",
+        "deleteConfirmMessage": "Are you sure you want to delete \"{{itemName}}\"? This action cannot be undone.",
         "confirmDelete": "Delete",
         "cancel": "Cancel"
       },
@@ -373,7 +373,7 @@
     },
     "confirm": {
       "deleteDatasetTitle": "Confirm delete this dataset?",
-      "deleteDatasetDesc": "This dataset cannot be recovered after deletion. Proceed with caution.",
+      "deleteDatasetDesc": "Are you sure you want to delete \"{{itemName}}\"? This action cannot be undone.",
       "deleteFolderTitle": "Confirm delete folder?",
       "deleteFolderDesc": "Deleting folder \"{{name}}\" will remove all files and subfolders. This action cannot be undone.",
       "deleteConfirm": "Delete",
@@ -584,10 +584,12 @@
       "videoJsonl": "Dataset for large-scale video pretraining"
     },
     "datasetStatus": {
+      "draft": "Draft",
       "active": "Active",
       "processing": "Processing",
-      "inactive": "Inactive",
-      "draft": "Draft"
+      "archived": "Archived",
+      "published": "Published",
+      "deprecated": "Deprecated"
     },
     "dataSources": {
       "upload": "Local Upload",
@@ -649,7 +651,7 @@
       },
       "confirm": {
         "deleteTitle": "Confirm delete this task?",
-        "deleteDesc": "This task cannot be recovered after deletion. Please proceed with caution.",
+        "deleteDesc": "Are you sure you want to delete \"{{itemName}}\"? This action cannot be undone.",
         "okText": "Delete",
         "cancelText": "Cancel"
       },
@@ -2461,6 +2463,12 @@
       "retry": "Retry",
       "goHome": "Go Home"
     },
+    "deleteConfirm": {
+      "title": "Confirm Delete",
+      "message": "This action cannot be undone. Are you sure you want to delete {{itemName}}?",
+      "confirm": "Delete",
+      "cancel": "Cancel"
+    },
     "searchControls": {
       "searchPlaceholder": "Search...",
       "startTime": "Start Time",