当前位置： 首页 > article >正文

TinyEngine 2.4版本正式发布：文档全面开源，实现主题自定义，体验焕新升级！

article 2026/1/14 4:43:34

本文由体验技术团队李璇原创。

前言

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

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

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

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

在本次更新中，我们重点开发及优化了以下几个方面

v2.4.0 变更特性概览

  1. 主题开发能力：cli支持用户自定义主题

  2. 插件灵活布局：所有插件面板统一浮动和固定逻辑，部分面板可拖拽调整宽度

  3. 默认页与主页功能优化调整

  4. 大纲树支持复制、删除、多选能力

  5. 文档开源：文档从内部托管迁移至了Github

  6. 项目TS改造

  7. AI插件支持输入用户大模型API Token使用AI功能

  8. 同时支持 unpkg 与 npmmirror CDN

  9. 修复了多个问题，优化了一些交互与功能细节。

    v2.4.0 所有 changelog

TinyEngine v2.4.0 新特性解读

1. 主题开发能力

1.1默认提供了深色和浅色主题，通过顶部主题切换插件点击图标即可进行切换

在这里插入图片描述

1.2用户在注册表配置自定义主题，主题切换展示为列表切换
  • 创建设计器可参考官网文档：https://opentiny.design/tiny-engine#/help-center/course/dev/91
  • 在已经创建的设计器根目录执行engine-cli create，选择theme以创建一个新的主题
    npx @opentiny/tiny-engine-cli create# 上面命令默认会拉取最新的版本，也可以指定版本号npx @opentiny/tiny-engine-cli@2.4.0 create

在这里插入图片描述

执行下面命令安装依赖

# 安装依赖
npm install
  • 将主题接入设计器

使用vs Code 打开 customPlatform 项目，修改 registry.js

在这里插入图片描述

  • 开发调试主题

重新打开项目页面，可以看到主题展示为列表切换，可以切换自定义主题

在这里插入图片描述

2. 插件灵活布局

2.1 统一固定和浮动逻辑

所有插件面板统一浮动和固定逻辑

之前版本的 固定 和 浮动 插件面板操作 仅支持 物料 和 大纲树 ；\

在这里插入图片描述

现在左右侧的插件全部支持 固定 和 浮动 面板操作。
*
以 区块管理 和 数据源 面板为例进行展示*\

在这里插入图片描述

2.2 部分面板可拖拽调整宽度

操作方法：鼠标悬浮在相应面板右侧的边框线上，边框线变色即可开始拖动。

目前支持拖拽改变面板宽度的插件是：大纲树、页面 JS 和 页面 Schema

  • 大纲树

在这里插入图片描述

  • 页面 JS

在这里插入图片描述

  • 页面 Schema

在这里插入图片描述

3. 默认页与主页功能优化调整

  • 主页调整为在”…“菜单设置

在这里插入图片描述

  • 默认页调整

之前的默认页是在子页面的页面设置中将其设置为父级的默认页（如图所示）

在这里插入图片描述

这个版本调整为在父页面直接选择默认页（如图所示）

在这里插入图片描述

4. 大纲树支持复制、删除、多选能力

在上一个2.3版本中，画布提供了多选节点的功能，并且多选节点支持快捷键进行操作，多选时支持 ctrl+c 复制、ctrl+v 粘贴、delete 删除等。2.4版本我们把支持多选的功能同步给了大纲树，并且多选操作逻辑和画布保持一致，多选选中的节点在大纲树和画布会同步显示。如下图所示

在这里插入图片描述

另外还给大纲树补充了几个其他常用的快捷键，具体看如下表格

大纲树支持的快捷键功能说明支持多选
ctrl+鼠标点击选择多个节点。如点击已选中节点后，则为取消选中否
ctrl+c复制节点是
ctrl+v粘贴节点是
ctrl+x剪切节点是
delete删除节点是
ctrl+z撤销历史记录否
ctrl+y回退历史记录否
ctrl+s保存页面schema否

5. 文档开源

文档现已开源！我们将文档从内部托管迁移至了Github。这份文档现在属于整个社区！欢迎开发者：

  • ✍ 修正你发现的问题
  • 💡 添加你熟悉的技巧
  • 📚 编写新的教程章节

在这里插入图片描述

期待与你共同打造更好的技术文档

6. 项目TS改造

随着项目规模的扩大，基于 Javascript 的代码在可维护性和团队协作方面逐渐暴露出一些问题。为了解决潜在的类型错误、提高开发效率并增强代码稳定性，我们决定将项目改造成 Typescript。这个改造过程是逐步的，目前2.4版本进行了如下更改

  • 项目改造成了ts项目，ts类型完善工作正在进行中
  • 添加了ts的ESLint规则校验以增强代码质量

