您的位置: 首页> Vue

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

匿名上传

发布时间:2026-03-28 10:36:01

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 迁移脚本和指南