Day 43：基于 Agent 的任务工作流（巡检 / 定时报表 / 多步任务）
学习目标
- 理解「任务工作流 = 多步骤 + 多 Agent + 调度」的基本模型
- 能抽象 一个简单的“自动日报/巡检任务”数据结构
- 为前端展示 任务列表 + 进度 + 结果 打好模型基础
核心知识点
-
1. 任务工作流抽象
- Task：
id / name / status / createdAt / steps[] / result - Step：
id / agentId / type(collect/analyze/report) / status / logs - Agent：用 Day 42 定义好的专家/协同 Agent
- 状态流转：
pending → running → success/failed（每个 step 也是如此）
- Task：
-
2. 典型场景示例：自动日报
- Step1：数据收集（调用报表/SQL 接口）
- Step2：指标分析（analyticsAgent 总结风险/亮点）
- Step3：报告生成（docAgent 生成自然语言日报）
- 前端只关心：当前 Task 在第几步、每步的输出内容是什么
-
3. 前端展示维度
- 任务列表页：任务名 / 创建时间 / 状态 / 最后更新时间
- 任务详情页：步骤时间线（可复用 Day 39 时间线组件的思路）
- 每步展示：使用的 Agent + 输入摘要 + 输出摘要
实战作业（附代码）
- 作业 1：定义任务 & 步骤 TS 类型
export type TaskStatus = 'pending' | 'running' | 'success' | 'failed'
export type TaskStepType = 'collect' | 'analyze' | 'report'export interface TaskStep {id: stringtype: TaskStepTypeagentId: string // 对应 Day 42 的 AgentConfig.idstatus: TaskStatusinputSummary: stringoutputSummary?: stringstartedAt?: numberfinishedAt?: number
}export interface Task {id: stringname: stringstatus: TaskStatuscreatedAt: numberupdatedAt: numbersteps: TaskStep[]finalReport?: string
}
- 作业 2：伪造一个“日报任务”的 demo 数据（前端可直接用于页面）
export const DEMO_TASK: Task = {id: 'task_2025_01_01',name: '2025-01-01 每日质量巡检',status: 'success',createdAt: Date.now() - 1000 * 60 * 5,updatedAt: Date.now(),steps: [{id: 's1',type: 'collect',agentId: 'analytics',status: 'success',inputSummary: '拉取最近7天订单与退货数据',outputSummary: '成功拉取 7 天数据：订单 10w 条，退货 2k 条',startedAt: Date.now() - 1000 * 60 * 4,finishedAt: Date.now() - 1000 * 60 * 3},{id: 's2',type: 'analyze',agentId: 'analytics',status: 'success',inputSummary: '对 Step1 数据做 FFR 趋势与异常分析',outputSummary: '发现 2 个异常峰值，主要集中在型号 A 与渠道 B',startedAt: Date.now() - 1000 * 60 * 3,finishedAt: Date.now() - 1000 * 60 * 2},{id: 's3',type: 'report',agentId: 'doc',status: 'success',inputSummary: '基于分析结果生成日报文案',outputSummary: '生成日报：包含概览/异常/建议三部分',startedAt: Date.now() - 1000 * 60 * 2,finishedAt: Date.now() - 1000 * 60 * 1}],finalReport: '【概览】本日整体退货率 2% ...（此处省略长文）'
}
- 作业 3：任务列表视图的最小模型（React 列表+详情）
interface TaskListProps {tasks: Task[]onSelect: (id: string) => voidselectedId?: string | null
}export const TaskList: React.FC<TaskListProps> = ({ tasks, onSelect, selectedId }) => (<ul>{tasks.map(t => (<likey={t.id}onClick={() => onSelect(t.id)}style={{ cursor:'pointer', fontWeight: t.id === selectedId ? 'bold' : 'normal' }}>{t.name} · {t.status} · {new Date(t.updatedAt).toLocaleTimeString()}</li>))}</ul>
)
明日学习计划预告（Day 44）
- 主题：工作流可视化配置（简单 DAG / 步骤 UI）
- 方向：
- 在前端做一个简易“工作流编辑器”：拖拽/勾选步骤 → 生成 Task 模板
- 让非开发同学也能配置「巡检 → 分析 → 报告」这样的 AI 工作流