6.3 KiB
6.3 KiB
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 个阶段展示产品能力，每个阶段包含标题、短说明和关联功能：
- 需求与项目设置：AI 需求、视觉主题、代码模板、用户前台开关
- 系统蓝图：角色、菜单、前后台范围、模块设计
- 数据库与 ER：表结构、字段、关系、ER 图
- 页面与业务块：前台页面、后台页面、查询表单、轮播公告等业务块
- 图表中心：ER、流程、架构、用例、时序、UML 类图等图表
- 代码与文档：代码解读报告、论文初稿
- 运行预览：后端、用户前台、后台前端预览
- 源码交付：项目结构预览、源码下载、源码库沉淀
地图应像产品能力导航，而不是过长说明文。每个卡片保持可扫描，重点信息控制在 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.mjsnpm run build
如本地依赖或环境阻塞构建，需要记录具体失败原因。
非目标
- 不新增后端接口。
- 不改变登录、注册、项目列表、工作台、预览页、源码库的路由或行为。
- 不做登录后的动态统计仪表盘。
- 不新增远程图片、生成图片或新的图标库。
- 不重构全局布局、导航或主题体系。