wangpeng/yidaima
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
yidaima/RuoYi-Vue/docs/superpowers/plans/2026-06-25-frontend-detail-media-layout.md

4.6 KiB
Raw Permalink Blame History

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.