修改前端内容

frontend/src/components/TheWelcome.vue

@@ -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>
+      <template #heading>{{ t('home.tunnel') }}</template>
-      {{ t('home.secureTunnelDesc') }}
+      {{ 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>
+      <template #heading>{{ t('home.dualStack') }}</template>
-      {{ t('home.trafficMonitorDesc') }}
+      {{ 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" />
+          <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" />
-          <circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
         </svg>
       </template>
-      <template #heading>{{ t('home.easyConfig') }}</template>
+      <template #heading>{{ t('home.reservation') }}</template>
-      {{ t('home.easyConfigDesc') }}
+      {{ 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

@@ -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',
+    tagline:
-    secureTunnel: 'Secure Tunnel',
+      'A lightweight Layer-3 VPN tunnel management system built on WebSocket and TUN virtual NICs',
-    secureTunnelDesc:
+    tunnel: 'WebSocket Tunnel',
-      'Based on WireGuard/OpenVPN protocols with end-to-end encryption to keep your data safe.',
+    tunnelDesc:
-    multiDevice: 'Multi-Device Support',
+      '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.',
+      'Up to 3 concurrent connections per user with automatic tunnel IP assignment.',
-    trafficMonitor: 'Traffic Monitoring',
+    dualStack: 'IPv4/IPv6 Dual-Stack',
-    trafficMonitorDesc:
+    dualStackDesc:
-      'Real-time traffic statistics and bandwidth analysis to stay on top of network usage.',
+      'Supports both IPv4 and IPv6 subnets with NAT dual-stack forwarding and anti-spoofing.',
-    easyConfig: 'Easy Configuration',
+    reservation: 'Static IP Reservation',
-    easyConfigDesc:
+    reservationDesc:
-      'One-click deployment with auto-configuration — no advanced networking knowledge required.',
+      '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

@@ -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 隧道管理系统',
+    tagline: '基于 WebSocket 与 TUN 虚拟网卡的轻量级三层 VPN 隧道管理系统',
-    secureTunnel: '安全隧道',
+    tunnel: 'WebSocket 隧道',
-    secureTunnelDesc:
+    tunnelDesc:
-      '基于 WireGuard/OpenVPN 协议，端到端加密传输，保障数据安全无泄漏。',
+      '基于 WebSocket 与 TUN 虚拟网卡的三层隧道，经反向代理提供 WSS/TLS 传输安全。',
-    multiDevice: '多设备支持',
+    userManage: '多用户管理',
-    multiDeviceDesc: '同时连接多台设备，手机、电脑、路由器全平台覆盖。',
+    userManageDesc:
-    trafficMonitor: '流量监控',
+      '管理员与普通角色，支持用户增删改、启用禁用与改密，内置自保护规则。',
-    trafficMonitorDesc: '实时流量统计与带宽分析，随时掌握网络使用状况。',
+    multiDevice: '多设备并发',
-    easyConfig: '简易配置',
+    multiDeviceDesc: '每用户最多 3 个并发连接，自动分配隧道 IP 地址。',
-    easyConfigDesc: '一键部署、自动配置，无需复杂网络知识即可上线。',
+    dualStack: 'IPv4/IPv6 双栈',
+    dualStackDesc: '同时支持 IPv4 与 IPv6 子网，NAT 双栈转发与源地址反欺骗。',
+    reservation: '静态 IP 预留',
+    reservationDesc:
+      '按用户预留固定 IPv4/IPv6 地址，自动校验子网合法性与唯一性。',
+    traffic: '流量统计',
+    trafficDesc: '实时统计在线设备与流量，按日聚合记录网络使用状况。',
+    session: '会话管理',
+    sessionDesc:
+      'JWT 令牌会话，支持自行注销与管理员强制下线，状态变更级联失效。',
+    deploy: '一键部署与诊断',
+    deployDesc: 'Linux 一键脚本部署，内置系统环境检测面板快速定位问题。',
   },
 }