伯索云学堂
224.22MB · 2026-02-15
本文由体验技术团队Hexqi原创。
TinyEngine 是一款面向未来的低代码引擎底座，致力于为开发者提供高度可定制的技术基础设施——不仅支持可视化页面搭建等核心能力，更可通过 CLI 工程化方式实现深度二次开发，帮助团队快速构建专属的低代码平台。
无论是资源编排、服务端渲染、模型驱动应用，还是移动端、大屏端、复杂页面编排场景，TinyEngine 都能灵活适配，成为你构建低代码体系的坚实基石。
最近我们正式发布 TinyEngine v2.10 版本，带来多项功能升级与体验优化：模型驱动、登录鉴权、应用中心等全新特性，同时还有Schema面板与画布节点同步、出码源码即时预览、支持添加自定义 MCP 服务器等功能进行了增强，以让开发协作、页面搭建变得更简单、更高效。
在传统的后台管理系统开发中，创建一个包含表单、表格和完整 CRUD(增删改查) 功能的页面往往需要开发者：
这种重复性劳动不仅耗时，还容易出错。
模型驱动特性通过声明式的数据模型配置，自动生成对应的 UI 组件和数据交互逻辑，实现真正的"零代码"生成数据管理页面。
核心模块：
| 模块 | 功能 |
|---|---|
| 模型管理器插件 | 可视化创建数据模型、配置字段和 API，管理模型 |
| 内置模型组件 | 表单、表格、组合表单+表格，基于模型自动生成表单、表格，或组合生成完整 CRUD 页面 |
| 模型绑定配置器组件 | 为模型生成 UI、绑定 CRUD 逻辑 |
支持的模型字段类型：String（字符串）、Number（数字）、Boolean（布尔）、Date（日期）、Enum（枚举）、ModelRef（关联模型）
1. 创建数据模型
打开模型管理器插件，创建数据模型（如"用户信息"）：
2. 配置接口路径（可选）
创建模型时，可以选择：
3. 拖拽模型组件到页面
在物料面板中选择模型组件拖拽到画布：
4. 绑定模型，自动生成
选中组件后，在右侧属性面板：
1） 点击"绑定模型数据"，选择刚才创建的模型
2） 系统自动生成 UI 界面
3） 系统自动绑定 CRUD 接口
4） 一站式完成前后端搭建
5. 预览页面
预览即可看到包含搜索、新增、编辑、删除、分页功能的完整数据管理页面。
graph LR
A[创建数据模型] --> B{选择接口路径}
B -->|默认路径| C[后端自动生成<br/>SQL表结构+CRUD接口]
B -->|自定义路径| D[对接已有后端]
C --> E[拖拽模型组件到页面]
D --> E
E --> F[绑定模型]
F --> G[系统自动生成UI]
F --> H[系统自动绑定接口]
G --> I[预览完整CRUD页面]
H --> I
style A fill:#e1f5fe
style C fill:#fff3e0
style G fill:#f3e5f5
style H fill:#f3e5f5
style I fill:#e8f5e9
定义好数据模型，前后端自动生成：
让用户专注于业务逻辑和模型设计，而非重复的 UI 代码编写。
TinyEngine v2.10 引入了完整的用户认证系统，支持用户登录、注册、密码找回，并结合多租户体系，让您的设计作品可以实现云端保存、多设备同步和团队协作。
系统采用 Token 认证机制，通过 HTTP 拦截器实现统一的请求处理和权限验证：
sequenceDiagram
participant 用户
participant 前端应用
participant HTTP拦截器
participant 后端API
用户->>前端应用: 1. 输入用户名/密码登录
前端应用->>后端API: 2. POST /platform-center/api/user/login
后端API-->>前端应用: 3. 返回 Token
前端应用->>前端应用: 4. 保存 Token 到 localStorage
Note over 前端应用,后端API: 后续请求自动携带 Token
前端应用->>HTTP拦截器: 5. 发起业务请求
HTTP拦截器->>HTTP拦截器: 6. 检查 Token 并注入 Authorization 头
HTTP拦截器->>后端API: 7. 携带 Token 的请求
后端API-->>HTTP拦截器: 8. 返回数据 或 认证失败(401)
alt 认证失败
HTTP拦截器->>前端应用: 9. 清除 Token，显示登录弹窗
前端应用->>用户: 10. 提示重新登录
end
1）登录界面：访问 TinyEngine 时系统会自动弹出登录窗口，未登录用户需完成登录或注册。
2）组织切换：登录后可通过以下方式切换组织：
3）退出/重新登录：已登录用户可以点击右上角头像在菜单点击"退出登录"，进入登录页面重新登录
1）个人使用：登录后即可享受云端保存、多设备同步等功能，设计作品永不丢失。
2）团队协作：
1）环境配置：
pnpm dev:withAuth 命令启用登录认证，pnpm dev 默认不启用（mock server）也可以修改配置文件来启动或关闭登录鉴权：
export default {
// enableLogin: true // 打开或关闭登录认证
}
2）多租户机制：
应用中心和模板中心是此次版本新增的两大核心功能模块。通过应用中心可以集中管理您创建的所有低代码应用，为不同的场景创建不同的应用；模板中心则让优秀页面设计得以沉淀为可复用资产，团队成员可以基于模板快速搭建新页面，大幅提升协作效率。
登录后进入应用中心，集中管理您创建的所有低代码应用。
功能亮点：
模板中心让页面设计资产得以沉淀和复用，提升团队协作效率。
核心价值：
在编辑器中点击左上角菜单按钮，悬停即可看到应用中心和模板中心入口，点击即可前往。
自动跳转规则：
组织权限说明：
如果不需要使用应用中心与模板中心，可以在注册表中进行关闭:
// registry.js
export default {
[META_APP.AppCenter]: false, // 关闭应用中心
[META_APP.TemplateCenter]: false // 关闭模板中心
// ...
}
出码功能新增源码预览能力，用户在导出代码前可以实时查看生成的源码内容，提升代码导出体验和准确性。
1） 在编辑器中点击「出码」按钮
2） 打开的弹窗中左侧树形列表显示所有可生成的文件，当前页面对应文件自动展示在右侧
3） 点击任意文件预览源码，勾选需要导出的文件
4） 点击「确定」选择保存目录完成导出
之前版本中，TinyEngine已经提供内置MCP 服务，可以通过MCP工具让AI调用平台提供的各种能力。 本次特性是在TinyEngine 中支持添加自定义 MCP (Model Context Protocol) 服务器，可以通过配置轻松集成第三方 MCP 服务，扩展 AI 开发助手的工具能力。
1） 准备您的 MCP 服务器（需符合 MCP 协议规范）
2） 在项目的 registry.js 中添加配置
// 使用示例
// registry.js
export default {
[META_APP.Robot]: {
options: {
mcpConfig: {
mcpServers: {
'my-custom-server': {
type: 'SSE', // 支持 'SSE' 或 'StreamableHttp'
url: 'https://your-server.com/sse',
name: '我的自定义服务器',
description: '提供xxx功能的工具',
icon: 'https://your-icon.png' // 可选
}
}
}
}
}
}
3） 刷新编辑器，在 AI 插件 MCP 管理面板中即可看到新添加的服务器
4） 启用服务器，选择需要的工具，即可在 AI 助手中开始使用！
您可以集成企业内部 MCP 服务、社区 MCP 服务、第三方 MCP 工具等，扩展 AI 助手的业务能力。
例如，下面是一个添加图片搜索MCP服务后使用AI生成带图片页面的场景示例：
Schema 面板新增"跟随画布"功能，启用后当在画布中选中组件时，Schema 面板会自动滚动到选中组件的对应位置并高亮显示。
打开 Schema 面板，勾选面板标题栏的"跟随画布"复选框启用。在画布中点击切换元素，即可看到 Schema 面板跟随变化。
效果如下：
页面 Schema 中的 CSS 样式字段由字符串格式优化为对象格式，提升样式配置的可读性和可维护性。系统会自动处理对象与字符串的相互转换，出码时自动转换为标准 CSS 字符串格式，同时完美兼容之前的字符串格式。
之前（字符串格式）：
"css": ".page-base-style { padding: 24px; background: #FFFFFF; } .block-base-style { margin: 16px; } .component-base-style { margin: 8px; }"
现在（对象格式）：
"css": {
".page-base-style": {
"padding": "24px",
"background": "#FFFFFF"
},
".block-base-style": {
"margin": "16px"
},
".component-base-style": {
"margin": "8px"
}
}
图表物料进行了如下优化：
演练场进行了全面升级，从原来的前端 Mock 数据改为完整的前后端部署，带来真实的体验环境。
升级亮点：
新演练场地址：playground.opentiny.design/tiny-engine…
通过下面两个入口都可以访问：
如您希望继续使用旧版演练场，依旧可以通过下面地址继续访问： 旧版演练场：opentiny.design/tiny-engine…
TinyEngine 官网首页 UI 全面焕新，带来更现代、更清爽的视觉体验。
访问新版官网：opentiny.design/tiny-engine
TinyEngine 文档与其他OpenTiny产品文档统一迁移至新docs子域名：
新域名：docs.opentiny.design/tiny-engine…
文档变化：
回首这一年，TinyEngine 在开源社区的成长离不开每一位开发者和贡献者的支持。v2.10 版本作为春节前的最后一次发布，我们为大家带来了多项重磅特性：
| 特性 | 核心价值 |
|---|---|
| 模型驱动 | 零代码 CRUD，开发效率跃升 |
| 多租户与登录鉴权 | 云端协作、团队协作 |
| 应用中心与模板中心 | 应用管理、资产沉淀 |
| 出码预览 | 导出前预览，提升代码导出体验 |
| 自定义 MCP | 扩展 AI 能力，集成企业服务 |
| Schema 面板同步滚动 | 画布与代码视图联动 |
| CSS 字段格式优化 | 对象格式，可读性更强 |
| 图表物料更新 | 配置平铺，更直观 |
| 新演练场 | 真实前后端，完整体验 |
| 新官网/文档 | UI 焕新，体验升级 |
致谢
本次版本的开发和问题修复诚挚感谢各位贡献者的积极参与！同时邀请大家加入开源社区的建设，让 TinyEngine 在新的一年里成长得更加优秀和茁壮！
新春祝福
值此新春佳节即将到来之际，TinyEngine 团队衷心祝愿大家：
新年快乐，万事如意！
愿新的一年里：
春节快乐，阖家幸福！
让我们在春节后带着满满的热情和能量，继续在未来道路上探索前行！
欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyEngine源码：github.com/opentiny/ti…
欢迎进入代码仓库 StarTinyEngine、TinyVue、TinyPro、TinyNG、TinyCLI、TinyEditor
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~
