网络智能运维中台 | NetOps AI Hub —— 网络工程师的 AI 智能运维中台
先和大家打个招呼吧 
-
大家好，我是 Kamfai，一名在通信运营商网络架构师和网络安全工程师。
做网络的同行大多有过同款经历：凌晨两点被告警电话叫醒，对着满屏日志排查，明明对问题方向有判断，却总要卡在细碎的命令比对、配置校验里耗上几小时 —— 这种差一口气的无力感，我太熟悉了。 -
怎么用 TRAE 把 Demo 做出来的： 这个项目最初只是脑子里的一个念头：能不能把平时最常用的厂商命令、排查思路、配置模板，统统塞进一个页面里？
但我不是前端开发，从零写 CSS、调 ECharts，想想就头大。TRAE 最让我惊喜的是：我可以用网工的语言和它对话。
第一轮开发时，我跟它说："我要一个左侧菜单、右侧内容的运维平台，菜单分四组：仪表板、设备管理、告警中心、安全合规……"它直接搭出了完整框架。那一刻我才意识到——原来不需要背 flexbox 语法、查 Tailwind 文档，像跟同事交代需求一样就行。 -
最难忘的一关：拓扑图死活不显示，反复跟 TRAE 说"拓扑图没数据"，它修了三次都没修好。
后来我用 F12 打开控制台，发现是 ECharts 5.4.3 的symbolSize回调参数格式变了，导致图表初始化 crash。把报错丢给 TRAE，它终于定位根因：数据里的size要改成value，回调里用typeof d==='number'?d:30。
修好的那一刻，四个图表同时亮起来——比我调通一条跨省骨干链路还爽。
还有 CSS 伪元素::after盖住图表、页面刷新闪乱码、about 面板点不出来……每个坑我都以为"前端搞不定了"，结果 TRAE 总能找到办法。做这个作品，我越来越相信一件事，AI 不是来替代人，它是接走所有重复、琐碎、耗时间的机械工作，让我们把精力放回真正需要经验判断和架构思考的地方。
评委快速体验路径（3 分钟看懂完整运维闭环）
在线体验：网络智能运维中台 | NetOps AI Hub v4.0 初赛版
登录账号：Admin7 / fsZHZX666
Step 1. 打开链接 → 输入账号登录 → 进入「仪表板」查看近 7 天告警趋势、设备健康度、SLA 达标率
Step 2. 左侧菜单进入「告警中心」-> 查看告警列表 → 体验 AI 降噪聚合（一键 ACK）
Step 3. 左侧菜单进入「命令对照」-> 选择不同厂商 → 对比华为/H3C/思科/锐捷/中兴的命令差异
Step 4. 左侧菜单进入「故障诊断」-> 点击一个故障案例 → 查看 5 层 OSI 逐层排查步骤 + AI 分析
Step 5. 左侧菜单进入「配置生成」-> 选择场景（如 ACL/NAT/VLAN）-> 一键生成 5 厂商配置
Step 6. 左侧菜单进入「指挥大屏」-> 点击全屏按钮 → 查看网络拓扑态势 + 体验威胁一键封禁 + 值班一键呼叫
Step 7. 左侧菜单进入「设备管理」-> 点击 H3C UIS 或 K8S 集群卡片 → 展开 6 节点集群视图
完整运维闭环：监控发现 → 告警降噪 → 命令对照 → 故障定位 → 配置生成 → 指挥调度 → 设备管理
一. Demo 简介
-
是什么：「网络智能运维中台 | NetOps AI Hub」是一款面向网络工程师的 AI 智能运维中台 Web 应用，从TRAE上开发的自研开源 Skill（GitHub - Zgdfsgd/network-engineer: 网工老司机 - 网络工程师全流程智能辅助 | Network Engineer Smart Assistant | TRAE SOLO Skill · GitHub ）产品化为完整的 Web 工作台；
-
面向谁：网络工程师、网络架构师、安全运维工程师、通信运营商技术人员，以及正在备考 CCNA/HCIP/H3CNE 等认证的计算机网络专业学生。
主要功能（21 个全交互模块）；
- 主要功能：
监控中心
- 运维仪表板 — 近7天告警趋势、设备健康度、SLA 达标率、实时告警 TOP5
- 设备管理 — 20+ 种设备类型台账（含 H3C UIS 超融合 6 节点集群、K8S 6 节点集群）、在线状态、集群展开视图
- 告警中心 — 按级别/状态/时间筛选，AI 降噪聚合（今日降噪 47 条，降噪率 78%），支持一键 ACK
- IP 地址管理 — 4 张网络（管理网/业务核心网/服务器接入网/DMZ 网）IP 分配详情 + IP 规划助手
- 指挥调度大屏 — 6 大 KPI 环形指标 + 网络拓扑态势（视觉中心）+ 告警趋势 + 流量热力图 + 安全威胁实时排行（支持一键封禁联动）+ 实时事件日志滚动播报 + 运维值班信息（一键呼叫），支持全屏模式
运维工具
- 拓扑可视化 — 力导向网络拓扑图，节点状态指示（
正常 
告警 
离线） - 五厂商命令对照 — 华为 VRP / H3C Comware / Cisco IOS / 锐捷 RGOS / 中兴 ZXR10，20 条核心命令对照翻译
- 故障诊断 — 38 个高频故障案例，5 层 OSI 模型逐层定位法
- 配置生成 + 多厂商转换器 — ACL / NAT / VLAN / 路由策略 / QoS 模板化生成
- 架构设计 — 10 种架构（三层/大二层/Spine-Leaf/运营商骨干/数据中心/企业园区/等保安全分区/SD-WAN/云网融合/工业控制网）可视化 + Mermaid 拓扑图
智能运维
- 等保合规检查 — 等级保护 2.0 自查清单，一键生成合规评分
- 健康体检评分 — 设备 CPU/内存/温度/接口状态模拟巡检
- 自动化脚本生成 — Python/Ansible/Netconf 运维脚本模板库
- 数字孪生仿真 — 设备参数 3D 可视化展示
- 智能巡检 — 终端扫描动画（逐行输出 12 条日志）+ 模拟多厂商设备巡检，生成 ASCII 格式巡检报告
扩展功能
- 网络工具集 — 16 个工具（子网计算/CIDR汇总/密码生成/端口扫描/带宽换算/延时测试/Base64/掩码查询/SSL证书/DNS查询/Whois/路由追踪/MAC查询/BGP查询/弱密码检测），全部可交互计算
- 新兴技术运维 — K8S Deployment/Service/Ingress、Docker Compose/Network、Terraform VPC、Ansible Playbook 配置生成
- 应用场景 — 企业网/数据中心/云网络三大场景运维实践
- 能力进化树 — 从 Lv.1 网络小白到 Lv.MAX 架构专家的完整技能成长路径
系统管理
- 登录认证 — 用户名/密码登录，LocalStorage 状态持久化
- 系统设置 — 主题切换 / 默认厂商 / 缓存清理 / 系统信息
产品截图
- 截图1：仪表板总览（展示近7天告警趋势 + 设备健康度 + SLA 达标率）
- 截图2：故障诊断交互界面（展示 38 个案例库 + 5 层排查法）
- 截图3：指挥大屏（展示 4 大 KPI + 拓扑态势 ）
- 截图4：配置生成器&多厂商配置转换
- 截图5：IP地址管理可视化
二. Demo 创作思路
- 灵感来源：作为一名通信运营商网络架构师，我日常工作中最痛苦的三个时刻是：
- 排查故障时翻遍厂商文档找命令对照 — 华为/H3C/思科/锐捷/中兴五套命令体系切换成本高
- 遇到诡异网络问题时缺乏系统化排查思路 — 80% 的故障处理时间消耗在信息收集和根因判断上
- 手工编写重复的配置脚本 — ACL/NAT/VLAN 等标准化配置仍需手工逐条编写
这些痛点长期存在，但市面上的工具要么太零散、要么太重，没有一个轻量、全面、AI 驱动的 Web 化解决方案；
- 想解决的问题：
- 让网络工程师用一个页面完成 90% 的日常运维工作
- 把"靠经验排查"变成"按步骤诊断"，降低故障处理门槛
- 用 AI 生成配置脚本，把数小时的手工工作压缩到几分钟
- 覆盖云网融合趋势（K8S、SD-WAN、SASE），同时支持传统数通和新兴云原生运维；
- 为什么做这个方向：网络运维是一个"经验高度依赖"的领域，新手工程师往往需要 3-5 年才能积累足够的故障排查直觉。我希望用 AI + 结构化的方式，把这个学习曲线压缩到 3-5 个月。同时，传统网络运维正在向云网融合演进，所以这个平台同时覆盖了传统数通和新兴云原生运维场景。
三. Demo 体验地址
下载体验：
网络智能运维中台(NetOps AI Hub)_初赛版_v3.html (563.2 KB)
登录信息：用户名 Admin7 / 密码 fsZHZX666（体验用）
四. TRAE 实践过程
- 开发工具：TRAE Work
开发流程拆解
创意构思阶段
- 用 TRAE Work 梳理产品架构和功能模块清单
- 确定"21 个菜单、4 大分组"的产品框架
- 参考两个真实网络运维平台优化 UI 布局方向
核心功能开发（6 轮迭代）
| 轮次 | 开发内容 | 关键产出 |
|---|---|---|
| 第1轮 | 基础框架 | 侧栏菜单 + 仪表板 + 设备管理 + 告警中心 |
| 第2轮 | 核心工具 | 五厂商命令对照 + 故障诊断（38案例）+ 配置生成 |
| 第3轮 | 可视化模块 | 拓扑可视化（ECharts 力导向图）+ 架构设计 + 数字孪生 |
| 第4轮 | 增强功能 | 指挥大屏（4图表+滚动日志）+ 网络工具集（8计算器）+ 登录认证 |
| 第5轮 | 扩展模块 | 智能巡检 + 系统设置 + 新兴技术运维（K8S/Docker/Terraform/Ansible） |
| 第6轮 | 深度优化 | 超融合/K8S 集群视图 + 大屏布局重构 + 案例扩充 |
迭代优化阶段
- 参考数个网络运维平台优化 UI 布局
- 将顶部横菜单改为左侧竖向菜单，更符合真实运维平台习惯
- 优化指挥大屏视觉效果（KPI 环形进度条、扫描线动画、发光边框）
关键步骤截图
- 截图1：生成配置1（与TRAE AI 协作开发的过程）
- 截图2：生成配置2（与TRAE AI 协作开发的过程）
- 截图3：预览效果调优（开发UI界面效果）
Session ID（证明 TRAE 开发）
- Session 1:
573305866158296:8970987d1a589d1911a0967697c7e640_6a34b75468dbb3d6e0b58e86.6a4561dbb100d3c5b22eb6ab.6a4561dbb100d3c5b22eb6a9:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 02:52:11)（构建基础框架） - Session 2: 、、
573305866158296:eb30a464bf5b1bdb2035c86299ac5dd5_6a34b75468dbb3d6e0b58e86.6a4563edb100d3c5b22eb791.6a4563edb100d3c5b22eb78f:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 03:01:01)（开发核心工具模块） - Session 3:
573305866158296:01cc9e10fa35366989bf208865d56048_6a34b75468dbb3d6e0b58e86.6a45ce0988d05a7f0477525e.6a45ce0988d05a7f0477525c:TRAE Work CN.0.1.25.no_sid.no_ppe.T(2026/7/2 10:33:45)（优化 UI 和更新内容描述）
踩坑与解决方案
| 坑点 | 现象 | 解决方案 |
|---|---|---|
| ECharts symbolSize 回调格式变化 | 拓扑图初始化时 crash，导致后续所有图表无法渲染 | 通过浏览器控制台定位错误，改用 typeof d==='number'?d:30 模式，并将数据属性从 size 改为 value |
| CSS 伪元素 z-index 覆盖 | 大屏面板 ::after 伪元素盖住了图表内容，导致图表不可见 |
设置 z-index:0 给伪元素，z-index:1 给子内容，恢复层级关系 |
| 页面刷新闪烁 | 外部 CDN 资源加载延迟，导致页面先显示未渲染的混乱内容 | 添加 #app-loading 加载遮罩，在 window.onload 中移除并直接调用 showPage('dashboard') |
| about 面板无法显示 | panel-about 同时有 hidden 和 about-content 类，后者 display:none 覆盖了显示逻辑 |
移除 about-content 类，统一使用 hidden 类控制显隐 |
五、技术实现
技术栈
- 前端框架：原生 HTML5 + Tailwind CSS + Vanilla JavaScript（零外部框架依赖）
- 图表引擎：ECharts 5.4.3（折线图 / 饼图 / 仪表盘 / 力导向拓扑图 / 迷你图）
- 图标体系：Font Awesome 6.4.0
- 数据存储：LocalStorage（登录状态 / 系统设置 / 缓存管理）
- AI 集成：基于 TRAE 内置 AI 对话能力，提供故障诊断建议与配置优化
- 响应式设计：适配 1920×1080 大屏至 1366×768 笔记本
关键技术创新点
- ECharts 力导向拓扑图 + 节点状态动态着色 — 根据设备状态实时显示 三色指示
- CSS conic-gradient 实现 KPI 环形进度条 — 零 JS 依赖，纯 CSS 实现 4 个大屏指标环
- CSS @keyframes 实现事件日志滚动播报 — 16 条真实运维事件，20 秒线性无限滚动，hover 暂停
- 前端 IP 子网计算 — 使用位运算实现子网掩码、广播地址、可用主机数实时计算
- 7 种云原生配置模板一键生成 — K8S/Docker/Terraform/Ansible 配置即填即出
- 设备集群视图 — H3C UIS 超融合 6 节点 + K8S 6 节点集群卡片，支持展开/收起节点网格
- 威胁排行一键封禁联动 — 点击封禁 → 加载动画 → 已封禁状态 + 统计更新
- 值班工程师一键呼叫 — 点击呼叫 → 脉冲动画 → 已响应 + 回显消息（响应时间）
六、使用指南
快速体验
- 下载附件中的 HTML 文件，双击在浏览器中打开
- 登录页面输入：用户名
Admin7/ 密码fsZHZX666 - 登录后默认进入「仪表板」首页
- 点击左侧菜单切换不同功能模块
核心功能演示路径
- 命令对照：菜单「命令对照」→ 选择厂商 → 查看命令差异
- 故障诊断：菜单「故障诊断」→ 选择故障类型 → 查看排查步骤
- 配置生成：菜单「配置生成」或「新兴技术运维」→ 填写参数 → 一键生成配置
- 指挥大屏：菜单「指挥大屏」→ 点击右上角全屏按钮 → 沉浸式监控体验
- 网络工具：菜单「网络工具集」→ 选择工具 → 输入参数 → 实时计算结果
- 设备集群：菜单「设备管理」-> 点击 H3C UIS 或 K8S 集群卡片 → 展开查看 6 节点状态
- IP 规划：菜单「IP 地址管理」-> 输入所需 IP 数量 → 获取规划推荐
快捷键
- F11：指挥大屏全屏模式
- ESC：退出全屏
七、作者信息
- 作者：Kamfai
- 职业：通信运营商网络架构师
- 本产品为 TRAE AI 创意挑战赛初赛作品，所有功能基于纯前端技术实现，数据为模拟演示数据。产品持续迭代中，欢迎反馈建议！
