feat(product): 实现产品需求管理模块（后端 + 前端）

后端：Product Module（CRUD）、Requirement Module（CRUD + 状态机流转）、PrismaService
前端：产品列表页、产品详情页（含需求池 Tab）、Zustand Store、API 封装

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

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

@@ -0,0 +1,133 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { RequirementStatus } from '@ftb/shared';
+import { useProductStore } from '@/stores/useProductStore';
+import { useRequirementStore } from '@/stores/useRequirementStore';
+import { RequirementTable } from '@/components/product/RequirementTable';
+import { RequirementForm } from '@/components/product/RequirementForm';
+import { ProductForm } from '@/components/product/ProductForm';
+
+export default function ProductDetailPage() {
+  const params = useParams();
+  const router = useRouter();
+  const productId = params.id as string;
+
+  const { currentProduct, fetchProduct, updateProduct, deleteProduct } = useProductStore();
+  const { requirements, statusFilter, fetchRequirements, createRequirement, updateRequirement, updateStatus, deleteRequirement, setStatusFilter } = useRequirementStore();
+
+  const [showReqForm, setShowReqForm] = useState(false);
+  const [editingReq, setEditingReq] = useState<any>(null);
+  const [editingProduct, setEditingProduct] = useState(false);
+  const [activeTab, setActiveTab] = useState<'requirements' | 'projects' | 'versions'>('requirements');
+
+  useEffect(() => {
+    fetchProduct(productId);
+    fetchRequirements(productId);
+  }, [productId, fetchProduct, fetchRequirements]);
+
+  const handleFilterChange = (status: RequirementStatus | null) => {
+    setStatusFilter(status);
+    fetchRequirements(productId, status || undefined);
+  };
+
+  const handleCreateReq = async (data: { title: string; description: string; priority: number }) => {
+    await createRequirement(productId, { ...data, creatorId: 'temp-user-id' });
+    setShowReqForm(false);
+  };
+
+  const handleUpdateReq = async (data: { title: string; description: string; priority: number }) => {
+    if (editingReq) {
+      await updateRequirement(productId, editingReq.id, data);
+      setEditingReq(null);
+    }
+  };
+
+  const handleDeleteProduct = async () => {
+    if (confirm('确定要删除此产品吗？')) {
+      await deleteProduct(productId);
+      router.push('/products');
+    }
+  };
+
+  if (!currentProduct) {
+    return <div className="py-12 text-center text-gray-400">加载中...</div>;
+  }
+
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-8">
+      <div className="mb-2 text-sm text-gray-500">
+        <span className="cursor-pointer hover:text-blue-600" onClick={() => router.push('/products')}>产品列表</span>
+        <span className="mx-2">/</span>
+        <span>{currentProduct.name}</span>
+      </div>
+
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold text-gray-900">{currentProduct.name}</h1>
+        <div className="flex gap-2">
+          <button onClick={() => setEditingProduct(true)} className="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50">编辑</button>
+          <button onClick={handleDeleteProduct} className="rounded-md border border-red-300 px-3 py-1.5 text-sm text-red-600 hover:bg-red-50">删除</button>
+        </div>
+      </div>
+
+      {currentProduct.description && (
+        <p className="mb-6 text-gray-600">{currentProduct.description}</p>
+      )}
+
+      {editingProduct && (
+        <div className="mb-6 rounded-lg border border-gray-200 p-6">
+          <ProductForm
+            initialData={{ name: currentProduct.name, description: currentProduct.description }}
+            onSubmit={async (data) => { await updateProduct(productId, data); setEditingProduct(false); await fetchProduct(productId); }}
+            onCancel={() => setEditingProduct(false)}
+          />
+        </div>
+      )}
+
+      <div className="mb-4 flex gap-4 border-b">
+        {(['requirements', 'projects', 'versions'] as const).map((tab) => (
+          <button
+            key={tab}
+            onClick={() => setActiveTab(tab)}
+            className={`pb-2 text-sm ${activeTab === tab ? 'border-b-2 border-blue-600 font-medium text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
+          >
+            {{ requirements: '需求池', projects: '项目', versions: '版本' }[tab]}
+          </button>
+        ))}
+      </div>
+
+      {activeTab === 'requirements' && (
+        <>
+          {(showReqForm || editingReq) && (
+            <div className="mb-4 rounded-lg border border-gray-200 p-6">
+              <h3 className="mb-4 text-lg font-medium">{editingReq ? '编辑需求' : '新建需求'}</h3>
+              <RequirementForm
+                initialData={editingReq || undefined}
+                onSubmit={editingReq ? handleUpdateReq : handleCreateReq}
+                onCancel={() => { setShowReqForm(false); setEditingReq(null); }}
+              />
+            </div>
+          )}
+          <RequirementTable
+            requirements={requirements as any}
+            statusFilter={statusFilter}
+            onFilterChange={handleFilterChange}
+            onEdit={(req) => setEditingReq(req)}
+            onStatusChange={(id, status) => updateStatus(productId, id, status)}
+            onDelete={(id) => deleteRequirement(productId, id)}
+            onCreate={() => setShowReqForm(true)}
+          />
+        </>
+      )}
+
+      {activeTab === 'projects' && (
+        <div className="py-12 text-center text-gray-400">项目管理（后续迭代实现）</div>
+      )}
+
+      {activeTab === 'versions' && (
+        <div className="py-12 text-center text-gray-400">版本管理（后续迭代实现）</div>
+      )}
+    </div>
+  );
+}