引入2.1应做的全新UI变更

2026-07-28 19:11:40 +08:00
parent c2516dc8ff
commit aaac3fc791
4 changed files with 233 additions and 38 deletions
@@ -205,6 +205,93 @@ 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
 // ============================================================
@@ -87,7 +87,6 @@

            <!-- ====== 主界面 ====== -->
            <div v-else class="main-panel" :class="{ visible: contentVisible }">
-
                <!-- 顶部导航 -->
                <div class="top-bar">
                    <div class="top-left">
@@ -97,11 +96,17 @@
                            <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-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 +119,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,7 +166,6 @@
                        </div>
                    </div>

-                    <!-- ====== 全局配置信息 ====== -->
                    <!-- ====== 全局配置信息 ====== -->
                    <div v-if="activeTab === 'config'" class="tab-content config-tab-content">
                        <!-- 页面标题 -->
@@ -170,34 +176,7 @@

                        <!-- 首次使用提示 -->
                        <div v-if="showDefaultTip" class="config-tip">
-                            首次使用请修改「服务器地址」和「认证令牌」为您的真实 frpc 配置
-                        </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>
+                            首次使用请修改「服务器地址」和「认证令牌」为您的真实 frps 配置
                        </div>

                        <!-- ===== 卡片1: 服务器连接 ===== -->
@@ -242,31 +221,27 @@
                                        <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 灰标禁用） -->
+                                <!-- v2 协议开关 -->
                                <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>
@@ -304,6 +279,8 @@
                        <!-- 保存按钮 -->
                        <button class="save-config-btn" @click="saveConfig">保存配置并热加载</button>
                    </div>
+
+
                    <!-- ====== 运行日志 ====== -->
                    <div v-else-if="activeTab === 'logs'" class="tab-content log-tab-content">
                        <!-- 工具栏 -->
@@ -339,6 +316,39 @@
                        </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>
            </div>
        </div>
@@ -734,4 +734,70 @@ select:disabled {
    .dialog-card {
        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;
+    }
 }