设置和配置用户界面

1. 设置界面概述

Clash Verge Rev 中的设置 UI 分为两个主要部分：系统设置和 Clash 设置。每个部分包含一组可配置选项，用于控制应用程序行为的不同方面。

来源：src/components/setting/setting-system.tsx src/components/setting/setting-clash.tsx

1.1 组件结构

设置 UI 使用 React 组件和 Material-UI 构建。设置被组织成管理应用程序配置不同方面的可重用组件。

来源：src/components/setting/setting-system.tsx src/components/setting/setting-clash.tsx src/components/setting/mods/setting-comp.tsx

2. 系统设置

系统设置部分控制 Clash Verge Rev 与操作系统交互的方式。

2.1 TUN 模式

TUN 模式可在系统级别拦截数据包，提供一种通过 Clash 捕获和重定向所有流量的方法。这对于不尊重系统代理设置的应用程序特别有用。

TUN 模式的可用性取决于运行模式

在服务模式下：始终可用
在 Sidecar 模式下：仅在以管理员身份运行时可用
在管理员+服务模式下：始终可用

来源：src/components/setting/setting-system.tsx103-154 src/components/shared/ProxyControlSwitches.tsx182-203

2.2 系统代理

系统代理设置控制 Clash Verge Rev 是否应配置操作系统的代理设置。

启用时，应用程序会根据端口配置自动设置系统代理。禁用时，系统代理设置将被恢复。

来源：src/components/setting/setting-system.tsx155-191 src/components/shared/ProxyControlSwitches.tsx108-179

2.3 自动启动

自动启动允许 Clash Verge Rev 在系统启动时自动启动。

此功能在管理员模式下不可用，如警告工具提示所示。

来源：src/components/setting/setting-system.tsx193-235 src/components/home/system-info-card.tsx107-115

2.4 静默启动

静默启动决定应用程序是在启动时最小化到系统托盘，还是显示主窗口。

此设置会影响应用程序的启动行为，但不需要系统权限。

来源：src/components/setting/setting-system.tsx237-253 src/components/home/system-info-card.tsx107-115

3. Clash 设置

Clash 设置部分控制 Clash 核心的行为，包括网络配置、日志记录和端口设置。

3.1 允许局域网

允许局域网使本地网络上的其他设备能够使用 Clash Verge Rev 作为代理服务器。

启用时，Clash 将监听所有网络接口，而不仅仅是 localhost，从而允许外部连接。

来源：src/components/setting/setting-clash.tsx120-143

3.2 DNS 覆盖

DNS 覆盖允许 Clash Verge Rev 为 Clash 核心配置 DNS 设置。

启用时，Clash 会使用配置文件中指定的 DNS 设置，这些设置可以通过 DNS 查看器对话框进行编辑。

来源：src/components/setting/setting-clash.tsx145-159

3.3 IPv6

IPv6 设置控制 Clash 是否处理 IPv6 流量。

启用时，Clash 除了 IPv4 连接外，还会处理 IPv6 连接。

来源：src/components/setting/setting-clash.tsx161-172

3.4 端口配置

端口配置允许用户指定 Clash 用于不同协议的端口。

端口配置对话框具有平台感知功能，仅显示与当前操作系统相关的端口选项。

来源：src/components/setting/setting-clash.tsx219-248 src/components/setting/mods/clash-port-viewer.tsx

3.5 日志级别

日志级别设置控制 Clash 核心日志的详细程度。

可用日志级别：Debug、Info、Warning、Error、Silent

来源：src/components/setting/setting-clash.tsx196-217

4. 对话框组件

设置 UI 包含几个用于配置应用程序特定方面的对话框组件。

4.1 端口配置对话框

端口配置对话框提供了配置 Clash 使用的各种端口的用户界面，并包含特定于平台的选项。

混合端口：用于 HTTP 和 SOCKS 协议（所有平台）
Socks 端口：专用的 SOCKS 代理端口（所有平台）
Http 端口：专用的 HTTP 代理端口（所有平台）
Redir 端口：macOS 和 Linux 的透明代理端口
TProxy 端口：Linux 特有的透明代理端口

来源：src/components/setting/mods/clash-port-viewer.tsx

4.2 系统集成

设置与系统状态紧密集成，尤其是在运行模式（服务模式 vs. Sidecar 模式）方面。

应用程序会根据当前的运行模式和管理员状态调整设置 UI，相应地启用或禁用某些功能。

来源：src/components/setting/setting-system.tsx45-48 src/components/home/system-info-card.tsx27-37

5. 配置数据流

UI 中的设置更改通过应用程序层遵循一致的数据流模式。

5.1 关键钩子和服务

设置 UI 依赖于几个关键钩子和服务与配置系统进行交互。

useVerge：管理 Verge 特定配置
useClash：管理 Clash 配置
useSystemState：提供系统状态信息
GuardState：一个处理设置更改验证和应用的组件

来源： src/components/setting/setting-system.tsx35-36 src/components/setting/setting-clash.tsx37-38

6. 国际化

设置界面完全支持国际化，通过 i18n 系统支持多种语言。

支持的语言包括英语、俄语、中文、波斯语、鞑靼语、印度尼西亚语和阿拉伯语。

来源： src/services/i18n.ts src-tauri/src/utils/i18n.rs

7. 错误处理

设置界面包含强大的错误处理功能，可在设置更改无法应用时提供反馈。

错误使用 Notice 组件显示，该组件会展示吐司式通知。

来源： src/components/setting/setting-system.tsx133-137 src/components/setting/setting-clash.tsx82-84

8. 主屏幕设置集成

主屏幕包含几个卡片，提供对重要设置的快速访问。

系统信息卡：显示系统状态并允许切换自动启动。
代理/TUN 卡：提供对系统代理和 TUN 模式设置的快速访问。
IP 信息卡：显示当前网络信息。

这些组件无需导航至完整的设置页面，即可轻松访问常用设置。

来源： src/components/home/system-info-card.tsx src/components/home/proxy-tun-card.tsx src/components/home/ip-info-card.tsx

9. 总结

Clash Verge Rev 中的设置和配置界面为管理应用程序的行为提供了一个全面的界面。要点如下：

设置分为系统和 Clash 两类。
UI 根据系统状态（运行模式、管理员权限）进行调整。
设置更改经过验证，并通过一致的数据流应用。
错误处理可在设置无法应用时向用户提供反馈。
国际化支持可提供本地化体验。

UI 的设计旨在用户友好，同时为高级用户提供访问高级配置选项的途径。