257 lines
7.3 KiB
Markdown
257 lines
7.3 KiB
Markdown
# 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 方案一致。
|