TinyEngine v2.1版本发布：全新的区块方案和画布通信方案，打造更强力的可拓展低代码引擎

前言

2025年蛇年已经到来，TinyEngine v2.1.0 版本也已经蛇气腾腾的发布了出来，新年新气象，为了让大家更详细了解到 v2.1.0 的内容更新，我们特此列举了该版本中的一些重要特性更新。

v2.1.0变更特性概览

1、使用了新的纯前端区块构建方案，区块构建速度从分钟级别提升到秒级别。

2、新增了页面的UI默认规范，随手拖拉拽就拥有美观大方的页面。

3、画布通信使用全新方案，解决插件及时监听schema 变动痛点，为引擎可扩展性增加无限可能。

4、优化了那么大的一堆UI、交互与功能细节。

详情可见：https://github.com/opentiny/tiny-engine/releases/tag/v2.1.0

TinyEngine v2.1.0新特性解读

一、全新区块构建方案

原来的区块构建发布方案中，区块发布构建需要经过：

  1. 后端得到区块 schema，调用 DSL 进行出码。
  2. 将出码写入到区块模板工程中。
  3. 执行 npm install 安装依赖。
  4. 执行 npm run build:block 构建区块，得到 dist 中的目标产物。
  5. 将得到的产物上传到自部署的 unpkg cdn 托管平台。

在这里插入图片描述

原区块构建方案示意图

原区块构建发布方案有以下痛点：

  • 需要搭建自部署的 unpkg cdn 托管平台，对很多前端同学来说，有一定的门槛。
  • 每次的构建发布过程中，都需要经过出码 -> 依赖安装 -> 构建 -> 上传产物的复杂流程（即使是仅改动了一个字符！），耗费了一定的时间，不利于敏捷开发。

@ajaxzheng 同学从 @vue/compiler-sfc 中得到启发，发现我们其实可以在前端直接编译区块，省去在后端大量的安装依赖和构建的时间。

新方案简要流程为：

  1. 得到区块 schema，调用 DSL 进行出码。
  2. 根据出码，调用 @opentiny/tiny-engine-block-compiler 构建区块，得到区块的模块代码（blob url 形式）。
  3. 画布使用异步组件加载得到的模块代码。

在这里插入图片描述

新区块构建方案示意图

更多细节请查看PR: https://github.com/opentiny/tiny-engine/pull/906

于是，经过新方案的改造之后，我们区块的构建速度从分钟级提升到了秒级，大幅提高开发效率。欢迎大家来体验！

PS: 后端升级改动点：

如果是 fork Node.js 后端的用户需要使用 TinyEgine v2.1.0 新特性 ，更多细节请查看PR:https://github.com/opentiny/tiny-engine-webservice/pull/25

二、新增页面UI默认规范

原本界面编辑视图，选择组件/区块到画布之后无默认间距，需要用户自行调整。

现在对界面的元素布局进行了优化，用户通过拖拉拽生成界面时可以无需过多关注界面规范。

只通过拖拉拽生成的界面效果图：

在这里插入图片描述

改动点如下：

a.对页面、组件、区块新增了可配置的默认基础样式

  • 设计器界面的显示如下
    在这里插入图片描述

  • 代码配置如下

    在registry.js的plugins中可按需配置

    Materials的配置项：

    设置 useBaseStyle 为 true，给页面、区块、组件添加上基础样式（默认为true）

    blockBaseStyle 是区块的基础样式配置，className区块的基础类名，style是基础样式

    同上，componentBaseStyle 是组件的基础样式配置

    Page的配置项：

    pageBaseStyle 是页面的基础样式配置

    以下代码为默认配置：

    plugins: [{...Materials,options: {...Materials.options,useBaseStyle: true,blockBaseStyle: {className: 'block-base-style',style: 'margin: 16px;'},componentBaseStyle: {className: 'component-base-style',style: 'margin: 8px;'}}},{...Page,options: {...Page.options,pageBaseStyle: {className: 'page-base-style',style: 'padding: 24px;background: #FFFFFF;'}}}]

b.调整样式面板的间距、字体、字号选择

样式面板的间距选择调整为规范基础间距，如4、8、12、16、20、24、32、36、40等。

在这里插入图片描述

文本字体列表添加中文优先系统字体：微软雅黑（Microsoft YaHei）、苹方（PingFang）
在这里插入图片描述

字号改为下拉选择，添加规范推荐字号，如9、10、11、12、14、16、18、20、24等

在这里插入图片描述

c.新增了弹性容器和全宽居中组件

  • 弹性容器：自带Flex 布局的容器，属性面板可设置排列方向、间距、内边距、对齐方式
  • 全宽居中组件：默认宽度 100% 并居中的容器

