某运营商统一网络运维门户中心(PC+H5)产品系统

统一网络运维门户中心是一套面向集团全国网络运维人员的企业级统一工作平台，包含PC端管理门户和H5移动端应用（含AI灵犀智能助手），旨在实现全国31省公司及总部运维业务的集中化、智能化管理。

系统集成动环监控、传输工作台、应急管理、数据共享平台等30+异构业务系统，支持多地市、多专业的协同运维作业。

该系统采用前后端分离架构，PC端基于Vue2.x+Element UI技术栈，提供可拖拽式首页配置、ECharts全国数据大屏、RBAC权限管理、多系统iframe沙箱集成等功能；H5端基于Vue+Vant UI框架，核心为AI灵犀智能助手模块，支持多智能体协同对话、流式响应、语音识别、智能推荐等AI交互能力。

系统核心功能包括：
1. 可视化首页配置：基于vue-grid-layout实现拖拽式模块布局，支持用户自定义首页组件排列、尺寸调整和iframe动态加载
2. 全国数据运营大屏：基于ECharts+GeoJSON实现31省市两级地图钻取，涵盖电费、塔费、租赁等多维度统计分析和趋势预测
3. AI灵犀智能助手（H5核心）：多智能体协同架构，支持智能体广场、动态添加切换、3智能体并行推理、流式对话、会话管理
4. 语音交互能力：集成JSBridge原生语音识别API，实现长按录音、手势控制（上滑发送/下滑取消）、实时转文字
5. 智能推荐问答：基于用户行为与热度算法，动态推荐高频问题，支持问题刷新、点击统计和用户画像分析
6. 权限精细化控制：实现基于角色的访问控制(RBAC)，支持路由级、按钮级权限管理，结合Vuex实现权限状态持久化
7. 多系统集成能力：通过iframe沙箱隔离集成30+异构系统，支持单点登录(SSO)、Token自动刷新和跨域通信

技术亮点：
- 采用Webpack SplitChunks代码分割策略，Element UI单独打包，配置contenthash持久化缓存，优化长期缓存命中率
- H5端实现虚拟滚动+IntersectionObserver懒加载，解决聊天记录长列表渲染性能问题
- 封装流式响应组件，支持打字机效果、中断控制、思考态动画及sessionStorage会话持久化
- 使用Vuex+localStorage实现状态管理与持久化，封装Axios拦截器统一处理Token刷新、错误重试和Loading状态
- 集成Cache Loader+UglifyJS+Compression Plugin，实现H5端构建时长优化，主包体积压缩
- 采用Docker容器化部署+Nginx反向代理，配置Gzip压缩、静态资源缓存策略及upstream负载均衡
- 集成Husky+Lint-Staged+ESLint，实现Git提交前自动代码检查与修复，保障团队代码规范统一
- H5端集成Matomo数据埋点、VConsole移动端调试工具，提升用户行为分析与问题排查效率

1. 独立负责PC端可拖拽首页架构设计与实现，支持30+系统iframe沙箱集成，提升用户首屏配置灵活度
2. 主导H5端AI灵犀智能助手全栈开发，实现多智能体协同、流式对话、语音识别等核心能力，缩短智能体切换响应
3. 开发ECharts全国数据大屏，实现31省市两级地图钻取，支持多维度统计图表联动与动态主题切换
4. 优化H5聊天长列表性能，采用虚拟滚动+分页加载+锚点定位
5. 封装高复用业务组件库（FormTable、富文本编辑器、文件上传等），实现RBAC权限体系（路由守卫+自定义指令）
6. 优化Webpack构建链路，实现H5端构建时长缩短，主包体积缩小
7. 集成JSBridge原生能力，封装语音识别、文件上传、拍照扫码等API，实现Token自动刷新与单点登录机制
8. 搭建Jest单元测试体系，覆盖utils/components核心模块，配置CI自动化测试流程，保障代码质量与迭代稳定性
9. 配置Docker+Nginx容器化部署方案，实现多环境配置管理（test/pre/prod）及自动化发布流程，支撑系统稳定上线