UI组件和前端

相关源文件

• src/locales/de/translation.json
• src/main/events/profile/update-profile.ts
• src/renderer/src/app.tsx
• src/renderer/src/components/sidebar/sidebar-profile.tsx
• src/renderer/src/components/sidebar/sidebar.scss
• src/renderer/src/components/sidebar/sidebar.tsx
• src/renderer/src/features/user-details-slice.ts
• src/renderer/src/hooks/use-user-details.ts
• src/renderer/src/scss/globals.scss

本文档涵盖了 Hydra 的 Electron 渲染进程中基于 React 的前端架构，包括组件组织、状态管理、导航、样式和本地化系统。有关 Electron 主进程和 IPC 通信的详细信息，请参阅核心架构。有关侧边栏等特定导航组件，请参阅侧边栏和导航。有关用户偏好设置管理，请参阅设置系统。

前端架构概述

Hydra 的前端是作为一个在 Electron 渲染进程中运行的 React 应用程序构建的。其架构遵循现代 React 模式，使用 Redux 进行状态管理，React Router 进行导航，以及自定义 Hooks 封装业务逻辑。

核心技术

前端技术栈包括：

• React 18 采用函数式组件和 Hooks
• Redux Toolkit 用于集中式状态管理
• React Router 用于客户端路由
• SCSS 用于样式设计，结合 CSS 模块
• i18next 用于国际化
• TypeScript 用于类型安全

应用程序入口点

主应用程序组件 App 作为根组件，负责协调全局状态、事件监听器和模态管理。

来源： src/renderer/src/app.tsx1-342

组件层级和状态流

应用程序遵循分层组件结构，清晰地分离了 UI 呈现和业务逻辑。

状态管理架构

状态管理系统使用 Redux slices 管理全局状态，并使用自定义 Hooks 处理组件特定逻辑。userDetailsSlice 管理认证状态、朋友关系和模态窗口可见性。

来源： src/renderer/src/features/user-details-slice.ts1-64 src/renderer/src/hooks/use-user-details.ts1-166

主要布局组件

来源： src/renderer/src/app.tsx327-340 src/renderer/src/components/sidebar/sidebar.tsx196-312

用于业务逻辑的自定义 Hooks

前端使用自定义 Hooks 封装业务逻辑，并为组件提供清晰的接口。

关键自定义 Hooks

钩子	目的	关键函数
useUserDetails	用户认证和社交功能	fetchUserDetails, signOut, showFriendsModal
useLibrary	游戏库管理	updateLibrary, library 状态
useDownload	下载进度跟踪	clearDownload, setLastPacket, progress
useSubscription	Hydra Cloud 订阅管理	hideHydraCloudModal, hasActiveSubscription
useToast	Toast 通知系统	showSuccessToast, showWarningToast

用户详细信息 Hook 实现

useUserDetails Hook 管理用户认证状态和社交功能

来源： src/renderer/src/hooks/use-user-details.ts18-165

侧边栏组件架构

侧边栏作为主要导航界面和游戏库浏览器，具有可调整大小的功能。

侧边栏结构和功能

侧边栏通过鼠标交互实现动态调整大小，并将状态保存在 localStorage 中

来源： src/renderer/src/components/sidebar/sidebar.tsx37-312 src/renderer/src/components/sidebar/sidebar-profile.tsx12-104

侧边栏状态管理

侧边栏管理多项本地状态：

• filteredLibrary: 基于搜索输入的过滤游戏列表
• sidebarWidth: 存储在 localStorage 中的当前宽度
• isResizing: 调整大小操作状态
• showPlayableOnly: 可玩游戏的过滤器

来源： src/renderer/src/components/sidebar/sidebar.tsx46-51 src/renderer/src/components/sidebar/sidebar.tsx90-142

样式系统和主题架构

前端使用 SCSS，并具有全局设计系统和对自定义主题的支持。

全局样式变量

组件特定样式

侧边栏组件演示了样式架构，包括：

• BEM 方法论用于 CSS 类命名
• 响应式设计，带平台特定调整
• 悬停状态和过渡效果
• 主题感知颜色使用

来源： src/renderer/src/scss/globals.scss1-30 src/renderer/src/components/sidebar/sidebar.scss1-175

本地化系统

Hydra 使用 i18next 支持 29 种语言进行国际化。该系统使用具有命名空间组织的层级翻译键。

翻译键结构

翻译使用模式

组件使用带命名空间指定的 useTranslation Hook

来源： src/locales/de/translation.json1-537 src/renderer/src/components/sidebar/sidebar.tsx42

事件处理和 IPC 集成

前端通过 IPC 事件处理器与 Electron 的主进程集成，实现实时更新。

主进程事件监听器

事件处理程序在 useEffect Hooks 中注册，并妥善清理以防止内存泄漏。

来源： src/renderer/src/app.tsx84-100 src/renderer/src/app.tsx157-195 src/renderer/src/app.tsx262-284

模态框和对话框管理

应用程序使用集中式模态系统，支持背景管理和拖动控制。

模态状态管理

模态系统使用 MutationObserver 检测模态 DOM 元素，在模态框打开时自动禁用窗口拖动。

来源： src/renderer/src/app.tsx201-210 src/renderer/src/app.tsx312-325