d.功能支持：清空画布和元素调整样式时，保留且不影响基础样式

三、全新画布通信新方案

原来的画布通信方案中，我们直接拿到在画布中的 schema 引用，并直接修改，比如修改组件的属性或者插入删除组件等。

原方案的好处是：修改 schema 可以直接快速触发画布渲染，快速且高性能。

但是原方案有一个明显的硬伤是：插件无法监听 schema 的变动，比如，我们固定了大纲树面板的时候，在画布中拖拽改变组件的顺序，大纲树由于无法监听 schema 的变动，导致无法响应式地自动更新大纲树。
在这里插入图片描述

于是，为了满足原来画布快速高性能渲染要求，同时可以让插件监听 schema 的变动，执行插件自身的逻辑，满足后续更多可扩展插件的需求，我们推出了一种新的画布通信方案：
在这里插入图片描述

更多细节，请查看PR: https://github.com/opentiny/tiny-engine/pull/885

新方案核心要点：

  • 使用事件发布订阅来通知 schema 变更。
  • 使用 JSONdiffpatch 同步 iframe 中画布 schema 与 iframe 外 schema 的差异。

相关文档：

https://github.com/opentiny/tiny-engine/blob/refactor/develop/packages/canvas/DesignCanvas/README.md

（注意：当前API 仍未稳定，未来几个版本可能会有变动，如果需要使用，未来几个版本升级时需要注意相关API变更）

四、物料插件中，区块相关UI升级

  1. 在分组中点击添加区块，弹出的区块列表页面中，原来的作者、标签筛选器，由多选框更改成了多选下拉选择器。原来的多选框在选项非常多时，会占据大量页面空间，使用多选下拉选择器优化 UI 布局
  • 更改前（多选框）
    在这里插入图片描述
  • 更改后（多选下拉选择器）
    在这里插入图片描述
  1. 在分组中点击添加区块，弹出的区块列表页面中，目前支持全选区块，一键保存添加

五. 提供将区块插件中的区块分类与物料插件中区块分组合并的选项

区块插件增加了 options.mergeCategoriesAndGroups 配置项，来决定是否合并分类和分组接口。

  • 设置 mergeCategoriesAndGroups 为 false（默认值），保持原来的逻辑不变，即分类和分组接口都会调用
  • 设置 mergeCategoriesAndGroups 为 true，将分类接口替换成分组接口。并且将区块管理页面的 分类 文本全部替换成了 分组 文本

分类接口：/material-center/api/block-categories

分组接口：/material-center/api/block-groups

具体接口参数请查看 packages/plugins/block/src/js/http.js

使用实例如下，在注册表中添加区块插件选项

