kevin/lmvpn_server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改前端内容

Browse Source
This commit is contained in:
kevin
2026-07-08 12:23:50 +08:00
parent cbe7aeca81
commit 3306fc7ee4
3 changed files with 98 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/TheWelcome.vue
+50 -11
View File
@@ -10,17 +10,27 @@ const { t } = useI18n()
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</template>
<template #heading>{{ t('home.secureTunnel') }}</template>
{{ t('home.secureTunnelDesc') }}
<template #heading>{{ t('home.tunnel') }}</template>
{{ t('home.tunnelDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</template>
<template #heading>{{ t('home.userManage') }}</template>
{{ t('home.userManageDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
</svg>
</template>
<template #heading>{{ t('home.multiDevice') }}</template>
@@ -30,22 +40,51 @@ const { t } = useI18n()
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0zM3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 000 18M12.5 3a17 17 0 010 18" />
</svg>
</template>
<template #heading>{{ t('home.trafficMonitor') }}</template>
{{ t('home.trafficMonitorDesc') }}
<template #heading>{{ t('home.dualStack') }}</template>
{{ t('home.dualStackDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
<path stroke-linecap="round" stroke-linejoin="round" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0zM15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</template>
<template #heading>{{ t('home.easyConfig') }}</template>
{{ t('home.easyConfigDesc') }}
<template #heading>{{ t('home.reservation') }}</template>
{{ t('home.reservationDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
</svg>
</template>
<template #heading>{{ t('home.traffic') }}</template>
{{ t('home.trafficDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</template>
<template #heading>{{ t('home.session') }}</template>
{{ t('home.sessionDesc') }}
</WelcomeItem>
<WelcomeItem>
<template #icon>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</template>
<template #heading>{{ t('home.deploy') }}</template>
{{ t('home.deployDesc') }}
</WelcomeItem>
</div>
</template>
frontend/src/locales/en.ts
+26 -13
View File
@@ -62,7 +62,7 @@ export default {
about: {
title: 'About LmVPN',
description:
'LmVPN is a lightweight VPN tunnel management system built with Go + Vue 3. It supports multiple VPN protocols and provides secure and reliable point-to-point and point-to-site networking solutions.',
'LmVPN is a lightweight Layer-3 VPN system built on WebSocket tunnels and TUN virtual NICs using Go + Vue 3. It supports multi-user management, IPv4/IPv6 dual-stack, static IP reservations, and traffic statistics for point-to-point and point-to-site networking.',
},
admin: {
title: 'Admin Dashboard',
@@ -153,18 +153,31 @@ export default {
lastCommit: 'Last commit',
},
home: {
tagline: 'Secure, fast, and reliable VPN tunnel management system',
secureTunnel: 'Secure Tunnel',
secureTunnelDesc:
'Based on WireGuard/OpenVPN protocols with end-to-end encryption to keep your data safe.',
multiDevice: 'Multi-Device Support',
tagline:
'A lightweight Layer-3 VPN tunnel management system built on WebSocket and TUN virtual NICs',
tunnel: 'WebSocket Tunnel',
tunnelDesc:
'Layer-3 tunnel over WebSocket and TUN virtual NICs, with WSS/TLS transport security via reverse proxy.',
userManage: 'Multi-User Management',
userManageDesc:
'Admin and user roles with full user CRUD, enable/disable, and password changes, plus self-protection rules.',
multiDevice: 'Multi-Device Concurrent',
multiDeviceDesc:
'Connect multiple devices simultaneously — phones, computers, and routers all supported.',
trafficMonitor: 'Traffic Monitoring',
trafficMonitorDesc:
'Real-time traffic statistics and bandwidth analysis to stay on top of network usage.',
easyConfig: 'Easy Configuration',
easyConfigDesc:
'One-click deployment with auto-configuration — no advanced networking knowledge required.',
'Up to 3 concurrent connections per user with automatic tunnel IP assignment.',
dualStack: 'IPv4/IPv6 Dual-Stack',
dualStackDesc:
'Supports both IPv4 and IPv6 subnets with NAT dual-stack forwarding and anti-spoofing.',
reservation: 'Static IP Reservation',
reservationDesc:
'Reserve fixed IPv4/IPv6 addresses per user with automatic subnet and uniqueness validation.',
traffic: 'Traffic Statistics',
trafficDesc:
'Real-time online device and traffic statistics with daily aggregated records.',
session: 'Session Management',
sessionDesc:
'JWT token sessions with self-revocation and admin force-logout, with cascading invalidation.',
deploy: 'One-Click Deploy & Diagnostics',
deployDesc:
'One-click Linux deployment script with a built-in system environment diagnostics panel.',
},
}
frontend/src/locales/zh.ts
+22 -11
View File
@@ -62,7 +62,7 @@ export default {
about: {
title: '关于 LmVPN',
description:
'LmVPN 是一款轻量级 VPN 隧道管理系统，采用 Go + Vue 3 技术栈构建。支持多种 VPN 协议，提供安全可靠的点对点与点对站点网络连接方案。',
'LmVPN 是一款基于 WebSocket 隧道与 TUN 虚拟网卡的轻量级三层 VPN 系统，采用 Go + Vue 3 构建。支持多用户管理、IPv4/IPv6 双栈、静态 IP 预留与流量统计，提供点对点与点对站点网络连接方案。',
},
admin: {
title: '管理后台',
@@ -152,15 +152,26 @@ export default {
lastCommit: '最后提交',
},
home: {
tagline: '安全、快速、可靠的 VPN 隧道管理系统',
secureTunnel: '安全隧道',
secureTunnelDesc:
'基于 WireGuard/OpenVPN 协议，端到端加密传输，保障数据安全无泄漏。',
multiDevice: '多设备支持',
multiDeviceDesc: '同时连接多台设备，手机、电脑、路由器全平台覆盖。',
trafficMonitor: '流量监控',
trafficMonitorDesc: '实时流量统计与带宽分析，随时掌握网络使用状况。',
easyConfig: '简易配置',
easyConfigDesc: '一键部署、自动配置，无需复杂网络知识即可上线。',
tagline: '基于 WebSocket 与 TUN 虚拟网卡的轻量级三层 VPN 隧道管理系统',
tunnel: 'WebSocket 隧道',
tunnelDesc:
'基于 WebSocket 与 TUN 虚拟网卡的三层隧道，经反向代理提供 WSS/TLS 传输安全。',
userManage: '多用户管理',
userManageDesc:
'管理员与普通角色，支持用户增删改、启用禁用与改密，内置自保护规则。',
multiDevice: '多设备并发',
multiDeviceDesc: '每用户最多 3 个并发连接，自动分配隧道 IP 地址。',
dualStack: 'IPv4/IPv6 双栈',
dualStackDesc: '同时支持 IPv4 与 IPv6 子网，NAT 双栈转发与源地址反欺骗。',
reservation: '静态 IP 预留',
reservationDesc:
'按用户预留固定 IPv4/IPv6 地址，自动校验子网合法性与唯一性。',
traffic: '流量统计',
trafficDesc: '实时统计在线设备与流量，按日聚合记录网络使用状况。',
session: '会话管理',
sessionDesc:
'JWT 令牌会话，支持自行注销与管理员强制下线，状态变更级联失效。',
deploy: '一键部署与诊断',
deployDesc: 'Linux 一键脚本部署，内置系统环境检测面板快速定位问题。',
},
}