设计面板
CanvasDesign 是画布设计面板，将画布容器、路由栏、面包屑组合为完整的设计区域，并提供 MCP 辅助操作能力。
设计器整体布局
布局说明
| 区域 | 组件 | 说明 |
|---|---|---|
| 顶部工具栏 | design-toolbars | 全局操作：保存、预览、设备切换、主题等 |
| 左侧导航栏 | #nav-panel | 图标导航，点击切换左侧插件面板内容 |
| 左侧插件面板 | #left-panel | 物料面板、组件树、页面管理等插件内容区 |
| 中间画布区域 | CanvasLayout | 包含路由栏 + iframe 画布 + 面包屑 |
| 右侧设置面板 | #right-panel | 属性编辑、样式配置、事件绑定、数据源等插件内容区 |
| 右侧导航栏 | #nav-panel | 图标导航，点击切换右侧设置面板内容 |
面板固定/浮动机制
左右两侧的插件面板支持两种显示模式：
- 浮动模式（默认）：面板以
position: absolute浮动在画布上方，不占用布局空间，点击画布时自动收起 - 固定模式：面板切换为
position: relative，真正占据布局空间，画布区域相应缩小
类比：就像推拉门——打开时占用走廊空间，关闭时贴墙不占空间。
MCP 辅助操作
CanvasDesign 提供了一系列 MCP（Model Context Protocol）操作，支持 AI 辅助编辑：
| 操作 | 说明 |
|---|---|
| AddCanvasMaterialsNode | 添加物料节点 |
| ChangeCanvasMaterialsNodeProps | 修改节点属性 |
| ChangeCanvasMaterialsNodeClass | 修改节点样式类 |
| ChangeCanvasMaterialsPageCss | 修改页面 CSS |
| ConvertVueSfcToDsl | Vue SFC 转 DSL |
| DeleteCanvasMaterialsNode | 删除物料节点 |
| GetCanvasMaterialsComponentList | 获取组件列表 |
| GetCanvasMaterialsPageSchema | 获取页面 Schema |
| QueryCanvasMaterialsNodeById | 按 ID 查询节点 |
| ... |
画布容器
画布的核心交互层，负责在 iframe 沙箱中渲染组件、处理拖拽/选中/调整等画布操作。
| 交互 | 说明 |
|---|---|
| 选中 | 点击组件显示蓝色选中框（CanvasAction），支持 Ctrl/Cmd 多选 |
| 拖拽 | 从物料面板拖入组件，CanvasDragIndicator 显示插入位置指示线 |
| 多选 | Ctrl/Cmd + 点击多选组件，支持多选拖拽移动（CanvasMultiDragIndicator） |
| 右键菜单 | 右键点击弹出操作菜单（CanvasMenu） |
| 插槽选择 | 拖入带插槽的容器组件时弹出插槽选择器（CanvasSlotsPicker） |
| ... |
iframe 沙箱渲染
画布在 iframe 中独立运行，通过 initCanvasSimulator 初始化渲染器：
- 在 iframe 中创建独立的 Vue 应用实例
- 加载
packages/library中的预构建运行时依赖（Vue、Element Plus、Vant 等） - 注册物料组件，渲染 DSL Schema
- 通过
postMessage与设计器主窗口通信
这种沙箱隔离机制确保组件渲染环境与设计器环境互不干扰，同时支持不同平台（Web / UniApp）的渲染适配。