本次完成了告警逻辑的初步实现和对个人项目的中期总结。告警系统我希望在日志系统的基础上对于error和warning的信息有更加明显的提示和更便捷的处理方式所以我又实现了告警系统可以辅助运维人员快速发现、解决问题。特点功能日志告警列表内容时间、来源、原始消息主机、告警标题、严重级别、状态筛选维度级别(INFO/WARN/ERROR)、关键字级别(致命/警告)、状态(触发/已确认/恢复)操作搜索、查看详情跳转日志、跳转智能体通知不主动通知主动通知视觉强调普通表格红色高亮未处理标记维度日志告警本质系统和应用运行时产生的全部事件记录基于规则或阈值对日志/指标分析后产生的异常信号数据量海量每天百万甚至亿级少量每天数十条生成机制自动生成操作/应用每步操作都可产生触发式生成指标超过阈值、关键字匹配等紧急程度绝大部分是中性信息每条都有严重级别致命/警告需关注用途问题回溯审计调查趋势分析即时响应通知运维人员立即介入生命周期写入后仅被查询不被修改有状态流转触发至确认至恢复/关闭跳转功能通过从告警系统的跳转有问题的设备可以直接在日志中被定位或者问题一键交给AI智能体处理。关键代码状态流转与操作按钮el-table-column label操作 width280 template #default{ row } el-button typeprimary sizesmall link click.stopgoToLogs(row) 查看日志/el-button el-button typewarning sizesmall link click.stopaskAI(row) 询问AI/el-button el-button v-ifrow.status ! resolved typesuccess sizesmall link click.stopmarkResolved(row) ✔ 已恢复/el-button /template /el-table-column脚本中// 跳转日志页并带入主机名作为搜索关键词 function goToLogs(row) { router.push({ path: /logs, query: { search: row.host } }) } // 跳转智能体带入告警内容作为预设问题 function askAI(row) { const question encodeURIComponent(告警${row.host} 发生错误 ${row.message}请分析原因并给出处理建议) router.push({ path: /chat, query: { ask: question } }) } // 标记已恢复 async function markResolved(row) { ElMessage.success(告警已恢复${row.host} - ${row.message}) row.status resolved // 真实场景应调用 API: await request.post(/alerts/${row.id}/resolve) }状态标签与过滤const statusFilter ref() const searchText ref() // 前端过滤 const filteredAlerts computed(() { let result alertData.value if (statusFilter.value) result result.filter(a a.status statusFilter.value) if (searchText.value.trim()) { const kw searchText.value.trim().toLowerCase() result result.filter(a a.host.toLowerCase().includes(kw) || a.message.toLowerCase().includes(kw)) } return result }) // 状态标签映射 function statusTagType(status) { return status firing ? danger : status acknowledged ? warning : success } function statusLabel(status) { return status firing ? 触发中 : status acknowledged ? 已确认 : 已恢复 }通过computed实现按状态、关键字过滤无需后端请求即可实时筛选。标签颜色直观区分告警严重性触发中为红色危险标签已确认为橙色已恢复为绿色让运维人员一眼判断当前整体状况。日志页Logs.vue在挂载时解析 queryonMounted(() { if (route.query.search) { searchText.value route.query.search } fetchLogs() })智能体Chat.vue在挂载时解析并自动发送onMounted(() { if (route.query.ask) { inputText.value decodeURIComponent(route.query.ask) sendMessage() } })效果展示从操作栏可以直接跳转日志或询问AI。主机直接进入搜索框进行搜索显示所有关于它的记录。跳转智能体界面后直接将问题发出无需手动输入待真实智能体接入后就能得到完整答复。中期工作总结一、项目背景与目标本次项目是为基于Python实现的运维监控后端构建一套前端可视化平台。运维工作长期依赖命令行与分散的监控工具亟需一个集中式的可视化界面来降低信息获取成本。因此系统围绕四个核心场景展开用仪表盘直观展示主机状态与关键指标用日志页面统一管理运行记录用告警中心对异常进行响应与闭环处理用智能体提供自然语言交互的运维辅助能力。同时在入口层加入了用户认证与权限分级保证不同级别的运维人员拥有匹配的操作范围并以深色主题适配长时间盯屏的工作环境。二、技术选型与架构理解在框架层选择了Vue 3配合Composition API看重的是其轻量化、响应式能力和逻辑复用的便利性。构建工具选用Vite而非Webpack主要是因为它极快的冷启动和热更新能显著缩短开发反馈周期。UI组件库选择了Element Plus它在企业级中后台中的成熟度较高并且原生支持暗色主题这一点对运维场景很有价值。图表方面使用ECharts配合vue-echarts能够覆盖折线图、仪表盘等运维常见图表类型。状态管理用Pinia替代传统的Vuex组合式语法更贴近Vue 3的写法上手成本低。路由管理使用Vue Router 4利用其路由守卫机制实现权限控制。HTTP通讯层选用Axios通过拦截器统一处理认证信息和错误提示。整个架构遵循“展示—逻辑—数据”三层分离的思路。Vue组件负责界面渲染Pinia管理全局状态Axios封装统一的API请求层通过Vite开发服务器的代理机制解决跨域问题生产环境则通过Nginx反向代理或后端CORS配置完成对接。这种分层让每一层职责清晰更换后端或扩展功能都更加顺畅。三、功能模块实现与业务理解在用户认证与权限分级方面系统实现了完整的登录流程。登录页作为独立页面不嵌套侧边栏用户通过账号密码进入系统。认证信息保存在Pinia的store中并同步到localStorage保证刷新后无需重新登录。路由守卫通过外部传入pinia实例的方式解决了初始化时序问题在每次跳转前检查登录状态和角色权限。权限分为两级初级用户可访问仪表盘和智能体高级用户额外拥有日志访问权。当权限不足时守卫会直接弹出提示并阻止跳转而非简单隐藏菜单。日志页面以表格形式展示系统运行记录支持按级别筛选和关键字搜索。通过前端computed属性进行本地过滤减少不必要的后端请求保持交互流畅。日志不仅是历史记录查询工具更是告警的数据来源这一关联在后面联动中体现出来。告警中心是我对运维业务流程理解最深入的模块。告警数据从日志中的ERROR级别自动派生每条告警携带关联的主机、来源和时间信息。告警状态遵循“触发中——已确认——已恢复”的生命周期完整映射了运维从发现到解决的事件流。操作列提供了三个按钮查看日志可跳转到日志页面并自动代入该主机作为搜索条件询问AI可跳转到智能体页面并自动发送包含告警内容的预设问题已恢复按钮则将状态标记为resolved。这种设计让日志、告警、智能体三者形成闭环不再各自孤立。运维智能体是一个对话式辅助入口界面上区分了用户消息和助手消息支持模拟响应用于功能验证。回复内容根据关键词匹配覆盖CPU、内存、告警等常见运维查询。技术上预留了挂载真实AI接口的位置从告警页传入的预设问题也能被自动发送实现了跨页面联动。在视觉层面考虑到运维人员可能长时间盯屏系统整体采用深色主题。全局引入Element Plus的暗色CSS变量自定义区域使用统一的深色色号体系包括主背景、卡片背景、边框和文字等级。ECharts图表也配置了对应的暗色坐标轴和分割线颜色保证整体风格一致。四、对项目的进一步思考前端已经预留了完整的API请求层后续替换为真实后端接口即可投入使用。登录认证建议采用JWT方式token中编码用户角色后端在关键接口上进行二次校验不能仅依赖前端守卫拦截。开发环境通过Vite代理解决跨域生产环境应考虑Nginx反向代理或后端统一配置CORS。后续可以扩展的方向包括通过WebSocket实现监控数据的实时推送替代当前的轮询或手动刷新增加主机详情页面支持从列表点击跳转查看单台主机的完整指标曲线提供数据导出功能便于将日志和告警导出为文件进行分析在告警通知方面引入浏览器的系统通知甚至声音提示提升紧急情况的响应速度。五、总结通过本项目从技术选型、架构设计到核心功能实现完整构建了一个可扩展的运维监控前端平台。在权限管理、告警与日志的联动设计上注重与实际运维工作流契合让功能模块之间形成闭环而非独立存在。当前系统已经具备独立演示和对接真实后端的能力为后续迭代提供了稳定的前端基础。