# Frontend Detail Media Layout 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:** Implement the frontend page designer's image-and-text detail layout so it is editable, saved, normalized, and generated into Qing Vue pages.

**Architecture:** Add a `detail` layout region for `frontend-detail-media-v1` with `titleField`, `imageField`, `summaryField`, and ordered `fields`. The Vue designer renders a dedicated media-detail canvas, the Java page-design service preserves and validates those fields, and Velocity exposes detail-media context to the Qing template.

**Tech Stack:** Vue 3, Element Plus, Node `node:test`, Java JUnit, Apache Velocity templates.

---

### Task 1: Designer Media Detail Canvas

**Files:**
- Modify: `easycode-web/src/components/FrontendPageDesigner.vue`
- Test: `easycode-web/src/components/frontendPageDesigner.test.mjs`

- [ ] **Step 1: Write the failing test**

Add a source-level test that expects `isDetailMediaLayout`, `detailMediaRegion`, media-specific field setters, and `detail-media-preview` markup.

- [ ] **Step 2: Run the frontend designer test**

Run: `node --test easycode-web/src/components/frontendPageDesigner.test.mjs`
Expected: FAIL because the media-detail canvas helpers and markup do not exist yet.

- [ ] **Step 3: Implement the minimal designer code**

Add computed helpers for media detail, a dedicated canvas branch, default region initialization, drag/drop single-field binding for `titleField`, `imageField`, and `summaryField`, plus right-panel field selectors.

- [ ] **Step 4: Run the frontend designer test**

Run: `node --test easycode-web/src/components/frontendPageDesigner.test.mjs`
Expected: PASS.

### Task 2: Backend Layout Normalization

**Files:**
- Modify: `ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/FrontendPageDesignService.java`
- Test: `ruoyi-generator/src/test/java/com/ruoyi/generator/service/front/FrontendPageDesignServiceTest.java`

- [ ] **Step 1: Write the failing test**

Add a service test that updates a detail page with `frontend-detail-media-v1` and a `detail` region using database column names. It should assert the persisted JSON contains normalized Java field names for `titleField`, `imageField`, `summaryField`, and `fields`.

- [ ] **Step 2: Run the service test**

Run: `mvn -q -pl ruoyi-generator -Dtest=FrontendPageDesignServiceTest test`
Expected: FAIL because `summaryField` is not normalized and default detail layout is not media-aware.

- [ ] **Step 3: Implement the minimal service code**

Normalize `summaryField`, add detail-region defaults for detail page layouts, and ensure `frontend-detail-media-v1` keeps a `detail` region shape.

- [ ] **Step 4: Run the service test**

Run: `mvn -q -pl ruoyi-generator -Dtest=FrontendPageDesignServiceTest test`
Expected: PASS.

### Task 3: Qing Template Rendering

**Files:**
- Modify: `ruoyi-generator/src/main/java/com/ruoyi/generator/util/VelocityUtils.java`
- Modify: `ruoyi-generator/src/main/resources/qing/index.vue.vm`
- Test: `ruoyi-generator/src/test/java/com/ruoyi/generator/util/QingTemplateSupportTest.java`

- [ ] **Step 1: Write the failing test**

Add a template test that provides `frontend-detail-media-v1` with title, image, summary, and detail fields. It should assert the Velocity context has media-detail flags and the rendered Vue contains media-detail classes and resource image binding.

- [ ] **Step 2: Run the template test**

Run: `mvn -q -pl ruoyi-generator -Dtest=QingTemplateSupportTest test`
Expected: FAIL because the context and template do not expose media-detail rendering.

- [ ] **Step 3: Implement the minimal context and template code**

Expose `pageDesignIsMediaDetail`, `pageDesignDetailColumns`, `pageDesignDetailTitleColumn`, `pageDesignDetailImageColumn`, and `pageDesignDetailSummaryColumn`, then branch the detail template to render a media hero before the detail grid.

- [ ] **Step 4: Run the template test**

Run: `mvn -q -pl ruoyi-generator -Dtest=QingTemplateSupportTest test`
Expected: PASS.

### Task 4: Final Verification

**Files:**
- Verify changed frontend and generator paths.

- [ ] **Step 1: Run focused frontend test**

Run: `node --test easycode-web/src/components/frontendPageDesigner.test.mjs`
Expected: PASS.

- [ ] **Step 2: Run focused Java tests**

Run: `mvn -q -pl ruoyi-generator -Dtest=FrontendPageDesignServiceTest,QingTemplateSupportTest test`
Expected: PASS.

- [ ] **Step 3: Run build if focused tests pass**

Run: `npm run build` from `easycode-web`
Expected: PASS.