105 lines
4.6 KiB
Markdown
105 lines
4.6 KiB
Markdown
|
# 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.
|