yidaima/RuoYi-Vue/docs/superpowers/plans/2026-07-07-easycode-homepage-product-showcase.md

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:

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:

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:

[
  '需求与项目设置',
  '系统蓝图',
  '数据库与 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:

@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:

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:

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:

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.