流水线开发流程 — 设计→实现→测试接力#

// feedback-pipeline.ts
export const meta = {
  name: 'feedback-pipeline',
  description: '用户反馈功能完整开发流水线：API 设计 → 前端组件 → 测试 + 审查',
}

export const phase = {
  stage1: {
    name: 'API 设计与实现',
    agents: {
      backend: {
        prompt: `阅读 specs/feedback-api.md，设计并实现反馈 API：
1. 设计 RESTful 端点（POST /api/feedbacks, GET /api/feedbacks, PATCH /api/feedbacks/:id/status）
2. 定义数据模型 Feedback { id, content, email, status, createdAt }
3. 实现 Express 路由和控制器，TypeScript 类型完整
4. 中间件：POST 校验 content 和 email 字段、PATCH 校验 status 枚举值
5. 输出 API 文档到 api-docs/feedback-api.md，包含请求/响应示例

产物清单：
- src/routes/feedback.ts
- src/models/feedback.ts
- api-docs/feedback-api.md`,
      },
    },
  },

  stage2: {
    name: '前端组件实现',
    dependsOn: ['stage1'],
    agents: {
      frontend: {
        prompt: `基于 api-docs/feedback-api.md 中定义的接口，实现 React 组件：
1. FeedbackForm：表单组件，包含 content（textarea）、email（input），提交到 POST /api/feedbacks
2. FeedbackList：列表组件，调用 GET /api/feedbacks 展示所有反馈
3. 状态管理：loading、error、success 三种状态
4. 错误处理：网络错误提示、字段校验错误展示
5. 使用 TypeScript，接口类型从 api-docs/feedback-api.md 推断

产物清单：
- components/FeedbackForm.tsx
- components/FeedbackList.tsx`,
      },
    },
  },

  stage3: {
    name: '测试与审查',
    dependsOn: ['stage2'],
    agents: {
      test: {
        prompt: `基于 src/routes/feedback.ts 和 components/ 下的实现，编写 Jest 测试：
1. API 测试：POST /api/feedbacks 正常提交、缺少字段返回 400、PATCH 无效 status 返回 400
2. 组件测试：FeedbackForm 表单提交、FeedbackList 列表渲染和空状态
3. 覆盖正常路径 + 边界情况

产物清单：
- tests/feedback.api.test.ts
- tests/feedback.components.test.ts`,
      },
      review: {
        prompt: `审查完整实现（src/ 和 components/ 下所有文件）：
1. API 设计是否 RESTful、状态码是否正确
2. 前端组件是否覆盖 loading/error/empty 状态
3. TypeScript 类型是否完整、是否存在 any
4. 错误处理是否完备
5. 输出审查报告到 review-report.md，按严重程度分级`,
      },
    },
  },
}

export interface Feedback {
  id: string
  content: string
  email: string
  status: 'pending' | 'reviewed' | 'closed'
  createdAt: string
}

export type CreateFeedbackInput = Pick<Feedback, 'content' | 'email'>
export type UpdateStatusInput = Pick<Feedback, 'status'>

import { Router } from 'express'
import type { Feedback, CreateFeedbackInput, UpdateStatusInput } from '../models/feedback'

const router = Router()
const feedbacks: Feedback[] = []

// POST /api/feedbacks — 提交反馈
router.post('/', (req, res) => {
  const { content, email } = req.body as CreateFeedbackInput
  if (!content || !email) {
    return res.status(400).json({ error: 'content 和 email 为必填字段' })
  }
  const feedback: Feedback = {
    id: crypto.randomUUID(),
    content,
    email,
    status: 'pending',
    createdAt: new Date().toISOString(),
  }
  feedbacks.push(feedback)
  res.status(201).json(feedback)
})

// GET /api/feedbacks — 获取反馈列表
router.get('/', (_req, res) => {
  res.json(feedbacks)
})

// PATCH /api/feedbacks/:id/status — 更新反馈状态
router.patch('/:id/status', (req, res) => {
  const { id } = req.params
  const { status } = req.body as UpdateStatusInput
  const validStatuses = ['pending', 'reviewed', 'closed']
  if (!validStatuses.includes(status)) {
    return res.status(400).json({ error: '无效的 status 值' })
  }
  const feedback = feedbacks.find((f) => f.id === id)
  if (!feedback) {
    return res.status(404).json({ error: '反馈不存在' })
  }
  feedback.status = status
  res.json(feedback)
})

export default router

import { useState, type FormEvent } from 'react'

interface FeedbackInput {
  content: string
  email: string
}

export function FeedbackForm() {
  const [form, setForm] = useState<FeedbackInput>({ content: '', email: '' })
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle')
  const [errorMsg, setErrorMsg] = useState('')

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault()
    setStatus('loading')
    try {
      const res = await fetch('/api/feedbacks', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      })
      if (!res.ok) {
        const { error } = await res.json()
        throw new Error(error)
      }
      setStatus('success')
      setForm({ content: '', email: '' })
    } catch (err) {
      setStatus('error')
      setErrorMsg(err instanceof Error ? err.message : '提交失败')
    }
  }

  // render: textarea + email input + submit button, 三种状态视图
}

import { useEffect, useState } from 'react'
import type { Feedback } from '../src/models/feedback'

export function FeedbackList() {
  const [feedbacks, setFeedbacks] = useState<Feedback[]>([])
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState('')

  useEffect(() => {
    fetch('/api/feedbacks')
      .then((res) => {
        if (!res.ok) throw new Error('加载失败')
        return res.json()
      })
      .then(setFeedbacks)
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false))
  }, [])

  if (loading) return <p>加载中...</p>
  if (error) return <p className="error">{error}</p>
  if (feedbacks.length === 0) return <p>暂无反馈</p>

  // render: feedback list with status badges
}

import request from 'supertest'
import app from '../src/app'

describe('POST /api/feedbacks', () => {
  it('正常提交应返回 201 和反馈对象', async () => {
    const res = await request(app)
      .post('/api/feedbacks')
      .send({ content: '界面很好用', email: 'user@test.com' })
    expect(res.status).toBe(201)
    expect(res.body).toHaveProperty('id')
    expect(res.body.status).toBe('pending')
  })

  it('缺少 content 应返回 400', async () => {
    const res = await request(app)
      .post('/api/feedbacks')
      .send({ email: 'user@test.com' })
    expect(res.status).toBe(400)
    expect(res.body.error).toContain('content')
  })

  it('缺少 email 应返回 400', async () => {
    const res = await request(app)
      .post('/api/feedbacks')
      .send({ content: '界面很好用' })
    expect(res.status).toBe(400)
  })
})

describe('PATCH /api/feedbacks/:id/status', () => {
  it('无效 status 值应返回 400', async () => {
    const res = await request(app)
      .patch('/api/feedbacks/nonexistent/status')
      .send({ status: 'deleted' })
    expect(res.status).toBe(400)
  })
})