7. AI插件支持输入用户大模型API Token使用AI功能

Ai对话框交互样式调整，点击 标题 或 设置图标 展示弹窗，弹窗内可配置大模型类型以及对应的token

在这里插入图片描述

8. 同时支持 unpkg 与 npmmirror CDN

鉴于 unpkg cdn 在国内网络有可能波动，访问不稳定的原因。我们增加了 npmmirror CDN 的支持。PR：#1220

使用方法：

(1). 使用 npmmirror CDN

// .env.alpha、.env.development、.env.productionVITE\_CDN\_DOMAIN=<https://registry.npmmirror.com>\# 需配合 VITE\_CDN\_TYPE 使用，值必须是 npmmirrorVITE\_CDN\_TYPE=npmmirror

(2). 使用 unpkg CDN


VITE\_CDN\_DOMAIN=<https://unpkg.com>

(3). 物料使用 npmmirror CDN

npmmirror CDN 格式为： https://registry.npmmirror.com/${packageName}/${version}/files/filePath

如果我们物料也需要使用 npmmirror 的 CDN，我们按照格式进行配置即可。比如：

  • https://registry.npmmirror.com/@opentiny/vue-runtime/~3.20/files/dist3/tiny-vue-pc.mjs
  • https://registry.npmmirror.com/element-plus/2.4.2/files/dist/index.full.mjs

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

  • 修复：insert 方法因为 referTargetNode 找不到引起的报错，导致 slot插槽增加失败。@chilingling #1140
  • 修复：margin 不支持配置负数 @xuanlid #1164
  • 修复：数据源绑定时，将数据源初始化的State 和原有State错误更新，导致功能无效，Schame沉余无用数据 @1degrees #1208
  • 修复：拆包之后packages字段丢失 @webzmj530 #1200
  • 修复：拆包的时候一个组件在多个分组里面也可以一个分组里面存在两个组件(componentName相同, snippetName不同) @webzmj530 #1212
  • 修复：页面初始化时，页面加载 dataSourceMap 提示 undefined 的 bug @chilingling #1142
  • 修复：设计器画布上下移动和复制按钮异常 @chilingling #1180
  • 修复：schema 中 css 字段缺失时，出码成 的 bug @chilingling #1179
  • 修复：文案为空时 i18n 下的文案为 null 导致出码异常，新增判断条件，默认为空对象 @Ljhhhhhh #1211
  • 修复：1. 多选节点进行点击回退剩余一个元素时，框选效果异常 2. 快捷键剪切失效 @SonyLeo #1201
  • 修复：自定义渲染函数中的组件，如果页面没有引入，预览页面和出码页面会存在问题 @webzmj530 #1146
  • 修复：引入的第三方组件无法在出码、预览中正常使用 @Ljhhhhhh #1215
  • 修复：表格组件插槽变量无法使用$rowIndex变量 @xuanlid #1224
  • 修复：页面JS插件中函数存在注释时保存会导致内容丢失或无法保存 @chilingling #1184
  • 修复：连续设置需要过滤内容的 script 到js面板，js 面板没有正确显示更新 @chilingling #1196
  • 修复：画布行列容器组件，鼠标悬停剪刀图标时，分割虚线不显示 @gene9831 #1233
  • 修复：滚动画布时，hover框不会随着元素位置变动更新 @gene9831 #1235

以上是此次更新问题修复的主要内容，更多细节请查看 v2.4.0 changelog Bug Fixes

如何使用新版本

  • 如果是从 2.0.0 版本升级上来，只需要在 cli 创建出来的工程，将 @opentiny/tiny-engine 相关的依赖，升级到 2.4.0 即可
  • 如果是从 1.x 版本升级上来，需要参考迁移指南，升级到 2.4 版本
  • 如果是全新创建项目，仅需要使用 tinyengine-cli 创建项目即可。npx @opentiny/tiny-engine-cli create-platform my-designer

结语

TinyEngine 2.4 版本更新不仅是对大纲树功能进行了完善，实现了插件灵活布局等，最重要的是我们将文档从内部托管迁移至了Github！每一步前行都值得铭记，感谢有您陪伴我们一起迭代成长，同时也欢迎大家加入社区讨论，参与社区共建！

关于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标签，一起参与开源贡献~

相关文章：

TinyEngine 2.4版本正式发布：文档全面开源，实现主题自定义，体验焕新升级！

