feat: expand EasyCode software factory workflows

RuoYi-Vue/docs/superpowers/plans/2026-06-25-frontend-detail-media-layout.md

@@ -0,0 +1,104 @@
+# 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.