用途：这是围绕 Next.js 商品详情页（Product Detail Page，PDP）的架构参考，帮助在修改 PDP 布局或组件、处理图片画廊/轮播、理解缓存与流式架构、调试加入购物车问题、新增商品信息区块时快速定位。资料说明具体变体选择逻辑另见 variant-selection 技能。
主要能力：页面由服务端组件 page.tsx 组成，包含 ProductGallery（客户端，支持滑动/箭头、缩略图、LCP 优化）与商品信息列；变体区块通过 ErrorBoundary 与 Suspense 包裹并流式渲染；画廊根据 ?variant= URL 参数展示对应变体图片，变体选择以 URL 为唯一来源。
使用方式：先阅读数据流。商品数据由 getProductData() 使用 "use cache" 缓存，cacheLife("minutes") 为 5 分钟，cacheTag 支持按需失效；变体区块读取 searchParams，故为动态。加购通过表单 action={addToCart} 触发服务端操作，并 revalidatePath("/cart")。按需失效示例：curl "/api/revalidate?tag=product:my-product-slug"。GraphQL 变更后执行 pnpm run generate，测试可运行 pnpm test src/ui/components/pdp。
限制与注意：不要在缓存函数中读取 searchParams，不要用 useState 管理变体选择，不要跳过 Suspense 外的 ErrorBoundary，不要用索引作为图片 key。图库缩放/灯箱仅预留 onImageClick 回调，资料未提供具体实现。收费、价格、平台与效果等事实暂未提供。