# 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`

如本地依赖或环境阻塞构建，需要记录具体失败原因。

## 非目标

- 不新增后端接口。
- 不改变登录、注册、项目列表、工作台、预览页、源码库的路由或行为。
- 不做登录后的动态统计仪表盘。
- 不新增远程图片、生成图片或新的图标库。
- 不重构全局布局、导航或主题体系。