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/server/package.json

@@ -16,13 +16,16 @@
     "db:studio": "prisma studio"
   },
   "dependencies": {
+    "@ftb/shared": "workspace:*",
     "@nestjs/common": "^10.0.0",
     "@nestjs/core": "^10.0.0",
+    "@nestjs/mapped-types": "^2.1.1",
     "@nestjs/platform-express": "^10.0.0",
     "@prisma/client": "^5.15.0",
+    "class-transformer": "^0.5.1",
+    "class-validator": "^0.15.1",
     "reflect-metadata": "^0.2.0",
-    "rxjs": "^7.8.0",
-    "@ftb/shared": "workspace:*"
+    "rxjs": "^7.8.0"
   },
   "devDependencies": {
     "@nestjs/cli": "^10.0.0",

apps/server/src/app.module.ts

@@ -1,7 +1,10 @@
 import { Module } from '@nestjs/common';
+import { PrismaModule } from './prisma/prisma.module';
+import { ProductModule } from './modules/product/product.module';
+import { RequirementModule } from './modules/requirement/requirement.module';
 
 @Module({
-  imports: [],
+  imports: [PrismaModule, ProductModule, RequirementModule],
   controllers: [],
   providers: [],
 })

apps/server/src/modules/product/dto/create-product.dto.ts

@@ -0,0 +1,11 @@
+import { IsString, IsNotEmpty, IsOptional } from 'class-validator';
+
+export class CreateProductDto {
+  @IsString()
+  @IsNotEmpty()
+  name!: string;
+
+  @IsString()
+  @IsOptional()
+  description?: string;
+}

apps/server/src/modules/product/dto/update-product.dto.ts

@@ -0,0 +1,4 @@
+import { PartialType } from '@nestjs/mapped-types';
+import { CreateProductDto } from './create-product.dto';
+
+export class UpdateProductDto extends PartialType(CreateProductDto) {}

apps/server/src/modules/product/product.controller.ts

@@ -0,0 +1,34 @@
+import { Controller, Get, Post, Patch, Delete, Param, Body } from '@nestjs/common';
+import { ProductService } from './product.service';
+import { CreateProductDto } from './dto/create-product.dto';
+import { UpdateProductDto } from './dto/update-product.dto';
+
+@Controller('products')
+export class ProductController {
+  constructor(private readonly productService: ProductService) {}
+
+  @Post()
+  create(@Body() dto: CreateProductDto) {
+    return this.productService.create(dto);
+  }
+
+  @Get()
+  findAll() {
+    return this.productService.findAll();
+  }
+
+  @Get(':id')
+  findOne(@Param('id') id: string) {
+    return this.productService.findOne(id);
+  }
+
+  @Patch(':id')
+  update(@Param('id') id: string, @Body() dto: UpdateProductDto) {
+    return this.productService.update(id, dto);
+  }
+
+  @Delete(':id')
+  remove(@Param('id') id: string) {
+    return this.productService.remove(id);
+  }
+}

apps/server/src/modules/product/product.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { ProductController } from './product.controller';
+import { ProductService } from './product.service';
+
+@Module({
+  controllers: [ProductController],
+  providers: [ProductService],
+  exports: [ProductService],
+})
+export class ProductModule {}

apps/server/src/modules/product/product.service.ts

@@ -0,0 +1,50 @@
+import { Injectable, NotFoundException } from '@nestjs/common';
+import { PrismaService } from '../../prisma/prisma.service';
+import { CreateProductDto } from './dto/create-product.dto';
+import { UpdateProductDto } from './dto/update-product.dto';
+
+@Injectable()
+export class ProductService {
+  constructor(private prisma: PrismaService) {}
+
+  create(dto: CreateProductDto) {
+    return this.prisma.product.create({ data: dto });
+  }
+
+  findAll() {
+    return this.prisma.product.findMany({
+      orderBy: { createdAt: 'desc' },
+      include: {
+        _count: { select: { requirements: true, projects: true } },
+      },
+    });
+  }
+
+  async findOne(id: string) {
+    const product = await this.prisma.product.findUnique({
+      where: { id },
+      include: {
+        requirements: { orderBy: { createdAt: 'desc' } },
+        versions: { orderBy: { createdAt: 'desc' } },
+        _count: { select: { projects: true } },
+      },
+    });
+    if (!product) throw new NotFoundException('产品不存在');
+    return product;
+  }
+
+  async update(id: string, dto: UpdateProductDto) {
+    await this.ensureExists(id);
+    return this.prisma.product.update({ where: { id }, data: dto });
+  }
+
+  async remove(id: string) {
+    await this.ensureExists(id);
+    return this.prisma.product.delete({ where: { id } });
+  }
+
+  private async ensureExists(id: string) {
+    const exists = await this.prisma.product.findUnique({ where: { id } });
+    if (!exists) throw new NotFoundException('产品不存在');
+  }
+}

apps/server/src/modules/requirement/dto/create-requirement.dto.ts

@@ -0,0 +1,21 @@
+import { IsString, IsNotEmpty, IsOptional, IsInt, Min, Max } from 'class-validator';
+
+export class CreateRequirementDto {
+  @IsString()
+  @IsNotEmpty()
+  title!: string;
+
+  @IsString()
+  @IsOptional()
+  description?: string;
+
+  @IsInt()
+  @Min(0)
+  @Max(4)
+  @IsOptional()
+  priority?: number;
+
+  @IsString()
+  @IsNotEmpty()
+  creatorId!: string;
+}

apps/server/src/modules/requirement/dto/update-requirement-status.dto.ts

@@ -0,0 +1,7 @@
+import { IsEnum } from 'class-validator';
+import { RequirementStatus } from '@ftb/shared';
+
+export class UpdateRequirementStatusDto {
+  @IsEnum(RequirementStatus)
+  status!: RequirementStatus;
+}

apps/server/src/modules/requirement/dto/update-requirement.dto.ts

@@ -0,0 +1,9 @@
+import { PartialType } from '@nestjs/mapped-types';
+import { CreateRequirementDto } from './create-requirement.dto';
+import { IsOptional, IsString } from 'class-validator';
+
+export class UpdateRequirementDto extends PartialType(CreateRequirementDto) {
+  @IsString()
+  @IsOptional()
+  creatorId?: never;
+}

apps/server/src/modules/requirement/requirement.controller.ts

@@ -0,0 +1,60 @@
+import { Controller, Get, Post, Patch, Delete, Param, Body, Query } from '@nestjs/common';
+import { RequirementService } from './requirement.service';
+import { CreateRequirementDto } from './dto/create-requirement.dto';
+import { UpdateRequirementDto } from './dto/update-requirement.dto';
+import { UpdateRequirementStatusDto } from './dto/update-requirement-status.dto';
+
+@Controller('products/:productId/requirements')
+export class RequirementController {
+  constructor(private readonly requirementService: RequirementService) {}
+
+  @Post()
+  create(
+    @Param('productId') productId: string,
+    @Body() dto: CreateRequirementDto,
+  ) {
+    return this.requirementService.create(productId, dto);
+  }
+
+  @Get()
+  findAll(
+    @Param('productId') productId: string,
+    @Query('status') status?: string,
+  ) {
+    return this.requirementService.findAll(productId, status);
+  }
+
+  @Get(':id')
+  findOne(
+    @Param('productId') productId: string,
+    @Param('id') id: string,
+  ) {
+    return this.requirementService.findOne(productId, id);
+  }
+
+  @Patch(':id')
+  update(
+    @Param('productId') productId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateRequirementDto,
+  ) {
+    return this.requirementService.update(productId, id, dto);
+  }
+
+  @Patch(':id/status')
+  updateStatus(
+    @Param('productId') productId: string,
+    @Param('id') id: string,
+    @Body() dto: UpdateRequirementStatusDto,
+  ) {
+    return this.requirementService.updateStatus(productId, id, dto.status);
+  }
+
+  @Delete(':id')
+  remove(
+    @Param('productId') productId: string,
+    @Param('id') id: string,
+  ) {
+    return this.requirementService.remove(productId, id);
+  }
+}

apps/server/src/modules/requirement/requirement.module.ts

@@ -0,0 +1,10 @@
+import { Module } from '@nestjs/common';
+import { RequirementController } from './requirement.controller';
+import { RequirementService } from './requirement.service';
+
+@Module({
+  controllers: [RequirementController],
+  providers: [RequirementService],
+  exports: [RequirementService],
+})
+export class RequirementModule {}

apps/server/src/modules/requirement/requirement.service.ts

@@ -0,0 +1,81 @@
+import { Injectable, NotFoundException, BadRequestException } from '@nestjs/common';
+import { PrismaService } from '../../prisma/prisma.service';
+import { RequirementStatus } from '@ftb/shared';
+import { CreateRequirementDto } from './dto/create-requirement.dto';
+import { UpdateRequirementDto } from './dto/update-requirement.dto';
+
+const VALID_TRANSITIONS: Record<string, string[]> = {
+  [RequirementStatus.DRAFT]: [RequirementStatus.REVIEWING],
+  [RequirementStatus.REVIEWING]: [RequirementStatus.APPROVED, RequirementStatus.REJECTED],
+  [RequirementStatus.APPROVED]: [RequirementStatus.DELIVERED],
+  [RequirementStatus.REJECTED]: [RequirementStatus.DRAFT],
+  [RequirementStatus.DELIVERED]: [],
+};
+
+@Injectable()
+export class RequirementService {
+  constructor(private prisma: PrismaService) {}
+
+  create(productId: string, dto: CreateRequirementDto) {
+    return this.prisma.requirement.create({
+      data: {
+        productId,
+        title: dto.title,
+        description: dto.description || '',
+        priority: dto.priority ?? 0,
+        creatorId: dto.creatorId,
+      },
+    });
+  }
+
+  findAll(productId: string, status?: string) {
+    return this.prisma.requirement.findMany({
+      where: {
+        productId,
+        ...(status ? { status } : {}),
+      },
+      orderBy: { createdAt: 'desc' },
+      include: { creator: { select: { id: true, name: true } } },
+    });
+  }
+
+  async findOne(productId: string, id: string) {
+    const req = await this.prisma.requirement.findFirst({
+      where: { id, productId },
+      include: { creator: { select: { id: true, name: true } } },
+    });
+    if (!req) throw new NotFoundException('需求不存在');
+    return req;
+  }
+
+  async update(productId: string, id: string, dto: UpdateRequirementDto) {
+    await this.findOne(productId, id);
+    return this.prisma.requirement.update({
+      where: { id },
+      data: {
+        ...(dto.title !== undefined && { title: dto.title }),
+        ...(dto.description !== undefined && { description: dto.description }),
+        ...(dto.priority !== undefined && { priority: dto.priority }),
+      },
+    });
+  }
+
+  async updateStatus(productId: string, id: string, newStatus: string) {
+    const req = await this.findOne(productId, id);
+    const allowed = VALID_TRANSITIONS[req.status] || [];
+    if (!allowed.includes(newStatus)) {
+      throw new BadRequestException(
+        `无法从 "${req.status}" 转换到 "${newStatus}"`,
+      );
+    }
+    return this.prisma.requirement.update({
+      where: { id },
+      data: { status: newStatus },
+    });
+  }
+
+  async remove(productId: string, id: string) {
+    await this.findOne(productId, id);
+    return this.prisma.requirement.delete({ where: { id } });
+  }
+}

apps/server/src/prisma/prisma.module.ts

@@ -0,0 +1,9 @@
+import { Global, Module } from '@nestjs/common';
+import { PrismaService } from './prisma.service';
+
+@Global()
+@Module({
+  providers: [PrismaService],
+  exports: [PrismaService],
+})
+export class PrismaModule {}

apps/server/src/prisma/prisma.service.ts

@@ -0,0 +1,13 @@
+import { Injectable, OnModuleInit, OnModuleDestroy } from '@nestjs/common';
+import { PrismaClient } from '@prisma/client';
+
+@Injectable()
+export class PrismaService extends PrismaClient implements OnModuleInit, OnModuleDestroy {
+  async onModuleInit() {
+    await this.$connect();
+  }
+
+  async onModuleDestroy() {
+    await this.$disconnect();
+  }
+}

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>
+  );
+}

