技术栈:Vue、Element-UI、G6(图可视化)、前端架构设计
项目描述
安全告警可视化分析平台,通过攻击链时序图帮助业务人员快速定位风险,提升安全研判效率。
个人职责
独立完成前端技术选型与架构设计,搭建Vue框架并完成前端全流程开发与部署。
应用Element-UI组件库构建管理后台,使用G6组件实现攻击关系时序图与攻击链流程图的可视化呈现。
项目成果
将告警数据具象化为攻击链路图,辅助人工分析。
业务人员规避安全风险的时间从3小时缩短至5分钟,效率提升36倍。
前端页面经过多轮测试,交互流畅,图表展示清晰稳定。
技术指标
• 使用G6图可视化引擎实现攻击关系时序图与攻击链流程图,支持500+节点的大图渲染,交互帧率稳定在60fps.
• 前端首屏加载时间优化至1.8秒,页面响应速度提升50%。
• 完成3轮UI迭代,通过20+种浏览器/分辨率兼容性测试。
业务价值
• 业务人员规避安全风险的时间从3小时缩短至5分钟,效率提升36倍。
• 单次应急响应平均耗时从4小时降至30分钟,显著降低安全事件影响面。
• 可视化图表帮助非技术人员(如管理层)直观理解攻击链,决策效率提升60%。
个人贡献
• 独立完成前端技术选型、框架搭建、核心组件开发与部署全流程。
• 抽象封装G6图表组件,可在新项目中1天内完成复用适配。
• 输出前端开发规范文档,保障后续维护交接顺畅。