本文由体验技术团队李璇原创。 前言 TinyEngine低代码引擎使开发者能够定制低代码平台。它是低代码平台的底座&#xff0c;提供可视化搭建页面等基础能力&#xff0c;既可以通过线上搭配组合&#xff0c;也可以通过cli创建个人工程进行二次开发&#xff0c;实时定制出自己的低…...

编程日记 2026/1/11 10:36:16

DeepSeek-R3、GPT-4o 与 Claude-3.5-Sonnet 全面对比：性能、应用场景与技术解析

随着大模型技术的迅猛发展&#xff0c;国产模型正逐渐崭露头角&#xff0c;尤其是DeepSeek-R3的发布&#xff0c;更是在AI技术社区中引起广泛关注。而与此同时&#xff0c;国际领先的GPT-4o和Claude-3.5-Sonnet也在不断迭代升级&#xff0c;持续刷新业界对AI能力的认知。下文将…...

编程日记 2025/12/8 20:37:38

57、在 Vue 3 项目中引入 js-cookie 库

当后端接口返回响应时&#xff0c;若在响应头里设置了 Set-Cookie 字段&#xff0c;浏览器会自动处理这些 cookie 并把它们存储起来。 1. 安装 js-cookie 你可以通过 npm 或者 yarn 来安装 js-cookie&#xff1a; npm install js-cookie # 或者 yarn add js-cookie2. 在组件…...

编程日记 2025/12/7 23:56:28

毕业答辩的PPT应该包括哪些内容？

一、PPT 模板的选择 1. 忌单调的白底黑字&#xff0c;应进行一些艺术设计&#xff0c;使人看着画面舒服&#xff0c;但不必过于花哨。总之&#xff0c;专业制作&#xff0c;符合技术人士的喜好。 2. 去掉不相关信息&#xff0c;如一些下载模板上的LOGO。把学校或部门的LOGO放…...

编程日记 2026/1/8 4:50:25

Vscode --- LinuxPrereqs │远程主机可能不符合 glibc 和 libstdc++ Vs code 服务器的先决条件

打开vscode连接远程linux服务器&#xff0c;发现连接失败&#xff0c;并出现如下报错信息&#xff1a; 原因是&#xff1a; vscode 官网公告如下&#xff1a;2025 年 3 月 (版本 1.99) - VSCode 编辑器 版本1.97 官网公告如下&#xff1a;链接 版本1.98 官网公告如下&am…...

编程日记 2026/1/8 4:51:01

重构之去除多余的if-else

一、提前返回&#xff08;Guard Clauses&#xff09; 适用场景&#xff1a;当 else 块仅用于处理异常或边界条件时。 优化前&#xff1a;if (isValid) {doSomething(); } else {return; }优化后&#xff1a;if (!isValid) return; // 提前处理异常&#xff0c;主流程保持简洁…...

编程日记 2025/12/10 10:40:52

安装部署RabbitMQ

一、RabbitMQ安装部署 1、下载epel源 2、安装RabbitMQ 3、启动RabbitMQ web管理界面 启用插件 rabbitmq数据目录 创建rabbitmq用户 设置为管理员角色 给用户赋予权限 4、访问rabbitmq...

编程日记 2026/1/8 4:50:38

Qt实现文件传输客户端（图文详解+代码详细注释）

Qt实现文件传输客户端 1、 客户端UI界面设计2、客户端2.1 添加网络模块和头文件2.2 创建Tcp对象2.3 连接按钮2.3.1 连接按钮连接信号与槽2.3.2 连接按钮实现 2.4 读取文件2.4.1 连接读取文件的信号与槽2.4.2 读取文件槽函数实现2.5 进度条2.5.1 设置进度条初始值2.5.2 初始化进…...

编程日记 2026/1/8 4:51:13

机器学习期末

选择题 以下哪项不是机器学习的类型&#xff1f; A. 监督学习 B.无监督学习 C.半监督学习 D.全监督学习 D 哪一个是机器学习的合理定义? A、机器学习是计算机编程的科学 B、机器学习从标记的数据中学习 C、机器学习是允许机器人智能行动的领域 D、机器学习能使计算机能够在…...

编程日记 2026/1/8 4:50:42

在 Linux 上部署 .NET Core 应用并配置为开机自动启动

在本文中&#xff0c;我们将详细介绍如何在 Linux 系统上部署 .NET Core 应用程序&#xff0c;并配置为开机自动启动。以下是一步一步的详细部署过程&#xff0c;适用于将 .NET Core Web 应用部署到生产环境中。 1. 安装 .NET 运行时和 SDK 首先&#xff0c;确保 Linux 系统上…...

编程日记 2025/12/9 7:00:04

Python多任务编程：进程全面详解与实战指南

