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>
This commit is contained in:
Script Generator
133
apps/web/app/products/[id]/page.tsx
Normal file
133
apps/web/app/products/[id]/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
59
apps/web/app/products/page.tsx
Normal file
59
apps/web/app/products/page.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useProductStore } from '@/stores/useProductStore';
|
||||
import { ProductCard } from '@/components/product/ProductCard';
|
||||
import { ProductForm } from '@/components/product/ProductForm';
|
||||
|
||||
export default function ProductsPage() {
|
||||
const router = useRouter();
|
||||
const { products, loading, fetchProducts, createProduct } = useProductStore();
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProducts();
|
||||
}, [fetchProducts]);
|
||||
|
||||
const handleCreate = async (data: { name: string; description: string }) => {
|
||||
await createProduct(data);
|
||||
setShowForm(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-6xl px-6 py-8">
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<h1 className="text-2xl font-bold text-gray-900">产品列表</h1>
|
||||
<button
|
||||
onClick={() => setShowForm(true)}
|
||||
className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
|
||||
>
|
||||
新建产品
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{showForm && (
|
||||
<div className="mb-6 rounded-lg border border-gray-200 p-6">
|
||||
<h2 className="mb-4 text-lg font-medium">新建产品</h2>
|
||||
<ProductForm onSubmit={handleCreate} onCancel={() => setShowForm(false)} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{loading ? (
|
||||
<div className="py-12 text-center text-gray-400">加载中...</div>
|
||||
) : products.length === 0 ? (
|
||||
<div className="py-12 text-center text-gray-400">暂无产品，点击上方按钮创建</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{products.map((product) => (
|
||||
<ProductCard
|
||||
key={product.id}
|
||||
product={product}
|
||||
onClick={(id) => router.push(`/products/${id}`)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user