feat: 全面优化 — UI/UX重构 + 流量审计与会话管理 + 协议部署

UI/UX 优化: - 登录页分屏布局 + 可访问性修复 + 内联错误提示 - 侧栏菜单分组(专线运维/资源管理/系统) + 图标修正 + 子路由高亮 - Dashboard 统计卡渐变图标 + 空状态引导 + 统计卡可点击 - 创建向导: 依赖检测门控 + 高级折叠 + 必填校验 + WireGuard推荐标 - 专线列表: 空状态CTA + 操作列「更多」下拉 + 状态筛选 + SSE日志流 - 协议品牌SVG图标(ProtocolIcon组件)替换emoji - 设计令牌系统(tokens.css)统一颜色/间距/圆角/阴影功能增强: - 在线会话管理(sessionmgr): 跨协议会话同步 + 踢下线 + 连接审计日志 - 流量配额引擎(trafficmgr): 配额检查 + 超额动作(block/warn/throttle) + 周期重置 - 异常流量告警: 突发流量检测(>90MB/15s) + 审计记录 - 节点SSH凭证管理: 密码/私钥认证 + 即时测试连接 + AES-GCM加密存储 - 协议二进制管理(binmgr): FRP/OpenVPN GitHub下载 + 系统包安装引导(apt/yum/dnf) - 右上角修改密码弹窗 + MFA独立验证页 + 密码强度提示 - 用户管理: 批量导入 + LDAP浏览导入 + 平台用户导入VPN拨号用户 - 404路由 + IPSec对接页可达性修复 - MFA备用码持久化弹窗(替代Toast) - 轮询可见性守卫 + ECharts resize修复后端: - 3张新表: VPNSession/ConnectionLog/TrafficPolicy - monitor增强: 会话同步+配额检查+异常告警+到期审计 - changePassword统一8位+新旧不同校验 - openvpn-otp文案专业化(移除抄袭感) - SSE日志流(token降级query参数)
2026-07-23 01:42:36 +08:00
1 parent 58c036c34c
commit 1e2f8ef24f
@@ -1,21 +1,38 @@
 import axios from 'axios'
 import { reactive } from 'vue'

