dataease制作页面的原理

DataEase的可视化制作与页面存储，可以提炼为一个 “界面操作生成配置，配置驱动渲染引擎，最后通过完善的版本机制持久化” 的闭环流程。它构建在 Vue + AntV 的技术栈上，后端则使用 Spring Boot。

你将用户从左侧组件库拖拽图表和配置操作，统统抽象封装为结构化的JSON数据，然后由渲染引擎动态渲染，其前端核心正是由 CanvasCore 这一画布核心组件来管理的。

✨ 可视化画布与组件：画布是一个基于网格的布局系统，所有图表（如基于 ECharts/AntV 的图表）、文本等UI元素被封装为 Shape 组件，支持选中、拖拽和调整大小。
💾 状态管理与同步：拖拽组件时，dvMainStore 会实时捕获变化的JSON配置。例如图表的位置（x, y）、数据类型（维度、指标）等属性更新后立马同步到中心化状态库中。

制作好的仪表盘页面，其核心存储结构是JSON，但采用了精心设计的“草稿/发布”双表架构来管理其生命周期，而非简单的字符串。

存储载体：仪表盘的布局、组件样式、数据源绑定关系等核心信息，都通过 canvasSave 方法以JSON对象的形式整体存入数据库的 componentData 字段中。
版本控制：为了管理编辑和发布状态，DataEase 使用了 data_visualization_info (主表) 和 snapshot_data_visualization_info (快照表) 这一对表，并维护了一个清晰的三状态发布流程：
1. 编辑草稿 (状态 2)：用户编辑时，所有操作都写入快照表。
2. 发布生效 (状态 1)：点击发布，系统锁定当前状态。会把快照表中的整个配置JSON同步回主表，并标记为发布状态。
3. 回滚恢复：如果编辑不满意，系统可以将主表中的配置恢复到快照，实现“恢复”功能。

这种设计的好处在于：主表总能快速响应浏览请求，提供高性能的只读查询；而快照表则为编辑中的草稿提供了隔离环境，两者互不干扰。

另外，我好奇你最初想通过 DataEase 实现什么样的数据需求呢？如果方便说一下的话，我可以帮你更具体地看看它能否满足你的场景～