# EasyCode 前台功能重组设计

## 目标

重组 `easycode-web` 前台页面的信息架构，把当前堆在 `/generate` 的生成、编辑、页面设计入口、预览入口和 AI 状态拆成更清晰的项目内工作区。

本次选择方案 B：新增项目详情枢纽，功能按阶段分区。

目标体验：

- 用户从首页或项目列表进入项目后，先看到项目当前进度和下一步动作。
- 创建项目、项目内编辑、页面设计、预览运行有明确边界。
- 保留现有后端接口和主要组件能力，优先做前台结构重组，不做后端重构。

## 当前问题

当前前台主链路已经完整：

```text
首页 -> 生成工作台 -> 页面设计器 -> 项目预览/运行预览
```

问题不是功能缺失，而是功能增长后页面职责没有重新分层：

- `/generate` 同时承担创建项目、AI 生成、数据库编辑、业务动作编辑、页面设计入口、预览入口。
- 用户难判断当前处于哪一步，也不容易知道下一步动作。
- 页面设计器已经独立，但工作台仍保留过多页面设计状态和入口说明。
- 预览页已经包含结构预览和运行预览，入口应该从项目交付阶段统一进入。

## 设计决策

### 路由分层

保留平台级页面：

- `/`：首页，只负责产品介绍、关键词输入和引导创建。
- `/projects`：我的项目，负责项目列表、继续编辑、删除等项目级动作。
- `/generate`：创建/继续项目入口，负责新建项目草稿、填写基础需求、恢复最近项目。
- `/source-store`、`/source-store/:sourceId`：源码库相关页面，保持平台级入口。
- `/profile`：个人中心。

新增项目内工作区：

- `/project/:projectId/workspace`：项目详情枢纽，承载项目内主流程。

继续保留独立工具页面：

- `/project/:projectId/page-designer`：全屏页面设计器。
- `/project/:projectId/preview`：项目结构预览、运行预览和源码下载。

### 页面职责

#### GenerateView

改造成轻量创建页。

保留：

- 项目名称。
- 需求关键词。
- 补充说明。
- 是否生成用户前台。
- 后台功能模块选择。
- 创建项目并进入工作区。
- 打开最近项目。

移出：

- 系统模块设计面板。
- 数据库设计器。
- 业务流程设计面板。
- 页面设计入口卡片。
- 预览项目动作。
- AI 任务详情和历史列表。

#### ProjectWorkspaceView

新增项目工作区，作为项目内中控台。

左侧项目导航：

- 项目概览。
- 需求与 AI。
- 系统蓝图。
- 数据模型。
- 业务动作。
- 页面设计。
- 预览交付。

右侧内容区按当前导航展示功能：

- 项目概览：项目信息、完成度、下一步动作、关键入口。
- 需求与 AI：基础需求表单、AI 配额、任务状态、生成历史。
- 系统蓝图：系统模块设计摘要、模块图、JSON 调整。
- 数据模型：数据库设计器、ER 图、保存表结构。
- 业务动作：业务流程设计摘要、JSON 调整、保存。
- 页面设计：前台/后台页面设计统计、初始化页面、进入设计器。
- 预览交付：生成项目预览、进入结构预览、进入运行预览、下载提示。

#### PageDesignerView

保持独立页面，减少工作区干扰。

工作区只提供入口和状态，真正的页面树、画布、属性面板、业务块配置继续在页面设计器内完成。

#### PreviewView

保持独立页面，继续负责：

- 后端、前台前端、后台前端项目结构。
- 文件代码预览。
- 运行预览启动、停止、日志、iframe 预览。
- 源码下载。

工作区的预览交付页只负责进入这里，并在需要时先触发生成项目。

## 前端结构

新增：

- `easycode-web/src/views/ProjectWorkspaceView.vue`

调整：

- `easycode-web/src/router/index.js`
  - 增加 `/project/:projectId/workspace`。
  - 创建成功、项目列表继续编辑入口指向工作区。
- `easycode-web/src/views/GenerateView.vue`
  - 收敛为创建页。
  - 创建或更新项目后跳转工作区。
- `easycode-web/src/views/ProjectListView.vue`
  - 继续编辑进入工作区。
- `easycode-web/src/components/AppHeader.vue`
  - 保持平台级导航，避免把项目内阶段塞进全局导航。

优先复用现有组件：

- `AiTaskStatusPanel.vue`
- `AppBlueprintPanel.vue`
- `DatabaseDesigner.vue`
- `ErDiagramView.vue`
- `BusinessBlueprintPanel.vue`

这些组件在 `ProjectWorkspaceView` 内按阶段组合。

## 数据流

项目创建：

```text
HomeView / GenerateView
  -> createProject / updateProject
  -> /project/:projectId/workspace
```

项目工作区加载：

```text
ProjectWorkspaceView
  -> getProject
  -> getDatabase
  -> listPageDesigns(frontend/admin)
  -> listBusinessBlocks
  -> getAiQuota
  -> listGenerations
```

AI 生成：

```text
ProjectWorkspaceView
  -> createAiTask(app_blueprint/database/business_blueprint)
  -> polling getAiTask
  -> apply result to local state
  -> saveDatabase when needed
```

页面设计：

```text
ProjectWorkspaceView
  -> initPageDesigns
  -> /project/:projectId/page-designer?scope=frontend|admin
```

预览交付：

```text
ProjectWorkspaceView
  -> saveDatabase
  -> generateProject
  -> /project/:projectId/preview
```

## 状态与错误处理

项目工作区统一显示：

- 项目加载失败。
- AI 任务失败，可重试。
- 数据库为空时，引导先生成或手动添加表。
- 页面设计未初始化时，引导初始化。
- 预览生成失败时，显示错误并停留在工作区。

页面级原则：

- 创建页只校验创建项目所需字段。
- 工作区按阶段给出下一步动作。
- 页面设计器离开前继续保留未保存确认。
- 预览页继续自行处理结构、文件、运行预览错误。

## 测试

前端测试重点：

- 路由包含 `/project/:projectId/workspace` 并要求登录。
- `GenerateView` 创建项目后跳转工作区。
- `ProjectListView` 继续编辑指向工作区。
- `ProjectWorkspaceView` 能加载项目、数据库、页面设计和业务块。
- 工作区能触发系统蓝图、数据库、业务动作生成。
- 工作区能进入前台/后台页面设计器。
- 工作区能生成并进入预览页。

手工验收：

1. 首页输入关键词进入创建页。
2. 创建项目后进入项目工作区。
3. 在工作区能看到项目概览和阶段导航。
4. 生成系统蓝图、数据库、业务动作。
5. 初始化前台和后台页面设计。
6. 从工作区进入页面设计器并返回。
7. 从工作区进入预览页，查看结构和运行预览。
8. 从我的项目继续编辑时进入工作区。

## 分期实施

第一阶段：

- 新增 `ProjectWorkspaceView`。
- 调整路由和项目入口。
- 将 `GenerateView` 收敛为创建页。
- 在工作区复用现有生成、数据库、业务动作、页面设计入口和预览逻辑。

第二阶段：

- 根据工作区使用情况，继续拆出更小的阶段组件。
- 优化项目概览完成度和下一步规则。
- 清理 `GenerateView` 中迁移后不再需要的状态和样式。

## 自检

- 无未定义占位项。
- 范围聚焦在前台信息架构和页面职责重组。
- 不要求后端 API 改造。
- 页面设计器和预览页继续保持独立，避免一次改动过大。
- 设计和已确认的 B 方案一致。