tiny-toolkit-lowcode-designer/README.md

TinyPro 低代码设计器模板 - 基于 TinyEngine 的定制化低代码平台脚手架

# TinyPro 低代码设计器

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

## 🚀 快速开始

### 1. 安装依赖

```bash
pnpm install
```

### 2. 启动开发服务器

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

# 仅启动前端
pnpm serve:frontend

# 仅启动 mock 服务
pnpm serve:mock
```

### 3. 构建生产版本

```bash
# 构建生产版本
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)

```javascript
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