Files
yidaima/RuoYi-Vue/docs/superpowers/plans/2026-05-24-easycode-profile-center.md

3.7 KiB

EasyCode Profile Center 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: Build the lightweight /profile personal center for EasyCode front users.

Architecture: Reuse existing front project, source purchase, and AI quota APIs. Add only the missing front-account profile update and password update APIs, then compose a single Vue 3 + Element Plus profile page.

Tech Stack: Spring Boot, MyBatis, JUnit 4, Mockito, Vue 3, Vue Router 4, Element Plus, Node node:test.


Task 1: Backend Account Update APIs

Files:

  • Modify: ruoyi-admin/src/test/java/com/ruoyi/web/service/front/FrontAuthServiceTest.java

  • Modify: ruoyi-admin/src/main/java/com/ruoyi/web/controller/front/FrontAuthController.java

  • Modify: ruoyi-admin/src/main/java/com/ruoyi/web/service/front/FrontAuthService.java

  • Modify: ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/IFrontUserService.java

  • Modify: ruoyi-generator/src/main/java/com/ruoyi/generator/service/front/FrontUserServiceImpl.java

  • Create: ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/FrontProfileUpdateBody.java

  • Create: ruoyi-generator/src/main/java/com/ruoyi/generator/domain/front/dto/FrontPasswordUpdateBody.java

  • Step 1: Write failing backend tests

Add tests proving profile update returns a password-free profile and password update rejects the wrong old password.

  • Step 2: Run backend tests and verify RED

Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test

Expected: compilation/test failure because new DTOs and service methods do not exist yet.

  • Step 3: Add DTOs and service methods

Add request DTOs and implement updateProfile / updatePassword using current front user id, existing password matching, and FrontUserMapper.updateFrontUser.

  • Step 4: Run backend tests and verify GREEN

Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test

Expected: tests pass.

Task 2: Frontend Route, API, Header, and Page

Files:

  • Create: easycode-web/src/views/profileView.test.mjs

  • Create: easycode-web/src/views/ProfileView.vue

  • Modify: easycode-web/src/api/auth.js

  • Modify: easycode-web/src/router/index.js

  • Modify: easycode-web/src/components/AppHeader.vue

  • Step 1: Write failing frontend tests

Add a source-level node:test file that asserts /profile is protected, the header links to it, and ProfileView.vue imports and uses the required APIs.

  • Step 2: Run frontend tests and verify RED

Run: node src/views/profileView.test.mjs from easycode-web.

Expected: failure because ProfileView.vue does not exist and route/header/API entries are missing.

  • Step 3: Implement route, API helpers, header entry, and page

Add the protected route, auth API helpers, clickable profile entry in the header, and a tabbed profile center page with independent loading states.

  • Step 4: Run frontend tests and verify GREEN

Run: node src/views/profileView.test.mjs from easycode-web.

Expected: tests pass.

Task 3: Verification

Files:

  • Verify all changed backend, frontend, and doc files.

  • Step 1: Run focused backend test

Run: mvn -pl ruoyi-admin -Dtest=FrontAuthServiceTest test

Expected: build success with FrontAuthServiceTest passing.

  • Step 2: Run focused frontend source test

Run: node src/views/profileView.test.mjs from easycode-web.

Expected: all assertions pass.

  • Step 3: Run frontend production build

Run: npm run build from easycode-web.

Expected: Vite build completes successfully.