# 方案设计 在本篇方案设计中 html 和 三文件项目，都统一称为普通项目，vue工程化项目，称为vue项目，本篇提供一种可选思路，项目中的具体代码实现皆是根据此思路展开，并非专业教学资料，内容请自行甄别 首先需要观察普通项目和vue项目生成和修改的特点： - 生成：普通项目不需要调用工具，自己解析生成的内容，保存到文件中，vue项目需要调用工具处理 - 修改：普通项目是全量修改，每次修改都会生成新的文件。而vue项目因为体量大，不能每次修改就全量重新生成，而是采用调用工具进行单个或多个文件的批量修改。 统一新建一张`项目版本控制记录表`，记录每次修改时的版本文件信息：  改造分为两部分，第一部分是原有生成逻辑的改造，另一部分是新开发的版本控制页面和后台逻辑。 ## 生成/修改项目后端改造 1. 在app表中增加version版本字段 2. 在调用`addApp`生成app时，初始化一个版本号为0。 3. 调用`chatToGenCod`e后，生成文件，并且保存对话记忆成功后，版本号 + 1。 对于vue项目，修改时调用`FileModifyTool`，能拿到appId，要替换的旧内容，替换后的新内容三个参数 在这里将该文件替换后的新内容保存到`项目版本控制记录表`，注意，如果当前应用版本是1，还要保存该文件要替换的旧内容。（如果不保存，那么修改完成后，项目目录中的vue项目，该文件已经被替换成了新的文件，这样就找不到最初的历史版本了。如果不保存，要找到最初的历史版本，就应该在生成第一版项目，调用`FileWriteTool`中将生成的第一版文件全部保存到数据库中， 没有必要。） 对于普通项目，在解析文件，写入本地目录后，追加写入到`项目版本控制记录表`的逻辑。 ## 版本控制页面 这一块的设计参考了git的版本管理展示，版本比对前端使用的是 **`v-code-diff`** 插件进行实现 1. 悬浮在应用选项卡上，增加一个历史版本按钮 2. 点击按钮后进入一个新页面，页面左侧展示该app**最新版**的所有文件，默认选中第一个，右侧展示该文件具体的代码 3. 如果用户双击左侧文件列表中的某一个文件，页面右下方弹出该文件的所有历史版本列表，展示创建人，创建时间，用户提示词 4. 单击某一条，右侧展示历史版本的代码，并且和当前不一致的高亮展示。 ## 版本控制后端逻辑 主要需要以下的接口： 1. 根据appId 查询最新版本的文件列表，用于左侧菜单展示，需要是树形结构。 2. 根据文件名和应用id 查询具体文件的内容返回，用于右侧部分的代码内容展示。 3. 根据文件名和应用id,找到某个文件的所有历史版本，返回创建人，创建时间，用户提示词，用于页面右下角的历史版本展示 4. 根据文件名和应用id,具体的版本，查询具体文件的内容返回。用于版本比对