feat: implement VPN platform management and real protocol services

frontend/src/views/Layout.vue

@@ -0,0 +1,68 @@
+<template>
+  <el-container class="layout">
+    <el-aside width="220px" class="aside">
+      <div class="logo">
+        <span class="logo-icon">🔐</span>
+        <span class="logo-text">VPN 管理平台</span>
+      </div>
+      <el-menu :default-active="$route.path" router background-color="#1a2a4a" 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>
+    </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>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="password">修改密码</el-dropdown-item>
+              <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </el-header>
+      <el-main class="main">
+        <router-view />
+      </el-main>
+    </el-container>
+  </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'
+
+const router = useRouter()
+function onCommand(cmd) {
+  if (cmd === 'logout') { auth.logout(); router.push('/login') }
+  if (cmd === 'password') router.push('/settings')
+}
+</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; }
+.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);
+}
+.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; }
+</style>