鱼跃

介绍

编程导航项目教程         

https://www.codefather.cn/course/1948291549923344386/section/1948579246632808450https://www.codefather.cn/course/1948291549923344386/section/1948579246632808450

这是一套以 AI 开发实战 + 后端架构设计 为核心的项目教程，基于 Spring Boot 3 + LangChain4j + Vue 3 开发对标大厂的 企业级 AI 代码生成平台.目前已经在github上发布

githubhttps://github.com/pengyuyanITYU/YU-AI-CODE.git

技术选型

四大核心能力

(1）智能代码生⁡成

用户输入需求描述，AI⁠ 自动分析并选择合适的生成‌策略，通过工具调用生成代码‌文件，采用流式输出让用户实‎时看到 AI 的执行过程。

(2）可视化编⁡辑

生成的应用将实时展⁠示，可以进入编辑模式，‌自由选择网页元素并且和‌ AI 对话来快速修改‎页面，直到满意为止。

(3）一键部⁡署分享

可以将生成的⁠应用一键部署到云端并‌自动截取封面图，获得‌可访问的地址进行分享‎，同时支持完整项目源码下载。

预览

通过springBoot接口实现一个静态资源服务接口。

> 虽然无需额外进程,更加方便,但是功能相对比较简单,性能低,不如专业的WEB服务器

部署

通过修改nginx配置来映射资源路径实现

> 功能相对更加丰富,性能更好

部署后的项目会调用Selenium实现异步自动截图

(4）企业级管⁡理

提供用户管理、应用管⁠理、系统监控、业务指标监‌控等后台功能，管理员可以‌设置精选应用、监控 AI‎ 调用情况和系统性能。

用户管理

管理员可以逻辑删除用户,数据仍然在数据库,避免用户信息丢失

应用管理

管理员可以精选或者删除应用

系统监控

可以用ARMS来监控系统运行状况,也可以通过Prometheus来监控和grafana提供可视化来实现.但是得人工埋雷

扩展

应用版本化管理

用户可以随时回退到历史版本,并且可以不同版本之间的差异

实现方案

后端不做复杂数据处理,返回两个对比的版本内容。主要是前端得配置vite-plugin-monaco-editor来处理Monaco的Worker文件加载

踩过的坑

版本化管理对比关闭时的死机

版本对比功能使用了 **Monaco Editor**(就是 VS Code 用的那个编辑器),这是一个非常强大但也很"重"的组件。当你关闭对比弹窗时,系统需要销毁所有的编辑器实例和文本模型,这个过程非常耗时,会阻塞主线程,导致界面卡死。

解决方案

1. 延迟销毁 (Deferred Disposal)

const disposeAllEditors = () => {
  // 先把引用保存下来
  const editorsToDispose = Array.from(editorInstances.values())
  const modelsToDispose = [...models]
  // 立即清空引用(让弹窗可以马上关闭)
  editorInstances.clear()
  models.length = 0
  // 延迟到下一个事件循环再销毁(不阻塞UI)
•
  setTimeout(() => {
•
    editorsToDispose.forEach(e => e.dispose())
•
    modelsToDispose.forEach(m => m.dispose())
•
  }, 0)
•
}

核心思路:

• 关闭弹窗时,先清空所有引用,让界面立即响应

• 把真正的销毁工作放到*setTimeout(..., 0)*里,这样会在下一个事件循环执行

• 用户感觉弹窗立即关闭了,实际上清理工作在后台异步进行

2. 移除 Vue 响应式开销

// 之前(有响应式开销):
•
const editorInstances = ref(new Map())
•
const models = ref([])
•
// 现在(纯 JS 对象):
•
const editorInstances = new Map()
•
const models = []

Monaco Editor 实例和模型是大对象,不需要 Vue 的响应式追踪。移除 ref** 后,减少了大量不必要的性能开销**

3. 手风琴模式 + 即时销毁

<a-collapse accordion destroyInactivePanel>

• accordion: 一次只能展开一个文件

• destroyInactivePanel: 折叠时立即销毁 DOM

• 配合watch(activeKeys)监听,切换时立即销毁旧编辑器

4. 强制组件销毁

<AppVersionDiff v-if="diffVisible" ... />

使用 v-if** 而不是 v-show,确保关闭时整个组件从 DOM 中移除并销毁。**

效果

流程:

1. 点击关闭按钮 → 弹窗立即消失 ✅

2. 后台异步清理 Monaco 资源(用户无感知) ✅

3. 内存正常释放,不会累积 ✅