首次推送
This commit is contained in:
+607
@@ -0,0 +1,607 @@
|
||||
// app.js - 普通脚本（非模块）
|
||||
|
||||
const { createApp, ref, reactive, computed, onMounted, nextTick, watch } = Vue;
|
||||
|
||||
// ============================================================
|
||||
// 1. 基础 API
|
||||
// ============================================================
|
||||
const API_BASE = "/api";
|
||||
|
||||
function getToken() {
|
||||
return localStorage.getItem("frps_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
|
||||
? { Authorization: "Bearer " + getToken() }
|
||||
: getHeaders();
|
||||
const res = await fetch(url, {
|
||||
...options,
|
||||
headers: { ...headers, ...(options.headers || {}) },
|
||||
});
|
||||
return res.json();
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 2. Auth
|
||||
// ============================================================
|
||||
function parseJwtExpire(token) {
|
||||
try {
|
||||
const payload = JSON.parse(atob(token.split(".")[1]));
|
||||
return payload.exp * 1000;
|
||||
} catch {
|
||||
return Date.now() + 7 * 24 * 60 * 60 * 1000;
|
||||
}
|
||||
}
|
||||
|
||||
function saveAuthState(token, username) {
|
||||
const expire = parseJwtExpire(token);
|
||||
localStorage.setItem("frps_token", token);
|
||||
localStorage.setItem("frps_token_expire", String(expire));
|
||||
localStorage.setItem("frps_username", username);
|
||||
return expire;
|
||||
}
|
||||
|
||||
function loadAuthState() {
|
||||
const token = localStorage.getItem("frps_token");
|
||||
const expire = parseInt(localStorage.getItem("frps_token_expire") || "0", 10);
|
||||
const username = localStorage.getItem("frps_username") || "";
|
||||
if (token && expire > Date.now()) {
|
||||
return { token, expire, username, valid: true };
|
||||
}
|
||||
clearAuthState();
|
||||
return { token: "", expire: 0, username: "", valid: false };
|
||||
}
|
||||
|
||||
function clearAuthState() {
|
||||
localStorage.removeItem("frps_token");
|
||||
localStorage.removeItem("frps_token_expire");
|
||||
localStorage.removeItem("frps_username");
|
||||
}
|
||||
|
||||
async function login(username, password) {
|
||||
const data = await apiFetch("/login", {
|
||||
method: "POST",
|
||||
body: JSON.stringify({ username, password }),
|
||||
});
|
||||
if (data.code === 0) {
|
||||
const token = data.data.token;
|
||||
const expire = saveAuthState(token, username);
|
||||
return { success: true, token, expire };
|
||||
}
|
||||
return { success: false, error: data.msg || "登录失败" };
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 3. Config
|
||||
// ============================================================
|
||||
const defaultConfig = {
|
||||
bindPort: 9358,
|
||||
token: "CHANGE_ME",
|
||||
logLevel: "info",
|
||||
logMaxDays: 3,
|
||||
tcpMux: true,
|
||||
};
|
||||
|
||||
async function loadConfig() {
|
||||
try {
|
||||
const data = await apiFetch("/config");
|
||||
if (data.code === 0) {
|
||||
return { ...defaultConfig, ...data.data };
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("加载配置失败", e);
|
||||
}
|
||||
return { ...defaultConfig };
|
||||
}
|
||||
|
||||
async function saveConfigApi(config) {
|
||||
const data = await apiFetch("/config", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(config),
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 4. Clients
|
||||
// ============================================================
|
||||
async function loadClients() {
|
||||
try {
|
||||
const data = await apiFetch("/clients");
|
||||
if (data.code === 0) {
|
||||
return data.data || [];
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("加载客户端失败", e);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
function filterClients(list, keyword) {
|
||||
if (!keyword) return list;
|
||||
const kw = keyword.toLowerCase();
|
||||
return list.filter(
|
||||
(c) =>
|
||||
(c.name || "").toLowerCase().includes(kw) ||
|
||||
String(c.id).includes(kw) ||
|
||||
(c.os || "").toLowerCase().includes(kw)
|
||||
);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 5. Frps
|
||||
// ============================================================
|
||||
async function getFrpsStatus() {
|
||||
try {
|
||||
const data = await apiFetch("/frps/status");
|
||||
if (data.code === 0) {
|
||||
return data.data.running || false;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("获取 frps 状态失败", e);
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 6. Logs
|
||||
// ============================================================
|
||||
async function fetchLogsApi() {
|
||||
try {
|
||||
const data = await apiFetch("/frps/log");
|
||||
if (data.code === 0) {
|
||||
return { lines: data.data.lines || [], total: data.data.total || 0, error: data.data.error || "" };
|
||||
}
|
||||
return { lines: [], total: 0, error: "加载失败" };
|
||||
} catch (e) {
|
||||
return { lines: [], total: 0, error: "网络错误" };
|
||||
}
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
// 7. UI State
|
||||
// ============================================================
|
||||
const activeTab = ref("clients");
|
||||
const searchKeyword = ref("");
|
||||
const showToken = ref(false);
|
||||
|
||||
// ============================================================
|
||||
// 8. Vue App
|
||||
// ============================================================
|
||||
const app = createApp({
|
||||
setup() {
|
||||
// ---- 登录态 ----
|
||||
const loggedIn = ref(false);
|
||||
const loading = ref(false);
|
||||
const loginError = ref("");
|
||||
const loginForm = reactive({ username: "", password: "" });
|
||||
const token = ref("");
|
||||
const tokenExpireTime = ref(0);
|
||||
const transitioning = ref(false);
|
||||
const contentVisible = ref(false);
|
||||
let expireTimer = null;
|
||||
|
||||
// ---- 注册 ----
|
||||
const isFirstRun = ref(false);
|
||||
const registerForm = reactive({
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
const registerError = ref("");
|
||||
const registering = ref(false);
|
||||
|
||||
// ---- 数据 ----
|
||||
const globalConfig = reactive({});
|
||||
const clients = ref([]);
|
||||
const clientsLoaded = ref(false);
|
||||
const frpsRunning = ref(false);
|
||||
|
||||
// ---- 修改密码 ----
|
||||
const passwordChange = reactive({
|
||||
oldPassword: "",
|
||||
newPassword: "",
|
||||
confirmPassword: "",
|
||||
});
|
||||
const passwordChangeError = ref("");
|
||||
const passwordChangeSuccess = ref("");
|
||||
|
||||
// ---- 日志 ----
|
||||
const logLines = ref([]);
|
||||
const logTotal = ref(0);
|
||||
const logError = ref("");
|
||||
const logLastUpdate = ref("");
|
||||
const logAutoScroll = ref(true);
|
||||
let logTimer = null;
|
||||
let logFetching = false;
|
||||
|
||||
// ---- 初始化 ----
|
||||
onMounted(() => {
|
||||
const saved = loadAuthState();
|
||||
if (saved.valid) {
|
||||
token.value = saved.token;
|
||||
tokenExpireTime.value = saved.expire;
|
||||
loginForm.username = saved.username;
|
||||
loggedIn.value = true;
|
||||
loadAllData().then(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
});
|
||||
} else {
|
||||
checkUsers();
|
||||
}
|
||||
});
|
||||
|
||||
// ---- Tab 切换监听日志轮询 ----
|
||||
watch(activeTab, (newTab) => {
|
||||
if (newTab === "logs") {
|
||||
startLogPolling();
|
||||
} else {
|
||||
stopLogPolling();
|
||||
}
|
||||
if (newTab === "clients") {
|
||||
fetchClients();
|
||||
}
|
||||
});
|
||||
|
||||
async function checkUsers() {
|
||||
try {
|
||||
const res = await fetch("/api/check/users");
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
isFirstRun.value = !data.data.hasUsers;
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("检查用户状态失败", e);
|
||||
}
|
||||
}
|
||||
|
||||
function startExpireTimer() {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
expireTimer = setInterval(() => {
|
||||
if (Date.now() >= tokenExpireTime.value) {
|
||||
doLogout();
|
||||
alert("登录已超时，请重新登录");
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
async function loadAllData() {
|
||||
const [cfg, running] = await Promise.all([
|
||||
loadConfig(),
|
||||
getFrpsStatus(),
|
||||
]);
|
||||
Object.assign(globalConfig, cfg);
|
||||
frpsRunning.value = running;
|
||||
await fetchClients();
|
||||
}
|
||||
|
||||
async function fetchClients() {
|
||||
clientsLoaded.value = false;
|
||||
const list = await loadClients();
|
||||
clients.value = list;
|
||||
clientsLoaded.value = true;
|
||||
}
|
||||
|
||||
// ---- 日志轮询 ----
|
||||
async function fetchLogs() {
|
||||
if (logFetching) return;
|
||||
logFetching = true;
|
||||
try {
|
||||
const result = await fetchLogsApi();
|
||||
logLines.value = result.lines;
|
||||
logTotal.value = result.total;
|
||||
logError.value = result.error;
|
||||
logLastUpdate.value = new Date().toLocaleTimeString();
|
||||
if (logAutoScroll.value) {
|
||||
await nextTick();
|
||||
const container = document.getElementById("logContainer");
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
logError.value = "网络错误";
|
||||
} finally {
|
||||
logFetching = false;
|
||||
}
|
||||
}
|
||||
|
||||
function startLogPolling() {
|
||||
if (logTimer) return;
|
||||
fetchLogs();
|
||||
logTimer = setInterval(fetchLogs, 8000);
|
||||
}
|
||||
|
||||
function stopLogPolling() {
|
||||
if (logTimer) {
|
||||
clearInterval(logTimer);
|
||||
logTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
function refreshLogs() {
|
||||
fetchLogs();
|
||||
}
|
||||
|
||||
function scrollLogToBottom() {
|
||||
const container = document.getElementById("logContainer");
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
}
|
||||
|
||||
// ---- 登录 ----
|
||||
const doLogin = async () => {
|
||||
if (!loginForm.username || !loginForm.password) {
|
||||
loginError.value = "请输入用户名和密码";
|
||||
return;
|
||||
}
|
||||
loading.value = true;
|
||||
loginError.value = "";
|
||||
const result = await login(loginForm.username, loginForm.password);
|
||||
if (result.success) {
|
||||
token.value = result.token;
|
||||
tokenExpireTime.value = result.expire;
|
||||
transitioning.value = true;
|
||||
loggedIn.value = true;
|
||||
setTimeout(async () => {
|
||||
transitioning.value = false;
|
||||
await loadAllData();
|
||||
loading.value = false;
|
||||
setTimeout(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
}, 300);
|
||||
}, 500);
|
||||
} else {
|
||||
loginError.value = result.error;
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 注册 ----
|
||||
const doRegister = async () => {
|
||||
if (registerForm.username.length < 5) {
|
||||
registerError.value = "用户名至少 5 位";
|
||||
return;
|
||||
}
|
||||
if (registerForm.password !== registerForm.confirmPassword) {
|
||||
registerError.value = "两次输入的密码不一致";
|
||||
return;
|
||||
}
|
||||
if (registerForm.password.length < 8) {
|
||||
registerError.value = "密码至少 8 位";
|
||||
return;
|
||||
}
|
||||
registering.value = true;
|
||||
registerError.value = "";
|
||||
try {
|
||||
const res = await fetch("/api/register", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
username: registerForm.username,
|
||||
password: registerForm.password,
|
||||
}),
|
||||
});
|
||||
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;
|
||||
tokenExpireTime.value = expire;
|
||||
loginForm.username = registerForm.username;
|
||||
loggedIn.value = true;
|
||||
transitioning.value = true;
|
||||
setTimeout(async () => {
|
||||
transitioning.value = false;
|
||||
await loadAllData();
|
||||
setTimeout(() => {
|
||||
contentVisible.value = true;
|
||||
startExpireTimer();
|
||||
}, 300);
|
||||
}, 500);
|
||||
} else {
|
||||
registerError.value = data.msg || "注册失败";
|
||||
}
|
||||
} catch (e) {
|
||||
registerError.value = "网络错误，请重试";
|
||||
}
|
||||
registering.value = false;
|
||||
};
|
||||
|
||||
// ---- 退出 ----
|
||||
const doLogout = () => {
|
||||
if (expireTimer) clearInterval(expireTimer);
|
||||
stopLogPolling();
|
||||
contentVisible.value = false;
|
||||
loggedIn.value = false;
|
||||
token.value = "";
|
||||
tokenExpireTime.value = 0;
|
||||
loginForm.username = "";
|
||||
loginForm.password = "";
|
||||
loading.value = false;
|
||||
transitioning.value = false;
|
||||
clearAuthState();
|
||||
isFirstRun.value = false;
|
||||
registerForm.username = "";
|
||||
registerForm.password = "";
|
||||
registerForm.confirmPassword = "";
|
||||
registerError.value = "";
|
||||
registering.value = false;
|
||||
};
|
||||
|
||||
// ---- 修改密码 ----
|
||||
const changePassword = async () => {
|
||||
passwordChangeError.value = "";
|
||||
passwordChangeSuccess.value = "";
|
||||
if (passwordChange.newPassword !== passwordChange.confirmPassword) {
|
||||
passwordChangeError.value = "两次输入的密码不一致";
|
||||
return;
|
||||
}
|
||||
if (passwordChange.newPassword.length < 8) {
|
||||
passwordChangeError.value = "密码至少 8 位";
|
||||
return;
|
||||
}
|
||||
try {
|
||||
const res = await fetch("/api/user/password", {
|
||||
method: "PUT",
|
||||
headers: getHeaders(),
|
||||
body: JSON.stringify({
|
||||
oldPassword: passwordChange.oldPassword,
|
||||
newPassword: passwordChange.newPassword,
|
||||
}),
|
||||
});
|
||||
const data = await res.json();
|
||||
if (data.code === 0) {
|
||||
passwordChangeSuccess.value = "密码修改成功！";
|
||||
passwordChange.oldPassword = "";
|
||||
passwordChange.newPassword = "";
|
||||
passwordChange.confirmPassword = "";
|
||||
} else {
|
||||
passwordChangeError.value = data.msg || "修改失败";
|
||||
}
|
||||
} catch (e) {
|
||||
passwordChangeError.value = "网络错误，请重试";
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 保存配置 ----
|
||||
const saveConfig = async () => {
|
||||
const result = await saveConfigApi(globalConfig);
|
||||
if (result.code === 0) {
|
||||
frpsRunning.value = await getFrpsStatus();
|
||||
alert("配置已更新并热加载");
|
||||
} else {
|
||||
alert("保存失败: " + result.msg);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 导入导出 ----
|
||||
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 = "frps.toml";
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(a.href);
|
||||
} catch (e) {
|
||||
alert("导出失败: " + e.message);
|
||||
}
|
||||
};
|
||||
|
||||
// ---- 计算属性 ----
|
||||
const filteredClients = computed(() =>
|
||||
filterClients(clients.value, searchKeyword.value)
|
||||
);
|
||||
|
||||
const showDefaultTip = computed(() => {
|
||||
const token = globalConfig.token;
|
||||
return !token || token === "CHANGE_ME" || token.trim() === "";
|
||||
});
|
||||
|
||||
// ---- 返回 ----
|
||||
return {
|
||||
loggedIn,
|
||||
loading,
|
||||
loginError,
|
||||
loginForm,
|
||||
doLogin,
|
||||
doLogout,
|
||||
|
||||
isFirstRun,
|
||||
registerForm,
|
||||
registerError,
|
||||
registering,
|
||||
doRegister,
|
||||
|
||||
activeTab,
|
||||
globalConfig,
|
||||
saveConfig,
|
||||
|
||||
clients,
|
||||
clientsLoaded,
|
||||
filteredClients,
|
||||
fetchClients,
|
||||
frpsRunning,
|
||||
|
||||
searchKeyword,
|
||||
transitioning,
|
||||
contentVisible,
|
||||
|
||||
triggerImport,
|
||||
handleImport,
|
||||
exportToml,
|
||||
|
||||
passwordChange,
|
||||
passwordChangeError,
|
||||
passwordChangeSuccess,
|
||||
changePassword,
|
||||
|
||||
logLines,
|
||||
logTotal,
|
||||
logError,
|
||||
logLastUpdate,
|
||||
logAutoScroll,
|
||||
refreshLogs,
|
||||
scrollLogToBottom,
|
||||
|
||||
showToken,
|
||||
showDefaultTip,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
||||
app.mount("#app");
|
||||
Reference in New Issue
Block a user