《60天AI学习计划启动 | Day 45: 工作流嵌入前端产品 & 运行监控页面》

Day 45：工作流嵌入前端产品 & 运行监控页面

学习目标

• 理解 工作流「模板」与「实例」的区别（配置 vs 一次执行）
• 掌握 在前端触发工作流执行、查看任务状态与结果的基本模型
• 会设计 一个简单的「任务实例列表 + 详情」监控页

---

核心知识点

• 1. 模板 vs 实例

  • 模板（Workflow）：配置好的步骤链（昨天的 Workflow）
  • 实例（WorkflowInstance）：一次真正运行记录：

    export type InstanceStatus = 'pending'|'running'|'success'|'failed'
    export interface WorkflowInstance {
      id: string
      workflowId: string
      name: string
      status: InstanceStatus
      createdAt: number
      updatedAt: number
      stepResults: { stepId:string; status:InstanceStatus; outputSummary?:string }[]
      finalReport?: string
    }
    

  • 前端一般：选模板 → 填少量参数 → 调用 /api/workflows/:id/run → 拿到 instanceId

• 2. 运行监控页

  • 列表：instanceId / name / status / createdAt / updatedAt
  • 详情：基于 Day 43 的 TaskStep + Day 39 Timeline 展示执行过程 & 报告
  • 轮询或 WebSocket：周期性刷新实例状态

• 3. 触发执行的前端调用模型

  async function runWorkflow(workflowId:string, input:Record<string,any>) {
    const res = await fetch(`/api/workflows/${workflowId}/run`, {
      method:'POST',
      headers:{'Content-Type':'application/json'},
      body:JSON.stringify({ input })
    })
    return res.json() as Promise<{ instanceId:string }>
  }
  

---

明日学习计划预告（Day 46）

• 主题：多模态输入统一模型（文本 / 图片 / 文件 / 结构化）
• 方向：
  • 设计统一的 InputItem：支持 text/image/file/json 等多种类型
  • 为后面任意多模态场景（截图+问题、文件+问题）打基础