2.2逻辑设计已完成
This commit is contained in:
@@ -6,11 +6,13 @@ import (
|
||||
"fmt"
|
||||
"io"
|
||||
"io/fs"
|
||||
"net"
|
||||
"net/http"
|
||||
"os"
|
||||
"strconv"
|
||||
"strings"
|
||||
"text/template"
|
||||
"time"
|
||||
|
||||
"github.com/gin-gonic/gin"
|
||||
"golang.org/x/crypto/bcrypt"
|
||||
@@ -64,7 +66,7 @@ func SetupRouter() *gin.Engine {
|
||||
auth.POST("/frpc/stop", stopFrpcHandler)
|
||||
auth.GET("/frpc/status", getFrpcStatusHandler)
|
||||
auth.GET("/frpc/log", getFrpcLogHandler)
|
||||
|
||||
auth.GET("/ping", pingHandler)
|
||||
auth.POST("/import/toml", importTomlHandler)
|
||||
auth.GET("/export/toml", ExportTomlHandler)
|
||||
|
||||
@@ -143,6 +145,36 @@ func registerHandler(c *gin.Context) {
|
||||
})
|
||||
}
|
||||
|
||||
// Ping 延迟检测
|
||||
func pingHandler(c *gin.Context) {
|
||||
target := c.Query("target")
|
||||
if target == "" {
|
||||
c.JSON(http.StatusBadRequest, gin.H{"code": 1, "msg": "缺少 target 参数"})
|
||||
return
|
||||
}
|
||||
|
||||
// 获取全局配置（获取服务端端口）
|
||||
cfg, err := GetGlobalConfig()
|
||||
if err != nil {
|
||||
c.JSON(http.StatusInternalServerError, gin.H{"code": 2, "msg": "读取配置失败"})
|
||||
return
|
||||
}
|
||||
|
||||
port := cfg.ServerPort
|
||||
address := net.JoinHostPort(target, strconv.Itoa(port))
|
||||
|
||||
start := time.Now()
|
||||
conn, err := net.DialTimeout("tcp", address, 5*time.Second)
|
||||
if err != nil {
|
||||
c.JSON(http.StatusOK, gin.H{"code": 1, "msg": "ping 失败", "latency": -1})
|
||||
return
|
||||
}
|
||||
conn.Close()
|
||||
|
||||
latency := time.Since(start).Milliseconds()
|
||||
c.JSON(http.StatusOK, gin.H{"code": 0, "latency": latency})
|
||||
}
|
||||
|
||||
func loginHandler(c *gin.Context) {
|
||||
var req struct {
|
||||
Username string `json:"username"`
|
||||
|
||||
@@ -142,7 +142,14 @@ go build -ldflags="-s -w" -o frpc-console .
|
||||
|
||||
#### Q: frpc 启动失败怎么办？
|
||||
|
||||
检查 frpc.toml 配置是否正确，或查看 ./frpc.log 日志文件。
|
||||
如果是首次启动，console 会自动生成一份符合官方规范的 `frps.toml` 配置文件，通常不需要额外操作。
|
||||
|
||||
如果在使用过程中遇到启动失败，可以按以下步骤排查：
|
||||
|
||||
1. **检查配置是否正确** —— 在「全局配置」页面重新配置一次服务端参数，或导入已有的 `frpc.toml` 配置文件，console 会自动应用并尝试重启
|
||||
2. **查看日志定位问题** —— 若上述操作后仍然失败，请查看 `./frpc.log` 日志文件，定位具体报错原因
|
||||
|
||||
> 日志文件的位置：与 `frpc-console` 二进制同级目录下的 `frpc.log`。Docker 部署时，可通过 `docker logs frpc-console` 查看容器输出。
|
||||
|
||||
#### Q: 支持哪些 frp 版本？
|
||||
|
||||
@@ -289,7 +296,7 @@ frpc-console 遵循 **“够用就好”** 的原则：
|
||||
|
||||
## 📄 许可证
|
||||
|
||||
MIT License © 2026 Gitea:lxh2875931338/Github:XHLiang0
|
||||
MIT License © 2026 lxh2875931338（XHLiang0）
|
||||
|
||||
---
|
||||
|
||||
|
||||
+96
-5
@@ -171,7 +171,7 @@ function filterProxies(list, keyword) {
|
||||
(p) =>
|
||||
p.name.toLowerCase().includes(kw) ||
|
||||
p.localIP.includes(kw) ||
|
||||
String(p.remotePort).includes(kw)
|
||||
String(p.remotePort).includes(kw),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -197,7 +197,11 @@ async function fetchLogsApi() {
|
||||
try {
|
||||
const data = await apiFetch("/frpc/log");
|
||||
if (data.code === 0) {
|
||||
return { lines: data.data.lines || [], total: data.data.total || 0, error: data.data.error || "" };
|
||||
return {
|
||||
lines: data.data.lines || [],
|
||||
total: data.data.total || 0,
|
||||
error: data.data.error || "",
|
||||
};
|
||||
}
|
||||
return { lines: [], total: 0, error: "加载失败" };
|
||||
} catch (e) {
|
||||
@@ -294,6 +298,80 @@ const app = createApp({
|
||||
let logTimer = null;
|
||||
let logFetching = false;
|
||||
|
||||
// ---- Ping 延迟检测（移到 setup 内部） ----
|
||||
const pingLatency = ref(null);
|
||||
let pingTimer = null;
|
||||
const PING_INTERVAL_MS = 30000;
|
||||
const PING_TIMEOUT_MS = 5000;
|
||||
|
||||
const pingStatusClass = computed(() => {
|
||||
if (pingLatency.value === null) return "ping-fail";
|
||||
if (pingLatency.value < 1000) return "ping-good";
|
||||
if (pingLatency.value < 5000) return "ping-slow";
|
||||
return "ping-fail";
|
||||
});
|
||||
|
||||
const pingIcon = computed(() => {
|
||||
if (pingLatency.value === null) {
|
||||
// 未接入/失败 —— 断开图标
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 256 256">
|
||||
<path d="M0 0h256v256H0z" fill="none"/>
|
||||
<g fill="currentColor">
|
||||
<path d="m224.39 104.34-90.24 108.78a8 8 0 0 1-12.3 0L17.8 87.69a7.79 7.79 0 0 1 1.31-11.21A179.58 179.58 0 0 1 128 40a182 182 0 0 1 33.06 3a7.94 7.94 0 0 1 4.17 2.21L224 104Z" opacity=".2"/>
|
||||
<path d="M229.66 98.34a8 8 0 0 1-11.32 11.32L200 91.31l-18.34 18.35a8 8 0 0 1-11.32-11.32L188.69 80l-18.35-18.34a8 8 0 0 1 11.32-11.32L200 68.69l18.34-18.35a8 8 0 0 1 11.32 11.32L211.31 80Zm-33.06 39.5a8 8 0 0 0-11.27 1L128 208L24.09 82.74A170.76 170.76 0 0 1 128 48c2.54 0 5.11.06 7.65.17a8 8 0 0 0 .7-16c-2.77-.12-5.58-.18-8.35-.18A186.67 186.67 0 0 0 14.28 70.1a15.93 15.93 0 0 0-6.17 10.81a15.65 15.65 0 0 0 3.54 11.89l104 125.43A15.93 15.93 0 0 0 128 224a15.93 15.93 0 0 0 12.31-5.77l57.34-69.12a8 8 0 0 0-1.05-11.27"/>
|
||||
</g>
|
||||
</svg>`;
|
||||
}
|
||||
if (pingLatency.value < 1000) {
|
||||
// 延迟好 —— 实心信号图标（青色/绿色）
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 25 24">
|
||||
<path d="M0 0h25v24H0z" fill="none"/>
|
||||
<path fill="currentColor" d="M2.046 6.725c6.192-4.967 15.05-4.967 21.243 0l.779.625l-11.4 14.25L1.265 7.35z"/>
|
||||
</svg>`;
|
||||
}
|
||||
// 延迟一般（1000-5000ms）—— 空心信号图标（黄色/橙色）
|
||||
return `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">
|
||||
<path d="M0 0h24v24H0z" fill="none"/>
|
||||
<path fill="none" stroke="currentColor" stroke-width="2" d="M21.996 7.505L12 20L2.004 7.505c5.827-4.673 14.165-4.673 19.992 0Z"/>
|
||||
</svg>`;
|
||||
});
|
||||
|
||||
async function doPing() {
|
||||
// 如果 frpc 未运行，直接显示 --ms
|
||||
if (!frpcRunning.value) {
|
||||
pingLatency.value = null;
|
||||
return;
|
||||
}
|
||||
const addr = globalConfig.serverAddr || "frp.example.com";
|
||||
const start = performance.now();
|
||||
try {
|
||||
const res = await fetch(
|
||||
`/api/ping?target=${encodeURIComponent(addr)}`,
|
||||
{
|
||||
signal: AbortSignal.timeout(PING_TIMEOUT_MS),
|
||||
},
|
||||
);
|
||||
if (!res.ok) throw new Error("Ping failed");
|
||||
const end = performance.now();
|
||||
pingLatency.value = Math.round(end - start);
|
||||
} catch {
|
||||
pingLatency.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
function startPingPolling() {
|
||||
if (pingTimer) return;
|
||||
doPing();
|
||||
pingTimer = setInterval(doPing, PING_INTERVAL_MS);
|
||||
}
|
||||
|
||||
function stopPingPolling() {
|
||||
if (pingTimer) {
|
||||
clearInterval(pingTimer);
|
||||
pingTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 认证过期处理 ----
|
||||
const handleAuthExpired = () => {
|
||||
doLogout();
|
||||
@@ -301,7 +379,6 @@ const app = createApp({
|
||||
|
||||
// ---- 初始化 ----
|
||||
onMounted(() => {
|
||||
// 监听认证过期事件
|
||||
window.addEventListener("auth:expired", handleAuthExpired);
|
||||
|
||||
const saved = loadAuthState();
|
||||
@@ -328,6 +405,15 @@ const app = createApp({
|
||||
}
|
||||
});
|
||||
|
||||
watch(frpcRunning, (running) => {
|
||||
if (!running) {
|
||||
stopPingPolling();
|
||||
pingLatency.value = null; // 显示 --ms
|
||||
} else if (loggedIn.value) {
|
||||
startPingPolling();
|
||||
}
|
||||
});
|
||||
|
||||
async function checkUsers() {
|
||||
try {
|
||||
const res = await fetch("/api/check/users");
|
||||
@@ -367,7 +453,6 @@ const app = createApp({
|
||||
logFetching = true;
|
||||
try {
|
||||
const result = await fetchLogsApi();
|
||||
// ---- 如果 API 返回 401，停止轮询（事件已触发登出） ----
|
||||
if (result.code === 401) {
|
||||
logFetching = false;
|
||||
return;
|
||||
@@ -499,6 +584,7 @@ const app = createApp({
|
||||
const doLogout = () => {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
stopLogPolling();
|
||||
stopPingPolling();
|
||||
contentVisible.value = false;
|
||||
loggedIn.value = false;
|
||||
token.value = "";
|
||||
@@ -658,7 +744,7 @@ const app = createApp({
|
||||
|
||||
// ---- 计算属性 ----
|
||||
const filteredProxies = computed(() =>
|
||||
filterProxies(proxies.value, searchKeyword.value)
|
||||
filterProxies(proxies.value, searchKeyword.value),
|
||||
);
|
||||
|
||||
const showDefaultTip = computed(() => {
|
||||
@@ -723,6 +809,11 @@ const app = createApp({
|
||||
scrollLogToBottom,
|
||||
|
||||
showToken,
|
||||
|
||||
// ---- 新增 Ping 相关导出 ----
|
||||
pingLatency,
|
||||
pingStatusClass,
|
||||
pingIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
+50
-47
@@ -97,11 +97,15 @@
|
||||
<span class="status-wrapper">
|
||||
<span class="status-dot" :class="{ active: frpcRunning }"></span>
|
||||
<span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span>
|
||||
<!-- Ping 延迟显示 -->
|
||||
<span class="ping-display" :class="pingStatusClass">
|
||||
<span class="ping-icon" v-html="pingIcon"></span>
|
||||
<span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms' }}</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="top-right">
|
||||
<span class="user-name">{{ loginForm.username }}</span>
|
||||
<button class="logout-btn" @click="doLogout">退出</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -114,6 +118,8 @@
|
||||
@click="activeTab = 'config'">全局配置信息</span>
|
||||
<span class="tab-item" :class="{ active: activeTab === 'logs' }"
|
||||
@click="activeTab = 'logs'">运行日志</span>
|
||||
<span class="tab-item" :class="{ active: activeTab === 'user' }"
|
||||
@click="activeTab = 'user'">用户配置：{{loginForm.username }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 内容区 -->
|
||||
@@ -159,48 +165,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== 全局配置信息 ====== -->
|
||||
<!-- ====== 全局配置信息 ====== -->
|
||||
<div v-if="activeTab === 'config'" class="tab-content config-tab-content">
|
||||
<!-- 页面标题 -->
|
||||
<div class="config-page-header">
|
||||
<h2>全局配置信息</h2>
|
||||
<p class="config-subtitle">管理 frpc 连接参数与传输设置</p>
|
||||
</div>
|
||||
|
||||
<!-- 首次使用提示 -->
|
||||
<div v-if="showDefaultTip" class="config-tip">
|
||||
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frpc 配置
|
||||
首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
|
||||
</div>
|
||||
|
||||
<!-- ===== 账户管理 ===== -->
|
||||
<div class="profile-section">
|
||||
<div class="profile-header">
|
||||
<span>账户管理</span>
|
||||
<span class="profile-username">{{ loginForm.username }}</span>
|
||||
</div>
|
||||
<div class="profile-form">
|
||||
<div class="form-row">
|
||||
<label>当前密码</label>
|
||||
<input v-model="passwordChange.oldPassword" type="password" placeholder="输入当前密码" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>新密码</label>
|
||||
<input v-model="passwordChange.newPassword" type="password"
|
||||
placeholder="至少8位，含大小写/数字/特殊字符" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>确认新密码</label>
|
||||
<input v-model="passwordChange.confirmPassword" type="password"
|
||||
placeholder="再次输入新密码" />
|
||||
</div>
|
||||
<button class="save-btn" @click="changePassword">修改密码</button>
|
||||
<p v-if="passwordChangeError" class="login-error">{{ passwordChangeError }}</p>
|
||||
<p v-if="passwordChangeSuccess" class="login-success">{{ passwordChangeSuccess }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 卡片1: 服务器连接 ===== -->
|
||||
<!-- 卡片1: 服务器连接 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<span class="card-title">服务器连接</span>
|
||||
@@ -227,13 +203,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 卡片2: 传输配置 ===== -->
|
||||
<!-- 卡片2: 传输配置 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<span class="card-title">传输配置</span>
|
||||
</div>
|
||||
<div class="config-card-body">
|
||||
<!-- TCP 多路复用（只读，占满一行） -->
|
||||
<div class="form-row" style="grid-column: 1 / -1;">
|
||||
<label>TCP 多路复用</label>
|
||||
<div class="readonly-value">
|
||||
@@ -242,31 +217,26 @@
|
||||
<span class="hint-text">优化连接性能，减少延迟，frp 官方推荐开启</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 保活间隔 -->
|
||||
<div class="form-row">
|
||||
<label>保活间隔（秒）</label>
|
||||
<input type="number" v-model="globalConfig.tcpMuxKeepalive" />
|
||||
</div>
|
||||
<!-- 心跳间隔 -->
|
||||
<div class="form-row">
|
||||
<label>心跳间隔（秒）</label>
|
||||
<input type="number" v-model="globalConfig.heartbeatInterval" />
|
||||
</div>
|
||||
<!-- 心跳超时 -->
|
||||
<div class="form-row">
|
||||
<label>心跳超时（秒）</label>
|
||||
<input type="number" v-model="globalConfig.heartbeatTimeout" />
|
||||
</div>
|
||||
<!-- 连接池大小 -->
|
||||
<div class="form-row">
|
||||
<label>连接池大小（个）</label>
|
||||
<input type="number" v-model="globalConfig.poolCount" />
|
||||
</div>
|
||||
<!-- v2 协议开关（v1.5 灰标禁用） -->
|
||||
<div class="form-row v2-switch-row">
|
||||
<label>frp v2 隧道支持</label>
|
||||
<div class="v2-switch-wrapper">
|
||||
<label class="switch disabled">
|
||||
<label class="switch">
|
||||
<input type="checkbox" v-model="globalConfig.wireProtocolV2" />
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
@@ -278,7 +248,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ===== 卡片3: 日志配置 ===== -->
|
||||
<!-- 卡片3: 日志配置 -->
|
||||
<div class="config-card">
|
||||
<div class="config-card-header">
|
||||
<span class="card-title">日志配置</span>
|
||||
@@ -301,12 +271,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 保存按钮 -->
|
||||
<button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
|
||||
</div>
|
||||
|
||||
<!-- ====== 运行日志 ====== -->
|
||||
<div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content">
|
||||
<!-- 工具栏 -->
|
||||
<div class="log-toolbar">
|
||||
<div class="log-toolbar-left">
|
||||
<span class="log-info-badge">共 {{ logTotal }} 行</span>
|
||||
@@ -322,7 +291,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 日志显示区域 -->
|
||||
<div class="log-terminal" id="logContainer">
|
||||
<div v-if="logLines.length === 0 && !logError" class="log-empty">
|
||||
暂无日志，frpc 尚未产生输出
|
||||
@@ -332,17 +300,48 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部状态 -->
|
||||
<div class="log-footer">
|
||||
<span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
|
||||
<span class="log-polling-status">自动刷新中 (8s)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ====== 用户配置 ====== -->
|
||||
<div v-if="activeTab === 'user'" class="tab-content config-tab-content">
|
||||
<div class="config-page-header">
|
||||
<h2>用户配置：{{ loginForm.username }}</h2>
|
||||
<p class="config-subtitle">修改当前账户的登录密码</p>
|
||||
</div>
|
||||
|
||||
<div class="profile-section">
|
||||
<div class="profile-header">
|
||||
<span>账户管理</span>
|
||||
<span class="profile-username">{{ loginForm.username }}</span>
|
||||
</div>
|
||||
<div class="profile-form">
|
||||
<div class="form-row">
|
||||
<label>当前密码</label>
|
||||
<input v-model="passwordChange.oldPassword" type="password" placeholder="输入当前密码" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>新密码</label>
|
||||
<input v-model="passwordChange.newPassword" type="password"
|
||||
placeholder="至少8位，含大小写/数字/特殊字符" />
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<label>确认新密码</label>
|
||||
<input v-model="passwordChange.confirmPassword" type="password"
|
||||
placeholder="再次输入新密码" />
|
||||
</div>
|
||||
<button class="save-btn" @click="changePassword">修改密码</button>
|
||||
<p v-if="passwordChangeError" class="login-error">{{ passwordChangeError }}</p>
|
||||
<p v-if="passwordChangeSuccess" class="login-success">{{ passwordChangeSuccess }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> <!-- /content-area -->
|
||||
|
||||
<!-- ====== 弹窗 ====== -->
|
||||
<Transition name="dialog">
|
||||
<div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
|
||||
@@ -373,9 +372,13 @@
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div> <!-- /main-panel -->
|
||||
</div> <!-- /app-container -->
|
||||
|
||||
<!-- 隐藏文件选择器 -->
|
||||
<input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
|
||||
</div>
|
||||
|
||||
</div> <!-- /#app -->
|
||||
|
||||
<script src="/static/app.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -735,3 +735,69 @@ select:disabled {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ---------- Ping 延迟显示 ---------- */
|
||||
.status-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.ping-display {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 2px 8px 2px 4px;
|
||||
border-radius: 12px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.ping-display .ping-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.ping-display .ping-icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* 状态颜色 */
|
||||
.ping-good .ping-icon {
|
||||
color: #63e2b7;
|
||||
}
|
||||
.ping-good .ping-value {
|
||||
color: #63e2b7;
|
||||
}
|
||||
|
||||
.ping-slow .ping-icon {
|
||||
color: #f0c040;
|
||||
}
|
||||
.ping-slow .ping-value {
|
||||
color: #f0c040;
|
||||
}
|
||||
|
||||
.ping-fail .ping-icon {
|
||||
color: #f87171;
|
||||
}
|
||||
.ping-fail .ping-value {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.ping-display {
|
||||
font-size: 11px;
|
||||
padding: 1px 6px 1px 2px;
|
||||
}
|
||||
.ping-display .ping-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user