zkcoi
59e3059246
- go.mod: require git.zkcoi.com/zkcoi/meshray/core, replace => ../Meshray - internal/ctr/corebind: EnhancedBind + registry + adapter (wg-go integration isolated) - cmd/mr-wg migrated from old core/cmd/meshray-core - core/ removed; CHANGELOG updated; fix checkdb vet warning
649 lines
24 KiB
JavaScript
649 lines
24 KiB
JavaScript
// MeshRay 前端应用 - 原生 Vue3 + Element Plus
|
|
|
|
const { createApp, ref, reactive, onMounted } = Vue;
|
|
|
|
// 注册所有 Element Plus 图标
|
|
const icons = {};
|
|
for (const [key, value] of Object.entries(ElementPlusIconsVue)) {
|
|
icons[key] = value;
|
|
}
|
|
|
|
const app = createApp({
|
|
setup() {
|
|
// 当前页面
|
|
const currentPage = ref('dashboard');
|
|
|
|
// 登录状态
|
|
const isLoggedIn = ref(false);
|
|
const loggingIn = ref(false);
|
|
|
|
// 登录表单
|
|
const loginForm = reactive({
|
|
username: '',
|
|
password: ''
|
|
});
|
|
|
|
// Token 存储
|
|
let authToken = localStorage.getItem('meshray_token') || '';
|
|
|
|
// 检查是否已登录
|
|
if (authToken) {
|
|
isLoggedIn.value = true;
|
|
}
|
|
|
|
// API 基础 URL
|
|
const API_BASE = '/api/v1';
|
|
|
|
// 统一请求封装：自动注入 Bearer Token，并兼容 {data}|{error}|纯文本 三种响应
|
|
const apiRequest = async (path, options = {}) => {
|
|
const headers = {};
|
|
if (options.body) headers['Content-Type'] = 'application/json';
|
|
if (authToken) headers['Authorization'] = 'Bearer ' + authToken;
|
|
|
|
let resp;
|
|
try {
|
|
resp = await fetch(API_BASE + path, { ...options, headers });
|
|
} catch (e) {
|
|
return { ok: false, error: '网络请求失败：' + e.message };
|
|
}
|
|
|
|
const ct = resp.headers.get('content-type') || '';
|
|
let result = {};
|
|
try {
|
|
result = ct.includes('application/json') ? await resp.json() : { text: await resp.text() };
|
|
} catch (e) { /* 忽略解析错误 */ }
|
|
|
|
return {
|
|
ok: resp.ok,
|
|
status: resp.status,
|
|
data: result.data,
|
|
error: result.error || result.message,
|
|
text: result.text,
|
|
raw: result
|
|
};
|
|
};
|
|
|
|
// ===================== 统计数据 / 组网 =====================
|
|
const stats = reactive({
|
|
networkCount: 0,
|
|
deviceCount: 0,
|
|
onlineDevices: 0,
|
|
pendingApprovals: 0
|
|
});
|
|
|
|
const networks = ref([]);
|
|
const showCreateNetworkDialog = ref(false);
|
|
const newNetwork = reactive({
|
|
name: '',
|
|
subnet_ipv4: '10.0.0.0/24',
|
|
listen_port: 51820,
|
|
mesh_mode: 'enhanced'
|
|
});
|
|
|
|
const loadStats = async () => {
|
|
try {
|
|
const r = await apiRequest('/dashboard/stats');
|
|
if (r.ok && r.data) {
|
|
stats.networkCount = r.data.total_networks || 0;
|
|
stats.deviceCount = r.data.total_devices || 0;
|
|
stats.onlineDevices = r.data.online_devices || 0;
|
|
stats.pendingApprovals = r.data.pending_approvals || 0;
|
|
} else if (!r.ok && r.status !== 401) {
|
|
console.error('加载统计数据失败:', r.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载统计数据失败:', error);
|
|
}
|
|
};
|
|
|
|
const loadNetworks = async () => {
|
|
try {
|
|
const r = await apiRequest('/networks');
|
|
if (r.ok) {
|
|
networks.value = r.data || [];
|
|
} else if (r.status !== 401) {
|
|
console.error('加载组网列表失败:', r.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载组网列表失败:', error);
|
|
}
|
|
};
|
|
|
|
const createNetwork = async () => {
|
|
try {
|
|
const r = await apiRequest('/networks', {
|
|
method: 'POST',
|
|
body: JSON.stringify(newNetwork)
|
|
});
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('组网创建成功');
|
|
showCreateNetworkDialog.value = false;
|
|
newNetwork.name = '';
|
|
newNetwork.subnet_ipv4 = '10.0.0.0/24';
|
|
newNetwork.listen_port = 51820;
|
|
await loadNetworks();
|
|
await loadStats();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '创建失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('创建组网失败:', error);
|
|
ElementPlus.ElMessage.error('创建失败');
|
|
}
|
|
};
|
|
|
|
const viewNetwork = (network) => {
|
|
ElementPlus.ElMessageBox.alert(
|
|
`组网名称：${network.name}\n` +
|
|
`子网：${network.subnet_ipv4}\n` +
|
|
`模式：${network.mesh_mode === 'enhanced' ? '增强' : '原生'}`,
|
|
'组网详情',
|
|
{ confirmButtonText: '确定' }
|
|
);
|
|
};
|
|
|
|
const generateMeshSeed = (network) => {
|
|
ElementPlus.ElMessageBox.prompt(
|
|
'请输入 MeshSeed 有效期（小时）',
|
|
'生成 MeshSeed',
|
|
{
|
|
confirmButtonText: '生成',
|
|
cancelButtonText: '取消',
|
|
inputPattern: /^\d+$/,
|
|
inputErrorMessage: '请输入有效的数字'
|
|
}
|
|
).then(async ({ value }) => {
|
|
try {
|
|
const hours = parseInt(value);
|
|
const expiresAt = new Date(Date.now() + hours * 3600 * 1000).toISOString();
|
|
const r = await apiRequest(`/networks/${network.id}/mesh-seed`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ max_uses: 10, expires_at: expiresAt, ddns_enabled: false })
|
|
});
|
|
if (r.ok) {
|
|
const seedUrl = (r.data && (r.data.seed_url || r.data.seed)) || '';
|
|
if (seedUrl) {
|
|
ElementPlus.ElMessageBox.alert(
|
|
`MeshSeed 生成成功：<br><br>` +
|
|
`<input type="text" value="${seedUrl}" readonly ` +
|
|
`style="width: 100%; padding: 8px; margin-top: 10px; border: 1px solid #ddd;" ` +
|
|
`onclick="this.select()">`,
|
|
'MeshSeed',
|
|
{ dangerouslyUseHTMLString: true, confirmButtonText: '复制并关闭' }
|
|
);
|
|
} else {
|
|
ElementPlus.ElMessage.success('MeshSeed 生成成功');
|
|
}
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '生成失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('生成 MeshSeed 失败:', error);
|
|
ElementPlus.ElMessage.error('生成失败');
|
|
}
|
|
}).catch(() => {});
|
|
};
|
|
|
|
const deleteNetwork = async (network) => {
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
`确定要删除组网 "${network.name}" 吗？此操作不可恢复。`,
|
|
'警告',
|
|
{ confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
|
|
);
|
|
const r = await apiRequest(`/networks/${network.id}`, { method: 'DELETE' });
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('删除成功');
|
|
await loadNetworks();
|
|
await loadStats();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '删除失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('删除组网失败:', error);
|
|
ElementPlus.ElMessage.error('删除失败');
|
|
}
|
|
}
|
|
};
|
|
|
|
// ===================== 设备管理 =====================
|
|
const devices = ref([]);
|
|
const showCreateDeviceDialog = ref(false);
|
|
const deviceForm = reactive({ network_id: null, name: '', virtual_ip: '' });
|
|
const showDeviceConfigDialog = ref(false);
|
|
const deviceConfigText = ref('');
|
|
|
|
const loadDevices = async () => {
|
|
try {
|
|
const r = await apiRequest('/devices');
|
|
if (r.ok) {
|
|
devices.value = r.data || [];
|
|
} else if (r.status !== 401) {
|
|
console.error('加载设备列表失败:', r.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载设备列表失败:', error);
|
|
}
|
|
};
|
|
|
|
const openCreateDevice = () => {
|
|
deviceForm.network_id = networks.value.length ? networks.value[0].id : null;
|
|
deviceForm.name = '';
|
|
deviceForm.virtual_ip = '';
|
|
showCreateDeviceDialog.value = true;
|
|
};
|
|
|
|
const createDevice = async () => {
|
|
if (!deviceForm.network_id) {
|
|
ElementPlus.ElMessage.warning('请先选择所属组网');
|
|
return;
|
|
}
|
|
try {
|
|
const r = await apiRequest(`/devices?network_id=${deviceForm.network_id}`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
network_id: deviceForm.network_id,
|
|
name: deviceForm.name,
|
|
virtual_ip: deviceForm.virtual_ip
|
|
})
|
|
});
|
|
if (r.ok) {
|
|
const cfg = (r.data && r.data.wireguard_config) || (r.data && r.data.config_text) || '';
|
|
if (cfg) {
|
|
deviceConfigText.value = cfg;
|
|
showDeviceConfigDialog.value = true;
|
|
}
|
|
showCreateDeviceDialog.value = false;
|
|
ElementPlus.ElMessage.success('设备创建成功');
|
|
await loadDevices();
|
|
await loadStats();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '创建失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('创建设备失败:', error);
|
|
ElementPlus.ElMessage.error('创建失败');
|
|
}
|
|
};
|
|
|
|
const downloadDeviceConfig = async (device) => {
|
|
try {
|
|
const r = await apiRequest(`/devices/${device.id}/config`);
|
|
if (!r.ok) {
|
|
ElementPlus.ElMessage.error(r.error || '获取配置失败');
|
|
return;
|
|
}
|
|
const text = r.text || (r.raw && r.raw.text) || '';
|
|
const blob = new Blob([text], { type: 'text/plain' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `${device.name || 'device'}-wg.conf`;
|
|
a.click();
|
|
URL.revokeObjectURL(url);
|
|
} catch (error) {
|
|
console.error('下载设备配置失败:', error);
|
|
ElementPlus.ElMessage.error('下载失败');
|
|
}
|
|
};
|
|
|
|
const deleteDevice = async (device) => {
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
`确定要删除设备 "${device.name}" 吗？`,
|
|
'警告',
|
|
{ confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
|
|
);
|
|
const r = await apiRequest(`/devices/${device.id}`, { method: 'DELETE' });
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('删除成功');
|
|
await loadDevices();
|
|
await loadStats();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '删除失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('删除设备失败:', error);
|
|
ElementPlus.ElMessage.error('删除失败');
|
|
}
|
|
}
|
|
};
|
|
|
|
// ===================== 服务管理 =====================
|
|
const services = ref([]);
|
|
const showServiceDialog = ref(false);
|
|
const serviceDialogTitle = ref('创建服务');
|
|
const serviceForm = reactive({
|
|
id: '',
|
|
name: '',
|
|
type: 'turn',
|
|
address: '',
|
|
port: null,
|
|
auth_username: '',
|
|
auth_password: ''
|
|
});
|
|
const serviceTypes = [
|
|
{ value: 'tun', label: 'TUN 隧道' },
|
|
{ value: 'turn', label: 'TURN 服务' },
|
|
{ value: 'ddns', label: 'DDNS 服务' }
|
|
];
|
|
|
|
const loadServices = async () => {
|
|
try {
|
|
const r = await apiRequest('/services');
|
|
if (r.ok) {
|
|
services.value = r.data || [];
|
|
} else if (r.status !== 401) {
|
|
console.error('加载服务列表失败:', r.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载服务列表失败:', error);
|
|
}
|
|
};
|
|
|
|
const openCreateService = () => {
|
|
serviceDialogTitle.value = '创建服务';
|
|
serviceForm.id = '';
|
|
serviceForm.name = '';
|
|
serviceForm.type = 'turn';
|
|
serviceForm.address = '';
|
|
serviceForm.port = null;
|
|
serviceForm.auth_username = '';
|
|
serviceForm.auth_password = '';
|
|
showServiceDialog.value = true;
|
|
};
|
|
|
|
const editService = (svc) => {
|
|
serviceDialogTitle.value = '编辑服务';
|
|
serviceForm.id = svc.id;
|
|
serviceForm.name = svc.name;
|
|
serviceForm.type = svc.type;
|
|
serviceForm.address = svc.address;
|
|
serviceForm.port = svc.port;
|
|
serviceForm.auth_username = svc.username || '';
|
|
serviceForm.auth_password = '';
|
|
showServiceDialog.value = true;
|
|
};
|
|
|
|
const saveService = async () => {
|
|
const payload = {
|
|
name: serviceForm.name,
|
|
type: serviceForm.type,
|
|
address: serviceForm.address,
|
|
port: serviceForm.port
|
|
};
|
|
if (serviceForm.auth_username) payload.username = serviceForm.auth_username;
|
|
if (serviceForm.auth_password) payload.password = serviceForm.auth_password;
|
|
|
|
const isEdit = !!serviceForm.id;
|
|
const r = isEdit
|
|
? await apiRequest(`/services/${serviceForm.id}`, { method: 'PUT', body: JSON.stringify(payload) })
|
|
: await apiRequest('/services', { method: 'POST', body: JSON.stringify(payload) });
|
|
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success(isEdit ? '更新成功' : '创建成功');
|
|
showServiceDialog.value = false;
|
|
await loadServices();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '操作失败');
|
|
}
|
|
};
|
|
|
|
const deleteService = async (svc) => {
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
`确定要删除服务 "${svc.name}" 吗？`,
|
|
'警告',
|
|
{ confirmButtonText: '删除', cancelButtonText: '取消', type: 'warning' }
|
|
);
|
|
const r = await apiRequest(`/services/${svc.id}`, { method: 'DELETE' });
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('删除成功');
|
|
await loadServices();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '删除失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('删除服务失败:', error);
|
|
ElementPlus.ElMessage.error('删除失败');
|
|
}
|
|
}
|
|
};
|
|
|
|
const testService = async (svc) => {
|
|
const r = await apiRequest(`/services/${svc.id}/test`, { method: 'POST' });
|
|
if (r.ok) {
|
|
const status = (r.data && r.data.status) || 'unknown';
|
|
ElementPlus.ElMessage.info(`连通性状态：${status}`);
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '测试失败');
|
|
}
|
|
};
|
|
|
|
// ===================== 系统设置 =====================
|
|
const settings = reactive({
|
|
server_port: 51820,
|
|
log_level: 'info',
|
|
theme: 'light',
|
|
language: 'zh-CN',
|
|
max_backups: 7,
|
|
max_age: 30
|
|
});
|
|
const wgMode = ref('');
|
|
const wgModeDisplay = ref('');
|
|
const passwordForm = reactive({ old_password: '', new_password: '', confirm: '' });
|
|
|
|
const loadSettings = async () => {
|
|
try {
|
|
const r = await apiRequest('/settings');
|
|
if (r.ok && r.data) {
|
|
Object.assign(settings, r.data);
|
|
}
|
|
} catch (error) {
|
|
console.error('加载系统设置失败:', error);
|
|
}
|
|
};
|
|
|
|
const loadWGMode = async () => {
|
|
try {
|
|
const r = await apiRequest('/system-config/wg-mode');
|
|
if (r.ok && r.data) {
|
|
wgMode.value = r.data.actual_mode || r.data.wg_mode || '';
|
|
wgModeDisplay.value = r.data.wg_mode_display || wgMode.value;
|
|
}
|
|
} catch (error) {
|
|
console.error('加载 WG 模式失败:', error);
|
|
}
|
|
};
|
|
|
|
const saveSettings = async () => {
|
|
const r = await apiRequest('/settings', {
|
|
method: 'PUT',
|
|
body: JSON.stringify({
|
|
server_port: settings.server_port,
|
|
log_level: settings.log_level,
|
|
theme: settings.theme,
|
|
language: settings.language,
|
|
max_backups: settings.max_backups,
|
|
max_age: settings.max_age
|
|
})
|
|
});
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('设置已保存');
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '保存失败');
|
|
}
|
|
};
|
|
|
|
const changePassword = async () => {
|
|
if (!passwordForm.old_password || !passwordForm.new_password) {
|
|
ElementPlus.ElMessage.warning('请输入旧密码和新密码');
|
|
return;
|
|
}
|
|
if (passwordForm.new_password !== passwordForm.confirm) {
|
|
ElementPlus.ElMessage.warning('两次输入的新密码不一致');
|
|
return;
|
|
}
|
|
const r = await apiRequest('/system/change-password', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
old_password: passwordForm.old_password,
|
|
new_password: passwordForm.new_password
|
|
})
|
|
});
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('密码修改成功');
|
|
passwordForm.old_password = '';
|
|
passwordForm.new_password = '';
|
|
passwordForm.confirm = '';
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '修改失败');
|
|
}
|
|
};
|
|
|
|
const restartCore = async () => {
|
|
try {
|
|
await ElementPlus.ElMessageBox.confirm(
|
|
'确定要重启核心服务吗？重启过程约需数秒。',
|
|
'重启核心',
|
|
{ confirmButtonText: '重启', cancelButtonText: '取消', type: 'warning' }
|
|
);
|
|
const r = await apiRequest('/system/restart-core', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ graceful: true })
|
|
});
|
|
if (r.ok) {
|
|
ElementPlus.ElMessage.success('核心服务正在重启...');
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '重启失败');
|
|
}
|
|
} catch (error) {
|
|
if (error !== 'cancel') {
|
|
console.error('重启核心失败:', error);
|
|
ElementPlus.ElMessage.error('重启失败');
|
|
}
|
|
}
|
|
};
|
|
|
|
// ===================== 登录 / 登出 =====================
|
|
const loadAll = async () => {
|
|
await Promise.all([
|
|
loadStats(),
|
|
loadNetworks(),
|
|
loadDevices(),
|
|
loadServices(),
|
|
loadSettings(),
|
|
loadWGMode()
|
|
]);
|
|
};
|
|
|
|
onMounted(() => {
|
|
if (isLoggedIn.value) loadAll();
|
|
});
|
|
|
|
const handleLogin = async () => {
|
|
if (!loginForm.username || !loginForm.password) {
|
|
ElementPlus.ElMessage.warning('请输入用户名和密码');
|
|
return;
|
|
}
|
|
loggingIn.value = true;
|
|
try {
|
|
const r = await apiRequest('/auth/login', {
|
|
method: 'POST',
|
|
body: JSON.stringify({
|
|
username: loginForm.username,
|
|
password: loginForm.password
|
|
})
|
|
});
|
|
if (r.ok && r.data) {
|
|
authToken = r.data.token || r.data.access_token;
|
|
localStorage.setItem('meshray_token', authToken);
|
|
isLoggedIn.value = true;
|
|
ElementPlus.ElMessage.success('登录成功');
|
|
await loadAll();
|
|
} else {
|
|
ElementPlus.ElMessage.error(r.error || '登录失败');
|
|
}
|
|
} catch (error) {
|
|
console.error('登录错误:', error);
|
|
ElementPlus.ElMessage.error('登录失败，请检查网络连接');
|
|
} finally {
|
|
loggingIn.value = false;
|
|
}
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
ElementPlus.ElMessageBox.confirm('确定要退出登录吗？', '提示', {
|
|
confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
|
|
}).then(() => {
|
|
localStorage.removeItem('meshray_token');
|
|
authToken = '';
|
|
isLoggedIn.value = false;
|
|
loginForm.username = '';
|
|
loginForm.password = '';
|
|
ElementPlus.ElMessage.success('已退出登录');
|
|
}).catch(() => {});
|
|
};
|
|
|
|
return {
|
|
currentPage,
|
|
isLoggedIn,
|
|
loggingIn,
|
|
loginForm,
|
|
stats,
|
|
networks,
|
|
showCreateNetworkDialog,
|
|
newNetwork,
|
|
handleLogin,
|
|
handleLogout,
|
|
createNetwork,
|
|
viewNetwork,
|
|
generateMeshSeed,
|
|
deleteNetwork,
|
|
// devices
|
|
devices,
|
|
showCreateDeviceDialog,
|
|
deviceForm,
|
|
showDeviceConfigDialog,
|
|
deviceConfigText,
|
|
openCreateDevice,
|
|
createDevice,
|
|
downloadDeviceConfig,
|
|
deleteDevice,
|
|
// services
|
|
services,
|
|
showServiceDialog,
|
|
serviceDialogTitle,
|
|
serviceForm,
|
|
serviceTypes,
|
|
openCreateService,
|
|
editService,
|
|
saveService,
|
|
deleteService,
|
|
testService,
|
|
// settings
|
|
settings,
|
|
wgMode,
|
|
wgModeDisplay,
|
|
passwordForm,
|
|
saveSettings,
|
|
changePassword,
|
|
restartCore
|
|
};
|
|
}
|
|
});
|
|
|
|
// 使用 Element Plus
|
|
app.use(ElementPlus);
|
|
|
|
// 注册所有图标
|
|
for (const [key, component] of Object.entries(icons)) {
|
|
app.component(key, component);
|
|
}
|
|
|
|
// 挂载应用
|
|
app.mount('#app');
|