apps/web/app/products/page.tsx

@@ -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>
+  );
+}

apps/web/components/product/ProductCard.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { Product } from '@ftb/shared';
+
+interface ProductWithCount extends Product {
+  _count?: { requirements: number; projects: number };
+}
+
+interface Props {
+  product: ProductWithCount;
+  onClick: (id: string) => void;
+}
+
+export function ProductCard({ product, onClick }: Props) {
+  return (
+    <div
+      className="cursor-pointer rounded-lg border border-gray-200 p-5 transition-shadow hover:shadow-md"
+      onClick={() => onClick(product.id)}
+    >
+      <h3 className="text-lg font-semibold text-gray-900">{product.name}</h3>
+      {product.description && (
+        <p className="mt-1 text-sm text-gray-500 line-clamp-2">{product.description}</p>
+      )}
+      <div className="mt-4 flex gap-4 text-xs text-gray-400">
+        <span>{product._count?.requirements ?? 0} 需求</span>
+        <span>{product._count?.projects ?? 0} 项目</span>
+      </div>
+    </div>
+  );
+}

apps/web/components/product/ProductForm.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { useState } from 'react';
+
+interface Props {
+  initialData?: { name: string; description: string };
+  onSubmit: (data: { name: string; description: string }) => void;
+  onCancel: () => void;
+}
+
+export function ProductForm({ initialData, onSubmit, onCancel }: Props) {
+  const [name, setName] = useState(initialData?.name || '');
+  const [description, setDescription] = useState(initialData?.description || '');
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+    onSubmit({ name: name.trim(), description: description.trim() });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">
+          产品名称 <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="输入产品名称"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700">描述</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={3}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="输入产品描述"
+        />
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+        >
+          取消
+        </button>
+        <button
+          type="submit"
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+        >
+          {initialData ? '保存' : '创建'}
+        </button>
+      </div>
+    </form>
+  );
+}

