菜单

设置系统

相关源文件

设置系统提供了一个全面的配置界面,用于用户偏好设置、账户管理、外观定制和服务集成。它使用标签页界面来组织不同的设置类别,并通过 React Context 维护状态。

有关主题编辑器和自定义主题创建的信息,请参阅 UI 组件和前端。有关云保存偏好的详细信息,请参阅 云保存系统

架构概述

设置系统围绕一个主 Settings 组件构建,该组件通过标签页界面协调多个设置类别。每个类别都实现为一个独立的 React 组件,并通过共享的 Context Provider 进行管理。

设置组件结构

来源: src/renderer/src/pages/settings/settings.tsx18-113 src/renderer/src/pages/settings/settings-account.tsx20-255 src/renderer/src/pages/settings/aparence/settings-appearance.tsx17-123

设置类别

设置界面根据用户认证状态和功能标志动态组织为类别。类别在 categories 数组中定义,并有条件地渲染。

类别组件条件目的
通用SettingsGeneral始终显示基本应用程序偏好设置
行为SettingsBehavior始终显示应用程序行为设置
下载源SettingsDownloadSources始终显示下载源配置
外观SettingsAppearance始终显示主题和 UI 定制
TorBoxSettingsTorBox功能标志已启用TorBox 服务集成
Real-DebridSettingsRealDebrid始终显示Real-Debrid 服务设置
账户SettingsAccount用户已认证账户和订阅管理

类别可见性逻辑在 src/renderer/src/pages/settings/settings.tsx27-53 中实现,其中类别是根据 userDetails 的存在和 isTorBoxEnabled 功能标志动态构建的。

来源: src/renderer/src/pages/settings/settings.tsx27-53

上下文管理

SettingsContext 接口

设置系统使用 React Context 来管理所有设置组件之间的共享状态。SettingsContext 接口定义了可用的操作

来源: src/renderer/src/context/settings/settings.context.tsx8-22

URL 参数处理

设置上下文处理 URL 参数,用于深度链接到特定类别

  • urls 参数设置源 URL 并导航到下载源类别
  • themeauthorIdauthorName 参数会触发主题导入流程并导航到外观类别

此功能在 src/renderer/src/context/settings/settings.context.tsx64-100 中实现

来源: src/renderer/src/context/settings/settings.context.tsx64-100

账户设置

配置文件管理

The SettingsAccount 组件通过多个部分提供全面的账户管理

来源: src/renderer/src/pages/settings/settings-account.tsx146-254

订阅管理

Hydra Cloud 订阅部分根据订阅状态动态显示不同的状态和操作

  • 无订阅:显示“成为订阅者”的号召性用语
  • 活跃订阅:显示续订日期和“管理订阅”按钮
  • 已过期订阅:显示过期日期和“续订订阅”按钮

此逻辑在 getHydraCloudSectionContent() 函数中实现,位于 src/renderer/src/pages/settings/settings-account.tsx95-141

来源: src/renderer/src/pages/settings/settings-account.tsx95-141

主题和外观系统

主题管理流程

外观设置与主题系统集成,提供主题导入、管理和定制功能

来源: src/renderer/src/pages/settings/aparence/settings-appearance.tsx33-81

通过 URL 导入主题

外观设置支持直接从 URL 参数导入主题。当存在主题参数时,系统会

  1. 将导入模态框的可见性设置为 true
  2. 从 URL 参数填充主题数据
  3. 导航到设置页面并清除主题参数
  4. 显示 ImportThemeModal 以供用户确认

此流程在 src/renderer/src/pages/settings/aparence/settings-appearance.tsx50-75 中处理

来源: src/renderer/src/pages/settings/aparence/settings-appearance.tsx50-75

用户偏好设置集成

偏好设置更新流程

设置更新通过 Context 的 updateUserPreferences 函数进行,该函数在渲染器和主进程之间进行协调

The updateUserPreferences 函数实现在 src/renderer/src/context/settings/settings.context.tsx121-126

来源: src/renderer/src/context/settings/settings.context.tsx121-126

账户数据同步

账户设置组件通过 onAccountUpdated 事件监听账户更新,并在发生更改时自动刷新用户详细信息。这确保了 UI 与后端更改保持同步,尤其是在外部身份验证流程之后。

同步逻辑在 src/renderer/src/pages/settings/settings-account.tsx53-66 中实现

来源: src/renderer/src/pages/settings/settings-account.tsx53-66