2.2技术预览版更新内容已写入
This commit is contained in:
+97
-93
@@ -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) {
|
||||
@@ -205,93 +209,6 @@ async function fetchLogsApi() {
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 新增：Ping 延迟检测 ----
|
||||
const pingLatency = ref(null); // null 表示未接入/失败
|
||||
const pingInterval = ref(null);
|
||||
const PING_INTERVAL_MS = 30000; // 30 秒轮询一次
|
||||
const PING_TIMEOUT_MS = 5000; // 5 秒超时
|
||||
|
||||
// 计算 ping 状态 class
|
||||
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';
|
||||
});
|
||||
|
||||
// 根据状态返回对应 SVG 图标（内联）
|
||||
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>`;
|
||||
});
|
||||
|
||||
// 执行 Ping 检测
|
||||
async function doPing() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
// 启动 Ping 轮询
|
||||
function startPingPolling() {
|
||||
if (pingInterval.value) return;
|
||||
doPing();
|
||||
pingInterval.value = setInterval(doPing, PING_INTERVAL_MS);
|
||||
}
|
||||
|
||||
function stopPingPolling() {
|
||||
if (pingInterval.value) {
|
||||
clearInterval(pingInterval.value);
|
||||
pingInterval.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 在登录后启动，退出时停止
|
||||
// 在 loadAllData 成功后调用 startPingPolling()
|
||||
// 在 doLogout 中调用 stopPingPolling()
|
||||
// 监听 frpcRunning 变化：如果为 false，清空 pingLatency
|
||||
watch(frpcRunning, (running) => {
|
||||
if (!running) {
|
||||
pingLatency.value = null;
|
||||
stopPingPolling();
|
||||
} else if (loggedIn.value) {
|
||||
startPingPolling();
|
||||
}
|
||||
});
|
||||
|
||||
// ============================================================
|
||||
// 7. UI State
|
||||
// ============================================================
|
||||
@@ -381,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();
|
||||
@@ -388,7 +379,6 @@ const app = createApp({
|
||||
|
||||
// ---- 初始化 ----
|
||||
onMounted(() => {
|
||||
// 监听认证过期事件
|
||||
window.addEventListener("auth:expired", handleAuthExpired);
|
||||
|
||||
const saved = loadAuthState();
|
||||
@@ -415,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");
|
||||
@@ -454,7 +453,6 @@ const app = createApp({
|
||||
logFetching = true;
|
||||
try {
|
||||
const result = await fetchLogsApi();
|
||||
// ---- 如果 API 返回 401，停止轮询（事件已触发登出） ----
|
||||
if (result.code === 401) {
|
||||
logFetching = false;
|
||||
return;
|
||||
@@ -586,6 +584,7 @@ const app = createApp({
|
||||
const doLogout = () => {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
stopLogPolling();
|
||||
stopPingPolling();
|
||||
contentVisible.value = false;
|
||||
loggedIn.value = false;
|
||||
token.value = "";
|
||||
@@ -745,7 +744,7 @@ const app = createApp({
|
||||
|
||||
// ---- 计算属性 ----
|
||||
const filteredProxies = computed(() =>
|
||||
filterProxies(proxies.value, searchKeyword.value)
|
||||
filterProxies(proxies.value, searchKeyword.value),
|
||||
);
|
||||
|
||||
const showDefaultTip = computed(() => {
|
||||
@@ -810,8 +809,13 @@ const app = createApp({
|
||||
scrollLogToBottom,
|
||||
|
||||
showToken,
|
||||
|
||||
// ---- 新增 Ping 相关导出 ----
|
||||
pingLatency,
|
||||
pingStatusClass,
|
||||
pingIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
app.mount("#app");
|
||||
|
||||
Reference in New Issue
Block a user