|
|
|
|
|
# Web GUI 功能特性
|
|
|
|
|
|
|
|
|
|
|
|
## 🎯 **功能概览**
|
|
|
|
|
|
|
|
|
|
|
|
Wormhole SOCKS5 Client 现已集成现代化的 Web GUI 管理界面，提供完整的图形化管理体验。
|
|
|
|
|
|
|
|
|
|
|
|
## ✨ **核心特性**
|
|
|
|
|
|
|
|
|
|
|
|
### 🖥️ **现代化界面设计**
|
|
|
|
|
|
- **毛玻璃效果**: 使用 backdrop-filter 实现现代视觉效果
|
|
|
|
|
|
- **渐变背景**: 美观的紫色渐变背景设计
|
|
|
|
|
|
- **卡片布局**: 清晰的信息分组和层次结构
|
|
|
|
|
|
- **图标系统**: 集成 Font Awesome 图标库
|
|
|
|
|
|
- **响应式设计**: 支持桌面、平板、手机多端适配
|
|
|
|
|
|
|
|
|
|
|
|
### 📊 **实时监控面板**
|
|
|
|
|
|
- **连接统计**: 总连接数、活跃连接、成功率实时显示
|
|
|
|
|
|
- **流量监控**: 上传下载字节数、传输速度统计
|
|
|
|
|
|
- **性能指标**: 响应时间、运行时间、错误统计
|
|
|
|
|
|
- **自动刷新**: 每 5 秒自动更新数据，支持智能暂停
|
|
|
|
|
|
|
|
|
|
|
|
### 🎛️ **代理控制中心**
|
|
|
|
|
|
- **一键开关**: 启用/禁用系统代理设置
|
|
|
|
|
|
- **状态显示**: 实时显示当前代理配置状态
|
|
|
|
|
|
- **配置信息**: 服务器地址、端口、模式等基本信息
|
|
|
|
|
|
- **操作反馈**: 详细的成功/错误提示信息
|
|
|
|
|
|
|
|
|
|
|
|
### 🛣️ **智能路由管理**
|
|
|
|
|
|
- **域名规则**: 显示绕过和强制代理域名数量统计
|
|
|
|
|
|
- **网络配置**: 本地网络和私有网络绕过设置
|
|
|
|
|
|
- **规则统计**: 路由匹配规则的统计和分析
|
|
|
|
|
|
- **配置预览**: 当前路由配置的可视化展示
|
|
|
|
|
|
|
|
|
|
|
|
### 🔧 **系统信息中心**
|
|
|
|
|
|
- **代理状态**: 系统代理启用/禁用状态显示
|
|
|
|
|
|
- **配置详情**: 当前系统代理的具体配置信息
|
|
|
|
|
|
- **环境信息**: 操作系统、运行环境等系统信息
|
|
|
|
|
|
- **健康检查**: 服务健康状态和连通性检测
|
|
|
|
|
|
|
|
|
|
|
|
## 🚀 **技术特性**
|
|
|
|
|
|
|
|
|
|
|
|
### 🏗️ **架构设计**
|
|
|
|
|
|
- **模块化设计**: GUI 模块独立，不影响核心代理功能
|
|
|
|
|
|
- **RESTful API**: 基于标准 REST API 构建，支持第三方集成
|
|
|
|
|
|
- **模板系统**: 使用 Go 内置模板系统，支持数据绑定
|
|
|
|
|
|
- **静态资源**: CSS/JS 内嵌，无需外部文件依赖
|
|
|
|
|
|
|
|
|
|
|
|
### 🔄 **实时更新机制**
|
|
|
|
|
|
- **WebSocket**: 考虑未来支持 WebSocket 实时推送
|
|
|
|
|
|
- **轮询更新**: 当前使用智能轮询机制，节省资源
|
|
|
|
|
|
- **页面可见性**: 支持页面可见性 API，后台时暂停更新
|
|
|
|
|
|
- **错误重试**: 网络错误时自动重试机制
|
|
|
|
|
|
|
|
|
|
|
|
### 📱 **响应式支持**
|
|
|
|
|
|
- **移动优先**: 移动端优化的触摸交互
|
|
|
|
|
|
- **自适应布局**: 基于 CSS Grid 的自适应布局系统
|
|
|
|
|
|
- **断点设计**: 768px/480px 断点，完美适配各种设备
|
|
|
|
|
|
- **触摸优化**: 更大的触摸目标和手势支持
|
|
|
|
|
|
|
|
|
|
|
|
### 🎨 **用户体验**
|
|
|
|
|
|
- **加载状态**: 操作时的加载动画和状态指示
|
|
|
|
|
|
- **状态反馈**: 颜色编码的状态指示器（绿/黄/红）
|
|
|
|
|
|
- **平滑动画**: CSS 过渡动画，提升交互体验
|
|
|
|
|
|
- **错误处理**: 友好的错误提示和处理机制
|
|
|
|
|
|
|
|
|
|
|
|
## 🔌 **API 接口**
|
|
|
|
|
|
|
|
|
|
|
|
### 📡 **状态 API**
|
|
|
|
|
|
```
|
|
|
|
|
|
GET /api/status - 获取服务运行状态
|
|
|
|
|
|
GET /api/system/proxy - 获取系统代理信息
|
|
|
|
|
|
GET /api/routing/stats - 获取路由统计信息
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### ⚙️ **控制 API**
|
|
|
|
|
|
```
|
|
|
|
|
|
POST /api/proxy/toggle - 切换系统代理状态
|
|
|
|
|
|
GET /api/config - 获取当前配置信息
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
### 🖥️ **界面路由**
|
|
|
|
|
|
```
|
|
|
|
|
|
GET /gui - Web GUI 主界面
|
|
|
|
|
|
GET /static/style.css - 样式文件
|
|
|
|
|
|
GET /static/app.js - JavaScript 应用
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## 🌐 **浏览器兼容性**
|
|
|
|
|
|
|
|
|
|
|
|
### ✅ **支持的浏览器**
|
|
|
|
|
|
- **Chrome/Chromium**: 70+ 版本
|
|
|
|
|
|
- **Firefox**: 65+ 版本
|
|
|
|
|
|
- **Safari**: 12+ 版本
|
|
|
|
|
|
- **Edge**: 79+ 版本（Chromium 内核）
|
|
|
|
|
|
|
|
|
|
|
|
### 🚫 **不支持的浏览器**
|
|
|
|
|
|
- Internet Explorer（所有版本）
|
|
|
|
|
|
- Chrome < 70
|
|
|
|
|
|
- Firefox < 65
|
|
|
|
|
|
- Safari < 12
|
|
|
|
|
|
|
|
|
|
|
|
## 🔒 **安全特性**
|
|
|
|
|
|
|
|
|
|
|
|
### 🛡️ **访问控制**
|
|
|
|
|
|
- **本地绑定**: 默认只绑定 127.0.0.1，仅允许本地访问
|
|
|
|
|
|
- **无认证**: 当前版本无需登录（适合本地使用）
|
|
|
|
|
|
- **CORS 支持**: 支持跨域请求，便于 API 集成
|
|
|
|
|
|
|
|
|
|
|
|
### 🔐 **数据安全**
|
|
|
|
|
|
- **无敏感信息**: GUI 不显示密码等敏感配置
|
|
|
|
|
|
- **安全传输**: 建议通过 HTTPS 代理访问
|
|
|
|
|
|
- **最小权限**: GUI 只能查看状态，不能修改核心配置
|
|
|
|
|
|
|
|
|
|
|
|
## 📈 **性能优化**
|
|
|
|
|
|
|
|
|
|
|
|
### ⚡ **加载优化**
|
|
|
|
|
|
- **内嵌资源**: CSS/JS 内嵌，减少 HTTP 请求
|
|
|
|
|
|
- **缓存策略**: 静态资源缓存，提升加载速度
|
|
|
|
|
|
- **压缩优化**: 代码压缩和优化，减小传输体积
|
|
|
|
|
|
|
|
|
|
|
|
### 🔧 **运行优化**
|
|
|
|
|
|
- **异步操作**: 所有 API 调用均为异步，不阻塞界面
|
|
|
|
|
|
- **智能刷新**: 根据页面可见性智能控制刷新频率
|
|
|
|
|
|
- **内存管理**: 及时清理定时器和事件监听器
|
|
|
|
|
|
|
|
|
|
|
|
### 📊 **监控优化**
|
|
|
|
|
|
- **轻量级**: GUI 对系统资源占用极小
|
|
|
|
|
|
- **低延迟**: 本地通信，响应速度快
|
|
|
|
|
|
- **高可用**: 即使 GUI 异常也不影响代理功能
|
|
|
|
|
|
|
|
|
|
|
|
## 🔮 **未来规划**
|
|
|
|
|
|
|
|
|
|
|
|
### 🚧 **开发中功能**
|
|
|
|
|
|
- **配置编辑**: Web 界面直接编辑配置文件
|
|
|
|
|
|
- **日志查看**: 实时日志流和历史日志查看
|
|
|
|
|
|
- **性能图表**: 流量、连接数的图表可视化
|
|
|
|
|
|
- **规则管理**: 可视化的路由规则编辑器
|
|
|
|
|
|
|
|
|
|
|
|
### 💡 **计划功能**
|
|
|
|
|
|
- **多语言支持**: 英文、中文等多语言界面
|
|
|
|
|
|
- **主题切换**: 深色/浅色主题支持
|
|
|
|
|
|
- **用户认证**: 可选的用户认证和权限控制
|
|
|
|
|
|
- **WebSocket**: 实时数据推送，替代轮询
|
|
|
|
|
|
|
|
|
|
|
|
### 🎯 **长期目标**
|
|
|
|
|
|
- **移动 App**: 基于 Web 技术的移动应用
|
|
|
|
|
|
- **桌面客户端**: Electron 桌面应用
|
|
|
|
|
|
- **插件系统**: 支持第三方插件扩展
|
|
|
|
|
|
- **云端管理**: 多设备的云端统一管理
|
|
|
|
|
|
|
|
|
|
|
|
## 📞 **支持和反馈**
|
|
|
|
|
|
|
|
|
|
|
|
### 🐛 **问题报告**
|
|
|
|
|
|
如遇到 GUI 相关问题，请提供以下信息：
|
|
|
|
|
|
- 浏览器类型和版本
|
|
|
|
|
|
- 操作系统版本
|
|
|
|
|
|
- 错误截图或日志
|
|
|
|
|
|
- 复现步骤
|
|
|
|
|
|
|
|
|
|
|
|
### 💬 **功能建议**
|
|
|
|
|
|
欢迎提出 GUI 改进建议：
|
|
|
|
|
|
- 界面设计优化
|
|
|
|
|
|
- 功能需求建议
|
|
|
|
|
|
- 用户体验改进
|
|
|
|
|
|
- 性能优化建议
|
|
|
|
|
|
|
|
|
|
|
|
### 📖 **文档改进**
|
|
|
|
|
|
文档持续改进中，欢迎贡献：
|
|
|
|
|
|
- 使用指南完善
|
|
|
|
|
|
- 常见问题补充
|
|
|
|
|
|
- 最佳实践分享
|
|
|
|
|
|
- 多语言翻译
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
**🎉 感谢使用 Wormhole SOCKS5 Client Web GUI！**
|
