CanvasCore的核心能力

它并非一个简单的UI组件，而是一个集交互、状态、布局和管理于一体的核心模块。你可以将它理解为整个仪表盘制作系统的“心脏与骨架”，它通过两大核心系统来驱动整个仪表盘应用，为上层功能提供了坚实的基础：

⚙️ CanvasCore 的两大核心系统

1. 🤝 组件交互系统 (Shape 组件)

   • 职责：为画布上的每一个独立元素（如图表、文本框、图片）赋予标准化的交互能力。
   • 关键能力：通过 Shape 组件包裹所有元素，统一提供拖拽移动、四角拖拽缩放、点击选中和高亮、右键弹出上下文菜单和工具栏。

2. 🏗️ 布局与定位系统 (基于网格的矩阵引擎)

   • 职责：实现元素在画布上的精准定位和响应式布局。
   • 关键能力：预先定义画布的网格大小（如 pcMatrixCount, mobileMatrixCount），所有组件被吸附在网格上移动和缩放，确保了布局的一致性。同时，系统会为PC端和移动端维护两套独立的坐标、尺寸数据（如 mx, my, mSizeX, mSizeY），实现“一次配置，多端适配”。

在这两大系统的支撑下，CanvasCore 管理着仪表盘的生命周期，其主要流程如下：

• 🔌 注册与渲染：通过 ComponentList.vue 初始化可用的组件，由 DePreview.vue 负责最终的预览渲染。
• 🎮 状态中心 (dvMainStore)：使用集中式存储管理 CanvasCore 的核心数据。它负责存储当前选中的组件 (curComponent)、画布上的所有组件列表 (componentData)、当前编辑模式等，确保所有组件状态一致。
• 🔗 精细配置与联动：支持配置组件的尺寸、边距及不同端样式；提供点击、悬停等事件响应，并可配置跨组件的联动跳转逻辑，实现复杂的交互分析。
• 💾 数据同步与持久化：任何组件的新增、删除、修改，都会通过 dvMainStore 同步更新 canvasUtils 的状态，并最终调用 canvasSave 等函数将整个画布配置（JSON 格式）发送给后端保存。

如果你对其中某个机制（比如状态管理的细节或联动逻辑的实现）感兴趣，可以随时告诉我，我可以为你做更深入的解析。