1. CPE 管理系统（Vue2 全家桶）
项目描述：
面向运营商 / 企业网管的客户终端设备（CPE）集中管理平台，实现设备状态监控、远程配置下发、批量固件升级、告警管理等功能。
技术栈：
Vue 2 + Vue Router + Vuex + Element UI + Axios + WebSocket + ECharts
职责与成果（完整负责前端）：
独立完成前端架构：从 0 到 1 搭建项目，设计基于 vue-cli 的目录结构，配置路由懒加载、环境变量及 axios 全局拦截器。
核心模块开发：实现设备列表（支持高级筛选、自定义列）、详情仪表板、配置模板管理、固件升级任务等页面。
实时通信：集成 WebSocket 接收设备状态推送（在线/离线/告警），利用 Vuex 管理设备全局状态，ECharts 展示实时趋势图。
性能与体验优化：针对设备列表上千条数据，封装基于 vue-virtual-scroller 的虚拟滚动组件；配置模板使用 vue-json-editor；批量操作通过异步任务轮询展示进度。
权限控制：基于后端返回的权限码，动态渲染菜单及按钮级控制（自定义指令 v-permission + Vuex）。
成果：
系统上线后稳定支撑 5000+ 设备管理，批量配置下发时间由原来单台操作节省 90%，运维效率显著提升。

2. 文档管理系统（React Hooks）
项目描述：
企业内部知识库与文档协作平台，支持文档上传/下载、在线预览、多级目录、全文检索、团队共享及操作日志。
技术栈：
React 16+ + React Router v5 + Redux + Ant Design + Axios + Webpack
职责与成果（完整负责前端）：
独立搭建前端工程：使用 create-react-app 自定义配置，集成 less-modules、eslint、prettier；采用 React Router 配置动态路由权限。
文件管理模块：开发文件列表（缩略图/列表模式切换）、多级目录树组件；实现分片上传与断点续传（spark-md5 计算 hash，localStorage 记录进度），支持大文件（最大 2GB）上传。
在线预览：基于 react-file-viewer 和自定义 iframe 实现图片、PDF、txt 预览，Office 文件接入 kkFileView 服务。
搜索与权限：全文搜索（调用后端接口高亮展示关键字），按角色（创建者/部门/只读）控制文档访问与操作权限，使用 Redux 管理用户会话和文档状态。
性能优化：路由懒加载 + React.memo 避免不必要渲染；使用 webpack-bundle-analyzer 分析并拆包，首屏加载减少约 30%。