1. 进程基础概念 1.1 什么是进程&#xff1f; 进程(Process)是指正在执行的程序&#xff0c;是程序执行过程中的一次指令、数据集等的集合。简单来说&#xff0c;进程就是程序的一次执行过程&#xff0c;它是一个动态的概念。 想象你打开电脑上的音乐播放器听歌&#xff0c;…...

编程日记 2026/1/12 15:40:23

【QT】 QT中的列表框-横向列表框-树状列表框-表格列表框

QT中的列表框-横向列表框-树状列表框-表格列表框 1.横向列表框(1)主要方法(2)信号(3) 示例代码1:(4) 现象&#xff1a;(5) 示例代码2&#xff1a;加载目录项在横向列表框显示(6) 现象&#xff1a; 2.树状列表框 QTreeWidget(1)使用思路(2)信号(3)常用的接口函数(4) 示例代码&am…...

编程日记 2026/1/13 20:54:41

决策树：ID3,C4.5,CART树总结

树模型总结 决策树部分重点关注分叉的指标&#xff0c;多叉还是单叉&#xff0c;处理离散还是连续值&#xff0c;剪枝方法&#xff0c;以及回归还是分类 一、决策树 ID3(Iterative Dichotomiser 3) 、C4.5、CART决策树 ID3:确定分类规则判别指标、寻找能够最快速降低信息熵的方…...

编程日记 2026/1/8 4:47:12

easyexcel使用模板填充excel坑点总结

1.单层map设置值是{属性}&#xff0c;那使用两层map进行设置值&#xff0c;是不是可以使用{属性.属性}&#xff0c;以为取出map里字段只用{属性}就可以设置值&#xff0c;那再加个.就可以从里边map取出对应属性&#xff0c;没有两层map写法 填充得到的文件打开报错 was empty (…...

编程日记 2026/1/9 23:58:56

量子计算与经典计算融合：开启计算新时代

一、引言 随着科技的飞速发展&#xff0c;计算技术正迎来一场前所未有的变革。量子计算作为前沿技术&#xff0c;以其强大的并行计算能力和对复杂问题的高效处理能力&#xff0c;吸引了全球科技界的关注。然而&#xff0c;量子计算并非要完全取代经典计算&#xff0c;而是与经典…...

编程日记 2026/1/14 3:10:16

C# LINQ基础知识

简介 LINQ(Language Integrated Query)&#xff0c;语言集成查询&#xff0c;是一系列直接将查询功能集成到 C# 语言的技术统称。使用LINQ表达式可以对数据集合进行过滤、排序、分组、聚合、串联等操作。 例子&#xff1a; public class Person {public int Id;public string…...

编程日记 2026/1/12 14:43:14

GCoNet+：更强大的团队协作 Co-Salient 目标检测器 2023 GCoNet+（翻译）

摘要 摘要&#xff1a;本文提出了一种新颖的端到端群体协作学习网络&#xff0c;名为GCoNet&#xff0c;它能够高效&#xff08;每秒250帧&#xff09;且有效地识别自然场景中的共同显著目标。所提出的GCoNet通过基于以下两个关键准则挖掘一致性表示&#xff0c;实现了共同显著…...

编程日记 2026/1/8 4:50:33

QT常见输入类控件及其属性

Line Edit QLineEdit用来表示单行输入框&#xff0c;可以输入一段文本&#xff0c;但是不能换行 核心属性&#xff1a; 核心信号 信号 说明 void cursorPositionChanged(int old,int new) 当鼠标移动时发出此型号&#xff0c;old为先前位置&#xff0c;new为新位置 void …...

编程日记 2026/1/8 4:50:29

Few-shot medical image segmentation with high-fidelity prototypes 论文总结

题目&#xff1a;Few-shot medical image segmentation with high-fidelity prototypes&#xff08;高精确原型&#xff09; 论文&#xff1a;Few-shot medical image segmentation with high-fidelity prototypes - ScienceDirect 源码&#xff1a;https://github.com/tntek/D…...

编程日记 2026/1/8 0:32:17

DBA工作常见问题整理

MVCC机制: PostgreSQL的多版本并发控制(MVCC)是其核心特性之一&#xff0c;它允许数据库在高并发环境下保持高性能的同时提供事务隔离。 MVCC通过维护数据的多个版本实现&#xff1a; 读操作不阻塞写操作写操作不阻塞读操作避免使用锁实现并发控制 PostgreSQL的MVCC特点 写时…...

编程日记 2026/1/9 3:48:51

深入理解Java包装类：自动装箱拆箱与缓存池机制

