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

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

前言

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 变更特性概览

主题开发能力：cli支持用户自定义主题
插件灵活布局：所有插件面板统一浮动和固定逻辑，部分面板可拖拽调整宽度
默认页与主页功能优化调整
大纲树支持复制、删除、多选能力
文档开源：文档从内部托管迁移至了Github
项目TS改造
AI插件支持输入用户大模型API Token使用AI功能
同时支持 unpkg 与 npmmirror CDN
修复了多个问题，优化了一些交互与功能细节。

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.production

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

\# 需配合 VITE\_CDN\_TYPE 使用，值必须是 npmmirror

VITE\_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