2.2技术预览版更新内容已写入

static/app.js

@@ -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,6 +809,11 @@ const app = createApp({
             scrollLogToBottom,
 
             showToken,
+
+            // ---- 新增 Ping 相关导出 ----
+            pingLatency,
+            pingStatusClass,
+            pingIcon,
         };
     },
 });

static/index.html

@@ -87,6 +87,7 @@
 
             <!-- ====== 主界面 ====== -->
             <div v-else class="main-panel" :class="{ visible: contentVisible }">
+
                 <!-- 顶部导航 -->
                 <div class="top-bar">
                     <div class="top-left">
@@ -96,12 +97,10 @@
                             <span class="status-wrapper">
                                 <span class="status-dot" :class="{ active: frpcRunning }"></span>
                                 <span class="status-text">{{ frpcRunning ? 'frpc 运行中' : 'frpc 已停止' }}</span>
-
                                 <!-- Ping 延迟显示 -->
-                                <span v-if="frpcRunning" class="ping-display" :class="pingStatusClass">
+                                <span class="ping-display" :class="pingStatusClass">
                                     <span class="ping-icon" v-html="pingIcon"></span>
-                                    <span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms'
+                                    <span class="ping-value">{{ pingLatency !== null ? pingLatency + 'ms' : '--ms' }}</span>
-                                        }}</span>
                                 </span>
                             </span>
                         </div>
@@ -168,18 +167,16 @@
 
                     <!-- ====== 全局配置信息 ====== -->
                     <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">
                             首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
                         </div>
 
-                        <!-- ===== 卡片1: 服务器连接 ===== -->
+                        <!-- 卡片1: 服务器连接 -->
                         <div class="config-card">
                             <div class="config-card-header">
                                 <span class="card-title">服务器连接</span>
@@ -206,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">
@@ -237,7 +233,6 @@
                                     <label>连接池大小（个）</label>
                                     <input type="number" v-model="globalConfig.poolCount" />
                                 </div>
-                                <!-- v2 协议开关 -->
                                 <div class="form-row v2-switch-row">
                                     <label>frp v2 隧道支持</label>
                                     <div class="v2-switch-wrapper">
@@ -253,7 +248,7 @@
                             </div>
                         </div>
 
-                        <!-- ===== 卡片3: 日志配置 ===== -->
+                        <!-- 卡片3: 日志配置 -->
                         <div class="config-card">
                             <div class="config-card-header">
                                 <span class="card-title">日志配置</span>
@@ -276,14 +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>
@@ -299,7 +291,6 @@
                             </div>
                         </div>
 
-                        <!-- 日志显示区域 -->
                         <div class="log-terminal" id="logContainer">
                             <div v-if="logLines.length === 0 && !logError" class="log-empty">
                                 暂无日志，frpc 尚未产生输出
@@ -309,7 +300,6 @@
                             </div>
                         </div>
 
-                        <!-- 底部状态 -->
                         <div class="log-footer">
                             <span>上次更新: {{ logLastUpdate || '--:--:--' }}</span>
                             <span class="log-polling-status">自动刷新中 (8s)</span>
@@ -349,43 +339,46 @@
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
 
-        <!-- ====== 弹窗 ====== -->
+                </div> <!-- /content-area -->
-        <Transition name="dialog">
+
-            <div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
+                <!-- ====== 弹窗 ====== -->
-                <div class="dialog-card">
+                <Transition name="dialog">
-                    <h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
+                    <div v-if="dialogVisible" class="dialog-overlay" @click.self="dialogVisible = false">
-                    <div class="dialog-form">
+                        <div class="dialog-card">
-                        <div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div>
+                            <h3>{{ dialogMode === 'add' ? '新增隧道' : '编辑隧道' }}</h3>
-                        <div class="form-row">
+                            <div class="dialog-form">
-                            <label>类型</label>
+                                <div class="form-row"><label>名称</label><input v-model="dialogForm.name" /></div>
-                            <select v-model="dialogForm.type">
+                                <div class="form-row">
-                                <option value="tcp">tcp</option>
+                                    <label>类型</label>
-                                <option value="udp">udp</option>
+                                    <select v-model="dialogForm.type">
-                                <option value="http">http</option>
+                                        <option value="tcp">tcp</option>
-                                <option value="https">https</option>
+                                        <option value="udp">udp</option>
-                            </select>
+                                        <option value="http">http</option>
-                        </div>
+                                        <option value="https">https</option>
-                        <div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div>
+                                    </select>
-                        <div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" />
+                                </div>
-                        </div>
+                                <div class="form-row"><label>本地 IP</label><input v-model="dialogForm.localIP" /></div>
-                        <div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" />
+                                <div class="form-row"><label>本地端口</label><input type="number" v-model="dialogForm.localPort" />
+                                </div>
+                                <div class="form-row"><label>远程端口</label><input type="number" v-model="dialogForm.remotePort" />
+                                </div>
+                            </div>
+                            <div class="dialog-actions">
+                                <button class="btn-cancel" @click="dialogVisible = false">取消</button>
+                                <button class="btn-confirm" @click="confirmDialog">确认</button>
+                            </div>
                         </div>
                     </div>
-                    <div class="dialog-actions">
+                </Transition>
-                        <button class="btn-cancel" @click="dialogVisible = false">取消</button>
+
-                        <button class="btn-confirm" @click="confirmDialog">确认</button>
+            </div> <!-- /main-panel -->
-                    </div>
+        </div> <!-- /app-container -->
-                </div>
-            </div>
-        </Transition>
 
         <!-- 隐藏文件选择器 -->
         <input type="file" id="tomlFileInput" accept=".toml" style="display:none" @change="handleImport" />
-    </div>
+
+    </div> <!-- /#app -->
 
     <script src="/static/app.js"></script>
 </body>