9.3 KiB

Raw Permalink Blame History Unescape Escape

Web GUI 使用指南

概述

Wormhole SOCKS5 Client 内置了现代化的 Web GUI 管理界面，提供直观的图形界面来管理和监控代理服务。

🌟 主要功能

✅ 实时监控

连接统计: 总连接数、活跃连接、成功率等
流量统计: 上传下载流量、传输字节数
运行状态: 服务运行时间、健康状态

✅ 代理控制

一键开关: 启用/禁用系统代理设置
状态显示: 实时显示代理配置状态
错误提示: 详细的操作反馈和错误信息

✅ 路由配置

域名规则: 显示绕过和强制代理域名数量
网络设置: 本地网络和私有网络绕过设置
统计信息: 路由规则匹配统计

✅ 系统信息

系统代理: 当前系统代理配置
服务配置: SOCKS5 服务器地址、端口等
操作系统: 运行环境信息

🚀 快速开始

1. 启动服务

# HTTP 代理模式（推荐测试）
./bin/wormhole-client -mode http

# 全局代理模式（推荐使用）
sudo ./bin/wormhole-client -mode global

2. 访问 GUI

打开浏览器访问：

主界面: http://127.0.0.1:8080/gui
JSON API: http://127.0.0.1:8080/stats
健康检查: http://127.0.0.1:8080/health

3. 界面功能

启动后你将看到现代化的管理界面：

🌐 Wormhole SOCKS5 Client                    [●] 服务运行中

┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│   代理控制      │ │   连接统计      │ │   路由配置      │
│                 │ │                 │ │                 │
│ 模式: global    │ │ 总连接: 42      │ │ 绕过域名: 15    │
│ 服务器: xxx:xxx │ │ 活跃连接: 3     │ │ 强制域名: 25    │
│ 端口: 8080      │ │ 成功率: 95.2%   │ │ 本地绕过: 是    │
│ 系统: darwin    │ │ 运行时间: 2h15m │ │ 私网绕过: 是    │
│                 │ │ 传输流量: 1.2GB │ │                 │
│ [禁用系统代理]  │ │ 失败请求: 2     │ │                 │
│ [刷新状态]      │ │                 │ │                 │
└─────────────────┘ └─────────────────┘ └─────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                     系统信息                                │
│                                                             │
│ 系统代理状态: [已启用]                                      │
│ 当前代理设置:                                               │
│   http: 127.0.0.1:8080                                     │
│   https: 127.0.0.1:8080                                    │
└─────────────────────────────────────────────────────────────┘

⚙️ 功能详解

代理控制面板

基本信息显示：

运行模式（HTTP/Global/Transparent）
SOCKS5 服务器地址和端口
本地代理端口
操作系统类型

操作按钮：

启用/禁用系统代理: 一键切换系统代理设置
刷新状态: 手动刷新所有数据

连接统计面板

实时数据：

总连接数: 自启动以来的总连接数
活跃连接: 当前正在处理的连接数
成功率: 成功请求与总请求的比例
运行时间: 服务运行的总时间
传输流量: 上传下载的总字节数
失败请求: 失败的请求数量

路由配置面板

智能分流信息：

绕过域名数量: 配置的直连域名规则数
强制代理域名: 配置的代理域名规则数
绕过本地网络: 是否绕过本地网络设置
绕过私有网络: 是否绕过私有网络设置

系统信息面板

系统代理状态：

启用/禁用状态: 当前系统代理是否启用
代理设置详情: 具体的 HTTP/HTTPS 代理配置

🔧 高级配置

自定义端口

如果需要在不同端口运行 GUI：

# configs/client.yaml
proxy:
  localPort: 8888  # 修改端口

# GUI 将在 http://127.0.0.1:8888/gui 提供服务

外部访问

默认 GUI 只能从本地访问。如需外部访问：

# 使用端口转发（SSH隧道）
ssh -L 8080:127.0.0.1:8080 username@your-server

# 然后在本地访问: http://127.0.0.1:8080/gui

API 集成

GUI 基于 RESTful API 构建，可以与其他工具集成：

# 获取状态信息
curl http://127.0.0.1:8080/api/status

# 切换代理状态
curl -X POST http://127.0.0.1:8080/api/proxy/toggle \
  -H "Content-Type: application/json" \
  -d '{"enable": true}'

