# 在线运行预览实施计划

> **给智能体执行者：** 必须使用 `superpowers:subagent-driven-development`（推荐）或 `superpowers:executing-plans`，按任务逐项执行。本计划使用复选框（`- [ ]`）跟踪进度。

**目标：** 为 EasyCode 生成出来的项目增加第一期本机在线运行预览能力。

**架构：** 新增一个内存态运行预览服务，负责导出生成源码、解压到本地工作目录、初始化 MySQL、启动后端/前端子进程，并暴露状态查询和停止接口。在现有项目预览页增加一个紧凑的运行预览控制区。

**技术栈：** Spring Boot 2.5、Java 8、JUnit 4、Mockito、Vue 3、Element Plus、Vite。

---

### 任务 1：后端运行预览核心能力

**文件：**
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/ProjectRunPreviewStatus.java`
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/IFrontProjectRunPreviewService.java`
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/RunPreviewPortAllocator.java`
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/RunPreviewDatabaseInitializer.java`
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/RunPreviewProcessRunner.java`
- 新建：`ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/FrontProjectRunPreviewServiceImpl.java`
- 测试：`ruoyi-generator/src/test/java/com/ruoyi/generator/service/front/FrontProjectRunPreviewServiceImplTest.java`

- [ ] 编写失败测试：启动预览后返回后端/前端 URL，创建工作目录，初始化数据库，并启动两个进程。
- [ ] 编写失败测试：停止预览会终止两个进程，并返回 `STOPPED`。
- [ ] 实现最小可用的服务、辅助类和 DTO。
- [ ] 运行 `mvn -pl ruoyi-generator -Dtest=FrontProjectRunPreviewServiceImplTest test`。

### 任务 2：后端控制器接口

**文件：**
- 修改：`ruoyi-admin/src/main/java/com/ruoyi/web/controller/front/FrontProjectController.java`

- [ ] 增加启动、状态查询和停止预览接口。
- [ ] 每个接口通过 `SecurityUtils.getUserId()` 获取当前用户，并委托给 `IFrontProjectRunPreviewService`。
- [ ] 运行 `mvn -pl ruoyi-admin -am -DskipTests package`。

### 任务 3：生成模板运行时配置

**文件：**
- 修改：`ruoyi-generator/src/main/resources/qing/application.yml.vm`
- 修改：`ruoyi-generator/src/main/resources/qing/vue-config.js.vm`

- [ ] 后端端口和数据源通过环境变量配置。
- [ ] Vue 开发服务端口和后端代理地址通过环境变量配置。
- [ ] 如已有 qing 模板测试，则运行相关测试。

### 任务 4：前端预览页控制区

**文件：**
- 修改：`easycode-web/src/api/project.js`
- 修改：`easycode-web/src/views/PreviewView.vue`
- 测试：`easycode-web/src/views/previewView.test.mjs`

- [ ] 编写失败的源码级测试，覆盖运行预览控件和 API 调用。
- [ ] 增加 `startRunPreview`、`getRunPreviewStatus` 和 `stopRunPreview` API 方法。
- [ ] 在预览页增加运行预览按钮、状态文本、预览链接和日志展示。
- [ ] 运行前端单元/源码测试，并使用 Node 20 执行 `npm run build`。

### 任务 5：验证

**文件：**
- 预计不新增文件。

- [ ] 运行目标后端测试。
- [ ] 运行目标前端测试。
- [ ] 运行后端打包构建。
- [ ] 使用 Node 20 运行前端生产构建。
- [ ] 说明限制：第一期依赖本机可用的 MySQL、Maven、Node/npm。