Compare commits
3 Commits
4c0aeeb96d
...
e34d8c600c
| Author | SHA1 | Date |
|---|---|---|
 huyinsong
|
e34d8c600c | 2 weeks ago |
|
huyinsong
|
c28c786b15 | 2 weeks ago |
|
huyinsong
|
0376a5f39d | 2 weeks ago |
@ -0,0 +1,265 @@ |
|||||||
|
package gui |
||||||
|
|
||||||
|
import ( |
||||||
|
"encoding/json" |
||||||
|
"fmt" |
||||||
|
"html/template" |
||||||
|
"net/http" |
||||||
|
"path/filepath" |
||||||
|
"runtime" |
||||||
|
"strings" |
||||||
|
|
||||||
|
"github.com/azoic/wormhole-client/internal/config" |
||||||
|
"github.com/azoic/wormhole-client/internal/proxy" |
||||||
|
"github.com/azoic/wormhole-client/internal/routing" |
||||||
|
"github.com/azoic/wormhole-client/internal/system" |
||||||
|
"github.com/azoic/wormhole-client/pkg/logger" |
||||||
|
) |
||||||
|
|
||||||
|
// GUIServer Web GUI 服务器
|
||||||
|
type GUIServer struct { |
||||||
|
config *config.Config |
||||||
|
socks5Proxy *proxy.SOCKS5Proxy |
||||||
|
systemProxyMgr *system.SystemProxyManager |
||||||
|
routeMatcher *routing.RouteMatcher |
||||||
|
mode string |
||||||
|
templates *template.Template |
||||||
|
} |
||||||
|
|
||||||
|
// NewGUIServer 创建 GUI 服务器
|
||||||
|
func NewGUIServer(cfg *config.Config, socks5Proxy *proxy.SOCKS5Proxy, |
||||||
|
systemProxyMgr *system.SystemProxyManager, routeMatcher *routing.RouteMatcher, mode string) *GUIServer { |
||||||
|
|
||||||
|
gui := &GUIServer{ |
||||||
|
config: cfg, |
||||||
|
socks5Proxy: socks5Proxy, |
||||||
|
systemProxyMgr: systemProxyMgr, |
||||||
|
routeMatcher: routeMatcher, |
||||||
|
mode: mode, |
||||||
|
} |
||||||
|
|
||||||
|
// 加载模板
|
||||||
|
gui.loadTemplates() |
||||||
|
|
||||||
|
return gui |
||||||
|
} |
||||||
|
|
||||||
|
// RegisterRoutes 注册 GUI 路由
|
||||||
|
func (g *GUIServer) RegisterRoutes(mux *http.ServeMux) { |
||||||
|
// 静态文件路由
|
||||||
|
mux.HandleFunc("/static/", g.handleStatic) |
||||||
|
|
||||||
|
// Web 界面路由
|
||||||
|
mux.HandleFunc("/gui", g.handleGUI) |
||||||
|
mux.HandleFunc("/gui/", g.handleGUI) |
||||||
|
|
||||||
|
// API 路由
|
||||||
|
mux.HandleFunc("/api/status", g.handleStatus) |
||||||
|
mux.HandleFunc("/api/config", g.handleConfig) |
||||||
|
mux.HandleFunc("/api/proxy/toggle", g.handleProxyToggle) |
||||||
|
mux.HandleFunc("/api/routing/stats", g.handleRoutingStats) |
||||||
|
mux.HandleFunc("/api/system/proxy", g.handleSystemProxy) |
||||||
|
} |
||||||
|
|
||||||
|
// handleGUI 处理 GUI 主页面
|
||||||
|
func (g *GUIServer) handleGUI(w http.ResponseWriter, r *http.Request) { |
||||||
|
if r.Method != http.MethodGet { |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
w.Header().Set("Content-Type", "text/html; charset=utf-8") |
||||||
|
|
||||||
|
data := g.getTemplateData() |
||||||
|
|
||||||
|
if err := g.templates.Execute(w, data); err != nil { |
||||||
|
logger.Error("Failed to execute template: %v", err) |
||||||
|
http.Error(w, "Internal Server Error", http.StatusInternalServerError) |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// handleStatic 处理静态文件
|
||||||
|
func (g *GUIServer) handleStatic(w http.ResponseWriter, r *http.Request) { |
||||||
|
path := strings.TrimPrefix(r.URL.Path, "/static/") |
||||||
|
|
||||||
|
var content string |
||||||
|
var contentType string |
||||||
|
|
||||||
|
switch filepath.Ext(path) { |
||||||
|
case ".css": |
||||||
|
content = g.getCSS() |
||||||
|
contentType = "text/css" |
||||||
|
case ".js": |
||||||
|
content = g.getJS() |
||||||
|
contentType = "application/javascript" |
||||||
|
default: |
||||||
|
http.NotFound(w, r) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
w.Header().Set("Content-Type", contentType) |
||||||
|
w.Write([]byte(content)) |
||||||
|
} |
||||||
|
|
||||||
|
// handleStatus 处理状态 API
|
||||||
|
func (g *GUIServer) handleStatus(w http.ResponseWriter, r *http.Request) { |
||||||
|
if r.Method != http.MethodGet { |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
var proxyStats interface{} |
||||||
|
if g.socks5Proxy != nil { |
||||||
|
proxyStats = g.socks5Proxy.GetStats() |
||||||
|
} |
||||||
|
|
||||||
|
var routingStats interface{} |
||||||
|
if g.routeMatcher != nil { |
||||||
|
routingStats = g.routeMatcher.GetStats() |
||||||
|
} |
||||||
|
|
||||||
|
status := map[string]interface{}{ |
||||||
|
"mode": g.mode, |
||||||
|
"system_proxy": g.systemProxyMgr.IsEnabled(), |
||||||
|
"proxy_stats": proxyStats, |
||||||
|
"routing_stats": routingStats, |
||||||
|
"server_addr": g.config.GetServerAddr(), |
||||||
|
"local_port": g.config.Proxy.LocalPort, |
||||||
|
"os": runtime.GOOS, |
||||||
|
} |
||||||
|
|
||||||
|
g.writeJSON(w, status) |
||||||
|
} |
||||||
|
|
||||||
|
// handleConfig 处理配置 API
|
||||||
|
func (g *GUIServer) handleConfig(w http.ResponseWriter, r *http.Request) { |
||||||
|
switch r.Method { |
||||||
|
case http.MethodGet: |
||||||
|
g.writeJSON(w, g.config) |
||||||
|
case http.MethodPost: |
||||||
|
// TODO: 实现配置更新
|
||||||
|
http.Error(w, "Configuration update not implemented", http.StatusNotImplemented) |
||||||
|
default: |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// handleProxyToggle 处理代理开关
|
||||||
|
func (g *GUIServer) handleProxyToggle(w http.ResponseWriter, r *http.Request) { |
||||||
|
if r.Method != http.MethodPost { |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
var req struct { |
||||||
|
Enable bool `json:"enable"` |
||||||
|
} |
||||||
|
|
||||||
|
if err := json.NewDecoder(r.Body).Decode(&req); err != nil { |
||||||
|
http.Error(w, "Invalid JSON", http.StatusBadRequest) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
if req.Enable && !g.systemProxyMgr.IsEnabled() { |
||||||
|
// 启用系统代理
|
||||||
|
httpProxy := fmt.Sprintf("127.0.0.1:%d", g.config.Proxy.LocalPort) |
||||||
|
if err := g.systemProxyMgr.SetGlobalProxy(httpProxy, httpProxy, ""); err != nil { |
||||||
|
g.writeJSON(w, map[string]interface{}{ |
||||||
|
"success": false, |
||||||
|
"error": err.Error(), |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
} else if !req.Enable && g.systemProxyMgr.IsEnabled() { |
||||||
|
// 禁用系统代理
|
||||||
|
if err := g.systemProxyMgr.RestoreProxy(); err != nil { |
||||||
|
g.writeJSON(w, map[string]interface{}{ |
||||||
|
"success": false, |
||||||
|
"error": err.Error(), |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
g.writeJSON(w, map[string]interface{}{ |
||||||
|
"success": true, |
||||||
|
"enabled": g.systemProxyMgr.IsEnabled(), |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// handleRoutingStats 处理路由统计
|
||||||
|
func (g *GUIServer) handleRoutingStats(w http.ResponseWriter, r *http.Request) { |
||||||
|
if r.Method != http.MethodGet { |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
var stats interface{} |
||||||
|
if g.routeMatcher != nil { |
||||||
|
stats = g.routeMatcher.GetStats() |
||||||
|
} |
||||||
|
|
||||||
|
g.writeJSON(w, stats) |
||||||
|
} |
||||||
|
|
||||||
|
// handleSystemProxy 处理系统代理信息
|
||||||
|
func (g *GUIServer) handleSystemProxy(w http.ResponseWriter, r *http.Request) { |
||||||
|
if r.Method != http.MethodGet { |
||||||
|
http.Error(w, "Method not allowed", http.StatusMethodNotAllowed) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
currentProxy, err := g.systemProxyMgr.GetCurrentProxy() |
||||||
|
if err != nil { |
||||||
|
g.writeJSON(w, map[string]interface{}{ |
||||||
|
"error": err.Error(), |
||||||
|
}) |
||||||
|
return |
||||||
|
} |
||||||
|
|
||||||
|
g.writeJSON(w, map[string]interface{}{ |
||||||
|
"enabled": g.systemProxyMgr.IsEnabled(), |
||||||
|
"current_proxy": currentProxy, |
||||||
|
}) |
||||||
|
} |
||||||
|
|
||||||
|
// writeJSON 写入 JSON 响应
|
||||||
|
func (g *GUIServer) writeJSON(w http.ResponseWriter, data interface{}) { |
||||||
|
w.Header().Set("Content-Type", "application/json") |
||||||
|
w.Header().Set("Access-Control-Allow-Origin", "*") |
||||||
|
|
||||||
|
if err := json.NewEncoder(w).Encode(data); err != nil { |
||||||
|
logger.Error("Failed to encode JSON: %v", err) |
||||||
|
http.Error(w, "Internal Server Error", http.StatusInternalServerError) |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// getTemplateData 获取模板数据
|
||||||
|
func (g *GUIServer) getTemplateData() map[string]interface{} { |
||||||
|
var proxyStats interface{} |
||||||
|
if g.socks5Proxy != nil { |
||||||
|
proxyStats = g.socks5Proxy.GetStats() |
||||||
|
} |
||||||
|
|
||||||
|
var routingStats interface{} |
||||||
|
if g.routeMatcher != nil { |
||||||
|
routingStats = g.routeMatcher.GetStats() |
||||||
|
} |
||||||
|
|
||||||
|
return map[string]interface{}{ |
||||||
|
"Title": "Wormhole SOCKS5 Client", |
||||||
|
"Mode": g.mode, |
||||||
|
"ServerAddr": g.config.GetServerAddr(), |
||||||
|
"LocalPort": g.config.Proxy.LocalPort, |
||||||
|
"SystemProxy": g.systemProxyMgr.IsEnabled(), |
||||||
|
"ProxyStats": proxyStats, |
||||||
|
"RoutingStats": routingStats, |
||||||
|
"OS": runtime.GOOS, |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// loadTemplates 加载模板
|
||||||
|
func (g *GUIServer) loadTemplates() { |
||||||
|
g.templates = template.Must(template.New("index.html").Parse(g.getHTMLTemplate())) |
||||||
|
} |
||||||
@ -0,0 +1,843 @@ |
|||||||
|
package gui |
||||||
|
|
||||||
|
// getHTMLTemplate 返回 HTML 模板
|
||||||
|
func (g *GUIServer) getHTMLTemplate() string { |
||||||
|
return ` |
||||||
|
<!DOCTYPE html> |
||||||
|
<html lang="zh-CN"> |
||||||
|
<head> |
||||||
|
<meta charset="UTF-8"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
<title>{{.Title}}</title> |
||||||
|
<link rel="stylesheet" href="/static/style.css"> |
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div class="container"> |
||||||
|
<!-- 头部 --> |
||||||
|
<header class="header"> |
||||||
|
<div class="header-content"> |
||||||
|
<div class="logo"> |
||||||
|
<i class="fas fa-globe"></i> |
||||||
|
<h1>{{.Title}}</h1> |
||||||
|
</div> |
||||||
|
<div class="status-indicator"> |
||||||
|
<span class="status-dot" id="statusDot"></span> |
||||||
|
<span id="statusText">正在检查...</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</header> |
||||||
|
|
||||||
|
<!-- 主要内容 --> |
||||||
|
<main class="main-content"> |
||||||
|
<!-- 代理控制面板 --> |
||||||
|
<section class="panel proxy-panel"> |
||||||
|
<div class="panel-header"> |
||||||
|
<h2><i class="fas fa-network-wired"></i> 代理控制</h2> |
||||||
|
</div> |
||||||
|
<div class="panel-content"> |
||||||
|
<div class="proxy-info"> |
||||||
|
<div class="info-item"> |
||||||
|
<label>运行模式:</label> |
||||||
|
<span class="mode-badge" id="modeText">{{.Mode}}</span> |
||||||
|
</div> |
||||||
|
<div class="info-item"> |
||||||
|
<label>服务器地址:</label> |
||||||
|
<span>{{.ServerAddr}}</span> |
||||||
|
</div> |
||||||
|
<div class="info-item"> |
||||||
|
<label>本地端口:</label> |
||||||
|
<span>{{.LocalPort}}</span> |
||||||
|
</div> |
||||||
|
<div class="info-item"> |
||||||
|
<label>操作系统:</label> |
||||||
|
<span>{{.OS}}</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="proxy-controls"> |
||||||
|
<button id="toggleProxy" class="btn btn-primary"> |
||||||
|
<i class="fas fa-power-off"></i> |
||||||
|
<span id="toggleText">启用系统代理</span> |
||||||
|
</button> |
||||||
|
<button id="refreshStatus" class="btn btn-secondary"> |
||||||
|
<i class="fas fa-sync-alt"></i> |
||||||
|
刷新状态 |
||||||
|
</button> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<!-- 统计信息面板 --> |
||||||
|
<section class="panel stats-panel"> |
||||||
|
<div class="panel-header"> |
||||||
|
<h2><i class="fas fa-chart-line"></i> 连接统计</h2> |
||||||
|
</div> |
||||||
|
<div class="panel-content"> |
||||||
|
<div class="stats-grid"> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="totalConnections">-</div> |
||||||
|
<div class="stat-label">总连接数</div> |
||||||
|
</div> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="activeConnections">-</div> |
||||||
|
<div class="stat-label">活跃连接</div> |
||||||
|
</div> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="successRate">-</div> |
||||||
|
<div class="stat-label">成功率</div> |
||||||
|
</div> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="uptime">-</div> |
||||||
|
<div class="stat-label">运行时间</div> |
||||||
|
</div> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="bytesTransferred">-</div> |
||||||
|
<div class="stat-label">传输流量</div> |
||||||
|
</div> |
||||||
|
<div class="stat-item"> |
||||||
|
<div class="stat-value" id="failedRequests">-</div> |
||||||
|
<div class="stat-label">失败请求</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<!-- 路由配置面板 --> |
||||||
|
<section class="panel routing-panel"> |
||||||
|
<div class="panel-header"> |
||||||
|
<h2><i class="fas fa-route"></i> 路由配置</h2> |
||||||
|
</div> |
||||||
|
<div class="panel-content"> |
||||||
|
<div class="routing-stats"> |
||||||
|
<div class="routing-item"> |
||||||
|
<label>绕过域名数量:</label> |
||||||
|
<span id="bypassDomainsCount">-</span> |
||||||
|
</div> |
||||||
|
<div class="routing-item"> |
||||||
|
<label>强制代理域名:</label> |
||||||
|
<span id="forceDomainsCount">-</span> |
||||||
|
</div> |
||||||
|
<div class="routing-item"> |
||||||
|
<label>绕过本地网络:</label> |
||||||
|
<span id="bypassLocal">-</span> |
||||||
|
</div> |
||||||
|
<div class="routing-item"> |
||||||
|
<label>绕过私有网络:</label> |
||||||
|
<span id="bypassPrivate">-</span> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
|
||||||
|
<!-- 系统信息面板 --> |
||||||
|
<section class="panel system-panel"> |
||||||
|
<div class="panel-header"> |
||||||
|
<h2><i class="fas fa-cog"></i> 系统信息</h2> |
||||||
|
</div> |
||||||
|
<div class="panel-content"> |
||||||
|
<div class="system-info"> |
||||||
|
<div class="info-item"> |
||||||
|
<label>系统代理状态:</label> |
||||||
|
<span id="systemProxyStatus" class="status-badge">检查中...</span> |
||||||
|
</div> |
||||||
|
<div class="info-item"> |
||||||
|
<label>当前代理设置:</label> |
||||||
|
<div id="currentProxySettings">-</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</section> |
||||||
|
</main> |
||||||
|
|
||||||
|
<!-- 底部 --> |
||||||
|
<footer class="footer"> |
||||||
|
<p>© 2024 Wormhole SOCKS5 Client | <a href="/stats" target="_blank">JSON API</a> |
|
||||||
|
<a href="/health" target="_blank">健康检查</a></p> |
||||||
|
</footer> |
||||||
|
</div> |
||||||
|
|
||||||
|
<!-- 加载脚本 --> |
||||||
|
<script src="/static/app.js"></script> |
||||||
|
</body> |
||||||
|
</html>` |
||||||
|
} |
||||||
|
|
||||||
|
// getCSS 返回 CSS 样式
|
||||||
|
func (g *GUIServer) getCSS() string { |
||||||
|
return ` |
||||||
|
/* 全局样式 */ |
||||||
|
* { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; |
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); |
||||||
|
min-height: 100vh; |
||||||
|
color: #333; |
||||||
|
} |
||||||
|
|
||||||
|
.container { |
||||||
|
max-width: 1200px; |
||||||
|
margin: 0 auto; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 头部样式 */ |
||||||
|
.header { |
||||||
|
background: rgba(255, 255, 255, 0.95); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
border-radius: 12px; |
||||||
|
padding: 20px; |
||||||
|
margin-bottom: 30px; |
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
||||||
|
} |
||||||
|
|
||||||
|
.header-content { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
} |
||||||
|
|
||||||
|
.logo { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.logo i { |
||||||
|
font-size: 2.5em; |
||||||
|
color: #667eea; |
||||||
|
} |
||||||
|
|
||||||
|
.logo h1 { |
||||||
|
font-size: 2em; |
||||||
|
color: #333; |
||||||
|
font-weight: 600; |
||||||
|
} |
||||||
|
|
||||||
|
.status-indicator { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 10px; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.status-dot { |
||||||
|
width: 12px; |
||||||
|
height: 12px; |
||||||
|
border-radius: 50%; |
||||||
|
background: #ffd700; |
||||||
|
animation: pulse 2s infinite; |
||||||
|
} |
||||||
|
|
||||||
|
.status-dot.connected { |
||||||
|
background: #00ff00; |
||||||
|
} |
||||||
|
|
||||||
|
.status-dot.disconnected { |
||||||
|
background: #ff4444; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes pulse { |
||||||
|
0%, 100% { opacity: 1; } |
||||||
|
50% { opacity: 0.5; } |
||||||
|
} |
||||||
|
|
||||||
|
/* 主要内容样式 */ |
||||||
|
.main-content { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); |
||||||
|
gap: 25px; |
||||||
|
margin-bottom: 30px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 面板样式 */ |
||||||
|
.panel { |
||||||
|
background: rgba(255, 255, 255, 0.95); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
border-radius: 12px; |
||||||
|
overflow: hidden; |
||||||
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); |
||||||
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.panel:hover { |
||||||
|
transform: translateY(-5px); |
||||||
|
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); |
||||||
|
} |
||||||
|
|
||||||
|
.panel-header { |
||||||
|
background: linear-gradient(135deg, #667eea, #764ba2); |
||||||
|
color: white; |
||||||
|
padding: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-header h2 { |
||||||
|
font-size: 1.3em; |
||||||
|
font-weight: 600; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.panel-content { |
||||||
|
padding: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 代理面板样式 */ |
||||||
|
.proxy-info { |
||||||
|
margin-bottom: 25px; |
||||||
|
} |
||||||
|
|
||||||
|
.info-item { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 12px 0; |
||||||
|
border-bottom: 1px solid #eee; |
||||||
|
} |
||||||
|
|
||||||
|
.info-item:last-child { |
||||||
|
border-bottom: none; |
||||||
|
} |
||||||
|
|
||||||
|
.info-item label { |
||||||
|
font-weight: 600; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
.mode-badge { |
||||||
|
background: #667eea; |
||||||
|
color: white; |
||||||
|
padding: 4px 12px; |
||||||
|
border-radius: 20px; |
||||||
|
font-size: 0.9em; |
||||||
|
font-weight: 500; |
||||||
|
text-transform: uppercase; |
||||||
|
} |
||||||
|
|
||||||
|
.proxy-controls { |
||||||
|
display: flex; |
||||||
|
gap: 15px; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
|
||||||
|
/* 按钮样式 */ |
||||||
|
.btn { |
||||||
|
padding: 12px 20px; |
||||||
|
border: none; |
||||||
|
border-radius: 8px; |
||||||
|
font-size: 1em; |
||||||
|
font-weight: 500; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
gap: 8px; |
||||||
|
transition: all 0.3s ease; |
||||||
|
min-width: 140px; |
||||||
|
justify-content: center; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary { |
||||||
|
background: linear-gradient(135deg, #667eea, #764ba2); |
||||||
|
color: white; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-primary:hover { |
||||||
|
background: linear-gradient(135deg, #5a6fd8, #6a4190); |
||||||
|
transform: translateY(-2px); |
||||||
|
} |
||||||
|
|
||||||
|
.btn-secondary { |
||||||
|
background: #f8f9fa; |
||||||
|
color: #333; |
||||||
|
border: 2px solid #dee2e6; |
||||||
|
} |
||||||
|
|
||||||
|
.btn-secondary:hover { |
||||||
|
background: #e9ecef; |
||||||
|
border-color: #adb5bd; |
||||||
|
transform: translateY(-2px); |
||||||
|
} |
||||||
|
|
||||||
|
.btn:disabled { |
||||||
|
opacity: 0.6; |
||||||
|
cursor: not-allowed; |
||||||
|
transform: none !important; |
||||||
|
} |
||||||
|
|
||||||
|
/* 统计面板样式 */ |
||||||
|
.stats-grid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-item { |
||||||
|
text-align: center; |
||||||
|
padding: 20px; |
||||||
|
background: #f8f9fa; |
||||||
|
border-radius: 8px; |
||||||
|
transition: transform 0.3s ease; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-item:hover { |
||||||
|
transform: scale(1.05); |
||||||
|
} |
||||||
|
|
||||||
|
.stat-value { |
||||||
|
font-size: 2em; |
||||||
|
font-weight: 700; |
||||||
|
color: #667eea; |
||||||
|
margin-bottom: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-label { |
||||||
|
font-size: 0.9em; |
||||||
|
color: #666; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
/* 路由面板样式 */ |
||||||
|
.routing-stats { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.routing-item { |
||||||
|
display: flex; |
||||||
|
justify-content: space-between; |
||||||
|
align-items: center; |
||||||
|
padding: 15px; |
||||||
|
background: #f8f9fa; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.routing-item label { |
||||||
|
font-weight: 600; |
||||||
|
color: #555; |
||||||
|
} |
||||||
|
|
||||||
|
/* 系统面板样式 */ |
||||||
|
.system-info { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.status-badge { |
||||||
|
padding: 4px 12px; |
||||||
|
border-radius: 20px; |
||||||
|
font-size: 0.9em; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.status-badge.enabled { |
||||||
|
background: #d4edda; |
||||||
|
color: #155724; |
||||||
|
} |
||||||
|
|
||||||
|
.status-badge.disabled { |
||||||
|
background: #f8d7da; |
||||||
|
color: #721c24; |
||||||
|
} |
||||||
|
|
||||||
|
#currentProxySettings { |
||||||
|
font-family: monospace; |
||||||
|
background: #f8f9fa; |
||||||
|
padding: 10px; |
||||||
|
border-radius: 4px; |
||||||
|
font-size: 0.9em; |
||||||
|
margin-top: 5px; |
||||||
|
} |
||||||
|
|
||||||
|
/* 底部样式 */ |
||||||
|
.footer { |
||||||
|
background: rgba(255, 255, 255, 0.95); |
||||||
|
backdrop-filter: blur(10px); |
||||||
|
border-radius: 12px; |
||||||
|
padding: 20px; |
||||||
|
text-align: center; |
||||||
|
color: #666; |
||||||
|
} |
||||||
|
|
||||||
|
.footer a { |
||||||
|
color: #667eea; |
||||||
|
text-decoration: none; |
||||||
|
font-weight: 500; |
||||||
|
} |
||||||
|
|
||||||
|
.footer a:hover { |
||||||
|
text-decoration: underline; |
||||||
|
} |
||||||
|
|
||||||
|
/* 响应式设计 */ |
||||||
|
@media (max-width: 768px) { |
||||||
|
.container { |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.header-content { |
||||||
|
flex-direction: column; |
||||||
|
gap: 15px; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.main-content { |
||||||
|
grid-template-columns: 1fr; |
||||||
|
gap: 20px; |
||||||
|
} |
||||||
|
|
||||||
|
.proxy-controls { |
||||||
|
flex-direction: column; |
||||||
|
} |
||||||
|
|
||||||
|
.stats-grid { |
||||||
|
grid-template-columns: repeat(2, 1fr); |
||||||
|
gap: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-item { |
||||||
|
padding: 15px; |
||||||
|
} |
||||||
|
|
||||||
|
.stat-value { |
||||||
|
font-size: 1.5em; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
@media (max-width: 480px) { |
||||||
|
.stats-grid { |
||||||
|
grid-template-columns: 1fr; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
/* 加载动画 */ |
||||||
|
.loading { |
||||||
|
opacity: 0.6; |
||||||
|
pointer-events: none; |
||||||
|
} |
||||||
|
|
||||||
|
.spin { |
||||||
|
animation: spin 1s linear infinite; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes spin { |
||||||
|
from { transform: rotate(0deg); } |
||||||
|
to { transform: rotate(360deg); } |
||||||
|
} |
||||||
|
` |
||||||
|
} |
||||||
|
|
||||||
|
// getJS 返回 JavaScript 代码
|
||||||
|
func (g *GUIServer) getJS() string { |
||||||
|
return ` |
||||||
|
// GUI 应用主类
|
||||||
|
class WormholeGUI { |
||||||
|
constructor() { |
||||||
|
this.isLoading = false; |
||||||
|
this.updateInterval = null; |
||||||
|
this.init(); |
||||||
|
} |
||||||
|
|
||||||
|
// 初始化应用
|
||||||
|
init() { |
||||||
|
this.bindEvents(); |
||||||
|
this.startAutoUpdate(); |
||||||
|
this.updateStatus(); |
||||||
|
} |
||||||
|
|
||||||
|
// 绑定事件
|
||||||
|
bindEvents() { |
||||||
|
const toggleBtn = document.getElementById('toggleProxy'); |
||||||
|
const refreshBtn = document.getElementById('refreshStatus'); |
||||||
|
|
||||||
|
if (toggleBtn) { |
||||||
|
toggleBtn.addEventListener('click', () => this.toggleProxy()); |
||||||
|
} |
||||||
|
|
||||||
|
if (refreshBtn) { |
||||||
|
refreshBtn.addEventListener('click', () => this.updateStatus()); |
||||||
|
} |
||||||
|
|
||||||
|
// 页面可见性变化时处理
|
||||||
|
document.addEventListener('visibilitychange', () => { |
||||||
|
if (document.hidden) { |
||||||
|
this.stopAutoUpdate(); |
||||||
|
} else { |
||||||
|
this.startAutoUpdate(); |
||||||
|
this.updateStatus(); |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// 开始自动更新
|
||||||
|
startAutoUpdate() { |
||||||
|
if (this.updateInterval) return; |
||||||
|
|
||||||
|
this.updateInterval = setInterval(() => { |
||||||
|
if (!document.hidden) { |
||||||
|
this.updateStatus(); |
||||||
|
} |
||||||
|
}, 5000); // 每5秒更新一次
|
||||||
|
} |
||||||
|
|
||||||
|
// 停止自动更新
|
||||||
|
stopAutoUpdate() { |
||||||
|
if (this.updateInterval) { |
||||||
|
clearInterval(this.updateInterval); |
||||||
|
this.updateInterval = null; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 更新状态
|
||||||
|
async updateStatus() { |
||||||
|
if (this.isLoading) return; |
||||||
|
|
||||||
|
try { |
||||||
|
this.setLoading(true); |
||||||
|
|
||||||
|
// 并行获取所有数据
|
||||||
|
const [status, systemProxy, routingStats] = await Promise.all([ |
||||||
|
this.fetchAPI('/api/status'), |
||||||
|
this.fetchAPI('/api/system/proxy'), |
||||||
|
this.fetchAPI('/api/routing/stats') |
||||||
|
]); |
||||||
|
|
||||||
|
this.updateStatusDisplay(status); |
||||||
|
this.updateProxyStats(status.proxy_stats); |
||||||
|
this.updateSystemProxy(systemProxy); |
||||||
|
this.updateRoutingStats(routingStats); |
||||||
|
|
||||||
|
} catch (error) { |
||||||
|
console.error('更新状态失败:', error); |
||||||
|
this.showError('无法连接到服务器'); |
||||||
|
} finally { |
||||||
|
this.setLoading(false); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 切换代理状态
|
||||||
|
async toggleProxy() { |
||||||
|
const toggleBtn = document.getElementById('toggleProxy'); |
||||||
|
const toggleText = document.getElementById('toggleText'); |
||||||
|
|
||||||
|
if (!toggleBtn || this.isLoading) return; |
||||||
|
|
||||||
|
try { |
||||||
|
this.setLoading(true); |
||||||
|
toggleBtn.disabled = true; |
||||||
|
|
||||||
|
// 获取当前状态
|
||||||
|
const currentStatus = await this.fetchAPI('/api/system/proxy'); |
||||||
|
const isEnabled = currentStatus.enabled; |
||||||
|
|
||||||
|
// 切换状态
|
||||||
|
const response = await this.fetchAPI('/api/proxy/toggle', { |
||||||
|
method: 'POST', |
||||||
|
headers: { |
||||||
|
'Content-Type': 'application/json', |
||||||
|
}, |
||||||
|
body: JSON.stringify({ enable: !isEnabled }) |
||||||
|
}); |
||||||
|
|
||||||
|
if (response.success) { |
||||||
|
toggleText.textContent = response.enabled ? '禁用系统代理' : '启用系统代理'; |
||||||
|
toggleBtn.className = response.enabled ? 'btn btn-secondary' : 'btn btn-primary'; |
||||||
|
|
||||||
|
// 立即更新状态
|
||||||
|
setTimeout(() => this.updateStatus(), 500); |
||||||
|
} else { |
||||||
|
this.showError(response.error || '操作失败'); |
||||||
|
} |
||||||
|
|
||||||
|
} catch (error) { |
||||||
|
console.error('切换代理失败:', error); |
||||||
|
this.showError('操作失败，请检查权限'); |
||||||
|
} finally { |
||||||
|
toggleBtn.disabled = false; |
||||||
|
this.setLoading(false); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 更新状态显示
|
||||||
|
updateStatusDisplay(status) { |
||||||
|
const statusDot = document.getElementById('statusDot'); |
||||||
|
const statusText = document.getElementById('statusText'); |
||||||
|
const modeText = document.getElementById('modeText'); |
||||||
|
|
||||||
|
if (statusDot && statusText) { |
||||||
|
if (status.proxy_stats) { |
||||||
|
statusDot.className = 'status-dot connected'; |
||||||
|
statusText.textContent = '服务运行中'; |
||||||
|
} else { |
||||||
|
statusDot.className = 'status-dot disconnected'; |
||||||
|
statusText.textContent = '服务未运行'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (modeText) { |
||||||
|
modeText.textContent = status.mode || 'unknown'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 更新代理统计
|
||||||
|
updateProxyStats(stats) { |
||||||
|
if (!stats) return; |
||||||
|
|
||||||
|
this.updateElement('totalConnections', stats.total_connections); |
||||||
|
this.updateElement('activeConnections', stats.active_connections); |
||||||
|
this.updateElement('successRate', this.formatSuccessRate(stats)); |
||||||
|
this.updateElement('uptime', this.formatDuration(stats.uptime)); |
||||||
|
this.updateElement('bytesTransferred', this.formatBytes(stats.bytes_sent + stats.bytes_received)); |
||||||
|
this.updateElement('failedRequests', stats.failed_requests); |
||||||
|
} |
||||||
|
|
||||||
|
// 更新系统代理信息
|
||||||
|
updateSystemProxy(proxyInfo) { |
||||||
|
const statusElement = document.getElementById('systemProxyStatus'); |
||||||
|
const settingsElement = document.getElementById('currentProxySettings'); |
||||||
|
const toggleBtn = document.getElementById('toggleProxy'); |
||||||
|
const toggleText = document.getElementById('toggleText'); |
||||||
|
|
||||||
|
if (statusElement) { |
||||||
|
if (proxyInfo.enabled) { |
||||||
|
statusElement.textContent = '已启用'; |
||||||
|
statusElement.className = 'status-badge enabled'; |
||||||
|
} else { |
||||||
|
statusElement.textContent = '已禁用'; |
||||||
|
statusElement.className = 'status-badge disabled'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
if (settingsElement && proxyInfo.current_proxy) { |
||||||
|
const settings = Object.entries(proxyInfo.current_proxy) |
||||||
|
.map(([key, value]) => key + ': ' + value) |
||||||
|
.join('\n'); |
||||||
|
settingsElement.textContent = settings || '无代理设置'; |
||||||
|
} |
||||||
|
|
||||||
|
if (toggleBtn && toggleText) { |
||||||
|
toggleText.textContent = proxyInfo.enabled ? '禁用系统代理' : '启用系统代理'; |
||||||
|
toggleBtn.className = proxyInfo.enabled ? 'btn btn-secondary' : 'btn btn-primary'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 更新路由统计
|
||||||
|
updateRoutingStats(stats) { |
||||||
|
if (!stats) return; |
||||||
|
|
||||||
|
this.updateElement('bypassDomainsCount', stats.bypass_domains_count); |
||||||
|
this.updateElement('forceDomainsCount', stats.force_domains_count); |
||||||
|
this.updateElement('bypassLocal', stats.bypass_local ? '是' : '否'); |
||||||
|
this.updateElement('bypassPrivate', stats.bypass_private ? '是' : '否'); |
||||||
|
} |
||||||
|
|
||||||
|
// 通用元素更新
|
||||||
|
updateElement(id, value) { |
||||||
|
const element = document.getElementById(id); |
||||||
|
if (element) { |
||||||
|
element.textContent = value !== undefined ? value : '-'; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 设置加载状态
|
||||||
|
setLoading(loading) { |
||||||
|
this.isLoading = loading; |
||||||
|
const refreshBtn = document.getElementById('refreshStatus'); |
||||||
|
|
||||||
|
if (refreshBtn) { |
||||||
|
const icon = refreshBtn.querySelector('i'); |
||||||
|
if (loading) { |
||||||
|
icon.classList.add('spin'); |
||||||
|
refreshBtn.disabled = true; |
||||||
|
} else { |
||||||
|
icon.classList.remove('spin'); |
||||||
|
refreshBtn.disabled = false; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// API 请求
|
||||||
|
async fetchAPI(url, options = {}) { |
||||||
|
const response = await fetch(url, { |
||||||
|
timeout: 10000, |
||||||
|
...options |
||||||
|
}); |
||||||
|
|
||||||
|
if (!response.ok) { |
||||||
|
throw new Error(response.status + ': ' + response.statusText); |
||||||
|
} |
||||||
|
|
||||||
|
return await response.json(); |
||||||
|
} |
||||||
|
|
||||||
|
// 显示错误
|
||||||
|
showError(message) { |
||||||
|
const statusDot = document.getElementById('statusDot'); |
||||||
|
const statusText = document.getElementById('statusText'); |
||||||
|
|
||||||
|
if (statusDot && statusText) { |
||||||
|
statusDot.className = 'status-dot disconnected'; |
||||||
|
statusText.textContent = message; |
||||||
|
} |
||||||
|
|
||||||
|
console.error('GUI Error:', message); |
||||||
|
} |
||||||
|
|
||||||
|
// 格式化成功率
|
||||||
|
formatSuccessRate(stats) { |
||||||
|
const total = stats.successful_requests + stats.failed_requests; |
||||||
|
if (total === 0) return '0%'; |
||||||
|
return ((stats.successful_requests / total) * 100).toFixed(1) + '%'; |
||||||
|
} |
||||||
|
|
||||||
|
// 格式化持续时间
|
||||||
|
formatDuration(durationNs) { |
||||||
|
if (!durationNs) return '0s'; |
||||||
|
|
||||||
|
const seconds = Math.floor(durationNs / 1000000000); |
||||||
|
const minutes = Math.floor(seconds / 60); |
||||||
|
const hours = Math.floor(minutes / 60); |
||||||
|
const days = Math.floor(hours / 24); |
||||||
|
|
||||||
|
if (days > 0) return days + 'd ' + (hours % 24) + 'h'; |
||||||
|
if (hours > 0) return hours + 'h ' + (minutes % 60) + 'm'; |
||||||
|
if (minutes > 0) return minutes + 'm ' + (seconds % 60) + 's'; |
||||||
|
return seconds + 's'; |
||||||
|
} |
||||||
|
|
||||||
|
// 格式化字节数
|
||||||
|
formatBytes(bytes) { |
||||||
|
if (!bytes) return '0 B'; |
||||||
|
|
||||||
|
const units = ['B', 'KB', 'MB', 'GB', 'TB']; |
||||||
|
let size = bytes; |
||||||
|
let unitIndex = 0; |
||||||
|
|
||||||
|
while (size >= 1024 && unitIndex < units.length - 1) { |
||||||
|
size /= 1024; |
||||||
|
unitIndex++; |
||||||
|
} |
||||||
|
|
||||||
|
return size.toFixed(1) + ' ' + units[unitIndex]; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// 页面加载完成后启动应用
|
||||||
|
document.addEventListener('DOMContentLoaded', () => { |
||||||
|
window.wormholeGUI = new WormholeGUI(); |
||||||
|
}); |
||||||
|
|
||||||
|
// 页面卸载时清理
|
||||||
|
window.addEventListener('beforeunload', () => { |
||||||
|
if (window.wormholeGUI) { |
||||||
|
window.wormholeGUI.stopAutoUpdate(); |
||||||
|
} |
||||||
|
}); |
||||||
|
` |
||||||
|
} |
||||||
Loading…
Reference in new issue