深入理解Java包装类&#xff1a;自动装箱拆箱与缓存池机制 对象包装器 Java中的数据类型可以分为两类&#xff1a;基本类型和引用类型。作为一门面向对象编程语言&#xff0c; 一切皆对象是Java语言的设计理念之一。但基本类型不是对象&#xff0c;无法直接参与面向对象操作&…...

编程日记 2026/1/12 10:52:23

如何使用Node-RED采集西门子PLC数据通过MQTT协议实现数据交互并WEB组态显示

需求概述 本章节主要实现一个流程&#xff1a;使用纵横智控的EG网关通过Node-red&#xff08;可视化编程&#xff09;采集PLC数据&#xff0c;并通过MQTT协议和VISION&#xff08;WEB组态&#xff09;实现数据交互。 以采集西门子PLC为例&#xff0c;要采集的PLC的IP、端口和点…...

编程日记 2026/1/8 11:26:22

【cocos creator 3.x】速通3d模型导入， 模型创建，阴影，材质使用，模型贴图绑定

1、右键创建平面&#xff0c;立方体 2、点击场景根节点&#xff0c;shadows勾选enabled3、点击灯光&#xff0c;shadow enabled勾选 4、点击模型&#xff0c;勾选接收阴影&#xff0c;投射阴影&#xff08;按照需要勾选&#xff09; 5、材质创建 6、选中节点&#xff0c;找…...

编程日记 2026/1/11 23:45:56

批量创建OpenStack实例

在Linux终端实现批量创建OpenStack实例&#xff0c;支持支持统计、并发创建、安全确认、重试机制、日志。 #!/bin/bash # # 增强版OpenStack实例创建脚本&#xff08;修复日志功能&#xff09; # 功能&#xff1a;支持统计、并发创建、安全确认、重试机制 # 更新日期&#xf…...

编程日记 2025/12/27 13:50:55

常用的 ​​SQL 语句分类整理​​

以下是常用的 ​​SQL 语句分类整理​​&#xff0c;覆盖数据查询、操作、表管理和高级功能&#xff0c;适用于大多数关系型数据库&#xff08;如 MySQL、PostgreSQL、SQL Server&#xff09;&#xff1a; 目录 ​​一、数据查询&#xff08;DQL&#xff09;​​ ​​1. 基础查…...

编程日记 2025/12/8 23:50:52

驱动开发硬核特训 · Day 15：电源管理核心知识与实战解析

在嵌入式系统中&#xff0c;电源管理&#xff08;Power Management&#xff09;并不是“可选项”&#xff0c;而是实际部署中影响系统稳定性、功耗、安全性的重要一环。今天我们将以 Linux 电源管理框架 为基础&#xff0c;从理论结构、内核架构&#xff0c;再到典型驱动实战&a…...

编程日记 2026/1/11 23:24:37

【零基础】基于DeepSeek-R1与Qwen2.5Max的行业洞察自动化平台

自动生成行业报告，通过调用两个不同的大模型（DeepSeek 和 Qwen），完成从行业趋势分析到结构化报告生成的全过程。 完整代码：https://mp.weixin.qq.com/s/6pHi_aIDBcJKw1U61n1uUg 🧠 1. 整体目的与功能 该脚本实现了一个名为 ReportGenerator 的类，用于： 调用 DeepSe…...

编程日记 2026/1/8 11:26:29

Web前端 （CSS篇）

什么是CSS&#xff1f; css(Cascading Style Sheets)是层叠样式表或级联样式表&#xff0c;是一组设置规则&#xff0c;用于控制web页面外观。 为什么使用CSS? CSS 用于定义网页的样式&#xff0c;包括针对不同设备和屏幕尺寸的设计和布局。 CSS 实例 body {background-col…...

编程日记 2026/1/13 12:11:15

C 语言联合与枚举：自定义类型的核心解析

目录 1.联合体 1.1联合体的声明与创建 1.2联合体在内存中的存储 1.3相同成员的结构体与内存比较 1.4联合体内存空间大小的计算 1.5联合体的应用 2.枚举类型 2.1枚举变量的声明 2.2枚举变量的优点 2.3枚举的使用 上篇博客中&#xff0c;我们通过学习了解了C语言中一种自…...

编程日记 2026/1/12 13:35:10

基于Canal+Spring Boot+Kafka的MySQL数据变更实时监听实战指南

前期知识背景 binlog 什么是binlog 它记录了所有的DDL和DML(除 了数据查询语句)语句&#xff0c;以事件形式记录&#xff0c;还包含语句所执行的消耗的时间&#xff0c;MySQL 的二进制日志是事务安全型的。一般来说开启二进制日志大概会有1%的性能损耗。 binlog分类 MySQL Bi…...

编程日记 2026/1/12 23:41:17