VTJ.PRO 在线应用开发平台概览

VTJ.PRO 平台概览

目的与范围

VTJ.PRO 是一个 AI 驱动的低代码应用开发平台，在浏览器中提供功能完整的在线集成开发环境 (IDE)。它将可视化设计、AI 辅助代码生成和多平台输出（Web、H5、UniApp）统一到一个基于 Vue 3、TypeScript 和 NestJS 构建的单仓库中。

本页提供了平台结构、能力和关键代码入口点的高级地图。有关设置说明，请参阅 开始使用与项目初始化 。有关生产部署，请参阅 部署与运维 。有关许可细节，请参阅 许可与商业模型。

单仓库结构

仓库组织为三个顶级目录加上支持性基础设施：

目录	目的	关键技术
`backend/`	NestJS API 服务器 --- 身份验证、RBAC、DSL 存储、AI 代理、订单系统	NestJS, TypeORM, MySQL, CASL, OpenAI SDK
`frontend/`	Vue 3 多入口 SPA --- 管理面板、工作台、可视化设计器、平台运行时	Vue 3, Vite, Element Plus, @vtj/pro
`templates/`	用于代码生成输出的脚手架项目（web, h5, uniapp）	Vue 3, Vite, @vtj/renderer
`scripts/`	构建、清理、发布打包和模板打包脚本	Node.js (ESM)
`_docs/`	文档：开始使用、部署、许可、维基、迁移指南、AI 提示词	Markdown

单仓库结构图

flowchart TD Root["vtj-pro-test (monorepo root)"] Backend["backend/"] Frontend["frontend/"] Templates["templates/"] Scripts["scripts/"] Docs["_docs/"] Root --> Backend Root --> Frontend Root --> Templates Root --> Scripts Root --> Docs Backend --> BackendCore["backend/src/core/"] Backend --> BackendBiz["backend/src/business/"] Backend --> BackendDB["backend/src/database/"] Backend --> BackendShared["backend/src/shared/"] Frontend --> FrontendViews["frontend/src/views/"] Frontend --> FrontendPlatform["frontend/src/platform/"] Frontend --> FrontendApis["frontend/src/apis/"] Frontend --> FrontendExtension["frontend/src/extension/"] Templates --> TemplateWeb["templates/web/"] Templates --> TemplateH5["templates/h5/"] Templates --> TemplateUniapp["templates/uniapp/"] Scripts --> CleanMjs["scripts/clean.mjs"] Scripts --> PublishMjs["scripts/publish.mjs"] Scripts --> TemplateMjs["scripts/template.mjs"]

关键能力

可视化设计与 DSL 管道

平台围绕一个 DSL（领域特定语言） 展开，该语言将 UI 组件、页面和块描述为 JSON 结构。可视化设计器（@vtj/pro）生成 DSL，通过前端的 DevService 和后端的 DslModule 进行存储。在运行时，@vtj/renderer 将 DSL 解释为实时的 Vue 组件，无需构建步骤。

AI 代码生成

集成的 AI 代理系统 （backend/src/business/agent/）连接到可配置的 LLM 模型（backend/src/core/llm/），提供对话式代码生成。_docs/prompts/ 中的提示词模板指导 AI 使用结构化的 SEARCH/REPLACE 差异格式生成 Vue SFC 代码和 DSL 修改。

多平台输出（出码）

代码生成管道（backend/src/business/dsl/generator.ts）将存储的 DSL 转换为独立的 Vue 项目，针对三个平台：Web 、H5 （移动 Web）和 UniApp （跨平台原生）。templates/ 中的项目脚手架为每个目标提供构建基础设施。

核心管道：设计 → DSL → 运行时 / 代码生成

高层架构

系统遵循三层架构：作为静态资源提供的 Vue 3 前端、暴露 REST API 的 NestJS 后端，以及通过 TypeORM 管理的 MySQL 数据库。

三层架构图

flowchart TD subgraph Browser[Browser] MainEntry["main entry (admin + workbench)"] AuthEntry["auth entry (login/register)"] DevEntry["dev entry (AppDesigner / TemplateDesigner)"] WebEntry["web entry (Web runtime)"] H5Entry["h5 entry (H5 runtime)"] end subgraph Backend["NestJS Backend (backend/src/)"] AppModule["AppModule (app.module.ts)"] CoreModules["Core Modules: UserModule, RoleModule, PermissionModule, DictionaryModule, SettingModule, OssModule, LlmModelModule, ConfigurationModule, CacheModule, EmailModule"] BizModules["Business Modules: LowcodeAppModule, DslModule, TemplateModule, AgentModule, OpenModule, OrderModule, ProductModule, ReportModule, DailyModule, SkillModule"] end subgraph Data[Data Layer] MySQLDB["MySQL Database"] OSSStorage["OSS / Local File Storage"] end MainEntry -->|REST API| AppModule AuthEntry -->|REST API| AppModule DevEntry -->|REST API| AppModule WebEntry -->|REST API| AppModule H5Entry -->|REST API| AppModule AppModule --> CoreModules AppModule --> BizModules CoreModules --> MySQLDB BizModules --> MySQLDB CoreModules --> OSSStorage

后端模块映射

后端组织为核心模块 （身份验证、授权、系统配置）和业务模块（低代码应用、DSL、模板、AI 代理、订单）。

