VTJ.PRO 在线应用开发平台的代码生成与模板系统

踩着两条虫
0 阅读4分钟

代码生成（出码）与模板系统

本页面详细介绍了 VTJ.PRO 平台中的代码生成流水线及模板初始化系统。该系统实现了领域特定语言（DSL）与 Vue 3 源代码之间的双向转换、项目级打包以及平台特定起始模板的管理。

1. 代码生成流水线

代码生成流水线负责将低代码应用的抽象 DSL 表示转换为可部署的 Vue 3 源代码，反之亦然。

1.1 DSL 转 Vue（dslToVue）

平台利用 @vtj/coder 生成器将项目或页面的 DSL 转换为标准的 Vue 3 单文件组件（SFC）。此过程确保在工作区中进行的可视化配置被转换为高性能、可读的代码。

  • 逻辑流程：DslService 通过调用 coder 工具来处理 DSL 节点并输出字符串化的 Vue 代码，从而编排转换过程。
  • 关键实体：后端业务模块中的 DslService。

1.2 Vue 转 DSL（vueToDsl）

为了支持导入现有组件或将手动代码更改同步回低代码引擎，系统使用 @vtj/parser。该解析器分析 Vue SFC 结构，并提取重构 VTJ DSL 所需的元数据。

1.3 项目打包（genProject）

genProject 函数处理“导出代码”（出码）的最终阶段。它将生成的 Vue 文件、静态资源和配置文件聚合到一个标准化的项目结构中，打包成 ZIP 归档文件，并将结果上传到对象存储（OSS）。

项目生成序列图

下图展示了从 DSL 请求到可下载 ZIP 包的流程。

sequenceDiagram
    participant IDE/Workbench
    participant DslService (backend)
    participant @vtj/coder
    participant Archiver (ZIP)
    participant OssService

    IDE/Workbench->>DslService (backend): Request genProject(appId)
    DslService (backend)-->>DslService (backend): Fetch Project DSL & Pages
    loop For each Page
        DslService (backend)->>@vtj/coder: dslToVue(pageDsl)
        @vtj/coder-->>DslService (backend): Vue SFC String
    end
    DslService (backend)->>Archiver (ZIP): Add Vue files + Template files
    Archiver (ZIP)-->>DslService (backend): Project.zip Buffer
    DslService (backend)->>OssService: upload(zipBuffer)
    OssService-->>DslService (backend): File URL
    DslService (backend)-->>IDE/Workbench: Return Download URL

2. AI 辅助代码生成（Coder Agent）

平台集成了大语言模型能力，可根据自然语言指令生成或修改 Vue 代码。这一过程由专门的提示词模板管理，这些模板强制执行严格的架构约束。

2.1 提示词策略

系统使用版本化的提示词模板来引导 AI 模型（如 GPT-4 或 Claude）生成兼容的代码。

  • 核心约束：
    • 技术栈：严格使用 Vue 3 配合 Options API + setup() 混合模式。
    • 依赖控制：仅允许使用通过 <%= dependencies %> 传入的库。
    • 输出格式：支持全量生成或使用 SEARCH/REPLACE 差异格式进行增量更新。

2.2 增量更新逻辑（SEARCH/REPLACE）

为避免因微小更改而重写大文件，AI 被指示使用基于差异的格式。

  • 阈值：如果修改内容占总行数 ≤ 50%，AI 必须使用增量输出。
  • 算法：AI 识别一个唯一的“SEARCH”块（理想情况下 ≤ 3 行），并提供相应的“REPLACE”块。

3. 模板系统

templates/ 目录包含新项目的蓝图。这些模板预先配置了 VTJ 运行时（@vtj/renderer、@vtj/web）和平台特定的依赖项。

3.1 模板变体

平台提供三种主要项目模板：

  1. Web：标准桌面/后台应用模板。
  2. H5：针对移动端优化的 Web 应用模板。
  3. UniApp：适用于微信小程序和移动应用的跨平台模板。

3.2 模板初始化与打包

模板不是以原始目录形式使用，而是被打包成 ZIP 文件，供后端在用户创建新应用时克隆。

  • 打包脚本：scripts/template.mjs 负责将 templates/ 子目录的内容压缩，并放入 backend/zip/ 目录。
  • 部署：在项目初始化期间，TemplateService 根据所选平台（Web/H5/UniApp）解压对应的 ZIP 包，并填充新项目的元数据。

模板系统代码映射图

下图展示了物理模板文件与管理它们的服务类之间的关系。

flowchart TD
    subgraph "Filesystem (templates/)"
        A["templates/web/"]
        B["templates/h5/"]
        C["templates/uniapp/"]
    end

    subgraph "Build Tooling"
        D["scripts/template.mjs"]
    end

    subgraph "Backend Services"
        E[backend/zip/*.zip]
        F["TemplateService (backend)"]
        G["DslService (backend)"]
    end

    A -->|Zipped by| D
    B -->|Zipped by| D
    C -->|Zipped by| D
    D -->|Output to| E
    E -->|Read by| F
    F -->|Initialize App| G

4. 图像转代码与设计稿转代码（D2C）

代码生成系统还支持多模态输入，将视觉设计数据转换为 Coder Agent 的结构化提示词。

4.1 图像分析

image.md 提示词指南使 AI 能够分析 UI 组件的截图。它会提取：

  • 导航元素：页眉/菜单的功能和位置。
  • 布局结构：网格/弹性盒定义及间距。
  • 调色板：主要和次要元素的具体十六进制颜色值。

4.2 JSON 元数据分析

对于设计工具（如 Figma 或 Sketch），json.md 提示词指示 AI 处理图层元数据。这确保生成的代码尊重原始设计文件的精确尺寸和层级结构。

参考资料

avatar
文章
阅读
粉丝