lxh2875931338/frpc-console
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

加入首次使用的引导页、写入readme文件

Browse Source
This commit is contained in:
不安的亡命樱
2026-07-23 22:17:48 +08:00
parent 892fc98be2
commit 55fb5d49f7
11 changed files with 766 additions and 1828 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+189 -84
View File
@@ -1,12 +1,8 @@
// app.js - 普通脚本（非模块）
const { createApp, ref, reactive, computed, onMounted } = Vue;
// ============================================================
// 1. 把 modules/*.js 的内容直接合并进来（因为是普通脚本，不能 import）
// API
// ============================================================
// ---------- api ----------
const API_BASE = "/api";
function getToken() {
return localStorage.getItem("frpc_token") || "";
@@ -19,10 +15,9 @@ function getHeaders() {
}
async function apiFetch(endpoint, options = {}) {
const url = API_BASE + endpoint;
const headers =
options.body instanceof FormData
? { Authorization: "Bearer " + getToken() }
: getHeaders();
const headers = options.body instanceof FormData
? { Authorization: "Bearer " + getToken() }
: getHeaders();
const res = await fetch(url, {
...options,
headers: { ...headers, ...(options.headers || {}) },
@@ -30,7 +25,9 @@ async function apiFetch(endpoint, options = {}) {
return res.json();
}
// ---------- auth ----------
// ============================================================
// Auth
// ============================================================
function parseJwtExpire(token) {
try {
const payload = JSON.parse(atob(token.split(".")[1]));
@@ -74,7 +71,9 @@ async function login(username, password) {
return { success: false, error: data.msg || "登录失败" };
}
// ---------- config ----------
// ============================================================
// Config
// ============================================================
const defaultConfig = {
serverAddr: "frp.whitetop.xyz",
serverPort: 9358,
@@ -106,7 +105,9 @@ async function saveConfigApi(config) {
return data;
}
// ---------- proxies ----------
// ============================================================
// Proxies
// ============================================================
async function loadProxies() {
try {
const data = await apiFetch("/proxies");
@@ -141,15 +142,16 @@ async function deleteProxy(id) {
function filterProxies(list, keyword) {
if (!keyword) return list;
const kw = keyword.toLowerCase();
return list.filter(
(p) =>
p.name.toLowerCase().includes(kw) ||
p.localIP.includes(kw) ||
String(p.remotePort).includes(kw),
return list.filter(p =>
p.name.toLowerCase().includes(kw) ||
p.localIP.includes(kw) ||
String(p.remotePort).includes(kw)
);
}
// ---------- frpc ----------
// ============================================================
// Frpc
// ============================================================
async function getFrpcStatus() {
try {
const data = await apiFetch("/frpc/status");
@@ -161,27 +163,11 @@ async function getFrpcStatus() {
}
return false;
}
async function reloadFrpc() {
const data = await apiFetch("/frpc/reload", { method: "POST" });
return data;
}
async function startFrpc() {
const data = await apiFetch("/frpc/start", { method: "POST" });
return data;
}
async function stopFrpc() {
const data = await apiFetch("/frpc/stop", { method: "POST" });
return data;
}
// ---------- ui ----------
// Tab 切换
// ============================================================
// UI State
// ============================================================
const activeTab = ref("proxies");
function switchTab(tab) {
activeTab.value = tab;
}
// 弹窗控制
const dialogVisible = ref(false);
const dialogMode = ref("add");
const dialogForm = ref({
@@ -192,17 +178,11 @@ const dialogForm = ref({
localPort: 0,
remotePort: 0,
});
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) {
@@ -214,9 +194,9 @@ function closeDialog() {
dialogVisible.value = false;
}
const searchKeyword = ref("");
// ---------- import/export 功能 ----------
// ============================================================
// Import / Export
// ============================================================
async function triggerImport() {
document.getElementById("tomlFileInput").click();
}
@@ -244,42 +224,35 @@ async function handleImport(e) {
e.target.value = "";
}
async function exportToml() {
console.log('🔍 exportToml 被调用了');
try {
const res = await fetch('/api/export/toml', {
method: 'GET',
headers: { 'Authorization': 'Bearer ' + getToken() },
const res = await fetch("/api/export/toml", {
method: "GET",
headers: { Authorization: "Bearer " + getToken() },
});
if (!res.ok) {
const data = await res.json();
alert('导出失败: ' + (data.msg || '未知错误'));
alert("导出失败: " + (data.msg || "未知错误"));
return;
}
const blob = await res.blob();
const a = document.createElement('a');
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = 'frpc.toml';
a.download = "frpc.toml";
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(a.href);
console.log('✅ 导出成功');
} catch (e) {
console.error('导出失败:', e);
alert('导出失败: ' + e.message);
alert("导出失败: " + e.message);
}
}
// ============================================================
// 2. Vue 应用
// Vue App
// ============================================================
const app = createApp({
setup() {
// ===== 登录态 =====
// ---- 登录态 ----
const loggedIn = ref(false);
const loading = ref(false);
const loginError = ref("");
@@ -290,13 +263,32 @@ const app = createApp({
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 proxies = ref([]);
const frpcRunning = ref(false);
const showDetail = ref(false);
// ===== 初始化 =====
// ---- 修改密码 ----
const passwordChange = reactive({
oldPassword: "",
newPassword: "",
confirmPassword: "",
});
const passwordChangeError = ref("");
const passwordChangeSuccess = ref("");
// ---- 初始化 ----
onMounted(() => {
const saved = loadAuthState();
if (saved.valid) {
@@ -308,10 +300,24 @@ const app = createApp({
contentVisible.value = true;
startExpireTimer();
});
} else {
checkUsers();
}
});
const startExpireTimer = () => {
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) {
@@ -319,9 +325,9 @@ const app = createApp({
alert("登录已超时，请重新登录");
}
}, 5000);
};
}
const loadAllData = async () => {
async function loadAllData() {
const [cfg, list, running] = await Promise.all([
loadConfig(),
loadProxies(),
@@ -330,9 +336,9 @@ const app = createApp({
Object.assign(globalConfig, cfg);
proxies.value = list;
frpcRunning.value = running;
};
}
// ===== 登录/退出 =====
// ---- 登录 ----
const doLogin = async () => {
if (!loginForm.username || !loginForm.password) {
loginError.value = "请输入用户名和密码";
@@ -361,6 +367,58 @@ const app = createApp({
}
};
// ---- 注册 ----
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) {
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);
contentVisible.value = false;
@@ -374,7 +432,42 @@ const app = createApp({
clearAuthState();
};
// ===== 保存配置 =====
// ---- 修改密码 ----
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) {
@@ -385,7 +478,7 @@ const app = createApp({
}
};
// ===== 隧道操作 =====
// ---- 隧道操作 ----
const toggleProxy = async (p) => {
const result = await updateProxy(p);
if (result.code !== 0) {
@@ -395,9 +488,7 @@ const app = createApp({
frpcRunning.value = await getFrpcStatus();
}
};
const removeProxy = async (id) => {
console.log("🔍 removeProxy 被调用, id:", id); // ← 加这行
if (!confirm("确定要删除这条隧道吗？")) return;
const result = await deleteProxy(id);
if (result.code === 0) {
@@ -407,17 +498,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"
? await createProxy(form)
: await updateProxy(form);
const result = dialogMode.value === "add"
? await createProxy(form)
: await updateProxy(form);
if (result.code === 0) {
closeDialog();
proxies.value = await loadProxies();
@@ -427,11 +516,12 @@ const app = createApp({
}
};
// ===== 计算属性 =====
// ---- 计算属性 ----
const filteredProxies = computed(() =>
filterProxies(proxies.value, searchKeyword.value),
filterProxies(proxies.value, searchKeyword.value)
);
// ---- 返回 ----
return {
loggedIn,
loading,
@@ -439,16 +529,24 @@ const app = createApp({
loginForm,
doLogin,
doLogout,
isFirstRun,
registerForm,
registerError,
registering,
doRegister,
activeTab,
switchTab,
globalConfig,
showDetail,
saveConfig,
proxies,
filteredProxies,
toggleProxy,
removeProxy,
frpcRunning,
dialogVisible,
dialogMode,
dialogForm,
@@ -456,14 +554,21 @@ const app = createApp({
openEditDialog,
closeDialog,
confirmDialog,
searchKeyword,
transitioning,
contentVisible,
triggerImport,
handleImport,
exportToml,
passwordChange,
passwordChangeError,
passwordChangeSuccess,
changePassword,
};
},
});
app.mount("#app");
app.mount("#app");