层	模块	主要职责
核心	`UserModule`	用户 CRUD、JWT 身份验证、OAuth
核心	`PermissionModule`	通过 CASL 实现 RBAC
核心	`RoleModule`	角色管理
核心	`DictionaryModule`	系统字典
核心	`SettingModule`	平台设置
核心	`LlmModelModule`	LLM 提供商配置与缓存
核心	`OssModule`	文件上传（阿里 OSS / 本地）
核心	`ConfigurationModule`	环境与数据库配置
核心	`CacheModule`	应用级缓存
核心	`EmailModule`	邮件验证
业务	`LowcodeAppModule`	应用 CRUD 与版本管理
业务	`DslModule`	DSL 存储、开发/生产环境、代码生成
业务	`TemplateModule`	模板管理与版本管理
业务	`AgentModule`	AI 主题、聊天、提示词
业务	`OpenModule`	公共 API 端点
业务	`OrderModule`	订单处理
业务	`ProductModule`	产品定义（Tokens, Plus, Pro）
业务	`SkillModule`	可扩展的 AI 技能系统
业务	`ReportModule`, `DailyModule`	分析和日常任务

前端入口点与平台

前端使用 Vite 的多页面构建，产生六个不同的入口点，每个服务于不同的用户上下文：

入口点	HTML 文件	目的
`main`	`index.html`	管理面板 + 用户工作台
`auth`	`auth.html`	登录、注册、密码重置
`dev`	`dev.html`	可视化设计器（`AppDesigner`, `TemplateDesigner`）
`web`	`web.html`	Web 平台运行时（DSL → 实时应用）
`h5`	`h5.html`	移动 H5 平台运行时
`uniapp`	---	UniApp 跨平台运行时

每个平台运行时（frontend/src/platform/web/、frontend/src/platform/h5/、frontend/src/platform/uniapp/）包含一个 adapter.ts，用于配置平台特定行为并连接到 @vtj/renderer 进行 DSL 解释。

前端入口点到后端 API 流程

flowchart TD subgraph FrontendEntryPoints["Frontend Entry Points"] Main["main (admin/workbench views)"] Auth["auth (LoginBox, RegisterBox)"] Dev["dev (AppDesigner.vue, TemplateDesigner.vue)"] Web["web (platform/web/App.vue)"] H5["h5 (platform/h5/App.vue)"] end subgraph APIs["frontend/src/apis/"] UserApi["user.ts"] AppApi["app.ts"] DslApi["dsl.ts"] TemplateApi["template.ts"] AgentApi["agent.ts"] OssApi["oss.ts"] DictApi["dict.ts"] SettingApi["setting.ts"] end subgraph Controllers[Backend Controllers] UserCtrl["UserController"] AppCtrl["LowcodeAppController"] DslCtrl["DslController"] TemplateCtrl["TemplateController"] AgentCtrl["AgentController"] OssCtrl["OssController"] end Main --> UserApi Main --> AppApi Main --> DslApi Main --> DictApi Main --> SettingApi Auth --> UserApi Dev --> DslApi Dev --> TemplateApi Dev --> AgentApi Dev --> OssApi Web --> DslApi Web --> AppApi H5 --> DslApi H5 --> AppApi UserApi --> UserCtrl AppApi --> AppCtrl DslApi --> DslCtrl TemplateApi --> TemplateCtrl AgentApi --> AgentCtrl OssApi --> OssCtrl

数据与基础设施

平台使用 MySQL 作为主数据存储，通过 TypeORM 实体访问。种子系统（backend/src/database/seeding/）使用基于 JSON 的种子数据初始化数据库，包括字典、权限、角色、设置、LLM 模型和技能。迁移系统（backend/src/database/migration/）通过每个实体的迁移任务和回滚支持处理模式演变。

文件上传由 OssModule 处理，根据配置支持阿里云 OSS 和本地文件存储。

有关数据库实体、种子和迁移的详细信息，请参阅 系统架构 下的子页面。

构建与发布系统

scripts/ 目录包含三个关键的构建工具：

脚本	目的
`scripts/clean.mjs`	清理构建产物
`scripts/publish.mjs`	将发布 ZIP 包（`vtj-pro-full`、`vtj-pro-cloud`）打包到 `_releases/`
`scripts/template.mjs`	将项目模板打包为 ZIP 文件用于代码生成

构建支持多个环境（local、sit、live）以及相应的 .env 文件。有关详细信息，请参阅部署与运维。

文档与指南

文档	路径	内容
开始使用	`_docs/1_开始.md`	克隆、依赖、初始设置
项目初始化	`_docs/2_项目初始化.md`	数据库设置、种子数据、开发服务器
部署与运维	`_docs/3_部署运维.md`	Nginx、PM2、生产构建
授权协议	`_docs/4_授权协议.md`	商业许可条款
AI 提示词	`_docs/prompts/`	编码器、图像、JSON 提示词模板
维基	`_docs/wiki/`	带图表的架构文档
迁移	`_docs/migration/`	SQL 迁移脚本和指南

子页面

开始使用与项目初始化 --- 设置说明：克隆仓库、使用 pnpm 安装依赖、配置 .env 文件、数据库设置、运行开发服务器和初始种子数据。
部署与运维 --- 生产部署：使用 nginx、PM2 进程管理、环境特定构建（sit/prod）以及发布打包系统。
许可与商业模型 --- 商业许可协议、产品类型（Tokens, Plus, Pro）、订单系统和平台运营模式（免费、邀请、订阅）。

参考资料

官方文档：vtj.pro/
在线平台：app.vtj.pro/
开源仓库：gitee.com/newgateway/...