该项目是一个面向 Hadoop 集群故障诊断与运维管理场景的 Web 管理系统,目标是为集群管理、节点监控、日志查看和智能诊断提供统一的前端操作界面。
我独立负责项目全部前端开发,围绕登录注册、集群列表、节点监控、日志查看、用户管理、个人中心、AI 诊断等模块进行设计与实现。用户可在系统内完成集群与节点信息查看、日志检索、资源监控、用户管理以及智能诊断交互等操作。
项目采用前后端分离方式,前端负责页面展示、交互逻辑和状态切换,后端提供认证鉴权、集群管理、日志查询和 AI 诊断接口支持。其中 AI 诊断模块支持日志预览、节点选择、上下文透传与流式输出展示,提升了故障分析场景下的交互体验。项目同时兼顾 PC 端与移动端浏览体验,对主要页面进行了较完整的响应式适配,保证不同尺寸设备下界面稳定可用。
项目由我独立完成前端部分,前端基于 Vue3、TypeScript、Vite、Element Plus、Pinia、Vue Router 搭建整体管理端框架,并结合 ECharts 实现 CPU、内存等监控数据的图表展示。整体完成了登录注册、集群列表、节点监控、日志查看、用户管理、个人中心等主要页面开发。
在实现过程中,我重点处理了认证鉴权、路由权限控制、前后端接口联调、图表展示、状态管理和页面交互等问题,使系统具备较完整的管理端主流程。其中 AI 诊断页面实现了日志预览、节点选择、对话交互、历史记录、上下文透传和流式输出展示,是项目中最具代表性的功能模块之一。
此外,我对主要页面做了较完整的移动端适配,针对不同屏幕尺寸持续优化布局、表格、卡片和交互细节,使项目在常见移动端浏览场景下也能保持稳定展示和正常使用。项目难点主要在于业务模块较多、联调链路较长,因此我在页面拆分、接口组织和状态流转上尽量保持清晰,优先保证核心功能可用,再逐步收口细节表现与交互体验。