export default {
// ...
plugins: [Materials,Tree,Page,// Block 插件添加 mergeCategoriesAndGroups 选项[Block, { options: { ...Block.options, mergeCategoriesAndGroups: true } }],Datasource,Bridge,I18n,Script,State,Schema,Help,Robot],
// ...
}

注意：此功能是提供给Java版本的后端使用

六. 其他：交互、功能细节优化 & bug 修复**

  • 修复 面包屑 Breadcrumb 组件、Popeditor 组件物料配置不对的 bug @lichunn #929
  • 修复作用域插槽参数出码不对的 bug @chilingling #930
  • 优化了 i18n 绑定的样式 @gene9831 in #925
  • 修复了 i18n 插件在排序后，无法添加词条的 bug @chilingling #976
  • 修复物料插件区块分组添加区块后，页面卡死的 bug @chilingling #975
  • 修复变量 getter 与全局变量 getter 的相关 bug @chilingling#930
  • 修复保存按钮红色点样式错位的 bug @SonyLeo #982
  • 优化了若干样式与交互细节 @xuanlid #916

如何使用新版本

1、如果是从 2.0.0 版本升级上来，只需要在 cli 创建出来的工程，将 @opentiny/tiny-engine 相关的依赖，升级到 2.1.0 即可

2、如果是全新创建项目，仅需要使用 tinyengine-cli 创建项目即可。npx @opentiny/tiny-engine-cli create-platform my-designer

结语

TinyEngine v2.1.0 不仅优化了区块构建流程、构建速度、UI 规范和画布通信，还对功能细节进行了全面改进，使得开发体验更加高效和流畅。我们诚挚地邀请大家体验这一版本的强大功能，欢迎大家在 GitHub 提交反馈和建议！

同时，TinyEngine 开源的过程中，离不开社区开源贡献者的代码贡献、bug 反馈等等大量的帮助，我们会一如既往的努力研发与改进，早日将TinyEngine打造成一流的低代码引擎，让开源社区多一份更好的选择！

彩蛋：TinyEngine v2.1.0 也兼容即将开源的TinyEngine后端 Java 版本，用户可以根据需要调整后端区块发布流程以支持新特性。

关于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~ 如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/3094.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【机器学习实战入门】使用OpenCV和Keras的驾驶员疲劳检测系统

【机器学习实战入门】使用OpenCV和Keras的驾驶员疲劳检测系统

嗜睡驾驶者警报系统 防止司机疲劳驾驶警报系统 中级 Python 项目 - 司机疲劳检测系统 疲劳检测是一种安全技术，能够预防因司机在驾驶过程中入睡而造成的事故。 本中级 Python 项目的目标是建立一个疲劳检测系统，该系统将检测到一个人的眼睛闭合了一段时…
阅读更多...
Ubuntu本地部署网站

Ubuntu本地部署网站

目录 1.介绍 2.安装apache 3.网页升级 1.介绍 网站其实就相当于一个文件夹，用域名访问一个网页，就相当于访问了一台电脑的某一个文件夹，在网页中看见的视频，视频和音乐其实就是文件夹里面的文件。为什么网页看起来不像电脑文件夹…
阅读更多...
如何在vue中渲染markdown内容？

如何在vue中渲染markdown内容？

文章目录 引言什么是 markdown-it？安装 markdown-it基本用法样式失效？解决方法 高级配置语法高亮 效果展示 引言 在现代 Web 开发中，Markdown 作为一种轻量级的标记语言，广泛用于文档编写、内容管理以及富文本编辑器中。markdown…
阅读更多...
【Linux】13.Linux进程概念（2）

【Linux】13.Linux进程概念（2）

文章目录 3. 进程进程进程状态查看僵尸进程危害进程状态总结孤儿进程 4. 进程优先级基本概念查看系统进程PRI and NIPRI vs NI使用top更改进程优先级 3. 进程 进程 看看Linux内核源代码怎么说。 为了弄明白正在运行的进程是什么意思，我们需要知道进程的不同状态。…
阅读更多...
使用 Docker 部署 Java 项目（通俗易懂）

使用 Docker 部署 Java 项目（通俗易懂）

目录 1、下载与配置 Docker 1.1 docker下载（这里使用的是Ubuntu，Centos命令可能有不同） 1.2 配置 Docker 代理对象 2、打包当前 Java 项目 3、进行编写 DockerFile，并将对应文件传输到 Linux 中 3.1 编写 dockerfile 文件 …
阅读更多...
基于机器学习的用户健康风险分类及预测分析

基于机器学习的用户健康风险分类及预测分析

完整源码项目包获取→点击文章末尾名片！ 背景描述 在这个日益注重健康与体能的时代，健身已成为许多人追求健康生活的重要组成部分。 本数据集包含若干健身房会员的详细信息，包括年龄、性别、体重、身高、心率、锻炼类型、身体脂肪比例等多项关…
阅读更多...
【Mysql进阶知识】Mysql 程序的介绍、选项在命令行配置文件的使用、选项在配置文件中的语法

【Mysql进阶知识】Mysql 程序的介绍、选项在命令行配置文件的使用、选项在配置文件中的语法

目录 一、程序介绍 二、mysqld--mysql服务器介绍 三、mysql - MySQL 命令行客户端 3.1 客户端介绍 3.2 mysql 客户端选项 指定选项的方式 mysql 客户端命令常用选项 在命令行中使用选项 选项(配置)文件 使用方法 选项文件位置及加载顺序 选项文件语法 使用举例&am…
阅读更多...
[0242-07].第09节：SpringBoot中简单功能分析

[0242-07].第09节：SpringBoot中简单功能分析

SpringBoot学习大纲 一、静态资源访问分析： 1.1.静态资源默认路径： a.官网说明： 1.静态资源访问路径官方文档说明的路径 2.只要是静态资源，都默认放在类路径下： /static or /public or /resources or /META-INF/res…
阅读更多...
28：CAN总线入门一：CAN的基本介绍

28：CAN总线入门一：CAN的基本介绍

CAN总线入门 1、CAN总线简介和硬件电路1.1、CAN简要介绍1.2、硬件电路1.3、CAN总线的电平标准 2、帧格式2.1、数据帧（掌握）2.2、遥控帧（掌握）2.3、错误帧（了解）2.4、过载帧（了解）2.5…
阅读更多...
nginx 配置域名前缀访问 react 项目

nginx 配置域名前缀访问 react 项目

说明一下：我是使用域名转发访问的，访问流程如下： 浏览器 》 服务器1 》 服务器2 由于服务器1已经为 https 的访问方式做了 ssl 证书等相关配置，然后转发到服务器2， 所以在服务器2中不需要再配置 ssl 证书相关的东西了&…
阅读更多...
Java设计模式——单例模式(特性、各种实现、懒汉式、饿汉式、内部类实现、枚举方式、双重校验+锁)

Java设计模式——单例模式(特性、各种实现、懒汉式、饿汉式、内部类实现、枚举方式、双重校验+锁)

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫（刚保研） 记录每天学习过程（主要学习Java、python、人工智能），总结知识点（内容来自：自我总结网上借鉴&#xff0…
阅读更多...
Web3与加密技术的结合：增强个人隐私保护的未来趋势

Web3与加密技术的结合：增强个人隐私保护的未来趋势

随着互联网的快速发展，个人隐私和数据安全问题越来越受到关注。Web3作为新一代互联网架构，凭借其去中心化的特性，为个人隐私保护提供了全新的解决方案。而加密技术则是Web3的重要组成部分，进一步增强了隐私保护的能力。本文将探讨…
阅读更多...
ElasticSearch下

ElasticSearch下

DSL查询 叶子查询：在特定字段里查询特定值，属于简单查询，很少单独使用复合查询：以逻辑方式组合多个叶子查询或更改叶子查询的行为方式 在查询后还可以对查询结果做处理： 排序：按照1个或多个字段做排序分页…
阅读更多...
HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (二、首页轮播图懒加载的实现)

HarmonyOS NEXT应用开发边学边玩系列：从零实现一影视APP (二、首页轮播图懒加载的实现)

在开发一款影视APP时，首页的轮播图是一个非常重要的部分。它不仅能够吸引用户的注意力，还能有效地推广重点内容。为了提升应用的性能和用户体验，可以实现轮播图的懒加载功能。本文将详细介绍如何在HarmonyOS NEXT应用开发中实现这一功能。 1.…
阅读更多...
GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库

GraphRAG如何使用ollama提供的llm model 和Embedding model服务构建本地知识库

使用GraphRAG踩坑无数 在GraphRAG的使用过程中将需要踩的坑都踩了一遍（不得不吐槽下，官方代码有很多遗留问题，他们自己也承认工作重心在算法的优化而不是各种模型和框架的兼容性适配性上），经过了大量的查阅各种资料以…
阅读更多...
Jupyter notebook中运行dos指令运行方法

Jupyter notebook中运行dos指令运行方法

Jupyter notebook中运行dos指令运行方法 目录 Jupyter notebook中运行dos指令运行方法一、DOS(磁盘操作系统）指令介绍1.1 DOS介绍1.2 DOS指令1.2.1 DIR - 显示当前目录下的文件和子目录列表。1.2.2 CD 或 CHDIR - 改变当前目录1.2.3 使用 CD .. 可以返回上一级目录1…
阅读更多...
Oracle报错ORA-01078、LRM-00109

Oracle报错ORA-01078、LRM-00109

虚拟机异常关机后，rac数据库备机无法启动数据库，报错如下 解决方法： 找到如下路径文件 执行： cp init.ora.016202516818 /u01/app/oracle/product/19.3.0/db/dbs/ mv init.ora.016202516818 initplm2.ora 再次进入命令行sqlpl…
阅读更多...
AAPM：基于大型语言模型代理的资产定价模型，夏普比率提高9.6%

AAPM：基于大型语言模型代理的资产定价模型，夏普比率提高9.6%

“AAPM: Large Language Model Agent-based Asset Pricing Models” 论文地址：https://arxiv.org/pdf/2409.17266v1 Github地址：https://github.com/chengjunyan1/AAPM 摘要 这篇文章介绍了一种利用LLM代理的资产定价模型（AAPM）…
阅读更多...
大疆发布可折叠航拍无人机，仅重249g，支持 4800 万像素拍摄

大疆发布可折叠航拍无人机，仅重249g，支持 4800 万像素拍摄

在以往的无人机使用经历中，携带不便一直是个让人头疼不已的问题。那些体积硕大的无人机，每次出行都像是一场艰难的搬运，塞进车里都费劲，更别提轻松地穿梭在城市街头或是户外探险中了。但就在大家对这些问题习以为常、感到无奈时&a…
阅读更多...
无公网IP 实现外网访问本地 Docker 部署 Navidrome

无公网IP 实现外网访问本地 Docker 部署 Navidrome

Navidrome 是一款可以在 macOS、Linux、Windows以及 Docker 等平台上运行的跨平台开源音乐服务器应用，它支持传输常见的 MP3、FLAC、WAV等音频格式。允许用户通过 Web 界面或 API 进行音乐库的管理和访问。本文就介绍如何快速在 Linux 系统使用 Docker 进行本地部署…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023