我尝试将TinyPro集成TinyEngine低代码设计器了

OpenTiny社区
8 阅读4分钟

本文由TinyPro贡献者宋子文原创。

TinyPro 与 TinyEngine 是 OpenTiny 开源生态的重要组成部分：

  • TinyPro 提供企业级后台系统模板
  • TinyEngine 提供灵活强大的低代码引擎

本项目在 TinyPro 中深度集成了基于 TinyEngine 的低代码设计器，通过 插件化架构 构建出可扩展的低代码开发平台。

借助它，你只需在可视化设计器中完成页面设计，就能一键导入 TinyPro，并自动生成菜单、权限及国际化配置，实现真正的 “所见即所得” 式开发体验。

整体架构

lowcode-designer/
├── src/
│   ├── main.js              # 应用入口
│   ├── composable/          # 可组合逻辑
│   ├── configurators/       # 配置器
├── registry.js              # 插件注册表
├── engine.config.js         # 引擎配置
└── vite.config.js          # 构建配置

image.png

核心组成部分

  1. TinyEngine 核心：提供低代码设计器的基础能力
  2. 插件系统：通过插件扩展功能
  3. 注册表机制：统一管理插件和服务
  4. 配置器系统：自定义组件属性配置

核心特性

  • ✨ 智能代码生成：基于可视化设计自动生成符合 TinyPro 规范的 Vue 3 + TypeScript 代码
  • 🔐 自动认证管理：智能获取和管理 API Token，支持多种认证方式
  • 🎯 一键集成：自动创建菜单、配置权限、添加国际化词条
  • 🛠️ 代码转换：将 TinyEngine 生成的代码自动转换为 TinyPro 项目兼容格式
  • 💾 本地保存：支持将生成的文件保存到本地文件系统
  • 🎨 可视化配置：提供友好的 UI 界面进行菜单和路由配置

快速开始

安装

使用 TinyCli 可以快速初始化 TinyPro 模版

tiny init pro

image 1.png

启动低代码设计器

cd lowcode-designer
pnpm install
pnpm dev

启动前端与后端

cd web
pnpm install
pnpm start

cd nestJs
pnpm install
pnpm start

启动完成后，访问 👉 http://localhost:8090 即可体验低代码设计器。

使用流程

image 2.png

设计页面：在 TinyEngine 可视化编辑器中设计页面

image 3.png

点击出码按钮：点击工具栏中的”出码”按钮

image 4.png

配置菜单信息：在弹出的对话框中填写菜单配置信息

生成预览：点击”生成预览”查看将要生成的文件

image 5.png

完成集成：点击”完成集成”自动创建菜单、分配权限并保存文件

image 6.png

接下来我们就可以直接去 TinyPro 直接看到页面效果

image 7.png

TinyPro Generate Code 插件解析

插件目录结构

generate-code-tinypro/
├── package.json              # 插件包配置
├── src/
│   ├── index.js             # 插件入口
│   ├── meta.js              # 元数据定义
│   ├── Main.vue             # 主组件
│   ├── SystemIntegration.vue # 功能组件
│   ├── components/          # 通用组件
│   │   ├── ToolbarBase.vue
│   │   ├── ToolbarBaseButton.vue
│   │   └── ToolbarBaseIcon.vue
│   ├── composable/          # 可组合逻辑
│   │   ├── index.js
│   │   └── useSaveLocal.js
│   └── http.js              # HTTP 服务
├── vite.config.js           # 构建配置
└── README.md                # 文档

代码生成流程

const generatePreview = async () => {
  // 1. 获取当前页面的 Schema
  const currentSchema = getSchema();

  // 2. 获取应用元数据（i18n、dataSource、utils等）
  const metaData = await fetchMetaData(params);

  // 3. 获取页面列表和区块信息
  const pageList = await fetchPageList(appId);
  const blockSchema = await getAllNestedBlocksSchema();

  // 4. 调用代码生成引擎
  const result = await generateAppCode(appSchema);

  // 5. 过滤和转换生成的代码
  const transformedFiles = filteredFiles.map((file) => ({
    ...file,
    fileContent: transformForTinyPro(file.fileContent),
  }));
};

TinyPro 与 TinyEngine 通信

当用户在低代码设计器中点击“完成集成”时，插件首先通过 Token Manager 向认证接口 /api/auth/api-token 请求并获取访问凭证（Token），随后利用该 Token 调用一系列后台接口，包括国际化 API、菜单 API 和角色 API。插件通过这些接口自动完成 页面国际化词条创建、菜单注册、角色查询与权限分配 等步骤。整个过程中，HTTP Client 统一负责与后端通信，而返回的数据（菜单信息、角色信息、权限配置等）会实时更新到本地，最终实现了从页面设计到系统集成的一键闭环，使 TinyEngine 生成的页面能无缝接入 TinyPro 系统。

image 8.png

总结

通过 TinyPro 与 TinyEngine 的深度融合，我们实现了从「可视化设计」到「系统集成」的完整闭环，让不会写代码的用户也能轻松构建出高质量的前端页面。

用户只需拖拽组件、填写配置、点击“出码”，插件便会自动生成符合 TinyPro 标准的代码，并完成菜单、权限、国际化等系统级配置。

这一过程无需手动修改代码或后台配置，就能一键完成页面创建、接口绑定与权限分配，实现真正意义上的「低门槛、高效率、可扩展」的前端开发体验。

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyPro 源码：github.com/opentiny/ti…
TinyEngine 源码： github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyPro、TinyEngine、TinyVue、TinyNG、TinyCLI、TinyEditor~

如果你也想要共建，可以进入代码仓库，找到 good first issue 标签，一起参与开源贡献~

avatar
文章
阅读
粉丝