logo优化、逻辑调整、动作变动、边际问题发现并修复

2026-07-23 23:38:41 +08:00
parent be4e0aec14
commit 28b045e48c
4 changed files with 111 additions and 101 deletions
@@ -1,9 +0,0 @@
-2026-07-23 23:08:37.413 [I] [sub/root.go:201] start frpc service for config file [./frpc.toml] with aggregated configuration
-2026-07-23 23:08:37.422 [I] [client/service.go:308] try to connect to server...
-2026-07-23 23:08:37.587 [I] [client/service.go:328] [e42214c3339795cc] login to server success, get run id [e42214c3339795cc]
-2026-07-23 23:11:52.981 [I] [sub/root.go:201] start frpc service for config file [./frpc.toml] with aggregated configuration
-2026-07-23 23:11:52.991 [I] [client/service.go:308] try to connect to server...
-2026-07-23 23:11:53.214 [I] [client/service.go:328] [5fc7383f8cd6b111] login to server success, get run id [5fc7383f8cd6b111]
-2026-07-23 23:13:55.183 [I] [sub/root.go:201] start frpc service for config file [./frpc.toml] with aggregated configuration
-2026-07-23 23:13:55.201 [I] [client/service.go:308] try to connect to server...
-2026-07-23 23:13:55.366 [I] [client/service.go:328] [39fcc2092c9b87ae] login to server success, get run id [39fcc2092c9b87ae]
@@ -1,21 +0,0 @@
-serverAddr = "frp.whitetop.xyz"
-serverPort = 9358
-
-[auth]
-token = "Lxh10020328"
-
-[log]
-to = "./frpc.log"
-level = "info"
-maxDays = 3
-
-[transport]
-tcpMux = true
-tcpMuxKeepaliveInterval = 30
-heartbeatInterval = 15
-heartbeatTimeout = 70
-poolCount = 8
-
-[webServer]
-addr = "127.0.0.1:7400"
-
@@ -1,21 +1,27 @@
+// app.js - 普通脚本（非模块）
+
 const { createApp, ref, reactive, computed, onMounted } = Vue;

 // ============================================================
-// API
+// 1. 基础 API
 // ============================================================
 const API_BASE = "/api";
+
 function getToken() {
    return localStorage.getItem("frpc_token") || "";
 }
+
 function getHeaders() {
    return {
        "Content-Type": "application/json",
        Authorization: "Bearer " + getToken(),
    };
 }
