中软国际（驻场中控科技） · 2025

化工园区安全智能化管控平台

面向化工园区的安全生产管控平台：重大危险源监测、风险预警、应急管控与数据可视化，适配 PC / 移动端多终端，服务园区 61 家企业安全生产。

React Vite 微前端 micro-app pnpm + Turborepo Echarts 多终端

61家

服务园区企业

13%

打包体积缩减

30%

加载速度提升

100%

缺陷修复率

项目概述

平台面向化工园区安全生产场景，围绕重大危险源监测、风险预警、应急管控与生产数据可视化分析构建核心业务模块，采用 pnpm + Turborepo 单体仓库管理与 Vite 构建，并以 micro-app 微前端架构整合多个子应用，同时适配 PC 与移动端，支撑园区日常安全生产管控。

技术栈

React Vite pnpm + Turborepo micro-app 微前端 Echarts 可视化 TypeScript 移动端 H5 PDF.js

我的职责与核心成果

🛡️

核心业务模块

负责风险预警、应急统计、作业管控等核心功能开发，保障平台稳定支撑园区日常安全生产。

📦

通用组件封装

沉淀通用业务组件，提升团队整体开发效率约 40%。

⚡

工程化优化

优化 Webpack 打包策略，通过代码分割、资源压缩、缓存优化，打包体积减少 13%，加载速度提升 30%。

🧩

技术选型与培训

参与团队技术选型与内部培训工作，推动工程规范落地。

技术攻坚 · 真实踩坑

这些是从 0 到 1 落地过程中真实遇到的核心难题，也是最能体现工程能力的部分。

移动端

横屏字体适配

移动端横屏场景下字体与布局错乱。

解决方案：针对横屏视口单独做 rem / vw 适配与断点处理，保证移动端横竖屏一致可读。

PDF

分页预览异常

PDF 预览分页错位、加载缓慢。

解决方案：引入 PDF.js 做分页渲染与懒加载，按页加载避免一次性解码大文件，解决分页与性能问题。

交互

菜单拖拽处理

菜单可拖拽配置时逻辑冲突、状态不同步。

解决方案：基于拖拽事件封装统一的状态管理，校验落点边界，确保配置可持久化、可回退。

架构

微前端整合

多子应用整合时样式/状态隔离与通信复杂。

解决方案：基于 micro-app 规范子应用边界，统一通信与生命周期，降低耦合与运行时冲突。

项目成果

独立负责核心业务模块开发，落地风险预警、应急统计、作业管控等关键能力。
解决移动端横屏适配、PDF 分页预览、菜单拖拽等技术难点，封装通用组件提升团队效率 40%。
优化打包策略，打包体积减少 13%、页面加载提速 30%，保障平台稳定支撑园区安全生产管控。
平台成功支撑 61 个重大危险源监测、30 家企业安全生产全流程管控，落地实用业务价值。

查看更多作品

持续打磨前端体验 · 让复杂业务变得简单流畅

浏览全部作品了解我的能力