yidaima/RuoYi-Vue/docs/superpowers/specs/2026-05-28-frontend-function-reorg-design.md

EasyCode 前台功能重组设计

目标

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

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

目标体验：

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

当前问题

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

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

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

• /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 内按阶段组合。

数据流

项目创建：

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

项目工作区加载：

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

AI 生成：

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

页面设计：

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

预览交付：

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 方案一致。