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

踩着两条虫2026-03-26 10:55

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 → 运行时 / 代码生成

flowchart TD Designer["@vtj/pro Visual Designer"] DevSvc["DevService (frontend/src/shared/service.ts)"] DslMod["DslModule (backend/src/business/dsl/)"] MySQL["MySQL --- dsl table"] Renderer["@vtj/renderer (Runtime)"] Coder["@vtj/coder (Code Gen)"] Generator["generator.ts (createProjectZipFile)"] TemplatesDir["templates/ (web, h5, uniapp)"] Output["Standalone Vue Project (.zip)"] Designer -->|save DSL JSON| DevSvc DevSvc -->|HTTP API| DslMod DslMod -->|TypeORM| MySQL MySQL -->|load DSL| Renderer MySQL -->|load DSL| Generator Generator -->|uses| Coder Generator -->|scaffolds from| TemplatesDir Generator --> Output

高层架构

系统遵循三层架构：作为静态资源提供的 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）、订单系统和平台运营模式（免费、邀请、订阅）。

参考资料

相关推荐
AI视觉网奇2 小时前
https://docker.m.daocloud.io/v2 访问失败
人工智能
空间宇航2 小时前
基于ATML标准的设备自动化系统构建方案
人工智能·自动化·软件构建·通用测试
西西学代码2 小时前
Flutter---SingleChildScrollView
前端·javascript·flutter
ZTLJQ2 小时前
构建现代Web应用：Python全栈框架完全解析
前端·数据库·python
GIS数据转换器2 小时前
空间智能赋能城市低空数字底座及智能网联系统建设方案
大数据·人工智能·信息可视化·数据挖掘·无人机
猫咪老师2 小时前
万字长文，细节满满~RAG的优化
人工智能·性能优化
Chockong2 小时前
00_最小神经网络训练流程
人工智能·深度学习·神经网络
zzb15802 小时前
Claude Agent SDK 深度剖析：依赖、权衡与架构选择
人工智能·python·ai
youyoulg2 小时前
无监督学习—聚类
人工智能·机器学习·支持向量机
热门推荐
01GitHub 镜像站点02Qwen3.5 开源全解析：从 0.8B 到 397B，代际升级 + 全场景选型指南03围棋-html版本04班级宠物园部署指南05小黑课堂计算机二级WPSoffice题库软件下载安装教程（2026年3月最新版）06OpenClaw 使用和管理 MCP 完全指南07UV安装并设置国内源08“wsl --install -d Ubuntu-22.04”下载慢，中国地区离线安装 Ubuntu 22.04 WSL方法（亲测2025年5月6日）09机器学习深度学习二——GAN网络10OpenClaw Control UI安全上下文访问配置