# 获取路由统计
curl http://127.0.0.1:8080/api/routing/stats

📱 响应式设计

GUI 支持多种设备：

桌面端: 全功能四面板布局
平板端: 自适应两列布局
手机端: 单列垂直布局

移动端优化

在手机上访问时，界面会自动调整：

简化的按钮和控件
更大的触摸目标
优化的字体大小

🔄 实时更新

自动刷新

GUI 每 5 秒自动更新数据，包括：

连接统计
代理状态
系统信息
路由统计

智能刷新

页面可见性检测：

当页面在后台时停止自动刷新
切换回前台时立即恢复更新
节省系统资源和网络带宽

手动刷新

点击 "刷新状态" 按钮立即更新所有数据。

🎨 界面特性

现代化设计

毛玻璃效果: 半透明背景增强视觉层次
渐变背景: 美观的紫色渐变背景
卡片布局: 清晰的信息分组
图标支持: 使用 Font Awesome 图标

交互反馈

悬停效果: 按钮和卡片的悬停动画
加载状态: 操作进行时的加载指示
状态指示: 颜色编码的状态点
动画效果: 平滑的过渡动画

状态显示

连接状态指示器：

🟢 绿色: 服务正常运行
🟡 黄色: 正在检查状态
🔴 红色: 服务异常或连接失败

⚠️ 注意事项

安全考虑

本地访问: GUI 默认只绑定本地地址
无认证: 当前版本无需登录验证
HTTPS: 建议通过 HTTPS 代理访问

性能影响

轻量级: GUI 对系统资源占用很小
异步更新: 不影响代理性能
缓存优化: 静态资源缓存减少网络请求

浏览器兼容

支持的浏览器：

✅ Chrome/Chromium 70+
✅ Firefox 65+
✅ Safari 12+
✅ Edge 79+

推荐浏览器: Chrome 或 Firefox 最新版本

🔧 故障排除

常见问题

1. 无法访问 GUI

问题: 浏览器显示"无法访问此网站"
解决: 检查服务是否启动，端口是否正确

# 检查服务状态
curl http://127.0.0.1:8080/health

# 检查端口占用
netstat -an | grep 8080

2. 页面加载不完整

问题: 页面样式错乱或功能不正常
解决: 清除浏览器缓存，刷新页面

# 强制刷新页面: Ctrl+F5 (Windows) 或 Cmd+Shift+R (Mac)

3. 代理切换失败

问题: 点击代理开关无效果
解决: 检查管理员权限，查看错误信息

# macOS/Linux: 使用 sudo 运行
sudo ./bin/wormhole-client -mode global

# Windows: 以管理员身份运行

4. 数据不更新

问题: 统计数据停止更新
解决: 检查网络连接，手动刷新

调试模式

启用详细日志查看 GUI 相关信息：

# 设置日志级别为 debug
export LOG_LEVEL=debug
./bin/wormhole-client -mode global

查看 GUI 相关日志：

[DEBUG] GUI server initialized
[DEBUG] Serving GUI at /gui
[DEBUG] API request: GET /api/status
[DEBUG] GUI template rendered successfully

📚 开发和定制

模板系统

GUI 使用 Go 内置模板系统：

HTML 模板: 存储在代码中，支持数据绑定
CSS 样式: 响应式设计，支持深色主题
JavaScript: 现代 ES6+ 语法，模块化设计

API 端点

GUI 基于以下 API 端点：

GET  /api/status         - 获取服务状态
GET  /api/config         - 获取配置信息
POST /api/proxy/toggle   - 切换代理状态
GET  /api/routing/stats  - 获取路由统计
GET  /api/system/proxy   - 获取系统代理信息

自定义样式

如需修改界面样式，可以编辑 internal/gui/templates.go 中的 CSS：

// 修改主题色彩
.panel-header {
    background: linear-gradient(135deg, #your-color1, #your-color2);
}

📖 相关链接

📊 API 文档 - 详细的 API 接口说明
🌍 全局代理指南 - 全局代理模式使用说明
📋 配置参考 - 完整的配置文件示例
🏠 项目主页 - 项目总体介绍

💡 提示: GUI 界面会持续改进，欢迎提出建议和反馈！

9.3 KiB Raw Permalink Blame History Unescape Escape