前言
TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过cli创建个人工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。
近期，TinyEngine v2.5版本带着新的功能和优化一起来咯~ 希望这次更新能为大家的使用带来更多的便利与惊喜。
这次版本特性开发和问题修复已经有更多的开发者朋友参与进来，我们在此诚挚感谢 @BWrong 、@1degrees 积极参加 TinyEngine 的开源共建，同时也邀请大家一起加入开源社区的建设，让 TinyEngine 成长的更加优秀和茁壮。
v2.5.0 变更特性概览
- 【画布】画布多选支持右键菜单。
- 【画布】画布多选支持拖拽。
- 【CDN】修复CDN本地化的支持。
- 【性能优化】画布 iframe 移除 base64 避免大内存占用问题。
- 【页面预览】页面预览支持热更新。
- 【物料配置】物料支持直接在配置中传入对象。
- 【物料API】物料支持使用 refreshMaterial 进行刷新物料。
- 【物料】新增 TinyTransfer 组件。
- 【其他】大量功能细节优化与bug修复。
TinyEngine v2.5.0 新特性解读
1. 【画布】画布多选支持右键菜单。
1.1 基本介绍
多选右键菜单是一个便捷的功能，当用户选中多个组件节点后，右键点击可以呼出专用的多选菜单，提供批量操作能力。
1.2 功能详情
多选状态下的右键菜单包含以下几个主要功能选项：
注意事项：
- 多选菜单触发条件：当选中节点的数量大于 1 时，系统自动切换到多选菜单模式
- 批量添加父级：对于 添加父级 中"容器（批量）"选项，选中多个节点时可用
- 添加公共父级：对于 添加父级 中"容器(公共父级)"和"弹出框(公共父级)"选项，只有当所选节点是连续的兄弟节点时才可用
1.3 功能使用展示
a. 右键菜单：批量复制 + 批量删除
![]()
b. 右键菜单：添加父级 ![]()
c. 右键菜单：支持选中多个节点添加区块
![]()
2. 【画布】画布多选支持拖拽。
2.1 基本介绍
多选拖拽是一个批量移动节点的功能，用户可以同时选中多个组件节点并作为整体进行拖拽操作，提高组件布局调整的效率。
2.2 使用方法
a. 多选操作
按键多选：按住 Ctrl 键，点击选中多个组件
b. 拖拽操作
- 开始拖拽：选中多个组件后，在选中组件上按下鼠标左键
- 移动过程：拖动鼠标，组件的拖拽元素会同时移动，保持原有的相对位置关系
- 完成放置：释放鼠标按键，组件将放置在新位置
2.3 界面展示
![]()
2.4 注意事项
- 点击已选中的组件但不拖动时，自动切换为单选状态
- 大量组件同时拖拽可能造成性能下降，建议适量选择
3.【CDN】修复CDN本地化支持
在 1.x 版本中，我们新增了 CDN 本地化的特性。但是在 2.x 版本中，该功能失效了。在 2.5 版本中，我们将该特性迁移上来。
使用示例：在 .env.alpha 或者 .env.prod 环境变量文件中，新增如下配置：
# CDN 本地化配置示例
# 将画布、页面预览需要的 vue、vue-i18n 等等依赖复制到构建产物中
VITE_LOCAL_IMPORT_MAPS=true
# 将本地物料 bundle.json 的 script 和 css 复制到构建产物中
VITE_LOCAL_BUNDLE_DEPS=true
# 将 VITE_LOCAL_BUNDLE_DEPS 复制到构建产物中的目录名称，默认为 local-cdn-static
VITE_LOCAL_IMPORT_PATH=local-cdn-static
然后执行 pnpm build:alpha 或者时 pnmp build:prod 就可以得到带有 CDN 本地化文件的产物啦~
相关联PR：https://github.com/opentiny/tiny-engine/pull/1242
详细文档：https://opentiny.design/tiny-engine#/help-center/course/dev/import-map-local
4.【页面预览】页面预览支持热更新。
在前端开发中，有一种特性叫做热更新，我们直接修改代码，保存文件之后，浏览器就会自动刷新网页，我们就可以看到效果了。在 v2.5 版本中，TinyEngine 也带来了一种页面预览热更新的特性。我们打开预览页面，在画布中进行拖拉拽，不需要再次点击页面预览或者刷新页面，预览页面就会自动刷新。
关联PR：https://github.com/opentiny/tiny-engine/pull/1261
相关联特性支持：
- 支持配置预览页面跳转的 url。
- 页面预览热更新功能支持开关。
详情请参照文档：https://opentiny.design/tiny-engine#/help-center/course/dev/preview-api
5.【物料配置&API】物料支持直接在配置中传入对象 & 支持使用 refreshMaterial 进行刷新物料
物料支持在配置中传入对象
v2.0 - v2.4 的版本中，我们的物料配置仅支持传递 url 进行获取物料。v2.5 的版本中，我们支持了直接传递对象，使得配置物料的方式更灵活。
配置示例：
![]()
import bundle from './bundle.json'
// engine.config.js 示例
export default {
// ...
material: ['/mock/bundle.json', bundle],
}
物料新增 refreshMaterial API
使用场景：二开工程中，允许用户上传物料，或者是动态更新物料后，需要刷新物料，此时可以调用该方法。
更多详情请查看文档：https://opentiny.design/tiny-engine#/help-center/course/dev/material-api
6. 【性能优化】画布 iframe 移除 base64 避免大内存占用问题。
在 2.0+ 的画布优化中，我们使用了 base64 来将 script 传递到画布中，但是 base64 在 src 中却会占用很大的内存，这加剧了页面的卡顿，使用体验变得不好。所以，在 v2.5 的版本中，我们将 base64 去除，避免大内存占用的问题。（Tips：画布后续将进行更多的优化，支持更多的拓展点和更强大的二次开发功能。欢迎大家来使用反馈提PR） ![]()
关联PR：https://github.com/opentiny/tiny-engine/pull/1321
7.【物料】新增 TinyTransfer 组件
功能概览
新增高性能穿梭框组件，支持数据在左右面板间快速转移，适用于权限分配、数据分类等多选场景。
关键特性
基础穿梭功能：支持单/多选、全选、快捷移动操作，可通过按钮或拖拽交互实现数据转移。
搜索过滤：内置关键词搜索功能，可快速定位目标数据项。
8.【官网】官网Demo刷新为 v2.5 版本
官网的 Demo 从 1.x 刷新为 v2.5 版本。链接：https://opentiny.design/tiny-engine#/tiny-engine-editor
欢迎大家到官网上体验Demo。 ![]()
9.【其他】功能细节优化&bug修复
以上是此次更新问题修复的主要内容，更多细节请查看 v2.5.0 changelog
结语：
TinyEngine 2.5 版本更新不仅修复了许多问题，还对多选功能进行了完善，更有页面预览热更新、CDN 本地化等重要特性支持。每一步前行都值得铭记，感谢有您陪伴我们一起迭代成长，同时也欢迎大家加入社区讨论，参与社区共建！
关于OpenTiny
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：https://opentiny.design
OpenTiny 代码仓库：https://github.com/opentiny
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码：https://github.com/opentiny/tiny-engine
欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
