feat: 计划转交功能 + 关联需求增强（描述/变更/类型/日期）

一、调研/产品方案/UI设计 - 转交功能：
- 未开始/进行中状态可转交给其他参与人员
- 转交按钮打开内联选择器，从 version.members 选人
- 确认后更新 plan.owner

二、关联需求表格增强：
- 描述列：超出宽度省略号，hover 显示完整 title 属性
- 需求类型列：原始需求（灰色）/ 变更需求（橙色）
- 变更原因列：显示变更原因标签
- 添加日期列：显示 createdAt

三、需求变更功能：
- 新增"需求变更"按钮（橙色边框）
- 变更表单：变更人员（从参与人员选）、变更原因（6种）、
  需求概述、需求详细
- 变更原因选项：需求理解偏差导致返工、反馈导致返工、
  实现难度超预期、上游交付延误、范围蔓延、其他
- 创建后自动关联到当前版本，标记为变更需求

四、数据模型扩展（lib/requirement.ts）：
- 新增 reqType: 'original' | 'change'
- 新增 changeReason: ChangeReason
- 新增 changeBy: string
- 导出 CHANGE_REASON_LABEL 常量

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/app/versions/[id]/page.tsx

@@ -52,7 +52,7 @@ export default function VersionDetailPage() {
   const router = useRouter();
   const versionId = params.id as string;
   const { overview, fetchOverview, updateVersion, deleteVersion } = useProductStore();
-  const { requirements, fetchRequirements, updateRequirement } = useRequirementStore();
+  const { requirements, fetchRequirements, updateRequirement, createRequirement } = useRequirementStore();
   const { records, fetchRecords } = useOvertimeStore();
   const { plans, fetchPlans, createPlan, updatePlan, completePlan, deletePlan } = useVersionPlanStore();
   const { tasks: devTasks, fetchTasks: fetchDevTasks, deleteTask: deleteDevTask } = useDevTaskStore();
@@ -751,11 +751,30 @@ export default function VersionDetailPage() {
             projectId={version.projectId}
             requirements={requirements}
             devTasks={devTasks}
+            versionMembers={version.members ?? []}
             currentUserName={user?.name ?? ''}
             onLink={(ids, addedBy) => {
               ids.forEach((id) => updateRequirement(id, { versionId: version.id, addedToVersionBy: addedBy }));
             }}
             onUnlink={(id) => updateRequirement(id, { versionId: undefined, addedToVersionBy: undefined })}
+            onCreateChange={(data) => {
+              createRequirement({
+                ...data,
+                productId: version.productId,
+                projectId: version.projectId,
+                versionId: version.id,
+                sourceType: 'internal',
+                sourceTarget: '',
+                platforms: [],
+                typeId: '',
+                status: 'adopted',
+                priority: 'P2',
+                effort: 'M',
+                creator: user?.name ?? '',
+                addedToVersionBy: user?.name ?? '',
+                reqType: 'change',
+              } as any);
+            }}
           />
         ) : (activeTab === 'research' || activeTab === 'product' || activeTab === 'ui') ? (
           (() => {
@@ -769,6 +788,7 @@ export default function VersionDetailPage() {
                 versionDeadline={version.expectedReleaseDate ?? undefined}
                 currentUserName={user?.name ?? ''}
                 planType={pt}
+                versionMembers={version.members ?? []}
                 linkedRequirements={pt !== 'research' ? linkedReqs : undefined}
                 onCreate={(data) => {
                   createPlan(data);

apps/web/components/version/PlanTab.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Plus, Pencil, Trash2, X, Check, ExternalLink, FileUp, Link2, Play } from 'lucide-react';
+import { Plus, Pencil, Trash2, X, Check, ExternalLink, FileUp, Link2, Play, ArrowRightLeft } from 'lucide-react';
 import type { VersionPlan, PlanTask } from '@/lib/version-plan';
 import { calcPlanDuration, formatDuration, calcTotalDuration, calcPlanProgress, calcLinkedReqProgress } from '@/lib/version-plan';
 
@@ -11,6 +11,7 @@ interface Props {
   versionDeadline?: string;
   currentUserName: string;
   planType: 'research' | 'product' | 'ui';
+  versionMembers: { role: string; name: string }[];
   linkedRequirements?: { id: string; title: string; code: string; productOwner?: string }[];
   onCreate: (data: Omit<VersionPlan, 'id' | 'createdAt'>) => void;
   onUpdate: (id: string, data: Partial<VersionPlan>) => void;
@@ -26,10 +27,12 @@ const STATUS_STYLE = {
 };
 const STATUS_LABEL = { pending: '未开始', in_progress: '进行中', completed: '已完成' };
 
-export function PlanTab({ plans, versionId, versionDeadline, currentUserName, planType, linkedRequirements, onCreate, onUpdate, onComplete, onDelete }: Props) {
+export function PlanTab({ plans, versionId, versionDeadline, currentUserName, planType, versionMembers, linkedRequirements, onCreate, onUpdate, onComplete, onDelete }: Props) {
   const [showCreateModal, setShowCreateModal] = useState(false);
   const [editingPlan, setEditingPlan] = useState<VersionPlan | null>(null);
   const [completingPlan, setCompletingPlan] = useState<VersionPlan | null>(null);
+  const [transferPlanId, setTransferPlanId] = useState<string | null>(null);
+  const [transferTo, setTransferTo] = useState('');
 
   const typePlans = plans.filter((p) => p.versionId === versionId && p.type === planType);
   const totalDuration = calcTotalDuration(typePlans);
@@ -189,6 +192,9 @@ export function PlanTab({ plans, versionId, versionDeadline, currentUserName, pl
                     )}
                     {plan.status !== 'completed' && (
                       <>
+                        <button onClick={() => setTransferPlanId(plan.id)} className="h-7 w-7 flex items-center justify-center rounded-md text-blue-500 hover:bg-blue-50" title="转交">
+                          <ArrowRightLeft className="h-3.5 w-3.5" />
+                        </button>
                         <button onClick={() => setEditingPlan(plan)} className="h-7 w-7 flex items-center justify-center rounded-md text-[var(--ink-muted)] hover:bg-[var(--bg-subtle)]" title="编辑">
                           <Pencil className="h-3.5 w-3.5" />
                         </button>
@@ -199,6 +205,17 @@ export function PlanTab({ plans, versionId, versionDeadline, currentUserName, pl
                     )}
                   </div>
                 </div>
+                {transferPlanId === plan.id && (
+                  <div className="mt-3 pt-3 border-t border-[var(--line)] flex items-center gap-2">
+                    <span className="text-[11px] text-[var(--ink-muted)]">转交给：</span>
+                    <select value={transferTo} onChange={(e) => setTransferTo(e.target.value)} className="h-7 flex-1 rounded-lg border border-[var(--line)] px-2 text-[12px] focus:border-[var(--accent)] focus:outline-none">
+                      <option value="">选择参与人员</option>
+                      {versionMembers.filter((m) => m.name !== plan.owner).map((m) => <option key={`${m.role}-${m.name}`} value={m.name}>{m.name}</option>)}
+                    </select>
+                    <button onClick={() => { if (transferTo) { onUpdate(plan.id, { owner: transferTo }); setTransferPlanId(null); setTransferTo(''); } }} disabled={!transferTo} className="h-7 px-2.5 rounded-lg text-[11px] font-medium bg-blue-500 text-white disabled:opacity-50">确认</button>
+                    <button onClick={() => { setTransferPlanId(null); setTransferTo(''); }} className="h-7 px-2 text-[11px] text-[var(--ink-muted)]">取消</button>
+                  </div>
+                )}
               </div>
             );
           })}

apps/web/components/version/VersionRequirementsTab.tsx

@@ -2,9 +2,9 @@
 
 import { useState } from 'react';
 import { Plus, X, Search } from 'lucide-react';
-import type { Requirement } from '@/lib/requirement';
+import type { Requirement, ChangeReason } from '@/lib/requirement';
 import type { DevTask } from '@/lib/dev-task';
-import { REQ_STATUS_LABEL, REQ_STATUS_COLOR } from '@/lib/requirement';
+import { REQ_STATUS_LABEL, REQ_STATUS_COLOR, CHANGE_REASON_LABEL } from '@/lib/requirement';
 import { deriveReqDevStatus, canEditRequirement, REQ_DEV_STATUS_LABEL, REQ_DEV_STATUS_COLOR } from '@/lib/linkage-engine';
 
 interface Props {
@@ -12,13 +12,16 @@ interface Props {
   projectId: string;
   requirements: Requirement[];
   devTasks: DevTask[];
+  versionMembers: { role: string; name: string }[];
   onLink: (reqIds: string[], addedBy: string) => void;
   onUnlink: (reqId: string) => void;
+  onCreateChange: (data: Partial<Requirement>) => void;
   currentUserName: string;
 }
 
-export function VersionRequirementsTab({ versionId, projectId, requirements, devTasks, onLink, onUnlink, currentUserName }: Props) {
+export function VersionRequirementsTab({ versionId, projectId, requirements, devTasks, versionMembers, onLink, onUnlink, onCreateChange, currentUserName }: Props) {
   const [showAddModal, setShowAddModal] = useState(false);
+  const [showChangeModal, setShowChangeModal] = useState(false);
   const linkedReqs = requirements.filter((r) => r.versionId === versionId);
   const availableReqs = requirements.filter((r) => r.projectId === projectId && !r.versionId && r.status === 'adopted');
 
@@ -26,11 +29,17 @@ export function VersionRequirementsTab({ versionId, projectId, requirements, dev
     <div className="space-y-4">
       <div className="flex items-center justify-between">
         <span className="text-[12px] text-[var(--ink-muted)]">{linkedReqs.length} 条关联需求</span>
+        <div className="flex items-center gap-2">
+          <button onClick={() => setShowChangeModal(true)} className="flex h-8 items-center gap-1.5 rounded-lg border border-orange-300 px-3 text-[13px] font-medium text-orange-600 hover:bg-orange-50 transition-colors">
+            <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+            需求变更
+          </button>
           <button onClick={() => setShowAddModal(true)} className="flex h-8 items-center gap-1.5 rounded-lg bg-[var(--accent)] px-3 text-[13px] font-medium text-white shadow-[var(--shadow-sm)] hover:bg-[var(--accent-hover)] transition-colors">
             <Plus className="h-3.5 w-3.5" strokeWidth={2} />
             添加需求
           </button>
         </div>
+      </div>
 
       {linkedReqs.length === 0 ? (
         <div className="rounded-xl border border-[var(--line)] bg-[var(--bg-card)] p-12 text-center text-[13px] text-[var(--ink-muted)]">
@@ -43,9 +52,13 @@ export function VersionRequirementsTab({ versionId, projectId, requirements, dev
               <tr className="border-b border-[var(--line)]">
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">编号</th>
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求概述</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">描述</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">需求类型</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">变更原因</th>
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">状态</th>
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">开发状态</th>
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">添加人</th>
+                <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)]">添加日期</th>
                 <th className="px-4 py-2.5 text-[11px] font-medium uppercase tracking-wide text-[var(--ink-muted)] text-right">操作</th>
               </tr>
             </thead>
@@ -57,6 +70,17 @@ export function VersionRequirementsTab({ versionId, projectId, requirements, dev
                   <tr key={req.id} className="border-b border-[var(--line-soft)] last:border-0 hover:bg-[var(--bg-subtle)] transition-colors">
                     <td className="px-4 py-3 font-mono text-[12px] text-[var(--ink-muted)]">{req.code}</td>
                     <td className="px-4 py-3 font-medium text-[var(--ink)]">{req.title}</td>
+                    <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)] max-w-[180px]">
+                      <span className="block truncate" title={req.description || ''}>{req.description || '-'}</span>
+                    </td>
+                    <td className="px-4 py-3">
+                      <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-medium ${req.reqType === 'change' ? 'bg-orange-50 text-orange-600' : 'bg-zinc-100 text-zinc-600'}`}>
+                        {req.reqType === 'change' ? '变更需求' : '原始需求'}
+                      </span>
+                    </td>
+                    <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">
+                      {req.changeReason ? CHANGE_REASON_LABEL[req.changeReason] : '-'}
+                    </td>
                     <td className="px-4 py-3">
                       <span className={`inline-flex items-center rounded-md px-2 py-0.5 text-[10px] font-medium border ${REQ_STATUS_COLOR[req.status]}`}>
                         {REQ_STATUS_LABEL[req.status]}
@@ -68,6 +92,7 @@ export function VersionRequirementsTab({ versionId, projectId, requirements, dev
                       </span>
                     </td>
                     <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">{req.addedToVersionBy || '系统添加'}</td>
+                    <td className="px-4 py-3 text-[12px] text-[var(--ink-soft)]">{req.createdAt?.slice(0, 10) || '-'}</td>
                     <td className="px-4 py-3 text-right">
                       {isDeveloping ? (
                         <span className="text-[11px] text-[var(--ink-muted)]">开发中</span>
@@ -90,6 +115,78 @@ export function VersionRequirementsTab({ versionId, projectId, requirements, dev
           onConfirm={(ids) => { onLink(ids, currentUserName); setShowAddModal(false); }}
         />
       )}
+
+      {showChangeModal && (
+        <ChangeRequirementModal
+          versionMembers={versionMembers}
+          currentUserName={currentUserName}
+          onClose={() => setShowChangeModal(false)}
+          onSubmit={(data) => { onCreateChange(data); setShowChangeModal(false); }}
+        />
+      )}
+    </div>
+  );
+}
+
+function ChangeRequirementModal({ versionMembers, currentUserName, onClose, onSubmit }: {
+  versionMembers: { role: string; name: string }[];
+  currentUserName: string;
+  onClose: () => void;
+  onSubmit: (data: Partial<Requirement>) => void;
+}) {
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [changeBy, setChangeBy] = useState(currentUserName);
+  const [changeReason, setChangeReason] = useState<ChangeReason | ''>('');
+
+  const handleSubmit = () => {
+    if (!title.trim() || !changeReason || !changeBy) return;
+    onSubmit({
+      title: title.trim(),
+      description: description.trim(),
+      changeBy,
+      changeReason: changeReason as ChangeReason,
+      reqType: 'change',
+    });
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40" onClick={onClose}>
+      <div className="w-full max-w-md rounded-2xl bg-[var(--bg-card)] border border-[var(--line)] p-5 shadow-[var(--shadow-md)]" onClick={(e) => e.stopPropagation()}>
+        <div className="flex items-center justify-between mb-4">
+          <h3 className="text-[13px] font-semibold text-[var(--ink)]">需求变更</h3>
+          <button onClick={onClose} className="p-1 rounded hover:bg-[var(--bg-subtle)] text-[var(--ink-muted)]"><X className="h-4 w-4" /></button>
+        </div>
+        <div className="space-y-3">
+          <div>
+            <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">变更人员 <span className="text-red-500">*</span></label>
+            <select value={changeBy} onChange={(e) => setChangeBy(e.target.value)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+              {versionMembers.map((m) => <option key={`${m.role}-${m.name}`} value={m.name}>{m.name}</option>)}
+            </select>
+          </div>
+          <div>
+            <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">变更原因 <span className="text-red-500">*</span></label>
+            <select value={changeReason} onChange={(e) => setChangeReason(e.target.value as ChangeReason)} className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none">
+              <option value="">请选择变更原因</option>
+              {Object.entries(CHANGE_REASON_LABEL).map(([key, label]) => (
+                <option key={key} value={key}>{label}</option>
+              ))}
+            </select>
+          </div>
+          <div>
+            <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">需求概述 <span className="text-red-500">*</span></label>
+            <input value={title} onChange={(e) => setTitle(e.target.value)} placeholder="变更需求标题" className="h-9 w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 text-[13px] focus:border-[var(--accent)] focus:outline-none" />
+          </div>
+          <div>
+            <label className="text-[12px] font-medium text-[var(--ink-soft)] mb-1 block">需求详细</label>
+            <textarea value={description} onChange={(e) => setDescription(e.target.value)} rows={3} placeholder="变更需求详细描述" className="w-full rounded-lg border border-[var(--line)] bg-[var(--bg-card)] px-3 py-2 text-[13px] focus:border-[var(--accent)] focus:outline-none resize-none" />
+          </div>
+          <div className="flex justify-end gap-2 pt-2">
+            <button onClick={onClose} className="h-8 px-3 rounded-lg text-[12px] font-medium border border-[var(--line)] text-[var(--ink-soft)] hover:bg-[var(--bg-subtle)]">取消</button>
+            <button onClick={handleSubmit} disabled={!title.trim() || !changeReason} className="h-8 px-4 rounded-lg text-[12px] font-medium bg-orange-500 text-white hover:bg-orange-600 disabled:opacity-50">确认变更</button>
+          </div>
+        </div>
+      </div>
     </div>
   );
 }

apps/web/lib/requirement.ts

@@ -38,8 +38,22 @@ export interface Requirement {
   createdAt: string;
   parentId?: string;
   addedToVersionBy?: string;
+  reqType?: 'original' | 'change';
+  changeReason?: ChangeReason;
+  changeBy?: string;
 }
 
+export type ChangeReason = 'misunderstanding' | 'feedback_rework' | 'difficulty_exceeded' | 'upstream_delay' | 'scope_creep' | 'other';
+
+export const CHANGE_REASON_LABEL: Record<ChangeReason, string> = {
+  misunderstanding: '需求理解偏差导致返工',
+  feedback_rework: '反馈导致返工',
+  difficulty_exceeded: '实现难度超预期',
+  upstream_delay: '上游交付延误',
+  scope_creep: '范围蔓延',
+  other: '其他',
+};
+
 export const SOURCE_TYPE_LABEL: Record<SourceType, string> = {
   customer: '客户',
   internal: '内部',