apps/web/components/product/RequirementForm.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from 'react';
+import { PRIORITY_LABEL } from '@/lib/constants';
+
+interface Props {
+  initialData?: { title: string; description: string; priority: number };
+  onSubmit: (data: { title: string; description: string; priority: number }) => void;
+  onCancel: () => void;
+}
+
+export function RequirementForm({ initialData, onSubmit, onCancel }: Props) {
+  const [title, setTitle] = useState(initialData?.title || '');
+  const [description, setDescription] = useState(initialData?.description || '');
+  const [priority, setPriority] = useState(initialData?.priority ?? 0);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!title.trim()) return;
+    onSubmit({ title: title.trim(), description: description.trim(), priority });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label className="block text-sm font-medium text-gray-700">
+          需求标题 <span className="text-red-500">*</span>
+        </label>
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="输入需求标题"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700">描述</label>
+        <textarea
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          rows={4}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+          placeholder="输入需求描述"
+        />
+      </div>
+      <div>
+        <label className="block text-sm font-medium text-gray-700">优先级</label>
+        <select
+          value={priority}
+          onChange={(e) => setPriority(Number(e.target.value))}
+          className="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500"
+        >
+          {Object.entries(PRIORITY_LABEL).map(([value, label]) => (
+            <option key={value} value={value}>{label}</option>
+          ))}
+        </select>
+      </div>
+      <div className="flex justify-end gap-3">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-md border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
+        >
+          取消
+        </button>
+        <button
+          type="submit"
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+        >
+          {initialData ? '保存' : '创建'}
+        </button>
+      </div>
+    </form>
+  );
+}

