代码生成（出码）与模板系统
本页面详细介绍了 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 包的流程。
2. AI 辅助代码生成（Coder Agent）
平台集成了大语言模型能力，可根据自然语言指令生成或修改 Vue 代码。这一过程由专门的提示词模板管理，这些模板强制执行严格的架构约束。
2.1 提示词策略
系统使用版本化的提示词模板来引导 AI 模型（如 GPT-4 或 Claude）生成兼容的代码。
- 核心约束 ：
- 技术栈 ：严格使用 Vue 3 配合 Options API +
setup()混合模式。 - 依赖控制 ：仅允许使用通过
<%= dependencies %>传入的库。 - 输出格式：支持全量生成或使用 SEARCH/REPLACE 差异格式进行增量更新。
- 技术栈 ：严格使用 Vue 3 配合 Options API +
2.2 增量更新逻辑（SEARCH/REPLACE）
为避免因微小更改而重写大文件，AI 被指示使用基于差异的格式。
- 阈值：如果修改内容占总行数 ≤ 50%，AI 必须使用增量输出。
- 算法：AI 识别一个唯一的"SEARCH"块（理想情况下 ≤ 3 行），并提供相应的"REPLACE"块。
3. 模板系统
templates/ 目录包含新项目的蓝图。这些模板预先配置了 VTJ 运行时（@vtj/renderer、@vtj/web）和平台特定的依赖项。
3.1 模板变体
平台提供三种主要项目模板：
- Web：标准桌面/后台应用模板。
- H5：针对移动端优化的 Web 应用模板。
- UniApp：适用于微信小程序和移动应用的跨平台模板。
3.2 模板初始化与打包
模板不是以原始目录形式使用，而是被打包成 ZIP 文件，供后端在用户创建新应用时克隆。
- 打包脚本 ：
scripts/template.mjs负责将templates/子目录的内容压缩，并放入backend/zip/目录。 - 部署 ：在项目初始化期间，
TemplateService根据所选平台（Web/H5/UniApp）解压对应的 ZIP 包，并填充新项目的元数据。
模板系统代码映射图
下图展示了物理模板文件与管理它们的服务类之间的关系。
4. 图像转代码与设计稿转代码（D2C）
代码生成系统还支持多模态输入，将视觉设计数据转换为 Coder Agent 的结构化提示词。
4.1 图像分析
image.md 提示词指南使 AI 能够分析 UI 组件的截图。它会提取：
- 导航元素：页眉/菜单的功能和位置。
- 布局结构：网格/弹性盒定义及间距。
- 调色板：主要和次要元素的具体十六进制颜色值。
4.2 JSON 元数据分析
对于设计工具（如 Figma 或 Sketch），json.md 提示词指示 AI 处理图层元数据。这确保生成的代码尊重原始设计文件的精确尺寸和层级结构。
参考资料
- 官网文档：vtj.pro/
- 在线平台：app.vtj.pro/
- 开源仓库：gitee.com/newgateway/...