feat: 删除任务增加二次确认弹窗

任务列表的删除按钮改为 AlertDialog 二次确认(与对话删除交互一致),
确认后才调用 api.deleteTask。
This commit is contained in:
Autumn-27 committed 2026-08-18 09:30:13 -04:00
1 parent d901543aba
commit c588dd67ae
1 file changed
+35 -8
+35 -8
View File
@@ -16,6 +16,17 @@ import {
} from "lucide-react"; } from "lucide-react";
import { StatusBadge } from "@/components/status-badge"; import { StatusBadge } from "@/components/status-badge";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card"; import { Card, CardContent } from "@/components/ui/card";
import { Checkbox } from "@/components/ui/checkbox"; import { Checkbox } from "@/components/ui/checkbox";
@@ -542,14 +553,30 @@ export default function TasksPage() {
进入 <ArrowRightIcon /> 进入 <ArrowRightIcon />
</Link> </Link>
</Button> </Button>
<Button <AlertDialog>
size="icon" <AlertDialogTrigger asChild>
variant="outline" <Button size="icon" variant="outline" aria-label="删除任务">
onClick={() => deleteTask(task.id)} <Trash2Icon className="text-destructive" />
aria-label="删除任务" </Button>
> </AlertDialogTrigger>
<Trash2Icon className="text-destructive" /> <AlertDialogContent>
</Button> <AlertDialogHeader>
<AlertDialogTitle>确认删除任务 #{task.id}?</AlertDialogTitle>
<AlertDialogDescription>
{task.description
? `「${task.description.length > 80 ? task.description.slice(0, 80) + "…" : task.description}」`
: "该任务"}
的执行记录、会话与产物将被删除,此操作不可撤销(全局资产图保留)。
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>取消</AlertDialogCancel>
<AlertDialogAction onClick={() => deleteTask(task.id)}>
删除
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div> </div>
</TableCell> </TableCell>
</TableRow> </TableRow>