apps/web/components/product/RequirementStatusBadge.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import { RequirementStatus } from '@ftb/shared';
+import { REQUIREMENT_STATUS_LABEL, REQUIREMENT_STATUS_COLOR } from '@/lib/constants';
+
+interface Props {
+  status: RequirementStatus;
+}
+
+export function RequirementStatusBadge({ status }: Props) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${REQUIREMENT_STATUS_COLOR[status]}`}>
+      {REQUIREMENT_STATUS_LABEL[status]}
+    </span>
+  );
+}

apps/web/components/product/RequirementTable.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { RequirementStatus } from '@ftb/shared';
+import { RequirementStatusBadge } from './RequirementStatusBadge';
+import { PRIORITY_LABEL, REQUIREMENT_STATUS_LABEL } from '@/lib/constants';
+
+interface RequirementItem {
+  id: string;
+  title: string;
+  description: string;
+  status: RequirementStatus;
+  priority: number;
+  creator?: { id: string; name: string };
+  createdAt: string;
+}
+
+interface Props {
+  requirements: RequirementItem[];
+  statusFilter: RequirementStatus | null;
+  onFilterChange: (status: RequirementStatus | null) => void;
+  onEdit: (req: RequirementItem) => void;
+  onStatusChange: (id: string, status: RequirementStatus) => void;
+  onDelete: (id: string) => void;
+  onCreate: () => void;
+}
+
+const ALL_STATUSES = Object.values(RequirementStatus);
+
+export function RequirementTable({
+  requirements,
+  statusFilter,
+  onFilterChange,
+  onEdit,
+  onStatusChange,
+  onDelete,
+  onCreate,
+}: Props) {
+  return (
+    <div>
+      <div className="mb-4 flex items-center justify-between">
+        <div className="flex gap-2">
+          <button
+            onClick={() => onFilterChange(null)}
+            className={`rounded-full px-3 py-1 text-xs ${!statusFilter ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+          >
+            全部
+          </button>
+          {ALL_STATUSES.map((s) => (
+            <button
+              key={s}
+              onClick={() => onFilterChange(s)}
+              className={`rounded-full px-3 py-1 text-xs ${statusFilter === s ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200'}`}
+            >
+              {REQUIREMENT_STATUS_LABEL[s]}
+            </button>
+          ))}
+        </div>
+        <button
+          onClick={onCreate}
+          className="rounded-md bg-blue-600 px-4 py-2 text-sm text-white hover:bg-blue-700"
+        >
+          新建需求
+        </button>
+      </div>
+
+      {requirements.length === 0 ? (
+        <div className="py-12 text-center text-gray-400">暂无需求</div>
+      ) : (
+        <table className="w-full text-left text-sm">
+          <thead className="border-b text-xs text-gray-500">
+            <tr>
+              <th className="pb-3 font-medium">标题</th>
+              <th className="pb-3 font-medium">状态</th>
+              <th className="pb-3 font-medium">优先级</th>
+              <th className="pb-3 font-medium">创建者</th>
+              <th className="pb-3 font-medium">操作</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y">
+            {requirements.map((req) => (
+              <tr key={req.id} className="hover:bg-gray-50">
+                <td className="py-3 font-medium text-gray-900">{req.title}</td>
+                <td className="py-3">
+                  <RequirementStatusBadge status={req.status} />
+                </td>
+                <td className="py-3 text-gray-600">{PRIORITY_LABEL[req.priority] || '无'}</td>
+                <td className="py-3 text-gray-600">{req.creator?.name || '-'}</td>
+                <td className="py-3">
+                  <div className="flex gap-2">
+                    <button onClick={() => onEdit(req)} className="text-blue-600 hover:underline">编辑</button>
+                    <button onClick={() => onDelete(req.id)} className="text-red-500 hover:underline">删除</button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

apps/web/lib/api.ts

@@ -0,0 +1,22 @@
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1';
+
+async function request<T>(path: string, options?: RequestInit): Promise<T> {
+  const res = await fetch(`${API_BASE}${path}`, {
+    headers: { 'Content-Type': 'application/json', ...options?.headers },
+    ...options,
+  });
+  if (!res.ok) {
+    const error = await res.json().catch(() => ({}));
+    throw new Error(error.message || `请求失败: ${res.status}`);
+  }
+  return res.json();
+}
+
+export const api = {
+  get: <T>(path: string) => request<T>(path),
+  post: <T>(path: string, data: unknown) =>
+    request<T>(path, { method: 'POST', body: JSON.stringify(data) }),
+  patch: <T>(path: string, data: unknown) =>
+    request<T>(path, { method: 'PATCH', body: JSON.stringify(data) }),
+  delete: <T>(path: string) => request<T>(path, { method: 'DELETE' }),
+};

apps/web/lib/constants.ts

@@ -0,0 +1,25 @@
+import { RequirementStatus } from '@ftb/shared';
+
+export const REQUIREMENT_STATUS_LABEL: Record<RequirementStatus, string> = {
+  [RequirementStatus.DRAFT]: '草稿',
+  [RequirementStatus.REVIEWING]: '评审中',
+  [RequirementStatus.APPROVED]: '已通过',
+  [RequirementStatus.REJECTED]: '已拒绝',
+  [RequirementStatus.DELIVERED]: '已交付',
+};
+
+export const REQUIREMENT_STATUS_COLOR: Record<RequirementStatus, string> = {
+  [RequirementStatus.DRAFT]: 'bg-gray-100 text-gray-700',
+  [RequirementStatus.REVIEWING]: 'bg-blue-100 text-blue-700',
+  [RequirementStatus.APPROVED]: 'bg-green-100 text-green-700',
+  [RequirementStatus.REJECTED]: 'bg-red-100 text-red-700',
+  [RequirementStatus.DELIVERED]: 'bg-purple-100 text-purple-700',
+};
+
+export const PRIORITY_LABEL: Record<number, string> = {
+  0: '无',
+  1: '低',
+  2: '中',
+  3: '高',
+  4: '紧急',
+};

apps/web/stores/useProductStore.ts

@@ -0,0 +1,63 @@
+'use client';
+
+import { create } from 'zustand';
+import { Product } from '@ftb/shared';
+import { api } from '@/lib/api';
+
+interface ProductWithCount extends Product {
+  _count?: { requirements: number; projects: number };
+}
+
+interface ProductState {
+  products: ProductWithCount[];
+  currentProduct: (Product & { requirements?: any[]; versions?: any[] }) | null;
+  loading: boolean;
+  error: string | null;
+  fetchProducts: () => Promise<void>;
+  fetchProduct: (id: string) => Promise<void>;
+  createProduct: (data: { name: string; description?: string }) => Promise<void>;
+  updateProduct: (id: string, data: { name?: string; description?: string }) => Promise<void>;
+  deleteProduct: (id: string) => Promise<void>;
+}
+
+export const useProductStore = create<ProductState>((set, get) => ({
+  products: [],
+  currentProduct: null,
+  loading: false,
+  error: null,
+
+  fetchProducts: async () => {
+    set({ loading: true, error: null });
+    try {
+      const products = await api.get<ProductWithCount[]>('/products');
+      set({ products, loading: false });
+    } catch (e: any) {
+      set({ error: e.message, loading: false });
+    }
+  },
+
+  fetchProduct: async (id) => {
+    set({ loading: true, error: null });
+    try {
+      const product = await api.get<Product>(`/products/${id}`);
+      set({ currentProduct: product, loading: false });
+    } catch (e: any) {
+      set({ error: e.message, loading: false });
+    }
+  },
+
+  createProduct: async (data) => {
+    await api.post('/products', data);
+    await get().fetchProducts();
+  },
+
+  updateProduct: async (id, data) => {
+    await api.patch(`/products/${id}`, data);
+    await get().fetchProducts();
+  },
+
+  deleteProduct: async (id) => {
+    await api.delete(`/products/${id}`);
+    set({ products: get().products.filter((p) => p.id !== id) });
+  },
+}));

apps/web/stores/useRequirementStore.ts

@@ -0,0 +1,66 @@
+'use client';
+
+import { create } from 'zustand';
+import { Requirement, RequirementStatus } from '@ftb/shared';
+import { api } from '@/lib/api';
+
+interface RequirementWithCreator extends Requirement {
+  creator?: { id: string; name: string };
+}
+
+interface RequirementState {
+  requirements: RequirementWithCreator[];
+  loading: boolean;
+  error: string | null;
+  statusFilter: RequirementStatus | null;
+  fetchRequirements: (productId: string, status?: RequirementStatus) => Promise<void>;
+  createRequirement: (productId: string, data: { title: string; description?: string; priority?: number; creatorId: string }) => Promise<void>;
+  updateRequirement: (productId: string, id: string, data: { title?: string; description?: string; priority?: number }) => Promise<void>;
+  updateStatus: (productId: string, id: string, status: RequirementStatus) => Promise<void>;
+  deleteRequirement: (productId: string, id: string) => Promise<void>;
+  setStatusFilter: (status: RequirementStatus | null) => void;
+}
+
+export const useRequirementStore = create<RequirementState>((set, get) => ({
+  requirements: [],
+  loading: false,
+  error: null,
+  statusFilter: null,
+
+  fetchRequirements: async (productId, status) => {
+    set({ loading: true, error: null });
+    try {
+      const query = status ? `?status=${status}` : '';
+      const requirements = await api.get<RequirementWithCreator[]>(
+        `/products/${productId}/requirements${query}`,
+      );
+      set({ requirements, loading: false });
+    } catch (e: any) {
+      set({ error: e.message, loading: false });
+    }
+  },
+
+  createRequirement: async (productId, data) => {
+    await api.post(`/products/${productId}/requirements`, data);
+    await get().fetchRequirements(productId, get().statusFilter || undefined);
+  },
+
+  updateRequirement: async (productId, id, data) => {
+    await api.patch(`/products/${productId}/requirements/${id}`, data);
+    await get().fetchRequirements(productId, get().statusFilter || undefined);
+  },
+
+  updateStatus: async (productId, id, status) => {
+    await api.patch(`/products/${productId}/requirements/${id}/status`, { status });
+    await get().fetchRequirements(productId, get().statusFilter || undefined);
+  },
+
+  deleteRequirement: async (productId, id) => {
+    await api.delete(`/products/${productId}/requirements/${id}`);
+    set({ requirements: get().requirements.filter((r) => r.id !== id) });
+  },
+
+  setStatusFilter: (status) => {
+    set({ statusFilter: status });
+  },
+}));