TinyEngine 2.5版本正式发布：多选交互优化升级，页面预览支持热更新，性能持续跃升！

前言

TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座，提供可视化搭建页面等基础能力，既可以通过线上搭配组合，也可以通过cli创建个人工程进行二次开发，实时定制出自己的低代码平台。适用于多场景的低代码平台开发，如：资源编排、服务端渲染、模型驱动、移动端、大屏端、页面编排等。

近期，TinyEngine v2.5版本带着新的功能和优化一起来咯~ 希望这次更新能为大家的使用带来更多的便利与惊喜。

• 源码：https://github.com/opentiny/tiny-engine（欢迎 Star ⭐）
• 官网：https://opentiny.design/tiny-engine#/home

这次版本特性开发和问题修复已经有更多的开发者朋友参与进来，我们在此诚挚感谢 @BWrong 、@1degrees 积极参加 TinyEngine 的开源共建，同时也邀请大家一起加入开源社区的建设，让 TinyEngine 成长的更加优秀和茁壮。

v2.5.0 变更特性概览

• 【画布】画布多选支持右键菜单。
• 【画布】画布多选支持拖拽。
• 【CDN】修复CDN本地化的支持。
• 【性能优化】画布 iframe 移除 base64 避免大内存占用问题。
• 【页面预览】页面预览支持热更新。
• 【物料配置】物料支持直接在配置中传入对象。
• 【物料API】物料支持使用 refreshMaterial 进行刷新物料。
• 【物料】新增 TinyTransfer 组件。
• 【其他】大量功能细节优化与bug修复。

TinyEngine v2.5.0 新特性解读

1. 【画布】画布多选支持右键菜单。

1.1 基本介绍

多选右键菜单是一个便捷的功能，当用户选中多个组件节点后，右键点击可以呼出专用的多选菜单，提供批量操作能力。

1.2 功能详情

多选状态下的右键菜单包含以下几个主要功能选项：

• 删除：一键删除所有选中的节点，无需逐个操作
• 复制：批量复制所有选中的节点，便于快速重用

• 添加父级：为选中的节点添加共同父容器，包含以下子选项：

  • 容器(批量) ：为每个选中节点单独添加父级容器
  • 容器 (公共父级) ：仅当选中节点为连续的兄弟节点时可用，创建一个公共父容器
  • 弹出框(公共父级) ：仅当选中节点为连续的兄弟节点时可用，创建 TinyPopover 组件作为公共父级
• 新建区块：基于选中的组件创建可复用的区块组件

注意事项：

• 多选菜单触发条件：当选中节点的数量大于 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修复

• 默认出码模板的 vite.config.js 增加 base: './' 配置。 @xuanlid  #1247
• 解决编辑区块不生效的 bug。 @SonyLeo  #1257
• 解决获取 globalState 不正确的 bug。 @chilingling  #1292
• 解决删除绑定事件没有触发保存状态更新的 bug。 @chilingling  #1253
• 修复 getRenderer 在 canvas init 完成前可能为 null，在控制台报错的问题。 @chilingling  #1254
• 修复HtmlAttributesConfigurator配置组件样式问题。 @BWrong  #1302
• 优化TinyCheckboxGroup 和 video 组件配置。 @chilingling  #1294
• 修复出码单元测试；修复状态变量 key 可能不合法需要增加引号的bug。@chilingling  #1291
• 修复手动编辑 schema 之后，导致页面无法保存的 bug。@chilingling  #1299
• 修复父级页面有区块时，页面预览有错误的 bug。@1degrees  #1289
• AI 对话框不强制要求填 token。@xuanlid  #1310
• 修复新建区块后 url 未更新导致画布渲染错误的 bug。 @gene9831  #1323
• 修复清空画布后，页面保存操作失败的 bug。 @1degrees  #1341
• 修复 i18n 面板打开之后，i18n 词条列表不显示的 bug。@SonyLeo  #1358
• 修复重复点击一个还原页面之后，接口报错的 bug。@xuanlid  #1368
• 修复复制页面保存之后，无法切换到新页面的 bug。 @chilingling  #1361
• 修复画布存在 jsx 函数的时候，报错无法渲染的 bug。 @chilingling  #1376
• 修复新增插件后，可能无法显示新插件的 bug。@SonyLeo  #1373
• 修复：点击复制页面，弹出"您即将复制的页面有更改未保存，是否确定跳过更改直接复制？"，但复制页面并没有更改未保存的 bug。@SonyLeo #1365
• 修复 chrome 浏览器 136 版本，清空样式面板的样式类之后，伪类下拉框宽度不正常的 bug。@xuanlid  #1398
• 修复异步函数在绑定事件函数之后，丢失 async descriptor 描述符的 bug。@chilingling #1396
• 修复即使固定面板，新增页面之后，页面仍然被关闭的 bug。@SonyLeo  #1393

以上是此次更新问题修复的主要内容，更多细节请查看 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标签，一起参与开源贡献\~