-// 极简全局状态
+// 极简全局状态（含角色与强制改密，对齐 Kimi 生产加固）
 export const auth = reactive({
  token: localStorage.getItem('vpn_token') || '',
  username: localStorage.getItem('vpn_user') || '',
-  login(token, username) {
+  role: localStorage.getItem('vpn_role') || 'viewer',
+  mustChange: localStorage.getItem('vpn_must_change') === '1',
+  login(token, username, role, mustChange) {
    this.token = token
    this.username = username
+    this.role = role || 'viewer'
+    this.mustChange = !!mustChange
    localStorage.setItem('vpn_token', token)
    localStorage.setItem('vpn_user', username)
+    localStorage.setItem('vpn_role', this.role)
+    localStorage.setItem('vpn_must_change', this.mustChange ? '1' : '0')
  },
+  clearMustChange() {
+    this.mustChange = false
+    localStorage.setItem('vpn_must_change', '0')
+  },
+  isAdmin() { return this.role === 'admin' },
+  canManage() { return this.role === 'admin' || this.role === 'operator' },
  logout() {
+    if (this.token) api.post('/logout').catch(() => {})
    this.token = ''
    this.username = ''
+    this.role = 'viewer'
+    this.mustChange = false
    localStorage.removeItem('vpn_token')
    localStorage.removeItem('vpn_user')
+    localStorage.removeItem('vpn_role')
+    localStorage.removeItem('vpn_must_change')
  }
 })

@@ -29,9 +46,14 @@ api.interceptors.request.use(cfg => {
 api.interceptors.response.use(
  res => res,
  err => {
-    if (err.response?.status === 401) {
+    const status = err.response?.status
+    if (status === 401) {
      auth.logout()
      if (location.pathname !== '/login') location.href = '/login'
+    } else if (status === 403 && err.response?.data?.must_change_password) {
+      auth.mustChange = true
+      localStorage.setItem('vpn_must_change', '1')
+      if (location.pathname !== '/settings') location.href = '/settings'
    }
    return Promise.reject(err)
  }
@@ -0,0 +1,73 @@
+<!--
+  ProtocolIcon.vue — 专业协议品牌 SVG 图标组件 // Logan.Li
+  WireGuard / OpenVPN 路径来自 Simple Icons (simpleicons.org)，遵循 CC0 协议。
+  IPSec / L2TP / IKEv2 / FRP / Custom 为原创矢量图标（网络/安全语义）。
+  用法：<ProtocolIcon protocol="wireguard" :size="32" />
+-->
+<template>
+  <svg
+    :width="size" :height="size" viewBox="0 0 24 24"
+    xmlns="http://www.w3.org/2000/svg"
+    :aria-label="label" role="img"
+    fill="currentColor"
+  >
+    <title>{{ label }}</title>
+    <path :d="pathData" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  protocol: { type: String, required: true },
+  size: { type: [Number, String], default: 28 },
+})
+
+// 品牌名称映射
+const NAMES = {
+  wireguard: 'WireGuard',
+  ipsec: 'IPSec',
+  ikev2: 'IKEv2',
+  l2tp: 'L2TP',
+  frp: 'FRP',
+  openvpn: 'OpenVPN',
+  custom: '自定义协议',
+}
+
+const label = computed(() => {
+  const key = props.protocol.startsWith('custom:') ? 'custom' : props.protocol
+  return NAMES[key] || props.protocol
+})
+
+// SVG path 数据
+// WireGuard / OpenVPN: 官方 Simple Icons 路径 (https://simpleicons.org)
+// 其余: 原创矢量图标
+const ICON_PATHS = {
+  // WireGuard 官方 Logo (Simple Icons, CC0)
+  wireguard: 'M23.98 11.645S24.533 0 11.735 0C.418 0 .064 11.17.064 11.17S-1.6 24 11.997 24C25.04 24 23.98 11.645 23.98 11.645zM8.155 7.576c2.4-1.47 5.469-.571 6.618 1.638.218.419.246 1.063.108 1.503-.477 1.516-1.601 2.366-3.145 2.728.455-.39.817-.832.933-1.442a2.112 2.112 0 0 0-.364-1.677 2.14 2.14 0 0 0-2.465-.75c-.95.36-1.47 1.228-1.377 2.294.087.99.839 1.632 2.245 1.876-.21.111-.372.193-.53.281a5.113 5.113 0 0 0-1.644 1.43c-.143.192-.24.208-.458.075-2.827-1.729-3.009-6.067.078-7.956zM6.04 18.258c-.455.116-.895.286-1.359.438.227-1.532 2.021-2.943 3.539-2.782a3.91 3.91 0 0 0-.74 2.072c-.504.093-.98.155-1.44.272zM15.703 3.3c.448.017.898.01 1.347.02a2.324 2.324 0 0 1 .334.047 3.249 3.249 0 0 1-.34.434c-.16.15-.341.296-.573.069-.055-.055-.187-.042-.283-.044-.447-.005-.894-.02-1.34-.003a8.323 8.323 0 0 0-1.154.118c-.072.013-.178.25-.146.338.078.207.191.435.359.567.619.49 1.277.928 1.9 1.413.604.472 1.167.99 1.51 1.7.446.928.46 1.9.267 2.877-.322 1.63-1.147 2.98-2.483 3.962-.538.395-1.205.62-1.821.903-.543.25-1.1.465-1.644.712-.98.446-1.53 1.51-1.369 2.615.149 1.015 1.04 1.862 2.059 2.037 1.223.21 2.486-.586 2.785-1.83.336-1.397-.423-2.646-1.845-3.024l-.256-.066c.38-.17.708-.291 1.012-.458q.793-.437 1.558-.925c.15-.096.231-.096.36.014.977.846 1.56 1.898 1.724 3.187.27 2.135-.74 4.096-2.646 5.101-2.948 1.555-6.557-.215-7.208-3.484-.558-2.8 1.418-5.34 3.797-5.83 1.023-.211 1.958-.637 2.685-1.425.47-.508.697-.944.775-1.141a3.165 3.165 0 0 0 .217-1.158 2.71 2.71 0 0 0-.237-.992c-.248-.566-1.2-1.466-1.435-1.656l-2.24-1.754c-.079-.065-.168-.06-.36-.047-.23.016-.815.048-1.067-.018.204-.155.76-.38 1-.56-.726-.49-1.554-.314-2.315-.46.176-.328 1.046-.831 1.541-.888a7.323 7.323 0 0 0-.135-.822c-.03-.111-.154-.22-.263-.283-.262-.154-.541-.281-.843-.434a1.755 1.755 0 0 1 .906-.28 3.385 3.385 0 0 1 .908.088c.54.123.97.042 1.399-.324-.338-.136-.676-.26-1.003-.407a9.843 9.843 0 0 1-.942-.493c.85.118 1.671.437 2.54.32l.022-.118-2.018-.47c1.203-.11 2.323-.128 3.384.388.299.146.61.266.897.432.14.08.233.24.348.365.09.098.164.23.276.29.424.225.89.234 1.366.223l.01-.16c.479.15 1.017.702 1.017 1.105-.776 0-1.55-.003-2.325.004-.083 0-.165.061-.247.094.078.046.155.128.235.131z',
+
+  // OpenVPN 官方 Logo (Simple Icons, CC0)
+  openvpn: 'M12 .357C5.385.357 0 5.69 0 12.254c0 4.36 2.358 8.153 5.896 10.204l.77-5.076a7.046 7.046 0 01-1.846-4.719c0-3.897 3.18-7.076 7.13-7.076 3.948 0 7.126 3.18 7.126 7.076 0 1.847-.717 3.488-1.846 4.77L18 22.51c3.59-2.05 6-5.899 6-10.258C24 5.69 18.615.357 12 .357zm-.05 8.157a3.786 3.786 0 00-3.796 3.795 3.738 3.738 0 002.461 3.54L9.13 23.643h5.64l-1.435-7.795c1.385-.564 2.41-1.898 2.41-3.54a3.786 3.786 0 00-3.795-3.794z',
+
+  // IPSec — 盾牌+锁（站点互联安全隧道语义）
+  ipsec: 'M12 1L3 5v6c0 5.5 3.8 10.7 9 12 5.2-1.3 9-6.5 9-12V5l-9-4zm-1 5h2v3h-2V6zm0 4.5h2v7.5h-2v-7.5z M12 6.5a1.5 1.5 0 110 3 1.5 1.5 0 010-3z',
+
+  // IKEv2 — 双向箭头环（密钥交换语义）
+  ikev2: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm4.5 11H7.5l2 2-1.4 1.4L4.7 12l3.4-4.4L9.5 9l-2 2h9l-2-2 1.4-1.4 3.4 4.4-3.4 4.4L15.5 15l2-2z',
+
+  // L2TP — 手机+信号波（移动设备拨号语义）
+  l2tp: 'M7 1C5.9 1 5 1.9 5 3v18c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H7zm5 19c-.83 0-1.5-.67-1.5-1.5S11.17 17 12 17s1.5.67 1.5 1.5S12.83 20 12 20zm5-4H7V4h10v12z M9.5 6.5l2 2-2 2-1-1 1-1-1-1 1-1z M14.5 6.5l1 1-1 1 1 1-1 1-2-2 2-2z',
+
+  // FRP — 隧道+箭头穿透（内网穿透语义）
+  frp: 'M3 8h2v8H3V8zm16 0h2v8h-2V8zM7 10h10v4H7v-4zm2 1.5l2 1.5-2 1.5v-3zm6 0v3l-2-1.5 2-1.5z M12 6l3 2H9l3-2zm0 12l-3-2h6l-3 2z',
+
+  // Custom — 拼图块（插件扩展语义）
+  custom: 'M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5a2.5 2.5 0 0 0-5 0V5H4a1 1 0 0 0-1 1v4h1.5a2.5 2.5 0 0 1 0 5H3v4a1 1 0 0 0 1 1h4v-1.5a2.5 2.5 0 0 1 5 0V20h4c1.1 0 2-.9 2-2v-4h1.5a2.5 2.5 0 0 0 0-5z',
+}
+
+const pathData = computed(() => {
+  const key = props.protocol.startsWith('custom:') ? 'custom' : props.protocol
+  return ICON_PATHS[key] || ICON_PATHS.custom
+})
+</script>
@@ -4,6 +4,7 @@ import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
+import './styles/tokens.css'
 import './style.css'

 const app = createApp(App)
@@ -3,48 +3,83 @@ export const PROTOCOL_META = {
  wireguard: {
    name: 'WireGuard',
    desc: '性能最好的现代 VPN，内核级实现，漫游友好',
-    color: '#88171a',
-    icon: '⚡',
+    color: '#c0392b',
+    icon: 'wireguard',
    scenes: '内部接入 / 移动办公',
    fields: [
      { key: 'address', label: '服务端 VPN 网段地址', placeholder: '10.8.0.1/24', required: true, tip: '服务端在 VPN 网段中的地址（CIDR）' },
      { key: 'listen_port', label: '监听端口', type: 'number', default: 51820 },
-      { key: 'client_address', label: '客户端地址', placeholder: '10.8.0.2/32', tip: '分配给首个客户端的地址' },
+      { key: 'client_address', label: '首个客户端地址', placeholder: '10.8.0.2/32', tip: '创建后可在详情中继续添加 Peer' },
      { key: 'public_endpoint', label: '公网接入点', placeholder: 'vpn.example.com:51820', tip: '客户端连接用，公网 IP:端口' },
      { key: 'dns', label: 'DNS', default: '223.5.5.5' },
-      { key: 'allowed_ips', label: '客户端 AllowedIPs', default: '0.0.0.0/0, ::/0', tip: '全流量代理用 0.0.0.0/0；仅内网填内网网段' }
+      { key: 'allowed_ips', label: '客户端 AllowedIPs', default: '0.0.0.0/0, ::/0', tip: '全流量代理用 0.0.0.0/0；仅内网填内网网段' },
+      { key: 'keepalive', label: 'Keepalive(秒)', type: 'number', default: 25, tip: 'NAT 后客户端建议 15–25' },
+      { key: 'mtu', label: 'MTU', type: 'number', default: 0, tip: '0 表示默认；跨公网常见 1280–1420' },
+      { key: 'enable_nat', label: '启用 NAT 出网', type: 'switch', default: false, tip: '客户端需访问公网/其它网段时开启' },
+      { key: 'egress_interface', label: 'NAT 出口网卡', placeholder: 'eth0', tip: '留空则自动探测默认路由网卡', showIf: { enable_nat: true } }
    ]
  },
  ipsec: {
    name: 'IPSec 站点互联',
    desc: '与第三方设备（Cisco/华为/飞塔等）做站点到站点对接',
    color: '#1f6fb2',
-    icon: '🔗',
+    icon: 'ipsec',
    scenes: '第三方对接 / 站点互联',
    fields: [
+      { key: 'vendor_template', label: '厂商模板', type: 'select', options: [
+        { value: 'generic', label: '通用标准（推荐）' },
+        { value: 'cisco', label: 'Cisco ISR/ASR' },
+        { value: 'fortigate', label: 'FortiGate' },
+        { value: 'huawei', label: '华为 USG/AR' },
+        { value: 'h3c', label: 'H3C' }
+      ], default: 'generic', tip: '自动预填 Phase1/Phase2 提议，仍可手动改' },
      { key: 'public_endpoint', label: '本端公网 IP', placeholder: '1.2.3.4', required: true },
      { key: 'remote_gateway', label: '对端网关地址', placeholder: '5.6.7.8', required: true },
      { key: 'local_subnets', label: '本端网段', placeholder: '192.168.1.0/24', required: true, tip: '多个网段用逗号分隔' },
      { key: 'remote_subnets', label: '对端网段', placeholder: '10.0.0.0/24', required: true },
      { key: 'psk', label: '预共享密钥 PSK', type: 'password', required: true, secret: true },
-      { key: 'ike_version', label: 'IKE 版本', type: 'select', options: ['ikev2', 'ikev1'], default: 'ikev2' },
+      { key: 'ike_version', label: 'IKE 版本', type: 'select', options: [
+        { value: 'ikev2', label: 'IKEv2' },
+        { value: 'ikev1', label: 'IKEv1' }
+      ], default: 'ikev2' },
      { key: 'ike_proposal', label: 'Phase1 提议', placeholder: 'aes256-sha256-modp2048', tip: '加密-认证-DH组，需与对端一致' },
      { key: 'esp_proposal', label: 'Phase2 提议', placeholder: 'aes256-sha256' },
+      { key: 'pfs_group', label: 'PFS DH 组', default: 'modp2048' },
+      { key: 'ike_lifetime', label: 'IKE 生存期(秒)', type: 'number', default: 86400 },
      { key: 'local_id', label: '本端标识 ID', placeholder: '@vpn-local' },
      { key: 'remote_id', label: '对端标识 ID', placeholder: '@vpn-remote' }
    ]
  },
+  ikev2: {
+    name: 'IKEv2 远程接入',
+    desc: '手机/笔记本原生拨号进内网，比 L2TP 更现代',
+    color: '#0d7377',
+    icon: 'ikev2',
+    scenes: '员工远程办公 / 原生 VPN',
+    fields: [
+      { key: 'public_endpoint', label: '服务器公网地址', placeholder: 'vpn.example.com', required: true },
+      { key: 'local_id', label: '服务器 ID / 远程 ID', placeholder: '@opsx-ikev2', default: '@opsx-ikev2', tip: '客户端「远程 ID」与此一致' },
+      { key: 'psk', label: '机器认证 PSK', type: 'password', secret: true, tip: '留空自动生成；iOS/Android 共享密钥' },
+      { key: 'username', label: '默认拨号用户', default: 'vpnuser' },
+      { key: 'password', label: '默认拨号密码', type: 'password', secret: true, tip: '留空自动生成；更多账号在拨号用户页添加' },
+      { key: 'address_pool', label: '客户端地址池', default: '10.12.0.0/24' },
+      { key: 'dns', label: '下发 DNS', default: '223.5.5.5' },
+      { key: 'local_ts', label: '放行网段', default: '0.0.0.0/0', tip: '0.0.0.0/0 为全流量；可改为内网 CIDR' },
+      { key: 'ike_proposal', label: 'IKE 提议', default: 'aes256-sha256-modp2048' },
+      { key: 'esp_proposal', label: 'ESP 提议', default: 'aes256-sha256' }
+    ]
+  },
  l2tp: {
    name: 'L2TP/IPSec',
    desc: '兼容性最好，手机/老设备/路由器原生支持',
    color: '#5a8a3c',
-    icon: '📱',
+    icon: 'l2tp',
    scenes: '移动设备 / 老设备兼容',
    fields: [
      { key: 'public_endpoint', label: '服务器公网 IP', placeholder: '1.2.3.4', required: true },
      { key: 'psk', label: 'IPSec 预共享密钥', type: 'password', required: true, secret: true },
-      { key: 'username', label: '拨号用户名', default: 'vpnuser' },
-      { key: 'password', label: '拨号密码', type: 'password', required: true, secret: true },
+      { key: 'username', label: '默认拨号用户名', default: 'vpnuser', tip: '可在「VPN 拨号用户」为本隧道添加更多账号' },
+      { key: 'password', label: '默认拨号密码', type: 'password', secret: true, tip: '若只使用拨号用户表可留空（创建时需至少有一种）' },
      { key: 'ip_range', label: '客户端地址池', default: '10.9.0.100-10.9.0.200' },
      { key: 'local_ip', label: '服务端隧道地址', default: '10.9.0.1' },
      { key: 'dns', label: '下发 DNS', default: '223.5.5.5' }
@@ -54,39 +89,87 @@ export const PROTOCOL_META = {
    name: 'FRP 内网穿透',
    desc: '国内刚需，TCP/UDP/HTTP 端口映射与反向代理',
    color: '#c0762b',
-    icon: '🚇',
+    icon: 'frp',
    scenes: '内网穿透 / 端口映射',
    fields: [
-      { key: 'mode', label: '运行模式', type: 'select', options: ['server', 'client'], default: 'server', tip: 'server=frps（有公网），client=frpc（内网侧）' },
+      { key: 'mode', label: '运行模式', type: 'select', options: [
+        { value: 'server', label: 'server (frps 公网侧)' },
+        { value: 'client', label: 'client (frpc 内网侧)' }
+      ], default: 'server', tip: 'server=frps（有公网），client=frpc（内网侧）' },
      { key: 'bind_port', label: '绑定端口(server)', type: 'number', default: 7000, showIf: { mode: 'server' } },
      { key: 'public_endpoint', label: '公网地址(server)', placeholder: '1.2.3.4', showIf: { mode: 'server' } },
      { key: 'dashboard_port', label: '管理面板端口(server)', type: 'number', default: 7500, showIf: { mode: 'server' } },
      { key: 'dashboard_user', label: '管理面板账号(server)', default: 'admin', showIf: { mode: 'server' } },
      { key: 'dashboard_password', label: '管理面板密码(server)', type: 'password', secret: true, showIf: { mode: 'server' }, tip: '留空时自动生成强随机密码；编辑时留空保持原密码' },
+      { key: 'vhost_http_port', label: 'HTTP 虚拟主机端口', type: 'number', default: 0, showIf: { mode: 'server' }, tip: '0 表示不启用；HTTP 代理需 >0' },
+      { key: 'vhost_https_port', label: 'HTTPS 虚拟主机端口', type: 'number', default: 0, showIf: { mode: 'server' }, tip: '0 表示不启用' },
+      { key: 'allow_ports', label: '允许映射端口范围', placeholder: '6000-6100,7001', showIf: { mode: 'server' }, tip: '限制 frpc 可申请的 remotePort' },
      { key: 'server_addr', label: 'frps 地址(client)', placeholder: '1.2.3.4', showIf: { mode: 'client' } },
      { key: 'server_port', label: 'frps 端口(client)', type: 'number', default: 7000, showIf: { mode: 'client' } },
      { key: 'token', label: '认证 Token', type: 'password', secret: true, tip: '留空自动生成' },
-      { key: 'proxy_name', label: '代理名称', placeholder: 'ssh' },
-      { key: 'proxy_type', label: '代理类型', type: 'select', options: ['tcp', 'udp', 'http', 'https'], default: 'tcp' },
+      { key: 'proxy_name', label: '代理名称', placeholder: 'ssh', default: 'ssh' },
+      { key: 'proxy_type', label: '代理类型', type: 'select', options: [
+        { value: 'tcp', label: 'TCP' },
+        { value: 'udp', label: 'UDP' },
+        { value: 'http', label: 'HTTP' },
+        { value: 'https', label: 'HTTPS' },
+        { value: 'stcp', label: 'STCP（安全点对点）' },
+        { value: 'xtcp', label: 'XTCP（P2P）' }
+      ], default: 'tcp' },
      { key: 'local_ip', label: '内网目标 IP', default: '127.0.0.1' },
      { key: 'local_port', label: '内网目标端口', type: 'number', default: 22 },
      { key: 'remote_port', label: '公网映射端口', type: 'number', default: 6000, showIf: { proxy_type: ['tcp', 'udp'] } },
-      { key: 'custom_domains', label: '绑定域名', placeholder: 'app.example.com, www.example.com', showIf: { proxy_type: ['http', 'https'] }, tip: 'HTTP/HTTPS 代理必填，多个域名用逗号分隔' }
+      { key: 'custom_domains', label: '绑定域名', placeholder: 'app.example.com', showIf: { proxy_type: ['http', 'https'] }, tip: 'HTTP/HTTPS 代理必填' },
+      { key: 'secret_key', label: 'STCP/XTCP 密钥', type: 'password', secret: true, showIf: { proxy_type: ['stcp', 'xtcp'] }, tip: '访问端与提供端需一致' }
    ]
  },
  openvpn: {
    name: 'OpenVPN',
    desc: '最成熟的开源 VPN，兼容各类老项目与系统',
    color: '#e07b39',
-    icon: '🛡️',
+    icon: 'openvpn',
    scenes: '老项目兼容 / 通用接入',
    fields: [
      { key: 'public_endpoint', label: '公网接入地址', placeholder: 'vpn.example.com', required: true },
      { key: 'port', label: '端口', type: 'number', default: 1194 },
-      { key: 'proto', label: '传输协议', type: 'select', options: ['udp', 'tcp'], default: 'udp' },
-      { key: 'subnet', label: 'VPN 网段', default: '10.10.0.0 255.255.255.0' },
-      { key: 'cipher', label: '加密算法', type: 'select', options: ['AES-256-GCM', 'AES-128-GCM', 'AES-256-CBC'], default: 'AES-256-GCM' },
-      { key: 'dns', label: '下发 DNS', default: '223.5.5.5' }
+      { key: 'proto', label: '传输协议', type: 'select', options: [
+        { value: 'udp', label: 'UDP（推荐，性能更好）' },
+        { value: 'tcp-server', label: 'TCP（穿透限制网络更稳）' }
+      ], default: 'udp', tip: '可随时在编辑中切换；切换后需重启专线，客户端需重新下载配置' },
+      { key: 'subnet', label: 'VPN 网段', default: '10.10.0.0 255.255.255.0', tip: '如 10.8.0.0 255.255.240.0 可容纳更多客户端（/20）' },
+      { key: 'cipher', label: '加密算法', type: 'select', options: [
+        { value: 'AES-256-GCM', label: 'AES-256-GCM' },
+        { value: 'AES-128-GCM', label: 'AES-128-GCM' },
+        { value: 'AES-256-CBC', label: 'AES-256-CBC' }
+      ], default: 'AES-256-GCM' },
+      { key: 'auth_mode', label: '认证方式', type: 'select', options: [
+        { value: 'certificate', label: '仅证书' },
+        { value: 'password', label: '仅用户名密码' },
+        { value: 'certificate+password', label: '证书 + 密码' }
+      ], default: 'certificate', tip: '密码模式对齐生产 verify-client-cert none + username-as-common-name' },
+      { key: 'mfa_mode', label: '拨号 MFA (2FA)', type: 'select', options: [
+        { value: 'off', label: '关闭' },
+        { value: 'optional', label: '可选（用户绑定后才校验）' },
+        { value: 'required', label: '强制（所有拨号用户必须 MFA）' }
+      ], default: 'off', tip: 'static-challenge + TOTP；在拨号用户页管理 OTP', showIf: { auth_mode: ['password', 'certificate+password'] } },
+      { key: 'otp_slop', label: 'OTP 时钟容差(秒)', type: 'number', default: 90, showIf: { auth_mode: ['password', 'certificate+password'] } },
+      { key: 'otp_max_failures', label: 'OTP 失败锁定次数', type: 'number', default: 5, showIf: { auth_mode: ['password', 'certificate+password'] } },
+      { key: 'otp_lockout_sec', label: 'OTP 锁定时长(秒)', type: 'number', default: 300, showIf: { auth_mode: ['password', 'certificate+password'] } },
+      { key: 'otp_disallow_reuse', label: '禁止重复使用同码', type: 'switch', default: true, showIf: { auth_mode: ['password', 'certificate+password'] } },
+      { key: 'dns', label: '下发 DNS', default: '223.5.5.5' },
+      { key: 'redirect_gateway', label: '全流量代理', type: 'switch', default: true, tip: '关闭后仅推送下方内网路由（生产常只推指定路由）' },
+      { key: 'push_routes', label: '推送内网路由', placeholder: '192.168.0.0/16,10.0.0.0/8', tip: 'CIDR 逗号分隔' },
+      { key: 'enable_nat', label: '启用 NAT 出网', type: 'switch', default: false },
+      { key: 'max_clients', label: '最大客户端数', type: 'number', default: 1000, tip: '0 不限制；生产常见 1000' },
+      { key: 'keepalive_interval', label: 'Keepalive 间隔', type: 'number', default: 5, tip: '生产常用 keepalive 5 30' },
+      { key: 'keepalive_timeout', label: 'Keepalive 超时', type: 'number', default: 30 },
+      { key: 'tun_mtu', label: 'tun-mtu', type: 'number', default: 1500, tip: '生产常用 1500' },
+      { key: 'tun_mtu_extra', label: 'tun-mtu-extra', type: 'number', default: 32 },
+      { key: 'mssfix', label: 'mssfix', type: 'number', default: 0, tip: '0=不设置；TCP 生产常用 1450，选 TCP 时默认 1450' },
+      { key: 'duplicate_cn', label: '允许 duplicate-cn', type: 'switch', default: false, tip: '同用户名/证书多终端同时在线；密码模式默认会自动开启' },
+      { key: 'reneg_sec', label: 'reneg-sec', type: 'number', default: 0, tip: '0=禁用 TLS 重协商（生产/MFA 推荐）；证书-only 默认可 3600' },
+      { key: 'run_as_user', label: '降权用户', placeholder: 'openvpn', tip: '对应 user openvpn；需系统已有该用户，留空不降权' },
+      { key: 'run_as_group', label: '降权组', placeholder: 'openvpn', tip: '对应 group openvpn' }
    ]
  }
 }
@@ -99,11 +182,12 @@ export const CUSTOM_FIELDS = [
 ]

 export const PROTOCOL_COLORS = {
-  wireguard: '#88171a',
+  wireguard: '#c0392b',
  ipsec: '#1f6fb2',
-  l2tp: '#5a8a3c',
-  frp: '#c0762b',
-  openvpn: '#e07b39'
+  ikev2: '#0d7377',
+  l2tp: '#4a8a2c',
+  frp: '#b8651b',
+  openvpn: '#cc6529'
 }

 export function protocolDisplay(t) {
@@ -115,3 +199,11 @@ export function protocolColor(t) {
  if (t.startsWith('custom:')) return '#7b5ea7'
  return PROTOCOL_COLORS[t] || '#606266'
 }
+
+/** 解析 select 的 options（兼容字符串与 {value,label}） */
+export function optionValue(o) {
+  return typeof o === 'object' && o !== null ? o.value : o
+}
+export function optionLabel(o) {
+  return typeof o === 'object' && o !== null ? (o.label || o.value) : o
+}
@@ -3,6 +3,7 @@ import { auth } from './api'

 const routes = [
  { path: '/login', component: () => import('./views/Login.vue'), meta: { public: true } },
+  { path: '/mfa-verify', component: () => import('./views/MfaVerify.vue'), meta: { public: true } },
  {
    path: '/',
    component: () => import('./views/Layout.vue'),
@@ -10,14 +11,16 @@ const routes = [
    children: [
      { path: 'dashboard', component: () => import('./views/Dashboard.vue'), meta: { title: '总览' } },
      { path: 'tunnels', component: () => import('./views/Tunnels.vue'), meta: { title: '专线列表' } },
+      { path: 'sessions', component: () => import('./views/Sessions.vue'), meta: { title: '在线会话' } },
      { path: 'tunnels/create', component: () => import('./views/TunnelWizard.vue'), meta: { title: '创建专线' } },
      { path: 'tunnels/:id/edit', component: () => import('./views/TunnelEditor.vue'), meta: { title: '编辑专线' } },
      { path: 'ipsec-peer', component: () => import('./views/IpsecPeer.vue'), meta: { title: 'IPSec 第三方对接' } },
      { path: 'nodes', component: () => import('./views/Nodes.vue'), meta: { title: '节点管理' } },
-      { path: 'users', component: () => import('./views/Users.vue'), meta: { title: '用户与 LDAP' } },
+      { path: 'users', component: () => import('./views/Users.vue'), meta: { title: '用户管理' } },
      { path: 'vpn-users', component: () => import('./views/VPNUsers.vue'), meta: { title: 'VPN 拨号用户' } },
      { path: 'plugins', component: () => import('./views/Plugins.vue'), meta: { title: '协议插件' } },
-      { path: 'settings', component: () => import('./views/Settings.vue'), meta: { title: '系统设置' } }
+      { path: 'settings', component: () => import('./views/Settings.vue'), meta: { title: '系统设置' } },
+      { path: ':pathMatch(.*)*', component: () => import('./views/NotFound.vue'), meta: { title: '页面不存在' } }
    ]
  }
 ]
@@ -1,13 +1,16 @@
 * { box-sizing: border-box; }
 html, body, #app { height: 100%; margin: 0; font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif; }
-body { background: #f5f7fa; }
+body { background: var(--bg-page); }

-.stat-card { border-radius: 10px; padding: 20px; color: #fff; position: relative; overflow: hidden; }
-.stat-card .num { font-size: 32px; font-weight: 700; margin-top: 8px; }
+.stat-card { border-radius: var(--radius-md); padding: var(--space-5); color: #fff; position: relative; overflow: hidden; }
+.stat-card .num { font-size: 32px; font-weight: 700; margin-top: var(--space-2); }
 .stat-card .label { opacity: .85; font-size: 14px; }

-.page-card { border-radius: 10px; }
+.page-card { border-radius: var(--radius-md); }

-.mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; }
+.mono { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }

 .protocol-tag { font-weight: 600; }
+
+/* 全局焦点可见样式（可访问性） */
+*:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@@ -0,0 +1,78 @@
+/* ============================================
+ * VPN 管理平台 设计令牌 (Design Tokens) // Logan.Li
+ * 统一全站颜色/间距/圆角/阴影，消灭散落的硬编码值。
+ * 在 element-plus css 之后引入，覆盖关键 EP 变量。
+ * ============================================ */
+
+:root {
+  /* ---- 品牌色（沿用深蓝系，统一为可引用变量）---- */
+  --brand: #1a2a4a;
+  --brand-accent: #2b5876;
+  --brand-primary: #409eff;
+  --brand-grad: linear-gradient(135deg, var(--brand) 0%, var(--brand-accent) 100%);
+
+  /* ---- 语义色 ---- */
+  --color-success: #67c23a;
+  --color-warning: #e6a23c;
+  --color-danger: #f56c6c;
+  --color-info: #909399;
+
+  /* ---- 文本层级（修对比度：placeholder 不再用 #c0c4cc）---- */
+  --text-primary: #303133;
+  --text-regular: #606266;
+  --text-secondary: #909399;
+  --text-placeholder: #a8abb2;
+
+  /* ---- 表面/背景 ---- */
+  --bg-page: #f5f7fa;
+  --bg-card: #ffffff;
+  --bg-inset: #f6f8fa;
+  --bg-sidebar: #1a2a4a;
+  --bg-sidebar-hover: rgba(255, 255, 255, 0.08);
+  --bg-sidebar-active: rgba(64, 158, 255, 0.15);
+  --bg-hover: #f5f7fa;
+
+  /* ---- 边框 ---- */
+  --border-base: #e8eaee;
+  --border-light: #f0f2f5;
+
+  /* ---- 圆角（统一为 3 级）---- */
+  --radius-sm: 6px;
+  --radius-md: 10px;
+  --radius-lg: 14px;
+
+  /* ---- 阴影（统一为 3 级）---- */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
+
+  /* ---- 间距（8px 网格）---- */
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+
+  /* ---- 覆盖 Element Plus 关键变量，使组件库与品牌统一 ---- */
+  --el-color-primary: #409eff;
+  --el-color-success: #67c23a;
+  --el-color-warning: #e6a23c;
+  --el-color-danger: #f56c6c;
+  --el-border-radius-base: 6px;
+  --el-font-size-base: 14px;
+}
+
+/* ---- 工具类 ---- */
+.row-between { display: flex; justify-content: space-between; align-items: center; }
+.fade-in { animation: vpn-fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
+
+@keyframes vpn-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 减弱动画偏好 */
+@media (prefers-reduced-motion: reduce) {
+  .fade-in { animation: none; }
+}
@@ -1,27 +1,49 @@
 <template>
  <div>
+    <!-- 空状态引导：0 条专线时展示 -->
+    <el-card v-if="ov.total === 0" class="page-card welcome-card fade-in" shadow="never">
+      <div class="welcome-inner">
+        <div class="welcome-icon"><el-icon :size="32" color="var(--brand-primary)"><Connection /></el-icon></div>
+        <div class="welcome-text">
+          <h3>欢迎使用 VPN 管理平台</h3>
+          <p>还没有专线，3 步即可创建第一条：选择协议 → 填写参数 → 自动生成配置</p>
+        </div>
+        <el-button type="primary" size="large" :icon="Plus" @click="$router.push('/tunnels/create')">立即创建专线</el-button>
+      </div>
+    </el-card>
+
+    <!-- 统计卡片：渐变 icon 块 + 数值，借鉴 opsx-web-lite/aiops -->
    <el-row :gutter="16">
-      <el-col :span="6"><div class="stat-card" style="background:linear-gradient(135deg,#4a6fa5,#2b4a7a)">
-        <div class="label">专线总数</div><div class="num">{{ ov.total ?? '-' }}</div></div></el-col>
-      <el-col :span="6"><div class="stat-card" style="background:linear-gradient(135deg,#4caf7d,#2e7d5b)">
-        <div class="label">运行中</div><div class="num">{{ ov.running ?? '-' }}</div></div></el-col>
-      <el-col :span="6"><div class="stat-card" style="background:linear-gradient(135deg,#e0935a,#c0762b)">
-        <div class="label">节点 / 插件</div><div class="num">{{ ov.nodes ?? 0 }} / {{ ov.plugins ?? 0 }}</div></div></el-col>
-      <el-col :span="6"><div class="stat-card" style="background:linear-gradient(135deg,#7b5ea7,#5a4080)">
-        <div class="label">累计流量 ↓↑</div><div class="num" style="font-size:22px">{{ fmtBytes(ov.rx_bytes) }} / {{ fmtBytes(ov.tx_bytes) }}</div></div></el-col>
+      <el-col :xs="12" :sm="12" :lg="6" v-for="(card, i) in statCards" :key="i">
+        <div class="stat-card fade-in" :class="{ clickable: card.to }" :style="{ animationDelay: i * 0.05 + 's' }"
+             @click="card.to && $router.push(card.to)">
+          <div class="stat-icon" :style="{ background: card.iconBg }">
+            <el-icon :size="26" color="#fff"><component :is="card.icon" /></el-icon>
+          </div>
+          <div class="stat-body">
+            <div class="stat-label">{{ card.label }}</div>
+            <div class="stat-num" :style="card.numStyle || {}">{{ card.value }}</div>
+          </div>
+        </div>
+      </el-col>
    </el-row>

    <el-row :gutter="16" style="margin-top:16px">
-      <el-col :span="10">
+      <el-col :xs="24" :lg="10">
        <el-card class="page-card" shadow="never">
          <template #header><b>协议分布</b></template>
          <div ref="pieRef" style="height:280px"></div>
        </el-card>
      </el-col>
-      <el-col :span="14">
+      <el-col :xs="24" :lg="14">
        <el-card class="page-card" shadow="never">
-          <template #header><b>协议引擎状态</b> <span class="dep-hint">系统依赖检测结果</span></template>
-          <el-table :data="protocols" size="large">
+          <template #header>
+            <div class="row-between">
+              <b>协议引擎状态</b>
+              <span class="dep-hint">系统依赖检测结果</span>
+            </div>
+          </template>
+          <el-table :data="protocols" size="default" v-loading="loadingProto">
            <el-table-column label="协议" width="180">
              <template #default="{ row }">
                <span class="protocol-tag" :style="{ color: protocolColor(row.name) }">{{ row.display_name }}</span>
@@ -30,18 +52,27 @@
            <el-table-column label="依赖状态" width="110">
              <template #default="{ row }">
                <el-tag :type="row.available ? 'success' : 'warning'" size="small">
-                  {{ row.available ? '已就绪' : '未部署' }}
+                  {{ row.available ? '已就绪' : '演示模式' }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="dependency" label="说明" show-overflow-tooltip />
+            <el-table-column label="操作" width="120">
+              <template #default="{ row }">
+                <template v-if="!row.available && !row.custom">
+                  <el-button v-if="deployableProtocols.includes(row.name)" size="small" type="primary"
+                             :loading="deploying === row.name" @click="deployProtocol(row.name)">下载部署</el-button>
+                  <el-button v-else size="small" @click="showInstallCmd(row.name)">安装命令</el-button>
+                </template>
+              </template>
+            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="page-card" shadow="never" style="margin-top:16px" v-if="ov.expiring?.length">
-      <template #header><b style="color:#e6a23c">⚠ 即将到期的专线（7 天内）</b></template>
+      <template #header><b style="color:var(--color-warning)">即将到期的专线（7 天内）</b></template>
      <el-table :data="ov.expiring" size="small">
        <el-table-column prop="name" label="名称" />
        <el-table-column label="协议">
@@ -56,16 +87,61 @@
 </template>

 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted } from 'vue'
 import * as echarts from 'echarts'
+import { Connection, Monitor, Share, DataLine, Plus } from '@element-plus/icons-vue'
 import api from '../api'
 import { protocolColor, protocolDisplay } from '../protocols'
+import { ElMessage, ElMessageBox } from 'element-plus'

 const ov = ref({})
 const protocols = ref([])
+const loadingProto = ref(true)
 const pieRef = ref(null)
 let chart = null

+// ---- 协议部署 ----
+const deployableProtocols = ['frp', 'openvpn']
+const protocolToPkg = { wireguard: 'wireguard', ipsec: 'strongswan', ikev2: 'strongswan', l2tp: 'strongswan', openvpn: 'openvpn', frp: 'frp' }
+const deploying = ref('')
+
+async function deployProtocol(name) {
+  const pkg = protocolToPkg[name] || name
+  deploying.value = name
+  try {
+    const { data } = await api.post(`/binaries/install/${pkg}`)
+    ElMessage.success(`${name} ${data.version} 部署成功`)
+    await load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || `${name} 部署失败`)
+  } finally { deploying.value = '' }
+}
+
+async function showInstallCmd(name) {
+  const pkg = protocolToPkg[name] || name
+  try {
+    const { data } = await api.get(`/binaries/install-hint/${pkg}`)
+    const cmd = data.command || '请联系系统管理员安装'
+    const pmLabel = data.pm ? `（${data.pm}）` : '（apt 默认）'
+    // 构建其他平台的命令列表
+    let otherCmds = ''
+    if (data.all_commands) {
+      for (const [pm, c] of Object.entries(data.all_commands)) {
+        if (c !== cmd) {
+          otherCmds += `<div style="margin:4px 0"><span style="display:inline-block;min-width:70px;font-weight:600">${pm}:</span> <code style="font-size:12px">${c}</code></div>`
+        }
+      }
+    }
+    const otherSection = otherCmds ? `<hr style="margin:12px 0;border:none;border-top:1px solid #e8eaee"><div style="font-size:12px;color:#909399;margin-bottom:6px">其他发行版：</div>${otherCmds}` : ''
+    ElMessageBox.alert(
+      `<div style="margin-bottom:8px"><b>推荐命令${pmLabel}</b></div><pre style="background:#f0f9eb;border:1px solid #67c23a;padding:12px;border-radius:6px;font-family:monospace;white-space:pre-wrap;font-size:13px">${cmd}</pre>${otherSection}`,
+      `${name} 安装命令`, { dangerouslyUseHTMLString: true, confirmButtonText: '复制推荐命令',
+      callback: (action) => { if (action === 'confirm') navigator.clipboard.writeText(cmd) } })
+  } catch {
+    ElMessage.error('获取安装命令失败')
+  }
+}
+
 function fmtBytes(n) {
  if (!n) return '0 B'
  const units = ['B', 'KB', 'MB', 'GB', 'TB']
@@ -75,11 +151,22 @@ function fmtBytes(n) {
 }
 function fmtTime(t) { return t ? new Date(t).toLocaleString('zh-CN') : '-' }

+const statCards = computed(() => [
+  { label: '专线总数', value: ov.value.total ?? '-', icon: Connection, iconBg: 'linear-gradient(135deg,#4a6fa5,#2b4a7a)', to: '/tunnels' },
+  { label: '运行中', value: ov.value.running ?? '-', icon: Monitor, iconBg: 'linear-gradient(135deg,#4caf7d,#2e7d5b)', to: '/tunnels?state=running' },
+  { label: '在线用户', value: ov.value.online_sessions ?? 0, icon: Share, iconBg: 'linear-gradient(135deg,#e0935a,#c0762b)', to: '/sessions' },
+  { label: '累计流量 ↓↑', value: `${fmtBytes(ov.value.rx_bytes)} / ${fmtBytes(ov.value.tx_bytes)}`, icon: DataLine, iconBg: 'linear-gradient(135deg,#7b5ea7,#5a4080)', numStyle: { fontSize: '18px' } },
+])
+
 async function load() {
-  const [{ data: o }, { data: p }] = await Promise.all([api.get('/overview'), api.get('/protocols')])
-  ov.value = o
-  protocols.value = p
-  renderPie()
+  // 轮询可见性守卫：标签页隐藏时跳过（P1 修复）
+  if (document.visibilityState !== 'visible') return
+  try {
+    const [{ data: o }, { data: p }] = await Promise.all([api.get('/overview'), api.get('/protocols')])
+    ov.value = o
+    protocols.value = p
+    renderPie()
+  } catch { /* 忽略轮询错误 */ } finally { loadingProto.value = false }
 }

 function renderPie() {
@@ -101,11 +188,55 @@ function renderPie() {
  })
 }

+// ECharts resize 修复（P1）：窗口/侧栏变化时重绘
+function handleResize() {
+  chart?.resize()
+}
+
 let timer
-onMounted(() => { load(); timer = setInterval(load, 15000) })
-onUnmounted(() => { clearInterval(timer); chart?.dispose() })
+onMounted(() => {
+  load()
+  timer = setInterval(load, 15000)
+  window.addEventListener('resize', handleResize)
+})
+onUnmounted(() => {
+  clearInterval(timer)
+  window.removeEventListener('resize', handleResize)
+  chart?.dispose()
+})
 </script>

 <style scoped>
-.dep-hint { font-size: 12px; color: #909399; font-weight: normal; margin-left: 8px; }
+.stat-card {
+  background: var(--bg-card); border: 1px solid var(--border-base);
+  border-radius: var(--radius-md); padding: var(--space-5);
+  display: flex; align-items: center; gap: var(--space-4);
+  transition: transform 0.2s, box-shadow 0.2s;
+  margin-bottom: var(--space-4);
+}
+.stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
+.stat-card.clickable { cursor: pointer; }
+
+.welcome-card { margin-bottom: var(--space-4); }
+.welcome-inner {
+  display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) 0;
+}
+.welcome-icon {
+  width: 64px; height: 64px; border-radius: var(--radius-md); flex-shrink: 0;
+  background: var(--bg-inset); border: 1px solid var(--border-base);
+  display: flex; align-items: center; justify-content: center;
+}
+.welcome-text { flex: 1; }
+.welcome-text h3 { margin: 0 0 var(--space-1); font-size: 18px; color: var(--text-primary); }
+.welcome-text p { margin: 0; font-size: 14px; color: var(--text-secondary); }
+.stat-icon {
+  width: 56px; height: 56px; border-radius: var(--radius-md);
+  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
+  box-shadow: var(--shadow-sm);
+}
+.stat-body { min-width: 0; flex: 1; }
+.stat-label { font-size: 13px; color: var(--text-secondary); margin-bottom: var(--space-1); }
+.stat-num { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
+
+.dep-hint { font-size: 12px; color: var(--text-secondary); font-weight: normal; }
 </style>
@@ -65,7 +65,7 @@
          </el-form>
          <el-button style="width:100%" :loading="checking" @click="compare">开始对比检查</el-button>
          <div v-if="compareResult" style="margin-top:14px">
-            <el-alert v-if="compareResult.consistent" type="success" title="✓ 双方参数一致，可以建立隧道" :closable="false" />
+            <el-alert v-if="compareResult.consistent" type="success" title="双方参数一致，可以建立隧道" :closable="false" show-icon />
            <div v-else>
              <el-alert type="error" title="发现参数不一致：" :closable="false" />
              <ul class="diff-list">
@@ -2,28 +2,37 @@
  <el-container class="layout">
    <el-aside width="220px" class="aside">
      <div class="logo">
-        <span class="logo-icon">🔐</span>
+        <el-icon :size="22" color="#7dd3fc"><Lock /></el-icon>
        <span class="logo-text">VPN 管理平台</span>
      </div>
-      <el-menu :default-active="$route.path" router background-color="#1a2a4a" text-color="#a8b8d8"
+      <el-menu :default-active="activeMenu" router :background-color="sideBg" text-color="#a8b8d8"
               active-text-color="#ffffff" class="menu">
-        <el-menu-item index="/dashboard"><el-icon><DataAnalysis /></el-icon>总览</el-menu-item>
-        <el-menu-item index="/tunnels"><el-icon><Connection /></el-icon>专线列表</el-menu-item>
-        <el-menu-item index="/tunnels/create"><el-icon><CirclePlus /></el-icon>创建专线</el-menu-item>
-        <el-menu-item index="/ipsec-peer"><el-icon><Link /></el-icon>IPSec 对接</el-menu-item>
-        <el-menu-item index="/nodes"><el-icon><Share /></el-icon>节点管理</el-menu-item>
-        <el-menu-item index="/users"><el-icon><UserFilled /></el-icon>用户与 LDAP</el-menu-item>
-        <el-menu-item index="/vpn-users"><el-icon><User /></el-icon>VPN 拨号用户</el-menu-item>
-        <el-menu-item index="/plugins"><el-icon><Grid /></el-icon>协议插件</el-menu-item>
-        <el-menu-item index="/settings"><el-icon><Setting /></el-icon>系统设置</el-menu-item>
+        <el-menu-item-group title="专线运维">
+          <el-menu-item index="/dashboard"><el-icon><DataAnalysis /></el-icon>总览</el-menu-item>
+          <el-menu-item index="/tunnels"><el-icon><Connection /></el-icon>专线列表</el-menu-item>
+          <el-menu-item index="/sessions"><el-icon><Monitor /></el-icon>在线会话</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group v-if="auth.isAdmin()" title="资源管理">
+          <el-menu-item index="/nodes"><el-icon><Coin /></el-icon>节点管理</el-menu-item>
+          <el-menu-item index="/vpn-users"><el-icon><Iphone /></el-icon>VPN 拨号用户</el-menu-item>
+          <el-menu-item index="/plugins"><el-icon><Grid /></el-icon>协议插件</el-menu-item>
+        </el-menu-item-group>
+        <el-menu-item-group title="系统">
+          <el-menu-item v-if="auth.isAdmin()" index="/users"><el-icon><UserFilled /></el-icon>用户管理</el-menu-item>
+          <el-menu-item index="/settings"><el-icon><Setting /></el-icon>系统设置</el-menu-item>
+        </el-menu-item-group>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header class="header">
        <span class="page-title">{{ $route.meta.title }}</span>
        <el-dropdown @command="onCommand">
-          <span class="user">
-            <el-icon><Avatar /></el-icon> {{ auth.username }} <el-icon><ArrowDown /></el-icon>
+          <span class="user" role="button" aria-label="账户菜单" tabindex="0">
+            <el-icon><Avatar /></el-icon> {{ auth.username }}
+            <el-tag size="small" style="margin-left:6px" :type="roleTagType">
+              {{ roleLabel }}
+            </el-tag>
+            <el-icon><ArrowDown /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
@@ -37,32 +46,106 @@
        <router-view />
      </el-main>
    </el-container>
+
+    <!-- 右上角修改密码弹窗（不必跳转整页） -->
+    <el-dialog v-model="pwdDialog" title="修改密码" width="420px" align-center>
+      <el-alert v-if="auth.mustChange" type="warning" :closable="false" show-icon
+                title="首次登录或密码已被重置，请先修改密码" style="margin-bottom:16px" />
+      <el-form label-width="90px" @submit.prevent="changePwd">
+        <el-form-item label="原密码">
+          <el-input v-model="pwd.old_password" type="password" show-password autocomplete="current-password" />
+        </el-form-item>
+        <el-form-item label="新密码">
+          <el-input v-model="pwd.new_password" type="password" show-password autocomplete="new-password"
+                    placeholder="至少 8 位" />
+          <div class="pwd-hint" v-if="pwd.new_password">强度：{{ pwdStrength }}</div>
+        </el-form-item>
+        <el-form-item label="确认密码">
+          <el-input v-model="pwd.confirm" type="password" show-password autocomplete="new-password"
+                    @keyup.enter="changePwd" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="pwdDialog = false">取消</el-button>
+        <el-button type="primary" :loading="pwdLoading" @click="changePwd">确认修改</el-button>
+      </template>
+    </el-dialog>
  </el-container>
 </template>

 <script setup>
-import { useRouter } from 'vue-router'
-import { DataAnalysis, Connection, CirclePlus, Link, Share, Grid, Setting, Avatar, ArrowDown, UserFilled, User } from '@element-plus/icons-vue'
-import { auth } from '../api'
+import { ref, computed } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { DataAnalysis, Connection, Coin, Grid, Setting, Avatar, ArrowDown, UserFilled, Iphone, Lock, Monitor } from '@element-plus/icons-vue'
+import api, { auth } from '../api'

+const sideBg = 'var(--bg-sidebar)'
 const router = useRouter()
+const route = useRoute()
+
+const roleLabel = computed(() => ({ admin: '管理员', operator: '操作员', viewer: '只读' }[auth.role] || auth.role))
+const roleTagType = computed(() => auth.role === 'admin' ? 'danger' : auth.role === 'operator' ? 'warning' : 'info')
+
+// 子路由（创建/编辑专线）归一到 /tunnels 保持高亮
+const activeMenu = computed(() => {
+  if (route.path.startsWith('/tunnels')) return '/tunnels'
+  return route.path
+})
+
+// ---- 右上角修改密码弹窗 ----
+const pwdDialog = ref(false)
+const pwdLoading = ref(false)
+const pwd = ref({ old_password: '', new_password: '', confirm: '' })
+
+const pwdStrength = computed(() => {
+  const p = pwd.value.new_password
+  if (!p) return ''
+  let score = 0
+  if (p.length >= 8) score++
+  if (p.length >= 12) score++
+  if (/[A-Z]/.test(p)) score++
+  if (/[0-9]/.test(p)) score++
+  if (/[^A-Za-z0-9]/.test(p)) score++
+  return ['很弱', '弱', '一般', '较强', '强'][Math.min(score - 1, 4)] || '很弱'
+})
+
 function onCommand(cmd) {
  if (cmd === 'logout') { auth.logout(); router.push('/login') }
-  if (cmd === 'password') router.push('/settings')
+  if (cmd === 'password') { pwd.value = { old_password: '', new_password: '', confirm: '' }; pwdDialog.value = true }
+}
+
+async function changePwd() {
+  if (pwd.value.new_password !== pwd.value.confirm) return ElMessage.warning('两次新密码不一致')
+  if (pwd.value.new_password.length < 8) return ElMessage.warning('新密码至少 8 位')
+  pwdLoading.value = true
+  try {
+    await api.post('/password', { old_password: pwd.value.old_password, new_password: pwd.value.new_password })
+    auth.clearMustChange()
+    ElMessage.success('密码已修改')
+    pwdDialog.value = false
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '修改失败')
+  } finally { pwdLoading.value = false }
 }
 </script>

 <style scoped>
-.layout { height: 100vh; }
-.aside { background: #1a2a4a; }
-.logo { display: flex; align-items: center; gap: 10px; padding: 18px 20px; color: #fff; font-size: 17px; font-weight: 700; }
-.logo-icon { font-size: 22px; }
+.layout { height: 100dvh; }
+.aside { background: var(--bg-sidebar); }
+.logo { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-5); color: #fff; font-size: 17px; font-weight: 700; }
 .menu { border-right: none; }
-.header {
-  background: #fff; display: flex; align-items: center; justify-content: space-between;
-  border-bottom: 1px solid #e8eaee; box-shadow: 0 1px 4px rgba(0,0,0,.04);
+.menu :deep(.el-menu-item-group__title) {
+  color: rgba(255,255,255,0.35); font-size: 11px; padding: 12px 20px 4px;
+  letter-spacing: 1px; text-transform: uppercase;
 }
-.page-title { font-size: 16px; font-weight: 600; color: #303133; }
-.user { cursor: pointer; color: #606266; display: flex; align-items: center; gap: 4px; }
-.main { background: #f5f7fa; padding: 20px; overflow-y: auto; }
+.header {
+  background: var(--bg-card); display: flex; align-items: center; justify-content: space-between;
+  border-bottom: 1px solid var(--border-base); box-shadow: var(--shadow-sm);
+}
+.page-title { font-size: 16px; font-weight: 600; color: var(--text-primary); }
+.user { cursor: pointer; color: var(--text-regular); display: flex; align-items: center; gap: var(--space-1); }
+.user:focus-visible { outline: 2px solid var(--brand-primary); border-radius: var(--radius-sm); }
+.main { background: var(--bg-page); padding: var(--space-5); overflow-y: auto; }
+.pwd-hint { font-size: 12px; color: var(--text-secondary); margin-top: var(--space-1); }
 </style>
@@ -1,27 +1,80 @@
 <template>
-  <div class="login-wrap">
-    <div class="login-box">
-      <div class="brand">
-        <div class="logo">🔐</div>
-        <h2>VPN 专线管理平台</h2>
-        <p>WireGuard · IPSec · L2TP · FRP · OpenVPN</p>
+  <div class="login-container">
+    <!-- 左面板：品牌展示（小屏隐藏） -->
+    <div class="login-left">
+      <div class="brand-content fade-in">
+        <div class="brand-logo">
+          <el-icon :size="32" color="#7dd3fc"><Lock /></el-icon>
+        </div>
+        <h1 class="brand-title">VPN 专线管理平台</h1>
+        <p class="brand-subtitle">统一管理多协议 VPN，配置简单、安全可控</p>
+        <p class="brand-desc">WireGuard · IPSec · L2TP · FRP · OpenVPN · 自定义协议插件</p>
+        <div class="brand-features">
+          <div class="feature-item">
+            <el-icon :size="18" color="#67c23a"><CircleCheck /></el-icon>
+            <div>
+              <strong>多协议统一管理</strong>
+              <span>WireGuard / IPSec / L2TP / FRP / OpenVPN</span>
+            </div>
+          </div>
+          <div class="feature-item">
+            <el-icon :size="18" color="#67c23a"><CircleCheck /></el-icon>
+            <div>
+              <strong>企业级安全</strong>
+              <span>密钥 AES-GCM 加密 + 双因素认证</span>
+            </div>
+          </div>
+          <div class="feature-item">
+            <el-icon :size="18" color="#67c23a"><CircleCheck /></el-icon>
+            <div>
+              <strong>一键创建配置</strong>
+              <span>向导式生成，客户端配置秒级下载</span>
+            </div>
+          </div>
+          <div class="feature-item">
+            <el-icon :size="18" color="#67c23a"><CircleCheck /></el-icon>
+            <div>
+              <strong>轻量零依赖</strong>
+              <span>单二进制交付，无需 Docker</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 右面板：登录表单 -->
+    <div class="login-right">
+      <div class="login-form-wrapper fade-in">
+        <div class="form-header">
+          <h2 class="form-title">欢迎登录</h2>
+          <p class="form-subtitle">请输入账号密码登录管理平台</p>
+        </div>
+
+        <!-- 内联错误提示 -->
+        <el-alert v-if="loginError" type="error" :title="loginError" show-icon :closable="false"
+                  style="margin-bottom: 20px" />
+
+        <form @submit.prevent="doLogin">
+          <div class="form-group">
+            <label class="form-label" for="login-user">用户名</label>
+            <el-input id="login-user" v-model="username" placeholder="请输入用户名" size="large"
+                      :prefix-icon="User" autocomplete="username" @keyup.enter="doLogin" />
+          </div>
+          <div class="form-group">
+            <label class="form-label" for="login-pass">密码</label>
+            <el-input id="login-pass" v-model="password" type="password" placeholder="请输入密码"
+                      size="large" show-password :prefix-icon="Lock"
+                      autocomplete="current-password" @keyup.enter="doLogin" />
+          </div>
+          <el-button type="primary" size="large" native-type="submit" style="width:100%" :loading="loading">
+            登 录
+          </el-button>
+        </form>
+
+        <div class="login-footer">
+          <p>默认账号 <strong>admin / admin123</strong>，登录后请立即修改</p>
+        </div>
      </div>
-      <el-form @submit.prevent="doLogin">
-        <el-form-item>
-          <el-input v-model="username" placeholder="用户名" size="large" :prefix-icon="User" />
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="password" type="password" placeholder="密码" size="large" show-password
-                    :prefix-icon="Lock" @keyup.enter="doLogin" />
-        </el-form-item>
-        <el-form-item>
-          <el-input v-model="mfaCode" placeholder="MFA 验证码（未启用可留空）" size="large" @keyup.enter="doLogin" />
-        </el-form-item>
-        <el-button type="primary" size="large" style="width:100%" :loading="loading" @click="doLogin">
-          登 录
-        </el-button>
-      </el-form>
-      <p class="hint">默认账号 admin / admin123，登录后请立即修改</p>
    </div>
  </div>
 </template>
@@ -30,24 +83,44 @@
 import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
-import { User, Lock } from '@element-plus/icons-vue'
+import { User, Lock, CircleCheck } from '@element-plus/icons-vue'
 import api, { auth } from '../api'

 const username = ref('admin')
 const password = ref('')
-const mfaCode = ref('')
 const loading = ref(false)
+const loginError = ref('')
 const router = useRouter()

 async function doLogin() {
-  if (!username.value || !password.value) return ElMessage.warning('请输入用户名和密码')
+  loginError.value = ''
+  if (!username.value || !password.value) {
+    loginError.value = '请输入用户名和密码'
+    return
+  }
  loading.value = true
  try {
-    const { data } = await api.post('/login', { username: username.value, password: password.value, mfa_code: mfaCode.value })
-    auth.login(data.token, data.username)
-    router.push('/')
+    const { data } = await api.post('/login', { username: username.value, password: password.value })
+    auth.login(data.token, data.username, data.role, data.must_change_password)
+    ElMessage.success('登录成功')
+    if (data.must_change_password) {
+      ElMessage.warning('首次登录请先修改密码')
+      router.push('/settings')
+    } else {
+      router.push('/')
+    }
  } catch (e) {
-    ElMessage.error(e.response?.data?.error || '登录失败')
+    // 检测 MFA 要求：后端返回 mfa_required: true 表示需要双因素验证
+    if (e.response?.data?.mfa_required) {
+      // 将凭据暂存 sessionStorage，跳转到独立 MFA 验证页（参考 opsx-web-lite 两步登录）
+      sessionStorage.setItem('pendingLogin', JSON.stringify({
+        username: username.value,
+        password: password.value,
+      }))
+      router.push('/mfa-verify')
+      return
+    }
+    loginError.value = e.response?.data?.error || '登录失败，请检查网络或联系管理员'
  } finally {
    loading.value = false
  }
@@ -55,17 +128,59 @@ async function doLogin() {
 </script>

 <style scoped>
-.login-wrap {
-  height: 100vh; display: flex; align-items: center; justify-content: center;
-  background: linear-gradient(135deg, #1a2a4a 0%, #2b5876 100%);
+.login-container {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(400px, 0.85fr);
+  min-height: 100dvh;
 }
-.login-box {
-  width: 380px; background: #fff; border-radius: 14px; padding: 40px 36px;
-  box-shadow: 0 20px 60px rgba(0,0,0,.3);
+
+/* ---- 左面板 ---- */
+.login-left {
+  background: var(--brand-grad);
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--space-6); overflow: hidden;
+}
+.brand-content { width: min(100%, 480px); color: #f8fafc; }
+.brand-logo {
+  width: 56px; height: 56px; border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-5);
+}
+.brand-title { font-size: 32px; font-weight: 700; margin: 0 0 var(--space-2); color: #fff; letter-spacing: 0.5px; }
+.brand-subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.9); margin: 0 0 var(--space-1); }
+.brand-desc { font-size: 13px; color: rgba(255, 255, 255, 0.65); margin: 0; }
+.brand-features { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
+.feature-item {
+  display: flex; align-items: flex-start; gap: var(--space-2); padding: var(--space-3);
+  border-radius: var(--radius-sm); border: 1px solid rgba(255, 255, 255, 0.12);
+  background: rgba(255, 255, 255, 0.06);
+}
+.feature-item strong { display: block; font-size: 13px; color: #e2e8f0; font-weight: 600; }
+.feature-item span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
+
+/* ---- 右面板 ---- */
+.login-right {
+  display: flex; align-items: center; justify-content: center;
+  padding: var(--space-6); background: var(--bg-card);
+}
+.login-form-wrapper { width: min(100%, 400px); }
+.form-header { margin-bottom: var(--space-6); }
+.form-title { font-size: 24px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-1); }
+.form-subtitle { font-size: 14px; color: var(--text-secondary); margin: 0; }
+.form-group { margin-bottom: var(--space-4); }
+.form-label {
+  display: block; font-size: 13px; font-weight: 500;
+  color: var(--text-regular); margin-bottom: var(--space-2);
+}
+.login-footer {
+  margin-top: var(--space-6); padding-top: var(--space-4);
+  border-top: 1px solid var(--border-base); text-align: center;
+}
+.login-footer p { font-size: 12px; color: var(--text-secondary); margin: 0; }
+.login-footer strong { color: var(--text-regular); font-weight: 600; }
+
+@media (max-width: 900px) {
+  .login-container { grid-template-columns: 1fr; }
+  .login-left { display: none; }
 }
-.brand { text-align: center; margin-bottom: 28px; }
-.logo { font-size: 44px; }
-.brand h2 { margin: 10px 0 6px; color: #1a2a4a; }
-.brand p { color: #909399; font-size: 13px; margin: 0; }
-.hint { text-align: center; color: #c0c4cc; font-size: 12px; margin-top: 18px; }
 </style>
@@ -0,0 +1,178 @@
+<template>
+  <div class="mfa-container">
+    <div class="mfa-card fade-in">
+      <div class="mfa-header">
+        <div class="mfa-icon">
+          <el-icon :size="28" color="var(--brand-primary)"><Key /></el-icon>
+        </div>
+        <h2>双因素认证</h2>
+        <p>请输入 Authenticator 应用中显示的 6 位动态验证码</p>
+      </div>
+
+      <el-alert v-if="errorMsg" type="error" :title="errorMsg" show-icon :closable="false" style="margin-bottom:20px" />
+
+      <!-- 6 位验证码输入 -->
+      <div class="code-inputs">
+        <el-input
+          v-for="(_, i) in 6" :key="i"
+          :ref="el => setDigitRef(el, i)"
+          v-model="digits[i]"
+          class="code-digit"
+          size="large"
+          maxlength="1"
+          inputmode="numeric"
+          :data-index="i"
+          @input="onInput(i)"
+          @keydown.delete="onDelete(i)"
+          @paste.prevent="onPaste"
+        />
+      </div>
+
+      <el-button type="primary" size="large" style="width:100%;margin-top:24px"
+                 :loading="loading" :disabled="code.length < 6" @click="verify">
+        验证并登录
+      </el-button>
+
+      <div class="mfa-footer">
+        <el-button link @click="backToLogin">返回登录</el-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import { Key } from '@element-plus/icons-vue'
+import api, { auth } from '../api'
+
+const router = useRouter()
+const digits = ref(['', '', '', '', '', ''])
+const loading = ref(false)
+const errorMsg = ref('')
+const digitRefs = []
+
+const code = computed(() => digits.value.join(''))
+
+function setDigitRef(el, i) {
+  if (el) digitRefs[i] = el
+}
+
+// 输入处理：只允许数字，自动跳到下一格
+function onInput(i) {
+  errorMsg.value = ''
+  const val = digits.value[i]
+  // 过滤非数字
+  if (val && !/^\d$/.test(val)) {
+    digits.value[i] = val.replace(/\D/g, '').slice(-1)
+  }
+  // 输入后自动跳到下一格
+  if (digits.value[i] && i < 5) {
+    nextTick(() => digitRefs[i + 1]?.focus?.())
+  }
+  // 全部填满自动验证
+  if (code.value.length === 6) {
+    verify()
+  }
+}
+
+// 删除处理：当前格空时跳到上一格
+function onDelete(i) {
+  if (!digits.value[i] && i > 0) {
+    digitRefs[i - 1]?.focus?.()
+  }
+}
+
+// 粘贴处理：粘贴 6 位码自动分散到各格
+function onPaste(e) {
+  const text = (e.clipboardData || window.clipboardData).getData('text').replace(/\D/g, '').slice(0, 6)
+  if (text) {
+    for (let i = 0; i < 6; i++) {
+      digits.value[i] = text[i] || ''
+    }
+    if (text.length === 6) verify()
+  }
+}
+
+async function verify() {
+  if (code.value.length < 6) return ElMessage.warning('请输入完整的 6 位验证码')
+
+  // 从 sessionStorage 读取暂存的登录凭据
+  const pending = sessionStorage.getItem('pendingLogin')
+  if (!pending) {
+    ElMessage.warning('登录会话已过期，请重新登录')
+    router.push('/login')
+    return
+  }
+
+  const { username, password } = JSON.parse(pending)
+  loading.value = true
+  errorMsg.value = ''
+  try {
+    // 重新提交完整登录请求（含 mfa_code），参考 opsx-web-lite 两步登录模式
+    const { data } = await api.post('/login', { username, password, mfa_code: code.value })
+    // 验证成功，清除暂存凭据
+    sessionStorage.removeItem('pendingLogin')
+    auth.login(data.token, data.username, data.role, data.must_change_password)
+    ElMessage.success('验证成功')
+    if (data.must_change_password) {
+      router.push('/settings')
+    } else {
+      router.push('/')
+    }
+  } catch (e) {
+    errorMsg.value = e.response?.data?.error || '验证码错误，请重试'
+    // 清空输入，聚焦第一格
+    digits.value = ['', '', '', '', '', '']
+    nextTick(() => digitRefs[0]?.focus?.())
+  } finally {
+    loading.value = false
+  }
+}
+
+function backToLogin() {
+  sessionStorage.removeItem('pendingLogin')
+  router.push('/login')
+}
+
+onMounted(() => {
+  // 没有暂存凭据则跳回登录页
+  if (!sessionStorage.getItem('pendingLogin')) {
+    router.push('/login')
+    return
+  }
+  nextTick(() => digitRefs[0]?.focus?.())
+})
+</script>
+
+<style scoped>
+.mfa-container {
+  height: 100dvh; display: flex; align-items: center; justify-content: center;
+  background: var(--brand-grad); padding: var(--space-4);
+}
+.mfa-card {
+  width: min(100%, 420px); background: var(--bg-card); border-radius: var(--radius-lg);
+  padding: 40px 36px; box-shadow: var(--shadow-lg);
+}
+.mfa-header { text-align: center; margin-bottom: var(--space-6); }
+.mfa-icon {
+  width: 56px; height: 56px; border-radius: var(--radius-md); margin: 0 auto var(--space-4);
+  background: var(--bg-inset); border: 1px solid var(--border-base);
+  display: flex; align-items: center; justify-content: center;
+}
+.mfa-header h2 { font-size: 22px; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); }
+.mfa-header p { font-size: 14px; color: var(--text-secondary); margin: 0; }
+
+.code-inputs {
+  display: flex; justify-content: center; gap: var(--space-3);
+}
+.code-digit {
+  width: 48px; flex-shrink: 0;
+}
+.code-digit :deep(.el-input__inner) {
+  text-align: center; font-size: 22px; font-weight: 700; padding: 0;
+}
+
+.mfa-footer { text-align: center; margin-top: var(--space-5); }
+</style>
@@ -1,40 +1,111 @@
 <template>
  <el-card class="page-card" shadow="never">
    <template #header>
-      <div style="display:flex;justify-content:space-between;align-items:center">
-        <b>中继节点</b>
-        <el-button type="primary" :icon="Plus" @click="dialogVisible = true">添加节点</el-button>
+      <div class="row-between">
+        <b>节点管理</b>
+        <el-button type="primary" :icon="Plus" @click="openCreate">添加节点</el-button>
      </div>
    </template>
    <el-alert type="info" :closable="false" style="margin-bottom:14px"
-              title="节点用于将专线部署到中继服务器。本机节点为默认节点；远程节点需在目标机部署 agent（规划中）。" />
-    <el-table :data="nodes" size="large">
-      <el-table-column prop="name" label="名称" />
-      <el-table-column prop="address" label="地址" />
-      <el-table-column label="类型" width="100">
+              title="节点用于将专线部署到中继服务器。本机节点为内置默认节点；远程节点支持 SSH 凭证验证（密码/私钥），验证通过后状态显示为「已验证」。" />
+
+    <el-table :data="nodes" size="default" v-loading="loading">
+      <el-table-column prop="name" label="名称" min-width="120">
+        <template #default="{ row }"><b>{{ row.name }}</b></template>
+      </el-table-column>
+      <el-table-column label="地址" min-width="160">
+        <template #default="{ row }">
+          <span class="mono-inline">{{ row.address }}:{{ row.port || 22 }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="类型" width="80">
        <template #default="{ row }">
          <el-tag :type="row.kind === 'local' ? 'success' : 'primary'" size="small">
            {{ row.kind === 'local' ? '本机' : '远程' }}
          </el-tag>
        </template>
      </el-table-column>
-      <el-table-column prop="remark" label="备注" show-overflow-tooltip />
-      <el-table-column label="操作" width="100">
+      <el-table-column label="SSH 用户" width="100" prop="username" />
+      <el-table-column label="认证方式" width="90">
        <template #default="{ row }">
+          {{ row.kind === 'local' ? '—' : ({ password: '密码', key: '私钥' }[row.auth_type] || '—') }}
+        </template>
+      </el-table-column>
+      <el-table-column label="状态" width="100">
+        <template #default="{ row }">
+          <el-tag v-if="row.kind === 'local'" type="success" size="small">就绪</el-tag>
+          <el-tag v-else-if="row.status === 'verified'" type="success" size="small">已验证</el-tag>
+          <el-tag v-else-if="row.status === 'failed'" type="danger" size="small">验证失败</el-tag>
+          <el-tag v-else type="info" size="small">未验证</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="120" />
+      <el-table-column label="操作" width="200" fixed="right">
+        <template #default="{ row }">
+          <el-button v-if="row.kind !== 'local'" size="small" link :loading="verifyingId === row.id" @click="verify(row)">验证</el-button>
+          <el-button v-if="row.kind !== 'local'" size="small" link @click="openEdit(row)">编辑</el-button>
          <el-button v-if="row.kind !== 'local'" type="danger" size="small" link @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
+      <template #empty>
+        <el-empty description="还没有远程节点，点击右上角添加" />
+      </template>
    </el-table>

-    <el-dialog v-model="dialogVisible" title="添加节点" width="420px">
-      <el-form label-width="80px">
-        <el-form-item label="名称" required><el-input v-model="form.name" /></el-form-item>
-        <el-form-item label="地址" required><el-input v-model="form.address" placeholder="agent 地址或 SSH 地址" /></el-form-item>
-        <el-form-item label="备注"><el-input v-model="form.remark" /></el-form-item>
+    <!-- 添加/编辑节点对话框 -->
+    <el-dialog v-model="dialogVisible" :title="editing ? '编辑节点' : '添加节点'" width="520px" align-center>
+      <el-form label-width="100px">
+        <el-form-item label="名称" required>
+          <el-input v-model="form.name" placeholder="例如：北京中继节点" />
+        </el-form-item>
+        <el-form-item label="地址" required>
+          <el-input v-model="form.address" placeholder="IP 或域名，如 192.168.1.100" />
+        </el-form-item>
+        <el-form-item label="SSH 端口">
+          <el-input-number v-model="form.port" :min="1" :max="65535" />
+        </el-form-item>
+        <el-form-item label="类型">
+          <el-radio-group v-model="form.kind">
+            <el-radio value="remote">远程节点</el-radio>
+            <el-radio value="local">本机节点</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <template v-if="form.kind === 'remote'">
+          <el-form-item label="SSH 用户">
+            <el-input v-model="form.username" placeholder="默认 root" />
+          </el-form-item>
+          <el-form-item label="认证方式">
+            <el-radio-group v-model="form.auth_type">
+              <el-radio value="password">密码</el-radio>
+              <el-radio value="key">私钥</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item v-if="form.auth_type === 'password'" :label="editing ? '新密码' : '密码'">
+            <el-input v-model="form.password" type="password" show-password
+                      :placeholder="editing ? '留空表示不修改' : 'SSH 登录密码'" />
+          </el-form-item>
+          <el-form-item v-if="form.auth_type === 'key'" :label="editing ? '新私钥' : '私钥'">
+            <el-input v-model="form.private_key" type="textarea" :rows="4"
+                      :placeholder="editing ? '留空表示不修改' : '粘贴 OpenSSH/PEM 格式私钥内容'" />
+          </el-form-item>
+        </template>
+        <el-form-item label="备注">
+          <el-input v-model="form.remark" />
+        </el-form-item>
      </el-form>
+
+      <!-- 测试连接结果 -->
+      <el-alert v-if="testResult" :type="testResult.success ? 'success' : 'error'"
+                :title="testResult.success ? '连接成功' : '连接失败'"
+                :description="testResult.message" show-icon :closable="false"
+                style="margin-top:8px" />
+
      <template #footer>
+        <el-button v-if="form.kind === 'remote'" :loading="testing" @click="testConnection">
+          测试连接
+        </el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="create">确定</el-button>
+        <el-button type="primary" :loading="saving" @click="save">确定</el-button>
      </template>
    </el-dialog>
  </el-card>
@@ -42,28 +113,109 @@

 <script setup>
 import { ref, onMounted } from 'vue'
-import { ElMessage } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { Plus } from '@element-plus/icons-vue'
 import api from '../api'

 const nodes = ref([])
+const loading = ref(false)
 const dialogVisible = ref(false)
-const form = ref({ name: '', address: '', kind: 'remote', remark: '' })
+const editing = ref(null)
+const saving = ref(false)
+const testing = ref(false)
+const testResult = ref(null)
+const verifyingId = ref(null)
+
+function emptyForm() {
+  return { name: '', address: '', port: 22, kind: 'remote', username: 'root', auth_type: 'password', password: '', private_key: '', remark: '' }
+}
+const form = ref(emptyForm())
+
+function openCreate() {
+  editing.value = null
+  form.value = emptyForm()
+  testResult.value = null
+  dialogVisible.value = true
+}
+function openEdit(row) {
+  editing.value = row
+  form.value = { ...row, password: '', private_key: '' }
+  testResult.value = null
+  dialogVisible.value = true
+}

 async function load() {
-  const { data } = await api.get('/nodes')
-  nodes.value = data || []
+  loading.value = true
+  try {
+    const { data } = await api.get('/nodes')
+    nodes.value = data || []
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '加载失败')
+  } finally { loading.value = false }
 }
-async function create() {
+
+async function testConnection() {
+  if (!form.value.address) return ElMessage.warning('请先填写地址')
+  testing.value = true
+  testResult.value = null
+  try {
+    const { data } = await api.post('/nodes/test', {
+      address: form.value.address, port: form.value.port, username: form.value.username,
+      auth_type: form.value.auth_type, password: form.value.password, private_key: form.value.private_key,
+    })
+    testResult.value = data
+  } catch (e) {
+    testResult.value = { success: false, message: e.response?.data?.error || '请求失败' }
+  } finally { testing.value = false }
+}
+
+async function save() {
  if (!form.value.name || !form.value.address) return ElMessage.warning('请填写名称与地址')
-  await api.post('/nodes', form.value)
-  dialogVisible.value = false
-  form.value = { name: '', address: '', kind: 'remote', remark: '' }
-  load()
+  saving.value = true
+  try {
+    if (editing.value) {
+      await api.put(`/nodes/${editing.value.id}`, form.value)
+      ElMessage.success('已更新')
+    } else {
+      await api.post('/nodes', form.value)
+      ElMessage.success('已添加')
+    }
+    dialogVisible.value = false
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '保存失败')
+  } finally { saving.value = false }
 }
+
+async function verify(row) {
+  verifyingId.value = row.id
+  try {
+    const { data } = await api.post(`/nodes/${row.id}/verify`)
+    if (data.success) {
+      ElMessage.success('验证成功：' + (data.message || '').slice(0, 50))
+    } else {
+      ElMessage.error('验证失败：' + (data.message || ''))
+    }
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '验证失败')
+  } finally { verifyingId.value = null }
+}
+
 async function remove(row) {
-  await api.delete(`/nodes/${row.id}`)
-  load()
+  try {
+    await ElMessageBox.confirm(`确定删除节点「${row.name}」？该操作不可撤销。`, '删除确认', { type: 'warning' })
+    await api.delete(`/nodes/${row.id}`)
+    ElMessage.success('已删除')
+    load()
+  } catch (e) {
+    if (e !== 'cancel') ElMessage.error(e.response?.data?.error || '删除失败')
+  }
 }
+
 onMounted(load)
 </script>
+
+<style scoped>
+.mono-inline { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 13px; }
+</style>
@@ -0,0 +1,18 @@
+<template>
+  <div class="not-found">
+    <el-result icon="warning" title="404" sub-title="您访问的页面不存在或已被移除">
+      <template #extra>
+        <el-button type="primary" @click="$router.push('/')">返回首页</el-button>
+      </template>
+    </el-result>
+  </div>
+</template>
+
+<script setup>
+</script>
+
+<style scoped>
+.not-found {
+  display: flex; align-items: center; justify-content: center; min-height: 60vh;
+}
+</style>
@@ -2,7 +2,7 @@
  <div>
    <el-card class="page-card" shadow="never">
      <template #header>
-        <div style="display:flex;justify-content:space-between;align-items:center">
+        <div class="row-between">
          <b>自定义协议插件</b>
          <el-button type="primary" :icon="Plus" @click="openCreate">注册插件</el-button>
        </div>
@@ -11,7 +11,7 @@
        <p style="margin:0">插件通过<b>命令钩子</b>实现统一协议契约：平台将专线配置 JSON 通过 stdin 传给钩子命令。</p>
        <p style="margin:4px 0 0;font-size:12px">契约：<code>Create / Start / Stop / Status / Config</code>；Status 钩子 stdout 输出 <code>running</code> 或 <code>stopped</code>；Config 钩子 stdout 输出客户端配置文本。</p>
      </el-alert>
-      <el-table :data="plugins" size="large">
+      <el-table :data="plugins" size="default" v-loading="loading">
        <el-table-column prop="display_name" label="名称" width="160" />
        <el-table-column label="协议标识" width="140">
          <template #default="{ row }"><code>custom:{{ row.name }}</code></template>
@@ -28,6 +28,7 @@
            <el-button type="danger" size="small" link @click="remove(row)">删除</el-button>
          </template>
        </el-table-column>
+        <template #empty><el-empty description="还没有自定义协议插件" /></template>
      </el-table>
    </el-card>

@@ -62,6 +63,7 @@ import { Plus } from '@element-plus/icons-vue'
 import api from '../api'

 const plugins = ref([])
+const loading = ref(false)
 const dialogVisible = ref(false)
 const editing = ref(null)
 const form = ref(emptyForm())
@@ -73,8 +75,13 @@ function openCreate() { editing.value = null; form.value = emptyForm(); dialogVi
 function edit(row) { editing.value = row; form.value = { ...row }; dialogVisible.value = true }

 async function load() {
-  const { data } = await api.get('/plugins')
-  plugins.value = data || []
+  loading.value = true
+  try {
+    const { data } = await api.get('/plugins')
+    plugins.value = data || []
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '加载失败')
+  } finally { loading.value = false }
 }
 async function save() {
  if (!form.value.name || !form.value.start_hook) return ElMessage.warning('协议标识与 Start 钩子必填')
@@ -89,9 +96,14 @@ async function save() {
  }
 }
 async function remove(row) {
-  await ElMessageBox.confirm(`删除插件「${row.display_name}」？`, '确认', { type: 'warning' })
-  await api.delete(`/plugins/${row.id}`)
-  load()
+  try {
+    await ElMessageBox.confirm(`删除插件「${row.display_name}」？`, '确认', { type: 'warning' })
+    await api.delete(`/plugins/${row.id}`)
+    ElMessage.success('已删除')
+    load()
+  } catch (e) {
+    if (e !== 'cancel') ElMessage.error(e.response?.data?.error || '删除失败')
+  }
 }
 onMounted(load)
 </script>
@@ -0,0 +1,139 @@
+<template>
+  <div>
+    <!-- 在线会话 -->
+    <el-card class="page-card" shadow="never" style="margin-bottom:16px">
+      <template #header>
+        <div class="row-between">
+          <div>
+            <b>在线会话</b>
+            <el-tag size="small" type="success" style="margin-left:8px">{{ sessions.length }} 个在线</el-tag>
+          </div>
+          <el-button link @click="load">刷新</el-button>
+        </div>
+      </template>
+      <el-table :data="sessions" size="default" v-loading="loading">
+        <el-table-column prop="username" label="用户名" min-width="120" />
+        <el-table-column label="协议" width="100">
+          <template #default="{ row }">
+            <span class="protocol-tag" :style="{ color: protocolColor(row.protocol) }">{{ protocolDisplay(row.protocol) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="real_address" label="公网地址" min-width="140" />
+        <el-table-column prop="virtual_address" label="VPN IP" min-width="120" />
+        <el-table-column label="已连接时长" width="120">
+          <template #default="{ row }">{{ fmtDuration(row.connected_at) }}</template>
+        </el-table-column>
+        <el-table-column label="流量 ↓ / ↑" width="140">
+          <template #default="{ row }">
+            <span style="font-size:12px">{{ fmtBytes(row.rx_bytes) }} / {{ fmtBytes(row.tx_bytes) }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template #default="{ row }">
+            <el-button type="danger" size="small" link @click="disconnect(row)">踢下线</el-button>
+          </template>
+        </el-table-column>
+        <template #empty><el-empty description="当前无在线用户" /></template>
+      </el-table>
+    </el-card>
+
+    <!-- 异常流量告警 -->
+    <el-card class="page-card" shadow="never" style="margin-bottom:16px" v-if="alerts.length">
+      <template #header><b style="color:var(--color-danger)">⚠ 异常流量告警</b></template>
+      <el-table :data="alerts" size="small">
+        <el-table-column prop="created_at" label="时间" width="170">
+          <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
+        </el-table-column>
+        <el-table-column prop="username" label="用户/隧道" width="100" />
+        <el-table-column label="类型" width="100">
+          <template #default="{ row }">
+            <el-tag :type="row.event === 'rate_alert' ? 'warning' : 'danger'" size="small">
+              {{ { rate_alert: '突发流量', quota_exceed: '配额超额' }[row.event] || row.event }}
+            </el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="detail" label="详情" show-overflow-tooltip />
+      </el-table>
+    </el-card>
+
+    <!-- 连接审计日志 -->
+    <el-card class="page-card" shadow="never">
+      <template #header><b>连接审计日志</b></template>
+      <el-table :data="logs" size="small" max-height="500">
+        <el-table-column prop="created_at" label="时间" width="170">
+          <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
+        </el-table-column>
+        <el-table-column prop="username" label="用户" width="100" />
+        <el-table-column label="事件" width="100">
+          <template #default="{ row }">
+            <el-tag :type="eventTagType(row.event)" size="small">{{ eventLabel(row.event) }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column prop="ip_address" label="IP 地址" width="140" />
+        <el-table-column prop="detail" label="详情" show-overflow-tooltip />
+      </el-table>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import api from '../api'
+import { protocolColor, protocolDisplay } from '../protocols'
+
+const sessions = ref([])
+const logs = ref([])
+const alerts = ref([])
+const loading = ref(false)
+
+function fmtBytes(n) {
+  if (!n) return '0 B'
+  const u = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (n >= 1024 && i < 4) { n /= 1024; i++ }
+  return n.toFixed(1) + ' ' + u[i]
+}
+function fmtDuration(t) {
+  if (!t) return '-'
+  const sec = Math.floor((Date.now() - new Date(t).getTime()) / 1000)
+  if (sec < 60) return `${sec}秒`
+  if (sec < 3600) return `${Math.floor(sec / 60)}分钟`
+  return `${Math.floor(sec / 3600)}小时${Math.floor((sec % 3600) / 60)}分`
+}
+function eventLabel(e) {
+  return { connect: '连接', disconnect: '断开', auth_fail: '认证失败', quota_exceed: '配额超额', rate_alert: '突发流量' }[e] || e
+}
+function eventTagType(e) {
+  return { connect: 'success', disconnect: 'info', auth_fail: 'danger', quota_exceed: 'warning', rate_alert: 'warning' }[e] || 'info'
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const [s, l, a] = await Promise.all([
+      api.get('/sessions'),
+      api.get('/sessions/log'),
+      api.get('/traffic/alerts'),
+    ])
+    sessions.value = s.data || []
+    logs.value = l.data || []
+    alerts.value = a.data || []
+  } catch (e) {
+    ElMessage.error('加载数据失败')
+  } finally { loading.value = false }
+}
+
+async function disconnect(row) {
+  try {
+    await ElMessageBox.confirm(`确定踢用户「${row.username}」下线？`, '确认', { type: 'warning' })
+    await api.post(`/sessions/${row.id}/disconnect`)
+    ElMessage.success('已踢下线')
+    load()
+  } catch (e) { if (e !== 'cancel') ElMessage.error('操作失败') }
+}
+
+let timer
+onMounted(() => { load(); timer = setInterval(load, 15000) })
+onUnmounted(() => clearInterval(timer))
+</script>
@@ -1,46 +1,75 @@
 <template>
  <el-row :gutter="16">
-    <el-col :span="10">
+    <el-col :xs="24" :lg="10">
+      <el-alert v-if="auth.mustChange" type="warning" :closable="false" show-icon
+                title="首次登录或密码已被管理员重置，必须修改密码后才能使用其他功能"
+                style="margin-bottom:16px" />
      <el-card class="page-card" shadow="never">
        <template #header><b>修改密码</b></template>
-        <el-form label-width="90px">
-          <el-form-item label="原密码"><el-input v-model="pwd.old_password" type="password" show-password /></el-form-item>
-          <el-form-item label="新密码"><el-input v-model="pwd.new_password" type="password" show-password /></el-form-item>
-          <el-form-item label="确认新密码"><el-input v-model="pwd.confirm" type="password" show-password /></el-form-item>
-          <el-button type="primary" style="width:100%" @click="changePwd">修改</el-button>
+        <el-form label-width="90px" @submit.prevent="changePwd">
+          <el-form-item label="原密码">
+            <el-input v-model="pwd.old_password" type="password" show-password autocomplete="current-password" />
+          </el-form-item>
+          <el-form-item label="新密码">
+            <el-input v-model="pwd.new_password" type="password" show-password autocomplete="new-password" placeholder="至少 8 位" />
+          </el-form-item>
+          <el-form-item label="确认新密码">
+            <el-input v-model="pwd.confirm" type="password" show-password autocomplete="new-password" @keyup.enter="changePwd" />
+          </el-form-item>
+          <el-button type="primary" style="width:100%" :loading="pwdLoading" @click="changePwd">修改</el-button>
        </el-form>
      </el-card>
      <el-card class="page-card" shadow="never" style="margin-top:16px">
        <template #header><b>双因素认证（MFA）</b></template>
-        <el-alert type="info" :closable="false" title="使用 Microsoft Authenticator、Google Authenticator 等应用扫描二维码。" style="margin-bottom:10px" />
+        <el-alert type="info" :closable="false" title="使用 Microsoft Authenticator、Google Authenticator 等应用扫描二维码。备用码可在丢失手机时登录。" style="margin-bottom:10px" />
        <el-button v-if="!mfa.enabled" type="primary" @click="setupMFA">设置 MFA</el-button>
        <el-button v-else type="danger" @click="disableMFA">关闭 MFA</el-button>
-        <div v-if="mfa.uri" style="margin-top:12px"><canvas ref="mfaCanvas"></canvas><el-input v-model="mfa.code" placeholder="输入 App 显示的 6 位验证码" style="margin-top:8px" /><el-button type="success" style="margin-top:8px" @click="enableMFA">验证并启用</el-button></div>
+        <div v-if="mfa.uri" style="margin-top:12px">
+          <canvas ref="mfaCanvas" style="display:block;margin:0 auto"></canvas>
+          <el-input v-model="mfa.code" placeholder="输入 App 显示的 6 位验证码" style="margin-top:8px" maxlength="6" />
+          <el-button type="success" style="width:100%;margin-top:8px" :loading="mfaLoading" @click="enableMFA">验证并启用</el-button>
+        </div>
      </el-card>
      <el-card class="page-card" shadow="never" style="margin-top:16px">
        <template #header><b>部署说明</b></template>
        <el-descriptions :column="1" size="small" border>
-          <el-descriptions-item label="交付形态">单二进制（前端已内嵌）或 Docker</el-descriptions-item>
+          <el-descriptions-item label="交付形态">单二进制（前端已内嵌），无需 Docker</el-descriptions-item>
          <el-descriptions-item label="数据目录">./data（可用 VPN_DATA_DIR 覆盖）</el-descriptions-item>
          <el-descriptions-item label="监听地址">:8080（VPN_LISTEN_ADDR 覆盖）</el-descriptions-item>
          <el-descriptions-item label="密钥存储">PSK / 私钥 AES-GCM 加密落库，配置文件 0600 权限</el-descriptions-item>
-          <el-descriptions-item label="系统依赖">wireguard-tools / strongswan / xl2tpd / openvpn / frp（缺失时标记为未部署，无法启动）</el-descriptions-item>
+          <el-descriptions-item label="系统依赖">wireguard-tools / strongswan / xl2tpd / openvpn / frp</el-descriptions-item>
+          <el-descriptions-item label="生产建议">经 Nginx/Caddy 反向代理终止 TLS 后暴露</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
-    <el-col :span="14">
+    <el-col :xs="24" :lg="14" v-if="auth.isAdmin()">
      <el-card class="page-card" shadow="never">
        <template #header><b>操作审计（最近 100 条）</b></template>
-        <el-table :data="logs" size="small" max-height="560">
+        <el-table :data="logs" size="small" max-height="560" v-loading="auditLoading">
          <el-table-column prop="created_at" label="时间" width="170">
            <template #default="{ row }">{{ new Date(row.created_at).toLocaleString('zh-CN') }}</template>
          </el-table-column>
          <el-table-column prop="username" label="用户" width="90" />
          <el-table-column prop="action" label="动作" width="140" />
          <el-table-column prop="target" label="对象" show-overflow-tooltip />
+          <template #empty><el-empty description="暂无审计日志" /></template>
        </el-table>
      </el-card>
    </el-col>
+
+    <!-- MFA 备用码持久化弹窗（P0 修复：不再用会消失的 Toast） -->
+    <el-dialog v-model="backupVisible" title="MFA 已启用 — 请保存备用码" width="480px" align-center
+               :close-on-click-modal="false" :close-on-press-escape="false">
+      <el-alert type="warning" :closable="false" show-icon style="margin-bottom:16px"
+                title="这些备用码仅显示一次，丢失手机时用于登录。请立即复制保存！" />
+      <div class="backup-codes">
+        <code v-for="(c, i) in backupCodes" :key="i">{{ c }}</code>
+      </div>
+      <template #footer>
+        <el-button @click="copyBackup">复制全部</el-button>
+        <el-button type="primary" @click="backupVisible = false">我已保存</el-button>
+      </template>
+    </el-dialog>
  </el-row>
 </template>

@@ -48,29 +77,89 @@
 import { ref, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import QRCode from 'qrcode'
-import api from '../api'
+import api, { auth } from '../api'

 const pwd = ref({ old_password: '', new_password: '', confirm: '' })
+const pwdLoading = ref(false)
 const logs = ref([])
+const auditLoading = ref(false)
 const mfa = ref({ enabled: false, uri: '', code: '' })
 const mfaCanvas = ref(null)
+const mfaLoading = ref(false)
+const backupVisible = ref(false)
+const backupCodes = ref([])

 async function changePwd() {
  if (pwd.value.new_password !== pwd.value.confirm) return ElMessage.warning('两次新密码不一致')
+  if (pwd.value.new_password.length < 8) return ElMessage.warning('新密码至少 8 位')
+  pwdLoading.value = true
  try {
-    await api.post('/password', pwd.value)
+    await api.post('/password', { old_password: pwd.value.old_password, new_password: pwd.value.new_password })
+    auth.clearMustChange()
    ElMessage.success('密码已修改')
    pwd.value = { old_password: '', new_password: '', confirm: '' }
  } catch (e) {
    ElMessage.error(e.response?.data?.error || '修改失败')
-  }
+  } finally { pwdLoading.value = false }
 }
+
 onMounted(async () => {
-  const [audit, status] = await Promise.all([api.get('/audit'), api.get('/mfa/status')])
-  logs.value = audit.data || []
-  mfa.value.enabled = status.data.enabled
+  try {
+    const status = await api.get('/mfa/status')
+    mfa.value.enabled = status.data.enabled
+  } catch { /* ignore */ }
+  if (auth.isAdmin()) {
+    auditLoading.value = true
+    try {
+      const audit = await api.get('/audit')
+      logs.value = audit.data || []
+    } catch { /* viewer */ } finally { auditLoading.value = false }
+  }
 })
-async function setupMFA() { const { data } = await api.post('/mfa/setup'); mfa.value.uri = data.otpauth_url; await nextTick(); QRCode.toCanvas(mfaCanvas.value, data.otpauth_url, { width: 180 }) }
-async function enableMFA() { try { const { data } = await api.post('/mfa/enable', { code: mfa.value.code }); mfa.value = { enabled: true, uri: '', code: '' }; ElMessage.success(`MFA 已启用，请保存备用码：${data.backup_codes.join(' ')}`) } catch (e) { ElMessage.error(e.response?.data?.error || '验证失败') } }
-async function disableMFA() { await api.post('/mfa/disable'); mfa.value = { enabled: false, uri: '', code: '' }; ElMessage.success('MFA 已关闭') }
+
+async function setupMFA() {
+  try {
+    const { data } = await api.post('/mfa/setup')
+    mfa.value.uri = data.otpauth_url
+    await nextTick()
+    QRCode.toCanvas(mfaCanvas.value, data.otpauth_url, { width: 180 })
+  } catch (e) { ElMessage.error(e.response?.data?.error || '设置失败') }
+}
+
+async function enableMFA() {
+  mfaLoading.value = true
+  try {
+    const { data } = await api.post('/mfa/enable', { code: mfa.value.code })
+    mfa.value = { enabled: true, uri: '', code: '' }
+    // P0 修复：备用码用持久弹窗展示，不再用会消失的 Toast
+    backupCodes.value = data.backup_codes || []
+    backupVisible.value = true
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '验证失败')
+  } finally { mfaLoading.value = false }
+}
+
+async function disableMFA() {
+  try {
+    await api.post('/mfa/disable')
+    mfa.value = { enabled: false, uri: '', code: '' }
+    ElMessage.success('MFA 已关闭')
+  } catch (e) { ElMessage.error(e.response?.data?.error || '关闭失败') }
+}
+
+function copyBackup() {
+  navigator.clipboard.writeText(backupCodes.value.join('\n')).then(() => ElMessage.success('已复制到剪贴板'))
+}
 </script>
+
+<style scoped>
+.backup-codes {
+  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px;
+  background: var(--bg-inset); border-radius: var(--radius-sm); border: 1px solid var(--border-base);
+}
+.backup-codes code {
+  font-family: 'JetBrains Mono', Consolas, monospace; font-size: 14px; font-weight: 600;
+  color: var(--text-primary); text-align: center; padding: 6px;
+  background: var(--bg-card); border-radius: 4px;
+}
+</style>
@@ -19,8 +19,9 @@
      </el-form-item>
      <el-form-item v-for="field in visibleFields" :key="field.key" :label="field.label" :required="field.required">
        <el-input-number v-if="field.type === 'number'" v-model="form.config[field.key]" :min="0" :max="65535" />
+        <el-switch v-else-if="field.type === 'switch'" v-model="form.config[field.key]" />
        <el-select v-else-if="field.type === 'select'" v-model="form.config[field.key]" style="width:100%">
-          <el-option v-for="option in field.options" :key="option" :label="option" :value="option" />
+          <el-option v-for="option in field.options" :key="optionValue(option)" :label="optionLabel(option)" :value="optionValue(option)" />
        </el-select>
        <el-input v-else-if="field.type === 'password'" v-model="form.config[field.key]" type="password"
          show-password :placeholder="field.placeholder || '留空保持原值'" />
@@ -45,7 +46,7 @@ import { computed, onMounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ElMessage } from 'element-plus'
 import api from '../api'
-import { CUSTOM_FIELDS, PROTOCOL_META, protocolColor, protocolDisplay } from '../protocols'
+import { CUSTOM_FIELDS, PROTOCOL_META, protocolColor, protocolDisplay, optionValue, optionLabel } from '../protocols'

 const route = useRoute()
 const router = useRouter()
@@ -8,21 +8,30 @@

    <!-- 第一步：协议选择 -->
    <div v-if="step === 0" class="proto-grid">
-      <div v-for="(meta, key) in builtin" :key="key" class="proto-card" :class="{ active: form.protocol === key }"
+      <div v-for="(meta, key) in builtin" :key="key"
+           class="proto-card"
+           :class="{ active: form.protocol === key, disabled: depStatus[key] && !depStatus[key].available }"
           @click="selectProtocol(key)">
-        <div class="proto-icon">{{ meta.icon }}</div>
+        <el-tag v-if="key === 'wireguard'" type="danger" size="small" effect="dark" class="recommend-badge">推荐</el-tag>
+        <div class="proto-icon"><ProtocolIcon :protocol="key" :size="36" /></div>
        <div class="proto-name" :style="{ color: meta.color }">{{ meta.name }}</div>
        <div class="proto-desc">{{ meta.desc }}</div>
        <div class="proto-scene">{{ meta.scenes }}</div>
-        <div class="dep-badge">
-          <el-tag v-if="depStatus[key]" :type="depStatus[key].available ? 'success' : 'warning'" size="small">
-            {{ depStatus[key].available ? '依赖就绪' : '未部署' }}
+        <div class="dep-badge" v-if="depStatus[key]">
+          <el-tag :type="depStatus[key].available ? 'success' : 'warning'" size="small">
+            {{ depStatus[key].available ? '✓ 依赖就绪' : '未部署' }}
          </el-tag>
+          <!-- 未就绪：显示下载/安装操作 -->
+          <div v-if="!depStatus[key].available" class="dep-action" @click.stop>
+            <el-button v-if="canDeploy(key)" size="small" type="primary" :loading="deploying === key"
+                       @click="deployProtocol(key)">下载部署</el-button>
+            <el-button v-else size="small" @click="showInstallCmd(key)">安装命令</el-button>
+          </div>
        </div>
      </div>
      <div v-for="p in customProtocols" :key="p.name" class="proto-card" :class="{ active: form.protocol === p.name }"
           @click="selectProtocol(p.name)">
-        <div class="proto-icon">🧩</div>
+        <div class="proto-icon"><ProtocolIcon protocol="custom" :size="36" /></div>
        <div class="proto-name" style="color:#7b5ea7">{{ p.display_name }}</div>
        <div class="proto-desc">自定义协议插件</div>
        <div class="proto-scene">自定义对接</div>
@@ -39,16 +48,37 @@
          <el-tag :color="currentColor" effect="dark" style="border:none">{{ currentName }}</el-tag>
          <el-button link style="margin-left:10px" @click="step = 0">重新选择</el-button>
        </el-form-item>
-        <el-form-item v-for="f in visibleFields" :key="f.key" :label="f.label" :required="f.required">
+        <!-- 基础字段 -->
+        <el-form-item v-for="f in coreFields" :key="f.key" :label="f.label" :required="f.required">
          <el-input-number v-if="f.type === 'number'" v-model="form.config[f.key]" :min="0" :max="65535" />
+          <el-switch v-else-if="f.type === 'switch'" v-model="form.config[f.key]" />
          <el-select v-else-if="f.type === 'select'" v-model="form.config[f.key]" style="width:100%">
-            <el-option v-for="o in f.options" :key="o" :label="o" :value="o" />
+            <el-option v-for="o in f.options" :key="optionValue(o)" :label="optionLabel(o)" :value="optionValue(o)" />
          </el-select>
          <el-input v-else-if="f.type === 'password'" v-model="form.config[f.key]" type="password"
                    show-password :placeholder="f.placeholder" />
          <el-input v-else v-model="form.config[f.key]" :placeholder="f.placeholder || f.default" />
          <div class="field-tip" v-if="f.tip">{{ f.tip }}</div>
        </el-form-item>
+
+        <!-- 高级字段（可折叠） -->
+        <template v-if="advancedFields.length">
+          <el-collapse v-model="advCollapsed" style="margin-top:8px">
+            <el-collapse-item title="高级选项" name="adv">
+              <el-form-item v-for="f in advancedFields" :key="f.key" :label="f.label" :required="f.required">
+                <el-input-number v-if="f.type === 'number'" v-model="form.config[f.key]" :min="0" :max="65535" />
+                <el-switch v-else-if="f.type === 'switch'" v-model="form.config[f.key]" />
+                <el-select v-else-if="f.type === 'select'" v-model="form.config[f.key]" style="width:100%">
+                  <el-option v-for="o in f.options" :key="optionValue(o)" :label="optionLabel(o)" :value="optionValue(o)" />
+                </el-select>
+                <el-input v-else-if="f.type === 'password'" v-model="form.config[f.key]" type="password"
+                          show-password :placeholder="f.placeholder" />
+                <el-input v-else v-model="form.config[f.key]" :placeholder="f.placeholder || f.default" />
+                <div class="field-tip" v-if="f.tip">{{ f.tip }}</div>
+              </el-form-item>
+            </el-collapse-item>
+          </el-collapse>
+        </template>
        <el-form-item label="到期时间">
          <el-date-picker v-model="form.expire_at" type="datetime" placeholder="留空为永久" style="width:100%" />
        </el-form-item>
@@ -78,6 +108,33 @@
      </div>
      <canvas ref="qrCanvas" style="display:block;margin:16px auto" v-show="qrShown"></canvas>
    </div>
+
+    <!-- 安装命令弹窗（系统包协议） -->
+    <el-dialog v-model="installCmdVisible" :title="`${installCmdTitle} 安装命令`" width="560px" align-center>
+      <el-alert :type="installData.detected ? 'success' : 'warning'" :closable="false" style="margin-bottom:16px"
+                :title="installData.detected
+                  ? `检测到当前系统包管理器：${installData.pm}，推荐使用以下命令`
+                  : '未检测到系统包管理器，以下是各平台安装命令供参考'" />
+      <!-- 当前系统推荐命令 -->
+      <div v-if="installData.command" style="margin-bottom:16px">
+        <div class="cmd-label">
+          <el-tag size="small" type="success">{{ installData.pm || 'apt (默认)' }}</el-tag>
+          <span style="margin-left:8px;font-size:13px;color:var(--text-secondary)">推荐</span>
+        </div>
+        <pre class="mono conf-box" style="border-color:var(--color-success)">{{ installData.command }}</pre>
+        <el-button size="small" style="margin-top:4px" @click="copyText(installData.command)">复制此命令</el-button>
+      </div>
+      <!-- 其他平台命令 -->
+      <el-divider content-position="left"><span style="font-size:12px;color:var(--text-secondary)">其他发行版</span></el-divider>
+      <div v-for="(cmd, pm) in installData.all_commands" :key="pm" class="cmd-row" v-show="cmd !== installData.command">
+        <el-tag size="small" style="min-width:70px;text-align:center">{{ pm }}</el-tag>
+        <code class="cmd-code">{{ cmd }}</code>
+        <el-button link size="small" @click="copyText(cmd)">复制</el-button>
+      </div>
+      <template #footer>
+        <el-button type="primary" @click="installCmdVisible = false">关闭</el-button>
+      </template>
+    </el-dialog>
  </el-card>
 </template>

@@ -86,7 +143,8 @@ import { ref, computed, onMounted, nextTick } from 'vue'
 import { ElMessage } from 'element-plus'
 import QRCode from 'qrcode'
 import api from '../api'
-import { PROTOCOL_META, CUSTOM_FIELDS, protocolColor } from '../protocols'
+import ProtocolIcon from '../components/ProtocolIcon.vue'
+import { PROTOCOL_META, CUSTOM_FIELDS, protocolColor, optionValue, optionLabel } from '../protocols'

 const step = ref(0)
 const form = ref({ name: '', protocol: '', config: {}, remark: '', auto_start: true, expire_at: null })
@@ -110,6 +168,16 @@ const visibleFields = computed(() => currentFields.value.filter(f => {
    ? v.includes(form.value.config[k])
    : form.value.config[k] === v)
 }))
+// 必填字段为"基础"，其余为"高级"（可折叠），超过 6 个字段才拆分
+const coreFields = computed(() => {
+  if (visibleFields.value.length <= 6) return visibleFields.value
+  return visibleFields.value.filter(f => f.required)
+})
+const advancedFields = computed(() => {
+  if (visibleFields.value.length <= 6) return []
+  return visibleFields.value.filter(f => !f.required)
+})
+const advCollapsed = ref([])

 function selectProtocol(key) {
  form.value.protocol = key
@@ -123,6 +191,15 @@ function selectProtocol(key) {

 async function create() {
  if (!form.value.name) return ElMessage.warning('请填写专线名称')
+  // 必填字段校验：提示具体缺哪个字段
+  for (const f of visibleFields.value) {
+    if (f.required) {
+      const val = form.value.config[f.key]
+      if (val === undefined || val === '' || val === null) {
+        return ElMessage.warning(`请填写必填项：${f.label}`)
+      }
+    }
+  }
  creating.value = true
  try {
    const { data } = await api.post('/tunnels', {
@@ -158,12 +235,77 @@ async function showQr() {
  QRCode.toCanvas(qrCanvas.value, clientConfig.value, { width: 260, margin: 1 })
 }

-onMounted(async () => {
-  const { data } = await api.get('/protocols')
-  for (const p of data) {
-    if (p.custom) customProtocols.value.push({ name: p.name, display_name: p.display_name })
-    else depStatus.value[p.name] = p
+// ---- 依赖部署逻辑 ----
+const deploying = ref('')
+const installCmdVisible = ref(false)
+const installCmdTitle = ref('')
+const installData = ref({ command: '', pm: '', detected: false, all_commands: {} })
+
+// 协议 → 二进制包名映射（用于判断是否支持平台下载）
+const deployableProtocols = ['frp', 'openvpn']
+
+// IPSec/IKEv2/L2TP 归入 strongswan
+const protocolToPkg = { wireguard: 'wireguard', ipsec: 'strongswan', ikev2: 'strongswan', l2tp: 'strongswan', openvpn: 'openvpn', frp: 'frp' }
+
+function canDeploy(protocol) {
+  return deployableProtocols.includes(protocol)
+}
+
+// 下载部署（FRP / OpenVPN 从 GitHub 下载）
+async function deployProtocol(protocol) {
+  const pkg = protocolToPkg[protocol] || protocol
+  deploying.value = protocol
+  try {
+    const { data } = await api.post(`/binaries/install/${pkg}`)
+    ElMessage.success(`${protocol} ${data.version} 部署成功`)
+    // 刷新依赖状态
+    await refreshDepStatus()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || `${protocol} 部署失败`)
+  } finally { deploying.value = '' }
+}
+
+// 显示系统包安装命令
+async function showInstallCmd(protocol) {
+  const pkg = protocolToPkg[protocol] || protocol
+  installCmdTitle.value = protocol
+  try {
+    const { data } = await api.get(`/binaries/install-hint/${pkg}`)
+    installData.value = {
+      command: data.command || '',
+      pm: data.pm || '',
+      detected: data.detected || false,
+      all_commands: data.all_commands || {},
+    }
+  } catch {
+    installData.value = { command: '', pm: '', detected: false, all_commands: {} }
  }
+  installCmdVisible.value = true
+}
+
+function copyText(text) {
+  navigator.clipboard.writeText(text).then(() => ElMessage.success('已复制'))
+}
+
+// 刷新协议依赖状态
+async function refreshDepStatus() {
+  try {
+    const { data } = await api.get('/protocols')
+    for (const p of data) {
+      if (!p.custom) depStatus.value[p.name] = p
+    }
+  } catch { /* ignore */ }
+}
+
+onMounted(async () => {
+  await refreshDepStatus()
+  // 加载自定义协议
+  try {
+    const { data } = await api.get('/protocols')
+    for (const p of data) {
+      if (p.custom) customProtocols.value.push({ name: p.name, display_name: p.display_name })
+    }
+  } catch { /* ignore */ }
 })
 </script>

@@ -175,11 +317,19 @@ onMounted(async () => {
 }
 .proto-card:hover { border-color: #4a6fa5; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }
 .proto-card.active { border-color: #4a6fa5; background: #f0f5fc; }
-.proto-icon { font-size: 34px; }
+.proto-card.disabled { opacity: 0.65; }
+.proto-card.disabled:hover { border-color: #e8eaee; transform: none; box-shadow: none; }
+.proto-card { position: relative; }
+.recommend-badge { position: absolute; top: 8px; right: 8px; }
+.dep-action { margin-top: 8px; }
+.proto-icon { display: flex; justify-content: center; align-items: center; height: 40px; margin-bottom: 4px; }
 .proto-name { font-size: 16px; font-weight: 700; margin: 8px 0 4px; }
 .proto-desc { font-size: 12px; color: #606266; min-height: 34px; }
 .proto-scene { font-size: 11px; color: #909399; margin-top: 6px; }
 .dep-badge { margin-top: 8px; }
-.field-tip { font-size: 12px; color: #909399; line-height: 1.4; }
-.conf-box { background: #f6f8fa; border: 1px solid #e8eaee; border-radius: 6px; padding: 14px; max-height: 320px; overflow: auto; }
+.field-tip { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
+.conf-box { background: var(--bg-inset); border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 14px; max-height: 320px; overflow: auto; }
+.cmd-label { display: flex; align-items: center; margin-bottom: 6px; }
+.cmd-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
+.cmd-code { font-family: 'JetBrains Mono', Consolas, monospace; font-size: 12px; flex: 1; background: var(--bg-inset); padding: 4px 8px; border-radius: 4px; }
 </style>
@@ -7,6 +7,11 @@
          <el-select v-model="protocolFilter" placeholder="全部协议" clearable style="width:160px;margin-left:10px" @change="load">
            <el-option v-for="p in protocolOptions" :key="p" :label="protocolDisplay(p)" :value="p" />
          </el-select>
+          <el-select v-model="stateFilter" placeholder="全部状态" clearable style="width:140px;margin-left:10px" @change="load">
+            <el-option label="运行中" value="running" />
+            <el-option label="已停止" value="stopped" />
+            <el-option label="异常" value="error" />
+          </el-select>
        </div>
        <el-button type="primary" :icon="Plus" @click="$router.push('/tunnels/create')">创建专线</el-button>
      </div>
@@ -19,11 +24,12 @@
          <div class="remark" v-if="row.remark">{{ row.remark }}</div>
        </template>
      </el-table-column>
-      <el-table-column label="协议" width="130">
+      <el-table-column label="协议" width="150">
        <template #default="{ row }">
-          <el-tag :color="protocolColor(row.protocol)" effect="dark" style="border:none">
+          <span class="proto-cell">
+            <ProtocolIcon :protocol="row.protocol" :size="16" :style="{ color: protocolColor(row.protocol) }" />
            {{ protocolDisplay(row.protocol) }}
-          </el-tag>
+          </span>
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110">
@@ -49,24 +55,35 @@
      <el-table-column label="节点" width="110">
        <template #default="{ row }">{{ row.node?.name || '本机节点' }}</template>
      </el-table-column>
-      <el-table-column label="操作" width="300" fixed="right">
+      <el-table-column label="操作" width="240" fixed="right">
        <template #default="{ row }">
          <el-button v-if="stateOf(row) !== 'running'" type="success" size="small" link @click="start(row)">启动</el-button>
          <el-button v-else type="warning" size="small" link @click="stop(row)">停止</el-button>
          <el-button size="small" link @click="showDetail(row)">详情</el-button>
          <el-button size="small" link @click="$router.push(`/tunnels/${row.id}/edit`)">编辑</el-button>
-          <el-button size="small" link @click="download(row)">下载配置</el-button>
-          <el-button v-if="row.protocol === 'wireguard'" size="small" link @click="showQr(row)">二维码</el-button>
-          <el-button type="danger" size="small" link @click="remove(row)">删除</el-button>
+          <el-dropdown trigger="click" @command="cmd => onMoreCommand(cmd, row)" style="margin-left:8px">
+            <el-button size="small" link>更多<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item command="logs">查看日志</el-dropdown-item>
+                <el-dropdown-item command="download">下载配置</el-dropdown-item>
+                <el-dropdown-item v-if="row.protocol === 'wireguard'" command="qrcode">显示二维码</el-dropdown-item>
+                <el-dropdown-item v-if="row.protocol === 'ipsec'" command="ipsec-peer">IPSec 对接测试</el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <el-button type="danger" size="small" link style="margin-left:12px" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
-        <el-empty description="还没有专线，点击右上角创建第一条" />
+        <el-empty description="还没有专线">
+          <el-button type="primary" :icon="Plus" @click="$router.push('/tunnels/create')">创建第一条专线</el-button>
+        </el-empty>
      </template>
    </el-table>

    <!-- 详情抽屉 -->
-    <el-drawer v-model="detailVisible" :title="detail?.tunnel?.name" size="520px">
+    <el-drawer v-model="detailVisible" :title="detail?.tunnel?.name" size="560px">
      <template v-if="detail">
        <el-descriptions :column="1" border size="small">
          <el-descriptions-item label="协议">{{ protocolDisplay(detail.tunnel.protocol) }}</el-descriptions-item>
@@ -78,7 +95,64 @@
        <pre class="mono conf-box">{{ prettyConfig(detail.tunnel.config) }}</pre>
        <h4>客户端配置</h4>
        <pre class="mono conf-box">{{ detail.client_config || '该协议暂无客户端配置' }}</pre>
-        <el-button type="primary" style="width:100%" @click="download(detail.tunnel)">下载客户端配置</el-button>
+        <el-button type="primary" style="width:100%;margin-bottom:8px" @click="download(detail.tunnel)">下载客户端配置</el-button>
+        <el-button v-if="detail.tunnel.protocol === 'ipsec'" type="warning" plain style="width:100%;margin-bottom:16px"
+                   @click="$router.push('/ipsec-peer')">IPSec 参数检查与连通性测试</el-button>
+
+        <!-- 流量策略 -->
+        <h4>流量策略</h4>
+        <el-form label-width="90px" size="small" v-loading="policyLoading">
+          <el-form-item label="配额(GB)">
+            <el-input-number v-model="policy.quota_gb" :min="0" :precision="1" :step="10" style="width:100%" />
+            <span style="font-size:12px;color:var(--text-secondary);margin-left:8px">0 = 不限。已用：{{ fmtBytes(policy.used_bytes || 0) }}</span>
+          </el-form-item>
+          <el-form-item label="限速(Mbps)">
+            <el-input-number v-model="policy.rate_limit_mbps" :min="0" :max="10000" style="width:100%" />
+            <span style="font-size:12px;color:var(--text-secondary);margin-left:8px">0 = 不限</span>
+          </el-form-item>
+          <el-form-item label="超额动作">
+            <el-select v-model="policy.action_on_exceed" style="width:100%">
+              <el-option value="warn" label="仅告警" />
+              <el-option value="block" label="自动停止" />
+              <el-option value="throttle" label="限速至1Mbps" />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="重置周期">
+            <el-select v-model="policy.reset_cycle" style="width:100%">
+              <el-option value="none" label="不重置" />
+              <el-option value="daily" label="每天" />
+              <el-option value="monthly" label="每月" />
+            </el-select>
+          </el-form-item>
+          <el-button type="primary" size="small" :loading="policySaving" @click="savePolicy(detail.tunnel.id)">保存策略</el-button>
+        </el-form>
+
+        <!-- WireGuard Peer 管理 -->
+        <template v-if="detail.tunnel.protocol === 'wireguard'">
+          <div style="display:flex;justify-content:space-between;align-items:center;margin:8px 0">
+            <h4 style="margin:0">Peer 列表</h4>
+            <el-button type="primary" size="small" @click="openAddPeer">添加 Peer</el-button>
+          </div>
+          <el-table :data="wgPeers" size="small" v-loading="peersLoading">
+            <el-table-column prop="id" label="ID" width="100" />
+            <el-table-column prop="name" label="名称" width="100" />
+            <el-table-column prop="client_address" label="地址" min-width="110" />
+            <el-table-column label="状态" width="80">
+              <template #default="{ row }">
+                <el-tag size="small" :type="peerOnline(row) ? 'success' : 'info'">
+                  {{ peerOnline(row) ? '在线' : '离线' }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="150">
+              <template #default="{ row }">
+                <el-button v-if="row.managed !== false" link size="small" @click="downloadPeer(row)">配置</el-button>
+                <el-button v-if="row.managed !== false" link size="small" @click="qrPeer(row)">二维码</el-button>
+                <el-button type="danger" link size="small" @click="removePeer(row)">删除</el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+        </template>
      </template>
    </el-drawer>

@@ -89,26 +163,80 @@
        <p style="color:#909399;font-size:12px">使用 WireGuard App「从二维码添加」</p>
      </div>
    </el-dialog>
+
+    <!-- 添加 Peer -->
+    <el-dialog v-model="peerDialog" title="添加 WireGuard Peer" width="440px">
+      <el-form label-width="110px">
+        <el-form-item label="Peer ID">
+          <el-input v-model="peerForm.id" placeholder="留空自动生成 client-N" />
+        </el-form-item>
+        <el-form-item label="名称">
+          <el-input v-model="peerForm.name" placeholder="手机 / 笔记本" />
+        </el-form-item>
+        <el-form-item label="客户端地址" required>
+          <el-input v-model="peerForm.client_address" placeholder="10.8.0.3/32" />
+        </el-form-item>
+        <el-form-item label="AllowedIPs">
+          <el-input v-model="peerForm.allowed_ips" placeholder="留空使用隧道默认" />
+        </el-form-item>
+        <el-form-item label="外部公钥">
+          <el-input v-model="peerForm.public_key" type="textarea" :rows="2"
+            placeholder="留空则平台托管生成密钥；填写则为外部设备" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <el-button @click="peerDialog = false">取消</el-button>
+        <el-button type="primary" :loading="peerSaving" @click="addPeer">添加</el-button>
+      </template>
+    </el-dialog>
  </el-card>
+
+  <!-- 日志实时查看弹窗 -->
+  <el-dialog v-model="logVisible" :title="`实例日志 — ${logTunnel?.name || ''}`" width="780px" align-center
+             @close="closeLogStream">
+    <div class="log-toolbar">
+      <el-tag size="small" :type="logStreaming ? 'success' : 'info'">
+        {{ logStreaming ? '● 实时输出中' : '已停止' }}
+      </el-tag>
+      <el-button v-if="logStreaming" size="small" @click="stopLogStream">暂停</el-button>
+      <el-button v-else size="small" type="primary" @click="resumeLogStream">继续</el-button>
+      <el-button size="small" @click="logContent = ''">清屏</el-button>
+    </div>
+    <div class="log-view mono" ref="logView">{{ logContent || '等待日志输出...' }}</div>
+  </el-dialog>
 </template>

 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { Plus, InfoFilled } from '@element-plus/icons-vue'
+import { Plus, InfoFilled, ArrowDown } from '@element-plus/icons-vue'
 import QRCode from 'qrcode'
+import { useRouter } from 'vue-router'
 import api from '../api'
+import ProtocolIcon from '../components/ProtocolIcon.vue'
 import { protocolDisplay, protocolColor } from '../protocols'

+const router = useRouter()
 const list = ref([])
 const loading = ref(false)
 const keyword = ref('')
 const protocolFilter = ref('')
+const stateFilter = ref('')
 const protocolOptions = ref([])
 const detailVisible = ref(false)
 const detail = ref(null)
 const qrVisible = ref(false)
+// 流量策略
+const policy = ref({ quota_gb: 0, rate_limit_mbps: 0, action_on_exceed: 'block', reset_cycle: 'none', used_bytes: 0 })
+const policyLoading = ref(false)
+const policySaving = ref(false)
 const qrCanvas = ref(null)
+const wgPeers = ref([])
+const runtimePeers = ref([])
+const peersLoading = ref(false)
+const peerDialog = ref(false)
+const peerSaving = ref(false)
+const peerForm = ref({ id: '', name: '', client_address: '', allowed_ips: '', public_key: '' })

 function fmtBytes(n) {
  if (!n) return '0 B'
@@ -134,15 +262,114 @@ function stateOf(row) { return row.runtime?.state || row.state }
 function prettyConfig(c) {
  try { return JSON.stringify(JSON.parse(c), null, 2) } catch { return c }
 }
+function peerOnline(row) {
+  const rt = runtimePeers.value.find(p => p.id === row.id || p.public_key === row.public_key)
+  return !!rt?.connected
+}

 async function load() {
  loading.value = true
  try {
    const { data } = await api.get('/tunnels', { params: { keyword: keyword.value, protocol: protocolFilter.value } })
-    list.value = data || []
+    let result = data || []
+    // 前端状态筛选（后端无 state 参数）
+    if (stateFilter.value) {
+      result = result.filter(r => stateOf(r) === stateFilter.value)
+    }
+    list.value = result
  } finally { loading.value = false }
 }

+// 更多操作下拉命令分发
+function onMoreCommand(cmd, row) {
+  if (cmd === 'download') download(row)
+  else if (cmd === 'qrcode') showQr(row)
+  else if (cmd === 'ipsec-peer') router.push('/ipsec-peer')
+  else if (cmd === 'logs') openLogStream(row)
+}
+
+// ---- 实时日志流（SSE）----
+const logVisible = ref(false)
+const logTunnel = ref(null)
+const logContent = ref('')
+const logStreaming = ref(false)
+const logView = ref(null)
+let logEventSource = null
+
+function openLogStream(row) {
+  logTunnel.value = row
+  logContent.value = ''
+  logVisible.value = true
+  resumeLogStream()
+}
+
+function resumeLogStream() {
+  if (!logTunnel.value) return
+  stopLogStream()
+  const token = localStorage.getItem('vpn_token')
+  // SSE 不支持自定义 header，通过 query 传 token
+  logEventSource = new EventSource(`/api/tunnels/${logTunnel.value.id}/logs?token=${token}`)
+  logStreaming.value = true
+  logEventSource.onmessage = (e) => {
+    logContent.value += e.data + '\n'
+    // 自动滚动到底部
+    nextTick(() => {
+      if (logView.value) logView.value.scrollTop = logView.value.scrollHeight
+    })
+    // 限制日志长度防止内存爆炸
+    if (logContent.value.length > 100000) {
+      logContent.value = logContent.value.slice(-50000)
+    }
+  }
+  logEventSource.onerror = () => {
+    logStreaming.value = false
+    logEventSource?.close()
+  }
+}
+
+function stopLogStream() {
+  logStreaming.value = false
+  logEventSource?.close()
+  logEventSource = null
+}
+
+function closeLogStream() {
+  stopLogStream()
+  logContent.value = ''
+}
+
+// ---- 流量策略 ----
+async function loadPolicy(tunnelId) {
+  policyLoading.value = true
+  try {
+    const { data } = await api.get(`/tunnels/${tunnelId}/policy`)
+    policy.value = {
+      quota_gb: data.quota_bytes > 0 ? +(data.quota_bytes / (1024 * 1024 * 1024)).toFixed(2) : 0,
+      rate_limit_mbps: data.rate_limit_mbps || 0,
+      action_on_exceed: data.action_on_exceed || 'block',
+      reset_cycle: data.reset_cycle || 'none',
+      used_bytes: data.used_bytes || 0,
+    }
+  } catch { policy.value = { quota_gb: 0, rate_limit_mbps: 0, action_on_exceed: 'block', reset_cycle: 'none', used_bytes: 0 } }
+  finally { policyLoading.value = false }
+}
+
+async function savePolicy(tunnelId) {
+  policySaving.value = true
+  try {
+    const quotaBytes = Math.round((policy.value.quota_gb || 0) * 1024 * 1024 * 1024)
+    await api.put(`/tunnels/${tunnelId}/policy`, {
+      quota_bytes: quotaBytes,
+      rate_limit_mbps: policy.value.rate_limit_mbps,
+      action_on_exceed: policy.value.action_on_exceed,
+      reset_cycle: policy.value.reset_cycle,
+    })
+    ElMessage.success('流量策略已保存')
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '保存失败')
+  } finally { policySaving.value = false }
+}
+
 async function start(row) {
  try {
    await api.post(`/tunnels/${row.id}/start`)
@@ -167,9 +394,103 @@ async function showDetail(row) {
  const { data } = await api.get(`/tunnels/${row.id}`)
  detail.value = data
  detailVisible.value = true
+  if (row.protocol === 'wireguard') {
+    await loadPeers(row.id)
+  } else {
+    wgPeers.value = []
+    runtimePeers.value = []
+  }
+  loadPolicy(row.id)
 }
+
+async function loadPeers(tunnelId) {
+  peersLoading.value = true
+  try {
+    const { data } = await api.get(`/tunnels/${tunnelId}/wireguard/peers`)
+    wgPeers.value = data.peers || []
+    runtimePeers.value = data.runtime_peers || []
+  } catch {
+    wgPeers.value = []
+  } finally {
+    peersLoading.value = false
+  }
+}
+
+function openAddPeer() {
+  peerForm.value = { id: '', name: '', client_address: '', allowed_ips: '', public_key: '' }
+  peerDialog.value = true
+}
+
+async function addPeer() {
+  if (!peerForm.value.client_address) return ElMessage.warning('请填写客户端地址')
+  peerSaving.value = true
+  try {
+    const body = { ...peerForm.value }
+    if (!body.id) delete body.id
+    if (!body.public_key) delete body.public_key
+    if (!body.allowed_ips) delete body.allowed_ips
+    await api.post(`/tunnels/${detail.value.tunnel.id}/wireguard/peers`, body)
+    ElMessage.success('Peer 已添加')
+    peerDialog.value = false
+    await loadPeers(detail.value.tunnel.id)
+    const { data } = await api.get(`/tunnels/${detail.value.tunnel.id}`)
+    detail.value = data
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '添加失败')
+  } finally {
+    peerSaving.value = false
+  }
+}
+
+async function removePeer(row) {
+  await ElMessageBox.confirm(`删除 Peer「${row.id}」？`, '确认', { type: 'warning' })
+  try {
+    await api.delete(`/tunnels/${detail.value.tunnel.id}/wireguard/peers/${row.id}`)
+    ElMessage.success('已删除')
+    await loadPeers(detail.value.tunnel.id)
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '删除失败')
+  }
+}
+
+function downloadPeer(row) {
+  fetch(`/api/tunnels/${detail.value.tunnel.id}/wireguard/peers/${row.id}/config`, {
+    headers: { Authorization: `Bearer ${localStorage.getItem('vpn_token')}` }
+  }).then(async r => {
+    if (!r.ok) {
+      const d = await r.json()
+      throw new Error(d.error)
+    }
+    return r.blob()
+  }).then(b => {
+    const a = document.createElement('a')
+    a.href = URL.createObjectURL(b)
+    a.download = `wireguard-${row.id}.conf`
+    a.click()
+  }).catch(e => ElMessage.error(e.message || '下载失败'))
+}
+
+async function qrPeer(row) {
+  try {
+    const res = await fetch(`/api/tunnels/${detail.value.tunnel.id}/wireguard/peers/${row.id}/config`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem('vpn_token')}` }
+    })
+    if (!res.ok) {
+      const d = await res.json()
+      throw new Error(d.error)
+    }
+    const conf = await res.text()
+    qrVisible.value = true
+    await nextTick()
+    QRCode.toCanvas(qrCanvas.value, conf, { width: 280, margin: 1 })
+  } catch (e) {
+    ElMessage.error(e.message || '生成二维码失败')
+  }
+}
+
 function download(row) {
-  // 带鉴权下载
  fetch(`/api/tunnels/${row.id}/config`, { headers: { Authorization: `Bearer ${localStorage.getItem('vpn_token')}` } })
    .then(r => r.blob()).then(b => {
      const a = document.createElement('a')
@@ -199,6 +520,12 @@ onUnmounted(() => clearInterval(timer))
 </script>

 <style scoped>
-.remark { font-size: 12px; color: #909399; }
-.conf-box { background: #f6f8fa; border: 1px solid #e8eaee; border-radius: 6px; padding: 12px; max-height: 260px; overflow: auto; }
+.remark { font-size: 12px; color: var(--text-secondary); }
+.proto-cell { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
+.conf-box { background: var(--bg-inset); border: 1px solid var(--border-base); border-radius: var(--radius-sm); padding: 12px; max-height: 260px; overflow: auto; }
+.log-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
+.log-view {
+  background: #1e1e1e; color: #d4d4d4; border-radius: var(--radius-sm); padding: 16px;
+  height: 400px; overflow-y: auto; font-size: 13px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
+}
 </style>
@@ -1,23 +1,55 @@
 <template>
  <el-row :gutter="16">
-    <el-col :span="15">
+    <el-col :xs="24" :lg="15">
      <el-card class="page-card" shadow="never">
-        <template #header><div style="display:flex;justify-content:space-between"><b>管理用户</b><el-button type="primary" @click="openCreate">添加本地用户</el-button></div></template>
-        <el-table :data="users" size="small">
-          <el-table-column prop="username" label="用户名" />
-          <el-table-column prop="email" label="邮箱" />
-          <el-table-column label="来源" width="90"><template #default="{row}"><el-tag size="small">{{ row.source }}</el-tag></template></el-table-column>
-          <el-table-column label="角色" width="100"><template #default="{row}"><el-tag :type="row.role === 'admin' ? 'danger' : row.role === 'operator' ? 'warning' : 'info'" size="small">{{ row.role }}</el-tag></template></el-table-column>
-          <el-table-column label="状态" width="80"><template #default="{row}"><el-tag :type="row.enabled ? 'success' : 'info'" size="small">{{ row.enabled ? '启用' : '禁用' }}</el-tag></template></el-table-column>
-          <el-table-column label="操作" width="130"><template #default="{row}"><el-button link size="small" @click="toggle(row)">{{ row.enabled ? '禁用' : '启用' }}</el-button><el-button v-if="row.username !== auth.username" type="danger" link size="small" @click="remove(row)">删除</el-button></template></el-table-column>
+        <template #header>
+          <div class="row-between">
+            <b>管理用户</b>
+            <div>
+              <el-button @click="batchVisible = true">批量导入</el-button>
+              <el-button @click="ldapImportVisible = true">LDAP 导入</el-button>
+              <el-button type="primary" @click="openCreate">添加用户</el-button>
+            </div>
+          </div>
+        </template>
+        <el-table :data="users" size="small" v-loading="loading">
+          <el-table-column prop="username" label="用户名" min-width="100" />
+          <el-table-column prop="email" label="邮箱" min-width="140" />
+          <el-table-column label="来源" width="80">
+            <template #default="{ row }">
+              <el-tag :type="row.source === 'ldap' ? 'primary' : 'info'" size="small">{{ row.source === 'ldap' ? 'LDAP' : '本地' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="角色" width="90">
+            <template #default="{ row }">
+              <el-tag :type="row.role === 'admin' ? 'danger' : row.role === 'operator' ? 'warning' : 'info'" size="small">
+                {{ { admin: '管理员', operator: '运维', viewer: '只读' }[row.role] || row.role }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="70">
+            <template #default="{ row }">
+              <el-tag :type="row.enabled ? 'success' : 'info'" size="small">{{ row.enabled ? '启用' : '禁用' }}</el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="140">
+            <template #default="{ row }">
+              <el-button link size="small" @click="toggle(row)">{{ row.enabled ? '禁用' : '启用' }}</el-button>
+              <el-button link size="small" @click="openEdit(row)">编辑</el-button>
+              <el-button v-if="row.username !== auth.username" type="danger" link size="small" @click="remove(row)">删除</el-button>
+            </template>
+          </el-table-column>
+          <template #empty><el-empty description="还没有用户" /></template>
        </el-table>
      </el-card>
    </el-col>
-    <el-col :span="9">
+
+    <el-col :xs="24" :lg="9">
      <el-card class="page-card" shadow="never">
        <template #header><b>LDAP 身份源</b></template>
-        <el-alert type="info" :closable="false" title="LDAP 用户首次登录后同步为只读管理用户；可由管理员调整角色。" style="margin-bottom:12px" />
-        <el-form label-width="88px" size="small">
+        <el-alert type="info" :closable="false"
+                  title="LDAP 用户可首次登录后自动同步，也可使用左侧「LDAP 导入」预先添加。" style="margin-bottom:12px" />
+        <el-form label-width="90px" size="small">
          <el-form-item label="启用"><el-switch v-model="ldap.enabled" /></el-form-item>
          <el-form-item label="LDAP URL"><el-input v-model="ldap.url" placeholder="ldaps://ldap.example.com:636" /></el-form-item>
          <el-form-item label="Bind DN"><el-input v-model="ldap.bind_dn" /></el-form-item>
@@ -25,29 +57,249 @@
          <el-form-item label="Base DN"><el-input v-model="ldap.base_dn" placeholder="dc=example,dc=com" /></el-form-item>
          <el-form-item label="用户过滤"><el-input v-model="ldap.user_filter" placeholder="(objectClass=inetOrgPerson)" /></el-form-item>
          <el-form-item label="用户名属性"><el-input v-model="ldap.username_attribute" placeholder="uid" /></el-form-item>
-          <el-button type="primary" @click="saveLDAP">保存</el-button><el-button @click="testLDAP">测试连接</el-button>
+          <div style="text-align:right">
+            <el-button @click="testLDAP">测试连接</el-button>
+            <el-button type="primary" @click="saveLDAP">保存</el-button>
+          </div>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
-  <el-dialog v-model="visible" title="添加本地管理用户" width="420px">
-    <el-form label-width="80px"><el-form-item label="用户名"><el-input v-model="form.username" /></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item><el-form-item label="密码"><el-input v-model="form.password" type="password" show-password /></el-form-item><el-form-item label="角色"><el-select v-model="form.role"><el-option value="admin" label="管理员" /><el-option value="operator" label="运维员" /><el-option value="viewer" label="只读" /></el-select></el-form-item></el-form>
-    <template #footer><el-button @click="visible=false">取消</el-button><el-button type="primary" @click="create">创建</el-button></template>
+
+  <!-- 单用户新增/编辑对话框 -->
+  <el-dialog v-model="visible" :title="editing ? '编辑用户' : '添加用户'" width="440px" align-center>
+    <el-form label-width="80px">
+      <el-form-item label="用户名" required>
+        <el-input v-model="form.username" :disabled="!!editing" placeholder="登录用户名" />
+      </el-form-item>
+      <el-form-item label="邮箱"><el-input v-model="form.email" placeholder="user@example.com" /></el-form-item>
+      <el-form-item v-if="!editing || form.source === 'local'" label="密码" :required="!editing">
+        <el-input v-model="form.password" type="password" show-password
+                  :placeholder="editing ? '留空不修改' : '至少 8 位'" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="form.role" style="width:100%">
+          <el-option value="admin" label="管理员" />
+          <el-option value="operator" label="运维" />
+          <el-option value="viewer" label="只读" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="save">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 批量导入对话框 -->
+  <el-dialog v-model="batchVisible" title="批量导入用户" width="600px" align-center>
+    <el-alert type="info" :closable="false" style="margin-bottom:16px"
+              title="每行一个用户，格式：用户名,密码  或仅用户名（自动生成密码）。密码至少 8 位。" />
+    <el-input v-model="batchText" type="textarea" :rows="8"
+              placeholder="每行一个：用户名,密码（如 user1,Pass1234）；或仅用户名自动生成密码" />
+    <el-form-item label="默认角色" style="margin-top:16px">
+      <el-select v-model="batchRole" style="width:160px">
+        <el-option value="viewer" label="只读" />
+        <el-option value="operator" label="运维" />
+        <el-option value="admin" label="管理员" />
+      </el-select>
+    </el-form-item>
+    <template #footer>
+      <el-button @click="batchVisible = false">取消</el-button>
+      <el-button type="primary" :loading="batchLoading" @click="doBatchImport">开始导入</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- LDAP 导入对话框 -->
+  <el-dialog v-model="ldapImportVisible" title="从 LDAP 导入用户" width="680px" align-center>
+    <el-alert v-if="!ldap.enabled" type="warning" :closable="false" style="margin-bottom:12px"
+              title="LDAP 未启用，请先在右侧配置并测试连接" />
+    <div class="row-between" style="margin-bottom:12px">
+      <span style="font-size:14px;color:var(--text-secondary)">
+        <el-button v-if="ldap.enabled" link type="primary" :loading="ldapLoading" @click="loadLDAPUsers">刷新用户列表</el-button>
+      </span>
+      <span v-if="ldapUsers.length" style="font-size:13px;color:var(--text-secondary)">
+        共 {{ ldapUsers.length }} 个用户，已选 {{ selectedDNs.length }} 个
+      </span>
+    </div>
+    <el-table :data="ldapUsers" size="small" max-height="380" v-loading="ldapLoading"
+              @selection-change="rows => selectedDNs = rows.map(r => r.dn)">
+      <el-table-column type="selection" width="40" :selectable="row => !row.imported" />
+      <el-table-column prop="uid" label="用户名" width="120" />
+      <el-table-column prop="cn" label="姓名" min-width="100" />
+      <el-table-column prop="mail" label="邮箱" min-width="160" />
+      <el-table-column label="状态" width="80">
+        <template #default="{ row }">
+          <el-tag :type="row.imported ? 'success' : 'info'" size="small">{{ row.imported ? '已导入' : '待导入' }}</el-tag>
+        </template>
+      </el-table-column>
+      <template #empty>
+        <el-empty :description="ldap.enabled ? '点击上方刷新加载 LDAP 用户' : 'LDAP 未启用'" />
+      </template>
+    </el-table>
+    <template #footer>
+      <el-button @click="ldapImportVisible = false">取消</el-button>
+      <el-button type="primary" :loading="importLoading" :disabled="!selectedDNs.length" @click="doLDAPImport">
+        导入选中 ({{ selectedDNs.length }})
+      </el-button>
+    </template>
  </el-dialog>
 </template>
+
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import api, { auth } from '../api'
-const users = ref([]), visible = ref(false)
+
+const users = ref([])
+const loading = ref(false)
+const visible = ref(false)
+const editing = ref(null)
 const form = ref({ username: '', email: '', password: '', role: 'viewer', enabled: true })
-const ldap = ref({ enabled: false, url: '', bind_dn: '', bind_password: '', base_dn: '', user_filter: '(objectClass=inetOrgPerson)', username_attribute: 'uid' })
-async function load () { const [u, l] = await Promise.all([api.get('/users'), api.get('/ldap')]); users.value = u.data || []; ldap.value = { ...ldap.value, ...l.data, bind_password: '' } }
-function openCreate () { form.value = { username: '', email: '', password: '', role: 'viewer', enabled: true }; visible.value = true }
-async function create () { try { await api.post('/users', form.value); visible.value = false; ElMessage.success('用户已创建'); load() } catch (e) { ElMessage.error(e.response?.data?.error || '创建失败') } }
-async function toggle (row) { await api.put(`/users/${row.id}`, { enabled: !row.enabled }); load() }
-async function remove (row) { await ElMessageBox.confirm(`删除用户 ${row.username}？`, '确认'); await api.delete(`/users/${row.id}`); load() }
-async function saveLDAP () { try { await api.put('/ldap', ldap.value); ldap.value.bind_password = ''; ElMessage.success('LDAP 配置已保存') } catch (e) { ElMessage.error(e.response?.data?.error || '保存失败') } }
-async function testLDAP () { try { await api.post('/ldap/test'); ElMessage.success('LDAP 连接成功') } catch (e) { ElMessage.error(e.response?.data?.error || '连接失败') } }
+const ldap = ref({
+  enabled: false, url: '', bind_dn: '', bind_password: '',
+  base_dn: '', user_filter: '(objectClass=inetOrgPerson)', username_attribute: 'uid',
+  start_tls: false,
+})
+
+// 批量导入
+const batchVisible = ref(false)
+const batchText = ref('')
+const batchRole = ref('viewer')
+const batchLoading = ref(false)
+
+// LDAP 导入
+const ldapImportVisible = ref(false)
+const ldapUsers = ref([])
+const ldapLoading = ref(false)
+const selectedDNs = ref([])
+const importLoading = ref(false)
+
+async function load() {
+  loading.value = true
+  try {
+    const [u, l] = await Promise.all([api.get('/users'), api.get('/ldap')])
+    users.value = u.data || []
+    if (l.data) {
+      ldap.value = { ...ldap.value, ...l.data, bind_password: '' }
+    }
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '加载失败')
+  } finally { loading.value = false }
+}
+
+// ---- 单用户 CRUD ----
+function openCreate() {
+  editing.value = null
+  form.value = { username: '', email: '', password: '', role: 'viewer', enabled: true }
+  visible.value = true
+}
+function openEdit(row) {
+  editing.value = row
+  form.value = { username: row.username, email: row.email, password: '', role: row.role, enabled: row.enabled, source: row.source }
+  visible.value = true
+}
+async function save() {
+  try {
+    if (editing.value) {
+      const payload = { email: form.value.email, role: form.value.role }
+      if (form.value.password) payload.password = form.value.password
+      await api.put(`/users/${editing.value.id}`, payload)
+      ElMessage.success('已更新')
+    } else {
+      if (!form.value.username) return ElMessage.warning('请填写用户名')
+      if (!form.value.password || form.value.password.length < 8) return ElMessage.warning('密码至少 8 位')
+      await api.post('/users', form.value)
+      ElMessage.success('用户已创建')
+    }
+    visible.value = false
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '操作失败')
+  }
+}
+async function toggle(row) {
+  await api.put(`/users/${row.id}`, { enabled: !row.enabled })
+  load()
+}
+async function remove(row) {
+  try {
+    await ElMessageBox.confirm(`确定删除用户「${row.username}」？`, '删除确认', { type: 'warning' })
+    await api.delete(`/users/${row.id}`)
+    ElMessage.success('已删除')
+    load()
+  } catch (e) { if (e !== 'cancel') ElMessage.error(e.response?.data?.error || '删除失败') }
+}
+
+// ---- 批量导入 ----
+async function doBatchImport() {
+  const lines = batchText.value.trim().split('\n').filter(l => l.trim())
+  if (!lines.length) return ElMessage.warning('请输入至少一行用户数据')
+  const usersToCreate = lines.map(line => {
+    const parts = line.trim().split(/[,，\t]/)
+    const username = parts[0]?.trim()
+    let password = parts[1]?.trim()
+    // 仅用户名时自动生成 8 位随机密码
+    if (!password) password = Math.random().toString(36).slice(2, 10)
+    return { username, password, email: `${username}@local`, role: batchRole.value }
+  })
+  batchLoading.value = true
+  try {
+    const { data } = await api.post('/users/batch', { users: usersToCreate, default_role: batchRole.value })
+    const msg = `成功 ${data.success}，跳过 ${data.skipped}，失败 ${data.failed}`
+    if (data.failed > 0 && data.errors?.length) {
+      const errDetail = data.errors.map(e => `${e.username || '(空)'}: ${e.error}`).join('\n')
+      ElMessageBox.alert(`${msg}\n\n失败详情：\n${errDetail}`, '导入结果', { type: 'warning' })
+    } else {
+      ElMessage.success(msg)
+    }
+    batchVisible.value = false
+    batchText.value = ''
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '导入失败')
+  } finally { batchLoading.value = false }
+}
+
+// ---- LDAP 导入 ----
+async function loadLDAPUsers() {
+  ldapLoading.value = true
+  ldapUsers.value = []
+  try {
+    const { data } = await api.post('/ldap/users')
+    ldapUsers.value = data || []
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || 'LDAP 加载失败')
+  } finally { ldapLoading.value = false }
+}
+async function doLDAPImport() {
+  if (!selectedDNs.value.length) return
+  importLoading.value = true
+  try {
+    const { data } = await api.post('/users/import-ldap', { dns: selectedDNs.value })
+    ElMessage.success(`成功 ${data.success}，跳过 ${data.skipped}，失败 ${data.failed}`)
+    ldapImportVisible.value = false
+    selectedDNs.value = []
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '导入失败')
+  } finally { importLoading.value = false }
+}
+
+// ---- LDAP 配置 ----
+async function saveLDAP() {
+  try {
+    await api.put('/ldap', ldap.value)
+    ldap.value.bind_password = ''
+    ElMessage.success('LDAP 配置已保存')
+  } catch (e) { ElMessage.error(e.response?.data?.error || '保存失败') }
+}
+async function testLDAP() {
+  try {
+    await api.post('/ldap/test')
+    ElMessage.success('LDAP 连接成功')
+  } catch (e) { ElMessage.error(e.response?.data?.error || '连接失败') }
+}
+
 onMounted(load)
 </script>
@@ -1,29 +1,417 @@
 <template>
  <el-card class="page-card" shadow="never">
-    <template #header><div style="display:flex;justify-content:space-between;align-items:center"><div><b>VPN 拨号用户</b><span style="margin-left:8px;color:#909399;font-size:12px">本地密码或 LDAP 身份，按 OpenVPN 用户统计流量</span></div><el-button type="primary" @click="openCreate">添加用户</el-button></div></template>
+    <template #header>
+      <div style="display:flex;justify-content:space-between;align-items:center">
+        <div>
+          <b>VPN 拨号用户</b>
+          <span style="margin-left:8px;color:#909399;font-size:12px">
+            OpenVPN 双因素认证（TOTP / 静态挑战 / PIN+OTP）
+          </span>
+        </div>
+        <el-button type="primary" @click="openCreate">添加用户</el-button>
+      </div>
+    </template>
    <el-table :data="users" size="small">
-      <el-table-column prop="username" label="用户名" /><el-table-column prop="display_name" label="姓名" /><el-table-column label="隧道"><template #default="{row}">{{ tunnelName(row.tunnel_id) }}</template></el-table-column>
-      <el-table-column prop="source" label="来源" width="90" /><el-table-column label="流量 ↓ / ↑" width="170"><template #default="{row}">{{ bytes(row.rx_bytes) }} / {{ bytes(row.tx_bytes) }}</template></el-table-column>
-      <el-table-column label="最近在线" width="180"><template #default="{row}">{{ row.last_seen_at ? new Date(row.last_seen_at).toLocaleString('zh-CN') : '-' }}</template></el-table-column>
-      <el-table-column label="状态" width="90"><template #default="{row}"><el-tag :type="row.enabled ? 'success':'info'" size="small">{{ row.enabled ? '启用':'禁用' }}</el-tag></template></el-table-column>
-      <el-table-column label="操作" width="180"><template #default="{row}"><el-button link size="small" @click="download(row)">下载配置</el-button><el-button link size="small" @click="toggle(row)">{{ row.enabled ? '禁用':'启用' }}</el-button><el-button type="danger" link size="small" @click="remove(row)">删除</el-button></template></el-table-column>
+      <el-table-column prop="username" label="用户名" />
+      <el-table-column prop="display_name" label="姓名" />
+      <el-table-column label="隧道" min-width="160">
+        <template #default="{ row }">
+          {{ tunnelName(row.tunnel_id) }}
+          <el-tag size="small" style="margin-left:6px" type="info">{{ tunnelProto(row.tunnel_id) }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="source" label="来源" width="90" />
+      <el-table-column label="OTP / MFA" width="130">
+        <template #default="{ row }">
+          <template v-if="isOpenVPN(row.tunnel_id)">
+            <el-tag :type="row.mfa_enabled ? 'success' : 'info'" size="small">
+              {{ row.mfa_enabled ? '已绑定' : '未绑定' }}
+            </el-tag>
+            <el-tag v-if="row.mfa_has_pin" size="small" type="warning" style="margin-left:4px">PIN</el-tag>
+            <el-tag v-if="isLocked(row)" size="small" type="danger" style="margin-left:4px">锁定</el-tag>
+          </template>
+          <span v-else style="color:#c0c4cc">—</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="流量 ↓ / ↑" width="170">
+        <template #default="{ row }">{{ bytes(row.rx_bytes) }} / {{ bytes(row.tx_bytes) }}</template>
+      </el-table-column>
+      <el-table-column label="最近在线" width="180">
+        <template #default="{ row }">{{ row.last_seen_at ? new Date(row.last_seen_at).toLocaleString('zh-CN') : '-' }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="90">
+        <template #default="{ row }">
+          <el-tag :type="row.enabled ? 'success' : 'info'" size="small">{{ row.enabled ? '启用' : '禁用' }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="280">
+        <template #default="{ row }">
+          <el-button link size="small" @click="download(row)">下载配置</el-button>
+          <el-button v-if="isOpenVPN(row.tunnel_id)" link size="small" type="primary" @click="openOTPManager(row)">OTP 管理</el-button>
+          <el-button link size="small" @click="toggle(row)">{{ row.enabled ? '禁用' : '启用' }}</el-button>
+          <el-button type="danger" link size="small" @click="remove(row)">删除</el-button>
+        </template>
+      </el-table-column>
    </el-table>
  </el-card>
-  <el-dialog v-model="visible" title="添加 VPN 拨号用户" width="480px"><el-form label-width="100px"><el-form-item label="OpenVPN 隧道" required><el-select v-model="form.tunnel_id" style="width:100%"><el-option v-for="t in tunnels" :key="t.id" :value="t.id" :label="t.name" /></el-select></el-form-item><el-form-item label="用户名" required><el-input v-model="form.username" /></el-form-item><el-form-item label="显示名"><el-input v-model="form.display_name" /></el-form-item><el-form-item label="认证来源"><el-radio-group v-model="form.source"><el-radio-button value="local">本地</el-radio-button><el-radio-button value="ldap">LDAP</el-radio-button></el-radio-group></el-form-item><el-form-item v-if="form.source==='local'" label="密码" required><el-input v-model="form.password" type="password" show-password placeholder="至少 8 位" /></el-form-item><el-form-item v-else label="LDAP DN" required><el-input v-model="form.ldap_dn" placeholder="uid=user,ou=people,dc=example,dc=com" /></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item></el-form><template #footer><el-button @click="visible=false">取消</el-button><el-button type="primary" @click="create">创建</el-button></template></el-dialog>
+
+  <el-dialog v-model="visible" title="添加 VPN 拨号用户" width="480px">
+    <el-form label-width="100px">
+      <el-form-item label="拨号隧道" required>
+        <el-select v-model="form.tunnel_id" style="width:100%" filterable>
+          <el-option v-for="t in tunnels" :key="t.id" :value="t.id"
+            :label="`${t.name} (${protocolDisplay(t.protocol)})`" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="用户名" required>
+        <el-input v-model="form.username">
+          <template #append>
+            <el-button @click="openPlatformPicker">从已有用户选</el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="显示名"><el-input v-model="form.display_name" /></el-form-item>
+      <el-form-item label="认证来源">
+        <el-radio-group v-model="form.source">
+          <el-radio-button value="local">本地</el-radio-button>
+          <el-radio-button value="ldap">LDAP</el-radio-button>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item v-if="form.source === 'local'" label="密码" required>
+        <el-input v-model="form.password" type="password" show-password placeholder="至少 8 位" />
+      </el-form-item>
+      <el-form-item v-else label="LDAP DN" required>
+        <el-input v-model="form.ldap_dn" placeholder="uid=user,ou=people,dc=example,dc=com" />
+      </el-form-item>
+      <el-form-item label="邮箱"><el-input v-model="form.email" /></el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="create">创建</el-button>
+    </template>
+  </el-dialog>
+
+  <!-- 从平台用户选择对话框 -->
+  <el-dialog v-model="pickerVisible" title="选择已有平台用户" width="560px" align-center>
+    <el-table :data="platformUsers" size="small" max-height="360" v-loading="pickerLoading"
+              @row-click="pickPlatformUser">
+      <el-table-column prop="username" label="用户名" width="120" />
+      <el-table-column prop="email" label="邮箱" min-width="160" />
+      <el-table-column label="来源" width="80">
+        <template #default="{ row }">
+          <el-tag :type="row.source === 'ldap' ? 'primary' : 'info'" size="small">{{ row.source === 'ldap' ? 'LDAP' : '本地' }}</el-tag>
+        </template>
+      </el-table-column>
+      <template #empty><el-empty description="暂无平台用户" /></template>
+    </el-table>
+    <p style="text-align:center;color:var(--text-secondary);font-size:12px;margin-top:8px">点击行即选中并自动填充</p>
+  </el-dialog>
+
+  <!-- OTP 双因素认证管理 -->
+  <el-dialog v-model="otpVisible" :title="`双因素认证 — ${otpUser?.username || ''}`" width="520px">
+    <el-alert type="info" :closable="false" style="margin-bottom:12px"
+      title="基于 TOTP 的双因素认证（SHA1 / base32 / 30s / 6 位），兼容主流 Authenticator 应用。支持静态挑战二次输入与 PIN+OTP 组合模式。" />
+
+    <el-descriptions :column="1" border size="small" v-if="otpStatus">
+      <el-descriptions-item label="绑定状态">
+        <el-tag :type="otpStatus.mfa_enabled ? 'success' : 'info'" size="small">
+          {{ otpStatus.mfa_enabled ? '已绑定 TOTP' : '未绑定' }}
+        </el-tag>
+      </el-descriptions-item>
+      <el-descriptions-item label="静态 PIN">{{ otpStatus.mfa_has_pin ? '已设置' : '未设置' }}</el-descriptions-item>
+      <el-descriptions-item label="失败次数">{{ otpStatus.mfa_fail_count || 0 }}</el-descriptions-item>
+      <el-descriptions-item label="锁定">
+        <span v-if="otpStatus.mfa_locked" style="color:#f56c6c">
+          是（至 {{ otpStatus.mfa_locked_until ? new Date(otpStatus.mfa_locked_until).toLocaleString('zh-CN') : '' }}）
+        </span>
+        <span v-else>否</span>
+      </el-descriptions-item>
+      <el-descriptions-item label="最近 OTP 成功">
+        {{ otpStatus.mfa_last_used_at ? new Date(otpStatus.mfa_last_used_at).toLocaleString('zh-CN') : '—' }}
+      </el-descriptions-item>
+      <el-descriptions-item label="兼容">{{ otpStatus.compatible }}</el-descriptions-item>
+    </el-descriptions>
+
+    <div style="margin-top:16px;display:flex;flex-wrap:wrap;gap:8px">
+      <el-button v-if="!otpStatus?.mfa_enabled" type="primary" @click="setupMFA">绑定 Authenticator</el-button>
+      <el-button v-else type="danger" plain @click="disableMFA">关闭 MFA</el-button>
+      <el-button v-if="otpStatus?.mfa_enabled" @click="regenBackup">重新生成备用码</el-button>
+      <el-button v-if="otpStatus?.mfa_enabled" @click="showPinDialog">设置/清除 PIN</el-button>
+      <el-button v-if="otpStatus?.mfa_locked" type="warning" @click="unlockMFA">解锁</el-button>
+      <el-button v-if="otpStatus?.mfa_enabled" @click="exportOtpSecrets">导出密钥</el-button>
+    </div>
+
+    <div v-if="bindStep" style="margin-top:16px;text-align:center;border-top:1px solid #ebeef5;padding-top:16px">
+      <p style="font-size:13px;color:#606266">使用 Google Authenticator / Microsoft Authenticator / FreeOTP 扫描</p>
+      <canvas ref="mfaCanvas"></canvas>
+      <div v-if="mfaSecret" style="margin-top:8px;font-size:12px;color:#909399;word-break:break-all">
+        base32 密钥：{{ mfaSecret }}
+      </div>
+      <el-input v-model="mfaCode" placeholder="输入 6 位验证码确认绑定" style="margin-top:12px;max-width:280px" maxlength="8" />
+      <div style="margin-top:10px">
+        <el-button type="primary" :loading="mfaSaving" @click="enableMFA">验证并启用</el-button>
+        <el-button @click="bindStep = false">取消</el-button>
+      </div>
+    </div>
+
+    <el-alert v-if="otpStatus?.mfa_enabled" type="success" :closable="false" style="margin-top:16px"
+      title="客户端连接方式：密码框填登录密码，第二因子填 6 位动态验证码（若设置了 PIN，则填 PIN+验证码，如 1234123456）。也支持密码后直接附加 6 位码。" />
+  </el-dialog>
+
+  <el-dialog v-model="pinVisible" title="设置静态 PIN" width="400px">
+    <el-alert type="info" :closable="false" style="margin-bottom:12px"
+      title="连接时第二因子需输入 PIN + 6 位动态验证码（无空格拼接）。留空保存可清除已设置的 PIN。" />
+    <el-input v-model="pinValue" type="password" show-password placeholder="4-32 位 PIN，留空清除" />
+    <template #footer>
+      <el-button @click="pinVisible = false">取消</el-button>
+      <el-button type="primary" @click="savePin">保存</el-button>
+    </template>
+  </el-dialog>
 </template>
+
 <script setup>
-import { onMounted, ref } from 'vue'
+import { nextTick, onMounted, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
+import QRCode from 'qrcode'
 import api from '../api'
-const users=ref([]), tunnels=ref([]), visible=ref(false)
-const form=ref({tunnel_id:null,username:'',display_name:'',source:'local',password:'',ldap_dn:'',email:'',enabled:true})
-const bytes=n=>{if(!n)return '0 B';const u=['B','KB','MB','GB','TB'];let i=0;while(n>=1024&&i<4){n/=1024;i++}return `${n.toFixed(1)} ${u[i]}`}
-const tunnelName=id=>tunnels.value.find(t=>t.id===id)?.name||`#${id}`
-async function load(){const [u,t]=await Promise.all([api.get('/vpn-users'),api.get('/tunnels',{params:{protocol:'openvpn'}})]);users.value=u.data||[];tunnels.value=t.data||[]}
-function openCreate(){form.value={tunnel_id:tunnels.value[0]?.id||null,username:'',display_name:'',source:'local',password:'',ldap_dn:'',email:'',enabled:true};visible.value=true}
-async function create(){try{await api.post('/vpn-users',form.value);visible.value=false;ElMessage.success('拨号用户已创建');load()}catch(e){ElMessage.error(e.response?.data?.error||'创建失败')}}
-async function toggle(row){await api.put(`/vpn-users/${row.id}`,{enabled:!row.enabled,display_name:row.display_name,email:row.email});load()}
-async function remove(row){await ElMessageBox.confirm(`删除拨号用户 ${row.username}？`,'确认');await api.delete(`/vpn-users/${row.id}`);load()}
-async function download(row){try{const res=await fetch(`/api/vpn-users/${row.id}/config`,{headers:{Authorization:`Bearer ${localStorage.getItem('vpn_token')}`}});if(!res.ok){const data=await res.json();throw new Error(data.error)}const url=URL.createObjectURL(await res.blob());const a=document.createElement('a');a.href=url;a.download=`openvpn-${row.username}.ovpn`;a.click();URL.revokeObjectURL(url)}catch(e){ElMessage.error(e.message||'下载失败')}}
+import { protocolDisplay } from '../protocols'
+
+const users = ref([])
+const tunnels = ref([])
+const visible = ref(false)
+const form = ref({ tunnel_id: null, username: '', display_name: '', source: 'local', password: '', ldap_dn: '', email: '', enabled: true })
+
+// 平台用户选择器
+const pickerVisible = ref(false)
+const pickerLoading = ref(false)
+const platformUsers = ref([])
+
+const otpVisible = ref(false)
+const otpUser = ref(null)
+const otpStatus = ref(null)
+const bindStep = ref(false)
+const mfaCode = ref('')
+const mfaSecret = ref('')
+const mfaCanvas = ref(null)
+const mfaSaving = ref(false)
+const pinVisible = ref(false)
+const pinValue = ref('')
+
+const bytes = n => {
+  if (!n) return '0 B'
+  const u = ['B', 'KB', 'MB', 'GB', 'TB']
+  let i = 0
+  while (n >= 1024 && i < 4) { n /= 1024; i++ }
+  return `${n.toFixed(1)} ${u[i]}`
+}
+const tunnelName = id => tunnels.value.find(t => t.id === id)?.name || `#${id}`
+const tunnelProto = id => {
+  const t = tunnels.value.find(x => x.id === id)
+  return t ? protocolDisplay(t.protocol) : ''
+}
+const isOpenVPN = id => tunnels.value.find(x => x.id === id)?.protocol === 'openvpn'
+const isLocked = row => row.mfa_locked_until && new Date(row.mfa_locked_until) > new Date()
+
+async function load() {
+  const [u, all] = await Promise.all([api.get('/vpn-users'), api.get('/tunnels')])
+  users.value = u.data || []
+  tunnels.value = (all.data || []).filter(t => ['openvpn', 'l2tp', 'ikev2'].includes(t.protocol))
+}
+
+function openCreate() {
+  form.value = {
+    tunnel_id: tunnels.value[0]?.id || null,
+    username: '', display_name: '', source: 'local', password: '', ldap_dn: '', email: '', enabled: true
+  }
+  visible.value = true
+}
+
+// 从平台用户选择导入
+async function openPlatformPicker() {
+  pickerVisible.value = true
+  pickerLoading.value = true
+  try {
+    const { data } = await api.get('/users')
+    platformUsers.value = data || []
+  } catch { platformUsers.value = [] } finally { pickerLoading.value = false }
+}
+function pickPlatformUser(row) {
+  form.value.username = row.username
+  form.value.display_name = row.email ? row.email.split('@')[0] : row.username
+  form.value.email = row.email || ''
+  form.value.source = row.source === 'ldap' ? 'ldap' : 'local'
+  // LDAP 用户需填 DN（留空由后端校验提示）
+  form.value.ldap_dn = row.source === 'ldap' ? `uid=${row.username}` : ''
+  pickerVisible.value = false
+  ElMessage.success(`已填充用户「${row.username}」信息`)
+}
+
+async function create() {
+  try {
+    await api.post('/vpn-users', form.value)
+    visible.value = false
+    ElMessage.success('拨号用户已创建')
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '创建失败')
+  }
+}
+
+async function toggle(row) {
+  await api.put(`/vpn-users/${row.id}`, { enabled: !row.enabled, display_name: row.display_name, email: row.email })
+  load()
+}
+
+async function remove(row) {
+  await ElMessageBox.confirm(`删除拨号用户 ${row.username}？`, '确认')
+  await api.delete(`/vpn-users/${row.id}`)
+  load()
+}
+
+async function download(row) {
+  try {
+    const res = await fetch(`/api/vpn-users/${row.id}/config`, {
+      headers: { Authorization: `Bearer ${localStorage.getItem('vpn_token')}` }
+    })
+    if (!res.ok) {
+      const data = await res.json()
+      throw new Error(data.error)
+    }
+    const t = tunnels.value.find(x => x.id === row.tunnel_id)
+    const ext = t?.protocol === 'openvpn' ? 'ovpn' : 'txt'
+    const url = URL.createObjectURL(await res.blob())
+    const a = document.createElement('a')
+    a.href = url
+    a.download = `${t?.protocol || 'vpn'}-${row.username}.${ext}`
+    a.click()
+    URL.revokeObjectURL(url)
+  } catch (e) {
+    ElMessage.error(e.message || '下载失败')
+  }
+}
+
+async function openOTPManager(row) {
+  otpUser.value = row
+  bindStep.value = false
+  otpVisible.value = true
+  await refreshOTPStatus()
+}
+
+async function refreshOTPStatus() {
+  if (!otpUser.value) return
+  try {
+    const { data } = await api.get(`/vpn-users/${otpUser.value.id}/mfa`)
+    otpStatus.value = data
+  } catch (e) {
+    otpStatus.value = {
+      mfa_enabled: otpUser.value.mfa_enabled,
+      mfa_has_pin: otpUser.value.mfa_has_pin,
+      mfa_fail_count: otpUser.value.mfa_fail_count || 0,
+      mfa_locked: isLocked(otpUser.value),
+      mfa_locked_until: otpUser.value.mfa_locked_until,
+      mfa_last_used_at: otpUser.value.mfa_last_used_at,
+      compatible: 'TOTP 标准（兼容 Google/Microsoft Authenticator）'
+    }
+  }
+}
+
+async function setupMFA() {
+  try {
+    const { data } = await api.post(`/vpn-users/${otpUser.value.id}/mfa/setup`)
+    mfaCode.value = ''
+    mfaSecret.value = data.secret || ''
+    bindStep.value = true
+    await nextTick()
+    if (mfaCanvas.value && data.otpauth_url) {
+      QRCode.toCanvas(mfaCanvas.value, data.otpauth_url, { width: 200, margin: 1 })
+    }
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '无法开始 MFA 设置')
+  }
+}
+
+async function enableMFA() {
+  if (!mfaCode.value) return ElMessage.warning('请输入验证码')
+  mfaSaving.value = true
+  try {
+    const { data } = await api.post(`/vpn-users/${otpUser.value.id}/mfa/enable`, { code: mfaCode.value })
+    bindStep.value = false
+    const codes = (data.backup_codes || []).join(' ')
+    ElMessageBox.alert(
+      `双因素认证已启用。\n\n一次性备用码（请妥善保存，丢失手机时用于登录）：\n${codes}\n\n客户端连接方式：密码框填登录密码，第二因子填 6 位动态验证码（若设置了 PIN 则填 PIN+验证码）。`,
+      '绑定成功',
+      { type: 'success' }
+    )
+    await refreshOTPStatus()
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '验证失败')
+  } finally {
+    mfaSaving.value = false
+  }
+}
+
+async function disableMFA() {
+  await ElMessageBox.confirm(`关闭 ${otpUser.value.username} 的 MFA？`, '确认', { type: 'warning' })
+  try {
+    await api.post(`/vpn-users/${otpUser.value.id}/mfa/disable`)
+    ElMessage.success('MFA 已关闭')
+    await refreshOTPStatus()
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '操作失败')
+  }
+}
+
+async function regenBackup() {
+  try {
+    const { data } = await api.post(`/vpn-users/${otpUser.value.id}/mfa/backup-codes`)
+    ElMessageBox.alert(`新备用码（旧码失效）：\n\n${(data.backup_codes || []).join(' ')}`, '备用码', { type: 'success' })
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '生成失败')
+  }
+}
+
+function showPinDialog() {
+  pinValue.value = ''
+  pinVisible.value = true
+}
+
+async function savePin() {
+  try {
+    await api.post(`/vpn-users/${otpUser.value.id}/mfa/pin`, { pin: pinValue.value })
+    pinVisible.value = false
+    ElMessage.success(pinValue.value ? 'PIN 已设置' : 'PIN 已清除')
+    await refreshOTPStatus()
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '保存失败')
+  }
+}
+
+async function unlockMFA() {
+  try {
+    await api.post(`/vpn-users/${otpUser.value.id}/mfa/unlock`)
+    ElMessage.success('已解锁')
+    await refreshOTPStatus()
+    load()
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '解锁失败')
+  }
+}
+
+async function exportOtpSecrets() {
+  try {
+    const { data } = await api.get(`/vpn-users/${otpUser.value.id}/mfa/otp-secrets`)
+    ElMessageBox.alert(
+      `TOTP 密钥行（敏感信息，请勿泄露）：\n\n${data.line}\n\n格式说明：${data.format}`,
+      '导出密钥',
+      { type: 'warning' }
+    )
+  } catch (e) {
+    ElMessage.error(e.response?.data?.error || '导出失败')
+  }
+}
+
 onMounted(load)
 </script>