# EasyCode Homepage Product Showcase Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Rework the EasyCode front homepage into a product capability showcase organized by the confirmed generation journey.

**Architecture:** Keep the change inside `easycode-web/src/views/HomeView.vue` and its source-level test. The view remains static and route-driven: data arrays describe the homepage content, and existing router navigation handles authenticated destinations.

**Tech Stack:** Vue 3 `<script setup>`, Element Plus, `@element-plus/icons-vue`, scoped SCSS, Node `node:test`.

---

## File Structure

- Modify: `easycode-web/src/views/homeView.test.mjs`
  - Assert the new product showcase information architecture, 8 journey stages, extension capabilities, source-store navigation, and preserved one-click generation route.
- Modify: `easycode-web/src/views/HomeView.vue`
  - Replace the 5-step homepage with a product showcase homepage: hero, capability summary, 8-stage journey, extension capabilities, scenarios, and final quick actions.
- Create: `docs/superpowers/plans/2026-07-07-easycode-homepage-product-showcase.md`
  - This plan.

## Task 1: Update Homepage Test First

**Files:**
- Modify: `easycode-web/src/views/homeView.test.mjs`
- Read-only reference: `docs/superpowers/specs/2026-07-07-easycode-homepage-product-showcase-design.md`

- [ ] **Step 1: Replace the old source assertions with the new homepage contract**

Use this complete test body:

```js
test('home page presents the product capability showcase journey', () => {
  const source = readView('HomeView.vue')

  assert.match(source, /const journeySteps = \[/)
  assert.match(source, /const extensionCapabilities = \[/)
  assert.match(source, /const scenarioCards = \[/)
  assert.equal(source.includes('EasyCode 全链路项目生成平台'), true)
  assert.equal(source.includes('从业务描述到可运行源码交付'), true)
  assert.equal(source.includes('需求与项目设置'), true)
  assert.equal(source.includes('系统蓝图'), true)
  assert.equal(source.includes('数据库与 ER'), true)
  assert.equal(source.includes('页面与业务块'), true)
  assert.equal(source.includes('图表中心'), true)
  assert.equal(source.includes('代码与文档'), true)
  assert.equal(source.includes('运行预览'), true)
  assert.equal(source.includes('源码交付'), true)
  assert.equal(source.includes('源码库'), true)
  assert.equal(source.includes('论文初稿'), true)
  assert.equal(source.includes('代码解读'), true)
  assert.equal(source.includes("path: '/generate'"), true)
  assert.equal(source.includes("mode: 'one-click'"), true)
  assert.equal(source.includes("router.push('/source-store')"), true)
})
```

- [ ] **Step 2: Run the focused test to verify RED**

Run from `easycode-web`:

```powershell
node --test src/views/homeView.test.mjs
```

Expected: FAIL because `HomeView.vue` still has `workflowSteps` and does not yet contain the new product showcase contract.

## Task 2: Implement Product Showcase Homepage

**Files:**
- Modify: `easycode-web/src/views/HomeView.vue`
- Test: `easycode-web/src/views/homeView.test.mjs`

- [ ] **Step 1: Replace template sections**

Use these sections in order:

1. `.hero-section` with platform positioning, keyword input, example chips, buttons for projects and source store, plus `.hero-capability-panel`.
2. `.journey-section` with `journeySteps` rendered as `.journey-card`.
3. `.extension-section` with `extensionCapabilities` rendered as `.extension-card`.
4. `.scenario-section` with `scenarioCards`.
5. `.quick-entry-section` with three final CTA buttons.

- [ ] **Step 2: Replace script data**

Use `journeySteps`, `extensionCapabilities`, `scenarioCards`, and `quickActions` arrays. The journey array must contain exactly these titles:

```js
[
  '需求与项目设置',
  '系统蓝图',
  '数据库与 ER',
  '页面与业务块',
  '图表中心',
  '代码与文档',
  '运行预览',
  '源码交付'
]
```

Keep `handleGenerate()` routing to `/generate` with `mode: 'one-click'` and optional `keyword`. Add `goSourceStore()` with `router.push('/source-store')`.

- [ ] **Step 3: Replace scoped styles**

Keep the established 8px radius and restrained Element Plus look. Use responsive grid rules:

```scss
@media (max-width: 1060px) {
  .hero-section,
  .extension-grid,
  .scenario-grid,
  .quick-entry-section {
    grid-template-columns: 1fr;
  }

  .journey-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .quick-form,
  .journey-grid {
    grid-template-columns: 1fr;
  }
}
```

- [ ] **Step 4: Run focused test to verify GREEN**

Run from `easycode-web`:

```powershell
node --test src/views/homeView.test.mjs
```

Expected: PASS with one passing test and zero failures.

## Task 3: Verify Build and Browser

**Files:**
- Verify: `easycode-web/src/views/HomeView.vue`
- Verify: `easycode-web/src/views/homeView.test.mjs`

- [ ] **Step 1: Run Vite build**

Run from `easycode-web`:

```powershell
npm run build
```

Expected: exit code 0. If build fails, read the error and fix only failures caused by this homepage change.

- [ ] **Step 2: Start or reuse the Vite dev server**

Run from `easycode-web`:

```powershell
npm run dev -- --host 127.0.0.1
```

Expected: dev server prints a local URL, usually `http://127.0.0.1:5173/` or another available port.

- [ ] **Step 3: Inspect the homepage in the browser**

Open the local URL and check desktop and mobile widths. Confirm:

- Hero text, input, buttons, and ability panel do not overlap.
- Journey cards render as 4 columns on desktop, 2 columns on medium screens, and 1 column on mobile.
- Extension and scenario sections remain readable.
- Source store and generate actions are visible.

## Self-Review

- Spec coverage: covered hero, 8-stage journey, extensions, scenarios, quick actions, preserved navigation, responsive rules, and tests.
- Placeholder scan: no TODO, TBD, or deferred implementation steps.
- Type consistency: test names use `journeySteps`, `extensionCapabilities`, and `scenarioCards`, matching the planned `HomeView.vue` data arrays.