309 lines
10 KiB
TypeScript
309 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import {
|
|
Box,
|
|
Chip,
|
|
CircularProgress,
|
|
Collapse,
|
|
IconButton,
|
|
Stack,
|
|
Typography,
|
|
alpha,
|
|
useTheme,
|
|
} from "@mui/material";
|
|
import AssignmentTurnedInRounded from "@mui/icons-material/AssignmentTurnedInRounded";
|
|
import CheckCircleRounded from "@mui/icons-material/CheckCircleRounded";
|
|
import BlockRounded from "@mui/icons-material/BlockRounded";
|
|
import KeyboardArrowDownRounded from "@mui/icons-material/KeyboardArrowDownRounded";
|
|
import KeyboardArrowUpRounded from "@mui/icons-material/KeyboardArrowUpRounded";
|
|
import RadioButtonUncheckedRounded from "@mui/icons-material/RadioButtonUncheckedRounded";
|
|
|
|
import type { Message } from "./GlobalChatbox.types";
|
|
|
|
export const TodoPlanCard = ({
|
|
todoUpdate,
|
|
}: {
|
|
todoUpdate: NonNullable<Message["todos"]>;
|
|
}) => {
|
|
const theme = useTheme();
|
|
const total = todoUpdate.todos.length;
|
|
const completed = todoUpdate.todos.filter((todo) => todo.status === "completed").length;
|
|
const running = todoUpdate.todos.find((todo) => todo.status === "in_progress");
|
|
const cancelled = todoUpdate.todos.filter((todo) => todo.status === "cancelled").length;
|
|
const pending = todoUpdate.todos.filter((todo) => todo.status === "pending").length;
|
|
const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
|
|
const isAborted = cancelled > 0 && completed + cancelled === total;
|
|
const canCollapse = total > 4;
|
|
const [expanded, setExpanded] = React.useState(!canCollapse && !isAborted);
|
|
const pinnedTodos = canCollapse ? todoUpdate.todos.slice(0, 4) : todoUpdate.todos;
|
|
const collapsibleTodos = canCollapse ? todoUpdate.todos.slice(4) : [];
|
|
const hiddenCount = expanded ? 0 : collapsibleTodos.length;
|
|
const latestUpdatedAt = Math.max(
|
|
todoUpdate.createdAt,
|
|
...todoUpdate.todos
|
|
.map((todo) => todo.updatedAt ?? todo.createdAt ?? 0)
|
|
.filter((value) => value > 0),
|
|
);
|
|
const updatedAtLabel =
|
|
latestUpdatedAt > 0
|
|
? new Intl.DateTimeFormat("zh-CN", {
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
}).format(new Date(latestUpdatedAt))
|
|
: undefined;
|
|
|
|
const getTodoVisual = (status: NonNullable<Message["todos"]>["todos"][number]["status"]) => {
|
|
if (status === "completed") {
|
|
return { icon: <CheckCircleRounded sx={{ fontSize: 17 }} />, color: theme.palette.success.main, label: "完成" };
|
|
}
|
|
if (status === "in_progress") {
|
|
return { icon: <CircularProgress size={15} thickness={5} />, color: "#0288d1", label: "进行中" };
|
|
}
|
|
if (status === "cancelled") {
|
|
return { icon: <BlockRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.disabled, label: "中止" };
|
|
}
|
|
return { icon: <RadioButtonUncheckedRounded sx={{ fontSize: 17 }} />, color: theme.palette.text.secondary, label: "待办" };
|
|
};
|
|
|
|
const getPriorityLabel = (priority: NonNullable<Message["todos"]>["todos"][number]["priority"]) => {
|
|
if (priority === "high") return { label: "高优先级", color: "#8a5a00" };
|
|
if (priority === "medium") return { label: "中优先级", color: "#9a6a16" };
|
|
if (priority === "low") return { label: "低优先级", color: "#8d7960" };
|
|
return undefined;
|
|
};
|
|
|
|
const statusSummary = isAborted
|
|
? `${completed} 完成 / ${cancelled} 中止`
|
|
: [
|
|
completed ? `${completed} 完成` : null,
|
|
running ? "1 进行中" : null,
|
|
pending ? `${pending} 待办` : null,
|
|
cancelled ? `${cancelled} 中止` : null,
|
|
].filter(Boolean).join(" / ") || "等待任务";
|
|
const renderTodoRow = (
|
|
todo: NonNullable<Message["todos"]>["todos"][number],
|
|
index: number,
|
|
) => {
|
|
const visual = getTodoVisual(todo.status);
|
|
const priority = getPriorityLabel(todo.priority);
|
|
return (
|
|
<Stack
|
|
key={`${todo.id}-${index}`}
|
|
direction="row"
|
|
alignItems="flex-start"
|
|
spacing={1}
|
|
sx={{
|
|
py: 0.8,
|
|
borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
|
|
color: todo.status === "cancelled" ? "text.disabled" : "text.primary",
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: 24,
|
|
height: 24,
|
|
borderRadius: 1.25,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
flex: "0 0 auto",
|
|
color: visual.color,
|
|
bgcolor: alpha(visual.color, 0.08),
|
|
mt: 0.1,
|
|
}}
|
|
>
|
|
{visual.icon}
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Typography
|
|
variant="body2"
|
|
sx={{
|
|
minWidth: 0,
|
|
wordBreak: "break-word",
|
|
lineHeight: 1.45,
|
|
textDecoration: todo.status === "cancelled" ? "line-through" : undefined,
|
|
}}
|
|
>
|
|
{todo.content}
|
|
</Typography>
|
|
</Box>
|
|
<Stack direction="row" spacing={0.5} sx={{ flex: "0 0 auto" }}>
|
|
{priority ? (
|
|
<Chip
|
|
size="small"
|
|
label={priority.label}
|
|
sx={{
|
|
height: 22,
|
|
borderRadius: "11px",
|
|
fontSize: "0.66rem",
|
|
fontWeight: 800,
|
|
color: priority.color,
|
|
bgcolor: alpha(priority.color, 0.045),
|
|
border: `1px solid ${alpha(priority.color, 0.16)}`,
|
|
"& .MuiChip-label": { px: 0.75 },
|
|
}}
|
|
/>
|
|
) : null}
|
|
<Chip
|
|
size="small"
|
|
label={visual.label}
|
|
sx={{
|
|
height: 22,
|
|
borderRadius: "11px",
|
|
fontSize: "0.66rem",
|
|
fontWeight: 800,
|
|
color: visual.color,
|
|
bgcolor: alpha(visual.color, 0.08),
|
|
"& .MuiChip-label": { px: 0.75 },
|
|
}}
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
if (total === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
borderRadius: 2,
|
|
overflow: "hidden",
|
|
border: `1px solid ${alpha("#00838f", 0.16)}`,
|
|
bgcolor: alpha("#f8fbfc", 0.82),
|
|
}}
|
|
>
|
|
<Stack
|
|
spacing={1}
|
|
role="button"
|
|
tabIndex={0}
|
|
onClick={() => {
|
|
if (canCollapse) {
|
|
setExpanded((value) => !value);
|
|
}
|
|
}}
|
|
onKeyDown={(event) => {
|
|
if (canCollapse && (event.key === "Enter" || event.key === " ")) {
|
|
event.preventDefault();
|
|
setExpanded((value) => !value);
|
|
}
|
|
}}
|
|
sx={{
|
|
px: 1.4,
|
|
py: 1.15,
|
|
cursor: canCollapse ? "pointer" : "default",
|
|
transition: "background-color 0.2s ease",
|
|
"&:hover": canCollapse ? { bgcolor: alpha("#00838f", 0.035) } : undefined,
|
|
}}
|
|
>
|
|
<Stack direction="row" alignItems="center" spacing={1}>
|
|
<Box
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
borderRadius: 1.5,
|
|
display: "grid",
|
|
placeItems: "center",
|
|
flex: "0 0 auto",
|
|
color: "#00838f",
|
|
bgcolor: alpha("#00838f", 0.1),
|
|
border: `1px solid ${alpha("#00838f", 0.14)}`,
|
|
}}
|
|
>
|
|
<AssignmentTurnedInRounded sx={{ fontSize: 18 }} />
|
|
</Box>
|
|
<Box sx={{ minWidth: 0, flex: 1 }}>
|
|
<Stack direction="row" alignItems="center" spacing={0.75}>
|
|
<Typography variant="subtitle2" fontWeight={800} noWrap sx={{ lineHeight: 1.25 }}>
|
|
会话任务
|
|
</Typography>
|
|
<Chip
|
|
size="small"
|
|
label={running ? "执行中" : isAborted ? "已中止" : completed === total ? "已完成" : "已同步"}
|
|
sx={{
|
|
height: 20,
|
|
borderRadius: "10px",
|
|
fontSize: "0.66rem",
|
|
fontWeight: 800,
|
|
color: running ? "#0277bd" : isAborted ? "text.secondary" : "#00838f",
|
|
bgcolor: alpha(running ? "#0288d1" : isAborted ? "#64748b" : "#00838f", 0.08),
|
|
"& .MuiChip-label": { px: 0.75 },
|
|
}}
|
|
/>
|
|
</Stack>
|
|
<Typography variant="caption" color="text.secondary">
|
|
{statusSummary}{updatedAtLabel ? ` · ${updatedAtLabel} 更新` : ""}
|
|
</Typography>
|
|
</Box>
|
|
{canCollapse ? (
|
|
<IconButton
|
|
size="small"
|
|
aria-label={expanded ? "收起会话任务" : "展开会话任务"}
|
|
sx={{
|
|
width: 28,
|
|
height: 28,
|
|
color: "text.secondary",
|
|
bgcolor: alpha("#000", 0.035),
|
|
"&:hover": { bgcolor: alpha("#000", 0.07) },
|
|
}}
|
|
>
|
|
{expanded ? (
|
|
<KeyboardArrowUpRounded sx={{ fontSize: 18 }} />
|
|
) : (
|
|
<KeyboardArrowDownRounded sx={{ fontSize: 18 }} />
|
|
)}
|
|
</IconButton>
|
|
) : null}
|
|
</Stack>
|
|
<Box
|
|
sx={{
|
|
height: 6,
|
|
borderRadius: 999,
|
|
overflow: "hidden",
|
|
bgcolor: alpha("#00838f", 0.1),
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: `${progress}%`,
|
|
height: "100%",
|
|
borderRadius: 999,
|
|
bgcolor: isAborted ? theme.palette.text.disabled : "#00838f",
|
|
transition: "width 0.25s ease",
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Stack spacing={0} sx={{ px: 1.4, pb: 1.1 }}>
|
|
{pinnedTodos.map((todo, index) => renderTodoRow(todo, index))}
|
|
{canCollapse ? (
|
|
<Collapse in={expanded} timeout={220} unmountOnExit={false}>
|
|
<Stack spacing={0}>
|
|
{collapsibleTodos.map((todo, index) =>
|
|
renderTodoRow(todo, index + pinnedTodos.length),
|
|
)}
|
|
</Stack>
|
|
</Collapse>
|
|
) : null}
|
|
{hiddenCount > 0 ? (
|
|
<Typography
|
|
variant="caption"
|
|
color="text.secondary"
|
|
sx={{
|
|
pt: 0.8,
|
|
borderTop: `1px solid ${alpha("#00838f", 0.08)}`,
|
|
}}
|
|
>
|
|
还有 {hiddenCount} 项，展开查看全部
|
|
</Typography>
|
|
) : null}
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
|