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

部分重型模块的原子化拆解

Browse Source
This commit is contained in:
不安的亡命樱
2026-07-23 20:46:16 +08:00
parent 2afff129b9
commit 5fa1b99c5d
12 changed files with 1688 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/app.js
+119 -340
View File
@@ -1,389 +1,170 @@
const { createApp, ref, reactive, computed, onMounted } = Vue;
// app.js
import { createApp, ref, reactive, computed, onMounted } from 'vue';
// 导入各模块
import { apiFetch } from './modules/api.js';
import { login, loadAuthState, clearAuthState, saveAuthState } from './modules/auth.js';
import { loadConfig, saveConfig as saveConfigApi } from './modules/config.js';
import { loadProxies, createProxy, updateProxy, deleteProxy, filterProxies } from './modules/proxies.js';
import { getFrpcStatus, reloadFrpc, startFrpc, stopFrpc } from './modules/frpc.js';
import {
activeTab, switchTab,
dialogVisible, dialogMode, dialogForm,
openAddDialog, openEditDialog, closeDialog,
searchKeyword,
} from './modules/ui.js';
import { importToml, exportToml } from './modules/import.js'; // 如果有的话
const app = createApp({
setup() {
// ===== 登录态 =====
const transitioning = ref(false); // 旋转圈显示
const contentVisible = ref(false); // 主内容淡入
const loggedIn = ref(false);
const loading = ref(false);
const loginError = ref("");
const loginForm = reactive({
username: "",
password: "",
});
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;
// ===== Token =====
const token = ref("");
// ===== Tab =====
const activeTab = ref("proxies");
// ===== 全局配置 =====
const globalConfig = reactive({
serverAddr: "frp.whitetop.xyz",
serverPort: 9358,
token: "Lxh10020328",
logLevel: "info",
logMaxDays: 3,
tcpMux: true,
tcpMuxKeepalive: 30,
heartbeatInterval: 15,
heartbeatTimeout: 70,
poolCount: 8,
});
const showDetail = ref(false);
// ===== 隧道列表 =====
// ===== 数据 =====
const globalConfig = reactive({});
const proxies = ref([]);
const searchKeyword = ref("");
// ===== frpc 状态 =====
const frpcRunning = ref(false);
// ===== 弹窗 =====
const dialogVisible = ref(false);
const dialogMode = ref("add"); // 'add' | 'edit'
const dialogForm = reactive({
id: null,
name: "",
type: "tcp",
localIP: "",
localPort: 0,
remotePort: 0,
// ===== 初始化 =====
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();
});
}
});
// ===== 计算属性 =====
const filteredProxies = computed(() => {
if (!searchKeyword.value) return proxies.value;
const kw = searchKeyword.value.toLowerCase();
return proxies.value.filter(
(p) =>
p.name.toLowerCase().includes(kw) ||
p.localIP.includes(kw) ||
String(p.remotePort).includes(kw),
);
});
// ===== API 基础 =====
const apiHeaders = () => ({
"Content-Type": "application/json",
Authorization: "Bearer " + token.value,
});
const apiFetch = async (url, opts = {}) => {
const res = await fetch(url, {
...opts,
headers: { ...apiHeaders(), ...opts.headers },
});
return res.json();
const startExpireTimer = () => {
if (expireTimer) clearInterval(expireTimer);
expireTimer = setInterval(() => {
if (Date.now() >= tokenExpireTime.value) {
doLogout();
alert('登录已超时，请重新登录');
}
}, 5000);
};
// ===== 登录 =====
const loadAllData = async () => {
const [cfg, list, running] = await Promise.all([
loadConfig(),
loadProxies(),
getFrpcStatus(),
]);
Object.assign(globalConfig, cfg);
proxies.value = list;
frpcRunning.value = running;
};
// ===== 登录/退出 =====
const doLogin = async () => {
// 1. 校验输入
if (!loginForm.username || !loginForm.password) {
loginError.value = "请输入用户名和密码";
loginError.value = '请输入用户名和密码';
return;
}
// 2. 开始登录
loading.value = true;
loginError.value = "";
try {
const res = await fetch("/api/login", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(loginForm),
});
const data = await res.json();
if (data.code === 0) {
// 3. 保存 token
token.value = data.data.token;
// 4. 显示旋转圈
transitioning.value = true;
// 5. 切换登录态 → 触发容器放大动画（0.5s）
loggedIn.value = true;
// 6. 等待放大动画完成（0.5s）
setTimeout(async () => {
// 7. 隐藏旋转圈
transitioning.value = false;
// 8. 加载数据
await loadAllData();
// 9. 关闭 loading 状态
loading.value = false;
// 10. 再等 0.3s 让内容淡入
setTimeout(() => {
contentVisible.value = true;
}, 300);
}, 500); // 与 CSS 动画时间一致
} else {
// 登录失败
loginError.value = data.msg || "登录失败";
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;
}
} catch (e) {
loginError.value = "网络错误，请重试";
setTimeout(() => {
contentVisible.value = true;
startExpireTimer();
}, 300);
}, 500);
} else {
loginError.value = result.error;
loading.value = false;
}
};
const doLogout = () => {
contentVisible.value = false; // 先隐藏内容
if (expireTimer) clearInterval(expireTimer);
contentVisible.value = false;
loggedIn.value = false;
token.value = '';
tokenExpireTime.value = 0;
loginForm.username = '';
loginForm.password = '';
loading.value = false;
transitioning.value = false;
};
// ===== 加载数据 =====
const loadAllData = async () => {
await Promise.all([loadConfig(), loadProxies(), loadFrpcStatus()]);
};
const loadConfig = async () => {
try {
const data = await apiFetch("/api/config");
if (data.code === 0) {
Object.assign(globalConfig, data.data);
}
} catch (e) {
console.warn("加载配置失败", e);
}
};
const loadProxies = async () => {
try {
const data = await apiFetch("/api/proxies");
if (data.code === 0) {
proxies.value = data.data || [];
}
} catch (e) {
console.warn("加载隧道列表失败", e);
}
};
const loadFrpcStatus = async () => {
try {
const data = await apiFetch("/api/frpc/status");
if (data.code === 0) {
frpcRunning.value = data.data.running || false;
}
} catch (e) {
console.warn("获取 frpc 状态失败", e);
}
clearAuthState();
};
// ===== 保存配置 =====
const saveConfig = async () => {
try {
const data = await apiFetch("/api/config", {
method: "PUT",
body: JSON.stringify(globalConfig),
});
if (data.code === 0) {
await loadFrpcStatus();
alert("配置已更新并热加载");
} else {
alert("保存失败: " + data.msg);
}
} catch (e) {
alert("网络错误");
const result = await saveConfigApi(globalConfig);
if (result.code === 0) {
frpcRunning.value = await getFrpcStatus();
alert('配置已更新并热加载');
} else {
alert('保存失败: ' + result.msg);
}
};
// ===== 隧道操作 =====
const toggleProxy = async (p) => {
try {
const data = await apiFetch("/api/proxy/" + p.id, {
method: "PUT",
body: JSON.stringify(p),
});
if (data.code !== 0) {
alert("更新失败: " + data.msg);
await loadProxies();
} else {
await loadFrpcStatus();
}
} catch (e) {
alert("网络错误");
await loadProxies();
const result = await updateProxy(p);
if (result.code !== 0) {
alert('更新失败: ' + result.msg);
proxies.value = await loadProxies();
} else {
frpcRunning.value = await getFrpcStatus();
}
};
const deleteProxy = async (id) => {
if (!confirm("确定要删除这条隧道吗？")) return;
try {
const data = await apiFetch("/api/proxy/" + id, {
method: "DELETE",
});
if (data.code === 0) {
await loadProxies();
await loadFrpcStatus();
} else {
alert("删除失败: " + data.msg);
}
} catch (e) {
alert("网络错误");
const removeProxy = async (id) => {
if (!confirm('确定要删除这条隧道吗？')) return;
const result = await deleteProxy(id);
if (result.code === 0) {
proxies.value = await loadProxies();
frpcRunning.value = await getFrpcStatus();
} else {
alert('删除失败: ' + result.msg);
}
};
// ===== 弹窗 =====
const openAddDialog = () => {
dialogMode.value = "add";
dialogForm.id = null;
dialogForm.name = "";
dialogForm.type = "tcp";
dialogForm.localIP = "";
dialogForm.localPort = 0;
dialogForm.remotePort = 0;
dialogVisible.value = true;
};
const openEditDialog = (p) => {
dialogMode.value = "edit";
Object.assign(dialogForm, p);
dialogVisible.value = true;
};
const confirmDialog = async () => {
if (
!dialogForm.name ||
!dialogForm.localIP ||
!dialogForm.localPort ||
!dialogForm.remotePort
) {
alert("请填写完整信息");
const form = dialogForm.value;
if (!form.name || !form.localIP || !form.localPort || !form.remotePort) {
alert('请填写完整信息');
return;
}
const url =
dialogMode.value === "add"
? "/api/proxy"
: "/api/proxy/" + dialogForm.id;
const method = dialogMode.value === "add" ? "POST" : "PUT";
try {
const data = await apiFetch(url, {
method: method,
body: JSON.stringify(dialogForm),
});
if (data.code === 0) {
dialogVisible.value = false;
await loadProxies();
await loadFrpcStatus();
} else {
alert("操作失败: " + data.msg);
}
} catch (e) {
alert("网络错误");
const result = dialogMode.value === 'add'
? await createProxy(form)
: await updateProxy(form);
if (result.code === 0) {
closeDialog();
proxies.value = await loadProxies();
frpcRunning.value = await getFrpcStatus();
} else {
alert('操作失败: ' + result.msg);
}
};
// ===== 导入 TOML =====
const triggerImport = () => {
document.getElementById("tomlFileInput").click();
};
// ===== 计算属性 =====
const filteredProxies = computed(() => filterProxies(proxies.value, searchKeyword.value));
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 ' + token.value,
// 不要设置 Content-Type，浏览器会自动加上 boundary
},
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 = '';
};
// ===== 导出 TOML =====
const exportToml = async () => {
try {
const configData = await apiFetch("/api/config");
if (configData.code !== 0) {
alert("获取配置失败");
return;
}
const proxyData = await apiFetch("/api/proxies");
if (proxyData.code !== 0) {
alert("获取隧道列表失败");
return;
}
const cfg = configData.data;
const proxyList = proxyData.data || [];
const tomlObj = {
serverAddr: cfg.serverAddr,
serverPort: cfg.serverPort,
auth: { token: cfg.token },
log: {
to: "./frpc.log",
level: cfg.logLevel,
maxDays: cfg.logMaxDays,
},
transport: {
tcpMux: cfg.tcpMux,
tcpMuxKeepaliveInterval: cfg.tcpMuxKeepalive,
heartbeatInterval: cfg.heartbeatInterval,
heartbeatTimeout: cfg.heartbeatTimeout,
poolCount: cfg.poolCount,
},
proxies: proxyList.map((p) => ({
name: p.name,
type: p.type,
localIP: p.localIP,
localPort: p.localPort,
remotePort: p.remotePort,
})),
};
const tomlStr = TOML.stringify(tomlObj);
const blob = new Blob([tomlStr], { type: "text/plain" });
const a = document.createElement("a");
a.href = URL.createObjectURL(blob);
a.download = "frpc.toml";
a.click();
URL.revokeObjectURL(a.href);
} catch (e) {
alert("导出失败: " + e.message);
}
};
// ===== 键盘快捷键 =====
onMounted(() => {
document.addEventListener("keydown", (e) => {
if (e.key === "Escape" && dialogVisible.value) {
dialogVisible.value = false;
}
});
});
// ===== 返回所有 =====
return {
loggedIn,
loading,
@@ -392,28 +173,26 @@ const app = createApp({
doLogin,
doLogout,
activeTab,
switchTab,
globalConfig,
showDetail,
saveConfig,
proxies,
searchKeyword,
filteredProxies,
toggleProxy,
deleteProxy,
removeProxy,
frpcRunning,
dialogVisible,
dialogMode,
dialogForm,
openAddDialog,
openEditDialog,
closeDialog,
confirmDialog,
triggerImport,
handleImport,
exportToml,
searchKeyword,
transitioning,
contentVisible,
};
},
});
app.mount("#app");
app.mount('#app');