基于微模块化设计理念，融合 Vue3 CMS装修系统 + React/Vue 微模块引擎 + Node.js SSR渲染，
打造高性能、可扩展的企业级无代码页面搭建平台
四大独立工程协同运作，覆盖从内容创作、模块开发到服务端渲染的完整链路
基于 Vue3 + Vite + Pinia + Element Plus 构建的可视化页面搭建平台。支持传统楼层布局与无界自由布局两种装修模式，拖拽即可完成页面编排。
独立的 React/Vue 微模块开发工程。每个模块具备完整的 dataBatch + styleBatch 配置体系，Webpack 构建后输出标准化 UMD 产物，可独立部署。
Node.js 服务端集成 SSR 渲染引擎、模板引擎、水合脚本生成器、JWT 鉴权、文件管理、数据统计等能力，为整个平台提供核心服务支撑。
每个 React/Vue 模块是一个独立可运行的微单元，拥有标准化的生命周期接口和完善的配置体系
每个微模块包含 index.ts 入口、Component.tsx 组件、dataBatch 数据配置、styleBatch 样式配置、icon.svg 图标和 skeleton.xml 骨架屏。模块遵循统一的规范，支持脚手架快速创建。
所有模块暴露 createModule / render / update / destroy 四个标准生命周期方法。CMS 装修端和 C 端通过相同的接口驱动模块，实现装修即所见即所得。
通过 detectModuleEnv 工具函数自动识别运行环境（CMS装修端 / C端用户端 / Server服务端），模块可根据不同环境展示差异化行为和样式。
服务端实时渲染 React/Vue 微模块，生成完整 HTML，实现首屏零白屏的极致体验
每个 React/Vue 微模块在 VM2 安全沙箱中执行，彼底隔离模块间的全局变量污染。沙箱提供受控的 window/document/navigator 环境，确保模块代码安全可靠。
SSR 引擎支持 CJS/UMD/ESM 多种模块格式的自动探测，兼容不同的 Webpack 构建输出。
SSR 输出的 HTML 中嵌入 __HYDRATION_DATA__ 全局变量，包含完整的页面配置和模块数据。客户端加载后，水合脚本自动将静态 HTML "激活"为可交互的 React/Vue 组件。
同时支持页面进入动画（淡入、滑动、幕布展开）、设备兼容性提示、无界装修等比缩放等高级特性。
一次装修，Desktop / Tablet / Mobile 三端独立配置样式，设备检测自动适配最佳展示效果
每个模块的样式采用 { desktop: {}, tablet: {}, mobile: {} } 三端独立存储结构。装修时可在不同设备视图下分别配置字号、间距、颜色等样式属性，互不干扰。
后端 DeviceDetector 通过 UA 字符串智能判断设备类型，SSR 渲染时自动从 moduleStyle 中提取对应端的样式数据，确保首屏即为最佳适配结果。
CMS 编辑器顶部提供 PC/平板/手机 三个设备切换按钮，切换后画布尺寸变化，同时将对应端样式实时传递给已挂载的模块实例，实现精准预览。
从装修配置到页面上线的完整数据链路，每一步都清晰可控
精选业界主流技术栈，兼顾开发效率与运行性能
| 技术领域 | 技术选型 | 用途说明 | 亮点 |
|---|---|---|---|
| CMS 前端框架 | Vue3 + TypeScript | CMS 可视化装修系统 | Composition API + 类型安全 |
| 微模块框架 | React18/Vue3 + TypeScript | 独立微模块开发 | 跨框架协作，生态丰富 |
| 构建工具 | Vite / Webpack | 前端构建 | Vite 极速HMR，Webpack UMD 输出 |
| 后端框架 | Koa2 + Node.js | API 服务 + SSR 渲染 | 轻量洋葱模型，中间件灵活 |
| SSR 渲染 | JSDOM + VM2 | 服务端模块渲染 | 沙箱隔离，安全可控 |
| 状态管理 | Pinia | CMS 全局状态 | 轻量 + TypeScript 原生支持 |
| UI 组件库 | Element Plus | CMS 后台 UI | 丰富组件，企业级品质 |
| 数据库 | MySQL + mysql2 | 数据持久化 | 连接池，高并发支持 |
| 鉴权方案 | JWT + bcrypt | 用户认证与密码加密 | 无状态 Token + 安全哈希 |
| 文件处理 | zlib + busboy | GZ压缩 + 流式上传 | 模块体积压缩 60%+ |
| 设备检测 | UA 解析引擎 | 设备类型识别 | Desktop/Tablet/Mobile 精准判定 |
| 数据统计 | geoip-lite + 自研 | 访问分析 + 地理位置 | IP定位 + 多维度统计 |
六大核心设计原则，确保系统可扩展、可维护、高性能
Vue3 CMS 负责编排与交互，React/Vue 微模块负责渲染与展示，Node.js 后端负责数据与渲染服务。三大工程各司其职，通过标准化 API 协议通信。
模块的数据字段和样式属性完全由 dataBatch / styleBatch 配置描述。CMS 端根据配置自动渲染表单控件（FText、FColorPicker、FImageUpload 等），无需为每个模块编写独立的配置面板。
SSR 渲染采用 VM2 沙箱执行用户上传的模块代码，每个模块在隔离的 JSDOM 环境中渲染，彻底杜绝全局变量污染和跨模块安全风险。
模块代码工厂缓存（跨请求复用） + 文件存在性缓存（减少磁盘IO） + 模板文件缓存 + HTTP Cache-Control 响应头，多层级缓存策略显著提升渲染性能。
同一份页面配置数据，通过 moduleStyle 三端独立样式存储 + 设备检测自动适配，在 Desktop / Tablet / Mobile 上呈现最优展示效果。
标准化的模块开发规范 + 脚手架创建工具 + 构建上传一体化流程，开发者可快速创建新模块并无缝接入 CMS 平台，形成可持续增长的模块生态。