如何开发研发项目管理中的缺陷管理板块？（附架构图+流程图+代码参考）

graph LR
  UI[前端 - Web/移动/IM] -->|REST/GraphQL| API[API 网关(Express/Nest)]
  API --> Service[(缺陷服务)]
  Service --> DB[(MongoDB / Postgres)]
  Service --> Auth[(用户/权限)]
  Service --> Notify[(通知: 邮件/钉钉/企业微信/Slack)]
  Service --> Queue[(任务队列: Bull/Redis)]
  Service --> Search[(ElasticSearch)]
  Service --> Analytics[(报表/仪表盘)]
  subgraph DevOps
    CI[CI/CD] --> K8s[容器/集群]
  end
  API --> CI

// collection: defects
{
  "_id": "def_001",
  "title": "订单确认接口在高并发下返回 500",
  "description": "复现步骤：1. ... 2. ...；期望：返回 200；实际：500；堆栈信息在附件",
  "severity": "P0", // P0/P1/P2...
  "priority": "High",
  "status": "new",
  "environment": "prod",
  "version": "v2.3.1",
  "reporter": "user_1001",
  "assignee": "user_2002",
  "module": "order",
  "attachments":[{"name":"stack.log","url":"..."}],
  "reproductionSteps":"...",
  "impact":"部分用户无法下单",
  "links": { "pr": "http...", "build":"#345" },
  "history":[
    {"by":"user_1001","action":"created","at":"2025-08-01T10:00:00Z"},
    {"by":"user_2002","action":"assign","at":"2025-08-01T12:00:00Z"}
  ],
  "createdAt":"2025-08-01T10:00:00Z",
  "updatedAt":"2025-08-02T09:00:00Z"
}

// models/Defect.js
const mongoose = require('mongoose');
const { Schema } = mongoose;
const HistorySchema = new Schema({
  by: { type: Schema.Types.ObjectId, ref: 'User' },
  action: String,
  detail: Schema.Types.Mixed,
  at: { type: Date, default: Date.now }
}, { _id: false });
const DefectSchema = new Schema({
  title: { type: String, required: true },
  description: String,
  severity: { type: String, enum: ['P0','P1','P2','P3'], default: 'P2' },
  priority: { type: String, default: 'Medium' },
  status: { type: String, default: 'new' },
  environment: String,
  version: String,
  reporter: { type: Schema.Types.ObjectId, ref: 'User' },
  assignee: { type: Schema.Types.ObjectId, ref: 'User' },
  module: String,
  reproductionSteps: String,
  attachments: [{ name: String, url: String }],
  links: { pr: String, build: String },
  history: [HistorySchema]
}, { timestamps: true });
module.exports = mongoose.model('Defect', DefectSchema);

// routes/defects.js
const express = require('express');
const router = express.Router();
const Defect = require('../models/Defect');
const notify = require('../services/notify');
router.post('/', async (req, res) => {
  const userId = req.user.id;
  const payload = req.body;
  payload.reporter = userId;
  const defect = new Defect(payload);
  defect.history.push({ by: userId, action: 'created', detail: { payload }});
  await defect.save();
  // 通知 triage 小组或默认接收人
  notify.queue({
    toRole: 'triage',
    subject: `新缺陷：${defect.title}`,
    body: `由 ${req.user.name} 报告，优先级 ${defect.severity}`
  });
  res.status(201).send({ success:true, data: defect });
});

router.post('/:id/change-status', async (req, res) => {
  const { id } = req.params;
  const { toStatus, comment } = req.body;
  const userId = req.user.id;
  const defect = await Defect.findById(id);
  if (!defect) return res.status(404).send({ error: 'not found' });
  const fromStatus = defect.status;
  // 简单校验：例如不能从 closed 到 in_progress（除非 reopen）
  if (fromStatus === 'closed' && toStatus !== 'reopened') {
    return res.status(400).send({ error: 'illegal transition' });
  }
  defect.status = toStatus;
  defect.history.push({ by: userId, action: 'status_change', detail: { from: fromStatus, to: toStatus, comment }});
  await defect.save();
  // 异步通知
  notify.queue({
    to: [defect.assignee, defect.reporter],
    subject: `缺陷状态变更：${defect.title}`,
    body: `${req.user.name} 将 ${fromStatus} -> ${toStatus}，备注：${comment || '-' }`
  });
  res.send({ success:true, data: defect });
});

router.post('/:id/verify', async (req, res) => {
  const { id } = req.params;
  const { passed, comment } = req.body;
  const userId = req.user.id;
  const defect = await Defect.findById(id);
  if (!defect) return res.status(404).send({ error: 'not found' });
  defect.history.push({ by: userId, action: 'verify', detail: { passed, comment }});
  defect.status = passed ? 'closed' : 'reopened';
  await defect.save();
  // notify
  notify.queue({
    to: [defect.assignee, defect.reporter],
    subject: `缺陷验证：${defect.title} => ${passed ? '通过' : '未通过'}`,
    body: comment || '-'
  });
  res.send({ success:true, data: defect });
});

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import api from './api';
function DefectBoard({ columns, cards, setColumns }) {
  const onDragEnd = async (result) => {
    const { destination, source, draggableId } = result;
    if (!destination) return;
    if (destination.droppableId === source.droppableId && destination.index === source.index) return;
    const start = columns[source.droppableId];
    const end = columns[destination.droppableId];
    const newStartCards = Array.from(start.cardIds);
    newStartCards.splice(source.index, 1);
    const newEndCards = Array.from(end.cardIds);
    newEndCards.splice(destination.index, 0, draggableId);
    const newColumns = { ...columns, [start.id]: { ...start, cardIds: newStartCards }, [end.id]: { ...end, cardIds: newEndCards } };
    setColumns(newColumns);
    try {
      await api.post(`/defects/${draggableId}/change-status`, { toStatus: end.id, comment: `移动 ${start.title} -> ${end.title}` });
    } catch (err) {
      console.error(err);
      // 简单回滚或重新拉取
    }
  };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div style={{ display:'flex', gap:16 }}>
        {Object.values(columns).map(col => (
          <Droppable droppableId={col.id} key={col.id}>
            {(provided)=>(
              <div ref={provided.innerRef} {...provided.droppableProps} style={{ width:320, minHeight:600, padding:8, border:'1px solid #eaeaea' }}>
                <h4>{col.title}</h4>
                {col.cardIds.map((cardId, idx) => {
                  const card = cards[cardId];
                  return (
                    <Draggable draggableId={cardId} index={idx} key={cardId}>
                      {(prov)=>(
                        <div ref={prov.innerRef} {...prov.draggableProps} {...prov.dragHandleProps} style={{ padding:10, marginBottom:8, background:'#fff', boxShadow:'0 1px 3px rgba(0,0,0,0.05)', ...prov.draggableProps.style }}>
                          <div style={{ fontWeight:600 }}>{card.title}</div>
                          <div style={{ fontSize:12 }}>{card.severity} · {card.module} · {card.assigneeName}</div>
                        </div>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ))}
      </div>
    </DragDropContext>
  );
}
export default DefectBoard;