yidaima/RuoYi-Vue/docs/audits/page-generator-2026-06-25/notes.md

Page Generator Audit - 2026-06-25

Scope

• Surface: EasyCode standalone page designer at /project/:projectId/page-designer.
• Evidence captured: login guard screenshot from the running Vite app.
• Evidence limit: the route requires auth, and the browser security policy blocked temporary localStorage token injection and local file:// mockup preview. Full authenticated canvas behavior was reviewed from source and tests rather than a live backend session.

Captured Steps

1. 01-login-guard.png - unauthenticated deep link to the page designer redirects to login. General health: functional, but the warning text still says "生成工作台", which is imprecise for page designer deep links.

Current Strengths

• The page designer is now a focused standalone route instead of being embedded directly in the generation workbench.
• The core editor already has a recognizable low-code layout: material pane, canvas, property pane, menu preview, business blocks, and front/admin scope switching.
• Important behavior has test coverage: menu grouping, dirty guards, hidden associated pages, business block layouts, page-type layout choices, and standalone route integration.
• Backend persistence validates page metadata, optimistic version conflicts, layout JSON, action JSON, embedded business blocks, and supported action permissions.

Recommended Improvements

1. Make deep-link/login messages page-aware. The router currently uses one generic "请先登录后再使用生成工作台" message for all protected routes, including page designer links.
2. Add a first-run/empty-state checklist. When no designs exist, the UI only says to initialize. It should show what is missing: project, database tables, blueprint, page designs, business blocks.
3. Add clearer selected-state breadcrumbs in the right pane. The same property pane switches between page, directory, menu, business button, and business block configuration; users need a stronger "currently editing X" cue.
4. Reduce destructive surprises when changing bound table or page type. resetLayoutForTable() rebuilds field regions; ask for confirmation or show a diff when existing manual placement would be lost.
5. Promote JSON editing to an advanced/debug area. It is useful, but exposing raw layout/action JSON in the default property pane increases risk for normal users.
6. Track dirty state per page or per design ID. A single hasUnsavedChanges flag is simple, but saving one page can hide pending edits elsewhere as the designer grows.
7. Add non-drag alternatives for field/button placement. Many controls are drag-first; add keyboard-friendly add/remove/reorder actions and visible move buttons for accessibility.
8. Improve business action affordance. Unmatched business actions are visually muted, but users need an explicit reason and a path to bind/fix table mismatch.
9. Add live generated-preview confidence. Before "预览页面", show whether all required tables, fields, routes, and business block configs are valid.
10. Fix source-level mojibake in backend error text at FrontendPageDesignService.java:649.

Verification

• node --test src/components/frontendPageDesigner.test.mjs src/views/pageDesignerView.test.mjs src/utils/pageDesignerMenu.test.mjs: 56 tests passed.
• mvn -q -pl ruoyi-generator -Dtest=FrontendPageDesignServiceTest test: 24 tests passed.