+
 async function apiFetch(endpoint, options = {}) {
    const url = API_BASE + endpoint;
-    const headers = options.body instanceof FormData
+    const headers =
+        options.body instanceof FormData
            ? { Authorization: "Bearer " + getToken() }
            : getHeaders();
    const res = await fetch(url, {
@@ -26,7 +32,7 @@ async function apiFetch(endpoint, options = {}) {
 }

 // ============================================================
-// Auth
+// 2. Auth
 // ============================================================
 function parseJwtExpire(token) {
    try {
@@ -36,6 +42,7 @@ function parseJwtExpire(token) {
        return Date.now() + 7 * 24 * 60 * 60 * 1000;
    }
 }
+
 function saveAuthState(token, username) {
    const expire = parseJwtExpire(token);
    localStorage.setItem("frpc_token", token);
@@ -43,6 +50,7 @@ function saveAuthState(token, username) {
    localStorage.setItem("frpc_username", username);
    return expire;
 }
+
 function loadAuthState() {
    const token = localStorage.getItem("frpc_token");
    const expire = parseInt(localStorage.getItem("frpc_token_expire") || "0", 10);
@@ -53,11 +61,13 @@ function loadAuthState() {
    clearAuthState();
    return { token: "", expire: 0, username: "", valid: false };
 }
+
 function clearAuthState() {
    localStorage.removeItem("frpc_token");
    localStorage.removeItem("frpc_token_expire");
    localStorage.removeItem("frpc_username");
 }
+
 async function login(username, password) {
    const data = await apiFetch("/login", {
        method: "POST",
@@ -72,7 +82,7 @@ async function login(username, password) {
 }

 // ============================================================
-// Config
+// 3. Config
 // ============================================================
 const defaultConfig = {
    serverAddr: "frp.whitetop.xyz",
@@ -86,6 +96,7 @@ const defaultConfig = {
    heartbeatTimeout: 70,
    poolCount: 8,
 };
+
 async function loadConfig() {
    try {
        const data = await apiFetch("/config");
@@ -97,6 +108,7 @@ async function loadConfig() {
    }
    return { ...defaultConfig };
 }
+
 async function saveConfigApi(config) {
    const data = await apiFetch("/config", {
        method: "PUT",
@@ -106,7 +118,7 @@ async function saveConfigApi(config) {
 }

 // ============================================================
-// Proxies
+// 4. Proxies
 // ============================================================
 async function loadProxies() {
    try {
@@ -119,6 +131,7 @@ async function loadProxies() {
    }
    return [];
 }
+
 async function createProxy(proxy) {
    const data = await apiFetch("/proxy", {
        method: "POST",
@@ -126,6 +139,7 @@ async function createProxy(proxy) {
    });
    return data;
 }
+
 async function updateProxy(proxy) {
    const data = await apiFetch("/proxy/" + proxy.id, {
        method: "PUT",
@@ -133,16 +147,19 @@ async function updateProxy(proxy) {
    });
    return data;
 }
+
 async function deleteProxy(id) {
    const data = await apiFetch("/proxy/" + id, {
        method: "DELETE",
    });
    return data;
 }
+
 function filterProxies(list, keyword) {
    if (!keyword) return list;
    const kw = keyword.toLowerCase();
-    return list.filter(p =>
+    return list.filter(
+        (p) =>
            p.name.toLowerCase().includes(kw) ||
            p.localIP.includes(kw) ||
            String(p.remotePort).includes(kw)
@@ -150,7 +167,7 @@ function filterProxies(list, keyword) {
 }

 // ============================================================
-// Frpc
+// 5. Frpc
 // ============================================================
 async function getFrpcStatus() {
    try {
@@ -165,7 +182,7 @@ async function getFrpcStatus() {
 }

 // ============================================================
-// UI State
+// 6. UI State
 // ============================================================
 const activeTab = ref("proxies");
 const dialogVisible = ref(false);
@@ -182,73 +199,29 @@ const searchKeyword = ref("");

 function openAddDialog() {
    dialogMode.value = "add";
-    dialogForm.value = { id: null, name: "", type: "tcp", localIP: "", localPort: 0, remotePort: 0 };
+    dialogForm.value = {
+        id: null,
+        name: "",
+        type: "tcp",
+        localIP: "",
+        localPort: 0,
+        remotePort: 0,
+    };
    dialogVisible.value = true;
 }
+
 function openEditDialog(proxy) {
    dialogMode.value = "edit";
    dialogForm.value = { ...proxy };
    dialogVisible.value = true;
 }
+
 function closeDialog() {
    dialogVisible.value = false;
 }

 // ============================================================
-// Import / Export
-// ============================================================
-async function triggerImport() {
-    document.getElementById("tomlFileInput").click();
-}
-async function handleImport(e) {
-    const file = e.target.files[0];
-    if (!file) return;
-    const formData = new FormData();
-    formData.append("file", file);
-    try {
-        const res = await fetch("/api/import/toml", {
-            method: "POST",
-            headers: { Authorization: "Bearer " + getToken() },
-            body: formData,
-        });
-        const data = await res.json();
-        if (data.code === 0) {
-            alert(data.msg);
-            await loadAllData();
-        } else {
-            alert("导入失败: " + data.msg);
-        }
-    } catch (err) {
-        alert("网络错误: " + err.message);
-    }
-    e.target.value = "";
-}
-async function exportToml() {
-    try {
-        const res = await fetch("/api/export/toml", {
-            method: "GET",
-            headers: { Authorization: "Bearer " + getToken() },
-        });
-        if (!res.ok) {
-            const data = await res.json();
-            alert("导出失败: " + (data.msg || "未知错误"));
-            return;
-        }
-        const blob = await res.blob();
-        const a = document.createElement("a");
-        a.href = URL.createObjectURL(blob);
-        a.download = "frpc.toml";
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(a.href);
-    } catch (e) {
-        alert("导出失败: " + e.message);
-    }
-}
-
-// ============================================================
-// Vue App
+// 7. Vue App
 // ============================================================
 const app = createApp({
    setup() {
@@ -394,6 +367,9 @@ const app = createApp({
                });
                const data = await res.json();
                if (data.code === 0) {
+                    // ✅ 注册成功，不再是首次启动
+                    isFirstRun.value = false;
+
                    const token = data.data.token;
                    const expire = saveAuthState(token, registerForm.username);
                    token.value = token;
@@ -430,6 +406,14 @@ const app = createApp({
            loading.value = false;
            transitioning.value = false;
            clearAuthState();
+
+            // ✅ 重置注册相关状态
+            isFirstRun.value = false;
+            registerForm.username = "";
+            registerForm.password = "";
+            registerForm.confirmPassword = "";
+            registerError.value = "";
+            registering.value = false;
        };

        // ---- 修改密码 ----
@@ -488,6 +472,7 @@ const app = createApp({
                frpcRunning.value = await getFrpcStatus();
            }
        };
+
        const removeProxy = async (id) => {
            if (!confirm("确定要删除这条隧道吗？")) return;
            const result = await deleteProxy(id);
@@ -498,13 +483,15 @@ const app = createApp({
                alert("删除失败: " + result.msg);
            }
        };
+
        const confirmDialog = async () => {
            const form = dialogForm.value;
            if (!form.name || !form.localIP || !form.localPort || !form.remotePort) {
                alert("请填写完整信息");
                return;
            }
-            const result = dialogMode.value === "add"
+            const result =
+                dialogMode.value === "add"
                    ? await createProxy(form)
                    : await updateProxy(form);
            if (result.code === 0) {
@@ -516,6 +503,59 @@ const app = createApp({
            }
        };

+        // ---- 导入导出（已移入 setup，可访问 loadAllData） ----
+        const triggerImport = () => {
+            document.getElementById("tomlFileInput").click();
+        };
+
+        const handleImport = async (e) => {
+            const file = e.target.files[0];
+            if (!file) return;
+            const formData = new FormData();
+            formData.append("file", file);
+            try {
+                const res = await fetch("/api/import/toml", {
+                    method: "POST",
+                    headers: { Authorization: "Bearer " + getToken() },
+                    body: formData,
+                });
+                const data = await res.json();
+                if (data.code === 0) {
+                    alert(data.msg);
+                    await loadAllData();
+                } else {
+                    alert("导入失败: " + data.msg);
+                }
+            } catch (err) {
+                alert("网络错误: " + err.message);
+            }
+            e.target.value = "";
+        };
+
+        const exportToml = async () => {
+            try {
+                const res = await fetch("/api/export/toml", {
+                    method: "GET",
+                    headers: { Authorization: "Bearer " + getToken() },
+                });
+                if (!res.ok) {
+                    const data = await res.json();
+                    alert("导出失败: " + (data.msg || "未知错误"));
+                    return;
+                }
+                const blob = await res.blob();
+                const a = document.createElement("a");
+                a.href = URL.createObjectURL(blob);
+                a.download = "frpc.toml";
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(a.href);
+            } catch (e) {
+                alert("导出失败: " + e.message);
+            }
+        };
+
        // ---- 计算属性 ----
        const filteredProxies = computed(() =>
            filterProxies(proxies.value, searchKeyword.value)