diff --git a/RuoYi-Vue/docs/mockups/frontend-function-reorg-options.html b/RuoYi-Vue/docs/mockups/frontend-function-reorg-options.html new file mode 100644 index 0000000..9c3347f --- /dev/null +++ b/RuoYi-Vue/docs/mockups/frontend-function-reorg-options.html @@ -0,0 +1,840 @@ + + + + + + EasyCode 前台功能重组草图 + + + +
+
+
+ EC + EasyCode 前台功能重组 +
+ +
+ +
+
+

第一版梳理结论

+

乱感不是功能缺,而是所有阶段都挤在同一个工作台里

+

+ 当前链路已经很强:需求、系统模块、数据库、业务动作、页面设计、预览运行都有了。 + 主要问题是导航层级和页面职责没有跟上功能增长,用户进入后不知道“现在在哪一步、下一步做什么、哪些是高级编辑”。 +

+
+ + +
+ +
+
+
+

选择一个重组方向

+

三种方案,从小改到重构信息架构

+
+ 点击卡片会高亮,回到聊天回复 A/B/C +
+ +
+
+
+ A + 小改动 +
+

保留现有页面,工作台改成步骤式

+

把 `/generate` 清成一条纵向流程,顶部固定进度条,当前阶段只展示一个主操作区。

+
+
+
+
项目生成工作台 保存草稿 / 预览
+
需求 -> 系统模块 -> 数据库 -> 业务流程 -> 页面设计 -> 预览
+
+ +
+
+
+
+
+
+
+
+
    +
  • 开发成本最低,能快速降低“堆在一起”的感觉。
  • +
  • 适合先救急,但项目越来越大后仍可能再次拥挤。
  • +
+
+ +
+
+ B + 推荐 +
+

新增项目详情枢纽,功能按阶段分区

+

把 `/generate` 变成“创建/继续项目”的入口,把每个项目放进 `/project/:id/workspace` 统一管理。

+
+
+
+
客户管理系统 运行预览 / 下载
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
    +
  • 最适合当前功能规模,后续业务块、模板市场、运行日志都能自然加进去。
  • +
  • 改动中等,需要调整路由和若干页面职责,但不是推倒重写。
  • +
+
+ +
+
+ C + 设计器优先 +
+

把页面设计器作为主舞台

+

项目打开后直接进入设计器,数据库、业务动作、业务块作为左侧资源和右侧配置。

+
+
+
+
页面设计器 保存 / 预览
+
+ +
+
+
+
+
+
+
+
+
+
+
+
    +
  • 页面搭建体验会最强,适合把产品定位成低代码设计工具。
  • +
  • 会弱化“从需求生成项目”的主线,改动和认知成本最大。
  • +
+
+
+
当前建议选择 B:项目详情枢纽。它能保住生成主线,也能容纳越来越多的设计能力。
+
+ +
+
+ + +
+
+
+

项目概览作为“下一步”中控台

+

用户不用记住入口,只看当前完成度和下一步动作。

+
+
+ 保存草稿 + 继续下一步 +
+
+ +
+
+

需求完整度

+ 项目名称、关键词、补充说明、模块选择。 +
+
+

生成状态

+ 系统蓝图、数据库、业务动作、页面设计的任务状态。 +
+
+

交付出口

+ 项目结构预览、运行预览、源码下载。 +
+
+ +
+ 推荐落地方式 +

+ 第一阶段先不大改后端:保留现有 API 和组件,把页面职责重排。 + `GenerateView` 缩成创建/载入入口;新增 `ProjectWorkspaceView` 承接当前工作台的主流程; + `PageDesignerView` 和 `PreviewView` 继续独立全屏,但由项目工作区统一进入。 +

+
+
+
+
+ +
+

路由层级草案

+

把“平台入口”和“项目内工作”分开

+ +
+
+ + + + diff --git a/RuoYi-Vue/docs/superpowers/specs/2026-05-28-frontend-function-reorg-design.md b/RuoYi-Vue/docs/superpowers/specs/2026-05-28-frontend-function-reorg-design.md new file mode 100644 index 0000000..bac478b --- /dev/null +++ b/RuoYi-Vue/docs/superpowers/specs/2026-05-28-frontend-function-reorg-design.md @@ -0,0 +1,256 @@ +# 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 方案一致。