docs: add EasyCode homepage product showcase design
This commit is contained in:
王鹏
@@ -0,0 +1,139 @@
|
||||
# EasyCode 主页产品能力陈列改版设计
|
||||
|
||||
## 目标
|
||||
|
||||
将 `easycode-web` 的主页从单一生成流程引导，改成“产品能力陈列 + 生成旅程主线”的首页。页面要让用户一眼知道 EasyCode 不只是生成表结构，而是覆盖需求、系统蓝图、数据库、页面、图表、代码文档、运行预览和源码交付的全链路项目生成平台。
|
||||
|
||||
已确认方向：
|
||||
|
||||
- 首页采用产品能力陈列方向，而不是只做工作台入口或登录后的项目总览。
|
||||
- 能力组织方式采用“按生成旅程组织”，避免功能入口墙过于分散。
|
||||
- 只改 `easycode-web` 主页内容和样式，不新增接口，不改后端生成链路。
|
||||
|
||||
## 当前基础
|
||||
|
||||
现有前台已经具备这些业务能力：
|
||||
|
||||
- `/generate?mode=one-click`：一键生成完整项目，包含项目名称、项目描述、AI 生成需求、视觉主题、用户前台开关、代码模板、生成进度、业务闭环报告、预览和下载入口。
|
||||
- `/generate?mode=expert`：高级调整数据库设计、ER 图和页面设计，并重新同步生成结果。
|
||||
- `/projects`：我的项目列表，支持继续编辑、图表中心、论文初稿、代码解读、预览、下载和删除。
|
||||
- `/project/:projectId/diagrams`：图表中心，支持 ER、功能模块图、系统架构图、流程图、用例图、时序图、UML 类图等。
|
||||
- `/project/:projectId/paper-draft`：论文初稿生成和编辑。
|
||||
- `/project/:projectId/code-analysis`：代码解读报告生成和编辑。
|
||||
- `/project/:projectId/preview`：项目结构、代码预览、运行预览、源码下载。
|
||||
- `/source-store`：源码项目库。
|
||||
|
||||
现有主页已有关键词输入、示例业务、流程卡片、交付内容和适用场景，但没有充分展示图表中心、论文初稿、代码解读、源码库、视觉主题和闭环报告等现有业务功能。
|
||||
|
||||
## 页面结构
|
||||
|
||||
### 1. 首屏
|
||||
|
||||
首屏保留关键词生成入口，但文案升级为平台级定位：
|
||||
|
||||
- Eyebrow：`EasyCode 全链路项目生成平台`
|
||||
- 标题：强调“从业务描述到可运行源码交付”
|
||||
- 说明文案：概括 AI 需求、系统蓝图、数据库、页面、图表、运行预览和源码下载
|
||||
- 输入框：继续使用业务关键词输入
|
||||
- 主按钮：进入 `/generate?mode=one-click`，带上非空 `keyword`
|
||||
- 辅助按钮：查看我的项目、进入源码库
|
||||
- 示例关键词：客户管理、设备巡检、合同审批、售后工单
|
||||
|
||||
首屏右侧展示一个紧凑的能力摘要，而不是只展示 5 步流程：
|
||||
|
||||
- 一键模式 / 高级调整
|
||||
- AI 生成需求
|
||||
- 业务闭环报告
|
||||
- 预览与下载
|
||||
|
||||
### 2. 生成旅程能力地图
|
||||
|
||||
主体用 8 个阶段展示产品能力，每个阶段包含标题、短说明和关联功能：
|
||||
|
||||
1. 需求与项目设置：AI 需求、视觉主题、代码模板、用户前台开关
|
||||
2. 系统蓝图：角色、菜单、前后台范围、模块设计
|
||||
3. 数据库与 ER：表结构、字段、关系、ER 图
|
||||
4. 页面与业务块：前台页面、后台页面、查询表单、轮播公告等业务块
|
||||
5. 图表中心：ER、流程、架构、用例、时序、UML 类图等图表
|
||||
6. 代码与文档：代码解读报告、论文初稿
|
||||
7. 运行预览：后端、用户前台、后台前端预览
|
||||
8. 源码交付：项目结构预览、源码下载、源码库沉淀
|
||||
|
||||
地图应像产品能力导航，而不是过长说明文。每个卡片保持可扫描，重点信息控制在 2 到 3 行。
|
||||
|
||||
### 3. 延展能力
|
||||
|
||||
在旅程地图下方展示 4 个延展能力：
|
||||
|
||||
- 源码库：沉淀可交付、可运行、可二开的企业级源码项目
|
||||
- 图表中心：从项目数据生成多类型图表并支持导出
|
||||
- 代码解读：生成项目源码分析报告
|
||||
- 论文初稿：基于项目生成正文初稿并支持编辑
|
||||
|
||||
这些卡片需要有明确入口或提示：
|
||||
|
||||
- 源码库跳转 `/source-store`
|
||||
- 我的项目跳转 `/projects`，再进入图表中心、代码解读、论文初稿
|
||||
|
||||
### 4. 适用场景
|
||||
|
||||
保留场景区，但让它服务于产品能力解释：
|
||||
|
||||
- 客户与商机管理：CRM 类项目生成
|
||||
- 设备巡检与维保：台账、计划、异常、工单流程
|
||||
- 合同审批流：拟定、审批、归档、付款状态
|
||||
- 源码二开与交付：生成可运行骨架，沉淀到源码库复用
|
||||
|
||||
### 5. 快捷入口
|
||||
|
||||
页面底部增加轻量快捷入口，避免用户读完能力介绍后没有下一步：
|
||||
|
||||
- 立即创建项目：`/generate?mode=one-click`
|
||||
- 查看我的项目：`/projects`
|
||||
- 浏览源码库：`/source-store`
|
||||
|
||||
## 交互与数据流
|
||||
|
||||
- `useExample(example)` 继续只填充关键词，不自动跳转。
|
||||
- `handleGenerate()` 继续跳转 `/generate`，query 包含 `mode: 'one-click'` 和可选 `keyword`。
|
||||
- `goProjects()` 继续跳转 `/projects`。
|
||||
- 新增 `goSourceStore()` 跳转 `/source-store`。
|
||||
- 不请求新接口，不依赖登录态渲染不同内容。
|
||||
- 需要登录的目标页继续由现有路由守卫处理。
|
||||
|
||||
## 视觉与响应式
|
||||
|
||||
- 沿用当前 `easycode-web` 的 Element Plus、8px 卡片圆角、浅色背景和克制的蓝色主色。
|
||||
- 避免全页只使用单一蓝色，能力图标使用蓝、青、琥珀、靛、绿色、紫、红棕、深灰等语义色。
|
||||
- 首屏保持信息密度，不做营销式大图 hero。
|
||||
- 卡片不嵌套卡片；区块用自然布局和轻边框卡片表达。
|
||||
- 桌面端首屏为左右布局，旅程地图为 4 列或自适应多列。
|
||||
- 中等屏幕旅程地图降为 2 列。
|
||||
- 移动端首屏、能力地图、延展能力和场景区全部单列堆叠。
|
||||
- 文字不得溢出按钮、卡片或输入框；长词允许换行。
|
||||
|
||||
## 测试
|
||||
|
||||
前端现有 `homeView.test.mjs` 是源文件结构测试，需要更新断言，覆盖：
|
||||
|
||||
- 主页包含新的平台定位文案。
|
||||
- 主页包含 8 个旅程阶段数据。
|
||||
- 主页包含延展能力数据。
|
||||
- 主页包含源码库入口。
|
||||
- `handleGenerate()` 保留 `/generate` 和 `mode: 'one-click'`。
|
||||
- 页面仍包含业务关键词示例、场景卡片和项目入口。
|
||||
|
||||
还需要运行：
|
||||
|
||||
- `node --test src/views/homeView.test.mjs`
|
||||
- `npm run build`
|
||||
|
||||
如本地依赖或环境阻塞构建，需要记录具体失败原因。
|
||||
|
||||
## 非目标
|
||||
|
||||
- 不新增后端接口。
|
||||
- 不改变登录、注册、项目列表、工作台、预览页、源码库的路由或行为。
|
||||
- 不做登录后的动态统计仪表盘。
|
||||
- 不新增远程图片、生成图片或新的图标库。
|
||||
- 不重构全局布局、导航或主题体系。
|
||||
Reference in New Issue
Block a user