本文档涵盖了游戏目录中的搜索与筛选系统,包括基于文本的搜索、多类别筛选、分页以及底层数据管理基础设施。该系统使用户能够通过各种标准发现游戏,包括按标题搜索、按类型筛选、下载源选择以及按发行商/开发者筛选。
有关更广泛的目录系统和Steam250集成的信息,请参阅Steam250集成和随机游戏。
搜索与筛选系统作为一个统一的发现界面运行,将实时文本搜索与跨多个游戏属性的分面筛选相结合。该系统在 Redux 中维护搜索状态,对用户输入进行防抖以提高性能,并通过大数据集支持分页。
搜索系统实现了一种防抖架构,其中用户输入会延迟 500 毫秒后才触发 API 调用。目录组件中的debouncedSearch函数通过适当的中止控制器管理来处理搜索执行,以防止竞态条件。
来源:src/renderer/src/pages/catalogue/catalogue.tsx61-78 src/renderer/src/components/header/header.tsx62-68
筛选系统将游戏属性分为五个主要类别,每个类别都有不同的数据源和视觉指示器
| 类别 | 数据源 | 颜色代码 | 状态键 |
|---|---|---|---|
| 类型 | 外部 Steam 类型 API | hsl(262deg 50% 47%) | genres |
| 标签 | 外部 Steam 用户标签 API | hsl(95deg 50% 20%) | tags |
| 下载源 | 本地 IndexedDB downloadSourcesTable | hsl(27deg 50% 40%) | downloadSourceFingerprints |
| 开发者 | 外部 Steam 开发者 API | hsl(340deg 50% 46%) | developers |
| 发行商 | 外部 Steam 发行商 API | hsl(200deg 50% 30%) | publishers |
来源:src/renderer/src/pages/catalogue/catalogue.tsx24-30 src/renderer/src/hooks/use-catalogue.ts16-38 src/renderer/src/pages/catalogue/catalogue.tsx179-231
筛选状态通过 Redux 的 catalogueSearchSlice 片段进行管理,该片段维护统一的 CatalogueSearchPayload 结构,并在筛选条件更改时自动重置页面。
当筛选条件更改时,setFilters 操作会自动将页面重置为 1,确保用户从筛选数据集的开头查看结果。
来源:src/renderer/src/features/catalogue-search.ts6-25 src/renderer/src/features/catalogue-search.ts31-37
每个筛选类别都使用 FilterSection 组件进行渲染,该组件提供虚拟化滚动、独立的搜索功能和多选功能。
FilterSection 组件实现了性能优化,包括针对大型列表的虚拟化滚动以及基于搜索输入计算筛选项目。
来源:src/renderer/src/pages/catalogue/filter-section.tsx8-26 src/renderer/src/pages/catalogue/filter-section.tsx30-46 src/renderer/src/pages/catalogue/filter-section.tsx90-114
下载源通过专用工作系统进行管理,该系统与 IndexedDB 同步,并为游戏重打包提供基于指纹的筛选。
工作系统通过 ETag 确保下载源的数据完整性,验证源模式,并为筛选操作提供基于指纹的识别。
来源:src/renderer/src/workers/download-sources.worker.ts87-109 src/renderer/src/pages/catalogue/catalogue.tsx95-99 src/renderer/src/pages/catalogue/catalogue.tsx154-161
分页系统处理具有固定页面大小的大型结果集,并在导航期间保持滚动位置。
分页组件自动计算总页数,并在结果页面之间导航时提供流畅的滚动行为。
来源:src/renderer/src/pages/catalogue/catalogue.tsx32 src/renderer/src/pages/catalogue/catalogue.tsx278-287
搜索系统通过本地化的 Steam 数据和基于用户语言偏好的动态类型映射来支持多语言筛选。
类型映射系统通过在筛选状态中存储英文类型值,同时向用户显示本地化标签来保持一致性。
来源:src/renderer/src/pages/catalogue/catalogue.tsx101-110 src/renderer/src/pages/catalogue/catalogue.tsx112-120 src/renderer/src/pages/catalogue/catalogue.tsx122-132