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参数)
This commit is contained in:
1 parent
58c036c34c
commit
1e2f8ef24f
43 files changed
+6783
-460
No files matched your search
@@ -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; }
|
||||
}
|
||||
Reference in new issue
Block a user