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 @@
+
+
+
+
+
+
+ EC
+ EasyCode 前台功能重组
+
+
+
+
+
+
+
第一版梳理结论
+
乱感不是功能缺,而是所有阶段都挤在同一个工作台里
+
+ 当前链路已经很强:需求、系统模块、数据库、业务动作、页面设计、预览运行都有了。
+ 主要问题是导航层级和页面职责没有跟上功能增长,用户进入后不知道“现在在哪一步、下一步做什么、哪些是高级编辑”。
+
+
+
+
+
+
+
+
+
+
选择一个重组方向
+
三种方案,从小改到重构信息架构
+
+
点击卡片会高亮,回到聊天回复 A/B/C
+
+
+
+
+
+ A
+ 小改动
+
+ 保留现有页面,工作台改成步骤式
+ 把 `/generate` 清成一条纵向流程,顶部固定进度条,当前阶段只展示一个主操作区。
+
+
+
+
项目生成工作台 保存草稿 / 预览
+
需求 -> 系统模块 -> 数据库 -> 业务流程 -> 页面设计 -> 预览
+
+
+
+
+ - 开发成本最低,能快速降低“堆在一起”的感觉。
+ - 适合先救急,但项目越来越大后仍可能再次拥挤。
+
+
+
+
+
+ B
+ 推荐
+
+ 新增项目详情枢纽,功能按阶段分区
+ 把 `/generate` 变成“创建/继续项目”的入口,把每个项目放进 `/project/:id/workspace` 统一管理。
+
+
+
+
客户管理系统 运行预览 / 下载
+
+
+
+
+
+
+
+
+
+
+ - 最适合当前功能规模,后续业务块、模板市场、运行日志都能自然加进去。
+ - 改动中等,需要调整路由和若干页面职责,但不是推倒重写。
+
+
+
+
+
+ C
+ 设计器优先
+
+ 把页面设计器作为主舞台
+ 项目打开后直接进入设计器,数据库、业务动作、业务块作为左侧资源和右侧配置。
+
+
+
+
页面设计器 保存 / 预览
+
+
+
+
+
+
+
+
+
+
+
+ - 页面搭建体验会最强,适合把产品定位成低代码设计工具。
+ - 会弱化“从需求生成项目”的主线,改动和认知成本最大。
+
+
+
+ 当前建议选择 B:项目详情枢纽。它能保住生成主线,也能容纳越来越多的设计能力。
+
+
+
+
+
+
+
+
+
+
+
+ 需求完整度
+ 项目名称、关键词、补充说明、模块选择。
+
+
+ 生成状态
+ 系统蓝图、数据库、业务动作、页面设计的任务状态。
+
+
+ 交付出口
+ 项目结构预览、运行预览、源码下载。
+
+
+
+
+
推荐落地方式
+
+ 第一阶段先不大改后端:保留现有 API 和组件,把页面职责重排。
+ `GenerateView` 缩成创建/载入入口;新增 `ProjectWorkspaceView` 承接当前工作台的主流程;
+ `PageDesignerView` 和 `PreviewView` 继续独立全屏,但由项目工作区统一进入。
+
+
+
+
+
+
+
+ 路由层级草案
+ 把“平台入口”和“项目内工作”分开
+
+ /首页,只做产品说明、关键词输入、进入创建流程。
+ /projects我的项目,列表、搜索、继续编辑、复制项目、删除。
+ /generate创建项目/选择模板/恢复最近项目,不再承载所有编辑器。
+ /project/:id/workspace项目详情枢纽,承载需求、蓝图、数据库、业务动作、页面设计入口和进度。
+ /project/:id/page-designer全屏页面设计器,专注页面树、画布、属性面板、业务块。
+ /project/:id/preview项目结构、代码预览、运行预览、下载源码。
+
+
+
+
+
+
+
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 方案一致。