TinyPro 低代码设计器

这是一个集成了 TinyPro 定制 generate-code 插件的低代码设计器模板。

🚀 快速开始

1. 安装依赖

pnpm install

2. 启动开发服务器

# 启动设计器（包含 mock 服务）
pnpm dev

# 仅启动前端
pnpm serve:frontend

# 仅启动 mock 服务
pnpm serve:mock

3. 构建生产版本

# 构建生产版本
pnpm build

# 构建测试版本
pnpm build:alpha

🎯 TinyPro 集成特性

定制功能

• ✅ TinyPro 专用的代码生成器 - 替换了标准的 generate-code 插件
• ✅ SystemIntegration 组件 - 支持与 TinyPro 后台系统集成
• ✅ 自定义出码流程 - 适配 TinyPro 的业务需求

插件结构

src/plugins/tinypro-generate-code/
├── Main.vue                 # 主组件
├── SystemIntegration.vue    # 系统集成对话框
├── FileSelector.vue         # 文件选择器
├── composable/              # 组合式函数
├── styles/                  # 样式文件
├── http.js                  # HTTP 服务
├── meta.js                  # 插件元数据
└── index.js                 # 插件入口

🔧 配置说明

注册表配置 (registry.js)

import TinyProGenerateCode from "./src/plugins/tinypro-generate-code";

export default {
  // 使用 TinyPro 版本的 generate-code 插件
  [META_APP.GenerateCode]: TinyProGenerateCode,
  // ... 其他配置
};

自定义配置

如果需要进一步定制，可以：

1. 修改插件配置: 编辑 src/plugins/tinypro-generate-code/meta.js
2. 调整界面: 修改 src/plugins/tinypro-generate-code/Main.vue
3. 扩展集成功能: 更新 src/plugins/tinypro-generate-code/SystemIntegration.vue

📁 项目结构

tinypro-lowcode-designer/
├── src/
│   ├── composable/          # 组合式函数
│   ├── configurators/       # 配置器
│   ├── plugins/             # 定制插件
│   │   └── tinypro-generate-code/  # TinyPro 版本的代码生成器
│   ├── main.js             # 主入口
│   └── preview.js          # 预览入口
├── package.json            # 项目配置
├── registry.js             # 插件注册表
├── engine.config.js        # 引擎配置
└── vite.config.js          # 构建配置

🔌 插件开发

创建自定义插件

1. 在 src/plugins/ 下创建新插件目录
2. 实现插件逻辑
3. 在 registry.js 中注册插件

扩展现有插件

可以基于 tinypro-generate-code 插件进行扩展：

1. 修改 SystemIntegration.vue 添加新的集成功能
2. 扩展 composable/ 目录中的组合式函数
3. 更新样式文件适配新的 UI

📖 使用说明

1. 启动项目: 运行 pnpm dev 启动开发服务器
2. 使用出码功能: 点击工具栏中的"出码"按钮
3. 系统集成: 在弹出的对话框中配置 TinyPro 系统集成选项
4. 生成代码: 确认后将生成适配 TinyPro 的代码

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可证

MIT License