《60天AI学习计划启动 | Day 43: 基于 Agent 的任务工作流（巡检 / 定时报表 / 多步任务》

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 也是如此）

• 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: string
  type: TaskStepType
  agentId: string        // 对应 Day 42 的 AgentConfig.id
  status: TaskStatus
  inputSummary: string
  outputSummary?: string
  startedAt?: number
  finishedAt?: number
}

export interface Task {
  id: string
  name: string
  status: TaskStatus
  createdAt: number
  updatedAt: number
  steps: 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) => void
  selectedId?: string | null
}

export const TaskList: React.FC<TaskListProps> = ({ tasks, onSelect, selectedId }) => (
  <ul>
    {tasks.map(t => (
      <li
        key={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 工作流