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

flowchart TD
  A[需求提出] --> B{是否需要评审}
  B -- 是 --> C[安排评审会议]
  C --> D{评审结果}
  D -- 通过 --> E[优先级 & 排期]
  D -- 驳回 --> F[退回发起人修改]
  B -- 否 --> E
  E --> G[创建开发任务 / 指派]
  G --> H[开发中]
  H --> I[测试]
  I --> J{测试通过？}
  J -- 否 --> H
  J -- 是 --> K[验收]
  K --> L[上线部署]
  L --> M[关闭与归档]

// collection: requirements
{
  "_id": "req_001",
  "title": "支持按仓库查看库存明细",
  "description": "...富文本...",
  "businessLine": "物流",
  "priority": "P1",
  "status": "development",
  "assignee": "user_123",
  "reporter": "user_456",
  "estimateHours": 16,
  "tags": ["库存","仓库"],
  "attachments": [
    {"name":"原型.png","url":"..."}
  ],
  "history": [
    {"by":"user_456","action":"created","at":"2025-08-01T10:00:00Z"},
    {"by":"user_123","action":"moved","from":"backlog","to":"development","at":"2025-08-05T09:00:00Z"}
  ],
  "createdAt":"2025-08-01T10:00:00Z",
  "updatedAt":"2025-08-05T09:00:00Z"
}

// models/Requirement.js
const mongoose = require('mongoose');
const { Schema } = mongoose;
const HistorySchema = new Schema({
  by: { type: Schema.Types.ObjectId, ref: 'User' },
  action: String,
  from: String,
  to: String,
  comment: String,
  at: { type: Date, default: Date.now }
}, { _id: false });
const RequirementSchema = new Schema({
  title: { type: String, required: true },
  description: String,
  businessLine: String,
  priority: { type: String, default: 'P3' },
  status: { type: String, default: 'backlog' },
  assignee: { type: Schema.Types.ObjectId, ref: 'User' },
  reporter: { type: Schema.Types.ObjectId, ref: 'User' },
  estimateHours: Number,
  tags: [String],
  attachments: [{ name: String, url: String }],
  history: [HistorySchema]
}, { timestamps: true });
module.exports = mongoose.model('Requirement', RequirementSchema);

// routes/requirements.js
const express = require('express');
const router = express.Router();
const Requirement = require('../models/Requirement');
const notify = require('../services/notify'); // 邮件/IM 服务
// 更新状态（移动看板）
router.post('/:id/change-status', async (req, res) => {
  const { id } = req.params;
  const { toStatus, comment } = req.body;
  const userId = req.user.id;
  const reqDoc = await Requirement.findById(id);
  if(!reqDoc) return res.status(404).send({error:'not found'});
  const fromStatus = reqDoc.status;
  // 简单的状态校验可以在这里或用状态机库
  reqDoc.status = toStatus;
  reqDoc.history.push({ by: userId, action: 'status_change', from: fromStatus, to: toStatus, comment });
  await reqDoc.save();
  // 异步通知（不阻塞主请求）
  notify.send({
    to: [reqDoc.assignee, reqDoc.reporter],
    subject: `需求 "${reqDoc.title}" 状态变更：${fromStatus} → ${toStatus}`,
    body: `${req.user.name} 在 ${new Date().toLocaleString()} 将状态从 ${fromStatus} 改为 ${toStatus}，备注：${comment || '-'}`
  }).catch(err => console.error('notify failed', err));
  res.send({ success:true, data: reqDoc });
});
module.exports = router;

// columns: { id: 'backlog', title: '待评估', cardIds: ['req_1','req_2'] }
// cards: { req_1: { id:'req_1', title:'...', priority:'P2', assignee:'张三' } }

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import api from './api'; // 封装的 REST 客户端
function Board({ 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 startCol = columns[source.droppableId];
    const endCol = columns[destination.droppableId];
    // 移除源
    const newStartCardIds = Array.from(startCol.cardIds);
    newStartCardIds.splice(source.index, 1);
    // 插入目标
    const newEndCardIds = Array.from(endCol.cardIds);
    newEndCardIds.splice(destination.index, 0, draggableId);
    const newColumns = {
      ...columns,
      [startCol.id]: { ...startCol, cardIds: newStartCardIds },
      [endCol.id]: { ...endCol, cardIds: newEndCardIds }
    };
    setColumns(newColumns);
    // 调用后端改变状态（乐观更新已做）
    try {
      await api.post(`/requirements/${draggableId}/change-status`, {
        toStatus: endCol.id,
        comment: `从 ${startCol.title} 移动到 ${endCol.title}`
      });
    } catch (err) {
      // 回滚或提示
      console.error(err);
      // 可重新拉取数据或回滚
    }
  };
  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <div style={{ display: 'flex', gap: '16px' }}>
        {Object.values(columns).map(col => (
          <Droppable droppableId={col.id} key={col.id}>
            {(provided) => (
              <div ref={provided.innerRef} {...provided.droppableProps} style={{ width: 300, minHeight: 500, border:'1px solid #eee', padding:8 }}>
                <h3>{col.title}</h3>
                {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:8, marginBottom:8, background:'#fff', boxShadow:'0 1px 2px rgba(0,0,0,.1)', ...prov.draggableProps.style }}>
                          <div><strong>{card.title}</strong></div>
                          <div style={{ fontSize:12 }}>{card.priority} · {card.assigneeName}</div>
                        </div>
                      )}
                    </Draggable>
                  );
                })}
                {provided.placeholder}
              </div>
            )}
          </Droppable>
        ))}
      </div>
    </DragDropContext>
  );
}
export default Board;