游戏目录系统

相关源文件

• src/main/events/download-sources/put-download-source.ts
• src/renderer/src/components/confirmation-modal/confirmation-modal.tsx
• src/renderer/src/components/header/header.tsx
• src/renderer/src/features/catalogue-search.ts
• src/renderer/src/hooks/use-catalogue.ts
• src/renderer/src/hooks/use-repacks.ts
• src/renderer/src/pages/catalogue/catalogue.scss
• src/renderer/src/pages/catalogue/catalogue.tsx
• src/renderer/src/pages/catalogue/filter-item.tsx
• src/renderer/src/pages/catalogue/filter-section.tsx
• src/renderer/src/pages/catalogue/filter.scss
• src/renderer/src/workers/download-sources.worker.ts

游戏目录系统为 Hydra 启动器提供游戏发现、搜索和过滤功能。它将 Steam 游戏数据与下载源集成，为用户呈现一个全面的可浏览游戏库。该系统包括完善的过滤、分页和实时搜索功能。

有关游戏选择后的下载管理，请参阅下载系统。有关 Steam 集成的具体信息，请参阅游戏详情和配置。有关随机游戏发现，请参阅Steam250 集成和随机游戏。

架构概述

目录系统遵循模块化的 React-Redux 架构，具有外部数据集成和本地缓存功能。

来源： src/renderer/src/pages/catalogue/catalogue.tsx1-330 src/renderer/src/features/catalogue-search.ts1-68 src/renderer/src/workers/download-sources.worker.ts1-239

搜索和过滤系统

目录实现了全面的搜索和过滤系统，具有实时更新和分页功能。

搜索状态管理

CatalogueSearchState 接口定义了完整的搜索上下文

属性	类型	描述
filters	CatalogueSearchPayload	活动过滤条件
page	数字	当前分页页码
steamUserTags	Record<string, Record<string, number>>	本地化的 Steam 用户标签
steamGenres	Record<string, string[]>	本地化的 Steam 游戏类型

过滤器类别

• 标题搜索：带防抖功能的实时文本搜索
• 游戏类型：支持本地化的 Steam 游戏类型
• 标签：支持本地化的 Steam 用户标签
• 下载源：按指纹划分的可用分流源
• 开发者：来自 Steam 数据的游戏开发者
• 发行商：来自 Steam 数据的游戏发行商

来源： src/renderer/src/features/catalogue-search.ts6-25

搜索实现

搜索系统使用防抖请求，以防止输入时产生过多的 API 调用

来源： src/renderer/src/pages/catalogue/catalogue.tsx61-78 src/renderer/src/components/header/header.tsx62-73

过滤器颜色编码

每个过滤器类别都有一个独特的视觉标识符

来源： src/renderer/src/pages/catalogue/catalogue.tsx24-30

数据源和集成

目录集成了多个外部数据源，以提供全面的游戏信息。

Steam 数据集成

useCatalogue Hook 管理 Steam 数据获取和本地化。

来源： src/renderer/src/hooks/use-catalogue.ts1-53

下载源管理

下载源通过一个专用的 Web Worker 进行管理，该 Worker 负责处理验证、同步和本地存储。

操作	方法	描述
导入	IMPORT_DOWNLOAD_SOURCE	验证并导入新源
删除	DELETE_DOWNLOAD_SOURCE	移除源和相关的分流包
验证	VALIDATE_DOWNLOAD_SOURCE	检查源的有效性
同步	SYNC_DOWNLOAD_SOURCES	更新现有源
清除所有	DELETE_ALL_DOWNLOAD_SOURCES	移除所有源

来源： src/renderer/src/workers/download-sources.worker.ts22-27

UI 组件架构

目录 UI 由模块化的 React 组件构建，这些组件处理浏览体验的不同方面。

来源： src/renderer/src/pages/catalogue/catalogue.tsx233-329

过滤器分区组件

FilterSection 组件为每个过滤器类别提供可搜索的虚拟化列表

主要功能

• 针对大型数据集的虚拟滚动以提升性能
• 过滤器选项内的实时搜索
• 清除所有选中过滤器的功能
• 颜色编码的类别标识

来源： src/renderer/src/pages/catalogue/filter-section.tsx8-117

响应式布局

目录使用具有专用区域的灵活布局

CSS 类	宽度	目的
catalogue__filters-container	270px (固定)	过滤器侧边栏
catalogue__games-container	100% (弹性)	游戏网格
catalogue__content	不适用	弹性容器

来源： src/renderer/src/pages/catalogue/catalogue.scss12-56

分页和性能

系统实现了高效的分页，支持可配置的页面大小。

分页配置

分页系统包括

• 带数字格式的结果计数显示
• 页面导航控制
• 页面更改时自动滚动到顶部
• 基于结果计数计算总页数

来源： src/renderer/src/pages/catalogue/catalogue.tsx32 src/renderer/src/pages/catalogue/catalogue.tsx278-287

加载状态

目录在搜索操作期间提供视觉反馈。

• 搜索期间的骨架加载动画
• 用于取消进行中请求的 Abort Controller
• 防抖搜索以减少 API 调用

来源： src/renderer/src/pages/catalogue/catalogue.tsx261-267

本地化与国际化

目录系统支持 Steam 数据和 UI 元素的全面本地化。

区域设置感知数据映射

Steam 游戏类型和标签在本地化值和英文值之间进行映射

此映射实现了

• 显示本地化的过滤器名称
• 使用英文标识符进行一致搜索
• 跨语言更改的正确过滤器状态管理

来源： src/renderer/src/pages/catalogue/catalogue.tsx103-110