用途
这是一个面向 Saleor storefront 代码库的筛选系统技能，用于在以下情况提供指导：修改商品列表的筛选或排序、新增筛选类型、处理分类 / 集合 / 商品页面、理解服务端筛选与客户端筛选的区别。
主要能力与架构
文档将筛选条件划分为两类处理方式：
| 筛选 | 处理位置 | 原因 |
|---|---|---|
| Categories | 服务端 | 使用 Saleor 的 ProductFilterInput.categories |
| Price | 服务端 | 使用 Saleor 的 ProductFilterInput.price |
| Sort | 服务端 | 使用 Saleor 的 ProductOrder |
| Colors | 客户端 | Saleor 需要 attribute IDs |
| Sizes | 客户端 | 同 Colors |
关键文件
| 文件 | 用途 |
|---|---|
| src/ui/components/plp/filter-utils.ts | 所有筛选工具（服务端 + 客户端） |
| src/ui/components/plp/FilterBar.tsx | 筛选 UI（下拉菜单、移动端 sheet） |
| src/ui/components/plp/useProductFilters.ts | 汇总筛选逻辑的 Hook |
使用方式
服务端筛选
URL 中的分类 slug 会被解析为 ID。示例代码展示了在 page.tsx（服务端组件）中导入 resolveCategorySlugsToIds 与 buildFilterVariables，从 searchParams 读取分类、解析为 ID、构建 filter 变量，并传入 GraphQL 查询的流程。
客户端筛选
颜色和尺码在数据获取后进行筛选。示例代码展示从 filter-utils 导入 filterProducts 与 extractColorOptions，先提取可用选项，再应用筛选。
使用 Hook
useProductFilters Hook 汇总全部筛选逻辑。示例展示了在客户端组件中调用该 Hook，获取 filteredProducts、colorOptions、sizeOptions、selectedColors、handleColorToggle、handleSortChange、activeFilters 等，并将其传入 FilterBar。
静态价格区间
价格区间是静态的，以避免筛选时 UI 闪烁。示例从 filter-utils 导入 STATIC_PRICE_RANGES_WITH_COUNT，返回形如 { label: "Under $50", value: "0-50", count: 0 } 的数组。
扩展示例
新增服务端筛选：更新 filter-utils.ts 中的 buildFilterVariables，在参数中增加 inStock，并设置 filter.stockAvailability = "IN_STOCK"，同时标记 hasFilter；随后在 page.tsx 中从 URL 解析并传入该函数。
反模式
- 不要客户端筛选分类 —— 应使用服务端配合 ID。
- 不要生成动态价格区间 —— 应使用静态区间。
- 不要隐藏已选筛选条件 —— 始终显示，以便用户取消选择。
限制
资料未提供该技能的收费、平台支持范围、性能指标等信息。